:root {
  --bg-warm: #fdfaf2;
  --paper: #ffffff;
  --ink: #2c3e50;
  --brand-green: #2d5a27;
  --brand-green-light: #e8f5e2;
  --accent-red: #b83428;
  --soft-shadow: 0 10px 30px rgba(0,0,0,0.05);
  --handwriting: 'Zeyada', cursive;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--bg-warm);
  background-image: 
    radial-gradient(#e5e0d0 1px, transparent 1px),
    linear-gradient(to right, rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 20px 20px, 40px 40px, 40px 40px;
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--ink);
  line-height: 1.8;
  padding: calc(20px + 1%) 5%;
}

.container {
  max-width: 1280px; background: #fff; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.12); border-radius: 20px; overflow:hidden; letter-spacing: 0.05rem;font-family: 'Noto Serif TC', serif;  font-size: 17px; line-height: 2;
  margin: 0 auto;
}

.letter-top {
  background: var(--paper);
  padding: 5rem 4rem;
  position: relative;
  box-shadow: 2px 2px 0 #fff, 5px 5px 0 #e5e0d0, 15px 15px 40px rgba(0,0,0,0.08);
  border-radius: 2px;
  margin-bottom: 3rem;
}

.letter-top::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 60px 60px 0;
  border-color: transparent var(--bg-warm) transparent transparent;
}

