@font-face {
   font-family: 'DindanMai';
   src: url("fonts/DindanMai-Regular.otf") format("opentype");
   font-weight: 300;
   font-style: normal;
}


@font-face {
   font-family: 'DindanMai';
   src: url("fonts/DindanMai-Bold.otf") format("opentype");
   font-weight: 600;
   font-style: normal;
}



@font-face {
   font-family: 'DindanMai';
   src: url("fonts/DindanMai-Light.otf") format("opentype");
   font-weight: 100;
   font-style: normal;
}


/* @font-face {
   font-family: 'MUJIFont2020';
   src: url("fonts/MUJIFont2020-Regular1.otf") format("opentype");
   font-weight: 300;
   font-style: normal;
}


@font-face {
   font-family: 'MUJIFont2020';
   src: url("fonts/MUJIFont2020-Bold1.otf") format("opentype");
   font-weight: 600;
   font-style: normal;
}



@font-face {
   font-family: 'MUJIFont2020';
   src: url("fonts/MUJIFont2020-Heavy 1.otf") format("opentype");
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'MUJIFont2020';
   src: url("fonts/MUJIFont2020-Light 1.otf") format("opentype");
   font-weight: 100;
   font-style: normal;
} */


:root {
   --common-gray-900: #1d1d1f;
   --common-gray-800: #3c3c43;
   --common-gray-600: #76767b;
   --common-gray-500: #9d9da0;
   --common-gray-400: #c4c4c6;
   --common-gray-300: #d8d8d9;
   --common-gray-200: #ebebec;
   --common-gray-100: #f5f5f5;
   --common-beige-250: #f2f1ed;
}


main {

   font-family: 'DindanMai', sans-serif;
   --font-size-52: 52px;
   --font-size-40: 40px;
   --font-size-32: 32px;
   --font-size-26: 26px;
   --font-size-24: 24px;
   --font-size-22: 22px;
   --font-size-20: 20px;
   --font-size-18: 18px;
   --font-size-16: 16px;
   --font-size-14: 14px;
   --font-size-12: 12px;

   --fon-size-btn-14: 14px;

   --font-weight-500: 500;


}

/* :lang(en) main {
   font-family: 'MUJIFont2020', sans-serif;
   --font-size-52: 48px;
   --font-size-40: 36px;
   --font-size-32: 28px;
   --font-size-26: 22px;
   --font-size-24: 20px;
   --font-size-22: 18px;
   --font-size-20: 16px;
   --font-size-18: 14px;
   --font-size-16: 14px;
   --font-size-14: 12px;
   --font-size-12: 10px;

   --fon-size-btn-14: 12px;


   --font-weight-500: 300;

} */

body {
   /* font-family: 'DindanMai', sans-serif; */
   font-weight: normal;
   color: var(--common-gray-800);
   min-height: 100dvh;
}


header {
   font-family: 'DindanMai', sans-serif;
   font-size: 16px;
}

/* :lang(en) header {
   font-family: 'MUJIFont2020', sans-serif;
   font-size: 13px !important;

} */


footer {
   font-family: 'DindanMai', sans-serif !important;
}

/* :lang(en) footer {
   font-family: 'MUJIFont2020', sans-serif !important;

} */

:lang(en) .privacy p {
   font-weight: 100;
}



nav {
   font-family: 'DindanMai', sans-serif;
}

/* :lang(en) nav {
   font-family: 'MUJIFont2020', sans-serif;
} */



/* main {
   min-height: 100dvh;
} */


.page {
   margin: 0;
}


a {
   text-decoration: none;
   color: var(--common-gray-800);
}

a:visited {
   text-decoration: none;
   color: var(--common-gray-800);
}

a:focus {
   outline: none;
}

a:hover {
   color: var(--common-gray-800);

}

*:focus {
   outline: none;
}



/* header css */
* {
   box-sizing: border-box
}

.site-branding img {
   max-height: 30px;
   height: 100%;
   width: 100%;
   max-width: 180px
}

