.my-container { overflow: hidden; max-width: 100%; margin: auto; }
.my-wrapper { position: relative; padding: 0 18%; }
.swiper-container { width: 100%; height: 100%; overflow: visible; }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; transition: opacity 0.5s ease; }

.swiper-button-next.swiper-button-disabled { background: url(../img/common/swiper_arr_off.png) no-repeat; width: 83px; height: 83px; background-size: cover; transform: rotate(180deg) translateY(50%); font-size:0; margin-top:0; }
.swiper-slide img { filter: brightness(0.5) grayscale(1);} 
.swiper-slide-active { opacity:1;  }  
.swiper-slide-active img { filter: brightness(1) grayscale(0); }

//css arrow
.swiper-navigation { width: 100%}
.swiper-button-prev { background: url(../img/common/swiper_arr_on.png) no-repeat; width: 50px; height: 50px; background-size: cover; transform: rotate(180deg) translateY(50%) ; font-size:0; margin-top:0; }
.swiper-button-next { background: url(../img/common/swiper_arr_on.png) no-repeat; width: 50px; height: 50px; background-size: cover; font-size:0; margin-top:0; transform: translateY(-50%); }
.swiper-button-prev.swiper-button-disabled { background: url(../img/common/swiper_arr_off.png) no-repeat; width: 50px; height: 50px; background-size: cover; transform: rotate(0) translateY(-50%); font-size:0; margin-top:0; }  
.swiper-button-next:after,
.swiper-button-prev:after { display: none;  }  
.swiper-button-prev, .swiper-rtl .swiper-button-next { left: 20px; right: auto; }
.swiper-button-next, .swiper-rtl .swiper-button-prev { right: 20px; left: auto; }

.my-container .swiper-pagination { left: 50%; bottom: 15px; transform: translate(-50%,0) !important; text-align: center;}
.my-container .swiper-pagination-bullet { background: #fff !important; margin: 0 4px !important; width: 68px; height: 7px; border-radius: 0; opacity: 0.5;}
.my-container .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff !important; opacity: 1;}
@media screen and (max-width:1024px){
/* .my-container .swiper-pagination { top: 18px; } */
.my-container .swiper-pagination-bullet { margin: 0 1px !important; width: 34px; height: 3px; }
}
@media screen and (max-width:768px){
.my-wrapper { padding: 0 15%; }
.swiper-button-prev { width: 30px; height: 30px; }
.swiper-button-next { width: 30px; height: 30px; }
.swiper-button-prev.swiper-button-disabled { width: 30px; height: 30px; }
.swiper-button-prev, .swiper-rtl .swiper-button-next { left: 6px;}
.swiper-button-next, .swiper-rtl .swiper-button-prev { right: 6px;}
}