#banner,#banner .item{position:relative;background:#fff;z-index:100}
#banner .item a{position:absolute;width:100%;height:100%;background:rgb(31 31 31 / .3);top:0;left:0;z-index:2}
#banner .info{position:absolute;width: 50%;top:0;left:0;z-index:3;height: 85vh;padding-left: 175px;display:flex;justify-content: flex-end;flex-direction:column;align-items:flex-start}
#banner .info h3{display:block;line-height:110%;font-weight:400;color:#fff;padding:0 10%;font-family: "Cormorant", serif;word-break: keep-all;font-size: max(5.5 * (1vw + 1vh) / 2, 30px);margin-bottom: 20px;text-transform: uppercase;}
#banner .info p{margin-top:10px;font-weight: 300;color:#fff;font-size: 30px;padding:0 10%;font-family: "Noto Serif TC", serif;letter-spacing: 7px;}
#banner .img{position:relative;width:100vw;height:100vh;background:no-repeat 50% / cover}
#banner .img img,#banner .img video,#banner .img iframe{position:absolute;width:100vw;height:100vh;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}
#scrolldown{position:absolute;padding:0 0 25px 10px;letter-spacing:.3em;font-weight:300;font-size:12px;color:#fff;white-space:nowrap;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;bottom: 30px;right: 90px;animation:godown 1s infinite linear;-webkit-animation:godown 1s infinite linear;display: flex;flex-direction: row;align-items: center;}
#scrolldown:before {margin: 0 auto 20px;width: 8px;height: 8px;border: var(--white) solid;border-width: 0 2px 2px 0;display: block;content: "";transform: rotate(45deg) translate(-1px, -1px);-webkit-transform: rotate(45deg) translate(-1px, -1px);-webkit-animation: gotop 1s linear infinite;animation: gotop 1s linear infinite;}

@-webkit-keyframes banerBg{0%{-webkit-transform:scale(1)}100%{-webkit-transform:scale(1.1)}}
@keyframes banerBg{0%{transform:scale(1)}100%{transform:scale(1.1)}}
@-webkit-keyframes godown{0%,100%{padding:0 0 25px 10px}50%{padding:10px 0 15px 10px}}
@keyframes godown{0%,100%{padding:0 0 25px 10px}50%{padding:10px 0 15px 10px}}

@media screen and (max-width: 1280px){
    #banner .info p{font-size:22px}
}
@media screen and (max-width: 1024px){
    #banner .info{padding-left: 30px;width: 70%;}
}
@media screen and (max-width: 640px){
    #banner .info p{font-size: 18px;}
    #scrolldown{right: 30px;}
    #banner .info{height: auto;top: unset;bottom: 10%;padding: 0;width: 85%;}
    #banner .img{height:80vh}
    #banner .info h3{padding-right:0}
}