@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Noto+Serif+TC:wght@300;400;600;700&family=Noto+Sans+TC:wght@300;400;500&display=swap');




.tour {
  width: 100%;
  max-width: 1250px;
  margin: auto;
  padding: 0 !important;
  background: #FFFFFF;
  font-family: 'Noto Sans TC', sans-serif;
  color: #1A1A1A;
  display: block;
}
.tour .row { margin-left: 0 !important; margin-right: 0 !important; }

/* ── Images ── */
.tour img { max-width: 100%; display: block; margin: 0 auto; }
.tour .pic-full img { width: 100%; display: block; object-fit: cover; min-height: 300px; }
.tour .pic01 { display: block; width: 100%; }
.tour .pic01 img { width: 100%; display: block; }

/* ══════════════════════════════════════════
   IMAGE CAROUSEL (pure CSS, auto fade, no JS)
   ══════════════════════════════════════════ */
.tour .pic01.carousel {
  position: relative;
  width: 100%;
  padding-top: 42%;      /* 調整此比例以符合實際圖片長寬比 */
  overflow: hidden;
}
.tour .pic01.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-name: carouselFade;
  animation-duration: 18s;       /* 3張圖 x 6秒 = 18秒一輪，可依張數調整 */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.tour .pic01.carousel img:nth-child(1) { animation-delay: 0s; }
.tour .pic01.carousel img:nth-child(2) { animation-delay: 6s; }
.tour .pic01.carousel img:nth-child(3) { animation-delay: 12s; }

@keyframes carouselFade {
  0%     { opacity: 0; }
  16.6%  { opacity: 1; }
  33.3%  { opacity: 1; }
  50%    { opacity: 0; }
  100%   { opacity: 0; }
}

/* ══════════════════════════════════════════
   MASTHEAD / RUNNING HEAD
   ══════════════════════════════════════════ */
.tour .masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 40px;
  border-bottom: 0.5px solid #C0C0C0;
  border-top: 2px solid #1A1A1A;
}
.tour .masthead-date {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #888;
  text-transform: uppercase;
  font-family: 'Noto Sans TC', sans-serif;
}
.tour .masthead-brand {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #888;
  text-transform: uppercase;
  font-family: 'Noto Sans TC', sans-serif;
}

/* ══════════════════════════════════════════
   SPOT BLOCK WRAPPER
   ══════════════════════════════════════════ */
