#banner , #banner .item { position: relative; background: #fff; z-index: 100; }
#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;aspect-ratio: 1/1;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%));}
#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; }
#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:9.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:120px;height:1px;left:70px;transition:top 0.3s ease}
#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}

/* 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: 1280px){
    #banner .info p{font-size: 50px;}
    #banner .info article{font-size: 22px;}
    #banner .longline{width: 80px;}
}
@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;}
    #banner .info p{font-size: 40px;}
    #banner .info article{font-size: 18px;}
    #banner .img{height: 70vh;}
    #banner:before{bottom: 13%;}
}