#banner,#banner .item{position:relative;background:#fff;z-index: 987;height: 100vh;}
#banner .main-slider:before{content:"";position: absolute;width: 50%;height: 100%;right: 0;background: rgb(0 0 0 / 48%);z-index: 2;pointer-events: none;}
#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: #ffffff;opacity: .5;position:absolute;bottom: 5.7vw;left:0;z-index:3}
#banner:after{content:'';height: 5.7vw;aspect-ratio: 1/1;position:absolute;bottom:0;right: 7vw;background: #cdcdcd;z-index: 3;}
#banner .item a{position:absolute;width:100%;height:100%;background: rgb(235 235 235 / 0%);top:0;left:0;z-index:2}
#banner .info{position:absolute;width:100%;display:flex;left:0;bottom: 0;z-index:3;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding: 0 14%;flex-direction:column;justify-content:center;align-items:flex-start;bottom: 8.8vw;}
#banner .item:before{content:"";position: absolute;width: 100%;height: 33vh;left: 0;bottom: 0;background: rgb(0 0 0 / 29%);z-index: 2;}
#banner .info article{display:block;line-height:110%;text-align:center;font-size: max(1.2*(1vw + 1vh) / 2,15px);font-weight:100;color:#fff;margin-top:10px;letter-spacing:3px}
#banner .info p{margin-top:10px;font-weight:100;color:#fff;font-size: max(3.6*(1vw + 1vh) / 2,30px);line-height:1.4;text-transform:uppercase;font-weight: 600;}
#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: 119%;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 0s infinite linear;}
#banner #countbanner{position:absolute;z-index:100;left: 5.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: 2px;height: 22%;background: #ffffff;opacity: .5;}
#banner #countbanner:after{height: 33vh;}
#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}
.bannergotoicon{position: absolute;bottom: 2%;right: 8vw;display: flex;gap: 10px;display: none;}
.bannergotoicon a{background:url(/images/40/icon_bg.png);background-size: cover;background-position: 50%;padding: 18px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.bannergotoicon a:hover{filter: brightness(1.1);}
#banner .bannergotoicon a{-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
/* scrollBtn */
#scrollBtn {position: absolute;z-index: 60;width: 5%;aspect-ratio: 1/1;bottom: 0;right: 7.2vw;display: flex;align-items: center;flex-direction: column;justify-content: center;}
#scrollBtn font {align-items: center;cursor: pointer;justify-content: center;display: flex;border-radius: 0;}
#scrollBtn font img{animation: scrolldownrun 1.2s linear infinite;}
#scrollBtn span {text-transform: uppercase;color: #ffffff;display: none;}
@keyframes scrolldownrun{0%{transform:translate(0,-5px);}50%{transform:translate(0,10px);}100%{transform:translate(0,-5px);}}
#banner .banner_wrap svg.background_txt {position: absolute;top: 16%;left: 0;z-index: -1;font-family: 'Oswald', sans-serif;font-size: 290px;width: 100%;height: 290px;}


@-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: 5vw;}
    #banner:after{height: 5vw;width: 5vw;}
    .bannergotoicon{right: 10vw;}
    #scrollBtn{width: 5vw;}
    #scrollBtn font img{width: 5px;}
    #banner .info{bottom: 7vw;}
    #banner #countbanner:after{height: 29vh;}
    #banner .item:before{height: 29vh;}
}
@media screen and (max-width: 1280px) {
    #banner .info p{}
    #banner .info article{}
    #banner .longline{width:80px}
    #banner .img img, #banner .img video, #banner .img iframe{height: 100%;width: 100%;right: 0;left: auto;}
    #banner, #banner .item, #banner .img , #banner .img iframe{height:auto;aspect-ratio: 21/11;width: 100%;}
    #banner{margin-top: 0;}
}

@media screen and (max-width: 1024px){
    #banner .info{padding: 0 20vw 0 16vw;}
    .bannergotoicon ,#banner:after ,#scrollBtn ,#banner:before{display:none;}
    #banner #countbanner,#banner .item:before{display:none;}
}

@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}
    #banner .main-slider:before{display:none;}
}

@media screen and (max-width: 600px) {
    #banner{margin-top: 0;}
    #banner .info{padding: 0 5%;display: flex;align-items: flex-start;bottom: 20vw;left: 5vw;}
    #banner .info p{font-size:40px}
    #banner .info article{font-size:18px}
    #banner:before{bottom:13%}
    #banner, #banner .item, #banner .img, #banner .img iframe{aspect-ratio:1/1;}
}
@media screen and (max-width: 480px) {
    #banner{margin-top: 0;}
    #banner .img iframe{position: relative;left: unset;right: unset;width: 100%;margin: 0;padding: 0;}
}
