#banner , #banner .item { position: relative; background: #fff; z-index: 100; }
#banner:before{content:'';position: absolute;right: 150px;top: 0;width: 1px;height: 100%;background: #fff;opacity: .3;z-index: 2;}
#banner:after{content:'大豆室內裝修設計有限公司';writing-mode: vertical-rl;position: absolute;right: 62px;bottom: 265px;color: #fff;letter-spacing: 3px;font-weight: 200;}
#banner .item a {position: absolute;width: 100%;height: 100%;background: rgb(106 106 106 / 30%);top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;width: 50%;bottom: 20vh;z-index: 3;left: 250px;}
#banner .info h2{font-family: "Cormorant Garamond", serif;font-size: 86px;text-transform: uppercase;color: #fff;line-height: 150%;}
#banner .info h3 {display: block;line-height: 110%;font-size: 35px;font-weight: 400;color: #fff;letter-spacing: 5px;margin-bottom: 40px;}
#banner .info p {margin-top: 10px;font-weight: 300;color: #fff;font-size: 25px;}
#banner .img {position: relative;width: 100vw;height: 97vh;background: no-repeat 50% / cover;overflow: hidden;}
#banner .img img , #banner .img video , #banner .img iframe {position: absolute;width: 100vw;height: auto;left: 0;top: 0;}

/* scrolldown */
#scrolldown { position: absolute; padding: 0 0 25px 10px; border-left: 1px #fff solid; 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: 0; left: 30px; animation: godown 1s infinite linear; -webkit-animation: godown 1s infinite linear; }

p.baScro{position:absolute;left: 250px;bottom: 0;overflow: hidden;}
p.baScro a{position: relative;width:220px;background: #fff;padding: 30px 40px;cursor: pointer;display: flex;align-items: center;justify-content: space-between;}
p.baScro a b{font-size:14px;font-weight: 400;}
p.baScro a span{width: 35px;height: 35px;border: 1px solid #cccecd;border-radius: 50px;display: flex;align-items: center;justify-content: center;}
p.baScro a span:after{content:'';width: 6px;height: 6px;background: #222;border-radius: 50px;}
p.baScro a b:after{position:absolute;display:block;content:attr(data-text);top:100%;left: 0;}
p.baScro a:hover b:after{transition: transform 0.2s cubic-bezier(0.25,1,0.5,1);top: 72px;width: 100px;}
p.baScro a:hover b{transition: transform 0.2s cubic-bezier(0.25,1,0.5,1);transform: translateY(-300%);}
p.baScro a:hover span:after{width:16px;height: 16px;}

@media screen and (max-width: 1500px){
    #banner .info, p.baScro{left: 150px;}
}
@media screen and (max-width: 1400px){
    #banner:after{bottom: 110px;}
}
@media screen and (max-width: 1280px){
    #banner:before{right: 100px;}
    #banner:after{right: 35px;}
}
@media screen and (max-width: 1024px){
    p.baScro a{display:none;}
    #banner .img video{height:100%;width: auto;}
    #banner .info{left:100px;bottom: 90px;width: 70%;}
}
@media screen and (max-width: 768px){
    #banner .info h2{font-size:75px;}
    #banner:after, #banner:before{display:none;}
}
@media screen and (max-width: 640px){
    #banner .info{left: 10%;bottom: 50px;width: 80%;}
    #banner .info h2{font-size: 45px;line-height: 110%;margin-bottom: 15px;}
    #banner .img{height: 80vh;}
    #banner .info h3{font-size:28px;}
    #banner .info p{font-size:18px;}
}