@charset "UTF-8";
/*
-----------------------------------------------------------------------
	Imported CSS
-----------------------------------------------------------------------
*/
/* @import url(https://fonts.googleapis.com/css?family=Poppins:400,400i,500,600,700,800,|Roboto:400,400i,500,700);
@import url(https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Averia+Serif+Libre:wght@700&family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&family=Stardos+Stencil:wght@700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Black+Han+Sans&family=Lobster&family=Song+Myung&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Lobster&family=Song+Myung&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Black+Han+Sans&family=Lobster&family=Noto+Sans+KR:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Sansita:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,800;1,900&family=Song+Myung&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap); */

html {
  height: 100%;
}

/* body {
  font-family: "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", "Noto Sans",
    "Roboto", sans-serif;
} */

/* 文字陰影 */
.dropShadow-black {
  text-shadow: 1px 1px 0 #181717;
}

/* banner輪播 */
.mySwiper {
  width: 100%;
}

.mySwiper .swiper-slide img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: cover;
}

/* 遊戲輪播 */
.swiper-slide {
  width: 160px;
  height: 160px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

/* ⭐ hover 時放大整個 slide，不只是圖片 */
.swiper-slide:hover {
  transform: scale(1.125);
  /* 放大至約 180px */
  z-index: 10;
  /* 拉到最上層避免被其他 slide 蓋住 */
}

.swiper-banner .swiper-slide:hover {
  transform: none !important;
}

/* 圖片與 overlay 保持原樣，不需加 transform */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  pointer-events: none;
}

.swiper-slide .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
  transition: background-color 0.3s ease;
  z-index: 2;
}

/* overlay 提供 hover 遮罩效果（非必要） */
.swiper-slide:hover .overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

.customSwiper01,
.customSwiper02 {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.customSwiper01 .swiper-wrapper,
.customSwiper02 .swiper-wrapper {
  align-items: center;
}

.customSwiper01 .swiper-slide,
.customSwiper02 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
  will-change: transform;
}

.customSwiper01 .swiper-slide {
  width: 160px;
  height: 160px;
}

.customSwiper02 .swiper-slide {
  width: 218px;
  height: 332px;
}

.customSwiper01 .swiper-slide img,
.customSwiper02 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
  pointer-events: none;
}

.customSwiper01 .swiper-slide:hover img,
.customSwiper02 .swiper-slide:hover img,
.customSwiper01 .swiper-slide.hovered img,
.customSwiper02 .swiper-slide.hovered img {
  transform: scale(1.1);
}

.customSwiper01 .overlay,
.customSwiper02 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
  z-index: 2;
}

.customSwiper01:hover .swiper-slide:not(:hover) .overlay,
.customSwiper02:hover .swiper-slide:not(:hover) .overlay,
.customSwiper01:hover .swiper-slide:not(.hovered) .overlay,
.customSwiper02:hover .swiper-slide:not(.hovered) .overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.customSwiper01 .swiper-slide.hovered .overlay,
.customSwiper02 .swiper-slide.hovered .overlay,
.customSwiper01 .swiper-slide:hover .overlay,
.customSwiper02 .swiper-slide:hover .overlay {
  transform: scale(1.1);
}

.swiper-wrapper-container.justify-center {
  justify-content: center;
}

.swiper-wrapper-container.justify-start {
  justify-content: flex-start;
}

.swiper-button-next.custom-btn01,
.swiper-button-prev.custom-btn01,
.swiper-button-next.custom-btn02,
.swiper-button-prev.custom-btn02 {
  color: #fff;
  top: 60%;
  transform: translateY(-50%);
  z-index: 20;
}

/* 搜尋range */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  margin-top: 0.2rem;
  pointer-events: auto;
  z-index: 30;
}

input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  pointer-events: auto;
  z-index: 30;
}

#modal01 {
  z-index: 100;
}