/* banner */
#banner {width: 100%;z-index: 3;position: relative;overflow: hidden;}
#banner:after{content:url(/images/44/banner-numbg.png);position: absolute;bottom: -25px;left: -10px;opacity: .9;}
#banner .item { height: 97vh; }
#banner .main-slider { }
#banner .item .clip:before{content:'';position: absolute;width: 100%;height: 100%;background-image: url(/images/44/banner-bg.png);background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;z-index: 1;}
#banner .item .clip .bgBox {width: 65%;margin: 0 0 0 auto;}
#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{z-index:2}
#banner .item .info >div {margin: auto;width: calc(85% - 60px);}
#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;width: 40%;}
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {padding: 10px 0;font-size: 22px;letter-spacing: 4px;}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 140%;font-size: 55px;font-family: 'Noto Serif TC';letter-spacing: 4px;font-weight: 600;color: #263837;}
#banner .item .info >div .txt a{letter-spacing:0;padding: 16px 35px;font-size: 16px;margin-top: 50px;}
#banner .banner_num_dots {position: absolute;left: 0;bottom: 0;z-index: 10;width: 520px;height: 120px;display: flex;align-items: center;justify-content: center;pointer-events: auto;}
#banner .banner_num_dots .slick-dots { position: static; display: flex !important; align-items: center; justify-content: center; gap: 55px; margin: 0; padding: 0; list-style: none; }
#banner .banner_num_dots .slick-dots li { position: relative; width: auto; height: auto; margin: 0; padding: 0; }
#banner .banner_num_dots .slick-dots li button {width: auto;height: auto;padding: 0;border: 0;background: transparent;color: rgba(255,255,255,0.35);font-size: 22px;font-weight: 600;letter-spacing: 2px;line-height: 1;cursor: pointer;transition: color 0.3s ease;font-family: "Arimo", sans-serif;}
#banner .banner_num_dots .slick-dots li button:before { display: none; }
#banner .banner_num_dots .slick-dots li.slick-active button { color: #fff; }
#banner .banner_num_dots .slick-dots li.slick-active::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 7px; height: 7px; background: #fff; border-radius: 50%; transform: translateX(-50%); }
#banner .item.slick-current .info >div .txt { transform: scaleX(1); -webkit-transform: scaleX(1); }

@media screen and (max-width: 1440px){
	#banner .item .info >div .txt{width:50%}
    #banner .item .info >div .txt .h3{font-size:50px}
}
@media screen and (max-width: 1400px){
    #banner:after{zoom: 70%;}
    #banner .banner_num_dots{height: 96px;}
}
@media screen and (max-width: 1280px){
    #banner .item .info >div .txt .h3{font-size:40px}
    #banner .item .info >div .txt >*{font-size:18px;}
}
@media screen and (max-width: 1024px) {
    #banner .item { height: 90vh; }
    #banner .item .info >div{width: 90%;}
    #banner .banner_num_dots{width: 40%;}
}
@media screen and (max-width: 768px) {
    #banner .item .clip .bgBox{width: 100%;}
    #banner .item .info >div .txt .h3{font-size:30px}
	#banner .item .info >div .txt{width:70%}
    #banner .item { height: 70vh; }
	#banner .banner_num_dots .slick-dots { gap: 30px; }
	#banner .banner_num_dots .slick-dots li button { font-size: 16px; letter-spacing: 2px; }
	#banner .banner_num_dots .slick-dots li.slick-active::after { bottom: -16px; width: 5px; height: 5px; }
}
@media screen and (max-width: 640px) {
    #banner .item .clip .bgBox{background-position: 80% 50%;}
    #banner .item .clip:before{width: 100%;height: 100%;background: linear-gradient(to top, rgb(247 246 245) 15%, rgb(247 246 245 / 0%) 65%);}
    #banner .banner_num_dots .slick-dots li button{font-size:13px}
    #banner .banner_num_dots{height: 70px;}
    #banner .item .info >div{margin-bottom: 25%;}
    #banner:after{zoom: 50%;left: -60%;}
    #banner .item .info >div .txt .h3{font-size:23px}
    #banner .item .info >div .txt >*{font-size:15px;}
    #banner .item .info >div .txt{width:85%}
    #banner .item .info >div .txt:last-child{display:none;}
}