.tour .spot-block {
  /*position: relative;*/
  padding: 5%;
  
}
.tour .spot-block.reverse { /* right-image layout */ }
.tour .spot-block.accent-bg { background: #EFF5F2; } /* sage tint */
.tour .spot-block.white-bg  { background: #FFFFFF; }
.tour .spot-block.primary-bg { background: #EDF2F7; } 
/* Circle number */
.tour .spot-circle {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* border: 1px solid #bebebe; */
    font-size: 11px;
    background: #eeeeee;
    font-weight: 400;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.04em;
    color: #1A1A1A;
    margin-bottom: 18px;
  flex-shrink: 0;
}
.tour .spot-circle.filled {
  background: #A8C4B8;
  border-color: #A8C4B8;
  color: #fff;
}
.tour .spot-circle.subtle {
  background: #b2c8dd;
  border-color: #b2c8dd;
  color: #fff;
}
/* Stay-length badge (入住1晚 etc.) */
.tour .stay-badge {
  display: inline-block;
  padding: 4px 16px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #fff;
  background: #A8C4B8;
  border-radius: 20px;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 400;
  margin-bottom: 16px;
}

/* Eyebrow label (英文地點) */
.tour .spot-eyebrow {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #A8C4B8;
  text-transform: uppercase;
  font-family: 'Noto Sans TC', sans-serif;
  display: block;
  margin-bottom: 10px;
  font-weight: 400;
}

/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */

/* h2 — Big spot title (Playfair Display) */
.tour h2 {
  font-family: 'Noto Serif TC', serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.0 !important;
  color: #1A1A1A !important;
  margin: 0 0 8px 0 !important;
  padding: 0;
  letter-spacing: -0.01em;
}
.tour h2::after { display: none; }

/* h1 — Korean subtitle */
.tour h1 {
  font-size: 11px !important;
  letter-spacing: 0.3em !important;
  color: #A8C4B8 !important;
  font-weight: 300 !important;
  font-family: 'Noto Sans TC', sans-serif !important;
  margin: 0 0 20px 0 !important;
  display: block;
  line-height: 1.6 !important;
  text-transform: uppercase;
}

/* h3 */
.tour h3 {
  font-size: 15px !important;
  color: #888 !important;
  font-weight: 400 !important;
  display: block !important;
  margin: 14px 0 6px !important;
  letter-spacing: 0.05em;
  font-family: 'Noto Sans TC', sans-serif !important;
}
.tour h3 strong { font-weight: 500; }

/* h4 */
.tour h4 {
  font-size: 20px !important;
  font-family: 'Noto Serif TC', serif !important;
  font-weight: 400 !important;
  display: block;
  margin: 0 !important;
}
.tour h4 span { font-size: 16px !important; font-weight: 300 !important; }

/* h5 — Section banner title */
.tour h5 {
  font-family: 'Noto Serif TC', serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  display: block !important;
  width: 100%;
  text-align: center;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 14px 0 !important;
  color: #1A1A1A !important;
  letter-spacing: 0.01em;
}

/* h6 — DELICIOUS / VACATION eyebrow */
.tour h6 {
  font-size: 9px !important;
  letter-spacing: 0.3em !important;
  font-weight: 400 !important;
  font-family: 'Noto Sans TC', sans-serif !important;
  color: #A8C4B8 !important;
  display: block !important;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}
.tour h6 span { font-size: 9px !important; color: #A8C4B8 !important; padding: 0; }

/* h7 — section subtext */
.tour h7 {
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: #999 !important;
  text-align: center;
  font-family: 'Noto Sans TC', sans-serif !important;
  font-weight: 300 !important;
  
  margin: 0 auto !important;
  letter-spacing: 0.04em;
}

/* big-title */
.tour .big-title {
  display: block;
  background: none;
  padding: 0;
  margin: 0 0 20px 0;
  border: none;
  border-radius: 0;
  color: #888;
  font-size: 13px;
  line-height: 1.9;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 300;
  letter-spacing: 0.06em;
}

/* p */
.tour p {
  font-size: 14px;
  line-height: 2.1;
  color: #3A3A3A;
  text-align: justify;
  letter-spacing: 0.04em;
  font-family: 'Noto Sans TC', sans-serif;
  margin-bottom: 0;
}

.tour p strong, .tour strong, .tour b {
  font-weight: 700 !important;
  font-family: 'Noto Serif TC', serif !important;
}

.tour li {
  font-size: 14px !important;
  line-height: 2 !important;
  color: #3A3A3A !important;
  font-family: 'Noto Sans TC', sans-serif !important;
}



/* ══════════════════════════════════════════
   BACKGROUND ZONES — minimal palette
   ══════════════════════════════════════════ */
.BGgray    { background: #FFFFFF !important; }
.BGorage   { background: #F7F5F1 !important; } /* warm off-white */
.BGdarkblue { background: #EFF5F2 !important; } /* sage tint, NO dark */
.BGblue    { background: #EDF3F1 !important; }
.BGpink    { background: #F8F3EF !important; }
.BGdarkgray { background: #F0EDE8 !important; }
.BGyellow  { background: #FDFBF6 !important; }
.BGgreen   { background: #EFF5F2 !important; }
.BGblack   { background: #3D3D35 !important; }
.BGblack h2, .BGblack h1 { color: #F0EDE8 !important; }
.BGblack p { color: #C0BAB0 !important; }
.BGblack .big-title { color: #A8C4B8 !important; }

/* ══════════════════════════════════════════
   SECTION DIVIDER (美食 / 飯店 / 贈品)
   ══════════════════════════════════════════ */
.section-divider {
  padding: 72px 24px 56px;
  text-align: center;
  background: #FFFFFF;
  position: relative;
}
.section-divider::before {
  content: '';
  display: block;
  width: 0.5px;
  height: 48px;
  background: #A8C4B8;
  margin: 0 auto 24px;
}
/* sage bar accent top */
.section-divider.sage-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: #A8C4B8;
}

/* ══════════════════════════════════════════
   SAGE ACCENT BLOCK 
   ══════════════════════════════════════════ */
.sage-panel {
  background: #F7F5F1;
  padding: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sage-panel h2 {  }
.sage-panel h1 { }
.sage-panel .big-title {  }
.sage-panel p { }
.sage-panel .spot-eyebrow {  }
.sage-panel .spot-circle {  }

/* ══════════════════════════════════════════
   FOOD SECTION
   ══════════════════════════════════════════ */
.tour .foodbox {
  width: 20%;
  display: block;
  float: left;
  padding: 0 10px 0 0;
}
.tour .foodbox:last-child { width: 19.2%; padding-right: 0; }
.tour .foodbox img { border-radius: 0; display: block; }
.tour .food-title {
  font-size: 11px;
  font-weight: 400;
  font-family: 'Noto Sans TC', sans-serif !important;
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #666;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tour .food-title span { font-weight: 300 !important; }

/* ══════════════════════════════════════════
   VIEW
   ══════════════════════════════════════════ */
.tour .view-title {
  font-size: 11px;
  font-weight: 400;
  font-family: 'Noto Sans TC', sans-serif !important;
  display: block;
  text-align: center;
  margin-top: 10px;
  color: #666;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ══════════════════════════════════════════
   GIFT
   ══════════════════════════════════════════ */
.tour .gift-title {
  position: relative;
  display: inline-block;
  margin: 1.2em auto;
  padding: 8px 20px;
  font-weight: 400;
  font-size: 13px;
  border: 0.5px solid #A8C4B8;
  color: #555;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.08em;
  border-radius: 0;
    background: #fff;
}
.tour .gift-title:after, .tour .gift-title:before {
  top: 100%; left: 50%;
  border: solid transparent;
  content: ""; height: 0; width: 0;
  position: absolute; pointer-events: none;
}
.tour .gift-title:after {
  border-color: rgba(255,255,255,0);
  border-top-color: #FFFFFF;
  border-width: 8px; margin-left: -8px;
}
.tour .gift-title:before {
  border-color: rgba(168,196,184,0);
  border-top-color: #A8C4B8;
  border-width: 9px; margin-left: -9px;
}
.tour .gift-title p { margin: 0; font-size: 10px; padding: 2px 0 0; color: #999; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 0.06em; }

/* ══════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════ */
.tour .picmark { float: right; padding: 5px; }
.tour .imgDown { margin-top: 30px; }
.tour .-mt-15 { margin-top: -15px; }
.tour .entext { font-size: 14px !important; line-height: 1 !important; font-weight: 300 !important; }
.tour .notetitle {
  display: table; line-height: 1.8; text-align: center; padding: 0 28px;
  font-size: 15px; background: #A8C4B8; color: #fff; border-radius: 0;
  box-sizing: border-box; margin: 0 auto;
  font-family: 'Noto Serif TC', serif !important; font-weight: 600 !important;
  transform: rotate(356deg) skew(337deg, 4deg);
}
/* ══════════════════════════════════════════
   SMART & EASY — 服務說明區塊
   ══════════════════════════════════════════ */
.tour .smart-group-title {
  font-family: 'Noto Serif TC', serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.02em;
}
.tour .smart-group-sub {
  font-size: 13px;
  color: #999;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.04em;
  margin-bottom: 8%;
}
.tour .smart-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Noto Serif TC', serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #7b9bb9 !important;
  letter-spacing: 0.06em;
  margin: 30px 0 12px !important;
}
.tour .smart-label:first-of-type { margin-top: 4px !important; }

.tour ul.smart-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.tour ul.smart-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.9;
  color: #3A3A3A;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.04em;
}
.tour ul.smart-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7b9bb9
}

.tour .step-list { margin: 4px 0 8px; }
.tour .step-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.tour .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #7b9bb9;
  color: #fff;
  font-size: 12px;
  font-family: 'Noto Sans TC', sans-serif;
  flex-shrink: 0;
  margin-top: 3px;
}
.tour .step-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #3A3A3A;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.04em;
}
.tour .border-green{border:1px solid #A8C4B8;}
/* color utils */
.border-black { border: 0.5px solid #1A1A1A; }
.text-orange  { color: #C47840; }
.text-red     { color: #B84040; }
.text-pink    { color: #B85070; }
.text-blue    { color: #3A72C0; }
.text-darkblue { color: #2A4870; }
.mobile_n  { display: block; }
.mobile_on { display: none; }

/* ══════════════════════════════════════════
   VIDEO
   ══════════════════════════════════════════ */
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ══════════════════════════════════════════
   SLIDESHOW
   ══════════════════════════════════════════ */
.slide-wrapper { width: 100%; position: relative; height: 460px; overflow: hidden; }
.slide-wrapper > div { width: 100%; position: absolute; top: 0; left: 0; height: 460px; animation: slide 20s infinite; opacity: 0; }
.slide-wrapper:hover div { animation-play-state: paused; }
.slide-wrapper > div:nth-child(2) { animation-delay: 5s; }
.slide-wrapper > div:nth-child(3) { animation-delay: 10s; }
.slide-wrapper > div:nth-child(4) { animation-delay: 15s; }
@keyframes slide { 10%{opacity:1} 25%{opacity:1} 40%{opacity:0} }

/* ══════════════════════════════════════════
   TABS
   ══════════════════════════════════════════ */
.tab_css { display: flex; flex-wrap: wrap; justify-content: center; }
.tab_css input { display: none; }
.tab_css label { font-size: 14px; margin: 0 4px 4px 0; padding: 10px 22px; cursor: pointer; border-radius: 0; background: #E8E4DE; color: #555; opacity: 0.65; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 0.06em; transition: opacity 0.2s; border: 0.5px solid #D0CBC2; }
.tab_content { order: 1; display: none; width: 100%; line-height: 2; font-size: 14px; padding: 24px 28px; border: 0.5px solid #D0CBC2; background: #FAF8F5; }
.tab_css input:checked + label, .tab_css label:hover { opacity: 1; font-weight: bold; background: #A8C4B8; color: #fff; border-color: #A8C4B8; }
.tab_css input:checked + label + .tab_content { display: initial; }
.panel-control { float: left; }
.tab_css .day { border-radius: 0; display: inline-block; color: #666; font-size: 14px; font-weight: 600; margin: 0 4px 4px 0; padding: 10px 18px; letter-spacing: 0.06em; }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width:991px) { .display-in-desktop{display:none;} .display-in-mobile{display:block;} }
@media (min-width:992px) { .display-in-mobile{display:none;} }

@media all and (max-width:990px) {
  .tour .spot-block { padding: 36px 20px 28px; }
  .tour p { font-size: 14px; line-height: 2; }
  .tour h1 { font-size: 10px !important; }
  .tour h2 { font-size: 30px !important; }
  .tour h3 { font-size: 13px !important; }
  .tour h5 { font-size: 24px !important; margin-bottom: 10px !important; }
  .tour h6 { font-size: 8px !important; }
  .tour h7 { font-size: 12px !important; }
  .tour .big-title { font-size: 12px; }
  .tour .notetitle { font-size: 12px; padding: 0 12px; }
  .tour .gift-title { font-size: 12px; }
  .tour .foodbox { width: 33.3%; margin-bottom: 14px; }
  .tour .foodbox:last-child { width: 30.3%; }
  .tour .tour_logo { display: none; }
  .tour .-mt-15 { margin-top: 0; }
  .tour .picmark { width: 48%; padding: 2%; }
  .mobile_n { display: none; }
  .mobile_on { display: block; }
  .slide-wrapper, .slide-wrapper > div { height: 220px; }
  .section-divider { padding: 44px 16px 32px; }
  .sage-panel { padding:36px 20px 28px; }
  .tab_css label { font-size: 12px; width: 48%; display: inline-flex; padding: 10px 5px; }
  .tab_css .day { font-size: 12px; width: 100%; text-align: center; padding: 5px; background: #A8C4B8; color: #fff; }
  .tab_content { padding: 10px 14px; }
  .tab_css { justify-content: flex-start; }
}
@media all and (max-width:640px) {
  .tour h2 { font-size: 26px !important; }
  .tour h5 { font-size: 20px !important; }
  .slide-wrapper, .slide-wrapper > div { height: 140px; }
}