.headerinner {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.site-header.sticky-top {
   position: sticky;
   top: 0;
   z-index: 1002;
   background: #fff
}

body.admin-bar .site-header.sticky-top {
   top: 32px
}

@media (max-width:782px) {
   body.admin-bar .site-header.sticky-top {
      top: 46px
   }
}

body.no-scroll {
   position: fixed;
   /* width: 100%; */
   overflow: hidden
}

html.no-scroll,
body.no-scroll {
   overflow: hidden
}

.header-spacer {
   display: block;
   height: 0
}

.main-navigation {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: 0;
   padding: 0;
   justify-content: end
}

#primary-menu,
.main-navigation>ul.menu {
   display: flex;
   align-items: center;
   gap: .25rem;
   margin: 0;
   padding: 0;
   list-style: none
}

#primary-menu>li {
   position: relative;
   list-style: none
}

#primary-menu>li>a {
   padding: .25rem 1rem;
   color: #3C3C43;
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
   position: relative;
}

#primary-menu>li:nth-child(3) {
   margin-left: .5rem;
   padding-left: .5rem
}

#primary-menu>li:nth-child(3)::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
   height: 26px;
   background-color: #D1D5DB
}

#primary-menu>li>a::after {
   content: "";
   position: absolute;
   left: 1rem;
   right: 1rem;
   bottom: 0;
   height: 2px;
   background: #111827;
   opacity: 0;
   transform: none !important;
   transition: none
}

#primary-menu>li>a:hover::after,
#primary-menu>li>a:focus-visible::after {
   opacity: 1
}

.menu-lang-divider {
   width: 1px;
   height: 26px;
   background-color: #D1D5DB;
   display: inline-block;
   align-self: center
}

.lang-switcher {
   display: flex;
   align-items: center;
   gap: .5rem
}

.lang-switcher a {
   text-transform: uppercase;
   letter-spacing: .02em;
   color: #9CA3AF;
   font-weight: 300;
   text-decoration: none
}

.lang-switcher a.active {
   color: #111827
}

.lang-switcher .divider {
   color: #9CA3AF
}

.globalheader_header {
   padding: 1rem 0
}

.menu-toggle {
   appearance: none;
   border: 0;
   background: transparent;
   padding: .5rem;
   cursor: pointer;
   display: none
}

.hamburger {
   width: 22px;
   height: 22px;
   position: relative;
   display: inline-block
}

.hamburger .line {
   position: absolute;
   left: 0;
   right: 0;
   height: 2px;
   background: #111827;
   border-radius: 50px;
   transition: transform .3s ease, opacity .3s ease, top .3s ease
}

.hamburger .line:nth-child(1) {
   top: 0
}

.hamburger .line:nth-child(2) {
   top: 9px
}

.hamburger .line:nth-child(3) {
   top: 18px
}

.menu-toggle.is-active .line:nth-child(1) {
   transform: translateY(9px) rotate(45deg)
}

.menu-toggle.is-active .line:nth-child(2) {
   opacity: 0
}

.menu-toggle.is-active .line:nth-child(3) {
   transform: translateY(-9px) rotate(-45deg)
}

#navmobile {
   position: fixed;
   left: 0;
   width: 100%;
   background: #fff;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
   z-index: 1001;
   display: flex;
   flex-direction: column;
   min-height: 0;
   opacity: 0;
   visibility: hidden;
   transform: none;
   transition:
      opacity .20s ease-out,
      visibility 0s linear .20s;
}

#navmobile.is-open {
   opacity: 1;
   visibility: visible;
   transition:
      opacity .20s ease-out,
      visibility 0s linear 0s;
}


#navmobile>.container {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
   height: 100%
}

.navmobile-content {
   flex: 1 1 auto;
   height: 100%;
   min-height: 0;
   overflow: auto;
   -webkit-overflow-scrolling: touch
}

.navmobile-menu {
   list-style: none;
   padding: 0;
   margin: 10px 0 0 0;
   display: flex;
   flex-direction: column;
   gap: 2px
}

.navmobile-menu>li {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px
}

.navmobile-menu>li>a {
   flex: 1 1 auto;
   display: block;
   padding: 12px 0;
   text-decoration: none;
   color: #111827;
   font-weight: 600
}

.navmobile-menu>li a:hover {
   background: #f3f4f6
}

.navmobile-toggle {
   position: relative;
   appearance: none;
   border: 0;
   background: transparent;
   border-radius: 8px;
   min-width: 36px;
   height: 36px;
   display: inline-grid;
   place-items: center;
   cursor: pointer
}

.navmobile-toggle .pm {
   position: relative;
   width: 14px;
   height: 14px;
   transition: transform .25s ease
}

.navmobile-toggle .pm-h,
.navmobile-toggle .pm-v {
   position: absolute;
   background: #9CA3AF;
   transition: transform .25s ease, opacity .25s ease
}

