#banner{padding: 87px 0 0;position:relative;opacity: 0;transition: opacity 0.4s ease 0.4s;}
body.is-ready #banner { opacity: 1; }
#banner:after{content:'';position:absolute;width: 186px;height: 86%;background: var(--primary);right:0;top:0;z-index:0}
#banner:before{content:'';position:absolute;width:12%;height:25%;background: var(--primary);left:0;bottom:-60px;z-index: 1;-webkit-transform: skewX(-40deg);transform: skewX(-40deg);}
#banner_box,#banner_box .item,#banner_box .img_box{position:relative;z-index:2}
#banner_box .img_box{width:100%;max-width: 93.5%;}
#banner_box .img_box::before {position: absolute;top: 0;left: 0;z-index: 15;content: "";width: 100%;height: 240px;display: block;background: linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.4));pointer-events: none;}
#banner_box .img_box::after {position: absolute;bottom: 0;left: 0;z-index: 0;content: "";width: 100%;height: 200px;display: block;background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));pointer-events: none;}
#banner_box .img_box iframe , #banner_box .img_box video {position: absolute;width: 100%;height: 120%;top: -12%;left: 0;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
#banner_box .slick-dotted .slick-track { min-width: 100vw; }
#banner_box .info_box , #banner_box .atag_item { position: absolute; }
#banner_box .info_box {width: 100%;height: 100%;display: flex;align-items: center;top: 0;left: 0;z-index: 10;}
#banner_box .info_box * { color: #fff; }
#banner_box .info_box .diagonal-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg,rgb(0 0 0/39%) 0%,rgb(23 37 84/0%) 100%); clip-path: polygon(0 0,40% 0,15% 100%,0 100%); z-index: 0; }
#banner_box .info_box .text-mask {width: min(90%,70%);z-index: 2;margin: auto;}
#banner_box .info_box .category-label { font-size: 1.1rem; font-weight: 500; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
#banner_box .info_box .main-title {font-family: 'Oswald',sans-serif;font-size: clamp(3rem,8vw,3.5rem);font-weight: 700;line-height: 1.1;margin-bottom: 15px;letter-spacing: -1px;display: block;text-transform: uppercase;}
#banner_box .info_box .title_big { font-size: 2.4rem; font-weight: 700; margin-bottom: 25px; display: flex; align-items: center; }
#banner_box .info_box p { font-size: 1.2rem; height: 100%; max-width: 450px; }

#banner .item .info_box .text-mask { line-height: 1.2; font-weight: 300; opacity: 0; transform: translateY(110%) rotate(2deg); transform-origin: left bottom; transition: all var(--text-speed) var(--ease-elegant); color: var(--secondary); }
#banner .item.slick-current .info_box .text-mask { opacity: 1; transform: translateY(0) rotate(0); transition-delay: 1.2s; }
#banner .item.slick-current .info_box .text-mask { opacity: 0; transform: translateY(110%) rotate(2deg); transition: all 1s var(--ease-elegant) 0.5s; }
body.is-ready #banner .item.slick-current .info_box .text-mask { opacity: 1; transform: translateY(0) rotate(0); }

/* --- 按鈕樣式 --- */
#banner_box .btn-more {display: inline-flex;align-items: center;background-color: #ffffff;color: var(--fourth);padding: 15px 35px;border-radius: 50px;text-decoration: none;font-weight: 700;transition: all 0.3s ease;margin-top: 40px;font-size: 14px;}
#banner_box .btn-more:hover { background-color: var(--primary); color: #ffffff; transform: translateX(5px); }
#banner_box .btn-more svg { width: 20px; height: 20px; margin-left: 15px; transition: transform 0.3s ease; }
#banner_box .btn-more svg * { color: var(--fourth); }
#banner_box .btn-more:hover svg * { color: #ffffff; }
#banner #scrollDown{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction: column-reverse;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;bottom: 23%;right: 2.5vw;z-index: 5;gap: 20px;}
#banner .upDown{width:100%;height: 100%;bottom: 0;left: 0;z-index: 2;position: absolute;}
#banner #scrollDown span.text{display:block;color: #ffffff;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;letter-spacing: 1px;font-size: 12px;font-family: "Oswald", sans-serif;text-transform: uppercase;}
#banner #scrollDown span.scrollBtn{width:25px;height: 100px;border-radius:12.5px;position:relative;overflow:hidden;}
#banner #scrollDown:hover span.scrollBtn:after{top: 85%;width: 4px;height: 4px;}
#banner #scrollDown span.scrollBtn:after{content:"";width: 2px;height: 100%;background-color: #fff;position:absolute;top:20%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
#banner #scrollDown span.scrollArrow{width:10px;height:10px;border-right: 2px solid #414141;border-bottom: 2px solid #414141;-webkit-transform:rotate(45deg);transform:rotate(45deg);display: none;}


@media screen and (max-width: 1780px){
    #banner_box .img_box{max-width:90.5%}
	#banner #scrollDown{bottom:20%}
}
@media screen and (max-width: 1440px){
    #banner #scrollDown{bottom:18%;right:54px}
	#banner #scrollDown span.scrollBtn{height:50px}
}
@media screen and (max-width:1280px) {
  #banner #scrollDown { display: none }
  #banner_box .img_box { max-width: 100%; }
  #banner { padding: 80px 0 0; }
}
@media screen and (max-width:1140px) {
  #banner { padding: 60px 0 0; }
  #banner_box .info_box .title_big { font-size: 1.8rem; }
  #banner_box .info_box .main-title { font-size: 2.4rem; margin-bottom: 5px; }
  #banner_box .info_box .category-label { display: none; }
}
@media screen and (max-width:980px) {
  #banner:before { display: none }
  #banner_box .info_box .main-title { font-size: 2rem; }
  #banner_box .info_box .title_big { font-size: 1.4rem; margin-bottom: 15px; }
  #banner_box .info_box p { font-size: 1rem; }
}
@media screen and (max-width:980px) {
  #banner { padding: 50px 0 0; }
  #banner_box .img_box img { height: 60vh; }
  #banner_box .img_box iframe,#banner_box .img_box video { width: auto; }
  #banner_box .info_box .diagonal-mask { background: linear-gradient(135deg,rgb(0 0 0/80%) 0%,rgb(23 37 84/0%) 100%); clip-path: polygon(0 0,60% 0,30% 100%,0 100%); }
  #banner_box .info_box .text-mask{width: 90%;}
}