shanghu.css 21 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367
  1. @charset "utf-8";
  2. .i-main{
  3. width:600px;
  4. position:absolute;
  5. top:32%;
  6. left:50%;
  7. margin-left:-300px;
  8. }
  9. @keyframes fadeIn{
  10. 0%{
  11. opacity:0
  12. }
  13. 100%{
  14. opacity:1
  15. }
  16. }
  17. @-webkit-keyframes fadeIn{
  18. 0%{
  19. opacity:0
  20. }
  21. 100%{
  22. opacity:1
  23. }
  24. }
  25. .i-btn-box{
  26. text-align:center;
  27. margin-top:30px;
  28. }
  29. .i-btn-box a{
  30. height:36px; line-height:36px;
  31. color:#fff;
  32. width:196px;
  33. border-radius:2px;
  34. display:inline-block;
  35. font-size: 16px;
  36. margin:0 8px;
  37. -webkit-transition:all ease 0.5s;
  38. -moz-transition:all ease 0.5s;
  39. -ms-transition:all ease 0.5s;
  40. -o-transition:all ease 0.5s;
  41. transition:all ease 0.5s;
  42. }
  43. .i-btn-box a.business{
  44. border:1px solid #2e92ff;
  45. background:#2e92ff;
  46. }
  47. .i-btn-box a.business:hover{
  48. background:#117cf0;
  49. border:1px solid #117cf0;
  50. }
  51. .i-btn-box a.user{
  52. border:1px solid #fff;
  53. border:1px solid rgba(255,255,255, 0.6);
  54. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff); /*ie8背景半透明*/
  55. background:rgba(255,255,255, 0.2);
  56. }
  57. .i-btn-box a.user:hover{
  58. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#55ffffff,endColorstr=#55ffffff);
  59. background:rgba(255,255,255, 0.4);
  60. }
  61. .i-bg{
  62. width:100%;
  63. height:100%;
  64. background:url(../images/home_bg.jpg) center center no-repeat;
  65. -webkit-animation-fill-mode: both;
  66. animation-fill-mode: both;
  67. background-attachment:fixed;
  68. zoom:1;
  69. animation:zoomIn 3s ease;
  70. }
  71. .i-slogan{
  72. background:url(../picture/slogan01.png) center center no-repeat;
  73. width:600px;
  74. height:150px;
  75. margin:0 auto;
  76. overflow:hidden;
  77. text-indent:-9999px;
  78. animation:fadeIn 3s ease;
  79. -webkit-animation-fill-mode: both;
  80. animation-fill-mode: both;
  81. -webkit-animation-fill-mode: both;
  82. }
  83. body{
  84. font-size: 14px;
  85. }
  86. .top{
  87. height:30px; line-height:30px;
  88. position:absolute;
  89. left:0;
  90. right:0;
  91. top:0;
  92. z-index:999;
  93. min-width:1200px;
  94. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff);
  95. background:rgba(255,255,255, 0.8);
  96. }
  97. .top-nav{
  98. font-size: 16px;
  99. }
  100. .top-nav a{
  101. display:inline-block;
  102. margin-right:40px;
  103. color:#666
  104. }
  105. .top-nav a.cur,
  106. .top-nav a:hover{
  107. color:#333;
  108. }
  109. .language{
  110. float:right;
  111. height:22px;
  112. }
  113. .language a{
  114. display:block;
  115. /* background:url(../images/icon.png) 28px -664px;*/
  116. padding-right:10px;
  117. }
  118. .language a:hover{
  119. color:#2e92ff;
  120. background-position:28px -706px;
  121. }
  122. /*主导航扩展 */
  123. .sh-header{
  124. background:none;
  125. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff);
  126. background:rgba(255,255,255, 0.5);
  127. width:100%;
  128. min-width:1200px;
  129. position:absolute;
  130. z-index:999;
  131. top:30px;
  132. height:60px;
  133. }
  134. .header-link a{
  135. line-height:30px;
  136. color:#fff;
  137. margin-top:10px;
  138. display:inline-block;
  139. padding:5px 10px;
  140. }
  141. .header-link a:hover{
  142. color:#333;
  143. }
  144. .sh-logo{
  145. margin:15px 0 0 0;
  146. }
  147. .sh-nav{
  148. margin-left:50px;
  149. }
  150. .sh-nav li{
  151. float:left;
  152. line-height:60px;
  153. }
  154. .sh-nav li a{
  155. display:block;
  156. padding:0 20px;
  157. font-size: 18px;
  158. color:#fff
  159. }
  160. .sh-nav li a.cur,
  161. .sh-nav li a:hover{
  162. color:#333;
  163. }
  164. .head{
  165. height:60px;
  166. line-height:60px;
  167. overflow:hidden;
  168. position:fixed;
  169. width:100%;
  170. left:0;
  171. right:0;
  172. top:0;
  173. z-index:99999;
  174. background:#fff;
  175. border-bottom:1px solid #f2f2f2;
  176. box-shadow:0 3px 3px rgba(0,0,0, 0.2);
  177. }
  178. .head-nav{
  179. float:left
  180. }
  181. .head-nav a{
  182. font-size: 18px;
  183. color:#999;
  184. line-height:30px;
  185. margin-right:60px;
  186. display:inline-block
  187. }
  188. .head-nav a.cur,
  189. .head-nav a:hover{
  190. color:#333;
  191. }
  192. .head-link{
  193. float:right;
  194. height:30px;
  195. }
  196. .head-link a{
  197. color:#2e92ff;
  198. display:inline-block;
  199. line-height:30px;
  200. }
  201. .head-link a:hover{
  202. text-decoration:underline;
  203. }
  204. /* banner */
  205. .b-banner{
  206. width:100%;
  207. background:url(../images/sh_bg.jpg) top center no-repeat;
  208. min-width:1200px;
  209. background-size:cover;
  210. }
  211. .b-banner .inner{
  212. width:1200px;
  213. min-height:100%;
  214. position:relative;
  215. margin:0 auto;
  216. }
  217. .slogan01{
  218. width:100%;
  219. text-align:center;
  220. overflow:hidden;
  221. position:absolute;
  222. top:40%;
  223. animation:3s ease fadeIn;
  224. -webkit-animation-fill-mode: both;
  225. animation-fill-mode: both;
  226. }
  227. .slogan01 img{
  228. width:80%;
  229. }
  230. @media screen and (max-width: 1200px) {
  231. .slogan01 img{
  232. width:60%;
  233. }
  234. }
  235. .theme-products{
  236. position:absolute;
  237. width:100%;
  238. bottom:50px;
  239. text-align:center;
  240. }
  241. .columns{
  242. *display:inline;
  243. display:inline-block;
  244. overflow:hidden;
  245. text-align:center;
  246. width:33%;
  247. padding-top:10px;
  248. }
  249. .columns h2{
  250. font-size: 20px;
  251. margin:5px 0 10px 0
  252. }
  253. .columns a{
  254. color:#fff;
  255. opacity:1;
  256. display:block;
  257. }
  258. .columns a:hover{
  259. opacity:0.8;
  260. }
  261. .columns a:hover .pro-icon{
  262. -webkit-animation: moveUp ease 0.5s;
  263. -moz-animation: moveUp ease 0.5s;
  264. -ms-animation: moveUp ease 0.5s;
  265. animation: moveUp ease 0.5s;
  266. }
  267. @keyframes moveUp{
  268. 0%{
  269. -webkit-transform:translateY(0);
  270. transform:translateY(0);
  271. }
  272. 50%{
  273. -webkit-transform:translateY(-10px);
  274. transform:translateY(-10px);
  275. }
  276. 100%{
  277. -webkit-transform:translateY(0);
  278. transform:translateY(0);
  279. }
  280. }
  281. @-webkit-keyframes moveUp{
  282. 0%{
  283. transform:translateY(0);
  284. }
  285. 50%{
  286. transform:translateY(-10px);
  287. }
  288. 100%{
  289. transform:translateY(0);
  290. }
  291. }
  292. .pro-icon{
  293. width:57px;
  294. height:57px;
  295. overflow:hidden;
  296. display:block;
  297. margin:0 auto;
  298. vertical-align:top;
  299. background:url(../images/ic_pro.png) no-repeat;
  300. }
  301. .pro-icon.ic-pro1{ background-position:0 0;}
  302. .pro-icon.ic-pro2{ background-position:0 -62px;}
  303. .pro-icon.ic-pro3{ background-position:0 -120px;}
  304. /**/
  305. .swiper-slide{
  306. position: relative;
  307. }
  308. .swiper-button-prev,
  309. .swiper-button-next{
  310. width:60px;
  311. height:60px;
  312. position:absolute;
  313. background:url(../images/icon.png) no-repeat;
  314. top:50%;
  315. margin-top:-30px;
  316. }
  317. .swiper-button-prev{
  318. background-position:0 -310px;
  319. left:0;
  320. }
  321. .swiper-button-prev:hover{
  322. cursor:pointer;
  323. background-position:0 -436px;
  324. }
  325. .swiper-button-next{
  326. background-position:0 -373px;
  327. right:0;
  328. }
  329. .swiper-button-next:hover{
  330. cursor:pointer;
  331. background-position:0 -499px;
  332. }
  333. .swiper-button-prev.disabled{
  334. background-position:0 -310px;
  335. opacity:0.5;
  336. cursor:default
  337. }
  338. .swiper-button-next.disabled{
  339. background-position:0 -373px;
  340. opacity:0.4;
  341. cursor:default
  342. }
  343. .btn1{
  344. border:1px solid #2e92ff;
  345. color:#2e92ff;
  346. display:inline-block;
  347. padding:10px 30px;
  348. border-radius:4px;
  349. margin-right:30px;
  350. -webkit-transition:all ease 0.3s;
  351. -moz-transition:all ease 0.3s;
  352. -ms-transition:all ease 0.3s;
  353. transition:all ease 0.3s;
  354. }
  355. .btn1:hover{
  356. background:#2e92ff;
  357. color:#fff;
  358. }
  359. .payment h4,
  360. .receipt h4,
  361. .account h4{
  362. color:#999;
  363. font-size:24px;
  364. }
  365. /*收款*/
  366. .mobile-pay, .kuaijie, .renzheng, .o2o, .saoma{
  367. width:100%;
  368. height:100%;
  369. position:relative;
  370. overflow:hidden
  371. }
  372. .payment{
  373. border-bottom:1px solid #f2f2f2;
  374. background:#fff;
  375. position:relative;
  376. padding:60px 0 0 0;
  377. }
  378. .pay-method{
  379. text-align:center;
  380. padding-bottom:60px;
  381. }
  382. .pay-method a{
  383. display:inline-block;
  384. padding:10px 20px;
  385. }
  386. .pay-method a:hover,
  387. .pay-method a.cur{
  388. color:#2e92ff;
  389. }
  390. .mobile-pay-txt{
  391. margin:180px 0 0 150px;
  392. }
  393. .mobile-pay-txt h2{
  394. font-size:32px;
  395. color:#999;
  396. }
  397. .mobile-pay-txt h3{
  398. font-size: 52px;
  399. margin:10px 0 30px 0
  400. }
  401. .mobile-pay-txt p{
  402. font-size: 32px;
  403. }
  404. .mobile-pay-txt p span{
  405. display:inline-block;
  406. margin-right:20px;
  407. }
  408. .mobile-pay-txt a{
  409. margin-top:40px;
  410. }
  411. .mobile-pay-img{
  412. position:absolute;
  413. right:150px;
  414. top:0;
  415. }
  416. .kuaijie-txt{
  417. position:absolute;
  418. top:160px;
  419. left:140px;
  420. }
  421. .kuaijie-txt h2{
  422. font-size:32px;
  423. color:#999;
  424. margin:50px 0 0 0
  425. }
  426. .kuaijie-txt h3{
  427. font-size: 36px;
  428. margin:20px 0;
  429. line-height:48px
  430. }
  431. .kuaijie-txt p{
  432. font-size: 20px;
  433. padding:0 0 20px 0;
  434. color:#999
  435. }
  436. .kuaijie-img{
  437. position:absolute;
  438. right:50px;
  439. top:150px
  440. }
  441. .kuaijie-txt a{
  442. margin:0 0 30px 0
  443. }
  444. .rz-txt{
  445. position:absolute;
  446. left:150px;
  447. top:200px;
  448. }
  449. .rz-txt h2{
  450. font-size:32px;
  451. color:#999;
  452. }
  453. .rz-txt h3{
  454. font-size: 36px;
  455. line-height:48px;
  456. margin:20px 0 40px 0
  457. }
  458. .rz-img{
  459. position:absolute;
  460. right:200px;
  461. top:50px
  462. }
  463. .o2o-txt{
  464. position:absolute;
  465. top:180px;
  466. left:170px;
  467. }
  468. .o2o-txt h2{
  469. font-size:32px;
  470. color:#999;
  471. }
  472. .o2o-txt h3{
  473. font-size: 30px;
  474. margin:20px 0;
  475. }
  476. .o2o-txt p{
  477. font-size:20px;
  478. line-height:32px;
  479. color:#999;
  480. margin-bottom:40px;
  481. }
  482. .o2o-img{
  483. position:absolute;
  484. right:130px;
  485. top:0;
  486. }
  487. .sm-txt{
  488. position:absolute;
  489. top:180px;
  490. left:180px;
  491. }
  492. .sm-txt h2{
  493. font-size:32px;
  494. color:#999;
  495. }
  496. .sm-txt h3{
  497. font-size: 36px;
  498. line-height:48px;
  499. margin:20px 0 40px 0
  500. }
  501. .sm-img{
  502. position:absolute;
  503. right:180px;
  504. }
  505. .kjsk-txt{
  506. position:absolute;
  507. top:160px;
  508. left:100px;
  509. }
  510. .kjsk-txt h2{
  511. font-size:32px;
  512. color:#999;
  513. margin:50px 0 0 0
  514. }
  515. .kjsk-txt h3{
  516. font-size: 36px;
  517. margin:20px 0;
  518. line-height:48px
  519. }
  520. .kjsk-txt p{
  521. font-size: 20px;
  522. padding:0 0 20px 0;
  523. line-height: 30px;
  524. color:#999
  525. }
  526. .kjsk-img{
  527. position:absolute;
  528. right:30px;
  529. top:100px
  530. }
  531. .kjsk-txt a{
  532. margin:0 0 30px 0
  533. }
  534. /*付款*/
  535. .receipt{
  536. padding:100px 0;
  537. background:#e9f6fb
  538. }
  539. .receipt-intro{
  540. overflow:hidden;
  541. height:300px;
  542. }
  543. .intro-txt{
  544. width:56%;
  545. float:left;
  546. }
  547. .intro-img{
  548. position:absolute;
  549. right:0;
  550. top:0;
  551. }
  552. .receipt-intro h3{
  553. font-size: 36px;
  554. margin:40px 0 20px 0;
  555. line-height:48px;
  556. }
  557. .receipt-intro p{
  558. line-height:30px;
  559. font-size: 18px;
  560. color:#999
  561. }
  562. .receipt-feature{
  563. text-align:center;
  564. padding:100px 0 0 0;
  565. overflow:hidden;
  566. clear:both;
  567. }
  568. .receipt-feature .item{
  569. display:inline-block;
  570. vertical-align:top;
  571. width:33%;
  572. }
  573. .receipt-feature .item h5{
  574. font-size: 20px;
  575. margin:24px 0;
  576. display:block;
  577. color:#2e92ff
  578. }
  579. .receipt-feature .item p{
  580. display:block;
  581. line-height:24px;
  582. font-size: 16px;
  583. color:#999
  584. }
  585. .receipt-feature .item .ic{
  586. display:block;
  587. width:60px;
  588. height:60px;
  589. margin:0 auto;
  590. overflow:hidden;
  591. background:url(../images/ic_pro.png) no-repeat;
  592. }
  593. .receipt-feature .item .ic.icon1{
  594. background-position:0 -220px;
  595. }
  596. .receipt-feature .item .ic.icon2{
  597. background-position:0 -299px;
  598. }
  599. .receipt-feature .item .ic.icon3{
  600. background-position:0 -394px;
  601. }
  602. /* 账户体系 */
  603. .account{
  604. position:relative;
  605. height:732px;
  606. overflow:hidden;
  607. background:url(../images/account_bg.png) repeat-x;
  608. }
  609. .account-txt{
  610. position:absolute;
  611. top:280px;
  612. }
  613. .account-txt h3{
  614. font-size: 48px;
  615. margin:80px 0 0 0px;
  616. }
  617. .account-txt p{
  618. font-size: 32px;
  619. margin:20px 0 0 0px;
  620. }
  621. .account-txt p span{
  622. display:inline-block;
  623. margin-right:30px;
  624. }
  625. .account-txt a{
  626. border: 1px solid #2e92ff;
  627. border-radius: 4px;
  628. color: #fff;
  629. background:#2e92ff;
  630. display: inline-block;
  631. margin: 40px 0 0 0px;
  632. padding: 10px 30px;
  633. -webkit-transition:all ease 0.3s;
  634. -moz-transition:all ease 0.3s;
  635. -ms-transition:all ease 0.3s;
  636. transition:all ease 0.3s;
  637. }
  638. .account-txt a:hover{
  639. border: 1px solid #2e92ff;
  640. background:#117aec;
  641. color:#fff;
  642. }
  643. .account-img{
  644. position:absolute;
  645. right:0;
  646. top:200px;
  647. }
  648. /* samsung pay */
  649. .samsung_banner{
  650. background:url(../images/samsung_pay_bg.jpg) center center no-repeat;
  651. overflow:hidden;
  652. min-width:1200px;
  653. min-height:750px;
  654. }
  655. .sam_inner{
  656. margin:0 auto;
  657. margin-top:10%;
  658. text-align:center;
  659. color:#fff;
  660. max-width:1200px;
  661. }
  662. .sam_inner h2{
  663. font-size: 48px;
  664. margin-bottom:40px;
  665. }
  666. .sam_inner h3{
  667. font-size: 64px;
  668. line-height:90px;
  669. margin-bottom:3%
  670. }
  671. .sam_inner p{
  672. padding:0 150px;
  673. font-size: 18px;
  674. line-height:30px;
  675. margin-bottom:20px;
  676. }
  677. .samsung_feature{
  678. background:#fff url(../images/samsung_bg01.jpg) repeat-x;
  679. min-width:1200px;
  680. }
  681. .samsung_feature .inner{
  682. width:1200px;
  683. margin:0 auto;
  684. position:relative;
  685. overflow:hidden;
  686. min-height:750px;
  687. }
  688. .samsung_txt{
  689. margin:100px 0 0 150px;
  690. }
  691. .samsung_title{
  692. font-size: 36px;
  693. color:#bec26b;
  694. margin-bottom:40px
  695. }
  696. .samsung_txt h3{
  697. font-size: 48px;
  698. margin:20px 0 40px 0
  699. }
  700. .samsung_txt dt{
  701. font-size:24px;
  702. margin-bottom:10px;
  703. }
  704. .samsung_txt dd{
  705. margin-bottom:50px;
  706. color:#999;
  707. font-size: 18px;
  708. line-height:36px;
  709. }
  710. .samsung_img{
  711. position:absolute;
  712. right:50px;
  713. bottom:19px;
  714. text-align:right
  715. }
  716. .samsung_img img{
  717. width:80%;
  718. }
  719. .samsung_faq{
  720. padding:80px 0 60px 0;
  721. }
  722. .samsung_faq h2{ text-align:center}
  723. .samsung_faq dl{
  724. padding:0 100px 0 150px;
  725. }
  726. .samsung_faq dt{
  727. font-size: 18px;
  728. margin-bottom:10px;
  729. color:#bec26b
  730. }
  731. .samsung_faq dd{
  732. color:#999;
  733. font-size: 14px;
  734. line-height:24px;
  735. margin-bottom:30px;
  736. }
  737. .samsung_faq dd a{
  738. color:#2e92ff;
  739. }
  740. .samsung_faq dd a:hover{
  741. text-decoration:underline;
  742. }
  743. .support_bank{
  744. background:#bec26b;
  745. text-align:center;
  746. padding:180px 0;
  747. color:#fff;
  748. min-width:1200px;
  749. }
  750. .support_bank h3{
  751. font-size: 36px;
  752. margin-bottom:20px;
  753. }
  754. .support_bank p{
  755. font-size: 16px;
  756. line-height:24px;
  757. margin-bottom:60px;
  758. }
  759. .support_bank a{
  760. border:1px solid #fff;
  761. color:#fff;
  762. display:inline-block;
  763. padding:10px 30px;
  764. border-radius:4px;
  765. margin-right:30px;
  766. -webkit-transition:all ease 0.3s;
  767. -moz-transition:all ease 0.3s;
  768. -ms-transition:all ease 0.3s;
  769. transition:all ease 0.3s;
  770. }
  771. .support_bank a:hover{
  772. background:#fff;
  773. color:#bec26b;
  774. }
  775. .arrow-down{
  776. width:110px;
  777. height:110px;
  778. background:url(../images/combined shape.png) no-repeat;
  779. margin:100px auto 0;
  780. }
  781. .kj_banner{
  782. padding-bottom:60px;
  783. height:580px;
  784. }
  785. .kj-banner-txt{
  786. position:absolute;
  787. top:160px;
  788. left:130px;
  789. }
  790. .kj-banner-txt h2{
  791. font-size: 24px;
  792. margin-top:80px;
  793. color:#999;
  794. }
  795. .kj-banner-txt h3{
  796. font-size: 36px;
  797. margin:20px 0;
  798. line-height:48px
  799. }
  800. .kj-banner-txt p{
  801. font-size: 24px;
  802. color:#999
  803. }
  804. .kj-banner-img{
  805. position:absolute;
  806. right:0;
  807. top:160px;
  808. }
  809. .pay-box{
  810. padding:60px 0 0 0;
  811. overflow:hidden
  812. }
  813. .pay-box h2{
  814. text-align:center;
  815. font-size: 24px;
  816. margin-bottom:20px;
  817. }
  818. .tab-title{
  819. text-align:center;
  820. }
  821. .tab-title a{
  822. font-size: 18px;
  823. display:inline-block;
  824. padding:10px 60px;
  825. color:#999;
  826. }
  827. .tab-title a:hover{
  828. cursor:pointer;
  829. }
  830. .tab-title a.cur{
  831. color:#333;
  832. }
  833. .tab-con{
  834. padding:20px 0 80px 0;
  835. overflow:hidden;
  836. }
  837. .tab-item{
  838. display:none;
  839. }
  840. .feature-box{
  841. background:#fff;
  842. padding:60px 0 0 0;
  843. }
  844. .feature-box ul{
  845. padding-bottom:60px;
  846. overflow:hidden;
  847. width:1000px;
  848. margin:0 auto;
  849. margin-left:180px;
  850. }
  851. .feature-box li{
  852. float:left;
  853. width:500px;
  854. overflow:hidden;
  855. }
  856. .kj-icon{
  857. width:130px;
  858. height:130px;
  859. background:url(../images/ic_pro.png) no-repeat;
  860. float:left;
  861. }
  862. .kj-icon.ic1{
  863. background-position:0 -488px;
  864. }
  865. .kj-icon.ic2{
  866. background-position:0 -618px;
  867. }
  868. .kj-icon.ic3{
  869. background-position:0 -748px;
  870. }
  871. .kj-icon.ic4{
  872. background-position:0 -883px;
  873. }
  874. .kj-icon.ic5{
  875. background-position:0 -1019px;
  876. }
  877. .kj-icon.ic6{
  878. background-position:0 -1155px;
  879. }
  880. .txt-box{
  881. float:left;
  882. margin-left:30px;
  883. }
  884. .txt-box h3{
  885. font-size: 20px;
  886. margin-bottom:20px;
  887. }
  888. .txt-box p{
  889. color:#999;
  890. line-height:24px;
  891. }
  892. .pay-step{
  893. padding:30px 0 0 0;
  894. text-align:center
  895. }
  896. .pay-step span{
  897. display:inline-block;
  898. vertical-align:top;
  899. padding:0 20px;
  900. cursor:pointer;
  901. color:#999
  902. }
  903. .pay-step span.cur,
  904. .pay-step span:hover{
  905. color:#333;
  906. }
  907. .rz_banner{
  908. height:700px;
  909. background:#fff;
  910. }
  911. .rz_banner .rz-txt{
  912. top:300px;
  913. left:150px;
  914. }
  915. .rz_banner .rz-img{
  916. top:120px;
  917. }
  918. .rz-icon{
  919. width:130px;
  920. height:130px;
  921. background:url(../images/ic_pro.png) no-repeat;
  922. float:left;
  923. }
  924. .rz-icon.ic1{
  925. background-position:0 -2688px;
  926. }
  927. .rz-icon.ic2{
  928. background-position:0 -2818px;
  929. }
  930. .rz-icon.ic3{
  931. background-position:0 -2948px;
  932. }
  933. .rz-icon.ic4{
  934. background-position:0 -3083px;
  935. }
  936. .rz-icon.ic5{
  937. background-position:0 -3219px;
  938. }
  939. .rz-icon.ic6{
  940. background-position:0 -3354px;
  941. }
  942. .o2o_banner{
  943. height:730px;
  944. }
  945. .o2o_banner .o2o-img{
  946. top:100px;
  947. }
  948. .o2o_banner .o2o-txt{
  949. top:280px;
  950. left:50px;
  951. }
  952. .o2o_pay{
  953. background:#fff9fb url(../images/o2o_bg.png) left top repeat-x;
  954. padding:110px 0 60px 0;
  955. }
  956. .o2o_pay ul{
  957. padding:0 0 0 140px;
  958. }
  959. .o2o_pay ul li{
  960. margin-bottom:60px;
  961. }
  962. .o2o-icon{
  963. width:130px;
  964. height:130px;
  965. background:url(../images/ic_pro.png) no-repeat;
  966. float:left;
  967. margin-right:50px;
  968. }
  969. .o2o-icon.ic1{
  970. background-position:0 -1297px;
  971. }
  972. .o2o-icon.ic2{
  973. background-position:0 -1442px;
  974. }
  975. .o2o-icon.ic3{
  976. background-position:0 -1585px;
  977. }
  978. .o2o-icon.ic4{
  979. background-position:0 -1744px;
  980. }
  981. .o2o-icon.ic5{
  982. background-position:0 -1901px;
  983. }
  984. .o2o-icon.ic6{
  985. background-position:0 -2042px;
  986. }
  987. .o2o-feature{
  988. float:left;
  989. margin:15px 0 0 0
  990. }
  991. .o2o-feature h2{
  992. margin-bottom:10px;
  993. display:inline-block;
  994. line-height:50px;
  995. border-bottom:2px solid #c4c0c3;
  996. }
  997. .o2o-feature p{
  998. color:#888;
  999. line-height:25px;
  1000. padding-left:40px;
  1001. }
  1002. .sm_banner{
  1003. height:780px;
  1004. }
  1005. .sm_banner .sm-txt{
  1006. top:280px;
  1007. }
  1008. .sm_banner .sm-img{
  1009. top:120px;
  1010. }
  1011. .sm_pay{
  1012. background:#f0fdfe url(../images/sm_bg.png) left top repeat-x;
  1013. padding:110px 0 60px 0;
  1014. }
  1015. .sm_pay ul{
  1016. padding:0 0 0 150px;
  1017. }
  1018. .sm_pay ul li{
  1019. margin-bottom:60px;
  1020. }
  1021. .sm-icon{
  1022. width:130px;
  1023. height:130px;
  1024. background:url(../images/ic_pro.png) no-repeat;
  1025. float:left;
  1026. margin-right:80px;
  1027. }
  1028. .sm-icon.ic1{
  1029. background-position:0 -2192px;
  1030. }
  1031. .sm-icon.ic2{
  1032. background-position:0 -2346px;
  1033. }
  1034. .sm-icon.ic3{
  1035. background-position:0 -2499px;
  1036. }
  1037. .sm-feature{
  1038. margin:15px 0 0 50px
  1039. }
  1040. .sm-feature p{
  1041. color:#6b6b6a;
  1042. line-height:30px;
  1043. padding:20px 0 0 0;
  1044. font-size: 16px;
  1045. }
  1046. .sm-title{
  1047. color:#4588d6;
  1048. font-size: 24px;
  1049. margin-bottom:50px
  1050. }
  1051. .zh_feature{
  1052. background:#fff;
  1053. padding:100px 0;
  1054. }
  1055. .zh_txt{
  1056. overflow:hidden;
  1057. width:100%;
  1058. }
  1059. .zh_txt div{
  1060. float:left;
  1061. }
  1062. .zh_txt h2{
  1063. font-size: 24px;
  1064. color:#666;
  1065. }
  1066. .zh_txt h3{
  1067. display:block;
  1068. font-size:32px;
  1069. line-height:40px;
  1070. margin:20px 0;
  1071. }
  1072. .zh_txt p{
  1073. line-height:25px;
  1074. float:right;
  1075. width:320px;
  1076. }
  1077. .zh_tab{
  1078. width:960px;
  1079. margin:0 auto;
  1080. }
  1081. .zh_tab .tab_title{
  1082. text-align:right;
  1083. width:220px;
  1084. float:left;
  1085. margin-top:240px;
  1086. }
  1087. .zh_tab .tab_title a{
  1088. display:inline-block;
  1089. margin:10px 0;
  1090. border:1px solid #cdcdcd;
  1091. border-radius:4px;
  1092. padding:10px 0;
  1093. width:120px;
  1094. text-align:center
  1095. }
  1096. .zh_tab .tab_title a.cur,
  1097. .zh_tab .tab_title a:hover{
  1098. border:1px solid #2e92ff;
  1099. color:#2e92ff;
  1100. }
  1101. .zh_tab .tab_con{
  1102. float:left;
  1103. width:740px;
  1104. }
  1105. .zh_tab .tab_item{
  1106. display:none;
  1107. margin-left:100px;
  1108. }
  1109. .zh_tab .tab_item img{
  1110. float:left;
  1111. }
  1112. .zh_tab .tab_item p{
  1113. padding:200px 0 0 60px;
  1114. line-height:24px;
  1115. float:left;
  1116. }
  1117. .zh_tab .tab_item p strong,
  1118. .zh_tab .tab_item p span{
  1119. display:block;
  1120. }
  1121. .zh_tab .tab_item p strong{
  1122. font-size: 18px;
  1123. }
  1124. .zh_tab .tab_item p span.fz24{
  1125. font-size: 24px;
  1126. margin-bottom:20px;
  1127. color:#333
  1128. }
  1129. .zh_tab .tab_item p span{
  1130. color:#999;
  1131. }
  1132. .zh_pay{
  1133. height:620px;
  1134. background:#fff url(../images/rectangle-6.jpg) center top repeat-y;
  1135. }
  1136. .zh_pay_txt{
  1137. position:absolute;
  1138. top:200px;
  1139. }
  1140. .zh_pay_txt h2{
  1141. color:#666;
  1142. margin-bottom:20px;
  1143. font-size: 24px;
  1144. }
  1145. .zh_pay_txt h3{
  1146. font-size: 32px;
  1147. line-height:48px;
  1148. margin-bottom:15px
  1149. }
  1150. .zh_pay_txt p{
  1151. font-size: 16px;
  1152. line-height:25px;
  1153. color:#666
  1154. }
  1155. .zh_img{
  1156. position:absolute;
  1157. right:0;
  1158. top:200px;
  1159. }
  1160. .zh_fenzhang{
  1161. padding:200px 0;
  1162. background:#f2f2f2;
  1163. }
  1164. .zh_fenzhang a{
  1165. display:block;
  1166. margin:150px auto 0;
  1167. width:360px;
  1168. padding:20px 0;
  1169. background:#2e92ff;
  1170. text-align:center;
  1171. font-size: 18px;
  1172. color:#fff;
  1173. border-radius:4px;
  1174. transition:all ease 0.5s
  1175. }
  1176. .zh_fenzhang a:hover{
  1177. background:#0e7cf3;
  1178. }
  1179. @keyframes fadeIn {
  1180. 0% {
  1181. opacity:0;
  1182. width:80%;
  1183. }
  1184. 100% {
  1185. opacity:1;
  1186. width:100%;
  1187. }
  1188. }
  1189. @-webkit-keyframes fadeIn {
  1190. 0% {
  1191. opacity:0;
  1192. -moz-transform:scale(0.9);
  1193. -webkit-transform:scale(0.9);
  1194. transform:scale(0.9);
  1195. }
  1196. 100% {
  1197. opacity:1;
  1198. -moz-transform:scale(1);
  1199. -webkit-transform:scale(1);
  1200. transform:scale(1);
  1201. }
  1202. }
  1203. @-moz-keyframes fadeIn {
  1204. 0% {
  1205. opacity:0;
  1206. -moz-transform:scale(0.9);
  1207. -webkit-transform:scale(0.9);
  1208. transform:scale(0.9);
  1209. }
  1210. 100% {
  1211. opacity:1;
  1212. -moz-transform:scale(1);
  1213. -webkit-transform:scale(1);
  1214. transform:scale(1);
  1215. }
  1216. }
  1217. @-ms-keyframes fadeIn {
  1218. 0% {
  1219. opacity:0;
  1220. -moz-transform:scale(0.9);
  1221. -webkit-transform:scale(0.9);
  1222. transform:scale(0.9);
  1223. }
  1224. 100% {
  1225. opacity:1;
  1226. -moz-transform:scale(1);
  1227. -webkit-transform:scale(1);
  1228. transform:scale(1);
  1229. }
  1230. }
  1231. .web{
  1232. width:870px;
  1233. height:501px;
  1234. position:relative;
  1235. margin: 0 auto
  1236. }
  1237. .web-inner{
  1238. width:658px;
  1239. height:410px;
  1240. position:absolute;
  1241. left:107px;
  1242. top:29px;
  1243. overflow:hidden;
  1244. }
  1245. .web-inner ul{
  1246. position:absolute;
  1247. }
  1248. .web-inner ul li{
  1249. width:658px;
  1250. height:410px;
  1251. background:#fff;
  1252. float:left;
  1253. }
  1254. .mobile_box{
  1255. margin:60px 0;
  1256. height:640px;
  1257. overflow:hidden
  1258. }
  1259. .mobile_box .side{
  1260. float:left;
  1261. width:200px;
  1262. height:640px;
  1263. margin-left:250px;
  1264. position:relative;
  1265. }
  1266. .mobile_box .side ul{
  1267. width:100%;
  1268. position:absolute;
  1269. height:100px;
  1270. top:50%;
  1271. margin-top:-50px;
  1272. }
  1273. .mobile_box .side li.cur a,
  1274. .mobile_box .side li:hover a{
  1275. color:#333;
  1276. }
  1277. .mobile_box .side li a{
  1278. display:block;
  1279. height:50px;
  1280. line-height:50px;
  1281. text-align:center;
  1282. font-size: 18px;
  1283. color:#999;
  1284. }
  1285. .mobile_box .pay_step{
  1286. float:left;
  1287. margin:35% 0 0 80px;
  1288. }
  1289. .mobile_box .pay_step span{
  1290. line-height:30px;
  1291. color:#999;
  1292. display:block;
  1293. }
  1294. .mobile_box .pay_step span:hover,
  1295. .mobile_box .pay_step span.cur{
  1296. color:#333;
  1297. cursor:pointer
  1298. }
  1299. .container{
  1300. float:left;
  1301. width:750px;
  1302. height:640px;
  1303. overflow:hidden;
  1304. }
  1305. .container .item{
  1306. width:100%;
  1307. height:100%;
  1308. }
  1309. .iphone_box{
  1310. width:260px;
  1311. float:left;
  1312. height:640px;
  1313. position:relative;
  1314. }
  1315. .iphone_box .inner{
  1316. position:absolute;
  1317. width:260px;
  1318. height:458px;
  1319. position:absolute;
  1320. left:18px;
  1321. top:72px;
  1322. overflow:hidden;
  1323. }
  1324. .iphone_box .inner ul{
  1325. position:absolute;
  1326. }
  1327. .iphone_box .inner li{
  1328. float:left;
  1329. width:260px;
  1330. }