.navmobile-toggle .pm-h {
   top: 50%;
   left: 0;
   right: 0;
   height: 2px;
   transform: translateY(-50%)
}

.navmobile-toggle .pm-v {
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   transform: translateX(-50%)
}

.navmobile-toggle[aria-expanded="true"] .pm {
   transform: rotate(180deg)
}

.navmobile-toggle[aria-expanded="true"] .pm-v {
   transform: translateX(-50%) scaleY(0);
   opacity: 0
}

.navmobile-announce {
   width: 100%;
   display: none;
   overflow: hidden
}

.navmobile-announce.is-open {
   display: block
}

.navmobile-announce .mob-wrap {
   padding: 12px;
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee
}

.navmobile-announce .mob-inner {
   display: flex;
   gap: 24px;
   align-items: center
}

.navmobile-announce .mob-media {
   flex: 0 0 140px;
   max-width: 140px
}

.navmobile-announce .mob-media img {
   display: block;
   width: 100%;
   height: 100px;
   object-fit: cover
}

.navmobile-announce .mob-content {
   flex: 1 1 auto
}

.navmobile-announce .mob-logo {
   margin: 0 0 6px
}

.navmobile-announce .mob-logo img {
   height: 32px;
   width: auto;
   display: block;
   margin-bottom: 20px
}

.navmobile-announce .mob-text {
   font-size: var(--font-size-14);
   color: #1f2937;
   /* white-space: pre-wrap */
}

.mob-text p {
   margin-bottom: 4px;
}

.navmobile-announce .mob-actions {
   margin-top: 0px;
   height: 100%;
}

@media (min-width:1000px) {
   .globalheader_header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 1.5rem 0;
      background: #fff
   }

   .container {
      max-width: 1352px !important;
      padding: 0 4rem;
      width: 100%
   }

   .menu4-tab {
      position: fixed;
      left: 0;
      width: 100%;
      background: #fff;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
      z-index: 998;
      border-top: 1px solid #E5E7EB;

   }

   .menu4-tab.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);

   }

   .menu4-tab .tab-inner {
      padding: 18px 0
   }

   .menu4-tab .tab-media img {
      display: block;
      width: 100%;
      max-width: 410px;
      height: 225px;
      object-fit: cover
   }

   .menu4-tab .tab-logo img {
      height: 44px;
      width: auto;
      display: block
   }

   .menu4-tab .tab-text {
      white-space: pre-wrap
   }

   .menu4-tab.is-open .tab-text {
      color: #111827
   }

   body.menu4-dim::before {
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      z-index: 997;
      pointer-events: none;
   }




   .header-btn {
      font-size: 1rem;
      display: inline-flex;
      align-items: center;
      padding: 28px 22px;
      border: 1px solid #1D1D1F;
      border-radius: 12px;
      text-decoration: none;
      color: #1D1D1F;
      font-weight: 600;
      justify-content: space-between;
      width: 260px;
   }


   .header-btn:hover,
   .header-btn:focus-visible {
      color: var(--common-gray-800);
      background-color: var(--common-beige-250);
   }

   .header-btn-text {
      line-height: 1
   }

   .muji-btn-icon {
      display: inline-flex
   }
}

@media (max-width:999px) {
   .site-header.globalheader_header.sticky-top {
      position: fixed !important;
      top: 0 !important;
      left: 0;
      right: 0;
      z-index: 1002;
      background: #fff
   }

   body.admin-bar .site-header.globalheader_header.sticky-top {
      top: 46px
   }

   #primary-menu,
   .menu-lang-divider,
   nav.lang-switcher {
      display: none !important
   }

   .menu-toggle {
      display: flex;
      align-items: center
   }

   .menu4-tab {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      transform: none !important;
      box-shadow: none !important;
      height: 0 !important
   }

   .header-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 16px 18px;
      border: 1px solid #1D1D1F;
      border-radius: 12px;
      text-decoration: none;
      color: #1D1D1F;
      font-weight: 600;
      width: 100%;
      justify-content: space-between;
      margin-top: 12px
   }

   .navmobile-lang {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .5rem;
      width: 100%;
      padding: 12px 0;
      text-align: center;
      margin: 0 auto
   }

   .navmobile-lang .divider {
      display: inline-block
   }

   .navmobile-announce .mob-inner {
      flex-direction: column;
      align-items: stretch
   }

   .navmobile-announce .mob-media {
      flex: 0 0 auto;
      max-width: 100%
   }

   .navmobile-announce .mob-media img {
      width: 100%;
      height: 225px;
      object-fit: cover
   }

   .menu4-tab .tab-media img {
      width: 100%;
      height: 225px;
      object-fit: cover;
      border-radius: 10px
   }

   .navmobile-container {
      padding: 0 0 0 0
   }

   .navmobile-inner {
      padding-left: 16px
   }

   .navmobile-menu {
      gap: 0
   }

   .navmobile-menu>li:nth-child(3),
   .navmobile-menu>li:nth-child(4),
   .navmobile-menu>li:nth-child(6) {
      padding: 8px
   }

   .navmobile-menu>li:nth-child(n+2) {
      border-bottom: 1px solid #e5e7eb
   }

   .navmobile-menu>li:nth-child(n+3) {
      padding-left: 16px
   }
}

