#banner_area { overflow: hidden; -webkit-font-smoothing: antialiased; transform-style: preserve-3d; backface-visibility: hidden; }
#banner_area::before{position:absolute;width:100%;height: 50%;background: linear-gradient(to top, rgb(0 0 0 / 0%) 10%, #fdf4f2 100%);top:0;left:0;z-index: 1;content:"";opacity: .9;}
#banner_area::after{position:absolute;width:100%;height: 30%;background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%,  #fdf4f2 100%);bottom: 0;left:0;z-index: 1;content:"";}

#banner_area .banner18 { position: relative; width: 100%; height: 100vh; overflow: hidden; animation: bannerFadeIn 2.5s cubic-bezier(0.215,0.61,0.355,1) forwards; cursor: grab; }
#banner_area .banner18:active { cursor: grabbing; }
@keyframes bannerFadeIn {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}
#banner_area .index_banner { width: 100%; height: 100%; position: relative; z-index: 1; }


/* 滑塊項目 */
#banner_area .slick-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 2s cubic-bezier(0.4,0,0.2,1),visibility 2s; z-index: 1; overflow: hidden; user-select: none;}
#banner_area .slick-slide.active { opacity: 1; visibility: visible; z-index: 10; }

/* 媒體容器：負責縮放動畫 */
#banner_area .media-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform; transform: translate3d(0,0,0) scale(1.05); transition: transform 12s cubic-bezier(0.25,0.1,0.25,1); pointer-events: none; }
#banner_area .slick-slide.active .media-wrap { transform: translate3d(0,0,0) scale(1); }
#banner_area .slide-media { width: 100%; height: 100%; object-fit: cover; display: block; }
#banner_area .media-wrap picture { display: block; width: 100%; height: 100%; }
#banner_area .media-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 獨立濾鏡遮罩層 */
#banner_area .media-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;backdrop-filter: brightness(0.95) contrast(1.05);-webkit-backdrop-filter: brightness(0.95) contrast(1.05);pointer-events: none;}

