nizongfeng
/
XMWX
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
29 MiB
 
 
 
 
 
Tree: f76002ae80
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'f76002ae80'
${ noResults }
XMWX/weixin2/css/swiper.min.css

583 lines
18 KiB
Raw Blame History 

  1. /**

  2.  * Swiper 3.3.1

  3.  * Most modern mobile touch slider and framework with hardware accelerated transitions

  4.  * 

  5.  * http://www.idangero.us/swiper/

  6.  * 

  7.  * Copyright 2016, Vladimir Kharlampidi

  8.  * The iDangero.us

  9.  * http://www.idangero.us/

  10.  * 

  11.  * Licensed under MIT

  12.  * 

  13.  * Released on: February 7, 2016

  14.  */

  15. 

  16. .swiper-container {

  17. 	margin: 0 auto;

  18. 	position: relative;

  19. 	overflow: hidden;

  20. 	z-index: 1

  21. }

  22. 

  23. .swiper-container-no-flexbox .swiper-slide {

  24. 	float: left

  25. }

  26. 

  27. .swiper-container-vertical>.swiper-wrapper {

  28. 	-webkit-box-orient: vertical;

  29. 	-moz-box-orient: vertical;

  30. 	-ms-flex-direction: column;

  31. 	-webkit-flex-direction: column;

  32. 	flex-direction: column

  33. }

  34. 

  35. .swiper-wrapper {

  36. 	position: relative;

  37. 	width: 100%;

  38. 	height: 100%;

  39. 	z-index: 1;

  40. 	display: -webkit-box;

  41. 	display: -moz-box;

  42. 	display: -ms-flexbox;

  43. 	display: -webkit-flex;

  44. 	display: flex;

  45. 	-webkit-transition-property: -webkit-transform;

  46. 	-moz-transition-property: -moz-transform;

  47. 	-o-transition-property: -o-transform;

  48. 	-ms-transition-property: -ms-transform;

  49. 	transition-property: transform;

  50. 	-webkit-box-sizing: content-box;

  51. 	-moz-box-sizing: content-box;

  52. 	box-sizing: content-box

  53. }

  54. 

  55. .swiper-container-android .swiper-slide,

  56. .swiper-wrapper {

  57. 	-webkit-transform: translate3d(0, 0, 0);

  58. 	-moz-transform: translate3d(0, 0, 0);

  59. 	-o-transform: translate(0, 0);

  60. 	-ms-transform: translate3d(0, 0, 0);

  61. 	transform: translate3d(0, 0, 0)

  62. }

  63. 

  64. .swiper-container-multirow>.swiper-wrapper {

  65. 	-webkit-box-lines: multiple;

  66. 	-moz-box-lines: multiple;

  67. 	-ms-flex-wrap: wrap;

  68. 	-webkit-flex-wrap: wrap;

  69. 	flex-wrap: wrap

  70. }

  71. 

  72. .swiper-container-free-mode>.swiper-wrapper {

  73. 	-webkit-transition-timing-function: ease-out;

  74. 	-moz-transition-timing-function: ease-out;

  75. 	-ms-transition-timing-function: ease-out;

  76. 	-o-transition-timing-function: ease-out;

  77. 	transition-timing-function: ease-out;

  78. 	margin: 0 auto

  79. }

  80. 

  81. .swiper-slide {

  82. 	-webkit-flex-shrink: 0;

  83. 	-ms-flex: 0 0 auto;

  84. 	flex-shrink: 0;

  85. 	width: 100%;

  86. 	height: 100%;

  87. 	position: relative

  88. }

  89. 

  90. .swiper-container-autoheight,

  91. .swiper-container-autoheight .swiper-slide {

  92. 	height: auto

  93. }

  94. 

  95. .swiper-container-autoheight .swiper-wrapper {

  96. 	-webkit-box-align: start;

  97. 	-ms-flex-align: start;

  98. 	-webkit-align-items: flex-start;

  99. 	align-items: flex-start;

  100. 	-webkit-transition-property: -webkit-transform, height;

  101. 	-moz-transition-property: -moz-transform;

  102. 	-o-transition-property: -o-transform;

  103. 	-ms-transition-property: -ms-transform;

  104. 	transition-property: transform, height

  105. }

  106. 

  107. .swiper-container .swiper-notification {

  108. 	position: absolute;

  109. 	left: 0;

  110. 	top: 0;

  111. 	pointer-events: none;

  112. 	opacity: 0;

  113. 	z-index: -1000

  114. }

  115. 

  116. .swiper-wp8-horizontal {

  117. 	-ms-touch-action: pan-y;

  118. 	touch-action: pan-y

  119. }

  120. 

  121. .swiper-wp8-vertical {

  122. 	-ms-touch-action: pan-x;

  123. 	touch-action: pan-x

  124. }

  125. 

  126. .swiper-button-next,

  127. .swiper-button-prev {

  128. 	position: absolute;

  129. 	top: 50%;

  130. 	width: 27px;

  131. 	height: 44px;

  132. 	margin-top: -22px;

  133. 	z-index: 10;

  134. 	cursor: pointer;

  135. 	-moz-background-size: 27px 44px;

  136. 	-webkit-background-size: 27px 44px;

  137. 	background-size: 27px 44px;

  138. 	background-position: center;

  139. 	background-repeat: no-repeat

  140. }

  141. 

  142. .swiper-button-next.swiper-button-disabled,

  143. .swiper-button-prev.swiper-button-disabled {

  144. 	opacity: .35;

  145. 	cursor: auto;

  146. 	pointer-events: none

  147. }

  148. 

  149. .swiper-button-prev,

  150. .swiper-container-rtl .swiper-button-next {

  151. 	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");

  152. 	left: 10px;

  153. 	right: auto

  154. }

  155. 

  156. .swiper-button-prev.swiper-button-black,

  157. .swiper-container-rtl .swiper-button-next.swiper-button-black {

  158. 	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")

  159. }

  160. 

  161. .swiper-button-prev.swiper-button-white,

  162. .swiper-container-rtl .swiper-button-next.swiper-button-white {

  163. 	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")

  164. }

  165. 

  166. .swiper-button-next,

  167. .swiper-container-rtl .swiper-button-prev {

  168. 	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");

  169. 	right: 10px;

  170. 	left: auto

  171. }

  172. 

  173. .swiper-button-next.swiper-button-black,

  174. .swiper-container-rtl .swiper-button-prev.swiper-button-black {

  175. 	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")

  176. }

  177. 

  178. .swiper-button-next.swiper-button-white,

  179. .swiper-container-rtl .swiper-button-prev.swiper-button-white {

  180. 	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")

  181. }

  182. 

  183. .swiper-pagination {

  184. 	position: absolute;

  185. 	text-align: center;

  186. 	-webkit-transition: .3s;

  187. 	-moz-transition: .3s;

  188. 	-o-transition: .3s;

  189. 	transition: .3s;

  190. 	-webkit-transform: translate3d(0, 0, 0);

  191. 	-ms-transform: translate3d(0, 0, 0);

  192. 	-o-transform: translate3d(0, 0, 0);

  193. 	transform: translate3d(0, 0, 0);

  194. 	z-index: 10

  195. }

  196. 

  197. .swiper-pagination.swiper-pagination-hidden {

  198. 	opacity: 0

  199. }

  200. 

  201. .swiper-container-horizontal>.swiper-pagination-bullets,

  202. .swiper-pagination-custom,

  203. .swiper-pagination-fraction {

  204. 	bottom: 10px;

  205. 	left: 0;

  206. 	width: 100%

  207. }

  208. 

  209. .swiper-pagination-bullet {

  210. 	width: 8px;

  211. 	height: 8px;

  212. 	display: inline-block;

  213. 	border-radius: 12px;

  214. 	background: #fff;

  215. }

  216. 

  217. button.swiper-pagination-bullet {

  218. 	border: none;

  219. 	margin: 0;

  220. 	padding: 0;

  221. 	box-shadow: none;

  222. 	-moz-appearance: none;

  223. 	-ms-appearance: none;

  224. 	-webkit-appearance: none;

  225. 	appearance: none

  226. }

  227. 

  228. .swiper-pagination-clickable .swiper-pagination-bullet {

  229. 	cursor: pointer

  230. }

  231. 

  232. .swiper-pagination-white .swiper-pagination-bullet {

  233. 	background: #fff

  234. }

  235. 

  236. .swiper-pagination-bullet-active {

  237. 	opacity: 1;

  238. 	background: #ffffff;

  239. 	width: 18px;

  240. }

  241. 

  242. .swiper-pagination-white .swiper-pagination-bullet-active {

  243. 	background: #fff

  244. }

  245. 

  246. .swiper-pagination-black .swiper-pagination-bullet-active {

  247. 	background: #000

  248. }

  249. 

  250. .swiper-container-vertical>.swiper-pagination-bullets {

  251. 	right: 10px;

  252. 	top: 50%;

  253. 	-webkit-transform: translate3d(0, -50%, 0);

  254. 	-moz-transform: translate3d(0, -50%, 0);

  255. 	-o-transform: translate(0, -50%);

  256. 	-ms-transform: translate3d(0, -50%, 0);

  257. 	transform: translate3d(0, -50%, 0)

  258. }

  259. 

  260. .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {

  261. 	margin: 5px 0;

  262. 	display: block

  263. }

  264. 

  265. .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {

  266. 	margin: 0 5px

  267. }

  268. 

  269. .swiper-pagination-progress {

  270. 	background: rgba(0, 0, 0, .25);

  271. 	position: absolute

  272. }

  273. 

  274. .swiper-pagination-progress .swiper-pagination-progressbar {

  275. 	background: #007aff;

  276. 	position: absolute;

  277. 	left: 0;

  278. 	top: 0;

  279. 	width: 100%;

  280. 	height: 100%;

  281. 	-webkit-transform: scale(0);

  282. 	-ms-transform: scale(0);

  283. 	-o-transform: scale(0);

  284. 	transform: scale(0);

  285. 	-webkit-transform-origin: left top;

  286. 	-moz-transform-origin: left top;

  287. 	-ms-transform-origin: left top;

  288. 	-o-transform-origin: left top;

  289. 	transform-origin: left top

  290. }

  291. 

  292. .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {

  293. 	-webkit-transform-origin: right top;

  294. 	-moz-transform-origin: right top;

  295. 	-ms-transform-origin: right top;

  296. 	-o-transform-origin: right top;

  297. 	transform-origin: right top

  298. }

  299. 

  300. .swiper-container-horizontal>.swiper-pagination-progress {

  301. 	width: 100%;

  302. 	height: 4px;

  303. 	left: 0;

  304. 	top: 0

  305. }

  306. 

  307. .swiper-container-vertical>.swiper-pagination-progress {

  308. 	width: 4px;

  309. 	height: 100%;

  310. 	left: 0;

  311. 	top: 0

  312. }

  313. 

  314. .swiper-pagination-progress.swiper-pagination-white {

  315. 	background: rgba(255, 255, 255, .5)

  316. }

  317. 

  318. .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {

  319. 	background: #fff

  320. }

  321. 

  322. .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {

  323. 	background: #000

  324. }

  325. 

  326. .swiper-container-3d {

  327. 	-webkit-perspective: 1200px;

  328. 	-moz-perspective: 1200px;

  329. 	-o-perspective: 1200px;

  330. 	perspective: 1200px

  331. }

  332. 

  333. .swiper-container-3d .swiper-cube-shadow,

  334. .swiper-container-3d .swiper-slide,

  335. .swiper-container-3d .swiper-slide-shadow-bottom,

  336. .swiper-container-3d .swiper-slide-shadow-left,

  337. .swiper-container-3d .swiper-slide-shadow-right,

  338. .swiper-container-3d .swiper-slide-shadow-top,

  339. .swiper-container-3d .swiper-wrapper {

  340. 	-webkit-transform-style: preserve-3d;

  341. 	-moz-transform-style: preserve-3d;

  342. 	-ms-transform-style: preserve-3d;

  343. 	transform-style: preserve-3d

  344. }

  345. 

  346. .swiper-container-3d .swiper-slide-shadow-bottom,

  347. .swiper-container-3d .swiper-slide-shadow-left,

  348. .swiper-container-3d .swiper-slide-shadow-right,

  349. .swiper-container-3d .swiper-slide-shadow-top {

  350. 	position: absolute;

  351. 	left: 0;

  352. 	top: 0;

  353. 	width: 100%;

  354. 	height: 100%;

  355. 	pointer-events: none;

  356. 	z-index: 10

  357. }

  358. 

  359. .swiper-container-3d .swiper-slide-shadow-left {

  360. 	background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

  361. 	background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  362. 	background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  363. 	background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  364. 	background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

  365. }

  366. 

  367. .swiper-container-3d .swiper-slide-shadow-right {

  368. 	background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

  369. 	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  370. 	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  371. 	background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  372. 	background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

  373. }

  374. 

  375. .swiper-container-3d .swiper-slide-shadow-top {

  376. 	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

  377. 	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  378. 	background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  379. 	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  380. 	background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

  381. }

  382. 

  383. .swiper-container-3d .swiper-slide-shadow-bottom {

  384. 	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));

  385. 	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  386. 	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  387. 	background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));

  388. 	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))

  389. }

  390. 

  391. .swiper-container-coverflow .swiper-wrapper,

  392. .swiper-container-flip .swiper-wrapper {

  393. 	-ms-perspective: 1200px

  394. }

  395. 

  396. .swiper-container-cube,

  397. .swiper-container-flip {

  398. 	overflow: visible

  399. }

  400. 

  401. .swiper-container-cube .swiper-slide,

  402. .swiper-container-flip .swiper-slide {

  403. 	pointer-events: none;

  404. 	-webkit-backface-visibility: hidden;

  405. 	-moz-backface-visibility: hidden;

  406. 	-ms-backface-visibility: hidden;

  407. 	backface-visibility: hidden;

  408. 	z-index: 1

  409. }

  410. 

  411. .swiper-container-cube .swiper-slide .swiper-slide,

  412. .swiper-container-flip .swiper-slide .swiper-slide {

  413. 	pointer-events: none

  414. }

  415. 

  416. .swiper-container-cube .swiper-slide-active,

  417. .swiper-container-cube .swiper-slide-active .swiper-slide-active,

  418. .swiper-container-flip .swiper-slide-active,

  419. .swiper-container-flip .swiper-slide-active .swiper-slide-active {

  420. 	pointer-events: auto

  421. }

  422. 

  423. .swiper-container-cube .swiper-slide-shadow-bottom,

  424. .swiper-container-cube .swiper-slide-shadow-left,

  425. .swiper-container-cube .swiper-slide-shadow-right,

  426. .swiper-container-cube .swiper-slide-shadow-top,

  427. .swiper-container-flip .swiper-slide-shadow-bottom,

  428. .swiper-container-flip .swiper-slide-shadow-left,

  429. .swiper-container-flip .swiper-slide-shadow-right,

  430. .swiper-container-flip .swiper-slide-shadow-top {

  431. 	z-index: 0;

  432. 	-webkit-backface-visibility: hidden;

  433. 	-moz-backface-visibility: hidden;

  434. 	-ms-backface-visibility: hidden;

  435. 	backface-visibility: hidden

  436. }

  437. 

  438. .swiper-container-cube .swiper-slide {

  439. 	visibility: hidden;

  440. 	-webkit-transform-origin: 0 0;

  441. 	-moz-transform-origin: 0 0;

  442. 	-ms-transform-origin: 0 0;

  443. 	transform-origin: 0 0;

  444. 	width: 100%;

  445. 	height: 100%

  446. }

  447. 

  448. .swiper-container-cube.swiper-container-rtl .swiper-slide {

  449. 	-webkit-transform-origin: 100% 0;

  450. 	-moz-transform-origin: 100% 0;

  451. 	-ms-transform-origin: 100% 0;

  452. 	transform-origin: 100% 0

  453. }

  454. 

  455. .swiper-container-cube .swiper-slide-active,

  456. .swiper-container-cube .swiper-slide-next,

  457. .swiper-container-cube .swiper-slide-next+.swiper-slide,

  458. .swiper-container-cube .swiper-slide-prev {

  459. 	pointer-events: auto;

  460. 	visibility: visible

  461. }

  462. 

  463. .swiper-container-cube .swiper-cube-shadow {

  464. 	position: absolute;

  465. 	left: 0;

  466. 	bottom: 0;

  467. 	width: 100%;

  468. 	height: 100%;

  469. 	background: #000;

  470. 	opacity: .6;

  471. 	-webkit-filter: blur(50px);

  472. 	filter: blur(50px);

  473. 	z-index: 0

  474. }

  475. 

  476. .swiper-container-fade.swiper-container-free-mode .swiper-slide {

  477. 	-webkit-transition-timing-function: ease-out;

  478. 	-moz-transition-timing-function: ease-out;

  479. 	-ms-transition-timing-function: ease-out;

  480. 	-o-transition-timing-function: ease-out;

  481. 	transition-timing-function: ease-out

  482. }

  483. 

  484. .swiper-container-fade .swiper-slide {

  485. 	pointer-events: none;

  486. 	-webkit-transition-property: opacity;

  487. 	-moz-transition-property: opacity;

  488. 	-o-transition-property: opacity;

  489. 	transition-property: opacity

  490. }

  491. 

  492. .swiper-container-fade .swiper-slide .swiper-slide {

  493. 	pointer-events: none

  494. }

  495. 

  496. .swiper-container-fade .swiper-slide-active,

  497. .swiper-container-fade .swiper-slide-active .swiper-slide-active {

  498. 	pointer-events: auto

  499. }

  500. 

  501. .swiper-scrollbar {

  502. 	border-radius: 10px;

  503. 	position: relative;

  504. 	-ms-touch-action: none;

  505. 	background: rgba(0, 0, 0, .1)

  506. }

  507. 

  508. .swiper-container-horizontal>.swiper-scrollbar {

  509. 	position: absolute;

  510. 	left: 1%;

  511. 	bottom: 3px;

  512. 	z-index: 50;

  513. 	height: 5px;

  514. 	width: 98%

  515. }

  516. 

  517. .swiper-container-vertical>.swiper-scrollbar {

  518. 	position: absolute;

  519. 	right: 3px;

  520. 	top: 1%;

  521. 	z-index: 50;

  522. 	width: 5px;

  523. 	height: 98%

  524. }

  525. 

  526. .swiper-scrollbar-drag {

  527. 	height: 100%;

  528. 	width: 100%;

  529. 	position: relative;

  530. 	background: rgba(0, 0, 0, .5);

  531. 	border-radius: 10px;

  532. 	left: 0;

  533. 	top: 0

  534. }

  535. 

  536. .swiper-scrollbar-cursor-drag {

  537. 	cursor: move

  538. }

  539. 

  540. .swiper-lazy-preloader {

  541. 	width: 42px;

  542. 	height: 42px;

  543. 	position: absolute;

  544. 	left: 50%;

  545. 	top: 50%;

  546. 	margin-left: -21px;

  547. 	margin-top: -21px;

  548. 	z-index: 10;

  549. 	-webkit-transform-origin: 50%;

  550. 	-moz-transform-origin: 50%;

  551. 	transform-origin: 50%;

  552. 	-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;

  553. 	-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;

  554. 	animation: swiper-preloader-spin 1s steps(12, end) infinite

  555. }

  556. 

  557. .swiper-lazy-preloader:after {

  558. 	display: block;

  559. 	content: "";

  560. 	width: 100%;

  561. 	height: 100%;

  562. 	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");

  563. 	background-position: 50%;

  564. 	-webkit-background-size: 100%;

  565. 	background-size: 100%;

  566. 	background-repeat: no-repeat

  567. }

  568. 

  569. .swiper-lazy-preloader-white:after {

  570. 	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")

  571. }

  572. 

  573. @-webkit-keyframes swiper-preloader-spin {

  574. 	100% {

  575. 		-webkit-transform: rotate(360deg)

  576. 	}

  577. }

  578. 

  579. @keyframes swiper-preloader-spin {

  580. 	100% {

  581. 		transform: rotate(360deg)

  582. 	}

  583. }