@charset "utf-8";
/* CSS Document */

*{
	padding:0;
	margin:0;
	line-height:0;
}


a:link {
	color: #006699;
	text-decoration: none;
}
a:hover {
	color: #BE8917;
	text-decoration: underline;
}
a:visited {
	text-decoration: none;
	color: #006699;
}
a:active {
	text-decoration: none;
}

.mosttx {
	font-size: 0.8em;
	color: #3C3C33;
	line-height: 1.5em;
	letter-spacing: 0.1em;
}

img{
  vertical-align:0;
  display:block;
}

.container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    min-width: 1440px;
    height: auto;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;

    width: 100%;
    height: auto;
    padding-top: 16px;

    background: transparent;
}

.header-inner {
    width: 1320px;
    margin: 0 auto;
}


.header-logo {
    display: inline-block;
}

.header-logo img {
    display: block;
    width: auto;
    height: 50px;
}

.wrapper{
	width: 100%;
}


/* =========================
   第一屏 HERO / 視差大圖
========================= */
.layout.hero {
    width: 100%;
    height: 1017px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #314633;
}

.hero-bg-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1920px;
    height: 1222px;
    transform: translateX(-50%);
    overflow: hidden;
}

.hero-bg {
    width: 1920px;
    height: 1222px;
    transform: translate3d(0,0,0);
}

.hero-bg img {
    display: block;
    width: 1920px;
    height: 1222px;
    object-fit: cover;
}

.section01.hero-content {
    position: relative;
    width: 1440px;
    height: 1017px;
    margin: 0 auto;
    z-index: 2;
}

.hero-title {
    position: absolute;
    left: 443px;
    top: 40px;
}

.hero-title img {
    width: 404px;
    height: auto;
}

.hero-subtitle {
    position: absolute;
    left: 567px;
    top: 567px;
}

.hero-subtitle img {
    width: 306px;
    height: auto;
}

