/* banner */
#banner {z-index: 3;}
#banner .item {height: 100vh;}
#banner .item .clip{width: 76vw;right: 0;left: unset;}
#banner .item:before{content:url(/images/44/lotus2.png);position: absolute;bottom: -150px;left: 260px;-webkit-animation-name: circle;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration: 20s;}
#banner .slick-list { overflow:unset}
#banner .item .clip >* {min-width: 100vw;width: 100vw;}
#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  {display: flex;align-items: flex-end;width: 24vw;justify-content: center;}
#banner .item .info:after{content:url(/images/44/bannerBg.png);position: absolute;right: -190px;-webkit-animation-name: mon;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration: 5s;}
#banner .item .info >div:before{content:url(/images/44/lotus.png);position: absolute;top: -105px;right: -25px;}
#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;text-align: end;overflow: unset;}
#banner .item .info >div .txt:nth-child(2) {-webkit-transition-delay: .4s;transition-delay: .4s;margin-right: 150px;display: flex;flex-direction: column;align-items: flex-end;margin-bottom: 90px;margin-top: -20px;}
#banner .item .info >div .txt >* {font-size: 18px;}
#banner .item .info >div .txt h3 {line-height: 120%;font-size: 35px;}
#banner .item .info >div .txt p{writing-mode: vertical-lr;color: var(--secondary);font-family: 'Noto Serif TC';font-size: 20px;margin-bottom: 40px;}
#banner .item .info >div .txt b{font-family: "Lato", serif;font-size: 14px;color: var(--secondary);text-align: end;}
#banner .item .info >div .txt b:after{content:url(/images/44/clouds.png);position: absolute;left: -130px;bottom: -10px;z-index: -1;}

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

@keyframes circle{0%{transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);}}
@keyframes mon{0%{right:-150px}50%{right:-190px}100%{right:-150px}}

@media screen and (max-width: 1440px){
	#banner .item .info >div .txt:nth-child(2){margin-bottom:20px;}
	#banner .item:before{left:150px;}
}
@media screen and (max-width: 1400px){
	#banner .item .info >div .txt h3 img{width:80%;}
	#banner .item .info >div:before{zoom:80%;}
	#banner .item .info >div .txt:nth-child(2){margin-top: -70px;}
}
@media screen and (max-width: 1280px){
	#banner .item .info >div .txt h3 img{width:70%;}
	#banner .item .info >div:before{zoom:60%;right: 25px;}
	#banner {padding-top: 87px;}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 65vh; }
}
@media screen and (max-width: 768px){
	#banner .item:before{display:none;}
	#banner .item .info:after{z-index:-1;zoom: 80%;}
	#banner .item{height:auto;display: flex;flex-direction: column;align-items: center;}
	#banner .item .clip video{width:auto;height:100%}
	#banner .item .clip{width:100vw;position: relative;aspect-ratio: 5/3;}
	#banner .item .info{position:relative;padding-top: 110px;}
}
@media screen and (max-width: 640px){
	#banner .item .info >div .txt b:after{zoom:70%}
	#banner .item .info:after{zoom: 65%;}
	#banner .item .info >div .txt p{font-size:18px;}
	#banner {padding-top: 65px;}
	#banner .item .info{width: 55vw;}
}