#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(53 53 53 / 35%));top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;width: 100%;bottom: 36%;left: 0;z-index: 3;display: flex;flex-direction: column;align-items: center;}
#banner .info .h3 {display: block;line-height: 150%;text-align: center;font-size: 33px;font-weight: 500;color: #fff;font-family: "Noto Serif TC", serif;letter-spacing: 8.5px;margin-top: 30px;word-spacing: 100vw;margin-bottom: 20px;}
#banner .info .blogo img{height: 10px;}
#banner .info p {margin-top: 15px;text-align: center;font-weight: 300;color: #fff;font-family: "Cormorant Garamond", serif;font-size: 18px;text-transform: uppercase;letter-spacing: 5.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: 450px; z-index: 2; display: flex; justify-content: center; align-items: flex-end; width: 100%; pointer-events: none; }
#banner .bottom > div { position: absolute; width: 110%; height: auto; bottom: 0; left: -5%; will-change: transform; }
#banner .bottom img { display: block; width: 100%; height: auto; }
#banner .bottom .b1 { z-index: 2; animation: cloudMoveLeft 10s ease-in-out infinite alternate; }
#banner .bottom .b2 { z-index: 1; opacity: .9; animation: cloudMoveRight 15s ease-in-out infinite alternate; }
@keyframes cloudMoveLeft {  0% { transform: translateX(0); }  100% { transform: translateX(-45px); }}
@keyframes cloudMoveRight {  0% { transform: translateX(0); }  100% { transform: translateX(55px); }}

/* scrolldown */
#scrolldown {position: absolute;font-weight: 300;font-size: 12px;color: #fff;white-space: nowrap;bottom: 15%;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 .img img, #banner .img video, #banner .img iframe{left: -15%;}
    #banner .bottom{width: 130%;left: -15%;height: 220px;bottom: -30px;}
    #banner .img{height:75vh}
}
@media screen and (max-width:680px) {
    #scrolldown span{height: 60px;top: -50px;}
    #banner .info .blogo img{height: 5px;}
    #banner .info p{font-size:15px;letter-spacing: 2.5px;}
     #banner .img img, #banner .img video, #banner .img iframe{left: -45%;}
    #banner .img{height:65vh}
    #banner .bottom{bottom: -10px;}
    #banner .info .h3{font-size: 20px;letter-spacing: 5.5px;}
    
}