/* banner */
#banner { width: 100%; z-index: 3; }
#banner .item .clip:before{content:'';width: 22%;height: 100%;background: var(--primary);position: absolute;left: 0;top: 0;z-index: 1;}
#banner .item .clip:after{content:'';position: absolute;bottom: 0;left: 0;background: white;height: 15%;width: 50%;z-index: 2;}
#banner .item { height: 98vh; }
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip { }
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip .slide-video {overflow: hidden;position: absolute;width: 420px;height: 559px;bottom: 15%;left: 15%;min-width: auto;z-index: 2;}
#banner .item .clip .slide-video img{width:100%}
#banner .item .info >div {margin: auto 5% 12% auto;width: calc(57% - 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; }
#banner .item .info >div .txt:nth-child(2) { -webkit-transition-delay: .4s; transition-delay: .4s; }
#banner .item .info >div .txt >* {max-width: calc(100% - 30px);font-size: 20px;letter-spacing: 3px;font-weight: 300;}
#banner .item .info >div .txt .en {margin-bottom: 40px;line-height: 140%;font-size: 60px;font-family: "Noto Serif Display", serif;letter-spacing: 0;font-weight: 400;}
#banner .item .info >div .txt .h3 {margin-bottom: 30px;line-height: 120%;font-size: 40px;font-family: "Noto Serif TC", serif;letter-spacing: 4px;font-weight: 500;}
#banner .more_btn{bottom: 65px;left: calc(38% - 20px);z-index: 4;}

/* scrolldown */
#scrolldown {position: absolute;font-weight: 500;font-size: 13px;color: white;white-space: nowrap;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;bottom: 30%;right: 3%;display: flex;flex-direction: row;align-items: center;gap: 20px;z-index: 5;letter-spacing: 2px;}
#scrolldown span{width:1px;height: 120px;background: rgb(232 232 232 / 15%);position: relative;overflow: hidden;}
#scrolldown span:after{content:'';width: 1px;height: 50px;background: var(--secondary);position: absolute;top: 0;animation: scrollLine 2s linear infinite;}
#scrolldown b{display: flex;align-items: center;justify-content: center;}
#scrolldown svg{width:20px;height: 20px;fill: white;}
@keyframes scrollLine{0%{top:-50px;}100%{top:100px;}}

#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); }

@media screen and (max-width: 1680px){
	#banner .more_btn {left: calc(36% - 15px);}
}
@media screen and (max-width: 1440px){
	#banner .more_btn {left: calc(33% - 5px);bottom: 43px;}
    #banner .item .clip .slide-video{width: 330px;bottom: 7%;}
}
@media screen and (max-width: 1400px){
    #banner .item .info >div .txt .h3{font-size: 34px;}
    #banner .item .info >div .txt .en{font-size: 45px;margin-bottom: 20px;}
	#banner .more_btn {left: calc(32% - 4px);bottom: 24px;}
    #banner .item .clip .slide-video{width: 270px;height: 459px;}
}
@media screen and (max-width: 1280px){
	#banner .more_btn {left: calc(31% - 7px);bottom: 29px;}
}
@media screen and (max-width: 1024px){
    #banner .more_btn{display:none;}
	#banner .item { height: 90vh; }
}
@media screen and (max-width: 980px){
    #scrolldown{display:none;}
    #banner .item .clip:after{z-index: 0;width: 100%;}
    #banner .item .info >div{margin-top: 20%;width: 85%;}
    #banner .item .clip .slide-video{width: 45%;left: 10%;bottom: 4%;}
    #banner .item .clip:before{display:none}
}
@media screen and (max-width: 640px){
    #banner .item .info >div{margin-top: 25%;}
    #banner .item .info >div .txt >*{font-size: 14px;letter-spacing: 0;}
    #banner .item .info >div .txt .h3{font-size: 20px;margin-bottom: 15px;}
    #banner .item .info >div .txt .en{font-size: 27px;margin-bottom: 10px;}
    #banner .item .clip .slide-video{width: 60%;left: 10%;bottom: -30px;height: 329px;}
}