.xf-main-slider-pagination .swiper-pagination-bullet { position: relative; width: 6px; height: auto; text-align: left; opacity: 1; margin-right: 8px; background-color: transparent; }
.xf-main-slider-pagination .swiper-pagination-bullet-active { background-color: transparent; width: 20px; }
.xf-main-slider-pagination .swiper-pagination-bullet i { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 6px; border-radius: 40px; background: rgba(26, 31, 30, 0.30); }
.xf-main-slider-pagination .swiper-pagination-bullet b { position: absolute; top: 0; left: 0; z-index: 2; width: 0%; border-radius: 40px; height: 6px; background-color: #00C2C2; }
.xf-main-slider-pagination .swiper-pagination-bullet-active b { animation: countingBar 3s ease-in 1 alternate forwards; }
@keyframes countingBar { 0% { width: 0; } 100% { width: 100%; } }