/* banner */
#banner {width: 100%;z-index: 3;}
#banner .item { height: 100vh; }
#banner .main-slider { }
#banner .item .clip >* {min-width: 100%;width: 100%;}
#banner .item .clip .bgBox {}
#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: 0;left: 0;}
#banner .item .info{left: 12%;bottom: 21.5%;width: min(90%, 600px);}
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {color: #444143;font-size: 22px;}
#banner .item .info >div .txt .h3tit {margin-bottom: 30px;line-height: 150%;font-size: 55px;font-family: 'Noto Serif TC';word-spacing: 100vw;color: #2a2929;letter-spacing: 1px;}

#banner .item.slick-current .clip .bgBox {}

@-webkit-keyframes scale_banner { to { -webkit-transform: scale(1); } }
@keyframes scale_banner { to { transform: scale(1); } }

@media screen and (max-width: 1680px){
    #banner .item { height: 90vh; }
}
@media screen and (max-width: 1440px){
    #banner .item .info{bottom: 12.5%;left: 9%;}
    #banner .item .info >div .txt .h3tit{font-size:45px;}
    #banner .item .info >div .txt >*{font-size:20px}
}
@media screen and (max-width: 1280px){
	#banner { padding-top: 70px; }
}
@media screen and (max-width: 1024px){
	#banner .item { height: 75vh; }
    #banner .item .info >div .txt .h3tit{font-size:35px;}
    #banner .item .info >div .txt >*{font-size:18px}
}
@media screen and (max-width: 980px){
    #banner .item .clip video{width: 140%;left: -6%;}
}
@media screen and (max-width: 640px){
    #banner .item .info{bottom: 7.5%;}
    #banner .item .clip video{width: 200%;left: -56%;top: -30px;}
}