.menu4-tab .tab-inner {
   align-items: flex-start
}

.menu4-tab .tab-content {
   align-items: flex-start
}

.menu4-tab .tab-logo {
   margin-top: 0
}

.menu4-tab .tab-logo img {
   display: block
}

/* footer */

.site-footer {
   background-color: #F5F5F5;
   min-height: 200px;
}

.text-col2-footer {
   display: flex;
}

.text-col2-footer a {
   color: inherit;
   text-decoration: none;
}

.text-col2-footer a:hover {
   text-decoration: none;
}

.text-col2-footer p {
   font-size: var(--font-size-12);
   font-weight: 100;
}


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

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


.text-last-footer {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-end;
   height: 100%;
   text-align: right;
}

.text-last-footer p {
   font-size: var(--font-size-12);
   font-weight: 100;
}

@media (max-width: 992px) {
   .text-last-footer {
      display: unset;
      text-align: start;
   }
}

@media (max-width: 991.98px) {

   .site-footer .footer-col-right-inner {
      display: flex;
      flex-direction: column;
   }

   .site-footer .footer-logo-jp {
      order: -1;
   }
}

@media (min-width: 992px) {
   .site-footer .footer-logo-jp {
      order: 0;
   }
}


.statement {
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: grid;
   place-items: center;
   padding: min(12vw, 160px) 24px;
   width: 100%;
}

.statement_inner {
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
   color: white;
}

.statement_inner>*:first-child {
   margin-top: 0
}

.statement_inner>*:last-child {
   margin-bottom: 0
}


.statement_inner h5 {
   font-size: var(--font-size-14);
}

.statement_inner h3 {
   font-size: var(--font-size-24);
}

.statement_inner h2 {
   font-size: var(--font-size-24);
   font-weight: 600;
}

.statement_inner p {
   font-size: var(--font-size-16);
   font-weight: 300;
}


.exh-option {
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: grid;
   place-items: center;
   padding: min(12vw, 160px) 24px;
   width: 100%;
}

.exh-option-inner {
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
   color: white;
}

.exh-option-inner h2 {
   font-size: var(--font-size-24);
   font-weight: 600;
}

.exh-option-inner p {
   font-size: var(--font-size-16);
   font-weight: var(--font-weight-500);
}


.exh-option-inner>*:first-child {
   margin-top: 0
}

.exh-option-inner>*:last-child {
   margin-bottom: 0
}

.exh-option-link span {
   font-size: var(--font-size-16);
   color: #fff;
   text-decoration: underline;
   font-weight: 100;

}

