#home { position: relative; min-height: 100vh; padding-top: 5rem; display: flex; flex-direction: column; border-bottom: 1px solid #000; background-color: #f3f3f3; overflow: hidden; }
#home .grid-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12,1fr); pointer-events: none; z-index: 0; padding: 0 1.5rem; max-width: 1920px; margin: 0 auto; }
#home .grid-col { border-right: 1px solid rgba(0,0,0,0.05); height: 100%; display: none; }
#home .main-content { flex: 1; display: grid; grid-template-columns: 1fr; z-index: 10; max-width: 1920px; margin: 0 auto; width: 100%; }
#home .side-text-col { display: none; border-right: 1px solid #000; align-items: flex-end; justify-content: center; padding-bottom: 3rem; }
#home .side-text { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: monospace; font-size: 0.75rem; letter-spacing: 0.2em; opacity: 0.4; }
/* === 拖曳與輪播動畫增強 === */
#home .banner-slider-wrap { grid-column: span 1; display: block; width: 100%; overflow: hidden; position: relative; cursor: grab; }
#home .banner-slider-wrap:active { cursor: grabbing; }
#home .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: visibility 0s 1s,opacity 1s cubic-bezier(0.4,0,0.2,1); z-index: 1; pointer-events: none; display: flex; flex-direction: column; visibility: hidden; }
#home .item.slick-active { position: relative; opacity: 1; z-index: 2; pointer-events: auto; visibility: visible; transition: opacity 1s cubic-bezier(0.4,0,0.2,1); }
#home .slide-full-link { position: absolute; inset: 0; z-index: 60; opacity: 0; }
#home .text-content-col { display: flex; flex-direction: column; justify-content: center; padding: 3rem 1.5rem; position: relative; overflow: hidden; z-index: 20; background-color: #f3f3f3; flex: 1; pointer-events: none; }
/* 增強文字進場動畫 */
#home .hero-text-container { position: relative; z-index: 20; opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.4,0,0.2,1) 0.2s; pointer-events: auto; }
#home .item.slick-active .hero-text-container { opacity: 1; transform: translateY(0); }

/* 標題整體加入字距收縮與模糊解碼濾鏡 */
#home .hero-title { font-size: 12vw; line-height: 0.95; font-weight: 900; letter-spacing: 0.1em; color: #000; opacity: 0; filter: blur(12px); transform: rotateX(20deg) translateY(20px); transition: all 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s; }
#home .item.slick-active .hero-title {letter-spacing: 0.05em;opacity: 1;filter: blur(0);transform: rotateX(0) translateY(0);}
/* 紫色小點的彈跳進場 */
#home .hero-title .text-ibp { display: inline-block; opacity: 0; transform: scale(0) translate(20px,0px); transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1) 1s; }
#home .item.slick-active .hero-title .text-ibp { opacity: 1; transform: scale(1) translate(20px,0px); }
/* 鏤空字：運用 clip-path 做出由左至右「擦拭描繪」的高級效果 */
#home .title-stroke { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 2px #7f1084; padding-right: 0.1em; clip-path: polygon(0 -10%,0 -10%,0 110%,0 110%); transition: clip-path 1.5s cubic-bezier(0.16,1,0.3,1) 0.8s; }
#home .item.slick-active .title-stroke { clip-path: polygon(0 -10%,105% -10%,105% 110%,0 110%); }
/* 半截底色：跟隨在鏤空字後方延展 */
#home .title-stroke-line { position: absolute; bottom: 0.1em; left: 0; width: 100%; height: 0.45em; background-color: rgba(127,16,132,0.4); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(0.16,1,0.3,1) 1.4s; }
#home .item.slick-active .title-stroke-line { transform: scaleX(1); }

        
#home .hero-title-wrap { position: relative; margin-bottom: 2rem; min-height: 40vh; display: flex; align-items: center; }
#home .hero-title {font-size: 12vw;line-height: 0.1;font-weight: 900;letter-spacing: 0.05em;color: #000;transition: all 0.5s ease;}
#home .title-stroke {position: relative;display: inline-block;color: transparent;-webkit-text-stroke: 2px #7f1084;padding-right: 0.1em;}
#home .hero-title, #home .hero-title span{
    font-size: 17vw;
}
#home .title-stroke-line {position: absolute;bottom: 4.1em;left: 0;width: 100%;height: 1.35em;background-color: rgba(127,16,132,0.4);z-index: -1;}
#home .hero-divider { width: 100%; height: 1px; background-color: #000; margin-bottom: 2rem; }
#home .hero-desc-wrap { position: relative; }
#home .hero-desc-container { width: 100%; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; transition: opacity 0.3s; }
#home .hero-desc {color: #4b5563;font-weight: 500;line-height: 1.6;max-width: 28rem;font-size: 1.3rem;}
#home .hero-cta { display: flex; align-items: center; gap: 1rem; color: #000; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.3s; position: relative; z-index: 70; }
#home .hero-cta-icon { width: 2.5rem; height: 2.5rem; border: 1px solid #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
#home .hero-cta:hover { color: #7f1084; }
#home .hero-cta:hover .hero-cta-icon { background-color: #7f1084; border-color: #7f1084; color: #fff; transform: translateX(5px); }
#home .carousel-col { position: relative; overflow: hidden; background-color: #000; min-height: 400px; flex: 1; pointer-events: none; }
#home .carousel-overlay { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(127,16,132,0.4),rgba(0,0,0,0.8)); mix-blend-mode: overlay; z-index: 10; pointer-events: none; }
#home .videoshow_box { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #000; z-index: 10; }
#home .hero-images { position: absolute; inset: -10% 0 0 0; width: 100%; height: 120%; }
#home .dwn_img,#home .dwn_man { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; }
#home .dwn_man { z-index: 6; }
/* 增強圖片縮放與旋轉進場動畫 */
#home .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.2) rotate(2deg); filter: grayscale(100%) contrast(120%) brightness(60%) blur(8px); transition: opacity 1s ease-in-out,transform 1.5s cubic-bezier(0.4,0,0.2,1),filter 1s ease-out; pointer-events: none; user-select: none; -webkit-user-drag: none; }
#home .item.slick-active .hero-slide { opacity: 1; transform: scale(1) rotate(0deg); filter: grayscale(0%) contrast(100%) brightness(100%) blur(0px); transition: opacity 1s ease-in-out,transform 8s ease-out,filter 1.5s ease-out; }
#home .carousel-bottom-ui { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem; z-index: 20; background: linear-gradient(to top,#000,rgba(0,0,0,0.5),transparent); pointer-events: none; }
#home .hero-tag { color: #fff; font-family: monospace; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; }
#home .hero-overlay-title { color: #fff; font-size: 1.875rem; font-weight: 700; line-height: 1; }


