:root { --primary: #9b8e77; --primary-rgb: 148,120,90; --secondary: #777777; --secondary-rgb: 151,157,111; --complement: #272727; --complement-rgb: 224,217,211; --triadic1: #272727; --triadic1-rgb: 40,82,23; --triadic2: #ededed; --triadic2-rgb: 82,23,40; --info: #262626; --info-rgb: 68,68,68; --white: #fff; --white-rgb: 255,255,255; --black: #181818; --black-rgb: 51,51,51; --gray: #f6f5f3; --gray-rgb: 246,145,243; --width-xxs: 550px; --width-xs: 640px; --width-sm: 760px; --width-md: 980px; --width-lg: 1024px; --width-xl: 1280px; --width-xxl: 1440px; --font-family: 'Noto Sans TC','Noto Sans SC'; --transition-speed: 1.5s; --easing: cubic-bezier(0.4,0,0.2,1); }
@keyframes siteReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slowPush {
  0% { transform: scale(1); }
  100% { transform: scale(1.15); }
}
#banner { width: 100%; height: 100%; position: relative; }
#banner .home_container { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; user-select: none; overflow: hidden; animation: siteReveal 2.5s var(--easing) forwards; }
/* 裝飾線條 */
#banner .first_line, #banner .second_line, #banner .third_line, #banner .fourth_line, #banner .fifth_line, #banner .sixth_line, #banner .seventh_line {position: absolute;background: rgba(255, 255, 255, 0.18);z-index: 10;pointer-events: none;opacity: 0;animation: siteReveal 3s var(--easing) 0.5s forwards;}
#banner .first_line {width: 1px;height: 100%;left: 84px;}
#banner .second_line {width: 1px;height: 100%;left: 388px;}
#banner .third_line {width: 100%;height: 1px;left: 388px;top: 112px;}
#banner .fourth_line {width: 1px;height: 100%;left: 10%;top: -20%;transform: rotate(50deg);}
#banner .fifth_line {width: 1px;height: 100%;left: 98%;bottom: -31%;transform: rotate(50deg);}
#banner .sixth_line { width: 100%; height: 1px; bottom: 100px; right: 125px; }
#banner .seventh_line { width: 1px; height: 100%; right: 125px; }

/*SVG 進度圈*/
#banner #circlee { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; pointer-events: none; height: 100vh; width: auto; opacity: 0; animation: siteReveal 3s var(--easing) 0.8s forwards; }

/*輪播核心*/
#banner .slider { width: 100%; height: 100%; position: relative; z-index: 2; cursor: grab; }
#banner .slider__inner { position: relative; width: 100%; height: 100%; }
#banner .slider__inner .item:before { content: ''; position: absolute; width: 100%; height: 250px; background: linear-gradient(to top, rgb(0 0 0 / 0%), rgb(0 0 0 / 40%)); top: 0; left: 0; z-index: 2; opacity: .4; }
#banner .slider__inner .item:after { position: absolute; bottom: 0; left: 0; z-index: 1; content: ""; width: 100%; height: 300px; display: block; background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 50%)); pointer-events: none; }
#banner .item { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-speed) var(--easing),visibility var(--transition-speed); z-index: 1; }
#banner .item.active { opacity: 1; visibility: visible; z-index: 12; }

/*圖片/影片容器*/
#banner .item .img {position: absolute;top: -70px;left: 0;width: 110%;height: 110%;background-size: cover;background-position: center;overflow: hidden;will-change: transform;transform-origin: center center;}
#banner .item .img:after { position: absolute; background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)); inset: 0; content: ""; }

/*呼吸感慢速推進 (僅圖片)*/
#banner .item.active:not(.slide-video) .img { animation: slowPush 30s linear infinite alternate; }
#banner .item .img video {width: 100%;height: auto;object-fit: cover;pointer-events: none;}

/*點擊連結區塊*/
#banner .item > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*標題與描述*/
#banner .item .info {position: absolute;z-index: 15;pointer-events: none;top: 57%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 100%;}
#banner .item .info * { color: var(--white); text-align: center; }
#banner .item .info .banneritemh3 { font-size: 1.7rem; letter-spacing: 12.8px; opacity: 0; transform: translateX(60px); transition: opacity 1.2s var(--easing), transform 1.2s var(--easing); }
#banner .item .info article { margin: 40px 0 60px 0; opacity: 0; transform: translateX(40px); transition: opacity 1s var(--easing),transform 1s var(--easing); font-size: 20px; letter-spacing: 6px; line-height: 200%; color: rgba(255, 255, 255,0.9); }
#banner .item .info p { margin: 0; opacity: 0; transform: translateX(80px); transition: opacity 1.2s var(--easing),transform 1.2s var(--easing); font-size: 6vw; font-weight: 500; text-transform: uppercase; line-height: 1.1; letter-spacing: 5px; font-family: "Poppins", serif; }
#banner .item.active .info .banneritemh3,#banner .item.active .info p,#banner .item.active .info article { opacity: 1; transform: translateX(0); }
#banner .item.exit-left .info article { opacity: 0; transform: translateX(-40px); }
#banner .item.exit-left .info p { opacity: 0; transform: translateX(-80px); }
#banner .item.exit-right .info article { opacity: 0; transform: translateX(40px); }
#banner .item.exit-right .info p { opacity: 0; transform: translateX(80px); }
#banner .item .info .more_btn { display: flex; justify-content: center; align-items: center; gap: 50px; }
#banner .item .info .more_btn a:first-child { position: relative; }
#banner .item .info .more_btn a:first-child:after { content: ""; width: 1px; height: 25px; display: block; background: #ffffff; position: absolute; right: -25px; bottom: 0; opacity: .8; }
#banner .item .info .more_btn a { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid rgb(255 255 255 / 100%); padding-bottom: 5px; }
#banner .item .info .more_btn a font { font-family: "Poppins", serif; letter-spacing: 1px; font-size: 13px; }
#banner .item .info .more_btn a svg { width: 18px; height: 18px; fill: var(--white); }

/* 數字編號 */
#banner .numb {position: absolute;bottom: 130px;right: 8%;z-index: 15;font-family: serif;font-style: italic;font-size: 26px;display: flex;align-items: center;height: 32px;overflow: hidden;text-shadow: 0 2px 4px rgba(0,0,0,0.5);opacity: 0;animation: siteReveal 2s var(--easing) 1.5s forwards;}
#banner .current_numb_wrapper { height: 32px; overflow: hidden; position: relative; width: 40px; }
#banner .current_numb { margin: 0; padding: 0; list-style: none; transition: transform 0.8s var(--easing); }
#banner .current_p {margin: 0;height: 32px;display: flex;align-items: center;justify-content: center;color: var(--white);}
#banner .total_numb {display: flex;align-items: center;height: 32px;opacity: 0.4;color: var(--white);padding-right: 10px;}
#banner .total_numb::before { content: "/"; margin: 0 10px 0 5px; font-size: 16px; }
canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; animation: siteReveal 4s var(--easing) forwards; pointer-events: none; }
#banner .bannerslidetxt {position: absolute;bottom: 75px;left: 84px;padding: 30px 35px 50px;font-size: 14px;line-height: 20px;z-index: 11;width: 235px;text-align: justify;text-justify: inter-ideograph;letter-spacing: 0px;border-top: 1px solid rgba(255,255,255,0.3);-webkit-transform: translate(0%,0);transform: translate(0%,0);opacity: 0;animation: siteReveal 2s var(--easing) 1.5s forwards;}
#banner .bannerslidetxt * { color: var(--white); }
#banner .bannerslidetxt .bannerh3txt { font-size: 1.1rem; letter-spacing: 0.8px; }
#banner .bannerslidetxt .bannerENtxt {padding-bottom: 30px;padding-top: 5px;margin-bottom: 30px;font-size: 14px;font-weight: 400;letter-spacing: 1px;position: relative;font-family: "Poppins", serif;}
#banner .bannerslidetxt .bannerENtxt::after { content: ""; width: 30px; height: 1px; display: block; background: rgba(255,255,255,0.8); position: absolute; bottom: 5px; left: 2px; }
#banner .downtxt { position: absolute; left: 84px; bottom: 0; padding: 30px 35px; width: 235px; z-index: 11; opacity: 0; animation: siteReveal 2s var(--easing) 1.5s forwards; }
#banner #scrolldown { position: relative; display: inline-flex; align-items: center; gap: 30px; font-size: 14px; letter-spacing: 0.15em; color: #fff; text-decoration: none; opacity: 0.85; font-family: "Poppins", serif; }