.exh-option-link-anchor {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.exh-option-link-anchor svg {
   width: 16px;
   height: 16px;
}

@media (max-width: 992px) {

   .exh-option-inner h2 {
      font-size: var(--font-size-18);
   }

   .exh-option-inner p {
      font-size: var(--font-size-14);
   }

   .exh-option-link span {
      font-size: var(--font-size-14);

   }
}



/* slide pagination css */

.lt-center-slider {
   padding: 40px 0;
   display: flex;
   align-items: center;
   overflow-x: hidden;
}

.lt-center-slider .swiper-container {
   width: 100%;
   height: 489px;
   position: relative;
   overflow: visible;
}

.lt-center-slider .swiper-wrapper {
   align-items: center;
}

.lt-center-slider .swiper-slide {
   width: 652px;
   height: 489px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   transition: transform .3s ease, opacity .3s ease;
   opacity: 1;
}

.lt-center-slider .slide-media {
   width: 100%;
   height: 100%;
}

.lt-center-slider .slide-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

.lt-center-slider .pagination-wrapper {
   margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
}

.lt-center-slider .sec-pagination {
   position: static !important;
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto !important;
}

/* owl dots container */
.lt-center-slider .sec-pagination .owl-dots {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
}

/* owl dot style */
.lt-center-slider .sec-pagination .owl-dot {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 8px;
   height: 8px;
   margin: 0 .2rem !important;
   border-radius: 50%;
   background: #C4C4C6;
   opacity: .7;
   border: none;
   padding: 0;
   line-height: 1;
   vertical-align: middle;
   position: relative;
   cursor: pointer;
}

.lt-center-slider .sec-pagination .owl-dot span {
   display: none;
}

.lt-center-slider .sec-pagination .owl-dot:focus-visible {
   outline: 2px solid #3C3C43;
   outline-offset: 2px;
}

.lt-center-slider .sec-pagination .owl-dot.active {
   background: #3C3C43;
   opacity: 1;
}

.lt-center-slider .sec-pagination .owl-dot.active::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 14px;
   height: 14px;
   border: 1px solid #3C3C43;
   border-radius: 50%;
   box-sizing: border-box;
}

.lt-center-slider .custom-home-btn {
   background: transparent;
   border: none;
   border-radius: 0;
   box-shadow: none;
   width: auto;
   height: auto;
   padding: 6px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #3C3C43;
   transition: color .2s ease, transform .2s ease;
}

.lt-center-slider .custom-home-btn svg {
   width: 16px;
   height: 16px;
   display: block;
}

.lt-center-slider .sec-prev svg {
   transform: rotate(180deg);
}

/* ให้เห็นขอบสไลด์ซ้ายขวา */
.lt-center-slider .owl-stage-outer {
   overflow: visible;
}

@media (max-width: 999px) {
   .lt-center-slider .swiper-container {
      height: 400px !important;
   }

   .lt-center-slider .swiper-slide {
      width: 100% !important;
      height: 400px !important;
   }
}

@media (max-width: 769px) {
   .lt-center-slider .swiper-container {
      height: 350px !important;
   }

   .lt-center-slider .swiper-slide {
      width: 100% !important;
      height: 350px !important;
   }

   .lt-center-slider {
      padding: 32px 0;
      display: flex;
      align-items: center;
      overflow-x: hidden;
   }
}

@media (min-width: 1920px) {
   .lt-center-slider .swiper-container {
      height: 652px;
   }

   .lt-center-slider .swiper-slide {
      width: 870px;
      height: 620px;
   }
}


/* css home banner  */

:root {
   --swiper-theme-color: rgb(231, 19, 26);
   --swiper-navigation-color: #fff;
   --swiper-pagination-color: #ffffff;
   --fade-duration: 500ms;
}

#module {
   display: flex;
   height: auto;
   margin: 0 auto;
   width: 100%;
   max-width: 100%;
}

.swiper-pagination-custom {
   width: auto !important;
   line-height: 0;
   pointer-events: auto;
   align-items: center;
   justify-content: center;
   flex-wrap: nowrap;
   white-space: nowrap;
}

#module .feature {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1;
   background: var(--common-gray-800);
   padding: 2.5rem;
   cursor: grab;
}

#module .feature.dragging {
   cursor: grabbing;
   user-select: none;
}

.feature-content {
   position: relative;
   flex-grow: 1;
   display: block;
}

.text-layer {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: .5rem;
   opacity: 0;
   transition: opacity var(--fade-duration) ease;
   pointer-events: none;
}

.text-layer.active {
   opacity: 1;
   pointer-events: auto;
}

.text-layer h2 {
   font-weight: bold;
   font-size: var(--font-size-32);
   line-height: 1;
   margin-bottom: 30px;
   padding: 0;
   word-wrap: break-word;
   overflow-wrap: anywhere;
   color: #fff;
}

.text-layer p {
   /* margin-bottom: 30px; */
}

.text-layer a {
   display: flex;
   align-items: center;
   gap: .5rem;
   color: #fff;
   font-size: var(--font-size-16);
}

.text-layer a svg {
   color: #fff;
   position: relative;
   top: -2px;
}

.text-layer a:hover {
   text-decoration: none;
   /* color: var(--swiper-theme-color); */
}