/* === 新增：輪播點點 (Dots) 樣式設計 === */
#home .slide-dots { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
#home .slide-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #7f1084; cursor: pointer; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); background-color: transparent; pointer-events: auto; }
#home .slide-dot.active { background-color: #7f1084; transform: scale(1.1); }


#banner:before{content:"";position:absolute;background:url(/images/36/banner_logo.png);width: 15vw;aspect-ratio: 1/1;background-size: cover;left: 42vw;top: 2vw;z-index: 3;animation: wraplogo 2s infinite alternate ease-in-out;}
#marquee-section { overflow: hidden; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 0.75rem 0; background-color: #fff; }
#marquee-section .animate-marquee { display: flex; white-space: nowrap; animation: marquee 30s linear infinite; }
#marquee-section .marquee-text { font-size: 2.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; padding: 0 1rem; color: #7f1084; opacity: 0.9; margin: 0 1rem; }
#marquee-section .marquee-stroke { font-size: 2.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; padding: 0 1rem; color: transparent; -webkit-text-stroke: 1px #7f1084; margin: 0 1rem; }

@keyframes wraplogo {
	0% { transform:scale(1); }
	100% {transform: scale(1.1);}
}

@media (min-width:1025px) {
  #home .grid-col { display: block; }
  #home .grid-bg { grid-template-columns: 1fr 1fr 5fr 4fr 1fr; }
  #home .main-content { grid-template-columns: 1fr 6fr 5fr; }
  #home .side-text-col { display: flex; }
  #home .banner-slider-wrap { grid-column: span 2; height: 100%; }
  #home .item { flex-direction: row; }
  #home .item .text-content-col { width: 54.54%; border-right: none; padding: 0 3rem; flex: none; }
  #home .item .carousel-col { width: 45.45%; border-left: 1px solid #000; min-height: auto; flex: none; }
  #home .hero-title-wrap { min-height: 20vw; }
  #home .hero-title,#home .hero-title span { font-size: 7vw; }
}
@media (min-width:768px) {
  #marquee-section .marquee-text,#marquee-section .marquee-stroke { font-size: 3.75rem; }
}
@media (max-width:1024px) {
  #home .hero-images { transform: unset!important; }
  #home .text-content-col { padding: 100px 25px 100px; }
  #home .title-stroke-line { bottom: 7vw; }
  #banner:before { left: auto; right: -2vw; top: 6vw; width: 30vw; }
}
@media (max-width:640px) {
  #home .hero-title-wrap { min-height: 20vh; }
  #home .text-content-col { padding: 60px 25px 60px; }
}