* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font_family_all: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", '微軟正黑體';
}

body {
  font-family: var(--font_family_all);
  overflow-x: hidden;
  background-color: #000;
}

.root,
.app,
.main {
  width: 100%;
}

.top-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5.833vw;
  /* 56px */
  background: #333c;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 5.833vw;
  /* 56px */
  background: #333c;
  color: #ff7e00;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.042vw;
  /* 10px */
  z-index: 1000;
}

.bottom-bar p {
  font-size: 0.9375vw;
  /* 9px */
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.logo img {
  height: 4.167vw;
  /* 40px */
  margin-left: 3.75vw;
  /* 36px */
}

.nav-container {
  display: flex;
  align-items: center;
}

.nav-buttons {
  display: flex;
  white-space: nowrap;
}

.nav-buttons button {
  background: none;
  border: none;
  color: #ff7e00;
  padding: 1.042vw;
  /* 10px */
  cursor: pointer;
  font-size: 1.042vw;
  /* 10px */
  transition: transform 0.3s ease;
}

.nav-buttons button:hover {
  transform: translateY(-0.218vw);
  /* 2px */
}

.lang-toggle-holder {
  width: 5.208vw;
  /* 50px */
  height: 5.208vw;
  /* 50px */
}

.lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.lang-toggle:hover {
  transform: translateY(-0.218vw);
  /* 2px */
}

.main-content {
  margin-top: 0px;
  padding-bottom: 11.67vw;
  /* 112px */
  /*background-image: url('../images/sample_bg.jpg');*/
  background-size: contain;
  /* 保持長寬比，適配寬度 */
  background-position: center top;
  background-repeat: no-repeat;
}

.content-top {
  width: 100%;
  height: 5.833vw;
  /* 56px */
  background-color: #000;
}

.image-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.image-carousel::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.image-carousel img {
  width: 100%;
  height: 40vw;
  /* 384px */
  object-fit: cover;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.content-section {
  overflow-x: hidden;
  padding: 2.083vw;
  /* 20px */
}

.content-section h2 {
  color: #ff7e00;
  font-size: 3.542vw;
  /* 34px */
  margin: 4.688vw 0px;
  /* 45px */
  text-align: center;
}

.content-section h3 {
  color: #ff7e00;
  text-align: center;
  font-size: 2.5vw;
  /* 24px */
  margin-bottom: 1.042vw;
  /* 10px */
}

.content-main {
  display: flex;
}

.content-company-left {
  width: 50%;
  margin-left: 10%;
}

.content-company-1 {
  padding: 0 6.25vw;
  /* 60px */
  padding-top: 3.958vw;
  /* 38px */
}

.content-company-2 {
  width: 100%;
  display: flex;
  padding: 4.167vw 0 0 3.125vw;
  /* 40,30px */
}

.content-contactus-1 {
  width: fit-content;
  display: flex;
  gap: 2.208vw;
  /* 50px */
  margin: 4.688vw auto;
  /* 45px */
}

.content-company-iconset {
  width: 13.54vw;
  /* 130px */
}

.QRCode-label {
  color: #fff;
  font-size: 2.5vw;
  /* 24px */
  text-align: center;
}

.QRCode-label-color {
  color: #ff7e00;
}

.QRCode img {
  width: 12.5vw;
  /* 120px */
  height: 15vw;
  /* 120px */
  object-fit: cover;
}

.content-company-icon {
  margin-top: 0px;
  background-image: url('../A9WebImg/CompanyImg/image_company_1.png');
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  height: 4.688vw;
  /* 45px */
}

.content-company-icon-h {
  width: 100%;
  padding: 0 1.563vw;
  /* 15px */
}

.content-company-icon-b {
  width: 100%;
  padding: 0.52083vw 1.563vw;
  /* 5,15px */
}

.content-company-icon-h p {
  color: white;
  font-size: 1.25vw;
  /* 12px */
  text-align: center;
}

.content-company-icon-b p {
  color: #ccc;
  font-size: 0.8333vw;
  /* 8px */
  text-align: center;
}

.c-icon-1 {
  background-image: url('../A9WebImg/CompanyImg/image_company_1.png');
}

.c-icon-2 {
  background-image: url('../A9WebImg/CompanyImg/image_company_2.png');
}

.c-icon-3 {
  background-image: url('../A9WebImg/CompanyImg/image_company_3.png');
}

.content-company-right {
  width: 40%;
}

.content-company-3 {
  background-image: url('../A9WebImg/CompanyImg/image_company.png');
  background-size: contain;
  /* 保持長寬比，適配寬度 */
  background-position: center top;
  background-repeat: no-repeat;
  width: 32.19vw;
  /* 309px */
  height: 29.69vw;
  /* 285px */
  margin: 3.75vw 0 0 2.5vw;
  /* 36, 24px */
}

.contactimage {
  margin-top: 0px;
  width: 100%;
  height: 22vw;
  /* 200px */
  display: flex;
  padding: 2vw 0 0 10vw;
}

#section_contact {
  background-image: url('../A9WebImg/CompanyImg/image_contactus.png');
  background-size: 23%;
  background-position: 95% 71%;
  background-repeat: no-repeat;
}

.content-contactus {
  width: 100%;
  padding: 0 6.25vw;
  /* 60px */
}

.content-text-1 {
  color: #fff;
  font-size: 1.042vw;
  /* 10px */
  line-height: 1.3;
}

.content-text-2 {
  color: #fff;
  font-size: 1.25vw;
  /* 12px */
  line-height: 1.3;
  text-align: center;
  width: 41.67vw;
  /* 400px */
  margin: 0 auto;
}

.lang-popup {
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  left: -100%;
  background: #333c;
  border: 0.1042vw solid #333;
  /* 1px */
  z-index: 2000;
  box-shadow: 0 0.4167vw 0.8333vw rgba(0, 0, 0, 0.2);
  /* 4, 8px */
  width: 10.42vw;
  /* 100px */
  transition: transform 0.3s ease;
  transform: translateX(200%);
}

.lang-popup-show {
  transform: translateX(0);
}

.lang-popup button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 1.042vw;
  /* 10px */
  cursor: pointer;
  font-size: 1.25vw;
  /* 12px */
  width: 50%;
  text-align: left;
  color: #ff7e00;
}

