#banner , #banner .item { position: relative; background: #fff; z-index: 100; }
#banner .item a {position: absolute;width: 100%;height: 100%;background: linear-gradient(0deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;width: 100%;bottom: 43%;left: 0;z-index: 3;display: flex;flex-direction: column;align-items: center;}
#banner .info .h3 {display: block;line-height: 110%;text-align: center;font-size: 22px;font-weight: 300;color: #fff;font-family: "Noto Serif TC", serif;letter-spacing: 11.5px;margin-top: 30px;}
#banner .info p {margin-top: 10px;text-align: center;font-weight: 100;color: #fff;font-family: "Cormorant Garamond", serif;font-size: 16px;text-transform: uppercase;letter-spacing: 3.5px;}
#banner .img {position: relative;width: 100vw;height: 100vh;background: no-repeat 50% / cover;filter: hue-rotate(8deg) saturate(1.2);}
#banner .img img , #banner .img video , #banner .img iframe {position: absolute;width: 100vw;height: auto;left: 0;top: 0;}
#banner .slick-active .img { -webkit-transform: scale(1); transform: scale(1); animation: banerBg 6s infinite linear; -webkit-animation: banerBg 6s infinite linear; }
#banner .bottom { position: absolute; overflow: hidden; bottom: -90px; height: 350px; z-index: 2; display: flex; justify-content: center; align-items: flex-end; width: 100%; }
#banner .bottom >div { position: absolute; width: 100%; height: auto; bottom: 0; }
#banner .bottom img { display: block; }

/* scrolldown */
#scrolldown {position: absolute;font-weight: 300;font-size: 12px;color: #fff;white-space: nowrap;bottom: 22%;left: calc(50vw - 40px);z-index: 3;font-family: "Cormorant Garamond", serif;width: 80px;aspect-ratio: 1/1;border: 1px solid rgb(255 255 255 / 80%);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
#scrolldown span{width:1px;position: absolute;height: 100px;background: rgb(255 255 255 / 40%);top: -80px;}
#scrolldown span:before{content:'';position: absolute;width: 1px;height: 30px;top: 0;background: white;}
#scrolldown:hover span:before{height:100%;}

@media screen and (max-width:1400px) {
    #scrolldown{bottom: 10%;}
    #banner .info{bottom: 38%;}
}
@media screen and (max-width:1024px) {
    #banner .img img, #banner .img video, #banner .img iframe{height:100%;width: auto;}
}
@media screen and (max-width:980px) {
    #banner .bottom{width: 130%;left: -15%;height: 200px;}
}
@media screen and (max-width:680px) {
    #banner .bottom{bottom: -30px;}
    #banner .info .h3{font-size: 20px;letter-spacing: 6.5px;}
    #banner .img{height:85vh}
}