style.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. *{
  2. box-sizing: border-box;
  3. }
  4. .body,body,select,input,view,text,button,textarea{
  5. font-family: 'PingFang SC','microsoft yahei',arial,'helvetica neue','hiragino sans gb',sans-serif;
  6. }
  7. body,.body{
  8. font-size: 14px; color: #fff; background-color: #111111;
  9. overflow-x: hidden;line-height: 1.6;
  10. }
  11. a{
  12. color: inherit;
  13. }
  14. a:hover{
  15. color: inherit;
  16. }
  17. img{
  18. max-width: 100%;
  19. }
  20. .clearfix:after{
  21. content: "";display: table; clear: both; height: 0; visibility: hidden;
  22. }
  23. .fl{
  24. float: left;
  25. }
  26. .fr{
  27. float: right;
  28. }
  29. /*header*/
  30. .header{
  31. /*margin-top: 50px; position: absolute;*/ left: 0; right: 0; top: 0;
  32. /**/
  33. background: #111111;
  34. position: fixed;
  35. padding-top: 20px;
  36. padding-bottom: 10px;
  37. z-index: 99;
  38. }
  39. .header .logo{
  40. margin-left: 55px; float: left;
  41. }
  42. .header .nav{
  43. float: right; margin-right: 60px;
  44. font-weight: 400;
  45. }
  46. .header .nav li{
  47. margin-left: 55px;
  48. display: inline-block;
  49. vertical-align: middle;
  50. font-size: 14px;
  51. font-weight: bold;
  52. }
  53. .header .nav li.active a,
  54. .header .nav li a:hover{
  55. color: #369FFF;
  56. }
  57. .form-box{
  58. width: 400px; margin: 200px auto 170px;
  59. }
  60. .form-tit{
  61. text-align: center;font-size: 22px; margin-bottom: 20px;
  62. }
  63. .form{
  64. background: #202020;border-radius: 4px; padding: 55px 55px 55px 55px;
  65. position: relative;
  66. }
  67. .form-err{
  68. background: #FF6A6A;
  69. border-radius: 4px 4px 0 0;
  70. position: absolute; left: 0; right: 0; top: 0;
  71. padding: 10px;
  72. font-style: normal;
  73. font-weight: normal;
  74. font-size: 12px;
  75. text-align: center;
  76. }
  77. .form-list li{
  78. margin-bottom: 15px;
  79. }
  80. .form-list .text{
  81. width: 100%; height: 52px;
  82. background: #111111;
  83. border-radius: 4px; border: 0; font-size: 14px;color: #989898; padding: 0 15px;
  84. border: #111111 solid 1px;
  85. }
  86. .form-list .text-err{
  87. border-color: #FF6A6A;
  88. }
  89. .form-list .textcode{
  90. width: 160px;
  91. }
  92. .form-list .textcode + img{
  93. vertical-align: middle;
  94. width: 116px; height: 52px;
  95. }
  96. .form-list .text:focus{
  97. border: #369FFF solid 1px;
  98. }
  99. .form-list a:hover{
  100. color: #369FFF;
  101. }
  102. .form-btns{
  103. margin-top: 50px;text-align: center;
  104. }
  105. .form-btns li+li{
  106. margin-top: 10px;
  107. }
  108. .form-btns .btn{
  109. width: 100%; height: 55px; background: #FFFFFF; font-size: 16px; color: #111111;
  110. border: 1px solid #FFFFFF;
  111. box-sizing: border-box;
  112. border-radius: 4px;
  113. cursor: pointer;
  114. display: inline-block;
  115. line-height: 55px;
  116. }
  117. .form-btns .btn:hover{
  118. background: #369FFF !important;
  119. border-color: #369FFF !important;
  120. color: #fff !important;
  121. }
  122. .form-btns .btn.btn1{
  123. background: transparent; color: #fff;
  124. }
  125. .form-other{
  126. text-align: center;margin-top: 15px;
  127. }
  128. .form-other .hd{
  129. color: #4E4E4E;
  130. }
  131. .form-other .bd{
  132. margin-top: 15px;
  133. }
  134. /*首页*/
  135. .wrapper{
  136. width: 1440px; margin: 0 auto;
  137. }
  138. .hbanner{
  139. margin-top: 0px;
  140. }
  141. .hbanner .wrapper{
  142. background: url(../imgs/home1.png) no-repeat right ;
  143. background-position-y:25%;
  144. height: 950px;
  145. padding-top: 285px;
  146. }
  147. .hbanner-txt{
  148. padding-left: 155px;
  149. }
  150. .hbanner-txt h2{
  151. font-size: 30px;
  152. line-height: 160%;
  153. color: #fff;
  154. margin-bottom: 55px;
  155. font-weight: bold;
  156. }
  157. .hbanner-txt h2 font{
  158. color: #369FFF;
  159. }
  160. .hbanner-txt .list{
  161. font-size: 14px;
  162. line-height: 20px;
  163. }
  164. .hbanner-txt .list li{
  165. margin-bottom: 24px;
  166. }
  167. .hbanner-txt .list li:last-child{
  168. margin-bottom: 0;
  169. }
  170. .hbanner-txt .list .num{
  171. background: #333333;
  172. border-radius: 1px;
  173. margin-left: 5px;
  174. padding: 0 3px;
  175. font-family: 'Barlow-Regular';
  176. }
  177. .hbanner-txt .btns{
  178. margin-top: 60px;
  179. }
  180. .hbanner-txt .btns a{
  181. width: 130px;
  182. height: 55px;
  183. line-height: 55px;
  184. text-align: center;
  185. display: inline-block;
  186. border: 1px solid #FFFFFF;
  187. box-sizing: border-box;
  188. border-radius: 4px;
  189. margin-right: 24px;
  190. font-weight: bold;
  191. /*transition: 0.4s;*/
  192. }
  193. .hbanner-txt .btns a:hover{
  194. background: #369FFF !important;
  195. color: #fff !important;
  196. border-color: #369FFF;
  197. }
  198. .hbanner-txt .btns a.on{
  199. color: #111111;
  200. background: #fff;
  201. }
  202. .hrow{
  203. height: 634px;
  204. }
  205. .hrow .wrapper{
  206. /*overflow: hidden;*/
  207. padding: 0 10%;
  208. }
  209. .hrow .fl{
  210. float: left;
  211. }
  212. .hrow .fr{
  213. float: right;
  214. }
  215. .hrow .txt{
  216. /*padding-left: 155px;*/
  217. padding-top: 210px;
  218. /*width: 570px;*/
  219. width: 53%;
  220. }
  221. .hrow .txt h2{
  222. font-weight: 600;
  223. font-size: 40px;
  224. line-height: 160%;
  225. margin-bottom: 50px;
  226. }
  227. .hrow .txt p{
  228. font-size: 22px;
  229. line-height: 1.4;
  230. padding-bottom: 30px;
  231. }
  232. .hrow .txt p img{
  233. margin-right: 13px;
  234. }
  235. .hrow .img{
  236. /*padding-top: 120px;*/
  237. padding-top: 18%;
  238. /*width: 500px;*/
  239. width: 43%;
  240. }
  241. .hrow1{
  242. background: #202020;
  243. height: 634px;
  244. }
  245. .hrow1 .img{
  246. position: relative;
  247. }
  248. .hrow1 .img> .box{
  249. position: absolute; left: 0; top: -50px;
  250. }
  251. .hrow1 .img>img{
  252. position: relative; z-index: 2;
  253. }
  254. .hrow2{
  255. background: #332E2E;
  256. height: 634px;
  257. }
  258. .hrow3{
  259. background: #111111;
  260. height: 634px;
  261. }
  262. .hrow4{
  263. background: #202020;
  264. height: 570px;
  265. }
  266. .hrow5{
  267. background: #332E2E;
  268. height: 634px;
  269. }
  270. .hrow6{
  271. background: #111111;
  272. height: 617px;
  273. }
  274. .hrow7{
  275. background: #202020;
  276. height: 617px;
  277. }
  278. .hfoot{
  279. height: 594px;
  280. background: url(../imgs/home9.png) no-repeat center top #332E2E;
  281. color: #ffffff;
  282. text-align: center;
  283. padding-top: 280px;
  284. position: relative;
  285. }
  286. .hfoot h2{
  287. font-size: 40px;
  288. line-height: 160%;
  289. font-weight: bold;
  290. }
  291. .hfoot h2 br{
  292. display: none;
  293. }
  294. .hfoot .num{
  295. background: #202020;
  296. color: #369FFF;
  297. font-weight: bold;
  298. border-radius: 1px;
  299. margin-right: 1px;
  300. padding: 0 6px;
  301. font-family: 'Barlow-Regular';
  302. }
  303. .hfoot .btn{
  304. display: inline-block;
  305. width: 130px;
  306. height: 55px;
  307. line-height: 55px;
  308. background: #111111;
  309. border-radius: 4px;
  310. margin-top: 24px;
  311. font-size: 16px;
  312. color: #fff;
  313. font-weight: bold;
  314. /*transition: 0.4s;*/
  315. }
  316. .hfoot .btn:hover{
  317. background: #369FFF;
  318. }
  319. .hfoot .copyright {
  320. color: #9C9C9C;
  321. position: absolute;
  322. left: 0; right: 0; text-align: center; bottom: 35px;
  323. }
  324. /*价格*/
  325. .mprice-main{
  326. background:#111111 url(../imgs/bg1.png) no-repeat center top;
  327. padding-top: 100px;
  328. padding-bottom: 210px;
  329. text-align: center;
  330. }
  331. .mprice-main .wrapper{
  332. overflow: hidden;
  333. /*padding-left: 140px;*/
  334. padding-top: 80px;
  335. }
  336. .mprice-main .item{
  337. width: 218px;
  338. /*float: left;*/
  339. display: inline-block;
  340. vertical-align: top;
  341. text-align: center;
  342. margin-right: 24px;
  343. cursor: pointer;
  344. transition: 0.4s;
  345. -webkit-transition: 0.4s;
  346. }
  347. .mprice-main .item:hover{
  348. transform:translateY(-20px);
  349. -webkit-transform:translateY(-20px);
  350. }
  351. .mprice-main .itemtit:hover{
  352. transform:translateY(0);
  353. -webkit-transform:translateY(0);
  354. }
  355. .mprice-main .item .title{
  356. font-style: normal;
  357. font-weight: 600;
  358. font-size: 22px;
  359. height: 60px;
  360. }
  361. .mprice-main .itembox{
  362. background: #202020;
  363. border-radius: 4px;
  364. height: 902px;
  365. padding-top: 46px;
  366. position: relative;
  367. padding-bottom: 130px;
  368. }
  369. .mprice-main .itembox-bgnone{
  370. background: none;
  371. }
  372. .mprice-main .itembox-border{
  373. background: #111111;
  374. border: 1px solid #202020;
  375. }
  376. .mprice-main .itembox-border li{
  377. border-bottom: #202020 solid 1px;
  378. }
  379. .mprice-main .itembox-highlight{
  380. background: #369FFF;
  381. }
  382. .mprice-main .item ul{
  383. padding: 0 25px;
  384. }
  385. .mprice-main .item ul.tit{
  386. color: #989898;
  387. text-align: left;
  388. padding-left: 50px;
  389. }
  390. .mprice-main .item li{
  391. padding: 20px 0;
  392. }
  393. .mprice-main .item li.num{
  394. height: 90px;
  395. padding: 0;
  396. border: none;
  397. font-family: "Barlow-Regular";
  398. }
  399. .mprice-main .item li.num big{
  400. font-size: 40px;
  401. font-weight: bold;
  402. }
  403. .mprice-main .item .btn{
  404. position: absolute; left: 0; right: 0; bottom: 35px;
  405. }
  406. .mprice-main .item .btn a{
  407. width: 130px;
  408. height: 55px;
  409. line-height: 55px;
  410. text-align: center;
  411. border: 1px solid #FFFFFF;
  412. box-sizing: border-box;
  413. border-radius: 4px;
  414. display: inline-block;
  415. }
  416. .mprice-main .item .btn a:hover{
  417. background: #369FFF;
  418. border-color: #369FFF;
  419. }
  420. .mprice-main .itembox-highlight .btn a{
  421. color: #369FFF;
  422. background: #fff;
  423. }
  424. .mprice-main .itembox-highlight .btn a:hover{
  425. border-color: #fff;
  426. color: #fff;
  427. }
  428. .mprice-explain{
  429. background: #202020;
  430. padding: 60px 0 150px;
  431. }
  432. .mprice-explain .wrapper{
  433. padding: 0 155px;
  434. }
  435. .mprice-explain h3{
  436. font-style: normal;
  437. font-weight: 600;
  438. font-size: 22px;
  439. margin-bottom: 60px;
  440. }
  441. .mprice-explain p{
  442. margin-bottom: 24px;
  443. font-size: 14px;
  444. }
  445. /*下载*/
  446. .downpage{
  447. width: 736px;
  448. /*height: 821px;*/
  449. background: #202020;
  450. border-radius: 4px;
  451. margin: 0 auto;
  452. margin-top: 110px;
  453. margin-bottom: 270px;
  454. padding: 24px;
  455. }
  456. .downlist{
  457. border-bottom: #333333 solid 1px;
  458. padding: 60px 0;
  459. }
  460. .downlist .head{
  461. font-style: normal;
  462. font-weight: 600;
  463. font-size: 22px; text-align: center;
  464. }
  465. .downlist .dbody{
  466. margin-top: 60px;
  467. text-align: center;
  468. }
  469. .downlist .dbody li{
  470. display: inline-block; margin: 0 30px;
  471. }
  472. .downlist .dbody .txt{
  473. font-style: normal;
  474. font-weight: normal;
  475. font-size: 14px;
  476. color: #989898;
  477. margin-top: 15px;
  478. }
  479. .downlist .dbody .btn{
  480. margin-top: 20px;
  481. }
  482. .downlist .dbody .btn a{
  483. width: 130px;
  484. height: 55px;
  485. line-height: 55px;
  486. text-align: center;
  487. border: 1px solid #FFFFFF;
  488. box-sizing: border-box;
  489. border-radius: 4px;
  490. display: inline-block;
  491. font-style: normal;
  492. font-weight: 500;
  493. font-size: 16px;
  494. }
  495. .downlist .dbody .btn a.on{
  496. background: #fff;
  497. color: #111111;
  498. }
  499. .downlist .dbody .btn a:hover{
  500. background: #369FFF;
  501. border-color: #369FFF;
  502. color: #fff;
  503. }
  504. .downlist .dbody .link{
  505. margin-top: 20px;
  506. }
  507. .downlist .dbody .link a{
  508. text-decoration: underline;
  509. font-style: normal;
  510. font-weight: 500;
  511. font-size: 16px;
  512. }
  513. .downlist + .downlist{
  514. border: none;
  515. }
  516. .downtip{
  517. font-style: normal;
  518. font-weight: normal;
  519. font-size: 12px;
  520. line-height: 17px;
  521. color: #666666;
  522. padding-top: 24px;
  523. }
  524. .regbg{
  525. background:#111111 url(../imgs/regbg.jpg) no-repeat center top;
  526. }