You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.css 9.9 KiB

4 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body {
  4. font-family: "Microsoft YaHei", "微软雅黑" !important;
  5. }
  6. /*****header*******/
  7. .header {
  8. background: #fff;
  9. min-width: 1200px;
  10. }
  11. .headerTop {
  12. padding: 24px;
  13. }
  14. .headLogo {
  15. display: inline-block;
  16. height: 34px;
  17. }
  18. .headLogo img {
  19. display: block;
  20. height: 100%;
  21. }
  22. .headerTopR {
  23. float: right;
  24. }
  25. .headerTopR > * {
  26. display: inline-block;
  27. vertical-align: middle;
  28. }
  29. .headerTopBtn {
  30. width: 88px;
  31. height: 34px;
  32. line-height: 34px;
  33. border-radius: 17px;
  34. text-align: center;
  35. background: #3598DC;
  36. font-size: 14px;
  37. color: #fff;
  38. margin-left: 30px;
  39. }
  40. .headerTopBox {
  41. border: 1px solid #DCDCDC;
  42. border-radius: 17px;
  43. border-right: 0;
  44. position: relative;
  45. width: 366px;
  46. height: 34px;
  47. line-height: 32px;
  48. color: #A5A4A4;
  49. font-size: 14px;
  50. }
  51. .headerTopBox:hover {
  52. z-index: 9999;
  53. }
  54. .searchBtn {
  55. width: 48px;
  56. height: 34px;
  57. line-height: 34px;
  58. color: #fff;
  59. font-size: 20px;
  60. position: absolute;
  61. top: -1px;
  62. right: -20px;
  63. border-radius: 17px;
  64. background: #66C0FE;
  65. text-align: center;
  66. cursor: pointer;
  67. }
  68. .headerTopList {
  69. width: 116px;
  70. float: left;
  71. height: 100%;
  72. cursor: pointer;
  73. text-align: center;
  74. }
  75. .headerTopList i {
  76. position: absolute;
  77. z-index: 9;
  78. left: 100px;
  79. top: 0;
  80. height: 100%;
  81. line-height: 34px;
  82. font-size: 20px;
  83. }
  84. .headerTopList span {
  85. display: block;
  86. width: 100px;
  87. overflow: hidden;
  88. white-space: nowrap;
  89. text-overflow: ellipsis;
  90. border-radius: 17px;
  91. background: #fff;
  92. z-index: 9;
  93. position: relative;
  94. }
  95. .headerTopList ul {
  96. width: 125px;
  97. position: absolute;
  98. top: 150%;
  99. left: 0;
  100. background: #fff;
  101. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  102. -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  103. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  104. padding: 34px 0 5px;
  105. transition: all 0.5s;
  106. -moz-transition: all 0.5s;
  107. -ms-transition: all 0.5s;
  108. -o-transition: all 0.5s;
  109. -webkit-transition: all 0.5s;
  110. filter: alpha(opacity=0);
  111. -moz-opacity: 0;
  112. -khtml-opacity: 0;
  113. opacity: 0;
  114. z-index: -99999;
  115. }
  116. .headerTopList:hover ul {
  117. top: 0%;
  118. border-radius: 17px;
  119. filter: alpha(opacity=100);
  120. -moz-opacity: 1;
  121. -khtml-opacity: 1;
  122. opacity: 1;
  123. z-index: 1;
  124. }
  125. .headerTopList li {
  126. line-height: 30px;
  127. padding: 0 10px;
  128. }
  129. .headerTopList a {
  130. color: #A5A4A4;
  131. }
  132. .headerTopList a, .headerTopList li {
  133. transition: all 0.3s;
  134. -moz-transition: all 0.3s;
  135. -ms-transition: all 0.3s;
  136. -o-transition: all 0.3s;
  137. -webkit-transition: all 0.3s;
  138. }
  139. .headerTopList li:hover {
  140. background: #66C0FE;
  141. }
  142. .headerTopList li:hover a {
  143. color: #fff;
  144. }
  145. .headerTopBox input {
  146. display: block;
  147. float: left;
  148. width: 242px;
  149. height: 20px;
  150. border: 0;
  151. border-left: 1px solid #F0F0F0;
  152. padding: 0 10px;
  153. margin: 7px 0 0 7px;
  154. line-height: 20px;
  155. }
  156. .headerBox {
  157. background: #3598DC;
  158. }
  159. .headerBox ul {
  160. height: 60px;
  161. line-height: 60px;
  162. }
  163. .headerBox li {
  164. font-size: 16px;
  165. text-align: center;
  166. width: 140px;
  167. float: left;
  168. transition: all 0.3s;
  169. -moz-transition: all 0.3s;
  170. -ms-transition: all 0.3s;
  171. -o-transition: all 0.3s;
  172. -webkit-transition: all 0.3s;
  173. }
  174. .headerBox li:hover, .headerBox li.active {
  175. background: #1E7FC2;
  176. }
  177. .headerBox a {
  178. display: block;
  179. color: #fff;
  180. }
  181. /*****header*******/
  182. .index_box {
  183. width: 1200px;
  184. margin: 0 auto;
  185. }
  186. .index_sec {
  187. margin: 50px 0;
  188. }
  189. .public_title {
  190. margin-bottom: 30px;
  191. font-size: 22px;
  192. color: #666666;
  193. vertical-align: bottom;
  194. }
  195. .public_title span {
  196. font-size: 14px;
  197. color: #BCBCBC;
  198. font-family: Arial, Helvetica, sans-serif !important;
  199. margin-left: 5px;
  200. position: relative;
  201. top: 2px;
  202. }
  203. .publicBtn {
  204. float: right;
  205. margin-top: 5px;
  206. font-size: 12px;
  207. text-align: center;
  208. color: #8A8A8A;
  209. width: 64px;
  210. height: 24px;
  211. line-height: 24px;
  212. border-radius: 12px;
  213. transition: all 0.3s;
  214. -moz-transition: all 0.3s;
  215. -ms-transition: all 0.3s;
  216. -o-transition: all 0.3s;
  217. -webkit-transition: all 0.3s;
  218. }
  219. .publicBtn:hover {
  220. background: #3598DC;
  221. color: #fff;
  222. }
  223. .publicBtn i {
  224. font-size: 14px;
  225. margin-left: 5px;
  226. }
  227. /*****banner*******/
  228. .banner {
  229. height: 0;
  230. padding-bottom: 15%;
  231. overflow: hidden;
  232. min-width: 1200px;
  233. }
  234. .banner img {
  235. display: block;
  236. width: 100%;
  237. }
  238. /*****banner*******/
  239. .gatSecTitle {
  240. font-size: 24px;
  241. color: #424242;
  242. font-weight: bold;
  243. margin-bottom: 25px;
  244. }
  245. .gatSecTitle span {
  246. width: 40px;
  247. height: 24px;
  248. font-size: 13px;
  249. color: #fff;
  250. display: inline-block;
  251. background: #EF9508;
  252. text-align: center;
  253. line-height: 24px;
  254. border-radius: 12px;
  255. margin-left: 5px;
  256. position: relative;
  257. top: -3px;
  258. }
  259. /*****gateway_sec1*******/
  260. .gateway_sec1 .index_box {
  261. overflow: hidden;
  262. }
  263. .gatSec1L, .gatSec1R {
  264. border: 1px solid #EDEDED;
  265. float: left;
  266. }
  267. .gatSec1L {
  268. width: 318px;
  269. margin-right: 27px;
  270. padding: 25px 0;
  271. }
  272. .gatSec1LImg {
  273. line-height: 0;
  274. margin: 0 auto;
  275. width: 128px;
  276. height: 128px;
  277. overflow: hidden;
  278. border-radius: 50%;
  279. }
  280. .gatSec1LImg img {
  281. width: 100%;
  282. }
  283. .gatSec1Name {
  284. text-align: center;
  285. color: #424242;
  286. font-size: 24px;
  287. margin: 15px 0 19px;
  288. }
  289. .gatSec1Num {
  290. width: 190px;
  291. height: 36px;
  292. text-align: center;
  293. line-height: 36px;
  294. font-size: 14px;
  295. color: #fff;
  296. margin: 0 auto 15px;
  297. background: #3598DC;
  298. border-radius: 18px;
  299. }
  300. .gatSec1Txt {
  301. text-align: center;
  302. font-size: 15px;
  303. color: #424242;
  304. }
  305. .gatSec1Txt span {
  306. color: #DDDDDD;
  307. font-size: 13px;
  308. margin: 0 15px;
  309. }
  310. .gatSec1R {
  311. width: 855px;
  312. padding: 20px 30px 25px;
  313. }
  314. .gatSec1Row {
  315. margin: -20px -21px 0;
  316. overflow: hidden;
  317. }
  318. .gatSec1Col2 {
  319. float: left;
  320. width: 16.666667%;
  321. padding: 0 21px;
  322. margin-top: 20px;
  323. }
  324. .gatSec1Box {
  325. display: block;
  326. text-align: center;
  327. font-size: 14px;
  328. color: #424242;
  329. overflow: hidden;
  330. white-space: nowrap;
  331. text-overflow: ellipsis;
  332. }
  333. .gatSec1Img {
  334. margin: 0 auto 10px;
  335. line-height: 66px;
  336. width: 66px;
  337. overflow: hidden;
  338. font-size: 37px;
  339. background: #985CE2;
  340. color: #fff;
  341. border-radius: 8px;
  342. }
  343. .gatSec1Img img {
  344. width: 100%;
  345. }
  346. /*****gateway_sec1*******/
  347. /*****gateway_sec2*******/
  348. .gatSec2Row {
  349. margin: 0 -15px;
  350. overflow: hidden;
  351. }
  352. .gatSec2Col4 {
  353. width: 33.333333%;
  354. float: left;
  355. padding: 0 15px;
  356. }
  357. .gatSec2Box {
  358. position: relative;
  359. border: 1px solid #EDEDED;
  360. padding: 25px 25px 10px;
  361. }
  362. .gatSec2Box:before {
  363. content: '';
  364. position: absolute;
  365. top: -1px;
  366. left: -1px;
  367. width: 154px;
  368. height: 6px;
  369. }
  370. .blue:before {
  371. background: #3598DC;
  372. }
  373. .green:before {
  374. background: #00E7B9;
  375. }
  376. .yellow:before {
  377. background: #EF9508;
  378. }
  379. .gatSec2List li {
  380. padding: 13px 0;
  381. border-top: 1px dashed #E7E7E7;
  382. }
  383. .gatSec2List li:first-child {
  384. border-top: 0;
  385. }
  386. .gatSec2List a, .gatSec2List a > span {
  387. display: block;
  388. }
  389. .gatSec2T {
  390. color: #424242;
  391. font-size: 15px;
  392. overflow: hidden;
  393. white-space: nowrap;
  394. text-overflow: ellipsis;
  395. }
  396. .gatSec2T img {
  397. margin-right: 10px;
  398. width: 16px;
  399. position: relative;
  400. top: -1px;
  401. }
  402. .gatSec2Txt {
  403. text-align: right;
  404. font-size: 13px;
  405. color: #949494;
  406. margin-top: 8px;
  407. }
  408. /*****gateway_sec2*******/
  409. /*****gateway_sec3*******/
  410. .gatSec3Box {
  411. margin-top: -50px;
  412. }
  413. .gatSec3List {
  414. padding: 0 160px 24px 160px;
  415. border-bottom: #EDEDED solid 1px;
  416. margin-bottom: 35px;
  417. }
  418. .gatSec3List li {
  419. float: left;
  420. line-height: 28px;
  421. font-size: 15px;
  422. color: #424242;
  423. text-align: center;
  424. position: relative;
  425. cursor: pointer;
  426. padding: 0 10px;
  427. }
  428. .gatSec3List li:after {
  429. content: '';
  430. position: absolute;
  431. top: 47px;
  432. left: 0px;
  433. width: 100%;
  434. height: 6px;
  435. transition: all 0.3s;
  436. -moz-transition: all 0.3s;
  437. -ms-transition: all 0.3s;
  438. -o-transition: all 0.3s;
  439. -webkit-transition: all 0.3s;
  440. }
  441. .gatSec3List li:hover:after, .gatSec3List li.active:after {
  442. background: #3598DC;
  443. }
  444. .gatSec3Row {
  445. margin: 0 -40px;
  446. overflow: hidden;
  447. display: none;
  448. }
  449. .gatSec3Row:first-child {
  450. display: block;
  451. }
  452. .gatSec3Col7 {
  453. width: 14.285714%;
  454. float: left;
  455. margin-bottom: 50px;
  456. padding: 0 40px;
  457. }
  458. .gatSec3Img {
  459. border: 1px solid #EDEDED;
  460. text-align: center;
  461. line-height: 0;
  462. border-radius: 10px;
  463. margin-bottom: 15px;
  464. height: 102px;
  465. overflow: hidden;
  466. padding-top: 19px;
  467. }
  468. .gatSec3Img img {
  469. width: 56px;
  470. }
  471. .gatSec3Txt {
  472. font-size: 14px;
  473. color: #424242;
  474. text-align: center;
  475. overflow: hidden;
  476. white-space: nowrap;
  477. text-overflow: ellipsis;
  478. }
  479. /*****gateway_sec3*******/
  480. /***footer***/
  481. .footer {
  482. height: 60px;
  483. text-align: center;
  484. line-height: 60px;
  485. font-size: 14px;
  486. color: #fff;
  487. background: #3598DC;
  488. min-width: 1200px;
  489. }
  490. /***footer***/