#module .swiper {
   flex: 2;
}

.swiper {
   width: 100%;
   height: auto;
}

.swiper-slide {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   position: relative;
   overflow: hidden;
   cursor: grab;
}

.swiper-slide:active {
   cursor: grabbing;
}

/* .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   pointer-events: none;
   user-select: none;
} */

.feature-nav {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 1.25rem;
   padding-top: .75rem;
   gap: .5rem;
}

.swiper-button-prev-custom,
.swiper-button-next-custom {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   color: #fff;
   font-size: var(--font-size-12);
   font-weight: bold;
   opacity: .9;
   transition: opacity .2s ease;
}

.swiper-button-prev-custom:hover,
.swiper-button-next-custom:hover {
   opacity: 1;
}

.swiper-pagination-bullet {
   width: 6px;
   height: 6px;
   background-color: var(--swiper-pagination-color);
   opacity: .6;
   transition: all .2s ease;
   position: relative;
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
   margin: 0 .2rem !important;
}

.swiper-pagination-bullet:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}

.swiper-pagination-bullet-active {
   background-color: var(--swiper-pagination-color);
   opacity: 1;
}

.swiper-pagination-bullet-active::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 10px;
   height: 10px;
   border: 1px solid var(--swiper-pagination-color);
   border-radius: 50%;
   box-sizing: border-box;
}


.exh-date {
   font-size: var(--font-size-16);
   font-weight: 100;
   color: #ffffff;

}

.exh-venue {
   font-size: var(--font-size-14);
   color: #ffffff;
}

@media (min-width: 1001px) {
   #module {
      /* height: 820px; */
      flex-direction: row;
   }

   .swiper {
      height: 100%;
   }

   /* 
   .swiper-slide {
      height: 100%;
   } */
   /* 
   .swiper-slide img {
      height: 100%;
   } */
}

@media (max-width: 1000px) {
   #module {
      flex-direction: column;
      height: auto;
      padding: 0;
   }

   #module .mySwiper {
      order: 1;
      height: auto;
   }

   #module .feature {
      order: 2;
      height: auto;
      padding: 1.25rem 1.25rem 1.5rem;
   }

   .feature-content {
      position: static;
   }

   .text-layer {
      position: static;
      opacity: 1 !important;
      pointer-events: auto;
      gap: .5rem;
   }

   .text-layer:not(.active) {
      display: none;
   }

   .text-layer h2 {
      font-size: var(--font-size-18);
   }

   .text-layer p {
      font-size: var(--font-size-14);
   }

   .text-layer a {
      font-size: var(--font-size-14);
   }


   /* .swiper-slide {
      height: 400px !important;
   }

   .swiper-slide img {
      height: 400px;
   } */

   .feature {
      display: flex;
      flex-direction: column;
   }

   .feature-nav {
      order: -1;
      margin-top: 0;
      padding-top: 0;
      border-top: none;
      padding-bottom: .75rem;
      margin-bottom: 1rem;
   }
}


@media (max-width: 568px) {
   /* .swiper-slide {
      height: 300px !important;
   } */

}


/* sec 2  */

.section2-container {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 42px;
}

.sec2-maxwith {
   width: 100%;
   max-width: 880px;
   margin: 0 auto;
}

.ate-bkk-card {
   border-radius: 12px;
   overflow: hidden;
   background: #f2f1ed;
   min-height: 195px;
}

.ate-bkk-img img {
   display: block;
   width: 100%;
   height: 100%;
   min-height: 195px;
   object-fit: cover;
}

.combo-content {
   padding: 1.35rem 3rem 1.25rem 3rem;
}

.text-title-bkk a {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   transition: color .15s ease;

}

.text-title-bkk a>p {
   font-size: var(--font-size-24);
   font-weight: 700;
   margin: 0;
   display: inline-block;
}

.combo-content p {
   font-size: var(--font-size-16);
   color: var(--common-gray-900);
   font-weight: 100;
}


.text-title-bkk a:hover {
   color: #3C3C43;
}

.btn-row {
   display: flex;
   gap: 16px;
   flex-wrap: nowrap;
   align-items: center;
}

