index.min.css 20 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228
  1. h1,
  2. h2,
  3. h3,
  4. h4,
  5. h5,
  6. h6,
  7. p,
  8. ol,
  9. ul,
  10. li,
  11. dl,
  12. dd,
  13. textarea,
  14. form,
  15. input,
  16. select,
  17. body {
  18. margin: 0;
  19. padding: 0;
  20. font-size: 12px;
  21. font-family: "Microsoft Yahei";
  22. font-weight: 400
  23. }
  24. body,
  25. html {
  26. font-size: 10px
  27. }
  28. em,
  29. i {
  30. font-style: normal
  31. }
  32. li {
  33. list-style: none
  34. }
  35. a {
  36. text-decoration: none;
  37. outline: medium none
  38. }
  39. img {
  40. vertical-align: top;
  41. border: 0
  42. }
  43. textarea {
  44. overflow: auto;
  45. resize: none
  46. }
  47. body {
  48. font-family: "Microsoft Yahei"
  49. }
  50. table {
  51. border-collapse: collapse
  52. }
  53. h1 {
  54. font-size: 14px
  55. }
  56. h2 {
  57. font-size: 12px
  58. }
  59. input {
  60. vertical-align: middle;
  61. outline: 0
  62. }
  63. .clear:after {
  64. clear: both;
  65. content: '';
  66. display: block
  67. }
  68. .clear {
  69. zoom: 1
  70. }
  71. input {
  72. vertical-align: 0
  73. }
  74. body,
  75. html {
  76. width: 100%;
  77. height: 100%;
  78. font-size: 10px;
  79. overflow: hidden
  80. }
  81. body {
  82. background: #000;
  83. }
  84. body,
  85. ul,
  86. li,
  87. a {
  88. -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  89. }
  90. .over {
  91. overflow: hidden
  92. }
  93. #menu{position: absolute;left: 0%;top: 0%;z-index: 10;}
  94. @media screen and (orientation:portrait) {
  95. #menu{display:block ;}
  96. .lock-wrap {
  97. display: none!important
  98. }
  99. }
  100. @media screen and (orientation:landscape) {
  101. #menu{display: none;}
  102. .wrapper {
  103. display: none!important
  104. }
  105. }
  106. .wrapper {
  107. position: relative;
  108. width: 100%;
  109. height: 100%;
  110. backface-visibility: hidden;
  111. -webkit-transform-style: preserve-3d
  112. }
  113. .keep {
  114. -webkit-transition: .4s linear
  115. }
  116. .scene {
  117. position: relative;
  118. width: 100%;
  119. height: 100%;
  120. box-sizing: border-box;
  121. overflow: hidden;
  122. backface-visibility: hidden;
  123. display: none
  124. }
  125. .view1 {
  126. z-index: 2
  127. }
  128. .view1 .scene-item2 .btn_tobuy{
  129. position: absolute;left: 6%;top: 82%;width: 10%;background: #39c766;padding: 4.5% 2%;border-radius: 5px;
  130. }
  131. .view1 .scene-item3 .btn_tobuy{
  132. position: absolute;left: 8%;top: 77%;width: 10%;background: #39c766;padding: 4.5% 2%;border-radius: 5px;
  133. }
  134. .view2 .btn_tomore{
  135. position: absolute;left: 14%;top: 75%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px;
  136. }
  137. .view3 .btn_tomore{
  138. position: absolute;right: 8%;top: 24%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px;
  139. }
  140. .view4 .btn_tomore{
  141. position: absolute;right: 8%;top: 80%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px;
  142. }
  143. .view4 .btn_join_us{
  144. position: absolute;right: 8%;top: 68%;width: 14%;border-radius: 5px;
  145. }
  146. .view6 .btn_tomore{
  147. position: absolute;left: 8%;top: 82%;width: 10%;background: #39c766;padding: 3.5% 2%;border-radius: 5px;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  148. }
  149. .view6 .btn_join_tel{
  150. position: absolute;left: 25%;top: 82%;width: 60%;border-radius: 5px;-webkit-transform: translateY(-50%);transform: translateY(-50%);
  151. }
  152. .footer1{position: absolute;bottom:2%;left: 0;width: 100%;text-align: center;}
  153. .footer1 h3{color: #e6004a;font-size: 1.7em;}
  154. .footer1 .left{display: inline-block;width: 33%;}
  155. .footer1 .right{display: inline-block;width: 33%;}
  156. .footer1 .left img,.footer1 .right img{padding: 5% 0;}
  157. .news_ul_big{padding:0;color: #fff;width: 88%;position: absolute;left: 6%;top: 50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
  158. .news_ul_big li{padding: 3px 0;}
  159. .news_ul_big li:first-child{font-size: 1.3em;font-weight: bold;padding: 3px 0;}
  160. .news_sw{margin: 2% 4%;height: 12%;max-height:12%;position: relative;overflow: hidden;text-align: center;}
  161. .news_sw .left{height: 100%;background: #f8d7d7;display: inline-block;width: 48%;max-width: 48%;overflow:hidden;margin-right:1%;position: relative;}
  162. .news_sw .left img,.news_sw .right img{width: 40%;height: 90%;position: absolute;left:4px;top: 5%;}
  163. .news_sw .right{height: 100%;background: #f8d7d7;display: inline-block;width: 48%;max-width: 48%;overflow:hidden;margin-left: 1%;position: relative;}
  164. .news_sw .tit{position: absolute;width: 56%;position: absolute;right: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #d50058;}
  165. .news_sw_2{margin: 1.5% 4%;height: 23%;background: #f8d7d7;overflow: hidden;max-height: 23%;overflow: hidden;position: relative;}
  166. .theme_news{background: #ea094b;height: 20px;font-size: 1.2em;padding-left: 3%;color: #fff;line-height: 20px;}
  167. .news_banner{position: relative;line-height: 0;}
  168. .news_content{background: #0059aa;height: 30%;position: relative;}
  169. .news_sw_2 ul{width: 65%;position: absolute;left: 5%;top: 50%;-webkit-transform: translateY(-40%);transform: translateY(-40%);}
  170. .news_sw_2 ul li{width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 3px 0;position: relative;height: 20px;}
  171. .news_sw_2 ul li span{width: 60%;position: absolute;left: 0;top: 0; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  172. .news_sw_2 ul li em{width: 35%;position: absolute;left: 65%;top: 0;}
  173. .news_sw_2 .btn_more_ct{width: 16%;position: absolute;right:8%;top: 50%;-webkit-transform: translateY(-40%);transform: translateY(-40%);background: #38c766;border-radius: 5px;}
  174. .news_sw_2 .btn_more_ct img{width: 85%;padding: 7.5%;}
  175. .jianjie_content{padding: 10px 15px;line-height: 1.8;}
  176. .jianjie_content h3{font-size: 1.8em;}
  177. .jianjie_content p{padding: 10px 0;}
  178. .jianjie_content .img{text-align: center;padding: 15px 0;}
  179. .jianjie_content .img img{width: 80%;}
  180. .news_wap_content{padding: 10px 15px;line-height: 1.8;}
  181. .news_wap_content h3{font-size: 1.8em;}
  182. .news_wap_content .date{padding: 5px 0;font-size: 12px;}
  183. .news_wap_content p{font-size: 14px;}
  184. .c-item-title {
  185. margin: 50px 0 0 30px;
  186. width: 93px;
  187. height: 53px;
  188. color: #fff;
  189. font-style: italic
  190. }
  191. .c-item-title h1 {
  192. font-size: 2.4rem;
  193. font-weight: 400;
  194. padding-left: 3px;
  195. line-height: 22px
  196. }
  197. .c-item-title b {
  198. font-size: 2.5rem;
  199. font-style: italic
  200. }
  201. .card-view {
  202. position: relative;
  203. width: 100%;
  204. height: 100%;
  205. left: 0;
  206. top: 0;
  207. overflow-x: hidden
  208. }
  209. .footer {
  210. position: absolute;
  211. bottom: 0;
  212. left: 0;
  213. width: 100%;
  214. -webkit-transition: opacity .6s linear
  215. }
  216. .footer ul {
  217. display: -webkit-box
  218. }
  219. .footer li {
  220. padding: 14px 0;
  221. position: relative;
  222. -webkit-box-flex: 1;
  223. width: 100%;
  224. font-size: 1.5rem;
  225. color: rgba(255, 255, 255, .8);
  226. text-align: center;
  227. background: rgba(0, 0, 0, .2);
  228. margin-right: 1px
  229. }
  230. .foot3{width: auto;left: 50%;bottom: 5%;transform: translateX(-55%);}
  231. .foot3 li{width: 8px;height: 8px;background: #ea094b;padding: 0;opacity: .3;border-radius: 50%;}
  232. .footer li span {
  233. display: block
  234. }
  235. .footer li a {
  236. display: block;
  237. color: rgba(255, 255, 255, .8)
  238. }
  239. .footer li{
  240. margin-right: 10px
  241. }
  242. .footer li.active {
  243. background: #fff
  244. }
  245. .footer li.active:after {
  246. content: '';
  247. position: absolute;
  248. left: 50%;
  249. border: 4px solid transparent;
  250. border-bottom-color: #fff;
  251. margin-left: -2px;
  252. top: -8px
  253. }
  254. .footer_iam{color: #fff;text-align: center;background: #603f45;padding: 20px 0 15px 0;}
  255. .footer_iam nav{padding-bottom: 10px;}
  256. .footer_iam a{color: #fff;}
  257. .foot1 li.active {
  258. color: #82291a
  259. }
  260. .carousel-wrapper {
  261. position: relative;
  262. width: 100%;
  263. height: 100%;
  264. overflow: hidden
  265. }
  266. .carousel {
  267. position: absolute;
  268. left: 0;
  269. top: 0;
  270. margin: 0;
  271. padding: 0;
  272. list-style: none;
  273. display: block;
  274. width: 100%;
  275. height: 100%
  276. }
  277. .c-item {
  278. position: absolute;
  279. width: 100%;
  280. height: 100%
  281. }
  282. .display {
  283. -webkit-animation: display .6s ease-in
  284. }
  285. .loading-wrap {
  286. position: absolute;
  287. width: 100%;
  288. height: 100%;
  289. left: 0;
  290. top: 0;
  291. background: #ea094b;
  292. z-index: 100
  293. }
  294. #load {
  295. width: 120px;
  296. position: fixed;
  297. left: 50%;
  298. top: 50%;
  299. margin: -70px 0 0 -60px;
  300. z-index: 200
  301. }
  302. .loading {
  303. width: 120px;
  304. height: 100px;
  305. background: url(../images/loading3.png) no-repeat;
  306. position: relative;
  307. -webkit-animation: move .6s infinite alternate linear
  308. }
  309. .loading div {
  310. width: 100%;
  311. height: 100%;
  312. position: absolute;
  313. left: 0;
  314. top: 0
  315. }
  316. .img1 {
  317. background: url(../images/loading4.png) no-repeat;
  318. -webkit-animation: rotate 1s infinite linear
  319. }
  320. .img2 {
  321. background: url(../images/loading5.png) no-repeat;
  322. -webkit-animation: rotate2 1s infinite linear
  323. }
  324. .text {
  325. text-align: center;
  326. font: 18px/100px Arial;
  327. color: #F63
  328. }
  329. .shadow {
  330. margin: 0 auto;
  331. width: 100px;
  332. height: 40px;
  333. background: -webkit-radial-gradient(contain, #999, rgba(0, 0, 0, 0));
  334. opacity: .5;
  335. -webkit-transform: scale(1);
  336. -webkit-animation: scale .6s infinite alternate linear
  337. }
  338. .lock-wrap {
  339. position: absolute;
  340. left: 0;
  341. width: 100%;
  342. height: 100%;
  343. background: #008c23;
  344. z-index: 10;
  345. display: none
  346. }
  347. .lock-wrap .lock {
  348. position: absolute;
  349. left: 50%;
  350. top: 50%;
  351. width: 350px;
  352. height: 30px;
  353. margin: -15px 0 0 -175px;
  354. text-align: center;
  355. color: #fff;
  356. font-size: 2rem;
  357. }
  358. .lock-wrap .lock i {
  359. position: relative;
  360. display: block;
  361. width: 74px;
  362. height: 110px;
  363. background: url(../images/iphone.png) 0 0 no-repeat;
  364. background-size: 100%;
  365. margin: 0 auto;
  366. -webkit-transform: rotate(-90deg);
  367. -webkit-animation: iphone 1.6s ease-in infinite
  368. }
  369. .semi-detail {
  370. width: 100%;
  371. height: 100%;
  372. border-top: 1px solid rgba(0,0,0,0)
  373. }
  374. .semi-detail h2 {
  375. font-size: 1.8rem;
  376. color: #595959;
  377. text-align: center;
  378. line-height: 35px
  379. }
  380. .semi-detail p {
  381. font-size: 1.5rem;
  382. color: #595959;
  383. text-align: center
  384. }
  385. .logo {
  386. display: block;
  387. width: 28%;
  388. height: 13%;
  389. margin: 20px auto 0;
  390. text-align: center
  391. }
  392. .logo img {
  393. width: 100%
  394. }
  395. .rocket {
  396. position: absolute;
  397. left: 42%;
  398. bottom: -7px;
  399. width: 15%
  400. }
  401. .rocket img {
  402. width: 100%
  403. }
  404. .scene-1 {
  405. display: block;
  406. }
  407. .scene-2-item1 {
  408. }
  409. .view {
  410. position: relative;
  411. width: 100%;
  412. height: 100%;
  413. overflow: hidden
  414. }
  415. .arrow {
  416. display: block;
  417. width: 12px;
  418. height: 12px;
  419. position: absolute;
  420. bottom: 8px;
  421. left: 50%;
  422. margin-left: -11px;
  423. border: 3px solid transparent;
  424. border-top: 3px solid #fff;
  425. border-left: 3px solid #fff;
  426. z-index: 99;
  427. opacity: .8;
  428. -webkit-transform: rotate(45deg);
  429. -webkit-animation: arrow 1s ease;
  430. -webkit-animation-iteration-count: infinite;
  431. -webkit-animation-delay: .5s;
  432. -webkit-animation: arrow 1.5s infinite ease-in-out
  433. }
  434. .arrow2 {
  435. bottom: 50px
  436. }
  437. .banner {
  438. position: relative;
  439. width: 100%;
  440. height: 89%;
  441. z-index: 2
  442. }
  443. .theme {
  444. display: block;
  445. width: 75%;
  446. margin: 0 auto
  447. }
  448. .theme img {
  449. width: 100%
  450. }
  451. .avatar {
  452. position: absolute;
  453. width: 100%;
  454. height: 12%;
  455. bottom: 0;
  456. background: #0046ad
  457. }
  458. .view2 {
  459. background: url(../images/wap_banner_4.jpg) top center no-repeat;
  460. background-size:100%;
  461. }
  462. .scene-2 h1 {
  463. font-size: 1.6rem;
  464. color: #fff;
  465. text-align: center;
  466. line-height: 55px
  467. }
  468. .scene-2 .auto-man {
  469. position: relative;
  470. margin: 24px;
  471. padding-top: 20px;
  472. display: -webkit-box
  473. }
  474. .scene-2 .auto-man li {
  475. -webkit-box-flex: 1;
  476. border-right: 6px solid #26282c;
  477. opacity: 0;
  478. visibility: hidden
  479. }
  480. .scene-2 .auto-man li img {
  481. width: 100%
  482. }
  483. .scene-2 .auto-man li.heartbeat {
  484. visibility: visible;
  485. opacity: 1;
  486. -webkit-animation: heartbeat .6s ease-in
  487. }
  488. .scene-2 .auto-man li:nth-last-child(1) {
  489. border-right: 0
  490. }
  491. .scene-2 .auto-focus {
  492. margin: 24px;
  493. display: -webkit-box
  494. }
  495. .scene-2 .auto-focus li {
  496. -webkit-box-flex: 1;
  497. position: relative;
  498. padding-top: 10px;
  499. text-align: center;
  500. color: #fff;
  501. font-size: 1.6rem;
  502. border-right: 6px solid #26282c
  503. }
  504. .scene-2 .auto-focus li:before {
  505. content: '';
  506. position: absolute;
  507. left: 0;
  508. top: -2px;
  509. width: 100%;
  510. height: 3px
  511. }
  512. .scene-2 .auto-focus li:nth-child(1):before {
  513. background: #e71a0f
  514. }
  515. .scene-2 .auto-focus li:nth-child(2):before {
  516. background: #7a43bd
  517. }
  518. .scene-2 .auto-focus li:nth-child(3):before {
  519. background: #b5e900
  520. }
  521. .scene-2 .auto-focus li:nth-child(4):before {
  522. background: #0076e4
  523. }
  524. .scene-2 .auto-focus li:nth-last-child(1) {
  525. border-right: 0
  526. }
  527. .fadeInLeft {
  528. -webkit-animation-name: fadeInLeft;
  529. animation-name: fadeInLeft
  530. }
  531. .fadeInRight {
  532. -webkit-animation-name: fadeInRight;
  533. animation-name: fadeInRight
  534. }
  535. .auto-man {
  536. margin: 24px auto
  537. }
  538. .view3 {
  539. background: #fff;
  540. }
  541. .leader {
  542. position: absolute;
  543. left: 50%;
  544. top: 50%
  545. }
  546. .rotation {
  547. -webkit-animation: rotation .4s linear
  548. }
  549. .leader1 {
  550. width: 232px;
  551. height: 240px;
  552. margin: -116px 0 0 -107px;
  553. display: none;
  554. opacity: 0
  555. }
  556. .leader1 .leader-ch {
  557. width: 232px
  558. }
  559. .leader1 .leader-ch img {
  560. width: 100%
  561. }
  562. .leader1 .leader-ch {
  563. position: absolute;
  564. left: 0;
  565. top: 19px;
  566. z-index: 2
  567. }
  568. .leader1 .leader-bg img {
  569. width: 100%;
  570. height: 100%
  571. }
  572. .leader1 .leader-bg {
  573. position: absolute;
  574. left: 0;
  575. top: 0
  576. }
  577. .leader1 .leader1-icon {
  578. position: absolute;
  579. top: 53px;
  580. left: 2px;
  581. width: 88px;
  582. height: 28px;
  583. background: url(../images/icon.png) -1px -1px no-repeat;
  584. background-size: 160px auto
  585. }
  586. .leader1.show {
  587. display: block;
  588. opacity: 1;
  589. -webkit-animation: heartbeat .4s ease-in
  590. }
  591. .c-item-main {
  592. padding: 0 20px
  593. }
  594. .scene-item1 {
  595. left: 0
  596. }
  597. .scene-item2 {
  598. left: 100%
  599. }
  600. .scene-item3 {
  601. left: 200%
  602. }
  603. .scene-item4 {
  604. left: 300%
  605. }
  606. .scene-item5 {
  607. left: 400%
  608. }
  609. .scene-3-item1 {
  610. background: #fff
  611. }
  612. .scene-3-item2 {
  613. background: #f1d8d2
  614. }
  615. .c-item h2 {
  616. margin: 8px 0;
  617. font-size: 1.6rem
  618. }
  619. .c-item p {
  620. position: relative;
  621. font-size: 1.4rem;
  622. line-height: 18px;
  623. padding-left: 20px;
  624. text-align: justify
  625. }
  626. .c-item p:before {
  627. content: '';
  628. display: block;
  629. position: absolute;
  630. width: 4px;
  631. height: 4px;
  632. overflow: hidden;
  633. border-radius: 2px;
  634. left: 8px;
  635. top: 7px;
  636. background: #302b2a
  637. }
  638. .pop {
  639. display: inline-block;
  640. padding: 0 15px;
  641. height: 30px;
  642. line-height: 30px;
  643. background: #302967;
  644. font-size: 1.8rem;
  645. color: #fff;
  646. font-style: italic;
  647. text-align: center;
  648. background-size: 200px auto;
  649. margin-top: 12px
  650. }
  651. .pop1 {
  652. background: #cf553f
  653. }
  654. .view4 {
  655. background:url(../images/wap_banner_5.jpg) top center no-repeat;
  656. background-size:100%;
  657. }
  658. .leader2 {
  659. width: 218px;
  660. height: 256px;
  661. margin: -128px 0 0 -109px;
  662. display: none;
  663. opacity: 0
  664. }
  665. .leader2 img {
  666. width: 100%;
  667. height: 100%
  668. }
  669. .leader2.show {
  670. display: block;
  671. opacity: 1;
  672. -webkit-animation: heartbeat .4s ease-in
  673. }
  674. .scene-4-item1 .c-item-title {
  675. background-position: -3px -93px
  676. }
  677. .leader2-icon1 {
  678. position: absolute;
  679. width: 22px;
  680. height: 24px;
  681. left: 19px;
  682. top: 95px;
  683. background: url(../images/icon.png) -69px -38px no-repeat;
  684. background-size: 160px auto;
  685. -webkit-transition: all .3s ease-in
  686. }
  687. .leader2-icon2 {
  688. position: absolute;
  689. width: 24px;
  690. height: 24px;
  691. top: 58px;
  692. right: 25px;
  693. background: url(../images/icon.png) -33px -37px no-repeat;
  694. background-size: 160px auto;
  695. -webkit-transition: all .3s ease-in
  696. }
  697. .leader2-icon3 {
  698. position: absolute;
  699. width: 24px;
  700. height: 24px;
  701. top: 40px;
  702. right: 4px;
  703. background: url(../images/icon.png) -5px -36px no-repeat;
  704. background-size: 160px auto;
  705. -webkit-transition: all .3s ease-in
  706. }
  707. .foot2 li {
  708. }
  709. .foot2 li:nth-last-child(1) {
  710. border-right: 0
  711. }
  712. .foot2 li.active {
  713. color: #231e4a
  714. }
  715. .scene-4-item2 {
  716. background: #c5c1e7
  717. }
  718. .pop2 {
  719. background: #302967
  720. }
  721. .view5 {
  722. background:url(../images/wap_banner_6.jpg) top center no-repeat;
  723. background-size: 100%;
  724. }
  725. .scene-5 .c-item-title {
  726. background-position: -1px -148px
  727. }
  728. .scene-5-item1 {
  729. background: url(../images/wap_banner_0.jpg) top center no-repeat;
  730. background-size: 100%;
  731. }
  732. .scene-5-item4 {
  733. background: url(../images/wap_banner_3.jpg) top center no-repeat;
  734. background-size: 100%;
  735. }
  736. .leader3 {
  737. width: 247px;
  738. height: 262px;
  739. margin: -131px 0 0 -123px;
  740. display: none;
  741. opacity: 0
  742. }
  743. .leader3 img {
  744. width: 100%
  745. }
  746. .leader3 .leader-ch {
  747. position: relative;
  748. z-index: 2;
  749. top: -5px
  750. }
  751. .leader3.show {
  752. display: block;
  753. opacity: 1;
  754. -webkit-animation: heartbeat .4s ease-in
  755. }
  756. .leader3-icon1,
  757. .leader3-icon2,
  758. .leader3-icon3,
  759. .leader3-icon4,
  760. .leader3-icon5 {
  761. position: absolute;
  762. background: url(../images/Edit-bg.png) no-repeat;
  763. background-size: 247px auto;
  764. -webkit-transition: all .3s ease-in
  765. }
  766. .leader3-icon1 {
  767. width: 141px;
  768. height: 95px;
  769. left: 0;
  770. top: 0
  771. }
  772. .leader3-icon2 {
  773. width: 106px;
  774. height: 95px;
  775. right: 0;
  776. top: 0;
  777. background-position: right 0
  778. }
  779. .leader3-icon3 {
  780. width: 106px;
  781. height: 109px;
  782. right: 0;
  783. top: 95px;
  784. background-position: right -95px
  785. }
  786. .leader3-icon4 {
  787. width: 247px;
  788. height: 58px;
  789. left: 0;
  790. bottom: 0;
  791. background-position: left -204px
  792. }
  793. .leader3-icon5 {
  794. width: 79px;
  795. height: 262px;
  796. left: 0;
  797. bottom: 0;
  798. background-position: left 0
  799. }
  800. .leader3-arrow {
  801. position: absolute;
  802. width: 52px;
  803. height: 68px;
  804. top: 0;
  805. left: 53px;
  806. background: url(../images/Edit-arrow.png) no-repeat;
  807. background-size: 52px auto;
  808. -webkit-transition: all .3s ease-in
  809. }
  810. .scene-5-item2 {
  811. background:url(../images/wap_banner_1.jpg) top center no-repeat;
  812. background-size:100%;
  813. }
  814. .scene-5-item3 {
  815. background:url(../images/wap_banner_2.jpg) top center no-repeat;
  816. background-size:100%;
  817. }
  818. .pop3 {
  819. background: #598300
  820. }
  821. .foot3 li {
  822. }
  823. .foot3 li.active {
  824. background: #ea094b;
  825. opacity: 1;
  826. }
  827. .foot3 li.active:after{
  828. border: 0;
  829. }
  830. .view6 {
  831. background: url(../images/wap_banner_7.jpg) top center no-repeat;
  832. background-size:100%;
  833. }
  834. .view7 {
  835. background: url(../images/wap_banner_8.jpg) top center no-repeat;
  836. background-size:100%;
  837. }
  838. .leader4 {
  839. width: 268px;
  840. height: 237px;
  841. margin: -118px 0 0 -134px;
  842. display: none;
  843. opacity: 0
  844. }
  845. .leader4 .leader-ch {
  846. position: relative;
  847. z-index: 2;
  848. top: 0px
  849. }
  850. .leader4 img {
  851. width: 100%
  852. }
  853. .leader4.show {
  854. opacity: 1;
  855. display: block;
  856. -webkit-animation: heartbeat .4s ease-in
  857. }
  858. .leader4-bg {
  859. position: absolute;
  860. width: 238px;
  861. height: 237px;
  862. left: 50%;
  863. top: 50%;
  864. margin: -118px 0 0 -119px;
  865. background: url(../images/technology-bg.png) no-repeat;
  866. background-size: 238px auto
  867. }
  868. .leader4-bg.show {
  869. display: block;
  870. opacity: 1;
  871. -webkit-animation: heartbeat .4s ease-in
  872. }
  873. .scene-6-item1 .c-item-title {
  874. background-position: -101px -146px
  875. }
  876. .scene-6-item2 {
  877. background: #8bd2f3
  878. }
  879. .pop4 {
  880. background: #005882
  881. }
  882. .foot4 li {
  883. }
  884. .foot4 li.active {
  885. color: #3385ac
  886. }
  887. .scene-7 {
  888. background: #ffbe00
  889. }
  890. .scene-7 .end-page {
  891. width: 100%;
  892. height: 100%;
  893. background: url(../images/end-bg.png) center 30% no-repeat;
  894. background-size: 300px auto
  895. }
  896. .scene-7 .end-page-content {
  897. position: absolute;
  898. bottom: 18%;
  899. padding: 0;
  900. width: 100%;
  901. text-align: center
  902. }
  903. .scene-7 .end-page-content p {
  904. font-size: 1.6rem;
  905. line-height: 20px
  906. }
  907. .scene-7 .end-page-content .ct {
  908. padding-bottom: 5px
  909. }
  910. .home_breathe {
  911. position: absolute;
  912. width: 44px;
  913. height: 44px;
  914. border-radius: 22px;
  915. left: 50%;
  916. bottom: 25px;
  917. margin-left: -22px;
  918. background-color: #fff;
  919. opacity: 1;
  920. -webkit-animation: home_breathe 1s linear infinite
  921. }
  922. .dlg_box{
  923. width:100%;height:100px;background:url(../images/wap_logo.png) 4% 14% no-repeat;position:relative;background-size:7em 2.2em;
  924. }
  925. .dlg_box ul{padding: 15% 3% 3% 3%;}
  926. .dlg_box ul li{
  927. display: inline-block;width: 24.5%;padding: 5px 0;
  928. }
  929. .dlg_box ul li img{width: 100%;}
  930. @-webkit-keyframes move {
  931. 0% {
  932. top: 0
  933. }
  934. 100% {
  935. top: 10px
  936. }
  937. }
  938. @-webkit-keyframes scale {
  939. 0% {
  940. opacity: .5;
  941. -webkit-transform: scale(1)
  942. }
  943. 100% {
  944. opacity: 1;
  945. -webkit-transform: scale(0.7)
  946. }
  947. }
  948. @-webkit-keyframes rotate {
  949. 0% {
  950. -webkit-transform: rotate(0deg)
  951. }
  952. 100% {
  953. -webkit-transform: rotate(360deg)
  954. }
  955. }
  956. @-webkit-keyframes rotate2 {
  957. 0% {
  958. -webkit-transform: rotate(0deg)
  959. }
  960. 100% {
  961. -webkit-transform: rotate(-360deg)
  962. }
  963. }
  964. @-webkit-keyframes arrow {
  965. 0% {
  966. opacity: 0;
  967. -webkit-transform: translate(0, 5px) rotate(45deg)
  968. }
  969. 50% {
  970. opacity: 1;
  971. -webkit-transform: translate(0, -5px) rotate(45deg)
  972. }
  973. 100% {
  974. opacity: 0;
  975. -webkit-transform: translate(0, -10px) rotate(45deg)
  976. }
  977. }
  978. @-webkit-keyframes iphone {
  979. 0% {
  980. -webkit-transform: rotate(-90deg)
  981. }
  982. 25% {
  983. -webkit-transform: rotate(0deg)
  984. }
  985. 50% {
  986. -webkit-transform: rotate(0deg)
  987. }
  988. 75% {
  989. -webkit-transform: rotate(-90deg)
  990. }
  991. 100% {
  992. -webkit-transform: rotate(-90deg)
  993. }
  994. }
  995. @-webkit-keyframes heartbeat {
  996. 0% {
  997. -webkit-transform: scale(0, 0);
  998. opacity: 0
  999. }
  1000. 25% {
  1001. -webkit-transform: scale(1.3, 1.3);
  1002. opacity: 1
  1003. }
  1004. 50% {
  1005. -webkit-transform: scale(0.9, .9)
  1006. }
  1007. 75% {
  1008. -webkit-transform: scale(1.2, 1.2)
  1009. }
  1010. 100% {
  1011. -webkit-transform: scale(1, 1)
  1012. }
  1013. }
  1014. @-webkit-keyframes display {
  1015. 0% {
  1016. -webkit-transform: scale(0, 0);
  1017. opacity: 0
  1018. }
  1019. 25% {
  1020. opacity: .3
  1021. }
  1022. 50% {
  1023. opacity: .6
  1024. }
  1025. 75% {
  1026. opacity: .8
  1027. }
  1028. 100% {
  1029. -webkit-transform: scale(1, 1);
  1030. opacity: 1
  1031. }
  1032. }
  1033. @-webkit-keyframes home_breathe {
  1034. 0% {
  1035. -webkit-transform: scale(1, 1);
  1036. opacity: .3
  1037. }
  1038. 80% {
  1039. -webkit-transform: scale(1.8, 1.8);
  1040. opacity: 0
  1041. }
  1042. 100% {
  1043. -webkit-transform: scale(1.8, 1.8);
  1044. opacity: 0
  1045. }
  1046. }
  1047. @-webkit-keyframes rotation {
  1048. 0% {
  1049. -webkit-transform: rotateZ(0deg)
  1050. }
  1051. 25% {
  1052. -webkit-transform: rotateZ(180deg)
  1053. }
  1054. 50% {
  1055. -webkit-transform: rotateZ(360deg)
  1056. }
  1057. 75% {
  1058. -webkit-transform: rotateZ(540deg)
  1059. }
  1060. 100% {
  1061. -webkit-transform: rotateZ(720deg)
  1062. }
  1063. }