/* 手機 */
    @media screen and (max-width: 600px) {
      .content_box {
        display: none
        /* 手機專用的樣式 */
      }
      .button-container {
        visibility: hidden
      }
      .ticket-on-sale-container img{
        width: 25vw;
        height: 25vw;
      }
      .buger-container{
        position:fixed;
        right:50px;
        top:0px;
        z-index:11;
      }
          
      .banner-link {
        width:30vw;
        height: 30vw;
        flex: 1;
        background: #00a7d9;
        color: #fff;
        border-radius: 6px;
        font-size: 18px;
        text-align: center;
        line-height: 1.5;
        padding: 14px 4px;
        letter-spacing: 0.12em;
        cursor: pointer;
        border: none;
      }
    }
    /* 平板 */
    @media screen and (min-width: 600px) and (max-width: 960px) {
      .content_box {
        display: none
        /* 平板專用的樣式 */
      }
      .button-container {
        visibility: hidden
      }
      .ticket-on-sale-container img{
        width: 25vw;
        height: 25vw;
      }
      .buger-container{
        position:fixed;
        right:50px;
        top:0px;
        z-index:11;
      }
      .banner-link {
        width:30vw;
        height: 30vw;
        flex: 1;
        background: #00a7d9;
        color: #fff;
        border-radius: 6px;
        font-size: 18px;
        text-align: center;
        line-height: 1.5;
        padding: 14px 4px;
        letter-spacing: 0.12em;
        cursor: pointer;
        border: none;
      }
    }
    /* 電腦 */
    @media screen and (min-width: 960px) {
      .content_box {
          display: none
        /* 電腦專用的樣式 */
      }
      .button-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed; /* 建立相對定位的容器 */
        width: 60vw; /* 設定按鈕框寬度 */
        height: 6vw; /* 設定按鈕高度 */
        padding-top:38px;
        left:24vw;
        border: none; /* 移除預設邊框 */
        z-index:3;
      }
      .ticket-on-sale-container img{
        width: 16vw;
        height: 16vw;
      }
      .buger-container{
        display: none
      }
      .banner-link {
        width:30vw;
        height: 8vh;
        flex: 1;
        background: #00a7d9;
        color: #fff;
        border-radius: 6px;
        font-size: 16px;
        text-align: center;
        line-height: 1.5;
        padding: 14px 4px;
        letter-spacing: 0.12em;
        cursor: pointer;
        border: none;
      }
    }
    
    .card {
      background: #FFFFFF;
      border: 3px solid #333;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      margin-bottom: 20px;
      scroll-margin-top: 9vw;
    }
    
    .home-btn-rect {
      position: fixed;
      width: 15vw;
      height: 5vw;
      margin-top:2.8%;
      left:5vw;
      z-index:15;
    }
    .ticket-on-sale-container{
      position:fixed;
      right:1vw;
      bottom:1vw;
      z-index:11;
    }
    .title-img{
      position: fixed;
      background-size:100vw;
      background-position:top;
      background-repeat: no-repeat;
      width:100vw;
      z-index:2;
    }
    .bg-img{
      background-size:100vw;
      background-position:top;
      background-repeat: no-repeat;
      width:100vw;
    }
    .video-container {
      position: relative; /* 建立相對定位的容器 */
      top: 72%;
      width: 78%; /* 範例寬度 */
      height: 25%; /* 範例高度 */
      z-index: 1;
      margin: auto;
    }
    .positioned-embedded {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* 將物件置中 */
      width: 100%; /* 填滿容器寬度 */
      height: 100%; /* 填滿容器高度 */
      object-fit: cover; /* 調整影片顯示方式，例如 cover、contain */
    }
    
    .button-image img{
       position: absolute;
       width: 8vw;
       height: 42%;
      -webkit-transition: opacity 0.3s ease-in-out;
      -moz-transition: opacity 0.3s ease-in-out;
      -o-transition: opacity 0.3s ease-in-out;
      transition: opacity 0.3s ease-in-out;
    }
    .button-image .bottom {
      opacity:0;
    }
    .button-image:hover .bottom {
      opacity:1;
    }
    .button-image .top {
      opacity:1;
    }
    .button-image:hover .top {
      opacity:0;
    }
    
    /*售票相關                                                    */
    :root {
      --bg-main: #FDF9CE;     /* 外面米色底色 */
      --bg-paper: #ffffff;    /* 內層白底 */
      --border-main: #000000; /* 外框線 */
      --red-main: #e22626;    /* 標題紅色＆按鈕 */
      --gray-line: #c8c8c8;
      --gray-text: #555555;
      --black-text: #111111;
      --soldout: #d23b3b;
      --font-base: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

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

    html,
    body {
      height: 100%;
    }

    body {
      font-family: var(--font-base);
      background: var(--bg-main);
      color: var(--black-text);
      line-height: 1.6;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* 外圍花邊 ------------------------------------------------------ */

    .frame {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 0 48px; /* 左右保留給邊框 */
    }

    /* 上下、左右邊框用 pseudo element 畫出簡化花紋 */

    .frame::before,
    .frame::after {
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      height: 40px;
      z-index: 1;
      background-image: repeating-linear-gradient(
          to right,
          #fce09b 0,
          #fce09b 40px,
          #6fa48e 40px,
          #6fa48e 80px
        );
      background-size: 80px 40px;
    }

    .frame::before {
      top: 0;
    }

    .frame::after {
      bottom: 0;
    }

    .frame-side {
      position: fixed;
      top: 40px;
      bottom: 40px;
      width: 40px;
      z-index: 1;
      background-image: repeating-linear-gradient(
          to bottom,
          #fce09b 0,
          #fce09b 40px,
          #6fa48e 40px,
          #6fa48e 80px
        );
      background-size: 40px 80px;
    }

    .frame-side--left {
      left: 0;
    }

    .frame-side--right {
      right: 0;
    }

    /* 內容區 -------------------------------------------------------- */

    .page {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
      padding: 56px 0 64px;
    }

    /* 導覽列 -------------------------------------------------------- */

    .site-header {
      position: sticky;
      top: 40px; /* 避開上方花紋 */
      z-index: 5;
      background: rgba(168, 222, 214, 0.96);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      padding: 12px 24px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 800;
      font-size: 18px;
    }

    .logo-main {
      font-size: 20px;
      letter-spacing: 0.06em;
    }

    .logo-sub {
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .nav-menu {
      display: flex;
      gap: 28px;
      margin-left: auto;
      font-size: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .nav-link {
      padding-bottom: 3px;
      border-bottom: 2px solid transparent;
    }

    .nav-link.active {
      border-color: #000;
    }

    /* 主要白色票券卡片 ---------------------------------------------- */

    .tickets-wrapper {
      margin-top: 0px;
      border: 3px solid var(--border-main);
      background: var(--bg-paper);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .tickets-header {
      background: rgba(239, 74, 37, 1);
      color: #fff;
      text-align: center;
      padding: 36px 16px;
      font-size: 28px;
      letter-spacing: 0.2em;
      font-weight: 800;
    }

    .tickets-inner {
      padding: 40px 48px 56px;
    }

    @media (max-width: 768px) {
      .frame {
        padding: 0 12px;
      }

      .frame-side {
        display: none;
      }

      .frame::before,
      .frame::after {
        display: none;
      }

      .site-header {
        top: 0;
      }

      .nav-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }

      .nav-menu {
        flex-wrap: wrap;
        gap: 12px;
        margin-left: 0;
      }

      .tickets-inner {
        padding: 28px 16px 40px;
      }
    }

    /* 區塊標題 ------------------------------------------------------ */

    .section-title {
      font-size: 26px;
      font-weight: 800;
      margin-bottom: 18px;
    }

    /* 預售票列表 ---------------------------------------------------- */

    .ticket-list {
      margin-bottom: 28px;
    }

    .ticket-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      font-size: 15px;
    }

    .ticket-row + .ticket-row {
      border-top: 1px solid var(--gray-line);
    }

    .ticket-name {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .ticket-name-main {
      font-size: 14px;
      font-weight: 700;
    }

    .ticket-soldout {
      font-size: 11px;
      color: var(--soldout);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .ticket-price {
      font-size: 14px;
      color: #555;
      white-space: nowrap;
    }

    .ticket-price b {
      font-weight: 700;
      color: #555;
    }

    .ticket-bottom-note {
      text-align: right;
      margin-top: 6px;
      font-size: 13px;
      color: var(--gray-text);
    }

    /* 紅色購票按鈕 -------------------------------------------------- */

    .ticket-buttons {
      margin: 16px 0 16px;
      display: flex;
      gap: 12px;
    }

    .ticket-btn {
      flex: 1;
      text-align: center;
      padding: 14px 4px;
      background: rgba(239, 74, 37, 1);
      color: #fff;
      font-weight: 700;
      border-radius: 0;
      font-size: 18px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
    }

    .ticket-btn:hover {
      filter: brightness(1.05);
    }

    /* 住宿套票＆接駁區 ------------------------------------------------ */

    .fold-header {
      align-items: center;
      gap: 10px;
      font-size: 28px;
      font-weight: 800;
      margin-top: 12px;
      margin-bottom: 16px;
    }

    .fold-arrow {
      font-size: 20px;
    }

    .plan-block + .plan-block {
      margin-top: 32px;
      padding-top: 18px;
      border-top: 1px solid var(--gray-line);
    }

    .plan-title {
      font-weight: 700;
      font-size: 24px;
      margin-bottom: 4px;
    }

    .plan-subtitle {
      font-size: 18px;
      color: var(--black-text);
      margin-bottom: 10px;
    }

    .plan-item {
      margin-bottom: 18px;
    }

    .plan-item-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-size: 14px;
      margin-bottom: 2px;
    }

    .plan-item-name {
      color:black;
      width: 180px;
      font-size: 14px;
      font-weight: 550;
    }

    .plan-item-price {
      font-size: 14px;
      white-space: nowrap;
      color: #666;
    }

    .plan-item-note {
      font-size: 14px;
      color: var(--gray-text);
      margin-left: 14px;
    }
    
    .plan-item-notice {
      font-size: 14px;
      color: var(--red-main);
      margin-left: 14px;
    }

    /* 灰色 SOLD OUT 橫條 */

    .soldout-bar {
      margin-top: 10px;
      background: #9ba1ac;
      color: #fff;
      text-align: center;
      padding: 8px 4px;
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /*漢堡選單---------------------------------------------- */
    /* 絕對位置的容器  */
    .buger-container{
      position:fixed;
      right:50px;
      top:0px;
      z-index:11;
    }
    /* 選單線  */
    .line {
      width: 0px;
      height: 0px;
      cursor: pointer;
      display: block;
      padding: 16px;
      position: fixed;
      background: transparent;
    }
    .line .menu,
    .line .menu::before,
    .line .menu::after {
      background: #FFF;
      content: '';
      display: block;
      height: 2px;
      position: absolute;
      transition: top ease .15s .15s, transform ease .15s;
      width: 25px;
    }
    .line .menu {
      left: 0px;
      top: 18px;
    }
    
    .line .menu::before {
      top: -6px;
    }
    
    .line .menu::after {
      top: 6px;
    }
    /*
    點選選單變叉叉
    */
    #menu:checked + .line .menu {
      background: transparent;
    }
    
    #menu:checked + .line .menu::before {
      transform: rotate(45deg);
    }
    
    #menu:checked + .line .menu::after {
      transform: rotate(-45deg);
    }
    
    #menu:checked + .line .menu::before,
    #menu:checked + .line .menu::after {
      top: 0;
      transition: top ease .05s, transform ease .05s .05s;
    }
    /*
    選單開合
    */
    #menu:checked ~ .menu-list {
      height: 96vh;
      width: 100vw;
      background: rgba(255, 249, 207, 1);
      box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
      z-index:12;
    }
    
    .menu-list {
      top:4vh;
      right: 0px;
      width: 100vw;
      height: 0;
      padding-top: 10px;
      background: rgba(0, 0, 0, 0);
      position: fixed;
      align-self: right;
      transition: all .3s;
      overflow: hidden;
      
    }
    /*選單項目位置 */
    .menu-list ul {
      padding-top: 6%;
      list-style: none;
      margin-left:6vw;
      margin-bottom:60px;
    }
    .menu-list-li{
      height:10vh;
    }
    .menu-list-big{
      font-size: 36px;
      font-weight: 800;
    }
    .menu-list-small{
      font-size: 24px;
      font-weight: 750;
    }
    /*隱藏核許框*/
    input#menu {
      display: none;
    }


    .card {
  background: #FFFFFF;
  border: 3px solid #333;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.card--thin-border {
  border-width: 2px;
}