.lang-popup img {
  width: 2.604vw;
  /* 25px */
  height: 2.604vw;
  /* 25px */
  margin-right: 1.042vw;
  /* 10px */
}

.lang-popup .close-btn {
  position: absolute;
  top: 1.042vw;
  /* 10px */
  right: 1.042vw;
  /* 10px */
  background: none;
  border: none;
  font-size: 1.667vw;
  /* 16px */
  cursor: pointer;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
}

.games-grid-b {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  width: 80vw;
}

.game-card-b {
  background: white;
  border-radius: 0.8vw;
  overflow: hidden;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: block;
  text-align: center;
  margin: 1.09vw;
  width: auto;
  height: 26.04vw;

}

.game-card-b:hover {
  transform: translateY(-1.09vw);

}

.game-card-b-small {
  width: 17.8vw;

}

.game-card-b-large {
  width: 37.8vw;

}

.game-card-b img {
  width: 100%;
  height: 100%;
  cursor: pointer;

}


@media (max-width: 768px) {

  .top-bar {
    height: 44px;
    /* 56px */
  }

  .bottom-bar {
    height: 44px;
    /* 56px */
    padding: 1.042vw;
    /* 10px */
  }

  .bottom-bar p {
    font-size: 7px;
    /* 9px */
  }

  .logo img {
    height: 32px;
    /* 40px */
  }

  .nav-buttons button {
    padding: 1.042vw;
    /* 10px */
    font-size: 8px;
    /* 10px */
  }

  .nav-buttons button:hover {
    transform: translateY(-2px);
    /* 2px */
  }

  .lang-toggle-holder {
    width: 40px;
    /* 50px */
    height: 40px;
    /* 50px */
  }

  .lang-toggle:hover {
    transform: translateY(-2px);
    /* 2px */
  }

  .main-content {
    padding-bottom: 11.67vw;
    /* 112px */
  }

  .content-top {
    height: 44px;
    /* 56px */
  }

  .image-carousel img {
    height: 40vw;
    /* 384px */
  }

  .content-section {
    padding: 2.083vw;
    /* 20px */
  }

  .content-section h2 {
    font-size: 27px;
    /* 34px */
    margin: 4.688vw 0px;
    /* 45px */
  }

  .content-section h3 {
    font-size: 19px;
    /* 24px */
    margin-bottom: 1.042vw;
    /* 10px */
  }

  .content-company-1 {
    padding: 0 6.25vw;
    /* 60px */
    padding-top: 3.958vw;
    /* 38px */
  }

  .content-company-2 {
    padding: 4.167vw 0 0 3.125vw;
    /* 40,30px */
  }

  .content-company-iconset {
    width: 13.54vw;
    /* 130px */
  }

  .QRCode-label {
    font-size: 15px;
    /* 24px */
  }

  .QRCode img {
    width: 80px;
    /* 120px */
    height: auto;
    /* 120px */

  }

  .content-company-icon {
    height: 4.688vw;
    /* 45px */
  }

  .content-company-icon-h {
    padding: 0 1.563vw;
    /* 15px */
  }

  .content-company-icon-b {
    padding: 0.52083vw 1.563vw;
    /* 5,15px */
  }

  .content-company-icon-h p {
    font-size: 9px;
    /* 12px */
  }

  .content-company-icon-b p {
    font-size: 6px;
    /* 8px */
  }

  .content-company-3 {
    width: 32.19vw;
    /* 309px */
    height: 29.69vw;
    /* 285px */
    margin: 3.75vw 0 0 2.5vw;
    /* 36, 24px */
  }

  .content-contactus {
    padding: 0 6.25vw;
    /* 60px */
  }

  .content-text-1 {
    font-size: 8px;
    /* 10px */
  }

  .content-text-2 {
    font-size: 9px;
    /* 12px */
    width: 41.67vw;
    /* 400px */
  }

  .lang-popup {
    left: -100%;
    border: 1px solid #333;
    /* 1px */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    /* 4, 8px */
    width: 80px;
    /* 100px */
  }

  .lang-popup button {
    padding: 1.042vw;
    /* 10px */
    font-size: 10px;
    /* 12px */
  }

  .lang-popup img {
    width: 20px;
    /* 25px */
    height: 20px;
    /* 25px */
    margin-right: 8px;
    /* 10px */
  }

  .lang-popup .close-btn {
    top: 8px;
    /* 10px */
    right: 8px;
    /* 10px */
    font-size: 14px;
    /* 16px */
  }

  .advertise {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .advertise__swiper {
    width: 100%;
    height: 100%;
  }

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

  .swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: white;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 20px;
  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: white;
    opacity: 0.5;
  }

  .swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff;
  }

  .game-card-b {
    border-radius: 1.6vw;
    box-shadow: 0 0.8vw 1.6vw rgba(0, 0, 0, 0.1);
    margin: 2.18vw;
    height: 52.08vw;
  }

  .game-card-b:hover {
    transform: translateY(-2.18vw);
  }

  .game-card-b-small {
    width: 35.6vw;
  }

  .game-card-b-large {
    width: 75.6vw;
  }

}