#banner{width:100vw;height:100%;z-index:3}
#banner .item .info:before{content:'';position:absolute;width:100%;height:100%;top:0;background:linear-gradient(0deg,rgb(0 0 0 / 0%),rgb(0 0 0 / 30%));z-index:0}
#banner .item{height:100vh}
#banner .main-slider{-webkit-clip-path:url(#clip_banner);clip-path:url(#clip_banner)}
#banner .item .clip >*{min-width:96vw;width:96vw}
#banner .item .clip .bgBox{transform:scale(1.3);-webkit-transform:scale(1.3)}
#banner .item .clip iframe{position:absolute;width:100%;height:100%;top:0;left:0}
#banner .item .clip video{overflow:hidden;position:absolute;width:100%;height:auto;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}
#banner .item .info{background:rgb(0 0 0 / 30%)}
#banner .item .info >div{margin:auto;width:65%}
#banner .item .info >div .txt{-webkit-transition-delay:.2s;transition-delay:.2s;transform:scaleX(0);-webkit-transform:scaleX(0);transform-origin:0 0;-webkit-transform-origin:0 0}
#banner .item .info >div .txt:nth-child(2){-webkit-transition-delay:.4s;transition-delay:.4s}
#banner .item .info >div .txt >*{padding:10px 15px;max-width:calc(100% - 30px);font-size:16px}
#banner .item .info >div .txt h3{margin:20px 0;line-height:120%;font-size:45px;letter-spacing:2px;font-weight:400}
#banner .item .info >div .txt article{letter-spacing:1px}
#banner .item .info >div .txt p{font-size:27px;letter-spacing:5px;word-spacing:100vw}
#banner .item.slick-current .clip .bgBox{-webkit-animation:scale_banner 6s linear infinite;animation:scale_banner 6s linear infinite}
#banner .item.slick-current .info >div .txt{transform:scaleX(1);-webkit-transform:scaleX(1)}
#banner .number{position:absolute;width:40%;bottom:10%;right:0;z-index:99}
#banner .number ul{display:grid;grid-template-columns:repeat(3,1fr)}
#banner .number ul li h3{display:flex;flex-direction:column;align-items:flex-start}
#banner .number ul li h3 .titleEn{font-size:25px;display:flex;align-items:baseline;flex-direction:row;gap:10px}
#banner .number ul li h3 .titleEn span{font-size:45px;line-height:100%}
#banner .number ul li h3 .titleEn b{letter-spacing:0.5px;font-size:100px;font-weight:600;line-height:100%;font-family:'Work Sans';background:linear-gradient(130deg,var(--primary),var(--secondary));background-clip:text;-webkit-background-clip:text;color:transparent}
#banner .number ul li h3 .titleTw{font-size:23px;font-weight:400;letter-spacing:1px}
#banner .number_bar{position:absolute;width:100%;height:100%;background-image:url(/images/44/banner_bot.png);background-position:bottom;background-repeat:no-repeat;bottom:0}
#scrolldown{position:absolute;bottom:17%;left:19%;animation:godown 1s infinite linear;-webkit-animation:godown 1s infinite linear}

@keyframes godown{0%,100%{padding:0 0 25px 10px}
50%{padding:10px 0 15px 10px}
}
@media screen and (max-width:1460px){
    #banner .number ul li h3 .titleEn b{font-size:70px}
    #banner .number ul li h3 .titleTw{font-size:18px}
    #banner .number ul li h3 .titleEn{gap:0}
}
@media screen and (max-width:1280px){
    #scrolldown{display:none}
    #banner .item .clip video{width:auto;height:100%}
}
@media screen and (max-width:1024px){
    #banner .item{height:70vh}
    #banner .number_bar{display:none}
    #banner .number{position:relative;width:80%;margin:50px auto 0}
    #banner .number ul{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
    #banner .item .info >div{width:90%;margin:auto auto 25% auto}
    #banner .item .info >div .txt article{padding-left:0}
    #banner .item .info >div .txt h3{font-size:30px;padding-left:0;margin:0}
    #banner .item .info >div .txt p{font-size:22px;padding-left:0}
}
@media screen and (max-width:500px){
    #banner .number ul{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
}