swiper.css 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
  1. /**
  2. * Swiper 3.4.2
  3. * Most modern mobile touch slider and framework with hardware accelerated transitions
  4. *
  5. * http://www.idangero.us/swiper/
  6. *
  7. * Copyright 2017, Vladimir Kharlampidi
  8. * The iDangero.us
  9. * http://www.idangero.us/
  10. *
  11. * Licensed under MIT
  12. *
  13. * Released on: March 10, 2017
  14. */
  15. .swiper-container {
  16. margin-left: auto;
  17. margin-right: auto;
  18. position: relative;
  19. overflow: hidden;
  20. z-index: 1
  21. }
  22. .swiper-container-no-flexbox .swiper-slide {
  23. float: left
  24. }
  25. .swiper-container-vertical>.swiper-wrapper {
  26. -webkit-box-orient: vertical;
  27. -moz-box-orient: vertical;
  28. -ms-flex-direction: column;
  29. -webkit-flex-direction: column;
  30. flex-direction: column
  31. }
  32. .swiper-wrapper {
  33. position: relative;
  34. width: 100%;
  35. height: 100%;
  36. z-index: 1;
  37. display: -webkit-box;
  38. display: -moz-box;
  39. display: -ms-flexbox;
  40. display: -webkit-flex;
  41. display: flex;
  42. -webkit-transition-property: -webkit-transform;
  43. -moz-transition-property: -moz-transform;
  44. -o-transition-property: -o-transform;
  45. -ms-transition-property: -ms-transform;
  46. transition-property: transform;
  47. -webkit-box-sizing: content-box;
  48. -moz-box-sizing: content-box;
  49. box-sizing: content-box
  50. }
  51. .swiper-container-android .swiper-slide,
  52. .swiper-wrapper {
  53. -webkit-transform: translate3d(0, 0, 0);
  54. -moz-transform: translate3d(0, 0, 0);
  55. -o-transform: translate(0, 0);
  56. -ms-transform: translate3d(0, 0, 0);
  57. transform: translate3d(0, 0, 0)
  58. }
  59. .swiper-container-multirow>.swiper-wrapper {
  60. -webkit-box-lines: multiple;
  61. -moz-box-lines: multiple;
  62. -ms-flex-wrap: wrap;
  63. -webkit-flex-wrap: wrap;
  64. flex-wrap: wrap
  65. }
  66. .swiper-container-free-mode>.swiper-wrapper {
  67. -webkit-transition-timing-function: ease-out;
  68. -moz-transition-timing-function: ease-out;
  69. -ms-transition-timing-function: ease-out;
  70. -o-transition-timing-function: ease-out;
  71. transition-timing-function: ease-out;
  72. margin: 0 auto
  73. }
  74. .swiper-slide {
  75. -webkit-flex-shrink: 0;
  76. -ms-flex: 0 0 auto;
  77. flex-shrink: 0;
  78. width: 100%;
  79. height: 100%;
  80. position: relative
  81. }
  82. .swiper-container-autoheight,
  83. .swiper-container-autoheight .swiper-slide {
  84. height: auto
  85. }
  86. .swiper-container-autoheight .swiper-wrapper {
  87. -webkit-box-align: start;
  88. -ms-flex-align: start;
  89. -webkit-align-items: flex-start;
  90. align-items: flex-start;
  91. -webkit-transition-property: -webkit-transform, height;
  92. -moz-transition-property: -moz-transform;
  93. -o-transition-property: -o-transform;
  94. -ms-transition-property: -ms-transform;
  95. transition-property: transform, height
  96. }
  97. .swiper-container .swiper-notification {
  98. position: absolute;
  99. left: 0;
  100. top: 0;
  101. pointer-events: none;
  102. opacity: 0;
  103. z-index: -1000
  104. }
  105. .swiper-wp8-horizontal {
  106. -ms-touch-action: pan-y;
  107. touch-action: pan-y
  108. }
  109. .swiper-wp8-vertical {
  110. -ms-touch-action: pan-x;
  111. touch-action: pan-x
  112. }
  113. .swiper-button-next,
  114. .swiper-button-prev {
  115. position: absolute;
  116. top: 50%;
  117. width: 27px;
  118. height: 44px;
  119. margin-top: -22px;
  120. z-index: 10;
  121. cursor: pointer;
  122. -moz-background-size: 27px 44px;
  123. -webkit-background-size: 27px 44px;
  124. background-size: 27px 44px;
  125. background-position: center;
  126. background-repeat: no-repeat
  127. }
  128. .swiper-button-next.swiper-button-disabled,
  129. .swiper-button-prev.swiper-button-disabled {
  130. opacity: .35;
  131. cursor: auto;
  132. pointer-events: none
  133. }
  134. .swiper-button-prev,
  135. .swiper-container-rtl .swiper-button-next {
  136. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  137. left: 10px;
  138. right: auto
  139. }
  140. .swiper-button-prev.swiper-button-black,
  141. .swiper-container-rtl .swiper-button-next.swiper-button-black {
  142. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
  143. }
  144. .swiper-button-prev.swiper-button-white,
  145. .swiper-container-rtl .swiper-button-next.swiper-button-white {
  146. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
  147. }
  148. .swiper-button-next,
  149. .swiper-container-rtl .swiper-button-prev {
  150. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  151. right: 10px;
  152. left: auto
  153. }
  154. .swiper-button-next.swiper-button-black,
  155. .swiper-container-rtl .swiper-button-prev.swiper-button-black {
  156. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
  157. }
  158. .swiper-button-next.swiper-button-white,
  159. .swiper-container-rtl .swiper-button-prev.swiper-button-white {
  160. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
  161. }
  162. .swiper-pagination {
  163. position: absolute;
  164. text-align: center;
  165. -webkit-transition: .3s;
  166. -moz-transition: .3s;
  167. -o-transition: .3s;
  168. transition: .3s;
  169. -webkit-transform: translate3d(0, 0, 0);
  170. -ms-transform: translate3d(0, 0, 0);
  171. -o-transform: translate3d(0, 0, 0);
  172. transform: translate3d(0, 0, 0);
  173. z-index: 10
  174. }
  175. .swiper-pagination.swiper-pagination-hidden {
  176. opacity: 0
  177. }
  178. .swiper-container-horizontal>.swiper-pagination-bullets,
  179. .swiper-pagination-custom,
  180. .swiper-pagination-fraction {
  181. bottom: 10px;
  182. left: 0;
  183. width: 100%
  184. }
  185. .swiper-pagination-bullet {
  186. width: 8px;
  187. height: 8px;
  188. display: inline-block;
  189. border-radius: 100%;
  190. background: #000;
  191. opacity: .2
  192. }
  193. button.swiper-pagination-bullet {
  194. border: none;
  195. margin: 0;
  196. padding: 0;
  197. box-shadow: none;
  198. -moz-appearance: none;
  199. -ms-appearance: none;
  200. -webkit-appearance: none;
  201. appearance: none
  202. }
  203. .swiper-pagination-clickable .swiper-pagination-bullet {
  204. cursor: pointer
  205. }
  206. .swiper-pagination-white .swiper-pagination-bullet {
  207. background: #fff
  208. }
  209. .swiper-pagination-bullet-active {
  210. opacity: 1;
  211. background: #007aff
  212. }
  213. .swiper-pagination-white .swiper-pagination-bullet-active {
  214. background: #fff
  215. }
  216. .swiper-pagination-black .swiper-pagination-bullet-active {
  217. background: #000
  218. }
  219. .swiper-container-vertical>.swiper-pagination-bullets {
  220. right: 10px;
  221. top: 50%;
  222. -webkit-transform: translate3d(0, -50%, 0);
  223. -moz-transform: translate3d(0, -50%, 0);
  224. -o-transform: translate(0, -50%);
  225. -ms-transform: translate3d(0, -50%, 0);
  226. transform: translate3d(0, -50%, 0)
  227. }
  228. .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  229. margin: 5px 0;
  230. display: block
  231. }
  232. .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  233. margin: 0 5px
  234. }
  235. .swiper-pagination-progress {
  236. background: rgba(0, 0, 0, .25);
  237. position: absolute
  238. }
  239. .swiper-pagination-progress .swiper-pagination-progressbar {
  240. background: #007aff;
  241. position: absolute;
  242. left: 0;
  243. top: 0;
  244. width: 100%;
  245. height: 100%;
  246. -webkit-transform: scale(0);
  247. -ms-transform: scale(0);
  248. -o-transform: scale(0);
  249. transform: scale(0);
  250. -webkit-transform-origin: left top;
  251. -moz-transform-origin: left top;
  252. -ms-transform-origin: left top;
  253. -o-transform-origin: left top;
  254. transform-origin: left top
  255. }
  256. .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  257. -webkit-transform-origin: right top;
  258. -moz-transform-origin: right top;
  259. -ms-transform-origin: right top;
  260. -o-transform-origin: right top;
  261. transform-origin: right top
  262. }
  263. .swiper-container-horizontal>.swiper-pagination-progress {
  264. width: 100%;
  265. height: 4px;
  266. left: 0;
  267. top: 0
  268. }
  269. .swiper-container-vertical>.swiper-pagination-progress {
  270. width: 4px;
  271. height: 100%;
  272. left: 0;
  273. top: 0
  274. }
  275. .swiper-pagination-progress.swiper-pagination-white {
  276. background: rgba(255, 255, 255, .5)
  277. }
  278. .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  279. background: #fff
  280. }
  281. .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  282. background: #000
  283. }
  284. .swiper-container-3d {
  285. -webkit-perspective: 1200px;
  286. -moz-perspective: 1200px;
  287. -o-perspective: 1200px;
  288. perspective: 1200px
  289. }
  290. .swiper-container-3d .swiper-cube-shadow,
  291. .swiper-container-3d .swiper-slide,
  292. .swiper-container-3d .swiper-slide-shadow-bottom,
  293. .swiper-container-3d .swiper-slide-shadow-left,
  294. .swiper-container-3d .swiper-slide-shadow-right,
  295. .swiper-container-3d .swiper-slide-shadow-top,
  296. .swiper-container-3d .swiper-wrapper {
  297. -webkit-transform-style: preserve-3d;
  298. -moz-transform-style: preserve-3d;
  299. -ms-transform-style: preserve-3d;
  300. transform-style: preserve-3d
  301. }
  302. .swiper-container-3d .swiper-slide-shadow-bottom,
  303. .swiper-container-3d .swiper-slide-shadow-left,
  304. .swiper-container-3d .swiper-slide-shadow-right,
  305. .swiper-container-3d .swiper-slide-shadow-top {
  306. position: absolute;
  307. left: 0;
  308. top: 0;
  309. width: 100%;
  310. height: 100%;
  311. pointer-events: none;
  312. z-index: 10
  313. }
  314. .swiper-container-3d .swiper-slide-shadow-left {
  315. background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  316. background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  317. background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  318. background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  319. background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
  320. }
  321. .swiper-container-3d .swiper-slide-shadow-right {
  322. background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  323. background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  324. background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  325. background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  326. background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
  327. }
  328. .swiper-container-3d .swiper-slide-shadow-top {
  329. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  330. background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  331. background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  332. background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  333. background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
  334. }
  335. .swiper-container-3d .swiper-slide-shadow-bottom {
  336. background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
  337. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  338. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  339. background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  340. background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
  341. }
  342. .swiper-container-coverflow .swiper-wrapper,
  343. .swiper-container-flip .swiper-wrapper {
  344. -ms-perspective: 1200px
  345. }
  346. .swiper-container-cube,
  347. .swiper-container-flip {
  348. overflow: visible
  349. }
  350. .swiper-container-cube .swiper-slide,
  351. .swiper-container-flip .swiper-slide {
  352. pointer-events: none;
  353. -webkit-backface-visibility: hidden;
  354. -moz-backface-visibility: hidden;
  355. -ms-backface-visibility: hidden;
  356. backface-visibility: hidden;
  357. z-index: 1
  358. }
  359. .swiper-container-cube .swiper-slide .swiper-slide,
  360. .swiper-container-flip .swiper-slide .swiper-slide {
  361. pointer-events: none
  362. }
  363. .swiper-container-cube .swiper-slide-active,
  364. .swiper-container-cube .swiper-slide-active .swiper-slide-active,
  365. .swiper-container-flip .swiper-slide-active,
  366. .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  367. pointer-events: auto
  368. }
  369. .swiper-container-cube .swiper-slide-shadow-bottom,
  370. .swiper-container-cube .swiper-slide-shadow-left,
  371. .swiper-container-cube .swiper-slide-shadow-right,
  372. .swiper-container-cube .swiper-slide-shadow-top,
  373. .swiper-container-flip .swiper-slide-shadow-bottom,
  374. .swiper-container-flip .swiper-slide-shadow-left,
  375. .swiper-container-flip .swiper-slide-shadow-right,
  376. .swiper-container-flip .swiper-slide-shadow-top {
  377. z-index: 0;
  378. -webkit-backface-visibility: hidden;
  379. -moz-backface-visibility: hidden;
  380. -ms-backface-visibility: hidden;
  381. backface-visibility: hidden
  382. }
  383. .swiper-container-cube .swiper-slide {
  384. visibility: hidden;
  385. -webkit-transform-origin: 0 0;
  386. -moz-transform-origin: 0 0;
  387. -ms-transform-origin: 0 0;
  388. transform-origin: 0 0;
  389. width: 100%;
  390. height: 100%
  391. }
  392. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  393. -webkit-transform-origin: 100% 0;
  394. -moz-transform-origin: 100% 0;
  395. -ms-transform-origin: 100% 0;
  396. transform-origin: 100% 0
  397. }
  398. .swiper-container-cube .swiper-slide-active,
  399. .swiper-container-cube .swiper-slide-next,
  400. .swiper-container-cube .swiper-slide-next+.swiper-slide,
  401. .swiper-container-cube .swiper-slide-prev {
  402. pointer-events: auto;
  403. visibility: visible
  404. }
  405. .swiper-container-cube .swiper-cube-shadow {
  406. position: absolute;
  407. left: 0;
  408. bottom: 0;
  409. width: 100%;
  410. height: 100%;
  411. background: #000;
  412. opacity: .6;
  413. -webkit-filter: blur(50px);
  414. filter: blur(50px);
  415. z-index: 0
  416. }
  417. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  418. -webkit-transition-timing-function: ease-out;
  419. -moz-transition-timing-function: ease-out;
  420. -ms-transition-timing-function: ease-out;
  421. -o-transition-timing-function: ease-out;
  422. transition-timing-function: ease-out
  423. }
  424. .swiper-container-fade .swiper-slide {
  425. pointer-events: none;
  426. -webkit-transition-property: opacity;
  427. -moz-transition-property: opacity;
  428. -o-transition-property: opacity;
  429. transition-property: opacity
  430. }
  431. .swiper-container-fade .swiper-slide .swiper-slide {
  432. pointer-events: none
  433. }
  434. .swiper-container-fade .swiper-slide-active,
  435. .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  436. pointer-events: auto
  437. }
  438. .swiper-zoom-container {
  439. width: 100%;
  440. height: 100%;
  441. display: -webkit-box;
  442. display: -moz-box;
  443. display: -ms-flexbox;
  444. display: -webkit-flex;
  445. display: flex;
  446. -webkit-box-pack: center;
  447. -moz-box-pack: center;
  448. -ms-flex-pack: center;
  449. -webkit-justify-content: center;
  450. justify-content: center;
  451. -webkit-box-align: center;
  452. -moz-box-align: center;
  453. -ms-flex-align: center;
  454. -webkit-align-items: center;
  455. align-items: center;
  456. text-align: center
  457. }
  458. .swiper-zoom-container>canvas,
  459. .swiper-zoom-container>img,
  460. .swiper-zoom-container>svg {
  461. max-width: 100%;
  462. max-height: 100%;
  463. object-fit: contain
  464. }
  465. .swiper-scrollbar {
  466. border-radius: 10px;
  467. position: relative;
  468. -ms-touch-action: none;
  469. background: rgba(0, 0, 0, .1)
  470. }
  471. .swiper-container-horizontal>.swiper-scrollbar {
  472. position: absolute;
  473. left: 1%;
  474. bottom: 3px;
  475. z-index: 50;
  476. height: 5px;
  477. width: 98%
  478. }
  479. .swiper-container-vertical>.swiper-scrollbar {
  480. position: absolute;
  481. right: 3px;
  482. top: 1%;
  483. z-index: 50;
  484. width: 5px;
  485. height: 98%
  486. }
  487. .swiper-scrollbar-drag {
  488. height: 100%;
  489. width: 100%;
  490. position: relative;
  491. background: rgba(0, 0, 0, .5);
  492. border-radius: 10px;
  493. left: 0;
  494. top: 0
  495. }
  496. .swiper-scrollbar-cursor-drag {
  497. cursor: move
  498. }
  499. .swiper-lazy-preloader {
  500. width: 42px;
  501. height: 42px;
  502. position: absolute;
  503. left: 50%;
  504. top: 50%;
  505. margin-left: -21px;
  506. margin-top: -21px;
  507. z-index: 10;
  508. -webkit-transform-origin: 50%;
  509. -moz-transform-origin: 50%;
  510. transform-origin: 50%;
  511. -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  512. -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  513. animation: swiper-preloader-spin 1s steps(12, end) infinite
  514. }
  515. .swiper-lazy-preloader:after {
  516. display: block;
  517. content: "";
  518. width: 100%;
  519. height: 100%;
  520. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  521. background-position: 50%;
  522. -webkit-background-size: 100%;
  523. background-size: 100%;
  524. background-repeat: no-repeat
  525. }
  526. .swiper-lazy-preloader-white:after {
  527. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
  528. }
  529. @-webkit-keyframes swiper-preloader-spin {
  530. 100% {
  531. -webkit-transform: rotate(360deg)
  532. }
  533. }
  534. @keyframes swiper-preloader-spin {
  535. 100% {
  536. transform: rotate(360deg)
  537. }
  538. }