.swiper { display: block; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; display: flex; box-sizing: content-box; z-index: 1; }
.swiper-slide { display: block; flex-shrink: 0; width: 100%; height: 100%; position: relative; }
.swiper-pagination { position: absolute; text-align: center; transition: 0.3s opacity; transform: translate3d(0, 0, 0); z-index: 10; }
.swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #000; opacity: 0.2 }
button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction { bottom: 8px; top: auto; left: 0; width: 100%; }
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; }
.swiper-pagination-bullet-active { opacity: 1; background: var(--color-primary); }
.swiper-pagination-progressbar { background: #9E9E9E; position: absolute; }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--color-primary); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; }
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; }