.card--yellow-border {
  border-color: #f3c945;
}

.card--blue-border {
  border-color: #7ab6ff;
}

/* 第一塊：會場位置 + 交通選項 */

.venue-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.venue-subtitle {
  margin: 8px 0 22px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.search-row {
  position: relative;
  max-width: 90%;
  margin: 0 auto 20px;
}

.search-input {
  width: 100%;
  padding: 18px 40px 18px 18px;
  border-radius: 22px;
  border: 2px solid #000;
  font-size: 16px;
  
}

  .search-input:hover {
    background: rgba(170, 170, 170, 1);
}

.search-label {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.search-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}


.transport-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.transport-card {
  width: 120px;
  padding: 12px 10px 10px;
  border-radius: 12px;
  border: 2px solid #333;
  background: #ffe470;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.transport-card--blue {
  background: #b0d6ff;
}

.transport-card:hover {
  background: rgba(10, 10, 10, 1);
  color:#FFFFFF;
}

.transport-icon {
  font-size: 24px;
}

.transport-label {
  font-size: 15px;
  font-weight: 700;
}

.transport-more {
  font-size: 12px;
}

/* 中間分類標題卡（高鐵、台鐵、客運、汽車、機車、公車） */

.section-top-card {
  padding: 18px 10px;
  text-align: center;
  border-radius: 4px;
}

.section-top-title {
  font-size: 20px;
  font-weight: 700;
  margin-top: 4px;
  margin-bottom: 0;
}

.section-top-icon {
  font-size: 26px;
}

.section-top-arrow {
  display: block;
  margin-top: 6px;
  font-size: 16px;
}

/* 詳細內容：台鐵/客運 */
.detail-header {
  text-align: center;
  margin-bottom: 18px;
  cursor: pointer;
}

.detail-header-icon {
  font-size: 28px;
  display: block;
}

.detail-header-title {
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 0;
}

.station-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
}

