#banner { width: 100%; z-index: 2; position: relative; overflow: hidden }
#banner .img { overflow: hidden; display: inline-block; width: 100%; }
#banner img { position: relative; width: 100%; height: 100vh; min-width: 100%; }
#banner .img video,#banner iframe { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#banner iframe { height: 140%; }
#banner .pos_abs { width: 100%; height: 100%; top: 0; left: 0; z-index: 10; }
#banner .info { min-width: 100%; height: 100%; display: flex; align-items: center; z-index: 20; }
#banner .info .txt * { color: var(--white); -webkit-transform: translateY(15px); transform: translateY(25px); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
#banner .info .txt { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; padding: 0; z-index: 2; width: 72%; height: 50%; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; align-items: flex-start; }
#banner .info .txt h2 { font-size: 1.6rem; font-weight: 500; position: relative; letter-spacing: 2px; }
#banner .info .txt h3 { display: contents; font-size: 60px; }
#banner .info .txt h3,#banner .info .txt p { color: var(--white); opacity: 0; -webkit-transform: translateY(15px); transform: translateY(25px) }
#banner .info .txt h2:before { content: ""; width: 150px; height: 1px; background: #ffffff; display: block; position: absolute; top: -30px; left: 0 }
#banner .info .txt p { font-weight: 400; font-size: 20px; margin-top: 20px; margin-bottom: 80px; letter-spacing: 1px; line-height: 170%; }
#banner .info .txt .Imglogo { width: 800px; height: auto }
#banner .info .txt .Imglogo img { height: auto }
#banner .slick-current .info .txt p { transition-delay: .6s; -webkit-transition-delay: .6s; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; animation: fadeIn 1s both; -webkit-animation: fadeIn 1s both }
#banner .slick-current .info .txt * { -webkit-transform: translateY(20px); transform: translateY(20px); transition-delay: .3s; -webkit-transition-delay: .3s; -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) }
#banner .more_btn { margin-top: 40px }
#banner .more_btn a:before { background: #ffffff00; border: 1px solid #fff; height: 95%; width: 99% }
#banner .more_btn { display: none; }
/* arrow_bg */
#banner .arrow_bg { width: 450px; height: 140px; left: auto; bottom: -140px; transform-origin: 100% 100% 0; display: none }
#banner .arrow { width: 50px; display: flex; justify-content: space-between; padding: 0 30px; position: absolute; z-index: 10; flex-direction: column; left: 0%; top: 65%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: none; }
#banner .arrow a { width: 45px; height: 45px; line-height: 55px; border: 1px solid #fff; border-radius: 50%; display: flex; opacity: .65; flex-direction: column; justify-content: center; align-items: center; margin: 5px }
#banner .arrow a.prev { -webkit-transform: rotate(180deg) }
#banner .arrow a svg { fill: #ffffff; width: 13px }
#banner .arrow a:hover { opacity: 1; background-color: var(--primary); border: 1px solid var(--primary) }
#banner .arrow a i { color: #fff }
/* 初始狀態：文字隱形且從上方開始 */
.falling-text { opacity: 0; transform: translateY(-50px); animation: fall 1s ease-out forwards; font-size: 1.4rem; letter-spacing: 2px }
/* 動畫效果：文字從上方掉落並顯示 */
@keyframes fall {
  0% { opacity: 0; transform: translateY(-50px) }
  100% { opacity: 1; transform: translateY(0) }
}
/* 讓每個字按順序顯示 */
.falling-text-container { display: inline-block; padding-bottom: 20px }
/* scrollBtn */
@keyframes web_menu002 {
  0% { transform: translate(0px,0px) }
  50% { transform: translate(0px,15px) }
  100% { transform: translate(0px,0px) }
}
.page-scroll { bottom: 25%; margin-left: 0; z-index: 888; text-align: center; position: absolute; left: -140px; transform: translate(-50%,25%); -webkit-transition: all 1.2s 0.8s ease-in-out; transition: all 1.2s 0.8s ease-in-out; opacity: 0; }
.page-scroll a { color: #fff; letter-spacing: .1em; text-decoration: none; -webkit-transition: opacity .3s; transition: opacity .3s; text-transform: uppercase; display: flex; flex-direction: row-reverse; justify-content: space-around; align-items: baseline; gap: 60px; }
.page-scroll.style01 a b { color: var(--white); font-weight: 400; font-size: .8rem; letter-spacing: 2.5px; writing-mode: vertical-rl; }
.page-scroll.style01 a span::after { content: ""; position: absolute; top: -10px; right: 0; z-index: 1; width: 1px; height: 100px; background: #ffffff; background-size: cover; background-repeat: no-repeat; animation: scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite; -webkit-animation: scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite }
.page-scroll.show { left: 140px; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; }
@keyframes scrollarrow1 {
  0% { transform: translateY(-300%) }
  50% { transform: translateY(0%) }
  to { transform: translateY(900%) }
}
@-webkit-keyframes scrollarrow1 {
  0% { -webkit-transform: translateY(-300%) }
  50% { -webkit-transform: translateY(0%) }
  to { -webkit-transform: translateY(900%) }
}
.page-scroll.style01 a span { position: relative; right: 0; background: rgb(255 255 255/70%); background-size: cover; background-repeat: no-repeat; width: 1px; height: 75vh; top: 0; left: 50%; transform: translate(-50%,0%); overflow: hidden }
#banner.scroll .page-scroll { opacity: 0; pointer-events: none; left: -140px; }
#banner .item:before { content: ''; position: absolute; height: 370px; width: 100%; bottom: 0; left: 0; background: url(/images/39/img_banner.png) no-repeat 50% 0; background-size: cover; z-index: 12; }
#banner .item:after { position: absolute; width: 100%; height: 100vh; background: linear-gradient(to top,rgb(0 0 0/0%) 50%,#000 100%); top: 0; left: 0; z-index: 11; content: ""; opacity: .7 }
#headBan { position: relative; overflow: hidden }
.c-circleSvg { position: absolute; right: calc(-1600px/2 + 60px); bottom: calc(-1500px/2); width: 850px; height: 850px; z-index: 10; animation: circleAnime_1 20s linear 0s infinite }
@keyframes circleAnime_1 {
  0% { transform: translate(-50%,-50%) rotate(0deg) }
  100% { transform: translate(-50%,-50%) rotate(360deg) }
}
.c-circleSvg svg { width: 100%; height: 100% }
.c-circleSvg svg path { fill: none; stroke: #eee; stroke-miterlimit: 10; stroke-width: 1 }



@media screen and (max-width:1640px) {
  .page-scroll { left: 40px; }
  #banner:before { left: 5vw; }
  #banner .info .txt { width: 65%; }
}
@media screen and (max-width:1470px) {
  .page-scroll.style01 a span { left: 40px; }
  #banner:before { left: 5.5vw; }
}
@media screen and (max-width:1280px) {
  #banner img { height: 70vh; }
  #scrollBtn,#banner:before { display: none }
  #banner .info .txt { display: flex; justify-content: center; width: 90%; }
  #banner .info .txt h3 { display: flex; flex-direction: column; align-items: flex-start; }
  #banner .item video { width: auto; height: 100%; }
  #banner .info .txt .Imglogo { width: 60vw }
}
@media screen and (max-width:960px) {
  #banner .info .txt h3 { font-size: 30px }
  #scrollBtn,.c-circleSvg,#banner .info .txt h2:before,#banner .slick-current .info .txt p { display: none }
  #banner .slick-current .info .txt p { margin-bottom: 60px }
  #banner .info .txt .Imglogo { width: 80vw }
  #banner .item:before { height: 250px }
  #banner .info .txt h2 { margin-top: 30px }
  .falling-text-container { width: min(80%,280px); padding-bottom: 30px }
  #banner iframe { width: 140%; height: 100%; }
  #banner img,#banner iframe { height: 56vh; }
}
@media screen and (max-width:560px) {
  #banner .info .txt h3:before { bottom: -31px; width: 1px; height: 25px }
  #banner .item video { left: -50%; }
  #banner iframe { width: 250%; }
}