body {
  touch-action: manipulation;
  letter-spacing: 1.5px;
  overflow-x: hidden !important;
}

.en-text {
  letter-spacing: 0 !important;
}

#main-visual {
  background-image: url(../images_webp/main-visual-bg.webp);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
}

/* 基礎容器設定 */
.vision-8-container,
.vision-left-container,
.vision-right-container {
  position: relative;
  margin: 0 auto;
  /* 核心：鎖定你 Figma 的比例 (565:746) */
  aspect-ratio: 565 / 746;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.vision-left-container {
  aspect-ratio: 534 / 337;
}

.vision-right-container {
  aspect-ratio: 699 / 383;
}

/* 圖片層疊與動畫邏輯 */
.vision-8-container .slide,
.vision-left-container .slide,
.vision-right-container .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 確保圖片不被裁切 */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.vision-8-container .slide.active,
.vision-left-container .slide.active,
.vision-right-container .slide.active {
  opacity: 1;
}

.m-v-1 {
  width: 37%;
  position: relative;
  padding: 0 7% 0 2%;
  margin: 5vh 0 0 28%;
  z-index: 3;
}

.m-v-2 {
  width: 28%;
  position: absolute;
  left: 0;
  z-index: 2;
}

.m-v-3 {
  width: 35%;
  position: absolute;
  bottom: 13%;
  right: 0;
}

.main-visual-flower {
  position: absolute;
  width: 52%;
  top: -5%;
  right: -13%;
}

.main-visual-title {
  position: absolute;
  width: 55%;
  top: 3%;
  right: -50%;
  z-index: 2;
}

.main-visual-montain1 {
  position: absolute;
  width: 65%;
  top: 34%;
  left: -55%;
  z-index: 2;
}

.main-visual-flower2 {
  position: absolute;
  width: 30%;
  top: 70%;
  right: -16%;
  z-index: 3;
}

.main-visual-montain2 {
  position: absolute;
  width: 50%;
  top: 90%;
  right: 20%;
  z-index: 2;
}

.main-visual-bird {
  position: absolute;
  width: 35%;
  top: 30%;
  right: -16%;
  z-index: 3;
}

.main-visual-fac {
  position: absolute;
  width: 30%;
  top: -42.5%;
  right: 10%;
  z-index: 2;
}

/* --- 橫式螢幕 (Desktop / Pad Landscape) --- */
@media (orientation: landscape) {

  .vision-8-container,
  .vision-left-container,
  .vision-right-container {
    height: auto;
    width: 100%;
  }
}

/* --- 手機直式主視覺：768px 以下才套用 --- */
@media (max-width: 767px) {
  #main-visual {
    display: block !important;
  }

  #index-product {
    margin-top: -20%;
  }

  .m-v-1 {
    width: 100%;
    position: relative;
    padding: 0 8%;
    margin: 30px 0 45% 0;
  }

  .m-v-2 {
    width: 85%;
    position: relative;
  }

  .m-v-3 {
    display: none;
  }

  .main-visual-flower {
    position: absolute;
    width: 60%;
    top: 82%;
    right: auto;
    left: -10%;
  }

  .main-visual-title {
    position: absolute;
    width: 67%;
    top: 105%;
    right: 7%;
    z-index: 2;
  }

  .main-visual-montain1 {
    position: absolute;
    width: 57%;
    top: 0%;
    left: -12%;
    z-index: 1;
  }

  .main-visual-flower2 {
    display: none;
  }

  .main-visual-bird {
    position: absolute;
    width: 37%;
    top: 78%;
    right: 5%;
    z-index: 3;
  }

  #index-product {
    z-index: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  @media (orientation: portrait) {
    #award {
      margin-top: 0 !important;
      margin-bottom: 6% !important;
    }
  }
}

@media (max-width: 1024px) {
  body {
    letter-spacing: 0;
  }
}

/* 1. 當 Radio 被選中時，對應的 Label 樣式切換 */
#tab-1:checked~div nav label[for="tab-1"],
#tab-2:checked~div nav label[for="tab-2"],
#tab-3:checked~div nav label[for="tab-3"],
#tab-4:checked~div nav label[for="tab-4"],
#tab-5:checked~div nav label[for="tab-5"] {
  /* 手機端 Active：淺藍背景 + 左邊框 */
  background-color: #E8F1FF;
  border-left-color: #B7C9E4;
  color: #000;
}

@media (min-width: 1025px) {

  #tab-1:checked~div nav label[for="tab-1"],
  #tab-2:checked~div nav label[for="tab-2"],
  #tab-3:checked~div nav label[for="tab-3"],
  #tab-4:checked~div nav label[for="tab-4"],
  #tab-5:checked~div nav label[for="tab-5"] {
    /* 桌面端 Active：透明背景 + 底部粗邊框 */
    background-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #000;
  }
}

/* 2. 內容顯示控制 */
.tab-content2 {
  display: none;
  opacity: 0;
  /* 預設透明，避免動畫跑完前閃爍 */
}

#tab-1:checked~div #content-1,
#tab-2:checked~div #content-2,
#tab-3:checked~div #content-3,
#tab-4:checked~div #content-4,
#tab-5:checked~div #content-5 {
  display: block;
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    /* 稍微位移增加動感，不喜歡可刪除 */
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user {
  /* Change this! */
  width: 18px;
  height: 18px;
}

.map {
  /* Change this! */
  width: 20px;
  height: 20px;
}