#banner,#banner .item{position:relative;background:#fff;z-index:100}
#banner , #banner *{-webkit-transition: all 0s ease-out;-moz-transition: all 0s ease-out;-ms-transition: all 0s ease-out;-o-transition: all 0s ease-out;transition: all 0s ease-out;}
#banner:before{content:'';width:100%;height:1px;background:#cdcdcd;opacity:.3;position:absolute;bottom:23%;left:0;z-index:3}
#banner:after{content:'';width:210px;height: 23%;position:absolute;bottom:0;right:0;background:var(--primary)}
#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:100%;height:100%;display:flex;left:0;z-index:3;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:0 20%;flex-direction:column;justify-content:center;align-items:flex-start;background:linear-gradient(0deg,rgb(0 0 0 / 0%),rgb(0 0 0 / 50%));display: none;}
#banner .info article{display:block;line-height:110%;text-align:center;font-size:26px;font-weight:100;color:#fff;margin-top:10px;letter-spacing:3px}
#banner .info p{margin-top:10px;font-weight:100;color:#fff;font-family:"Cormorant Garamond",serif;font-size:60px;line-height:1.4;text-transform:uppercase}
#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;object-fit:cover}
#banner .slick-active .img{-webkit-transform:scale(1);transform:scale(1);animation:banerBg 6s infinite linear;-webkit-animation:banerBg 6s infinite linear}
#banner #countbanner{position:absolute;z-index:100;left:11.5%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;bottom:0;}
#banner #countbanner:after,#banner #countbanner:before{content:'';width:1px;height:35%;background:#cdcdcd;opacity:.3}
#banner .maalinebox{display:flex;flex-direction:column;align-items:center}
#banner .maalinebox{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;justify-content:center}
#banner .maalinebox span:not(.longline,.progress-bar){font-family:"Quattrocento",serif;font-size:12px;color:var(--white);width:40px;aspect-ratio:1/1;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgb(255 255 255 / 50%);border-radius:50px;line-height:1}
#banner .maalinebox #current-slide span{border:1px solid rgb(255 255 255 / 50%)}
#banner .maalinebox #current-slide2 span,#banner .maalinebox #total-slides span{border-color:rgb(255 255 255 / 20%);color:rgb(255 255 255 / 30%)}
#banner .maalinebox #current-slide2{display:flex;flex-direction:column;gap:10px}
#banner .maalinebox #total-slides{display:flex;flex-direction:column;gap:10px}
#banner .longline{position:absolute;width: 61px;height:1px;left: 60px;transition:top 0.3s ease;display: none;}
#banner .longline .progress-bar{position:absolute;background:#cdcdcd;top:0px;height:1px;opacity:.4}
#banner #countbanner .updownbox{display:flex;margin-right:20px}
#banner #countbanner .updownbox .slick-arrow:hover svg{fill:#000000;border:#ffffff 1px solid;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;background:aliceblue}
#banner #countbanner .updownbox svg{width:52px;aspect-ratio:1/1;border-radius:50%;border:#ffffff 1px solid;fill:#ffffff;cursor:pointer}
#banner .ytp-chrome-top{display:none}

/* 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}
@-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: 1470px){
    #banner:before{bottom: 17%;}
    #banner:after{height: 17%;width: 170px;}
}
@media screen and (max-width: 1280px) {
    #banner .info p{font-size:50px}
    #banner .info article{font-size:22px}
    #banner .longline{width:80px}
}

@media screen and (max-width: 1024px){
    #banner .info{padding: 0 20vw 0 25vw;}
}

@media screen and (max-width: 768px) {
    #banner .info p{font-size:45px}
    #banner .info{padding:0 10%;display:flex;align-items:center}
    #banner #countbanner,#banner:after{display:none}
    #banner .info *{text-align:center}
}

@media screen and (max-width: 600px) {
    #banner .info{margin-top:50px;padding: 0 5%;}
    #banner .info p{font-size:40px}
    #banner .info article{font-size:18px}
    #banner .img{height:70vh}
    #banner:before{bottom:13%}
}