foot.less 30 KB

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