#banner {width: 100vw;z-index: 3;margin: 0 0 0 auto;}

#banner img { width: 100vw; min-height: 75vh; height: 75vh; }
#banner .pos_abs { width: 100vw; height: 75vh; top: 0; left: 0; }
#banner .info {height: 75vh;background: rgb(162 140 129 / 10%);display: flex;align-items: center;justify-content: flex-end;}
#banner .info .txt {margin: 0;width: 40vw;}
#banner .info .txt:after{content:url(/images/40/dot.png);margin-top: 55px;display: block;opacity: 0;}
#banner .info .txt * {font-weight: 400;color: var(--white);opacity: 0;-webkit-transform: translateX(-10px);transform: translateX(-10px);text-align: left;}
#banner .info .txt h3 {font-family: "Noto Serif TC", serif;letter-spacing: 4px;margin-bottom: 30px;font-size: max(4 * (1vw + 1vh) / 2, 30px);}
#banner .info .txt p {font-weight: 200;letter-spacing: 9px;font-size: max(2 * (1vw + 1vh) / 2, 16px);}
#banner a.pos_abs { z-index: 2; }
#banner video , #banner iframe {position: absolute;width: 100%;bottom: 0;left: 0;}
#banner .slick-dots{bottom: 33vh;right: 0;width: 40vw;display: flex;justify-content: flex-start;gap: 3px;}
#banner .slick-dots li{display: flex;margin: 0;}
#banner .slick-dots li button:before{font-size: 11px;color: white;opacity: 0.8;}
#banner .slick-dots li.slick-active button:before{color: var(--secondary);opacity: 1;font-size: 20px;
}
/* slick-current */
#banner .slick-current .info .txt * { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); transition-delay: .3s; -webkit-transition-delay: .3s; }
#banner .slick-current .info .txt p { transition-delay: .6s; -webkit-transition-delay: .6s; }

@media screen and (min-width: 761px){
	#banner img { min-height: 100vh; height: 100vh; }
	#banner .pos_abs { height: 100vh; }
	#banner .info {height: 100vh;}
}
@media screen and (max-width: 1280px){
	#banner{width:100vw}
}
@media screen and (max-width: 1024px){
	#banner video, #banner iframe{width:auto;height:100%;}
}
@media screen and (max-width: 768px){
	#banner .info .txt{width: 85%;margin-bottom: 10%;}
	#banner img { min-height: 80vh; height: 80vh; }
	#banner .pos_abs { height: 80vh; }
	#banner video, #banner iframe{left:-10%;}
}
@media screen and (max-width: 640px){
	#banner img {min-height: 60vh;height: 60vh;min-height: auto;height: auto;width: 100vh;margin-top: 7vh;height: 700px;}
	#banner .pos_abs {height: 100%;align-items: flex-end;}
	#banner video, #banner iframe{left:-50%;}
	#banner .info .txt{width: 77%;margin-bottom: 18%;margin-right: 5%;background: rgb(187 125 75 / 72%);padding: 20px 34px;border-radius: 20px;}
	#banner .info .txt p {font-size: max(2 * (1vw + 1vh) / 2, 10px);}
	#banner .slick-dots{bottom: 16px;right: auto;left: 58px;}
}
@media screen and (max-width: 480px){
	#banner img{
    object-position: 34% 50%;
}
}