.access-info-block
{
  display: none;
}

.station-card {
  /* background: #fff; */
}
.hsr-station-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #4396f0;
}

.station-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #f36b21;
}

.station-title-icon {
  font-size: 20px;
}

.station-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.station-list li {
  text-align: left;
  background: #000;
  color: #fff;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 14px;
  margin-bottom: 0px;
}
.station-list li span.marker {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  margin-right: 6px;
  
  vertical-align: middle;
}

.station-list li span.marker-blue{
  background: #b0d6ff;
}
.station-list li span.marker-white{
  background: #ffffff;
}
.station-list li span.marker-yellow{
  background: #ff6600;
}
.station-list li span.marker-pink{
  background: #f36b21;
}
.vertical-container {
    display: flex; /* 將線和文字水平排列 */
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 線和文字之間的間距 */
}

.vertical-container::before {
    margin-left: 8px;
    content: ''; /* 必須有 */
    display: inline-block; /* 讓偽元素能設定寬高 */
    width: 3px; /* 線的寬度 */
    height: 25px; /* 線的高度 */
    background-color: #000; /* 線的顏色 */
}

.vertical-container-text{
  font-size: 12px;
  font-weight: 500;
}


/* 汽車 / 機車 說明卡 */

.bullet-card {
  text-align: center;
}

