#page2-5 .banner-container { background-image: url(../asset/img/2-2-bg%403x.jpg); z-index: 10; background-color: #FFF; margin-bottom: 24px; }
#page2-5 .content-block { width: 100%; height: 100%; padding-inline: 0px !important; padding-bottom: 120px !important; }
#page2-5 .page-title { font-size: 36px; font-weight: bold; line-height: 1.67; text-align: center; color: #ffffff; margin-block: 32px 24px !important; }
@media (min-width: 1400px){
  #page2-5 .content-block { max-width: 1200px; margin-inline: auto; }
}
@media (max-width: 767px){
  #page2-5 .content-block { padding-bottom: 0px !important; }
  #page2-5 .page-title { font-size: 24px; line-height: 1.2; margin-block: 0px 24px !important; }
}

/* hex */
  .hex-wrapper { height: 400px; display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; gap: 1px; }
  .hex-item { --hex-width: 120px; --hex-height: calc(var(--hex-width) / 1.1547); width: var(--hex-width); height: var(--hex-height); background: #fff; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); padding: calc(var(--hex-width) * 0.15); }
  .hex-item:not(._empty) { cursor: pointer; }
  .hex-item:hover { opacity: 0.9; }
  .hex-item._empty { background: rgba(255,255,255,0.4); backdrop-filter: blur(4px); }
  .hex-wrapper > .hex-item:nth-child(6n+4) { margin-top: calc(var(--hex-height) / 2); }
  .hex-wrapper > .hex-item:nth-child(n+4) { margin-left: calc(var(--hex-width) / -4); }
  .hex-item img { width: 100%; height: 100%; object-fit: contain; }

  @media (max-width: 767px){
    .hex-wrapper { flex-direction: row; align-content: start; justify-content: center; height: auto; max-width: 500px; margin-inline: auto; }
    .hex-item { --hex-width: calc(50% - 1px); --hex-height: unset; aspect-ratio: 9/4; padding: 1.5vw; clip-path: unset; }
    .hex-wrapper > .hex-item:nth-child(n) { margin: 0; }
    .hex-item._empty { display: none; }
  }


  .vendor-content { padding: 1.5rem 15px; }
  .vendor-title { font-size: 24px; font-weight: bold; margin-bottom: 1rem; }
  .vendor-card { border-radius: .75rem; }
  .vendor-card .card-header { padding: 5px 15px; color: white; background-color: #294499; font-size: 14px; font-weight: 700; }
  .card-header:first-child { border-radius: calc(.75rem - 1px) calc(.75rem - 1px) 0 0 }

  @media (max-width: 767px){
    .vendor-content { background-color: #fff; }
  }
  @media (min-width: 768px){
    .vendor-title { color: white; font-size: 36px; text-align: center; }
    .vendor-card { border: 0; box-shadow: 0 1px #dbdbdb; }
  }

  #vendorSwiper .swiper-button-prev,
  #vendorSwiper .swiper-button-next { width: 60px; height: 60px; background-color: #ECECEC; background-size: 50%; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
  #vendorSwiper .swiper-button-prev::after,
  #vendorSwiper .swiper-button-next::after { content: ''; display: block; width: 40px; height: 40px; background: url(../asset/img/arrow-r@3x.png); background-size: contain; transition: transform 0.3s; }
  #vendorSwiper .swiper-button-prev:hover::after,
  #vendorSwiper .swiper-button-next:hover::after { transform: translateX(8px); }

  #vendorSwiper .swiper-button-prev { transform: rotate(180deg); }
  #vendorSwiper .swiper-button-next {}

  @media (max-width: 767px){
    #vendorSwiper .swiper-button-prev,
    #vendorSwiper .swiper-button-next { display: none; }
  }

  #vendorSwiper .swiper-pagination { position: relative; margin-top: 1rem; }
  #vendorSwiper .swiper-pagination-bullet { background: #fff; opacity: 0.4; width: 10px; height: 10px; }
  #vendorSwiper .swiper-pagination-bullet-active { opacity: 1; }