style.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824
  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,.swiper-wrapper {
  52. -webkit-transform: translate3d(0,0,0);
  53. -moz-transform: translate3d(0,0,0);
  54. -o-transform: translate(0,0);
  55. -ms-transform: translate3d(0,0,0);
  56. transform: translate3d(0,0,0)
  57. }
  58. .swiper-container-multirow>.swiper-wrapper {
  59. -webkit-box-lines: multiple;
  60. -moz-box-lines: multiple;
  61. -ms-flex-wrap: wrap;
  62. -webkit-flex-wrap: wrap;
  63. flex-wrap: wrap
  64. }
  65. .swiper-container-free-mode>.swiper-wrapper {
  66. -webkit-transition-timing-function: ease-out;
  67. -moz-transition-timing-function: ease-out;
  68. -ms-transition-timing-function: ease-out;
  69. -o-transition-timing-function: ease-out;
  70. transition-timing-function: ease-out;
  71. margin: 0 auto
  72. }
  73. .swiper-slide {
  74. -webkit-flex-shrink: 0;
  75. -ms-flex: 0 0 auto;
  76. flex-shrink: 0;
  77. width: 100%;
  78. height: 100%;
  79. position: relative;
  80. }
  81. .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide {
  82. height: auto
  83. }
  84. .swiper-container-autoheight .swiper-wrapper {
  85. -webkit-box-align: start;
  86. -ms-flex-align: start;
  87. -webkit-align-items: flex-start;
  88. align-items: flex-start;
  89. -webkit-transition-property: -webkit-transform,height;
  90. -moz-transition-property: -moz-transform;
  91. -o-transition-property: -o-transform;
  92. -ms-transition-property: -ms-transform;
  93. transition-property: transform,height
  94. }
  95. .swiper-container .swiper-notification {
  96. position: absolute;
  97. left: 0;
  98. top: 0;
  99. pointer-events: none;
  100. opacity: 0;
  101. z-index: -1000
  102. }
  103. .swiper-wp8-horizontal {
  104. -ms-touch-action: pan-y;
  105. touch-action: pan-y
  106. }
  107. .swiper-wp8-vertical {
  108. -ms-touch-action: pan-x;
  109. touch-action: pan-x
  110. }
  111. .swiper-button-next,.swiper-button-prev {
  112. position: absolute;
  113. top: 50%;
  114. width: 27px;
  115. height: 44px;
  116. margin-top: -22px;
  117. z-index: 10;
  118. cursor: pointer;
  119. -moz-background-size: 27px 44px;
  120. -webkit-background-size: 27px 44px;
  121. background-size: 27px 44px;
  122. background-position: center;
  123. background-repeat: no-repeat
  124. }
  125. .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
  126. opacity: .35;
  127. cursor: auto;
  128. pointer-events: none
  129. }
  130. .swiper-button-prev,.swiper-container-rtl .swiper-button-next {
  131. 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");
  132. left: 90px;
  133. right: auto;
  134. }
  135. .swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black {
  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'%23000000'%2F%3E%3C%2Fsvg%3E")
  137. }
  138. .swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white {
  139. 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")
  140. }
  141. .swiper-button-next,.swiper-container-rtl .swiper-button-prev {
  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'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  143. right: 90px;
  144. left: auto;
  145. }
  146. .swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  147. 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")
  148. }
  149. .swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  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'%23ffffff'%2F%3E%3C%2Fsvg%3E")
  151. }
  152. .swiper-pagination {
  153. position: absolute;
  154. text-align: center;
  155. -webkit-transition: .3s;
  156. -moz-transition: .3s;
  157. -o-transition: .3s;
  158. transition: .3s;
  159. -webkit-transform: translate3d(0,0,0);
  160. -ms-transform: translate3d(0,0,0);
  161. -o-transform: translate3d(0,0,0);
  162. transform: translate3d(0,0,0);
  163. z-index: 10
  164. }
  165. .swiper-pagination.swiper-pagination-hidden {
  166. opacity: 0
  167. }
  168. .swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction {
  169. bottom: 10px;
  170. left: 0;
  171. width: 100%
  172. }
  173. .swiper-pagination-bullet {
  174. width: 8px;
  175. height: 8px;
  176. display: inline-block;
  177. border-radius: 100%;
  178. background: #000;
  179. opacity: .2
  180. }
  181. button.swiper-pagination-bullet {
  182. border: none;
  183. margin: 0;
  184. padding: 0;
  185. box-shadow: none;
  186. -moz-appearance: none;
  187. -ms-appearance: none;
  188. -webkit-appearance: none;
  189. appearance: none
  190. }
  191. .swiper-pagination-clickable .swiper-pagination-bullet {
  192. cursor: pointer
  193. }
  194. .swiper-pagination-white .swiper-pagination-bullet {
  195. background: #fff
  196. }
  197. .swiper-pagination-bullet-active {
  198. opacity: 1;
  199. background: #007aff
  200. }
  201. .swiper-pagination-white .swiper-pagination-bullet-active {
  202. background: #fff
  203. }
  204. .swiper-pagination-black .swiper-pagination-bullet-active {
  205. background: #000
  206. }
  207. .swiper-container-vertical>.swiper-pagination-bullets {
  208. right: 10px;
  209. top: 50%;
  210. -webkit-transform: translate3d(0,-50%,0);
  211. -moz-transform: translate3d(0,-50%,0);
  212. -o-transform: translate(0,-50%);
  213. -ms-transform: translate3d(0,-50%,0);
  214. transform: translate3d(0,-50%,0)
  215. }
  216. .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  217. margin: 5px 0;
  218. display: block
  219. }
  220. .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  221. margin: 0 5px
  222. }
  223. .swiper-pagination-progress {
  224. background: rgba(0,0,0,.25);
  225. position: absolute
  226. }
  227. .swiper-pagination-progress .swiper-pagination-progressbar {
  228. background: #007aff;
  229. position: absolute;
  230. left: 0;
  231. top: 0;
  232. width: 100%;
  233. height: 100%;
  234. -webkit-transform: scale(0);
  235. -ms-transform: scale(0);
  236. -o-transform: scale(0);
  237. transform: scale(0);
  238. -webkit-transform-origin: left top;
  239. -moz-transform-origin: left top;
  240. -ms-transform-origin: left top;
  241. -o-transform-origin: left top;
  242. transform-origin: left top
  243. }
  244. .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  245. -webkit-transform-origin: right top;
  246. -moz-transform-origin: right top;
  247. -ms-transform-origin: right top;
  248. -o-transform-origin: right top;
  249. transform-origin: right top
  250. }
  251. .swiper-container-horizontal>.swiper-pagination-progress {
  252. width: 100%;
  253. height: 4px;
  254. left: 0;
  255. top: 0
  256. }
  257. .swiper-container-vertical>.swiper-pagination-progress {
  258. width: 4px;
  259. height: 100%;
  260. left: 0;
  261. top: 0
  262. }
  263. .swiper-pagination-progress.swiper-pagination-white {
  264. background: rgba(255,255,255,.5)
  265. }
  266. .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  267. background: #fff
  268. }
  269. .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  270. background: #000
  271. }
  272. .swiper-container-3d {
  273. -webkit-perspective: 1200px;
  274. -moz-perspective: 1200px;
  275. -o-perspective: 1200px;
  276. perspective: 1200px
  277. }
  278. .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 {
  279. -webkit-transform-style: preserve-3d;
  280. -moz-transform-style: preserve-3d;
  281. -ms-transform-style: preserve-3d;
  282. transform-style: preserve-3d
  283. }
  284. .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 {
  285. position: absolute;
  286. left: 0;
  287. top: 0;
  288. width: 100%;
  289. height: 100%;
  290. pointer-events: none;
  291. z-index: 10
  292. }
  293. .swiper-container-3d .swiper-slide-shadow-left {
  294. background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
  295. background-image: -webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
  296. background-image: -moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
  297. background-image: -o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
  298. background-image: linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
  299. }
  300. .swiper-container-3d .swiper-slide-shadow-right {
  301. background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
  302. background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
  303. background-image: -moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
  304. background-image: -o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
  305. background-image: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
  306. }
  307. .swiper-container-3d .swiper-slide-shadow-top {
  308. background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
  309. background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
  310. background-image: -moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
  311. background-image: -o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
  312. background-image: linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
  313. }
  314. .swiper-container-3d .swiper-slide-shadow-bottom {
  315. background-image: -webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
  316. background-image: -webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
  317. background-image: -moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
  318. background-image: -o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
  319. background-image: linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
  320. }
  321. .swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper {
  322. -ms-perspective: 1200px
  323. }
  324. .swiper-container-cube,.swiper-container-flip {
  325. overflow: visible
  326. }
  327. .swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide {
  328. pointer-events: none;
  329. -webkit-backface-visibility: hidden;
  330. -moz-backface-visibility: hidden;
  331. -ms-backface-visibility: hidden;
  332. backface-visibility: hidden;
  333. z-index: 1
  334. }
  335. .swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide {
  336. pointer-events: none
  337. }
  338. .swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  339. pointer-events: auto
  340. }
  341. .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,.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 {
  342. z-index: 0;
  343. -webkit-backface-visibility: hidden;
  344. -moz-backface-visibility: hidden;
  345. -ms-backface-visibility: hidden;
  346. backface-visibility: hidden
  347. }
  348. .swiper-container-cube .swiper-slide {
  349. visibility: hidden;
  350. -webkit-transform-origin: 0 0;
  351. -moz-transform-origin: 0 0;
  352. -ms-transform-origin: 0 0;
  353. transform-origin: 0 0;
  354. width: 100%;
  355. height: 100%
  356. }
  357. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  358. -webkit-transform-origin: 100% 0;
  359. -moz-transform-origin: 100% 0;
  360. -ms-transform-origin: 100% 0;
  361. transform-origin: 100% 0
  362. }
  363. .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 {
  364. pointer-events: auto;
  365. visibility: visible
  366. }
  367. .swiper-container-cube .swiper-cube-shadow {
  368. position: absolute;
  369. left: 0;
  370. bottom: 0;
  371. width: 100%;
  372. height: 100%;
  373. background: #000;
  374. opacity: .6;
  375. -webkit-filter: blur(50px);
  376. filter: blur(50px);
  377. z-index: 0
  378. }
  379. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  380. -webkit-transition-timing-function: ease-out;
  381. -moz-transition-timing-function: ease-out;
  382. -ms-transition-timing-function: ease-out;
  383. -o-transition-timing-function: ease-out;
  384. transition-timing-function: ease-out
  385. }
  386. .swiper-container-fade .swiper-slide {
  387. pointer-events: none;
  388. -webkit-transition-property: opacity;
  389. -moz-transition-property: opacity;
  390. -o-transition-property: opacity;
  391. transition-property: opacity
  392. }
  393. .swiper-container-fade .swiper-slide .swiper-slide {
  394. pointer-events: none
  395. }
  396. .swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  397. pointer-events: auto
  398. }
  399. .swiper-zoom-container {
  400. width: 100%;
  401. height: 100%;
  402. display: -webkit-box;
  403. display: -moz-box;
  404. display: -ms-flexbox;
  405. display: -webkit-flex;
  406. display: flex;
  407. -webkit-box-pack: center;
  408. -moz-box-pack: center;
  409. -ms-flex-pack: center;
  410. -webkit-justify-content: center;
  411. justify-content: center;
  412. -webkit-box-align: center;
  413. -moz-box-align: center;
  414. -ms-flex-align: center;
  415. -webkit-align-items: center;
  416. align-items: center;
  417. text-align: center
  418. }
  419. .swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg {
  420. max-width: 100%;
  421. max-height: 100%;
  422. object-fit: contain
  423. }
  424. .swiper-scrollbar {
  425. border-radius: 10px;
  426. position: relative;
  427. -ms-touch-action: none;
  428. background: rgba(0,0,0,.1)
  429. }
  430. .swiper-container-horizontal>.swiper-scrollbar {
  431. position: absolute;
  432. left: 1%;
  433. bottom: 3px;
  434. z-index: 50;
  435. height: 5px;
  436. width: 98%
  437. }
  438. .swiper-container-vertical>.swiper-scrollbar {
  439. position: absolute;
  440. right: 3px;
  441. top: 1%;
  442. z-index: 50;
  443. width: 5px;
  444. height: 98%
  445. }
  446. .swiper-scrollbar-drag {
  447. height: 100%;
  448. width: 100%;
  449. position: relative;
  450. background: rgba(0,0,0,.5);
  451. border-radius: 10px;
  452. left: 0;
  453. top: 0
  454. }
  455. .swiper-scrollbar-cursor-drag {
  456. cursor: move
  457. }
  458. .swiper-lazy-preloader {
  459. width: 42px;
  460. height: 42px;
  461. position: absolute;
  462. left: 50%;
  463. top: 50%;
  464. margin-left: -21px;
  465. margin-top: -21px;
  466. z-index: 10;
  467. -webkit-transform-origin: 50%;
  468. -moz-transform-origin: 50%;
  469. transform-origin: 50%;
  470. -webkit-animation: swiper-preloader-spin 1s steps(12,end) infinite;
  471. -moz-animation: swiper-preloader-spin 1s steps(12,end) infinite;
  472. animation: swiper-preloader-spin 1s steps(12,end) infinite
  473. }
  474. .swiper-lazy-preloader:after {
  475. display: block;
  476. content: "";
  477. width: 100%;
  478. height: 100%;
  479. 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");
  480. background-position: 50%;
  481. -webkit-background-size: 100%;
  482. background-size: 100%;
  483. background-repeat: no-repeat
  484. }
  485. .swiper-lazy-preloader-white:after {
  486. 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")
  487. }
  488. body {
  489. /* background: #eee; */
  490. font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  491. font-size: 14px;
  492. color: #000;
  493. margin: 0;
  494. padding: 0;
  495. }
  496. @-webkit-keyframes swiper-preloader-spin {
  497. 100% {
  498. -webkit-transform: rotate(360deg)
  499. }
  500. }
  501. @keyframes swiper-preloader-spin {
  502. 100% {
  503. transform: rotate(360deg)
  504. }
  505. }
  506. .layer-mask {
  507. width: 100%;
  508. height: 100%;
  509. opacity: 0.7;
  510. transition: all 0.5s;
  511. background-color: #3e3e3e;
  512. position: absolute;
  513. left: 0;
  514. top: 0;
  515. right: 0;
  516. }
  517. .swiper-slide-active .layer-mask {
  518. display: none;
  519. }
  520. .pc-banner {
  521. width: 100%;
  522. float: left;
  523. }
  524. @media screen and (max-width: 668px) {
  525. .pc-banner {
  526. background-size: auto 100%;
  527. }
  528. }
  529. .swiper-container {
  530. width: 100%;
  531. margin: 35px 0;
  532. }
  533. @media screen and (max-width: 668px) {
  534. .swiper-container {
  535. margin: 20px 0 15px;
  536. }
  537. }
  538. .swiper-slide {
  539. -webkit-transition: transform 1.0s;
  540. -moz-transition: transform 1.0s;
  541. -ms-transition: transform 1.0s;
  542. -o-transition: transform 1.0s;
  543. -webkit-transform: scale(0.85);
  544. /* margin: 1px; */
  545. transform: scale(0.85);
  546. margin-top: 70px;
  547. margin-bottom: 70px;
  548. }
  549. @media screen and (max-width: 668px) {
  550. .swiper-slide {
  551. -webkit-transform: scale(0.97);
  552. transform: scale(0.97);
  553. }
  554. }
  555. .swiper-slide-active,.swiper-slide-duplicate-active {
  556. -webkit-transform: scale(1.15);
  557. transform: scale(1.15);
  558. z-index: 1002;
  559. }
  560. @media screen and (max-width: 668px) {
  561. .swiper-slide-active,.swiper-slide-duplicate-active {
  562. -webkit-transform: scale(0.97);
  563. transform: scale(0.97);
  564. }
  565. }
  566. .none-effect {
  567. -webkit-transition: none;
  568. -moz-transition: none;
  569. -ms-transition: none;
  570. -o-transition: none;
  571. }
  572. .swiper-slide a {
  573. background: #fff;
  574. display: block;
  575. border-radius: 2px;
  576. }
  577. @media screen and (min-width: 668px) {
  578. .swiper-slide a:after {
  579. position: absolute;
  580. top: 0px;
  581. left: 0;
  582. display: block;
  583. box-sizing: border-box;
  584. content: "";
  585. width: 100%;
  586. height: 100%;
  587. border-radius: 2px;
  588. box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  589. box-shadow: 0 4px 20px 0 rgba(0,0,0,0.3);
  590. }
  591. .swiper-slide-active a:before {
  592. position: absolute;
  593. top: 410px;
  594. left: 0;
  595. display: block;
  596. box-sizing: border-box;
  597. content: "";
  598. width: 100%;
  599. height: 100%;
  600. border-radius: 2px;
  601. /* box-shadow: 0 2px 6px rgba(0,0,0,0.3); */
  602. /* box-shadow: 0 4px 20px 0 rgba(0,0,0,0.3); */
  603. z-index: 10002;
  604. }
  605. }
  606. .swiper-slide-active a:after {
  607. background: none;
  608. }
  609. @media screen and (max-width: 668px) {
  610. .swiper-slide a {
  611. padding: 5px;
  612. border-radius: 2px;
  613. }
  614. }
  615. .swiper-slide img {
  616. width: 100%;
  617. border-radius: 5px;
  618. display: block;
  619. height: 100%;
  620. border: none;
  621. }
  622. @media screen and (max-width: 668px) {
  623. .swiper-slide img {
  624. border-radius: 2px;
  625. }
  626. }
  627. .swiper-pagination {
  628. position: relative;
  629. margin-bottom: 30px;
  630. }
  631. .swiper-pagination-bullet {
  632. background: #00a0e9;
  633. margin-left: 4px;
  634. margin-right: 4px;
  635. width: 17px;
  636. height: 17px;
  637. opacity: 1;
  638. margin-bottom: 4px;
  639. }
  640. .swiper-pagination-bullet-active {
  641. width: 13px;
  642. height: 13px;
  643. background: #FFF;
  644. margin-bottom: 0;
  645. }
  646. @media screen and (max-width: 668px) {
  647. .swiper-pagination {
  648. position: relative;
  649. margin-bottom: 20px;
  650. }
  651. .swiper-pagination-bullet {
  652. background: #00a0e9;
  653. margin-left: 2px;
  654. margin-right: 2px;
  655. width: 8px;
  656. height: 8px;
  657. margin-bottom: 2px;
  658. }
  659. .swiper-pagination-bullet-active {
  660. width: 6px;
  661. height: 6px;
  662. background: #FFF;
  663. border: 3px solid #00a0e9;
  664. margin-bottom: 0;
  665. }
  666. }
  667. .button {
  668. width: 100%;
  669. margin: 0 auto;
  670. top: -290px;
  671. position: relative;
  672. z-index: 1002;
  673. }
  674. @media screen and (max-width: 1105px) {
  675. .button {
  676. width: 100%;
  677. top: -240px;
  678. z-index: 1002;
  679. position: relative;
  680. }
  681. }
  682. @media screen and (max-width: 800px) {
  683. .button {
  684. width: 100%;
  685. top: -200px;
  686. z-index: 1002;
  687. position: relative;
  688. }
  689. }
  690. .button div:hover {
  691. background-color: #333;
  692. opacity: 0.8;
  693. cursor: pointer;
  694. }
  695. .swiper-button-prev {
  696. width: 70px;
  697. height: 70px;
  698. border-radius: 50%;
  699. background: 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%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") #000000 center 50%/50% 50% no-repeat;
  700. opacity: 0.5;
  701. background-size: 15px;
  702. cursor: pointer;
  703. }
  704. .swiper-button-next {
  705. width: 70px;
  706. height: 70px;
  707. border-radius: 50%;
  708. background: 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%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") #000000 center 50%/50% 50% no-repeat;
  709. opacity: 0.5;
  710. background-size: 15px;
  711. cursor: pointer;
  712. }
  713. @media screen and (max-width: 668px) {
  714. .button div {
  715. width: 28px;
  716. height: 28px;
  717. }
  718. }