yuhaiTupian.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. max-width:100%;
  5. margin:0 auto;
  6. }
  7. /* line 8, ../sass/inc/_base.scss */
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .icon-right-open-big:before { content: "\e766"; } /* '\e766' */
  12. .o-slider-header-mobile{ height: 100%; width: 100%; text-align: center; }
  13. /* line 9, ../sass/inc/_base.scss */
  14. a {
  15. color: #fff;
  16. font-size: 14px;
  17. letter-spacing: 0.125em;
  18. text-decoration: none;
  19. text-transform: uppercase;
  20. }
  21. /* line 16, ../sass/inc/_base.scss */
  22. h1 {
  23. text-transform: uppercase;
  24. margin: 0;
  25. padding: 0;
  26. font-size: 2.5rem;
  27. }
  28. /* line 22, ../sass/inc/_base.scss */
  29. .pre {
  30. display: inline-block;
  31. padding: 20px;
  32. background: #f1f1f1;
  33. box-shadow: 3px 3px 0 1px rgba(0, 0, 0, 0.1);
  34. width: 100%;
  35. }
  36. @-webkit-keyframes ball-scale-multiple {
  37. 0% {
  38. transform: scale(0) rotate(-90deg);
  39. opacity: 0;
  40. }
  41. 5% {
  42. opacity: 1;
  43. }
  44. 100% {
  45. transform: scale(1.2) rotate(90deg);
  46. opacity: 0;
  47. }
  48. }
  49. @keyframes ball-scale-multiple {
  50. 0% {
  51. transform: scale(0) rotate(-90deg);
  52. opacity: 0;
  53. }
  54. 5% {
  55. opacity: 1;
  56. }
  57. 100% {
  58. transform: scale(1.2) rotate(90deg);
  59. opacity: 0;
  60. }
  61. }
  62. /* line 1, ../sass/inc/_loader.scss */
  63. .loaderWrap {
  64. position: absolute;
  65. left: 0;
  66. top: 0;
  67. right: 0;
  68. bottom: 0;
  69. background: rgba(0, 0, 0, 0.2);
  70. z-index: 123333333;
  71. }
  72. /* line 10, ../sass/inc/_loader.scss */
  73. .ball-scale-multiple {
  74. position: absolute;
  75. top: 50%;
  76. left: 50%;
  77. transform: translate(-50%, 50%);
  78. }
  79. /* line 15, ../sass/inc/_loader.scss */
  80. .ball-scale-multiple > div {
  81. background-color: #fff;
  82. border-radius: 0;
  83. animation-fill-mode: both;
  84. position: absolute;
  85. left: -60px;
  86. top: -60px;
  87. opacity: 0;
  88. margin: 0;
  89. width: 120px;
  90. height: 120px;
  91. animation: ball-scale-multiple 1s 0s linear infinite;
  92. box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  93. }
  94. /* line 28, ../sass/inc/_loader.scss */
  95. .ball-scale-multiple > div:nth-child(1) {
  96. animation-delay: -1s;
  97. }
  98. /* line 31, ../sass/inc/_loader.scss */
  99. .ball-scale-multiple > div:nth-child(2) {
  100. animation-delay: -0.8s;
  101. }
  102. /* line 34, ../sass/inc/_loader.scss */
  103. .ball-scale-multiple > div:nth-child(3) {
  104. animation-delay: -0.6s;
  105. }
  106. /* line 37, ../sass/inc/_loader.scss */
  107. .ball-scale-multiple > div:nth-child(4) {
  108. animation-delay: -0.4s;
  109. }
  110. /* line 40, ../sass/inc/_loader.scss */
  111. .ball-scale-multiple > div:nth-child(5) {
  112. animation-delay: -0.2s;
  113. }
  114. /* line 7, ../sass/style.scss */
  115. .a-container {
  116. width: 1170px;
  117. margin: 20px auto;
  118. }
  119. /* line 12, ../sass/style.scss */
  120. .a-1_2 {
  121. width: 48%;
  122. display: inline-block;
  123. margin: 0 1%;
  124. }
  125. /* line 17, ../sass/style.scss */
  126. .o-sliderContainer {
  127. overflow: hidden;
  128. position: relative;
  129. width: 100%;
  130. min-height: 200px;
  131. float: left;
  132. height: auto;
  133. }
  134. /* line 27, ../sass/style.scss */
  135. .o-sliderContainer.hasShadow {
  136. box-shadow: 0 39px 22px -29px rgba(0, 0, 0, 0.2);
  137. }
  138. /* line 39, ../sass/style.scss */
  139. .o-slider--item {
  140. height: auto;
  141. width: 0;
  142. background-position: center center;
  143. background-repeat: no-repeat;
  144. background-size: cover;
  145. position: relative;
  146. float: left;
  147. transition: all 0.2s cubic-bezier(0.7, 0.18, 0.53, 0.75);
  148. opacity: 0.6;
  149. transform: scale(0.95, 0.95);
  150. transform-origin: center center;
  151. z-index: 99;
  152. background-size: 40%;
  153. background-position: 95% 106%;
  154. }
  155. .o-slider-header{ height: 100%; width: 100%; position: relative; }
  156. .o-slider-bg{ position: absolute; height: 100%; width: 100%; display: flex; align-items: center; }
  157. .o-slider-bg .o-slider-header > img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  158. .o-slider-bg .o-slider-header > video{ width: 100%; height: 100%;}
  159. .o-slider-header iframe{ width: 100%; height: 100%;}
  160. .content-top{height: 15%;text-align: center;padding-left: 30px;display: flex;align-items: center;}
  161. .content-top img{ max-width: 86%; }
  162. .content-content{height: 45%;width: 100%;text-align: center;}
  163. .content-content img{height: 90%;/* margin: auto 0; */}
  164. .content-footer{padding-left: 30px; height:20%;}
  165. .content-footer img{ max-width: 60%; max-height: 100%; }
  166. .pinch-zoom-container{ width: 100%; max-height: 100%; }
  167. /* line 52, ../sass/style.scss */
  168. /* .o-slider--item::after {
  169. content: '';
  170. position: absolute;
  171. top: 0;
  172. right: 0;
  173. bottom: 0;
  174. left: 0;
  175. background: rgba(0, 0, 0, 0.3);
  176. background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  177. background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(70%, transparent));
  178. background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  179. background: -o-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  180. background: -ms-linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  181. background: linear-gradient(45deg, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
  182. z-index: 0;
  183. } */
  184. /* line 65, ../sass/style.scss */
  185. .o-slider--item.isActive {
  186. opacity: 1;
  187. transform: scale(1, 1);
  188. }
  189. /* line 69, ../sass/style.scss */
  190. .o-slider--item.isMoving {
  191. opacity: 0.6;
  192. transform: scale(0.95, 0.95);
  193. z-index: 100;
  194. }
  195. /* line 76, ../sass/style.scss */
  196. .o-slider {
  197. width: auto;
  198. position: relative;
  199. display: none;
  200. transition: all 0.2s cubic-bezier(0.7, 0.18, 0.53, 0.75);
  201. }
  202. /* line 81, ../sass/style.scss */
  203. .o-slider.isVisible {
  204. display: table;
  205. }
  206. /* line 86, ../sass/style.scss */
  207. .o-slider.isDraggable {
  208. cursor: move;
  209. }
  210. /* line 91, ../sass/style.scss */
  211. .o-slider-textWrap {
  212. left: 2%;
  213. bottom: 45px;
  214. height: auto;
  215. position: absolute;
  216. text-align: left;
  217. padding: 0 0 20px 0;
  218. width: 96%;
  219. transition: all 0.4s;
  220. opacity: 1;
  221. overflow: visible;
  222. perspective: 1000px;
  223. z-index: 2;
  224. }
  225. /* line 107, ../sass/style.scss */
  226. .isActive .o-slider-textWrap::after {
  227. width: 100%;
  228. left: 0;
  229. }
  230. /* line 112, ../sass/style.scss */
  231. .isActive .o-slider-paragraph {
  232. opacity: 1;
  233. transform: perspective(0) rotateY(0) translate(0, 0);
  234. transform-origin: 0 0;
  235. transition-delay: 1s;
  236. }
  237. /* line 119, ../sass/style.scss */
  238. .isActive .o-slider-title {
  239. opacity: 1;
  240. transform: perspective(0) rotateY(0) translate(0, 0);
  241. transform-origin: 0 0;
  242. transition-delay: 0.2s;
  243. }
  244. /* line 126, ../sass/style.scss */
  245. .isActive .o-slider-subTitle {
  246. opacity: 1;
  247. transform: perspective(0) rotateY(0) translate(0, 0);
  248. transform-origin: 0 0;
  249. transition-delay: 0.6s;
  250. }
  251. /* line 155, ../sass/style.scss */
  252. .o-slider-title {
  253. width: auto;
  254. margin: 0 0 5px 0;
  255. height: auto;
  256. color: #fff;
  257. text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  258. font-size: 1.4rem;
  259. display: inline-block;
  260. padding: 0;
  261. transition: all 0.4s;
  262. transform-origin: 0 0;
  263. transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
  264. opacity: 0;
  265. position: relative;
  266. z-index: 1;
  267. }
  268. /* line 172, ../sass/style.scss */
  269. .o-slider-subTitle {
  270. width: auto;
  271. margin: 0 0 5px 0;
  272. height: auto;
  273. color: #fff;
  274. text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  275. font-size: 1.4rem;
  276. display: inline-block;
  277. padding: 0;
  278. transition: all 0.4s;
  279. transform-origin: 0 0;
  280. transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
  281. opacity: 0;
  282. position: relative;
  283. z-index: 1;
  284. font-size: 1.2rem;
  285. }
  286. /* line 190, ../sass/style.scss */
  287. .o-slider-paragraph {
  288. width: auto;
  289. margin: 0 0 5px 0;
  290. height: auto;
  291. color: #fff;
  292. text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  293. font-size: 1.4rem;
  294. display: inline-block;
  295. padding: 0;
  296. transition: all 0.4s;
  297. transform-origin: 0 0;
  298. transform: perspective(1000px) rotateY(120deg) translate(100px, -100px);
  299. opacity: 0;
  300. position: relative;
  301. z-index: 1;
  302. font-size: 0.8rem;
  303. max-width: 100%;
  304. display: none;
  305. }
  306. @media screen and (min-width: 768px) {
  307. /* line 211, ../sass/style.scss */
  308. .o-slider-textWrap {
  309. left: 5%;
  310. width: 90%;
  311. }
  312. /* line 216, ../sass/style.scss */
  313. .o-slider-title {
  314. font-size: 1.8rem;
  315. }
  316. /* line 220, ../sass/style.scss */
  317. .o-slider-subTitle {
  318. font-size: 1.4rem;
  319. }
  320. /* line 224, ../sass/style.scss */
  321. .o-slider-paragraph {
  322. max-width: 60%;
  323. font-size: 1rem;
  324. display: block;
  325. }
  326. }
  327. @media screen and (min-width: 1024px) {
  328. /* line 232, ../sass/style.scss */
  329. .o-slider-pagination {
  330. bottom: 6%;
  331. }
  332. /* line 234, ../sass/style.scss */
  333. .o-slider-textWrap {
  334. left: 70px;
  335. width: 80%;
  336. bottom: 50px;
  337. }
  338. /* line 240, ../sass/style.scss */
  339. .o-slider-title {
  340. font-size: 2rem;
  341. }
  342. /* line 244, ../sass/style.scss */
  343. .o-slider-subTitle {
  344. font-size: 1.6rem;
  345. }
  346. /* line 248, ../sass/style.scss */
  347. .o-slider-paragraph {
  348. max-width: 40%;
  349. font-size: 1.2rem;
  350. }
  351. }
  352. /* line 299, ../sass/style.scss */
  353. .a-divider {
  354. display: block;
  355. width: 100%;
  356. height: 1px;
  357. margin: 2px 0;
  358. }
  359. /* line 306, ../sass/style.scss */
  360. .o-slider-controls {
  361. display: none;
  362. }
  363. /* line 309, ../sass/style.scss */
  364. .o-slider-controls.isVisible {
  365. display: block;
  366. }
  367. /* line 314, ../sass/style.scss */
  368. .o-slider-pagination {
  369. bottom: 20px;
  370. left: 0;
  371. position: absolute;
  372. text-align: center;
  373. width: 100%;
  374. z-index: 1444000;
  375. margin: 0;
  376. padding: 0;
  377. }
  378. /* line 324, ../sass/style.scss */
  379. .o-slider-pagination > li {
  380. border-radius: 50%;
  381. /* box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 2px 0 rgba(0, 0, 0, 0.4) inset; */
  382. display: inline-block;
  383. position: relative;
  384. top: 0;
  385. right: 0;
  386. bottom: 0;
  387. left: 0;
  388. height: 8px;
  389. width: 8px;
  390. margin-left: 4px;
  391. margin-right: 4px;
  392. transition: all 250ms;
  393. cursor: pointer;
  394. /* background-clip: padding-box; */
  395. z-index: 100;
  396. background: #fff;
  397. }
  398. /* line 340, ../sass/style.scss */
  399. .o-slider-pagination > li.isActive {
  400. background-color: #19bbed;
  401. transform: scale(1.3, 1.3);
  402. }
  403. /* line 347, ../sass/style.scss */
  404. .o-slider--preview {
  405. position: absolute;
  406. top: -70px;
  407. right: auto;
  408. bottom: auto;
  409. left: -65px;
  410. opacity: 0;
  411. width: 140px;
  412. height: 60px;
  413. background-size: cover;
  414. background-position: center center;
  415. transition: all 250ms;
  416. z-index: -1;
  417. border: 3px solid #000;
  418. transform: scale(0.2, 0.2);
  419. transform-origin: center bottom;
  420. display: none;
  421. }
  422. /* line 362, ../sass/style.scss */
  423. .o-slider--preview::before {
  424. content: "";
  425. position: absolute;
  426. top: auto;
  427. right: auto;
  428. bottom: -13px;
  429. left: 50%;
  430. margin: 0 0 0 -5px;
  431. height: 0;
  432. width: 0;
  433. border-left: 10px solid transparent;
  434. border-right: 10px solid transparent;
  435. border-top: 10px solid #000;
  436. }
  437. /* line 374, ../sass/style.scss */
  438. .o-slider--preview.isActive,
  439. .o-slider-pagination li:hover .o-slider--preview {
  440. opacity: 1;
  441. position: absolute;
  442. top: -76px;
  443. right: auto;
  444. bottom: auto;
  445. left: -65px;
  446. transform: scale(1, 1);
  447. }
  448. @media screen and (min-width: 768px) {
  449. /* line 384, ../sass/style.scss */
  450. .o-slider--preview {
  451. display: block;
  452. }
  453. }
  454. /* line 389, ../sass/style.scss */
  455. .o-slider-arrows {
  456. margin: 0;
  457. list-style: none;
  458. display: block;
  459. }
  460. /* line 395, ../sass/style.scss */
  461. .o-slider-next,
  462. .o-slider-prev {
  463. position: fixed;
  464. top: 0;
  465. left: 0px;
  466. margin: -12px 0 0;
  467. width: 60px;
  468. z-index: 99;
  469. padding: 0;
  470. margin: 0;
  471. height: 60px;
  472. list-style: none;
  473. cursor: pointer;
  474. text-align: center;
  475. padding: 10px 25px;
  476. background: rgba(0, 0, 0, 0.4);
  477. display: inline-block;
  478. vertical-align: middle;
  479. line-height: 100%;
  480. transition: all 0.4s;
  481. top: 50%;
  482. transform: translateY(-50%);
  483. }
  484. /* line 416, ../sass/style.scss */
  485. .o-slider-next i,
  486. .o-slider-prev i {
  487. position: absolute;
  488. top: 50%;
  489. left: 0;
  490. /* margin: -12px 0 0; */
  491. text-align: center;
  492. width: 100%;
  493. font-size: 2.8rem;
  494. color: #fff;
  495. transform: translateY(-50%);
  496. }
  497. /* line 428, ../sass/style.scss */
  498. .o-slider-next {
  499. left: auto;
  500. right: 0px;
  501. }
  502. /* line 433, ../sass/style.scss */
  503. .isDisabled {
  504. opacity: 1;
  505. cursor: auto;
  506. }
  507. @media screen and (max-width: 1280px) {
  508. /* line 439, ../sass/style.scss */
  509. .a-container {
  510. width: 970px;
  511. }
  512. }
  513. @media screen and (max-width: 1024px) {
  514. /* line 445, ../sass/style.scss */
  515. .o-slider-arrows {
  516. display: none;
  517. }
  518. /* line 449, ../sass/style.scss */
  519. .o-sliderContainer {
  520. height: 450px;
  521. width: 100%;
  522. }
  523. /* line 455, ../sass/style.scss */
  524. .o-slider--item {
  525. height: 450px;
  526. }
  527. }
  528. @media screen and (max-width: 768px) {
  529. /* line 461, ../sass/style.scss */
  530. .a-container {
  531. width: 90%;
  532. margin: 20px auto;
  533. }
  534. /* line 466, ../sass/style.scss */
  535. .a-1_2 {
  536. width: 100%;
  537. display: block;
  538. margin: 0;
  539. }
  540. /* line 472, ../sass/style.scss */
  541. .o-slider-arrows {
  542. display: none;
  543. }
  544. /* line 476, ../sass/style.scss */
  545. .o-sliderContainer {
  546. height: 350px;
  547. }
  548. /* line 480, ../sass/style.scss */
  549. .o-slider--item {
  550. height: 350px;
  551. }
  552. /* line 484, ../sass/style.scss */
  553. .o-slider-panel img {
  554. left: -15%;
  555. width: 130%;
  556. }
  557. }
  558. @media screen and (max-width: 480px) {
  559. /* line 491, ../sass/style.scss */
  560. .o-slider--item {
  561. height: 270px;
  562. }
  563. /* line 494, ../sass/style.scss */
  564. /* line 500, ../sass/style.scss */
  565. .o-sliderContainer {
  566. height: 270px;
  567. }
  568. }
  569. /* line 505, ../sass/style.scss */
  570. .slider-pagination > li:hover {
  571. background-color: rgba(255, 255, 255, 0.9);
  572. transform: scale(1.3, 1.3);
  573. }