@charset "utf-8";
/* CSS Document */
/**********************************關於tms命名******************************/
.Adabout_top {
  max-height: 760px;
  overflow: hidden;
}
.tms_name {
  position: relative;
  background: url("../images/contentBg-3.jpg");
  display: flex;
  overflow: hidden;
  justify-content: center;
}
.tms_name-w {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  max-width: 80%;
  margin: 5% auto;
}
.tms_name_l {
  flex: 1;
  min-width: 75%;
  display: flex;
  flex-direction: column;
  padding-left: 10%;
}
.tms_name_r {
  flex: 1;
  min-width: 20%;
  display: flex;
  flex-direction: column;
}
/* SVG 圖片縮放 */
.tms_name_l img, .tms_name_r img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* 保持比例，不超出區塊 */
}
.story-WrapImg {
  display: none;
}
.story-img {
  position: relative;
  top: 15%;
}
.tms-story {}
.tms-story img {
  height: 85vh;
}
.story-station {
  background: url("../images/story-station.png") no-repeat;
  background-size: contain;
  height: 100vh;
}
.story-horse {
  background: url("../images/story-horse.png") no-repeat;
  background-size: contain;
  height: 100vh;
  position: relative;
  top: -92vh;
  left: 0;
}
.story-tea {
  background: url("../images/story-tea.png") no-repeat;
  background-size: contain;
  height: 100vh;
  position: relative;
  top: -190vh;
  left: 11vh;
}
/**********************************符號靈感******************************/
.symbol {
  background: url("../images/allBg.jpg");
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}
/* crosskey 做為背景 */
.crosskey {
  position: absolute;
  top: 32%;
  left: 40%;
  transform: translate(-50%, -50%);
}
/* spoem_area 置中區塊 */
.spoem_area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平仍置中 */
  justify-content: flex-start; /* 垂直靠上 */
  gap: 20px;
  z-index: 1; /* 在 crosskey 上面 */
  height: 540px; /* 建議給高度，才會看到靠上效果 */
}
/* 直式文字 */
.spoem {
  writing-mode: vertical-rl; /* 直排 */
  text-orientation: upright; /* 每個字直立 */
  font-size: 22px;
  line-height: 2;
  letter-spacing: 6px;
  font-family: "Noto Serif TC", serif;
  color: #5A5646;
}
.spoem p {
  margin: 0;
  font-weight: bold;
}
.spoem_tea img {
  position: relative;
  left: 13%;
}
.sticker {
  margin: 2% auto 5% auto;
}
/* UL 橫向排列 */
.sticker ul {
  display: flex;
  width: 50%;
  margin: 0 auto;
  justify-content: space-around;
}
/* 每個 li 直向排列：圖片 → H1 → P */
.sticker li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 200px; /* 可調整每個區塊寬度 */
}
/* badge 圖片 */
.sticker .badge_w {}
.sticker .badge_w img {
  height: auto;
  margin-bottom: 10px;
}
.sticker li h1 {
  font-size: 22px;
  color: #A17F45;
  margin: 5px 0;
  font-weight: bold;
  font-family: "Noto Serif TC", serif;
}
.sticker li p {
  font-size: 16px;
  color: #5A5646;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 1440px) {
  .sticker ul {
    width: 60%;
  }
}
@media (max-width: 1336px) {
  .tms_name-w {
    min-width: 100%;
  }
}
@media (max-width: 1180px) {
  /**命名**/
  .tms_name {
    position: relative;
    height: auto;
    display: table;
    width: 100%;
  }
  .tms_name_l {
    width: 100%;
  }
  .tms_name_r {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .sticker ul {
    width: 76%;
  }
}
@media (max-width: 820px) {
  .tms_name-w {
    display: block;
  }
  .story-WrapImg {
    display: block;
  }
  .story-img {
    height: 15vh;
  }
  .story-station {
    position: relative;
    top: 1vh;
  }
  .story-horse {
    top: -46vh;
    left: -8vh;
  }
  .story-tea {
    left: 19vh;
    top: -137vh;
  }
  .story_lg {
    display: none;
  }
  .sticker ul {
    width: 100%;
  }
  .crosskey {
    top: -15%;
    transform: scale(80%);
  }
}
@media (max-width: 500px) {
  .story-horse {
    top: -24vh;
    left: -8vh;
  }
  .crosskey {
    top: 0%;
  }
  .sticker {
    margin: 15% auto;
  }
  .sticker ul {
    flex-wrap: wrap;
  }
}