/* 文字區塊 */
#banner_area .cover { position: absolute; top: 50%; left: 14%; transform: translateY(-47%); z-index: 20; max-width: 70%; pointer-events: none; }
#banner_area .cover .sub-title { font-family: 'Cormorant Garamond',serif; font-style: italic; font-size: 1.9rem; margin-bottom: 12px; opacity: 0; transform: translateY(30px); letter-spacing: 0.05em; color: rgba(255,255,255,0.85); }
#banner_area .cover .main-title { font-family: 'Cormorant Garamond',serif; font-size: 7.8rem; line-height: 0.75; font-weight: 400; margin-bottom: 40px; opacity: 0; transform: translateY(50px); letter-spacing: 1px; text-shadow: 0 15px 40px rgba(0,0,0,0.4); color: var(--white); font-style: italic; }
#banner_area .cover .ch-title { font-size: 1.8rem; font-weight: 400; letter-spacing: 0.2em; margin-bottom: 10px; opacity: 0; transform: translateY(25px); color: #fff; }
#banner_area .cover .description {font-size: 1.1rem;line-height: 2.1;font-weight: 300;letter-spacing: 0.12em;margin-bottom: 40px;opacity: 0;transform: translateY(20px);color: rgba(255,255,255,0.75);max-width: 80%;}
/* 文字進場：保持高端模糊感 */
#banner_area .active .cover .sub-title { animation: fadeInUpBlur 1.8s forwards 0.5s; }
#banner_area .active .cover .main-title { animation: fadeInUpBlur 2.0s forwards 0.7s; }
#banner_area .active .cover .ch-title { animation: fadeInUpBlur 1.8s forwards 0.9s; }
#banner_area .active .cover .description { animation: fadeInUpBlur 1.8s forwards 1.1s; }
#banner_area .active .cover .button06 { animation: btnScaleIn 1.8s forwards 1.3s; }
@keyframes fadeInUpBlur {
  from { opacity: 0; transform: translateY(40px); filter: blur(15px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes btnScaleIn {
  from { opacity: 0; transform: scale(0.96); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
/* 按鈕樣式 */
#banner_area .button06 { display: inline-block; padding: 15px 40px; border: 1px solid rgba(255,255,255,0.3); color: #fff; text-decoration: none; font-family: 'Oswald',sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 5px; position: relative; overflow: hidden; background: transparent; pointer-events: auto; transition: border-color 0.4s; display: none; }
#banner_area .button06 span { position: relative; z-index: 2; color: var(--white); font-size: .8rem; }
#banner_area .button06::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #fff; transition: left 0.7s cubic-bezier(0.19,1,0.22,1); z-index: 1; }
#banner_area .button06:hover { color: #000; border-color: #fff; }
#banner_area .button06:hover::before { left: 0; }
/* 控制面板 */
#banner_area .tool_btn { position: absolute; bottom: 100px; left: 14%; z-index: 30; display: flex; align-items: center; gap: 40px; opacity: 0; animation: fadeInSimple 1.5s forwards 2.0s; }
@keyframes fadeInSimple {
  from { opacity: 0; }
  to { opacity: 1; }
}
#banner_area .tool_page { display: flex; align-items: center; }
#banner_area .tool_page * { font-size: 1.6rem; letter-spacing: 3px; color: rgba(255,255,255,0.8); font-family: 'Cormorant Garamond',serif; }
#banner_area .tool_page .bar_container { position: relative; width: 1px; height: 60px; background: rgba(255,255,255,0.12); margin: 0 20px; overflow: hidden; }
#banner_area .tool_page .bar_fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.4); }
#banner_area .arrow_group { display: flex; gap: 10px; }
#banner_area .slick-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.6s cubic-bezier(0.23,1,0.32,1); }
#banner_area .slick-arrow:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-3px); }
#banner_area .slick-arrow svg { stroke: #fff; fill: none; width: 9px; transition: transform 0.3s; }
/* 捲動提示 */
#banner_area .scroll_down03 { position: absolute; bottom: -10px; right: 50px; z-index: 30; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: fadeInSimple 1.5s forwards 2.5s; }
#banner_area .scroll_down03 p { writing-mode: vertical-lr; font-size: 13px; letter-spacing: 3px; color: rgba(255,255,255,0.9); margin-bottom: 35px; font-family: 'Cormorant Garamond',serif; font-style: italic; }
#banner_area .scroll_down03 .line { width: 1px; height: 90px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
#banner_area .scroll_down03 .line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,transparent,#fff,transparent); animation: lineMovingElegant 3.5s infinite cubic-bezier(0.4,0,0.2,1); }
@keyframes lineMovingElegant {
  0% { top: -100%; }
  100% { top: 100%; }
}


/* 響應式佈局 */

@media (max-width:1440px) {
	#banner_area .cover .main-title { font-size: 5.8rem; }
	#banner_area .cover .ch-title { font-size: 1.4rem; }
	#banner_area .tool_btn { bottom: 80px; }
}
@media (max-width:1024px) {
	#banner_area .cover .main-title { font-size: 6.5rem; }
	#banner_area .cover .sub-title { font-size: 1.2rem; }
	#banner_area .cover .ch-title { font-size: 1.2rem; letter-spacing: 0.1em; }
	#banner_area .cover .description { font-size: 1rem; }
}
@media (max-width:768px) {
	#banner_area .cover { left: 8%; width: 84%; transform: translateY(-50%); }
	#banner_area .cover .main-title { font-size: 4.2rem; letter-spacing: -1.5px; }
	#banner_area .tool_btn { left: 8%; bottom: 40px; gap: 35px; }
	#banner_area .scroll_down03 { display: none; }
	#banner_area .banner18 { height: 80vh; }
}