.letter-header { margin-bottom: 3rem; border-bottom: 2px solid #f9f9f9; padding-bottom: 2rem; text-align: center; }
.letter-title { font-family: 'Noto Serif TC', serif; font-size: 3rem; font-weight: 900; color: var(--brand-green); margin-bottom: 0.5rem; letter-spacing: 0.15em; }
.letter-subtitle { font-family: 'Noto Serif TC', serif; font-size: 1.2rem; color: #888; letter-spacing: 0.5rem; }

.content-block { margin-bottom: 4rem; padding-left: 2rem; border-left: 1px solid #eee; }
.content-block h2 { font-family: 'Noto Serif TC', serif; font-size: 1.8rem; color: var(--brand-green); margin-bottom: 1.5rem; }
.content-block p { font-family: 'Noto Serif TC', serif; font-size: 1.1rem; margin-bottom: 1.5rem; text-align: justify; }

.device-img-wrap {
  margin: 3rem 0;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  border: 12px solid #fff;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.device-img-wrap:hover { transform: scale(1.02); }
.device-img-wrap img { width: 100%; display: block; }

.partner-links-section {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  padding: 3rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--soft-shadow);
  margin-top: 4rem;
}

.partner-links-section h2 {
  font-family: 'Noto Serif TC', serif;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--brand-green);
  margin-bottom: 2rem;
  text-align: center;
}

.partner-links-grid {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.partner-link-card {
  background: #fff;
  padding: 1.5rem 2rem;
  border-radius: 0.8rem;
  border-left: 6px solid var(--accent-red);
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
  transition: all 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.partner-link-card:hover {
  transform: translateX(10px);
  background: var(--brand-green-light);
  color: var(--brand-green);
}

.partner-link-card span { font-size: 1.2rem; }

.stamp { position: absolute; bottom: 60px; right: 50px; width: 140px; height: 140px; border: 5px double var(--accent-red); border-radius: 50%; opacity: 0.2; transform: rotate(15deg); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 900; color: var(--accent-red); pointer-events: none; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-red);
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 2rem;
  transition: transform 0.2s;
  font-family: 'Noto Serif TC', serif;
}
.back-btn:hover { transform: translateX(-5px); }

.detail-card {
  background: var(--paper);
  padding: 5rem 4rem;
  box-shadow: 2px 2px 0 #fff, 5px 5px 0 #e5e0d0, 15px 15px 40px rgba(0,0,0,0.08);
  border-radius: 2px;
  position: relative;
  min-height: 80vh;
}

.detail-card::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 60px 60px 0;
  border-color: transparent var(--bg-warm) transparent transparent;
}

.detail-header {
  margin-bottom: calc(20px + 1%);
  border-bottom: 3px solid var(--brand-green);
  padding-bottom: 20px;
}

.detail-header > div {
  font-family: 'Noto Serif TC', serif; line-height: 1.4;
  font-weight: 900;
  font-size: clamp(25px, 2.6vw, 36px);
  color: var(--brand-green);
}

.detail-section {
  margin-bottom: calc(20px + 2%);
}

.detail-section h4 {
  background: var(--brand-green);
  color: #fff;
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: clamp(19px, 1.2vw, 22px);
  font-weight: 700;
  margin-bottom: 10px;
  box-shadow: 0 4px 10px rgba(45, 90, 39, 0.2); line-height: 1.6;
}

.detail-content {
  color: #444;
  white-space: pre-wrap;
  text-align: justify;
}

.detail-content a {
    color: var(--accent-red);
    text-decoration: underline;
    word-break: break-all;
}

@media only screen and (max-width: 768px) {
  body {  }
  .letter-top, .detail-card { padding: 4rem 1.5rem; }
}

/* Banner Styles */
.letter-banner {
  background: #fdfaf2;
  margin-bottom: -40px;
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.05);
  z-index: 5;
}

.airmail-border { position: absolute; width: 100%; top: 0; left: 0;
  height: 12px;
  background: repeating-linear-gradient(
    -45deg,
    #b83428,
    #b83428 30px,
    #fff 30px,
    #fff 60px,
    #2c3e50 60px,
    #2c3e50 90px,
    #fff 90px,
    #fff 120px
  );
}

.banner-content {
  padding: 3rem 4rem;
  position: relative;
}

.urgent-stamp {
  position: absolute;
  top: 40px;
  right: 50px;
  border: 5px double #b83428;
  color: #b83428;
  padding: 8px 20px;
  font-weight: 900;
  transform: rotate(15deg);
  opacity: 0.3;
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-family: 'Noto Serif TC', serif;
}

.banner-title {
  font-family: 'Zeyada', cursive;
  font-size: 3.5rem;
  color: var(--brand-green);
  margin-bottom: 0.2rem;
  line-height: 1;
}

.banner-date {
  font-size: 0.8rem;
  letter-spacing: 0.5rem;
  color: #aaa;
  margin-bottom: 1rem;
  font-family: 'Noto Serif TC', serif;
}

.banner-scribble {
  font-family: 'Noto Serif TC', serif;
  font-size: 1rem;
  color: #888;
  font-style: italic;
}


.font-size-18 { font-size: clamp(16px, 1.3vw, 18px);}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-21 { font-size: clamp(18px, 1.5vw, 21px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-26 { font-size: clamp(20px, 2.1vw, 26px);}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px);}
.font-size-32 { font-size: clamp(22px, 2.7vw, 32px);}
.font-size-36 { font-size: clamp(22px, 3.3vw, 36px); line-height: 1.3;}
.font-size-40 { font-size: clamp(24px, 3.5vw, 40px); line-height: 1.3;}
.font-size-42 { font-size: clamp(24px, 3.5vw, 42px); line-height: 1.3;}
.font-size-44 { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(24px, 3.5vw, 48px); line-height: 1.3;}
.font-size-56 { font-size: clamp(25px, 3.7vw, 56px); line-height: 1.2;}
.font-size-60 { font-size: clamp(28px, 4vw, 60px); line-height: 1.2;}
.font-size-70 { font-size: clamp(32px, 4.4vw, 70px); line-height: 1.1;}

.weight-100 { font-weight: 100;}
.weight-300 { font-weight: 300;}
.weight-400 { font-weight: 400;}
.weight-500 { font-weight: 500;}
.weight-600 { font-weight: 600;}
.weight-700 { font-weight: 700;}
.weight-900 { font-weight: 900;}

.align-center { text-align: center !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}
.align-justify { text-align: justify!important;}

.color-green { color: #2d5a27;}

.title-type-1 { padding-bottom: calc(20px + 1%); line-height: 1.3;}

.p-layout { margin: 0; padding:0 0 calc(20px + 1%) 0; }


.idx-section-1 { background: url("../images/section-1-bg.png") no-repeat top right; position: relative; padding: 50px 5% calc(20px + 5%) 5%;}
.logo { padding-bottom: calc(20px + 1%);}
.logo > img { width: 270px}

.idx-section-1-content { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-section-1-content > div:nth-of-type(1) { padding: 0 20px; width: 65%;}
.idx-section-1-content > div:nth-of-type(2) { width: 35%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: calc(20px + 6%);}
.idx-section-1-content > div:nth-of-type(2) > div:nth-of-type(1) { width: 40px; margin-right: 20px;font-family: 'Noto Serif TC', serif; color: #6a6a6a; font-size: 30px; line-height: 1.6; padding-top: 40%;}
.idx-section-1-content > div:nth-of-type(2) > div:nth-of-type(2) { width: 60px; font-family: 'Noto Serif TC', serif; color: #2d5a27; font-size: 60px; font-weight: 700; line-height: 1.2;}

.idx-section-1-pto { border-radius: 20px;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); padding: 10px; background: #fff;}
.idx-section-1-pto img { border-radius: 15px; width: 100%;}

.idx-section-2 { background: #f9f9f6; padding: calc(20px + 5%) 5%;}

.idx-section-2-top { padding-bottom: calc(20px + 4%);margin-bottom: calc(20px + 4%); border-bottom: 1px solid #d8d8d8;}
.idx-section-2-top-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.idx-section-2-top-content > div:nth-of-type(1) { width: 35%; padding-top: calc(20px + 2.5%);}
.idx-section-2-top-content > div:nth-of-type(2) { width: 57%;}

.idx-section-2-bottom { display: flex; flex-direction: row; flex-wrap: wrap; }
.idx-section-2-bottom > div:nth-of-type(1) { width: calc(100% - 315px); padding-right: 10%; }
.idx-section-2-bottom > div:nth-of-type(2) { width: 315px; }
.idx-section-2-title { position: relative; padding-bottom: 20px;}
.idx-section-2-title:before { position: absolute; content: ""; border-radius: 100%; opacity: 0.15;width: 65px; height: 65px; top:-14px; left: -32px; background: #2d5a27;}
.idx-section-2-title > div { position: relative; z-index: 2; color: #2d5a27; line-height: 1.5;}
.idx-section-2-title > div > div:nth-of-type(1) { font-weight: 700; font-size: clamp(19px, 1.2vw, 22px);}
.idx-section-2-title > div > div:nth-of-type(2) { font-weight: 500; font-size: clamp(24px, 1.8vw, 28px);}

.video-container {position: relative;padding-bottom: 168%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border-width: 0;}

.idx-section-3 { padding: calc(20px + 5%) 8%;}
.idx-section-3-link { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.idx-section-3-link > a, .idx-section-3-link > div { margin: 0 10px calc(20px + 1%) 10px; width: calc(33.33% - 20px); border: 1px solid #2d5a27; border-radius: 40px 15px; padding: 20px 15px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;transition: all 0.4s ease-out 0s; text-decoration: none;}
.idx-section-3-link > div { justify-content: center;font-size: clamp(16px, 1.3vw, 19px); color: #fff; font-weight: 700; line-height: 1.4;border: 1px solid #eee;}
.idx-section-3-link > a:hover { color: #fff; background: #2d5a27;}
.idx-section-3-link > a:hover > div:nth-of-type(1) { color: #fff; }
.idx-section-3-link > a:hover > div:nth-of-type(2) { background: #fff; }
.idx-section-3-link > a:hover > div:nth-of-type(2) > span { background: #2d5a27; }
.idx-section-3-link > a > div:nth-of-type(1) { width: calc(100% - 30px); padding-right: 10px; font-size: clamp(16px, 1.3vw, 19px); color: #2d5a27; font-weight: 700; line-height: 1.4;}
.idx-section-3-link > a > div:nth-of-type(2) { width: 30px; height: 30px; border-radius: 100%; background: #2d5a27; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;}
.idx-section-3-link > a > div:nth-of-type(2) > span { width: 7px; height: 12px; background: #fff; display: block; clip-path: polygon(0% 0, 100% 50%, 0% 100%);}

.vbox-inline { border-radius: 20px !important; padding: 25px !important;}

.partners-box {display: none;}
.partners-content {line-height: 1.7; font-size: 17px; font-family:'Noto Serif TC', serif; letter-spacing: 0.05rem }
.partners-content a { color: #58954f; text-decoration: underline; font-weight: 700;}

@media only screen and (max-width: 980px) {
	.idx-section-1 { background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.85) 100%), url("../images/section-1-bg.png") no-repeat 100% 0px;  background-size: 100%, 100%;}
	.idx-section-1-content > div:nth-of-type(1) { padding: 0 0px; width: 100%; order: 2;}
	.idx-section-1-content > div:nth-of-type(2) { width: 100%; flex-direction: column; justify-content: flex-start; padding-top: 0;padding-bottom: 25px;}
	.idx-section-1-content > div:nth-of-type(2) > div:nth-of-type(1) { width: 100%; margin-right: 0px; font-size: clamp(22px, 2vw, 30px); order: 2; padding-top: 6px;letter-spacing: 0.4rem; text-align: center;}
	.idx-section-1-content > div:nth-of-type(2) > div:nth-of-type(2) { width: 100%; font-size: clamp(28px, 4vw, 60px); order: 1; letter-spacing: 0.4rem;text-align: center;}
	
	.logo > img { width: 25%; min-width: 180px;}
	
	.idx-section-2-top-content > div:nth-of-type(1) { width: 100%; padding-top: 0; padding-bottom: calc(20px + 3%);}
	.idx-section-2-top-content > div:nth-of-type(2) { width: 100%;}
	
	.idx-section-2-title:before { width: 35px; height: 35px; top:-5px; left: -10px; }
	.idx-section-2-bottom > div:nth-of-type(1) { width: calc(100% - 0px); padding-right: 0%; padding-bottom: calc(20px + 2%);}
	.idx-section-2-bottom > div:nth-of-type(2) { width: 100%; }
	
	.idx-section-3-link > a, .idx-section-3-link > div { margin: 0 0px calc(20px + 1%) 0px; width: 100%;}
}