/* 第一CUT底部白色手刷過場 */
.hero-bottom-bar {
    left: 0;
    bottom: -1px;
    width: 1920px;
    height: 86px;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.hero-bottom-bar img {
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 1920px;
    height: auto;
    transform: translateX(-50%);
}


/* =========================
   第二 CUT / 靜態定位
   版心：1440px
========================= */
.section02 {
    position: relative;
    width: 100%;
    height: 1557px;
    background: #F7F7F5;
    overflow: hidden;
}

.section02-inner {
    position: relative;
    width: 1440px;
    height: 1557px;
    margin: 0 auto;
}

.section02 .s2-item {
    position: absolute;
    display: block;
    height: auto;
}

/* 左上直式主標 */
.s2-title {
    width: 246px;
    left: 321px;
    top: 21px;
}

/* 右上 365 天文字 */
.s2-text-top {
    width: 416px;
    left: 756px;
    top: 251px;
}

/* 左側茶杯 */
.s2-cup {
    width: 160px;
    left: 103px;
    top: 451px;
}

/* 右側桌曆 */
.s2-calendar {
    width: 129px;
    left: 1207px;
    top: 482px;
}

/* 左中段文字 */
.s2-text-middle {
    width: 438px;
    left: 123px;
    top: 907px;
}

/* 左下暖色暈染，放在手寫字後方 */
.s2-light {
    width: 361px;
    left: -88px;
    top: 1035px;
    z-index: 0;
}

/* 左下手寫字 */
.s2-handwriting {
    width: 448px;
    left: 178px;
    top: 1180px;
    z-index: 1;
}

/* 右下照片 */
.s2-photo {
    width: 638px;
    left: 756px;
    top: 774px;
}

/* =========================
   第三 CUT / 靜態定位
   版心：1440px
========================= */

.section03 {
    position: relative;
    width: 100%;
    height: 3322px;
    background: #F7F7F5;
    overflow: hidden;
}

.section03-inner {
    position: relative;
    width: 1440px;
    height: 3322px;
    margin: 0 auto;
}

.section03 .s3-item {
    position: absolute;
    display: block;
    height: auto;
}


/* =========================
   3-1 上方情境區
========================= */

/* 左上桌曆大圖 */
.s3-calendar-main {
    width: 1043px;
    left: -161px;
    top: 220px;
    z-index: 2;
}

/* 不妨... */
.s3-title {
    width: 268px;
    left: 815px;
    top: 342px;
    z-index: 3;
}

/* 右側茶席 */
.s3-tea {
    width: 304px;
    left: 1010px;
    top: 512px;
    z-index: 2;
}

/* 桌曆下方文字 */
.s3-copy {
    width: 302px;
    left: 341px;
    top: 996px;
    z-index: 3;
}

/* 小鉛筆 */
.s3-pencil {
    width: 104px;
    left: 770px;
    top: 1050px;
    z-index: 3;
}

/* 綠色半圓裝飾 */
.s3-green-deco {
    width: 1422px;
    left: -54px;
    top: 216px;
    z-index: 0;
    pointer-events: none;
}


/* =========================
   3-2 中段五張照片
========================= */

/* 整組大約從 930px 開始 */

.s3-photo-1 {
    width: 242px;
    left: 35px;
    top: 1332px;
    z-index: 2;
}

.s3-photo-2 {
    width: 242px;
    left: 317px;
    top: 1412px;
    z-index: 2;
}

.s3-photo-3 {
    width: 242px;
    left: 599px;
    top: 1492px;
    z-index: 2;
}

.s3-photo-4 {
    width: 242px;
    left: 881px;
    top: 1572px;
    z-index: 2;
}

.s3-photo-5 {
    width: 242px;
    left: 1163px;
    top: 1652px;
    z-index: 2;
}

/* 五張照片後方的黃綠光暈 */
.s3-color-deco {
    width: 1492px;
    left: 19px;
    top: 1274px;
    z-index: 0;
    opacity: 0.55;
}


/* =========================
   3-3 下方大圖
========================= */

/* 秋景橫圖 */
.s3-landscape {
    width: 1242px;
    left: -189px;
    top: 2408px;
    z-index: 1;
}

/* 疊在右下方的桌曆近拍 */
.s3-calendar-detail {
    width: 399px;
    left: 977px;
    top: 2783px;
    z-index: 3;
}


/* =========================
   第四 CUT / 靜態定位
   版心：1440px
========================= */

.section04 {
    position: relative;
    width: 100%;
    height: 2517px;
    background: #F7F7F5;
    overflow: hidden;
}

.section04-inner {
    position: relative;
    width: 1440px;
    height: 2517px;
    margin: 0 auto;
}

.section04 .s4-item {
    position: absolute;
    display: block;
    height: auto;
}

/* 4-1 觀・靈山勝境 */
.s4-title-1 {
    width: 559px;
    left: 39px;
    top: 14px;
    z-index: 1;
}

.s4-copy-1 {
    width: 177px;
    left: 472px;
    top: 572px;
    z-index: 1;
}

.s4-landscape-1 {
    width: 723px;
    left: 472px;
    top: 174px;
    z-index: 2;
}

.s4-calendar-1 {
    width: 457px;
    left: 893px;
    top: 430px;
    z-index: 3;
}

/* 4-2 聽・禪意法語 */
.s4-title-2 {
    width: 559px;
    left: 835px;
    top: 788px;
    z-index: 1;
}

.s4-copy-2 {
    width: 137px;
    left: 1115px;
    top: 1310px;
    z-index: 1;
}

.s4-quote-photo {
    width: 723px;
    left: 54px;
    top: 948px;
    z-index: 2;
}

.s4-calendar-2 {
    width: 457px;
    left: 530px;
    top: 1214px;
    z-index: 2;
}

.s4-meditation {
    width: 208px;
    left: 161px;
    top: 1376px;
    z-index: 1;
}

/* 4-3 落・歲月筆墨 */
.s4-title-3 {
    width: 559px;
    left: 39px;
    top: 1582px;
    z-index: 1;
}

.s4-copy-3 {
    width: 376px;
    left: 345px;
    top: 2186px;
    z-index: 1;
}

.s4-calendar-photo {
    width: 723px;
    left: 472px;
    top: 1742px;
    z-index: 2;
}

.s4-calendar-3 {
    width: 457px;
    left: 893px;
    top: 1998px;
    z-index: 3;
}

/* 第四 CUT 底部灰色筆刷 */
.s4-gray-bg {
    width: 1920px;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}


/* =========================
   第五 CUT / 靜態定位
   版心：1440px
========================= */

.section05 {
    position: relative;
    width: 100%;
    height: 1097px;
    background: #EAEBE9;
    overflow: hidden;
}

.section05-inner {
    position: relative;
    width: 1440px;
    height: 1097px;
    margin: 0 auto;
}

.section05 .s5-item {
    position: absolute;
    display: block;
    height: auto;
}

.section05 .s5-link {
    position: absolute;
    display: block;
}

/* 左側產品主圖 */
.s5-product {
    width: 632px;
    left: 16px;
    top: 25px;
    z-index: 2;
}

/* 右側商品資訊 */
.s5-info {
    width: 636px;
    left: 727px;
    top: 78px;
    z-index: 2;
}

/* 中央往下箭頭 */
.s5-arrow {
    width: 82px;
    left: 679px;
    top: 666px;
    z-index: 2;
}

/* CTA 上方文字 */
.s5-cta-title {
    width: 786px;
    left: 328px;
    top: 811px;
    z-index: 2;
}

/* 單本請購 */
.s5-link-single {
    left: 296px;
    top: 882px;
    z-index: 3;
}

.s5-cta-single {
    position: relative;
    width: 357px;
    left: 0;
    top: 0;
}

/* 買5送1 */
.s5-link-bundle {
    left: 788px;
    top: 882px;
    z-index: 3;
}

.s5-cta-bundle {
    position: relative;
    width: 357px;
    left: 0;
    top: 0;
}


/* =========================
   第六 CUT / 靜態定位
   版心：1440px
========================= */

.section06 {
    position: relative;
    width: 100%;
    height: 995px;
    background: #F7F7F5;
    overflow: hidden;
}

.section06-inner {
    position: relative;
    width: 1440px;
    height: 995px;
    margin: 0 auto;
}

.section06 .s6-item {
    position: absolute;
    display: block;
    height: auto;
}

/* 上方灰色筆刷過場 */
.s6-gray-bg {
    width: 1920px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

/* 左側文字 */
.s6-copy {
    width: 284px;
    left: 146px;
    top: 298px;
    z-index: 3;
}

/* 右側森林照片 */
.s6-photo {
    width: 1058px;
    left: 622px;
    top: 249px;
    z-index: 1;
}

/* 左下黃色光暈 */
.s6-light {
    width: 361px;
    left: -80px;
    top: 538px;
    z-index: 0;
    pointer-events: none;
}

/* 左下手寫字 */
.s6-handwriting {
    width: 267px;
    left: 232px;
    top: 630px;
    z-index: 3;
}


/* title + subtitle 由下往上絲滑淡入 */
.reveal-up {
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 1.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-up.is-show {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up.delay {
    transition-delay: 0.7s;
}

/* 尊重系統「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {
    .hero-bg {
        transform: none !important;
    }
    .reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


.text{
	overflow: auto;	
}

.mosttx132 {	
	font-size: 1.2em;
	color: #000;
	letter-spacing:1px;
	line-height:1.7em;
	margin-bottom:1em;
}

.mosttx133 {
	font-size: 1.5em;
	font-weight:bolder;
	color: #000;
	letter-spacing:1px;
	line-height:45px;
	margin:20;
}

.top {
	background-color: #fff;
    position: fixed;
    bottom: 0em;
	right: 0em;

}

footer{
    background: #F7F7F5;
	padding-top: 1em;
	height: 70px;
	text-align: center;
}

footer a,
footer a:link,
footer a:visited {
    color: #3C3C33;
}

footer a:hover {
    color: #3C3C33;
}

/* =========================
   Section 2～7 Scroll Reveal
========================= */

/* 一般素材：淡入＋由下往上 */
.scroll-reveal {
    opacity: 0;
    translate: 0 42px;
    transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        translate 1.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, translate;
}

.scroll-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
}

/* 背景、光暈、筆刷：只淡入，不移動 */
.scroll-fade {
    opacity: 0;
    transition: opacity 1.35s ease;
    will-change: opacity;
}

.scroll-fade.is-revealed {
    opacity: 1;
}


/* 尊重系統「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {

    .scroll-reveal,
    .scroll-fade {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}

/* =========================
   Section 3 五張照片 Smooth Group
   五張照片的 scroll 位移統一由群組控制
========================= */

.s3-photo-group {
    position: absolute;
    inset: 0;
    width: 1440px;
    height: 3562px;
    z-index: 2;

    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;

    pointer-events: none;
}

/* 保留照片本身原來的 absolute 定位 */
.s3-photo-group .s3-item {
    position: absolute;
    pointer-events: auto;
}

/* =========================================================
   3-2 五張照片：同步位移修正
   淡入順序保留，但五張的 scroll 位移完全一致
   ========================================================= */

/*
 * 這五張照片的「淡入」只保留 opacity，
 * 不再使用一般 scroll-reveal 的 42px translate 入場位移。
 * 這樣可以避免第一張先開始移動、2～5 還在等待 delay，
 * 導致看起來速度／高度不同。
 */
.s3-photo-1.scroll-reveal,
.s3-photo-2.scroll-reveal,
.s3-photo-3.scroll-reveal,
.s3-photo-4.scroll-reveal,
.s3-photo-5.scroll-reveal {
    translate: 0 0 !important;
}

.s3-photo-1.scroll-reveal.is-revealed,
.s3-photo-2.scroll-reveal.is-revealed,
.s3-photo-3.scroll-reveal.is-revealed,
.s3-photo-4.scroll-reveal.is-revealed,
.s3-photo-5.scroll-reveal.is-revealed {
    translate: 0 0 !important;
}

/* 淡入樣式維持，只保留 opacity transition */
.s3-photo-1.scroll-reveal,
.s3-photo-2.scroll-reveal,
.s3-photo-3.scroll-reveal,
.s3-photo-4.scroll-reveal,
.s3-photo-5.scroll-reveal {
    transition-property: opacity !important;
    transition-duration: 1.1s !important;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 每張淡入間隔一致 */
.s3-photo-1.scroll-reveal { transition-delay: 0s !important; }
.s3-photo-2.scroll-reveal { transition-delay: 0.12s !important; }
.s3-photo-3.scroll-reveal { transition-delay: 0.24s !important; }
.s3-photo-4.scroll-reveal { transition-delay: 0.36s !important; }
.s3-photo-5.scroll-reveal { transition-delay: 0.48s !important; }


/* =========================================================
   Section 5 + 7 CTA FINAL
   完全不參與 Scroll Reveal
   只動畫按鈕圖片本身，滑順縮小
   ========================================================= */

.section05 .s5-link {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
}

/* Section 5 CTA：拿掉 absolute item 行為，讓 <a> 有正常尺寸 */
.section05 .s5-cta-single,
.section05 .s5-cta-bundle {
    position: relative !important;
    display: block;
    left: 0 !important;
    top: 0 !important;
}

/* 5 / 7 CTA 圖片共用平滑 shrink */
.section05 .s5-cta-single,
.section05 .s5-cta-bundle {
    opacity: 1 !important;
    translate: 0 0 !important;

    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;

    transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Hover：柔順縮小 */
.section05 .s5-link:hover .s5-cta-single,
.section05 .s5-link:hover .s5-cta-bundle {
    transform: translate3d(0, 0, 0) scale(0.96);
}

/* Active：再輕微縮一點 */
.section05 .s5-link:active .s5-cta-single,
.section05 .s5-link:active .s5-cta-bundle {
    transform: translate3d(0, 0, 0) scale(0.94);
}


/* =========================================================
   指定素材取消 Scroll Reveal
   直接固定顯示；其他素材仍使用全站 reveal
   ========================================================= */

.s2-calendar,
.s2-cup,
.s3-title,
.s3-pencil,
.s3-copy,
.s4-title-1,
.s4-title-2,
.s4-title-3,
.s4-copy-1,
.s4-copy-2,
.s4-copy-3,
.s4-meditation,
.s5-arrow {
    opacity: 1 !important;s
    translate: 0 0 !important;
    transition: none !important;
}


@media (prefers-reduced-motion: reduce) {
    .section05 .s5-cta-single,
    .section05 .s5-cta-bundle {
        transition: none !important;
        transform: none !important;
    }
}


/* =========================
   Section 2｜2-1 → 2-2 延遲進場
   2-1 使用一般 Scroll Reveal
   2-2 不參與 IntersectionObserver，由 2-1 觸發後自動帶出
========================= */

.s2-text-top {
    opacity: 0;
    translate: 0 42px;

    transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        translate 1.35s cubic-bezier(0.16, 1, 0.3, 1);

    /* 這裡控制 2-1 與 2-2 的進場間隔 */
    transition-delay: 0.7s;
}

.s2-text-top.is-follow-show {
    opacity: 1;
    translate: 0 0;
}




/* =========================
   Section 3｜3-1-3 → 3-1-4 延遲進場
   3-1-3 (.s3-calendar-main) 使用一般 Scroll Reveal
   3-1-4 (.s3-tea) 完全取消自己的 Scroll Reveal，
   只由 3-1-3 出現後延遲 0.5 秒自動帶出
========================= */

.s3-tea {
    opacity: 0;
    translate: 0 42px;

    transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        translate 1.35s cubic-bezier(0.16, 1, 0.3, 1);

    transition-delay: 0.5s;
}

.s3-tea.is-follow-show {
    opacity: 1;
    translate: 0 0;
}


/* =========================
   Section 4 + 6 灰色手刷
   取消淡入效果，固定顯示
========================= */

.s4-gray-brush.scroll-reveal,
.s4-gray-brush.scroll-fade,
.s6-gray-brush.scroll-reveal,
.s6-gray-brush.scroll-fade {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
}


/* =========================
   Section 4 + 6 灰色手刷 FINAL
   正確 class：固定顯示、不淡入
========================= */

.s4-gray-bg.scroll-reveal,
.s4-gray-bg.scroll-fade,
.s6-gray-bg.scroll-reveal,
.s6-gray-bg.scroll-fade,
.s4-gray-bg,
.s6-gray-bg {
    opacity: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
}