/*線條*/
#banner #scrolldown::after { content: ""; width: 60px; height: 1px; background: linear-gradient(to right,rgba(255,255,255,0.2),rgba(255,255,255,1)); }

/*圓圈（重點）*/
#banner #scrolldown::before { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: scrollDot 1.6s ease-in-out infinite; }

/*圓圈呼吸動畫*/
@keyframes scrollDot {
	0% { transform: translateY(-50%) scale(1); opacity: 0.5; }
	50% { transform: translateY(-50%) scale(1.8); opacity: 1; }
	100% { transform: translateY(-50%) scale(1); opacity: 0.5; }
}

@media (max-width:1280px){
	#banner .bannerslidetxt,#banner .downtxt,#banner .second_line,#banner .third_line,#banner .fourth_line,#banner .fifth_line,#banner .sixth_line,#banner .first_line,#banner .seventh_line { display: none; }
	#banner .item .img { top: -60px; width: 120%; height: 120%; }
	#banner .item .img video { width: auto; height: 100%; }
}

@media (max-width:768px) {
	#banner .numb { display: none; }
	#banner .item .info .banneritemh3 { font-size: 1.3rem; }
	#banner .item .info p { font-size: 7vw; }
	#banner #circlee { height: 80vh; }
	#banner .home_container { height: 80vh; }
	#banner .item .info { top: 41%; }
	#banner .item .info article { font-size: 16px; letter-spacing: 5px; }
}