:root { --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) .8s forwards;
}

#banner #arc1 {
    stroke-dasharray:100 100;
    stroke-dashoffset:100;
    stroke-linecap:round;
    will-change:stroke-dashoffset;
    transform:rotate(-90deg);
    transform-origin:960px 540px;
    transform-box:view-box;
}



/* Banner 進度圈：0 → 360°，跑滿後由 JS 切換 Banner */
@keyframes bannerCircleProgress {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

#banner #arc1.circle-running {
    animation: bannerCircleProgress var(--circle-duration, 8000ms) linear forwards;
}
#banner #arc2 {
    stroke-dasharray:none;
}

/*輪播核心*/
#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 / 80%));top: 0;left: 0;z-index: 2;opacity: .9;}
#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;position:relative;z-index:30;pointer-events:auto;}
#banner .item .info .more_btn a {display:flex;align-items:center;gap:20px;border-bottom:1px solid rgba(255,255,255,1);padding-bottom:5px;position:relative;z-index:31;pointer-events:auto;cursor:pointer;}
#banner .item .info .more_btn a:hover{gap:30px;}
#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:#fff;position:absolute;right:-25px;bottom:0;opacity:.8;pointer-events:none;}
#banner .item .info .more_btn a font {letter-spacing:1px;font-size:13px;pointer-events:none;}
#banner .item .info .more_btn a svg {width:18px;height:18px;fill:var(--white);pointer-events:none;}

/* 數字編號 */
#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);font-family: "Poppins", serif;}
#banner .total_numb {display: flex;align-items: center;height: 32px;opacity: 0.4;color: var(--white);padding-right: 10px;font-family: "Poppins", serif;}
#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;white-space: unset;}

/*線條*/
#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; }
}