#banner , #banner .item { position: relative; background: #fff; z-index: 100; }
#banner .item a {position: absolute;width: 100%;height: 100%;background: rgb(25 25 25 / 25%);top: 0;left: 0;z-index: 2;}
#banner .info {position: absolute;bottom: 10vh;left: 18vw;z-index: 3;}
#banner .info h3 {display: block;line-height: 130%;font-size: 90px;font-weight: 300;color: #fff;font-family: "Cormorant", serif;}
#banner .info p {margin-top: 10px;font-weight: 500;color: #fff;font-size: 30px;word-spacing: 100vw;font-family: "Noto Serif TC", serif;letter-spacing: 5px;margin-left: 100px;}
#banner .img {position: relative;width: 100vw;height: 95vh;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; }

#banner #scrollDown{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;bottom: -5%;left: 18%;z-index:2}
#banner .upDown{width:100%;height: 100%;bottom: 0;left: 0;z-index: 2;position: absolute;}
#banner #scrollDown span.text{display:block;color: #2b2b2b;-webkit-writing-mode:vertical-lr;position: absolute;top: -60px;animation-name: circle;animation-iteration-count: infinite;animation-timing-function: linear;animation-duration: 35s;}
@keyframes circle{0%{transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);}}#banner #scrollDown span.scrollBtn{width:25px;height:44px;border-radius:12.5px;background-color: rgb(78 78 78 / 90%);position:relative;overflow:hidden;margin-bottom:12px}
#banner #scrollDown:hover span.scrollBtn:after{top:65%;width:7px;height:7px;}
#banner #scrollDown span.scrollBtn:after{content:"";width:5px;height:5px;background-color: #fff;border-radius:50%;position:absolute;top:20%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
#banner #scrollDown span.scrollArrow{width:10px;height:10px;border-right: 2px solid #414141;border-bottom: 2px solid #414141;-webkit-transform:rotate(45deg);transform:rotate(45deg);display:block}

#banner .slick-dots{bottom: 15%;width: auto;display: flex !important;flex-direction: column;align-items: center;left: calc(20% - 37px);justify-content: flex-start;}
#banner .slick-dots li{margin: 5px 0;}
#banner .slick-dots li button{border: 1px solid #75757500;border-radius: 50px;}
#banner .slick-dots li.slick-active button{border: 1px solid #757575;}
#banner .slick-dots li button:before{opacity:1;color: #fff;}

@-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: 1400px){
    #banner .info h3{font-size: 70px;}
}
@media screen and (max-width: 700px){
    #banner .img{height:80vh}
    #banner #scrollDown span.scrollBtn{background-color: rgb(255 255 255 / 25%);}
    #banner #scrollDown{left: 7%;bottom: 5%;}
    #banner #scrollDown span.text{display:none;}
    #banner .info{left: 8vw;}
    #banner .info h3{font-size: 50px;}
    #banner #scrollDown span.scrollArrow{border-color:#fff;}
    #banner .info p{font-size: 20px;margin-left: 50px;}
}