.btn.btn-custom-home {
   font-size: var(--fon-size-btn-14);
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   text-decoration: none;
   background-color: transparent;
   color: inherit;
   border: 2px solid #1D1D1F;
   border-radius: .7rem;
   padding: 1.25rem 1.5rem;
   width: 200px;

   --bs-btn-hover-bg: transparent;
   --bs-btn-hover-border-color: #1D1D1F;
   --bs-btn-hover-color: inherit;
   --bs-btn-active-bg: transparent;
   --bs-btn-active-border-color: #1D1D1F;
   --bs-btn-active-color: inherit;
   --bs-btn-focus-shadow-rgb: 0, 0, 0;
   transition: color .15s ease;
}

.btn.btn-custom-home:hover,
.btn.btn-custom-home:focus,
.btn.btn-custom-home:active {
   color: #3C3C43 !important;
}



@media (max-width: 992px) {


   .btn.btn-custom-home {
      font-size: var(--font-size-14);
   }

   .text-title-bkk a>p {
      font-size: var(--font-size-18);
   }

   .combo-content p {
      font-size: var(--font-size-14);
   }


   .btn-row {
      flex-direction: column;
      align-items: start;
      width: 100%;
   }

   .btn.btn-custom-home {
      width: 100%;
   }

   .ate-bkk-card {
      max-height: none;
   }

   .combo-content {
      padding: 1rem 1.5rem 1.25rem 1.5rem;
   }

   .ate-bkk-img img {
      min-height: 180px;
      height: auto;
   }
}


/* news home */
.news-section {
   display: flex;
   justify-content: center;
}

.news-container {
   max-width: 100%;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 0 76px;
}

.news-header {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 0 24px;
   gap: 8px;
   width: 100%;
}

.news-title {
   width: 100%;
   height: 42px;
   margin: 0;
   font-weight: 700;
   font-size: var(--font-size-26);
   line-height: 160%;
   color: var(--common-gray-800);
}

.news-item {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 16px 0;
   gap: 4px;
   width: 100%;
   border-bottom: 1px solid var(--common-gray-200);
}

.news-item.news-item-compact {
   padding: 0 0 16px
}

.news-time {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
}

.news-time time {
   font-weight: 400;
   font-size: var(--font-size-12);
   line-height: 160%;
   color: var(--common-gray-600);
}

.news-link {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 4px;
   width: 100%;
   min-height: 22px;
   text-decoration: none;
}

.news-link-text {
   margin: 0 auto 0 0;
   width: 437px;
   height: 22px;
   display: block;
   font-weight: 400;
   font-size: var(--font-size-14);
   line-height: 160%;
   color: var(--common-gray-800);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.news-link:hover .news-link-text {
   color: var(--common-gray-900)
}

@media (max-width: 768px) {
   .news-container {
      padding: 0;
      margin-bottom: 20px;
   }

   .news-title {
      font-size: var(--font-size-22);
      height: auto
   }

   .news-link-text {
      width: 100%
   }
}


/* current */

.current {
   padding: 0 0 48px;
}

.current .current-head {
   padding: 0 0 24px;
}

.current .current-title {
   margin: 0;
   font-weight: 100;
   font-size: var(--font-size-52);
   color: var(--common-gray-800);
}

.current-card {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-width: 0;
}

.img-current {
   position: relative;
   width: 100%;
   background: #C4C4C4;
   overflow: hidden;
}

.img-current::before {
   content: "";
   display: block;
   padding-top: 66.58%;
}

.img-current a {
   position: absolute;
   inset: 0;
   display: block;
}

.img-current img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}


