#banner{padding-top:110px;}
#banner, #banner .item { position: relative; background: #fff; z-index: 100; }
#banner >p{position:absolute;right: 0;height: 100%;display: flex;align-items: center;justify-content: center;writing-mode: vertical-lr;font-family: "Bricolage Grotesque", sans-serif;font-size: 16px;color: white;z-index: 2;letter-spacing: 3px;padding: 0 55px;border-left: 1px solid rgb(255 255 255 / 30%);text-shadow: 0 0 20px rgb(87 84 81 / 40%);}
#banner:before{content:'';width: 100%;height: 1px;background: #cdcdcd;opacity: .3;position: absolute;bottom: 95px;left: 0;z-index: 3;}
#banner .item a {position: absolute;width: 100%;height: 100%;background: rgb(49 49 49 / 20%);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 18%;flex-direction: column;justify-content: center;align-items: flex-start;}
#banner .info *{text-shadow: 0 0 30px rgb(87 84 81 / 35%);}
#banner .info em{font-family: "Bricolage Grotesque", sans-serif;font-size: 50px;line-height: 1.5;color: white;font-style: unset;}
#banner .info span{display:block;width: 45px;height: 2px;background: white;margin: 20px 0 30px;}
#banner .info article {display: block;line-height: 1.7;font-size: 22px;font-weight: 300;color: #fff;margin-top: 15px;letter-spacing: 3px;}
#banner .info p {margin-top: 10px;font-weight: 400;color: #fff;font-size: 30px;line-height: 1.4;letter-spacing: 3px;}
#banner .img {position: relative;width: 100vw;height: 85vh;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:97777;bottom: 0;left: 0;background: var(--primary);height: 95px;padding: 0 80px;display: flex;align-items: center;}
#banner .maalinebox{display:flex;flex-direction: row;align-items: center;gap: 20px;}
#banner .maalinebox >div{display:flex;gap: 20px;}
#banner .maalinebox *{font-size:20px;font-family: "Bricolage Grotesque", sans-serif;color:white;}
#banner #total-slides * , #banner #current-slide2 *{color:#b3364b}
#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}
#custom-prev-btn{-moz-transform:scalex(-1);-webkit-transform:scalex(-1);-o-transform:scalex(-1);-ms-transform:scalex(-1);transform:scalex(-1)}
.conJbox{width:100%;display:flex;flex-direction:column;align-items:center}
.conJbox .comline:after{content:"";position:absolute;width:4px;height:100px;background:white;left:-2px;top:39%}
.conJbox .comline{position:absolute;aspect-ratio:12/7.3;border-left:rgb(255 255 255 / 53%) 1px solid;border-right:rgb(255 255 255 / 53%) 1px solid;z-index:9;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.conJbox .comline:before{content:"";position:absolute;width:1px;height:100%;background:rgb(255 255 255 / 53%)}
#banner .longline{display:flex;position:relative;width: 80px;height: 1px;margin:0 14px}
#banner .longline .progress-bar{position:absolute;background: #fff;top:0px;height: 1px;opacity:.6}

/* scrolldown */
#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: -231px;right: 138px;z-index:2;background: var(--primary);padding: 35px 33px 80px;gap: 90px;}
#banner .upDown{width:100%;height: 100%;bottom: 0;left: 0;z-index: 2;position: absolute;}
#banner #scrollDown span{display: block;color: white;-webkit-writing-mode:vertical-lr;font-family: "Bricolage Grotesque", sans-serif;font-size: 14px;}
#banner .arrow-l{width:20px;height: 70px;position:relative;}
#banner .arrow-l::before{content:"";position:absolute;left:50%;top:0;width: 1px;height:100%;background-color:white;transform:translateX(-50%);}
#banner .arrow-l::after{content:"";position:absolute;bottom:0;right: 0;width: 10px;height: 1px;background-color:white;transform: translateX(0%) rotate(-40deg);transform-origin:left center;}

@-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{padding-top:100px;}
    #banner .info em{font-size: 35px;}
    #banner .info p{font-size: 26px;}
    #banner .info article{font-size: 18px;}
    #banner .longline{width: 80px;}
}
@media screen and (max-width: 1024px){
    #banner >p, #banner #scrollDown{display:none;}
}
@media screen and (max-width: 768px){
    #banner .img{height:70vh}
    #banner .info{padding:0 10%;}
    #banner #countbanner, #banner:after{display:none;}
}
@media screen and (max-width: 600px){
    #banner:before{display:none;}
    #banner{padding-top: 80px;}
    #banner .info{margin-top:50px;}
    #banner .info p{font-size: 20px;}
    #banner .info article{font-size: 16px;letter-spacing: 1px;}
    #banner .img{height: 70vh;}
    #banner:before{bottom: 13%;}
}