index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,td,input,select,option,textarea{
  4. margin:0;
  5. padding:0;
  6. }
  7. li{
  8. list-style:none;
  9. }
  10. img{
  11. border:none;
  12. }
  13. a{
  14. text-decoration:none;
  15. }
  16. body{
  17. background-color: #032e61;
  18. }
  19. /*-----------header-------------*/
  20. header{
  21. width: 100%;
  22. height: 60px;
  23. line-height: 60px;
  24. border-bottom: 1px solid #004c98;
  25. }
  26. .headerLeft{
  27. width: 27%;
  28. height: 60px;
  29. background-color: #004c98;
  30. float: left;
  31. text-align: center;
  32. }
  33. .headerLeft h3{
  34. color: #07f7f4;
  35. font-size: 20px;
  36. }
  37. .headerCenter{
  38. width: 46%;
  39. height: 60px;
  40. background-color: #002144;
  41. float: left;
  42. text-align: center;
  43. }
  44. .headerCenter h1{
  45. color: #fff;
  46. font-size: 26px;
  47. }
  48. .headerRight{
  49. width: 27%;
  50. height: 60px;
  51. background-color: #004c98;
  52. float: left;
  53. text-align: center;
  54. }
  55. .headerRight h3{
  56. color: #07f7f4;
  57. font-size: 20px;
  58. }
  59. /*----------section------------*/
  60. section{
  61. width: 100%;
  62. }
  63. .firstCon{
  64. width: 100%;
  65. height: 125px;
  66. background-color: #02356e;
  67. overflow: hidden;
  68. }
  69. .firstCon-left{
  70. width: 27%;
  71. height: 125px;
  72. overflow: hidden;
  73. float: left;
  74. }
  75. .first-center{
  76. width: 46%;
  77. height: 125px;
  78. background-color: #01458e;
  79. float: left;
  80. }
  81. .firstCon-left h4{
  82. color: #07f7f4;
  83. font-size: 18px;
  84. margin-left: 30px;
  85. overflow: hidden;
  86. margin-top: 10px;
  87. }
  88. .firstCon-right{
  89. float: left;
  90. }
  91. .firstCon-right h4{
  92. color: #07f7f4;
  93. font-size: 18px;
  94. margin-left: 30px;
  95. overflow: hidden;
  96. margin-top: 10px;
  97. }
  98. .firstLeftsec{
  99. width: 100%;
  100. -webkit-box-sizing: border-box;
  101. -moz-box-sizing: border-box;
  102. box-sizing: border-box;
  103. padding-left: 30px;
  104. }
  105. .contain{
  106. width: 60px;
  107. height: 80px;
  108. float: left;
  109. margin-right: 23px;
  110. text-align: center;
  111. }
  112. .firsttab{
  113. width: 60px;
  114. height: 60px;
  115. }
  116. .contain p{
  117. color: #00b3fe;
  118. font-size: 13px;
  119. }
  120. .first-center h3{
  121. font-size: 18px;
  122. color: #06dae5;
  123. text-align: center;
  124. }
  125. .firstcenLeft{
  126. width: 33.33%;
  127. float: left;
  128. -webkit-box-sizing: border-box;
  129. -moz-box-sizing: border-box;
  130. box-sizing: border-box;
  131. padding:0 10px;
  132. }
  133. .flag{
  134. float: left;
  135. text-align: center;
  136. margin-right: 4px;
  137. margin-top: 10px;
  138. }
  139. .flag strong{
  140. font-size: 24px;
  141. color: #fff;
  142. border-right: 1px solid #ccc;
  143. width: 55px;
  144. display: block;
  145. }
  146. .flag:nth-of-type(3) strong{
  147. border-right: none;
  148. }
  149. .flag p{
  150. color: #06dae5;
  151. font-size: 14px;
  152. padding-top:20px;
  153. }
  154. .firstcenCen{
  155. width: 33.33%;
  156. float: left;
  157. height: 100px;
  158. text-align: center;
  159. -webkit-box-sizing: border-box;
  160. -moz-box-sizing: border-box;
  161. box-sizing: border-box;
  162. padding:0px 10px;
  163. padding-top: 14px;
  164. padding-left: 25px;
  165. }
  166. .firstcenCen span{
  167. display: block;
  168. float: left;
  169. width: 50px;
  170. border:1px solid #05bdc9;
  171. box-shadow:inset 0 0 3px 5px #00b3fe;
  172. -webkit-border-radius: 6px;
  173. -moz-border-radius: 6px;
  174. border-radius: 6px;
  175. height: 70px;
  176. -webkit-box-sizing: border-box;
  177. -moz-box-sizing: border-box;
  178. box-sizing: border-box;
  179. margin-right: 6px;
  180. font-size: 30px;
  181. color: #ffff01;
  182. font-weight: 900;
  183. text-align: center;
  184. vertical-align: middle;
  185. padding-top: 15px;
  186. background-color: #001729;
  187. }
  188. .firstcenRight{
  189. width: 33.33%;
  190. height: 100px;
  191. float: left;
  192. -webkit-box-sizing: border-box;
  193. -moz-box-sizing: border-box;
  194. box-sizing: border-box;
  195. padding:0 10px;
  196. }
  197. .line{
  198. width: 100%;
  199. height: 16px;
  200. background-color: #03559f;
  201. border-bottom: 1px solid #00b3fe;
  202. }
  203. .secondCon{
  204. width: 100%;
  205. marign-top:6px;
  206. -webkit-box-sizing: border-box;
  207. -moz-box-sizing: border-box;
  208. box-sizing: border-box;
  209. padding:6px 6px;
  210. }
  211. .secondLeft{
  212. width: 27%;
  213. float: left;
  214. -webkit-box-sizing: border-box;
  215. -moz-box-sizing: border-box;
  216. box-sizing: border-box;
  217. }
  218. .secondLeftCon{
  219. /*background-color: red;*/
  220. /*height: 200px;*/
  221. }
  222. .secondLeftTab{
  223. width: 100%;
  224. border:1px solid #00b3fe;
  225. padding:10px;
  226. -webkit-box-sizing: border-box;
  227. -moz-box-sizing: border-box;
  228. box-sizing: border-box;
  229. margin-top: 10px;
  230. }
  231. .secondLeftTab:nth-of-type(1){
  232. margin-top: 0px;
  233. }
  234. .fig{
  235. height: 30px;
  236. line-height: 30px;
  237. border-top:1px solid #00b3fe;
  238. border-bottom: 1px solid #00b3fe;
  239. margin-bottom: 10px;
  240. padding-left: 15px;
  241. padding-right:15px;
  242. -webkit-box-sizing: border-box;
  243. -moz-box-sizing: border-box;
  244. box-sizing: border-box;
  245. }
  246. .fig:nth-of-type(1){
  247. background-color: #03559f;
  248. padding:0px;
  249. }
  250. .fig p{
  251. font-size: 14px;
  252. color: #fff;
  253. float: left;
  254. }
  255. .fig em{
  256. float: right;
  257. font-size: 22px;
  258. font-weight: 900;
  259. }
  260. .fig:nth-of-type(2) em{
  261. color: #fffe7d;
  262. }
  263. .fig:nth-of-type(3) em{
  264. color: #ff7d01;
  265. }
  266. .fig:nth-of-type(4) em{
  267. color: #00b5fe;
  268. }
  269. .reception{
  270. width: 100%;
  271. -webkit-box-sizing: border-box;
  272. -moz-box-sizing: border-box;
  273. box-sizing: border-box;
  274. padding:5px 20px;
  275. text-align: center;
  276. overflow: hidden;
  277. }
  278. .recetit{
  279. float: left;
  280. width: 88px;
  281. float: left;
  282. margin-right: 15px;
  283. }
  284. .recetit:nth-last-child(1){
  285. margin-right: 0px;
  286. }
  287. .recetit strong{
  288. color: #f5f77c;
  289. font-size: 15px;
  290. }
  291. .recetit span{
  292. display: block;
  293. text-align: center;
  294. margin-bottom: 6px;
  295. width: 72px;
  296. height: 8px;
  297. -webkit-border-radius: 6px;
  298. -moz-border-radius: 6px;
  299. border-radius: 6px;
  300. background-color: #0b4e78;
  301. margin-left: 8px;
  302. }
  303. .recetit .changecolor{
  304. background-color: #05fff9;
  305. }
  306. .recetit p{
  307. color: #fff;
  308. font-size:12px;
  309. }
  310. .secondCen{
  311. width: 46%;
  312. float: left;
  313. -webkit-box-sizing: border-box;
  314. -moz-box-sizing: border-box;
  315. box-sizing: border-box;
  316. padding:0 14px;
  317. }
  318. .secondCenCon{
  319. overflow: hidden;
  320. padding-bottom: 50px;
  321. border:1px solid #00b3fe;
  322. }
  323. .secondCenCon h3{
  324. text-align: center;
  325. color: #05fef8;
  326. font-size: 16px;
  327. margin-top: 10px;
  328. }
  329. .secondContit{
  330. width: 100%;
  331. }
  332. .secondContitleft{
  333. width: 60%;
  334. margin-top: 40px;
  335. -webkit-box-sizing: border-box;
  336. -moz-box-sizing: border-box;
  337. box-sizing: border-box;
  338. padding-left: 10px;
  339. text-align: center;
  340. float: left;
  341. }
  342. .secondContitleft p{
  343. font-size: 14px;
  344. color: #05fef8;
  345. text-align: center;
  346. }
  347. .fig p{
  348. color: #05fef8;
  349. }
  350. .secondContitleft ul{
  351. padding:10px 0px;
  352. margin-left: 20px;
  353. }
  354. .secondContitleft ul li{
  355. float: left;
  356. width: 55px;
  357. border-right: 1px solid #fff;
  358. text-align: center;
  359. height: 10px;
  360. line-height: 10px;
  361. }
  362. .secondContitleft ul li:nth-last-child(1){
  363. border-right: none;
  364. }
  365. .secondContitleft .china{
  366. margin-bottom: 10px;
  367. }
  368. .secondContitleft .china li a{
  369. font-size: 10px;
  370. color: #fff;
  371. }
  372. .secondContitleft .number li a{
  373. color: #feff01;
  374. font-size: 18px;
  375. font-weight: 900;
  376. }
  377. .secondContitright{
  378. width: 40%;
  379. float: left;
  380. height: 40px;
  381. }
  382. .charbar{
  383. width: 100%;
  384. height: 200px;
  385. }
  386. .secondRight{
  387. width: 27%;
  388. float: left;
  389. }
  390. .secondRightCon{
  391. /*background-color: red;*/
  392. /*height: 200px;*/
  393. }
  394. .secondRighttit{
  395. width: 100%;
  396. overflow: hidden;
  397. }
  398. .secondRighttext{
  399. width: 33.33%;
  400. float: left;
  401. overflow: hidden;
  402. }
  403. .text{
  404. width: 80px;
  405. height: 40px;
  406. border:1px solid #04fff8;
  407. margin-bottom: 10px;
  408. margin-left: 16px;
  409. }
  410. .text p{
  411. font-size: 12px;
  412. color: #fff;
  413. }
  414. .text span{
  415. text-align: center;
  416. font-size: 18px;
  417. color: #ffff7d;
  418. margin-left: 14px;
  419. }
  420. .secondRighttext h4{
  421. font-size: 14px;
  422. color: #fff;
  423. text-align: center;
  424. }
  425. .secondRighttextChar{
  426. width: 100%;
  427. height: 100px;
  428. }
  429. .secondRighttext .sec{
  430. margin-top: 6px;
  431. }
  432. .secondChar{
  433. width: 100%;
  434. height: 170px;
  435. }
  436. .thirdCon{
  437. width: 100%;
  438. padding-top: 10px;
  439. -webkit-box-sizing: border-box;
  440. -moz-box-sizing: border-box;
  441. box-sizing: border-box;
  442. padding: 0px 6px;
  443. overflow: hidden;
  444. }
  445. .thirdLeft{
  446. width: 27%;
  447. float: left;
  448. -webkit-box-sizing: border-box;
  449. -moz-box-sizing: border-box;
  450. box-sizing: border-box;
  451. padding-top: 10px;
  452. }
  453. .thirdLeftCon{
  454. width: 100%;
  455. border:1px solid #00b3fe;
  456. }
  457. .hottop li{
  458. height: 35px;
  459. line-height: 35px;
  460. border-bottom: 1px dashed #fff;
  461. }
  462. .hottop li:nth-last-child(1){
  463. border-bottom: none;
  464. }
  465. .hottop li span{
  466. float: left;
  467. display: inline-block;
  468. width: 20px;
  469. height: 20px;
  470. /*margin-top: 8px;*/
  471. vertical-align: middle;
  472. text-align: center;
  473. margin-right: 10px;
  474. color: #fff;
  475. -webkit-box-sizing: border-box;
  476. -moz-box-sizing: border-box;
  477. box-sizing: border-box;
  478. }
  479. .hottop li:nth-of-type(1) span{
  480. background-color: #ff0305;
  481. }
  482. .hottop li:nth-of-type(2) span{
  483. background-color: #ffb20c;
  484. }
  485. .hottop li:nth-of-type(3) span{
  486. background-color: #18d0c6;
  487. }
  488. .hottop li:nth-of-type(4) span{
  489. background-color: #00b4ff;
  490. }
  491. .hottop li:nth-of-type(5) span{
  492. background-color: #6c3ff2;
  493. }
  494. .hottop li p{
  495. float: left;
  496. color: #fff;
  497. font-size: 14px;
  498. }
  499. .hottop li a{
  500. float: right;
  501. color: #cecdcb;
  502. font-size: 14px;
  503. }
  504. .thirdCen{
  505. width: 46%;
  506. float: left;
  507. -webkit-box-sizing: border-box;
  508. -moz-box-sizing: border-box;
  509. box-sizing: border-box;
  510. height: 100px;
  511. padding:0px 14px;
  512. padding-top: 10px;
  513. }
  514. .thirdCenCon{
  515. height: 100px;
  516. width: 100%;
  517. -webkit-box-sizing: border-box;
  518. -moz-box-sizing: border-box;
  519. box-sizing: border-box;
  520. }
  521. .txt{
  522. width: 50%;
  523. height: 100px;
  524. /*float: left;*/
  525. -webkit-box-sizing: border-box;
  526. -moz-box-sizing: border-box;
  527. box-sizing: border-box;
  528. }
  529. .txtleft{
  530. padding-right: 11px;
  531. float: left;
  532. }
  533. .txtright{
  534. float: left;
  535. }
  536. .content{
  537. height: 250px;
  538. border:1px solid #00b3fe;
  539. }
  540. .content h4{
  541. font-size: 14px;
  542. color: #05fef8;
  543. text-align: center;
  544. height: 26px;
  545. line-height: 26px;
  546. border-bottom: 1px solid #00b3fe;
  547. }
  548. .contentChar{
  549. width: 100%;
  550. height: 215px;
  551. }
  552. .thirdRight{
  553. float: left;
  554. -webkit-box-sizing: border-box;
  555. -moz-box-sizing: border-box;
  556. box-sizing: border-box;
  557. height: 100px;
  558. width: 27%;
  559. padding-top: 10px;
  560. }
  561. /*-----------footer-----------*/
  562. footer{
  563. width: 100%;
  564. height: 52px;
  565. margin-top: 20px;
  566. background-color: #011635;
  567. padding-top: 10px;
  568. }
  569. .rightimg{
  570. float: left;
  571. display: block;
  572. line-height: 52px;
  573. }
  574. .home{
  575. float: left;
  576. width: 120px;
  577. height: 40px;
  578. border:1px solid #00b3fe;
  579. background-color: #042d6b;
  580. margin-left: 6px;
  581. }
  582. .home img{
  583. vertical-align: center;
  584. margin-top: 6px;
  585. margin-left: 5px;
  586. }
  587. .home button{
  588. background-color: #042d6b;
  589. border:none;
  590. outline: none;
  591. font-size: 15px;
  592. color: #fff;
  593. margin-bottom: -6px;
  594. }
  595. .con{
  596. float: left;
  597. border:1px solid #00b3fe;
  598. margin-left: 10px;
  599. height: 40px;
  600. }
  601. .con p{
  602. font-size: 12px;
  603. color: #fff;
  604. }
  605. .con h4{
  606. font-size: 15px;
  607. color: #04fefc;
  608. line-height: 18px;
  609. }