.content-current {
   padding: 24px 0 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.content-current h3 {
   margin: 0;
   font-weight: 700;
   font-size: var(--font-size-20);
   color: var(--common-gray-800);
}

.content-current h3 a {
   color: inherit;
   text-decoration: none;
}

.content-current h3 a:hover {
   text-decoration: none;
}

.date-current {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.date-current .date {
   margin: 0;
   font-weight: 400;
   font-size: var(--font-size-14);
   color: var(--common-gray-800);
}

.date-current .venue {
   margin: 0;
   font-weight: 100;
   font-size: var(--font-size-14);
   color: var(--common-gray-600);
}

.chips {
   display: flex;
   gap: 6px;
   margin-top: 4px;
   flex-wrap: wrap;
}

.chip {
   display: inline-flex;
   align-items: center;
   border: 1px solid #3C3C43;
   border-radius: 17px;
   padding: 6px 14px 8px;
   font-weight: 700;
   font-size: var(--font-size-12);
   color: var(--common-gray-800);
}

.venue {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.venue-prefix {
   position: relative;
   padding-right: 8px;
}

.venue-prefix::after {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   height: 1em;
   border-right: 1px solid currentColor;
}

@media (max-width: 768px) {
   .current {
      padding: 0 0 24px;
   }

   .current .current-title {
      font-size: var(--font-size-32);
   }

}

/* event home */

.event-home-wrap {
   margin: 0 auto
}

.event-home-section-title {
   margin: 0 0 24px 0;
   font-weight: 300;
   font-size: var(--font-size-52);
   line-height: 1;
   color: #3C3C43
}

.event-home-lead {
   max-width: 345px;
   margin: 0;
   font-weight: 400;
   font-size: var(--font-size-16);
   line-height: 1.8;
   color: #3C3C43
}

.event-home-card {
   display: flex;
   flex-direction: column;
   width: 365px;
   max-width: 100%;
   min-width: 0;
}

.event-home-media {
   position: relative;
   width: 100%;
   background: #C4C4C4;
   overflow: hidden
}

.event-home-media::before {
   content: "";
   display: block;
   padding-top: 66.58%
}

.event-home-media img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.event-home-body {
   padding: 24px 0 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 0;
}

.event-home-badge-row {
   display: flex;
   gap: 10px
}

.event-home-badge-tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 38px;
   padding: 8px 8px;
   border-radius: 4px;
   background: #F5F5F5;
   /* font-family: Helvetica, Arial, sans-serif; */
   font-weight: 700;
   font-size: var(--font-size-14);
   line-height: 1.6;
   color: #3C3C43
}

.event-home-badge-tag.is-dark {
   background: #3C3C43;
   color: #fff
}

.event-home-card-title {
   margin: 0;
   font-weight: 700;
   font-size: var(--font-size-18);
   line-height: 1.6;
   color: #3C3C43;

   overflow-wrap: anywhere;
   word-break: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}

.event-home-meta {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.event-home-datetime {
   margin: 0;
   /* font-family: Helvetica, Arial, sans-serif; */
   font-weight: 400;
   font-size: var(--font-size-14);
   line-height: 1.6;
   color: #3C3C43
}

.event-home-btn {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 319px;
   height: 80px;
   border: 1px solid #1D1D1F;
   border-radius: 8px;
   padding: 0 24px;
   margin: 48px auto 0;
   text-decoration: none;
   background: #fff
}

.event-home-btn:hover {
   color: var(--common-gray-800);
   background-color: var(--common-beige-250);
}

.event-home-btn-text {
   /* font-family: Helvetica, Arial, sans-serif; */
   font-weight: 700;
   font-size: var(--font-size-16);
   line-height: 1.6;
   color: #3C3C43
}

@media (min-width: 992px) {
   .event-home-card {
      width: 365px
   }
}

@media (max-width: 992px) {
   .event-home-section-title {
      font-size: var(--font-size-32);
   }
}

/* stament hme */
.menu-tab-logo {
   height: 45px;
}

.img-box-home {
   display: flex;
   /* align-items: center; */
}

.home-address p {
   margin-bottom: 0;
   font-weight: 100;
   font-size: var(--font-size-16);
   color: #1D1D1F;

}

.address-link-list {
   display: grid;
   gap: .5rem;
}

.address-link-item a {
   font-weight: 100;
   font-size: var(--font-size-16);
   display: inline-flex;
   align-items: center;
   gap: .35rem;
   text-decoration: none;
   color: #1D1D1F;
   transition: color .2s ease;
}

.address-link-item a:hover {
   color: #9CA3AF;
}

.muji-btn-icon-address {
   display: inline-flex;
}

.muji-btn-icon-address svg {
   display: block;
   width: 16px;
   height: 16px;
}

/* 
css for navi */

.navigation {
   padding: 16px 0;
}

.navigation .navigation-breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.navigation .navigation-link,
.navigation .navigation-current {
   text-transform: uppercase;
   font-size: var(--font-size-14);
   color: var(--common-gray-800);
   margin: 0;
}

.navigation .navigation-link {
   text-decoration: none;
}

.navigation .navigation-link:hover {
   text-decoration: none;
}

.navigation .navigation-separator {
   display: inline-flex;
   align-items: center;
}

.navigation .navigation-separator svg {
   display: block;
}


@media (max-width: 768.98px) {

   .navigation .navigation-link,
   .navigation .navigation-current {
      font-size: var(--font-size-12);
   }
}