foot.less 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375
  1. * {
  2. font-family: "微软雅黑", "microsoft yahei";
  3. }
  4. @media screen and (min-width: 1401px) {
  5. .index_foot {
  6. box-sizing: border-box;
  7. width: 1400PX;
  8. margin: 0 auto;
  9. }
  10. .foot_title {
  11. width: 100%;
  12. height: 40PX;
  13. overflow: hidden;
  14. border-bottom: solid 2PX #b41c2a;
  15. margin-bottom: 10PX;
  16. span {
  17. display: block;
  18. width: 107PX;
  19. height: 40PX;
  20. line-height: 40PX;
  21. background: #b41c2a;
  22. text-align: center;
  23. color: #fff;
  24. font-size: 20PX;
  25. font-weight: bold;
  26. border-top-left-radius: 10PX;
  27. border-top-right-radius: 10PX;
  28. }
  29. }
  30. .index_foot_name_box {
  31. margin: 10PX auto 0PX;
  32. text-align: center;
  33. font-size: 0PX;
  34. }
  35. .index_foot_name {
  36. display: inline-block;
  37. height: 67PX;
  38. line-height: 67PX;
  39. color: #f2f9f4;
  40. font-size: 51PX;
  41. font-weight: bold;
  42. overflow: hidden;
  43. }
  44. .index_foot_name:nth-of-type(even) {
  45. color: #333;
  46. font-size: 32PX;
  47. }
  48. .foot_img_box {
  49. overflow: hidden;
  50. display: block;
  51. margin: 20PX auto 0;
  52. width: 100%;
  53. display: flex;
  54. flex-wrap: wrap;
  55. align-items: center;
  56. justify-content: flex-start;
  57. a {
  58. font-size: 14PX;
  59. width: 180PX;
  60. height: 62PX;
  61. float: left;
  62. padding: 0 10PX;
  63. margin: 10PX 0;
  64. overflow: hidden;
  65. img {
  66. width: 180PX;
  67. height: 60PX;
  68. border: solid 1PX #ccc;
  69. }
  70. }
  71. }
  72. .foot_img_box>* * {
  73. display: block;
  74. width: 100%;
  75. height: 100%;
  76. }
  77. .foot_img_box>*:nth-of-type(7n) {
  78. margin-right: 0PX;
  79. }
  80. .foot_frind_box {
  81. display: block;
  82. margin: 11PX auto;
  83. overflow: hidden;
  84. display: flex;
  85. width: 100%;
  86. border-bottom: solid 3PX #ff0024;
  87. div {
  88. width: 100%;
  89. overflow: hidden;
  90. padding: 0 10PX;
  91. margin-bottom: 20PX;
  92. a {
  93. float: left;
  94. height: 30PX;
  95. line-height: 30PX;
  96. padding: 0 10PX;
  97. font-size: 16PX;
  98. color: #333;
  99. font-family: "微软雅黑", "microsoft yahei";
  100. }
  101. }
  102. }
  103. .call_us_box {
  104. display: block;
  105. width: 100%;
  106. height: 52PX;
  107. margin: 25PX auto 0;
  108. overflow: hidden;
  109. text-align: center;
  110. font-size: 0PX;
  111. background: #ff0024;
  112. a {
  113. color: #fff;
  114. }
  115. }
  116. .call_us_box>* {
  117. height: 18PX;
  118. line-height: 18PX;
  119. padding: 0 20PX;
  120. line-height: 50PX;
  121. text-align: center;
  122. background: #ff0024;
  123. margin: 0PX auto;
  124. font-size: 18PX;
  125. color: #fff;
  126. box-sizing: border-box;
  127. position: relative;
  128. }
  129. .call_us_box>*::after {
  130. content: "";
  131. position: absolute;
  132. right: 0;
  133. top: 20%;
  134. width: 1PX;
  135. height: 60%;
  136. background-color: #fff;
  137. }
  138. .call_us_box>*:last-child::after {
  139. display: none;
  140. }
  141. .foot_text_box {
  142. margin: 20PX auto 0PX;
  143. text-align: center;
  144. color: #333;
  145. font-size: 16PX;
  146. line-height: 30PX;
  147. a {
  148. color: #333;
  149. font-size: 16PX;
  150. }
  151. }
  152. .foot_text_box_green {
  153. color: #40663B;
  154. }
  155. .foot_text_box img {
  156. display: inline-block;
  157. height: 20PX;
  158. vertical-align: middle;
  159. }
  160. .foot_logo_out {
  161. position: relative;
  162. margin: 0PX auto;
  163. width: 100%;
  164. height: 0PX;
  165. }
  166. .foot_logo_out * {
  167. width: 120PX;
  168. display: block;
  169. }
  170. .foot_logo_out>* {
  171. position: absolute;
  172. top: -166PX;
  173. }
  174. .foot_logo_out>*:nth-of-type(1) {
  175. left: 0PX;
  176. }
  177. .foot_logo_out>*:nth-of-type(2) {
  178. right: 0PX;
  179. }
  180. .foot_last_img_box {
  181. margin: 40PX auto 10PX;
  182. text-align: center;
  183. overflow: hidden;
  184. width: 100%;
  185. font-size: 0PX;
  186. padding-bottom: 40PX;
  187. }
  188. .foot_last_img_box>* {
  189. height: 50PX;
  190. width: 150PX;
  191. display: inline-block;
  192. overflow: hidden;
  193. }
  194. .foot_last_img_box img {
  195. width: 120PX;
  196. height: 50PX;
  197. }
  198. .foot_text_html_css :deep(a) {
  199. color: #333;
  200. }
  201. .foot_text_html_css :deep(img) {
  202. margin: 0 5PX;
  203. }
  204. //添加在线客服
  205. .kefu {
  206. position: fixed;
  207. top: 320PX;
  208. right: 0PX;
  209. z-index: 999999;
  210. .kefu_itemKf {
  211. background-color: #0099cc;
  212. border-radius: 10PX;
  213. width: 64PX;
  214. height: 64PX;
  215. margin-bottom: 15PX;
  216. text-align: center;
  217. box-sizing: border-box;
  218. position: relative;
  219. cursor: pointer;
  220. a {
  221. >p {
  222. color: #fff;
  223. font-size: 12PX;
  224. font-weight: 500;
  225. line-height: 16PX;
  226. }
  227. >img {
  228. margin: 8PX auto 0PX;
  229. width: 30PX;
  230. height: 30PX;
  231. }
  232. }
  233. }
  234. .kefu_itemQQ {
  235. background-color: #fff;
  236. border-radius: 10PX;
  237. box-shadow: 0 4PX 16PX #0000001a;
  238. height: 100PX;
  239. margin-bottom: 15PX;
  240. text-align: center;
  241. width: 100PX;
  242. box-sizing: border-box;
  243. position: relative;
  244. cursor: pointer;
  245. >p {
  246. color: #666;
  247. font-size: 14PX;
  248. font-weight: 500;
  249. line-height: 16PX;
  250. }
  251. >img {
  252. margin-top: 10PX;
  253. width: 60PX;
  254. height: 60PX;
  255. }
  256. &:hover {
  257. .kefu_item_content_QQ {
  258. display: block;
  259. }
  260. }
  261. }
  262. .kefu_itemPhone {
  263. background-color: #fff;
  264. border-radius: 10PX;
  265. box-shadow: 0 4PX 16PX #0000001a;
  266. height: 100PX;
  267. margin-bottom: 15PX;
  268. text-align: center;
  269. width: 100PX;
  270. box-sizing: border-box;
  271. position: relative;
  272. cursor: pointer;
  273. >p {
  274. color: #666;
  275. font-size: 14PX;
  276. font-weight: 500;
  277. line-height: 16PX;
  278. }
  279. >img {
  280. margin-top: 10PX;
  281. width: 60PX;
  282. height: 60PX;
  283. }
  284. &:hover {
  285. .kefu_item_content_phone {
  286. display: block;
  287. }
  288. }
  289. }
  290. .kefu_item_content_QQ {
  291. position: absolute;
  292. top: -100PX;
  293. right: 100PX;
  294. background: #fff;
  295. border-radius: 10PX;
  296. display: none;
  297. width: 190PX;
  298. height: 330PX;
  299. background: #fff;
  300. box-shadow: 0 4PX 16PX #0000001a;
  301. z-index: 99;
  302. box-sizing: border-box;
  303. padding: 20PX;
  304. img {
  305. margin-bottom: 10PX;
  306. }
  307. .qqfs {
  308. margin-bottom: 20PX;
  309. font-size: 14PX;
  310. color: #333;
  311. }
  312. .arrow {
  313. width: 0;
  314. height: 0;
  315. width: 0;
  316. border-top: 20PX solid transparent;
  317. border-bottom: 20PX solid transparent;
  318. border-left: 20PX solid #fff;
  319. position: absolute;
  320. top: 120PX;
  321. right: -20PX;
  322. transform: translateX(-50%);
  323. z-index: 100;
  324. }
  325. }
  326. .kefu_item_content_phone {
  327. position: absolute;
  328. top: 0;
  329. right: 100PX;
  330. background: #fff;
  331. border-radius: 10PX;
  332. display: none;
  333. width: 190PX;
  334. height: 80PX;
  335. background: #fff;
  336. box-shadow: 0 4PX 16PX #0000001a;
  337. z-index: 99;
  338. box-sizing: border-box;
  339. padding: 20PX;
  340. text-align: left;
  341. color: #333;
  342. .kefu_item_content_phone_title {
  343. margin-bottom: 5PX;
  344. font-weight: bold;
  345. }
  346. .arrow {
  347. width: 0;
  348. height: 0;
  349. width: 0;
  350. border-top: 20PX solid transparent;
  351. border-bottom: 20PX solid transparent;
  352. border-left: 20PX solid #fff;
  353. position: absolute;
  354. top: 20PX;
  355. right: -20PX;
  356. transform: translateX(-50%);
  357. z-index: 100;
  358. }
  359. }
  360. }
  361. // 关联网站
  362. .websiteLink {
  363. position: fixed;
  364. left: 45PX;
  365. bottom: 10PX;
  366. .websitelist {
  367. width: 210PX;
  368. height: 27PX;
  369. line-height: 27PX;
  370. color: #ee6363;
  371. margin-bottom: 5PX;
  372. border: 1PX solid #ccc;
  373. text-align: center;
  374. background-color: #fff;
  375. font-size: 14PX;
  376. a {
  377. color: #ee6363;
  378. }
  379. }
  380. }
  381. // 你问我答
  382. .questionAnswer {
  383. width: 300PX;
  384. height: auto;
  385. overflow: hidden;
  386. position: fixed;
  387. bottom: 0;
  388. right: 0;
  389. background: #fff;
  390. border: 1PX solid #7ab9dd;
  391. padding: 10PX;
  392. box-shadow: 0PX 1PX 8PX #888;
  393. z-index: 99999999;
  394. .title {
  395. height: 40PX;
  396. line-height: 40PX;
  397. span {
  398. font-size: 22PX;
  399. color: #0a78d7;
  400. }
  401. }
  402. .content {
  403. height: 300PX;
  404. overflow: auto;
  405. }
  406. }
  407. }
  408. @media screen and (min-width: 801px) and (max-width: 1400px) {
  409. .index_foot {
  410. box-sizing: border-box;
  411. width: 100%;
  412. margin: 0 auto;
  413. }
  414. .foot_title {
  415. width: 100%;
  416. height: 40PX;
  417. line-height: 40PX;
  418. overflow: hidden;
  419. background-color: #f4f4f4;
  420. margin-bottom: 10PX;
  421. font-size: 20PX;
  422. color: #022a7a;
  423. padding-left: 10PX;
  424. box-sizing: border-box;
  425. }
  426. .index_foot_name_box {
  427. margin: 10PX auto 0PX;
  428. text-align: center;
  429. font-size: 0PX;
  430. }
  431. .index_foot_name {
  432. display: inline-block;
  433. height: 67PX;
  434. line-height: 67PX;
  435. color: #f2f9f4;
  436. font-size: 51PX;
  437. font-weight: bold;
  438. overflow: hidden;
  439. }
  440. .index_foot_name:nth-of-type(even) {
  441. color: #333;
  442. font-size: 32PX;
  443. }
  444. .foot_img_box {
  445. overflow: hidden;
  446. display: block;
  447. margin: 20PX auto 0;
  448. width: 100%;
  449. display: flex;
  450. flex-wrap: wrap;
  451. align-items: center;
  452. justify-content: flex-start;
  453. a {
  454. font-size: 14PX;
  455. width: 14%;
  456. height: 64PX;
  457. float: left;
  458. padding: 0 10PX;
  459. margin: 10PX 0;
  460. box-sizing: border-box;
  461. overflow: hidden;
  462. img {
  463. width: 99%;
  464. height: 97%;
  465. border: solid 1PX #ccc;
  466. }
  467. }
  468. }
  469. .foot_img_box>* * {
  470. display: block;
  471. width: 100%;
  472. height: 100%;
  473. }
  474. .foot_img_box>*:nth-of-type(7n) {
  475. margin-right: 0PX;
  476. }
  477. .foot_frind_box {
  478. display: block;
  479. margin: 11PX auto;
  480. overflow: hidden;
  481. display: flex;
  482. width: 100%;
  483. border-bottom: solid 3PX #ff0024;
  484. div {
  485. width: 100%;
  486. overflow: hidden;
  487. padding: 0 10PX;
  488. margin-bottom: 20PX;
  489. a {
  490. float: left;
  491. height: 30PX;
  492. line-height: 30PX;
  493. padding: 0 10PX;
  494. font-size: 16PX;
  495. color: #333;
  496. font-family: "微软雅黑", "microsoft yahei";
  497. }
  498. }
  499. }
  500. .call_us_box {
  501. display: block;
  502. width: 100%;
  503. height: 52PX;
  504. margin: 25PX auto 0;
  505. overflow: hidden;
  506. text-align: center;
  507. font-size: 0PX;
  508. background: #ff0024;
  509. a {
  510. color: #fff;
  511. }
  512. }
  513. .call_us_box>* {
  514. height: 18PX;
  515. line-height: 18PX;
  516. padding: 0 20PX;
  517. line-height: 50PX;
  518. text-align: center;
  519. background: #ff0024;
  520. margin: 0PX auto;
  521. font-size: 18PX;
  522. color: #fff;
  523. box-sizing: border-box;
  524. position: relative;
  525. }
  526. .call_us_box>*::after {
  527. content: "";
  528. position: absolute;
  529. right: 0;
  530. top: 20%;
  531. width: 1PX;
  532. height: 60%;
  533. background-color: #fff;
  534. }
  535. .call_us_box>*:last-child::after {
  536. display: none;
  537. }
  538. .foot_text_box {
  539. margin: 20PX auto 0PX;
  540. text-align: center;
  541. color: #333;
  542. font-size: 16PX;
  543. line-height: 30PX;
  544. a {
  545. color: #333;
  546. font-size: 16PX;
  547. }
  548. }
  549. .foot_text_box_green {
  550. color: #40663B;
  551. }
  552. .foot_text_box img {
  553. display: inline-block;
  554. height: 20PX;
  555. vertical-align: middle;
  556. }
  557. .foot_logo_out {
  558. position: relative;
  559. margin: 0PX auto;
  560. width: 100%;
  561. height: 0PX;
  562. }
  563. .foot_logo_out * {
  564. width: 120PX;
  565. display: block;
  566. }
  567. .foot_logo_out>* {
  568. position: absolute;
  569. top: -166PX;
  570. }
  571. .foot_logo_out>*:nth-of-type(1) {
  572. left: 0PX;
  573. }
  574. .foot_logo_out>*:nth-of-type(2) {
  575. right: 0PX;
  576. }
  577. .foot_last_img_box {
  578. margin: 40PX auto 10PX;
  579. text-align: center;
  580. overflow: hidden;
  581. width: 100%;
  582. font-size: 0PX;
  583. padding-bottom: 40PX;
  584. }
  585. .foot_last_img_box>* {
  586. height: 50PX;
  587. width: 150PX;
  588. display: inline-block;
  589. overflow: hidden;
  590. }
  591. .foot_last_img_box img {
  592. width: 120PX;
  593. height: 50PX;
  594. }
  595. .foot_text_html_css :deep(a) {
  596. color: #333;
  597. }
  598. .foot_text_html_css :deep(img) {
  599. margin: 0 5PX;
  600. }
  601. //添加在线客服
  602. .kefu {
  603. position: fixed;
  604. top: 320PX;
  605. right: 0PX;
  606. .kefu_itemKf {
  607. background-color: #0099cc;
  608. border-radius: 10PX;
  609. width: 64PX;
  610. height: 64PX;
  611. margin-bottom: 15PX;
  612. text-align: center;
  613. box-sizing: border-box;
  614. position: relative;
  615. cursor: pointer;
  616. a {
  617. >p {
  618. color: #fff;
  619. font-size: 12PX;
  620. font-weight: 500;
  621. line-height: 16PX;
  622. }
  623. >img {
  624. margin: 8PX auto 0PX;
  625. width: 30PX;
  626. height: 30PX;
  627. }
  628. }
  629. }
  630. .kefu_itemQQ {
  631. background-color: #fff;
  632. border-radius: 10PX;
  633. box-shadow: 0 4PX 16PX #0000001a;
  634. height: 100PX;
  635. margin-bottom: 15PX;
  636. text-align: center;
  637. width: 100PX;
  638. box-sizing: border-box;
  639. position: relative;
  640. cursor: pointer;
  641. >p {
  642. color: #666;
  643. font-size: 14PX;
  644. font-weight: 500;
  645. line-height: 16PX;
  646. }
  647. >img {
  648. margin-top: 10PX;
  649. width: 60PX;
  650. height: 60PX;
  651. }
  652. &:hover {
  653. .kefu_item_content_QQ {
  654. display: block;
  655. }
  656. }
  657. }
  658. .kefu_itemPhone {
  659. background-color: #fff;
  660. border-radius: 10PX;
  661. box-shadow: 0 4PX 16PX #0000001a;
  662. height: 100PX;
  663. margin-bottom: 15PX;
  664. text-align: center;
  665. width: 100PX;
  666. box-sizing: border-box;
  667. position: relative;
  668. cursor: pointer;
  669. >p {
  670. color: #666;
  671. font-size: 14PX;
  672. font-weight: 500;
  673. line-height: 16PX;
  674. }
  675. >img {
  676. margin-top: 10PX;
  677. width: 60PX;
  678. height: 60PX;
  679. }
  680. &:hover {
  681. .kefu_item_content_phone {
  682. display: block;
  683. }
  684. }
  685. }
  686. .kefu_item_content_QQ {
  687. position: absolute;
  688. top: -100PX;
  689. right: 100PX;
  690. background: #fff;
  691. border-radius: 10PX;
  692. display: none;
  693. width: 190PX;
  694. height: 330PX;
  695. background: #fff;
  696. box-shadow: 0 4PX 16PX #0000001a;
  697. z-index: 99;
  698. box-sizing: border-box;
  699. padding: 20PX;
  700. img {
  701. margin-bottom: 10PX;
  702. }
  703. .qqfs {
  704. margin-bottom: 20PX;
  705. font-size: 14PX;
  706. color: #333;
  707. }
  708. .arrow {
  709. width: 0;
  710. height: 0;
  711. width: 0;
  712. border-top: 20PX solid transparent;
  713. border-bottom: 20PX solid transparent;
  714. border-left: 20PX solid #fff;
  715. position: absolute;
  716. top: 120PX;
  717. right: -20PX;
  718. transform: translateX(-50%);
  719. z-index: 100;
  720. }
  721. }
  722. .kefu_item_content_phone {
  723. position: absolute;
  724. top: 0;
  725. right: 100PX;
  726. background: #fff;
  727. border-radius: 10PX;
  728. display: none;
  729. width: 190PX;
  730. height: 80PX;
  731. background: #fff;
  732. box-shadow: 0 4PX 16PX #0000001a;
  733. z-index: 99;
  734. box-sizing: border-box;
  735. padding: 20PX;
  736. text-align: left;
  737. color: #333;
  738. .kefu_item_content_phone_title {
  739. margin-bottom: 5PX;
  740. font-weight: bold;
  741. }
  742. .arrow {
  743. width: 0;
  744. height: 0;
  745. width: 0;
  746. border-top: 20PX solid transparent;
  747. border-bottom: 20PX solid transparent;
  748. border-left: 20PX solid #fff;
  749. position: absolute;
  750. top: 20PX;
  751. right: -20PX;
  752. transform: translateX(-50%);
  753. z-index: 100;
  754. }
  755. }
  756. }
  757. // 关联网站
  758. .websiteLink {
  759. position: fixed;
  760. left: 45PX;
  761. bottom: 10PX;
  762. .websitelist {
  763. width: 210PX;
  764. height: 27PX;
  765. line-height: 27PX;
  766. color: #ee6363;
  767. margin-bottom: 5PX;
  768. border: 1PX solid #ccc;
  769. text-align: center;
  770. background-color: #fff;
  771. font-size: 14PX;
  772. a {
  773. color: #ee6363;
  774. }
  775. }
  776. }
  777. // 你问我答
  778. .questionAnswer {
  779. width: 300PX;
  780. height: auto;
  781. overflow: hidden;
  782. position: fixed;
  783. bottom: 0;
  784. right: 0;
  785. background: #fff;
  786. border: 1PX solid #7ab9dd;
  787. padding: 10PX;
  788. box-shadow: 0PX 1PX 8PX #888;
  789. z-index: 99999999;
  790. .title {
  791. height: 40PX;
  792. line-height: 40PX;
  793. span {
  794. font-size: 22PX;
  795. color: #0a78d7;
  796. }
  797. }
  798. .content {
  799. height: 300PX;
  800. overflow: auto;
  801. }
  802. }
  803. }
  804. @media screen and (max-width: 800px) {
  805. .index_foot {
  806. box-sizing: border-box;
  807. width: 100%;
  808. margin: 0 auto;
  809. }
  810. .foot_title {
  811. width: 96%;
  812. height: 80px;
  813. line-height: 80px;
  814. overflow: hidden;
  815. background-color: #f4f4f4;
  816. margin-bottom: 20px;
  817. font-size: 40px;
  818. color: #022a7a;
  819. padding: 0 10px;
  820. box-sizing: border-box;
  821. margin: 0 20px;
  822. }
  823. .index_foot_name_box {
  824. margin: 20px auto 0px;
  825. text-align: center;
  826. font-size: 0px;
  827. }
  828. .index_foot_name {
  829. display: inline-block;
  830. height: 67px;
  831. line-height: 67px;
  832. color: #f2f9f4;
  833. font-size: 51px;
  834. font-weight: bold;
  835. overflow: hidden;
  836. }
  837. .index_foot_name:nth-of-type(even) {
  838. color: #333;
  839. font-size: 32px;
  840. }
  841. .foot_img_box {
  842. overflow: hidden;
  843. display: block;
  844. margin: 20px auto 0;
  845. width: 100%;
  846. display: flex;
  847. flex-wrap: wrap;
  848. align-items: center;
  849. justify-content: space-between;
  850. padding: 0 20px;
  851. box-sizing: border-box;
  852. a {
  853. width: 45%;
  854. height: 100px;
  855. float: left;
  856. padding: 0 10px;
  857. margin: 20px 0;
  858. img {
  859. width: 100%;
  860. height: 100%;
  861. border: solid 1px #ccc;
  862. font-size: 24px;
  863. }
  864. }
  865. }
  866. .foot_img_box>* * {
  867. display: block;
  868. width: 100%;
  869. height: 100%;
  870. }
  871. .foot_img_box>*:nth-of-type(7n) {
  872. margin-right: 0px;
  873. }
  874. .foot_frind_box {
  875. display: block;
  876. margin: 22px auto;
  877. overflow: hidden;
  878. display: flex;
  879. width: 100%;
  880. border-bottom: solid 3px #ff0024;
  881. div {
  882. width: 100%;
  883. overflow: hidden;
  884. padding: 0 20px;
  885. margin-bottom: 20px;
  886. a {
  887. float: left;
  888. height: 60px;
  889. line-height: 60px;
  890. padding: 0 20px;
  891. font-size: 32px;
  892. color: #333;
  893. font-family: "微软雅黑", "microsoft yahei";
  894. }
  895. }
  896. }
  897. .call_us_box {
  898. display: block;
  899. width: 100%;
  900. margin: 40px auto 0;
  901. overflow: hidden;
  902. text-align: center;
  903. font-size: 0px;
  904. background: #ff0024;
  905. a {
  906. color: #fff;
  907. }
  908. }
  909. .call_us_box>* {
  910. height: 40px;
  911. line-height: 40px;
  912. padding: 0 20px;
  913. line-height: 50px;
  914. text-align: center;
  915. background: #ff0024;
  916. margin: 0px auto;
  917. font-size: 32px;
  918. color: #fff;
  919. box-sizing: border-box;
  920. position: relative;
  921. }
  922. .call_us_box>*::after {
  923. content: "";
  924. position: absolute;
  925. right: 0;
  926. top: 20%;
  927. width: 1px;
  928. height: 60%;
  929. background-color: #fff;
  930. }
  931. .call_us_box>*:last-child::after {
  932. display: none;
  933. }
  934. .foot_text_box {
  935. margin: 40px auto 0px;
  936. text-align: center;
  937. color: #333;
  938. font-size: 30px;
  939. line-height: 60px;
  940. padding: 0 20px;
  941. a {
  942. color: #333;
  943. font-size: 16px;
  944. }
  945. }
  946. .foot_text_box_green {
  947. color: #40663B;
  948. }
  949. .foot_text_box img {
  950. display: inline-block;
  951. height: 20px;
  952. vertical-align: middle;
  953. }
  954. .foot_logo_out {
  955. position: relative;
  956. margin: 0px auto;
  957. width: 100%;
  958. height: 0px;
  959. }
  960. .foot_logo_out * {
  961. width: 120px;
  962. display: block;
  963. }
  964. .foot_logo_out>* {
  965. position: absolute;
  966. top: -166px;
  967. }
  968. .foot_logo_out>*:nth-of-type(1) {
  969. left: 0px;
  970. }
  971. .foot_logo_out>*:nth-of-type(2) {
  972. right: 0px;
  973. }
  974. .foot_last_img_box {
  975. margin: 40px auto 10px;
  976. text-align: center;
  977. overflow: hidden;
  978. width: 100%;
  979. font-size: 0px;
  980. padding-bottom: 40px;
  981. }
  982. .foot_last_img_box>* {
  983. height: 50px;
  984. width: 45%;
  985. display: inline-block;
  986. overflow: hidden;
  987. }
  988. .foot_last_img_box img {
  989. width: 120px;
  990. height: 50px;
  991. }
  992. .foot_text_html_css :deep(a) {
  993. color: #333;
  994. }
  995. .foot_text_html_css :deep(img) {
  996. margin: 0 5px;
  997. }
  998. //添加在线客服
  999. .kefu {
  1000. position: fixed;
  1001. top: 320px;
  1002. right: 0px;
  1003. .kefu_itemKf {
  1004. background-color: #0099cc;
  1005. border-radius: 20px;
  1006. width: 128px;
  1007. height: 128px;
  1008. margin-bottom: 30px;
  1009. text-align: center;
  1010. box-sizing: border-box;
  1011. position: relative;
  1012. cursor: pointer;
  1013. a {
  1014. >p {
  1015. color: #fff;
  1016. font-size: 24px;
  1017. font-weight: 500;
  1018. line-height: 32px;
  1019. }
  1020. >img {
  1021. margin: 16px auto 0px;
  1022. width: 60px;
  1023. height: 60px;
  1024. }
  1025. }
  1026. }
  1027. .kefu_itemQQ {
  1028. background-color: #fff;
  1029. border-radius: 10px;
  1030. box-shadow: 0 4px 16px #0000001a;
  1031. height: 100px;
  1032. margin-bottom: 15px;
  1033. text-align: center;
  1034. width: 100px;
  1035. box-sizing: border-box;
  1036. position: relative;
  1037. cursor: pointer;
  1038. >p {
  1039. color: #666;
  1040. font-size: 14px;
  1041. font-weight: 500;
  1042. line-height: 16px;
  1043. }
  1044. >img {
  1045. margin-top: 10px;
  1046. width: 60px;
  1047. height: 60px;
  1048. }
  1049. &:hover {
  1050. .kefu_item_content_QQ {
  1051. display: block;
  1052. }
  1053. }
  1054. }
  1055. .kefu_itemPhone {
  1056. background-color: #fff;
  1057. border-radius: 10px;
  1058. box-shadow: 0 4px 16px #0000001a;
  1059. height: 100px;
  1060. margin-bottom: 15px;
  1061. text-align: center;
  1062. width: 100px;
  1063. box-sizing: border-box;
  1064. position: relative;
  1065. cursor: pointer;
  1066. >p {
  1067. color: #666;
  1068. font-size: 14px;
  1069. font-weight: 500;
  1070. line-height: 16px;
  1071. }
  1072. >img {
  1073. margin-top: 10px;
  1074. width: 60px;
  1075. height: 60px;
  1076. }
  1077. &:hover {
  1078. .kefu_item_content_phone {
  1079. display: block;
  1080. }
  1081. }
  1082. }
  1083. .kefu_item_content_QQ {
  1084. position: absolute;
  1085. top: -100px;
  1086. right: 100px;
  1087. background: #fff;
  1088. border-radius: 10px;
  1089. display: none;
  1090. width: 190px;
  1091. height: 330px;
  1092. background: #fff;
  1093. box-shadow: 0 4px 16px #0000001a;
  1094. z-index: 99;
  1095. box-sizing: border-box;
  1096. padding: 20px;
  1097. img {
  1098. margin-bottom: 10px;
  1099. }
  1100. .qqfs {
  1101. margin-bottom: 20px;
  1102. font-size: 14px;
  1103. color: #333;
  1104. }
  1105. .arrow {
  1106. width: 0;
  1107. height: 0;
  1108. width: 0;
  1109. border-top: 20px solid transparent;
  1110. border-bottom: 20px solid transparent;
  1111. border-left: 20px solid #fff;
  1112. position: absolute;
  1113. top: 120px;
  1114. right: -20px;
  1115. transform: translateX(-50%);
  1116. z-index: 100;
  1117. }
  1118. }
  1119. .kefu_item_content_phone {
  1120. position: absolute;
  1121. top: 0;
  1122. right: 100px;
  1123. background: #fff;
  1124. border-radius: 10px;
  1125. display: none;
  1126. width: 190px;
  1127. height: 80px;
  1128. background: #fff;
  1129. box-shadow: 0 4px 16px #0000001a;
  1130. z-index: 99;
  1131. box-sizing: border-box;
  1132. padding: 20px;
  1133. text-align: left;
  1134. color: #333;
  1135. .kefu_item_content_phone_title {
  1136. margin-bottom: 5px;
  1137. font-weight: bold;
  1138. }
  1139. .arrow {
  1140. width: 0;
  1141. height: 0;
  1142. width: 0;
  1143. border-top: 20px solid transparent;
  1144. border-bottom: 20px solid transparent;
  1145. border-left: 20px solid #fff;
  1146. position: absolute;
  1147. top: 20px;
  1148. right: -20px;
  1149. transform: translateX(-50%);
  1150. z-index: 100;
  1151. }
  1152. }
  1153. }
  1154. // 关联网站
  1155. .websiteLink {
  1156. position: fixed;
  1157. left: 16px;
  1158. bottom: 10px;
  1159. .websitelist {
  1160. width: 420px;
  1161. height: 54px;
  1162. line-height: 54px;
  1163. color: #ee6363;
  1164. margin-bottom: 10px;
  1165. border: 2px solid #ccc;
  1166. text-align: center;
  1167. background-color: #fff;
  1168. font-size: 28px;
  1169. a {
  1170. color: #ee6363;
  1171. }
  1172. }
  1173. }
  1174. // 你问我答
  1175. .questionAnswer {
  1176. width: 300px;
  1177. height: auto;
  1178. overflow: hidden;
  1179. position: fixed;
  1180. bottom: 0;
  1181. right: 0;
  1182. background: #fff;
  1183. border: 1px solid #7ab9dd;
  1184. padding: 10px;
  1185. box-shadow: 0px 1px 8px #888;
  1186. z-index: 99999999;
  1187. .title {
  1188. height: 40px;
  1189. line-height: 40px;
  1190. span {
  1191. font-size: 22px;
  1192. color: #0a78d7;
  1193. }
  1194. }
  1195. .content {
  1196. height: 300px;
  1197. overflow: auto;
  1198. }
  1199. }
  1200. }