swiper-4.2.0.min.css 17 KB

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