.bullet-card-title {
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0 12px;
}

.bullet-card-sub {
  font-size: 14px;
  margin: 0 0 8px;
}

.bullet-card-sub--red {
  color: #e53935;
  font-weight: 700;
}

.bullet-list {
  text-align: left;
  max-width: 720px;
  margin: 12px auto 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
}

.bullet-list li {
  margin-bottom: 6px;
}

/* 公車表格部分 */

.bus-note {
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
}

.bus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bus-table th,
.bus-table td {
  border: 1px solid #000;
  padding: 10px 8px;
  text-align: center;
}

.bus-table th {
  font-weight: 700;
}

.color-red
{
  color: red;
}

/* 票券-官方接駁車 */
/* 紅框卡片本體 */
.shuttle-card {
  box-sizing: border-box;
}

/* 兩欄排版 */
.shuttle-grid {
  display: flex;
  align-items: center;
}

/* 欄位內的標題 */
.shuttle-subtitle {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}

/* 條列文字 */
.shuttle-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
}

.shuttle-list li::before {
  content: "• ";
}

.banner-link-container {
   display: flex;
   justify-content: center;
   gap: 5vw;
   margin: 16px 7vw 16px 7vw;
 }
 

/* 手機 */
@media screen and (max-width: 600px) {
  /* 手機專用的樣式 */

  /* 票券-接駁車 */
  .shuttle-card {
    padding: 24px 20px;
  }

  .shuttle-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}