.banner-slider{}
.banner-slider .swiper-slide{ height: unset}

.banner-slider .banner-content{ color:#fff; flex: 1 }
.banner-slider .banner-content h1{ margin-top: 0; margin-bottom: 20px; font-size: 26px;   letter-spacing: -0.3px; }
.banner-slider .banner-item-title{}
.banner-slider .banner-item{ height: 100%;}
.banner-slider .banner-inner{ height: 100%; display: flex; flex-direction: column; }

.banner-slider .swiper-pagination-bullet{ height: 14px; width: 14px; border: 1px solid rgb(255 255 255 / 50%) }
.banner-slider .swiper-pagination-bullet-active{background: rgb(0 0 0 / 80%)}

.banner-slider .banner-image{ height: 360px;         box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%); }

.banner-slider .slider-buttons{ position: absolute; top: 20px; right: 15px; z-index: 100; display: flex; justify-content: space-between;}
.banner-slider .slider-button{ width: 30px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: 18px;  background-image: url(../../../../images/sprite-icons.svg#arrow3);  opacity: 0.5; cursor: pointer}
.banner-slider .slider-button-prev{ transform: rotate(180deg)}
.banner-slider .slider-button:hover{ opacity: 1}

.banner-slider .swiper-scrollbar-drag{ background: #ffffff80}


@media only screen and (min-width: 480px) {
    .page-banner .banner-image{ height: 400px; }
}

@media only screen and (min-width: 600px) {

    .banner-slider .banner-content h1{   }

}

@media only screen and (min-width: 768px) {

    .banner-slider .swiper-pagination{ width: auto !important; right: 30px !important; left:auto !important; }
    .banner-slider .slider-buttons{  right: calc(50% + 10px);}

    .banner-slider .banner-content {  transition: opacity .3s; opacity: 1}
    .banner-slider .banner-content.is-drag { opacity: 0}
    .page-banner.banner-slider .banner-image{ height: 100%; max-height: 480px}

    .home .page-banner .banner-content h1{  }

}

@media only screen and (min-width: 1024px) {


}


@media only screen and (min-width: 1280px) {
    
    .home .page-banner .banner-content h1{  font-size: 48px }
    .page-banner.banner-slider .banner-item-description{   font-size: 22px }
    .page-banner.banner-slider .banner-image{  max-height: 580px}
     .page-banner .banner-inner{ padding: 0 30px; max-width: 1320px;}
}