index.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782
  1. .logo_photo{
  2. float: right;
  3. height: 90px;
  4. line-height: 90px;
  5. color: #ff570c;
  6. font-size: 20px;
  7. font-weight: 700
  8. }
  9. .topNav{
  10. border:none!important;
  11. }
  12. .bannerList{
  13. position: relative;
  14. overflow: hidden;
  15. }
  16. .bannerList .carousel .carousel-inner img{
  17. width: 100%;
  18. height: 475px;
  19. }
  20. .bannerList .carousel .left,.bannerList .carousel .right{
  21. height: 475px;
  22. line-height: 475px;
  23. font-size: 60px;
  24. }
  25. .indexSearch{
  26. width: 1200px;
  27. padding: 0 34px;
  28. height: 92px;
  29. position: absolute;
  30. bottom:118px;
  31. left: 50%;
  32. margin-left: -600px;
  33. }
  34. .jumpType{
  35. padding-left: 54px;
  36. }
  37. .indexSearch .search-inp{
  38. clear: both;
  39. width: 1000px;
  40. height: 54px;
  41. }
  42. .jumpType li{
  43. cursor: pointer;
  44. float: left;
  45. }
  46. .indexSearch .demandSearch{
  47. height: 54px;
  48. line-height: 54px;
  49. }
  50. .indexSearch .searchBtn{
  51. height: 54px;
  52. line-height: 34px;
  53. background: #1697e9;
  54. border: 1px solid #1697e9;
  55. color: #ffffff;
  56. }
  57. .indexSearch .search-inp{
  58. float: left;
  59. }
  60. .jumpType li{
  61. width: 60px;
  62. height: 35px;
  63. text-align: center;
  64. color: #ffffff;
  65. line-height: 28px;
  66. }
  67. .jumpType li.active{
  68. background: url(../../../img/index/index_jumpBj.png) no-repeat;
  69. background-size:100% 100%;
  70. }
  71. .indexSearch .search-inp .input-group{
  72. width: 1000px;
  73. }
  74. .indexSearch .search-inp .input-group .input-group-btn{
  75. width: 104px;
  76. }
  77. .indexSearch .search-inp .input-group .input-group-btn button{
  78. width: 100%;
  79. font-size: 18px;
  80. }
  81. .indexSearch .apply{
  82. cursor: pointer;
  83. float: right;
  84. width: 105px;
  85. height: 54px;
  86. line-height: 54px;
  87. text-align: center;
  88. font-size: 18px;
  89. color: #ffffff;
  90. background: #ffac2a;
  91. }
  92. /* 主体区域 */
  93. .indexNav{
  94. overflow: hidden;
  95. margin: 10px 0;
  96. background: url(../../../img/index/index_iconBj.png) no-repeat;
  97. background-size:100% 100%;
  98. }
  99. .indexNav ul {
  100. display: flex;
  101. display: -webkit-flex;
  102. justify-content: space-around;
  103. }
  104. .indexNav ul li a{
  105. display: inline-block;
  106. }
  107. .indexNav ul li:hover img{
  108. transform: rotateY(360deg);
  109. transition: all 1s ease-in-out;
  110. }
  111. .indexNav ul li:hover P{
  112. color:#1697e9;
  113. }
  114. .indexNav ul li p{
  115. text-align: center;
  116. font-size: 16px;
  117. color: #1f1f1f;
  118. margin-top: 16px;
  119. margin-bottom: 10px;
  120. }
  121. .container .title{
  122. font-size: 26px;
  123. text-align: center;
  124. color: #323131;
  125. margin-top: 70px;
  126. }
  127. .handle{
  128. padding-top: 34px;
  129. }
  130. .handle ul{
  131. display: flex;
  132. display: -webkit-flex;
  133. justify-content: space-between;
  134. }
  135. .handle ul li{
  136. width: 370px;
  137. border: 1px solid #f0f0f0;
  138. text-align: center;
  139. }
  140. .handle ul li .handleBox{
  141. width: 370px;
  142. height: 202px;
  143. overflow: hidden;
  144. position: relative;
  145. }
  146. .handle ul li .handleBox>img{
  147. width: 100%;
  148. height: 100%;
  149. position: absolute;
  150. top: 0;
  151. left: 0;
  152. }
  153. .handle ul li .handleBox .handleMask{
  154. overflow: hidden;
  155. height:100%;
  156. position: absolute;
  157. background: rgba(141, 150, 168, 0.5);
  158. width: 100%;
  159. bottom: 0;
  160. left: 0;
  161. transition: all .5s ease-in-out;
  162. }
  163. .handle ul li .handleBox .handleMask .maskTxt{
  164. position: absolute;
  165. text-align: center;
  166. width: 120px;
  167. left: 50%;
  168. top: 55%;
  169. transform: translate(-50%, -50%);
  170. }
  171. .handle ul li .handleBox .handleMask .maskTxt>p{
  172. font-size: 22px;
  173. color: #ffffff;
  174. margin-top: 20px;
  175. }
  176. .handle ul li .handleBox .handleMask .maskTxt span{
  177. display: inline-block;
  178. width: 32px;
  179. height: 2px;
  180. background: #fff;
  181. }
  182. .handle ul li a{
  183. width: 110px;
  184. height: 34px;
  185. line-height: 30px;
  186. display: inline-block;
  187. text-align: center;
  188. border: 2px solid #1697e9;
  189. font-size: 16px;
  190. color: #1697e9;
  191. margin-top: 26px;
  192. margin-bottom: 20px;
  193. border-radius: 4px;
  194. }
  195. .handle ul li a:hover{
  196. background: #1697e9;
  197. color: #ffffff
  198. }
  199. .handle ul li:hover{
  200. box-shadow: 0 4px 15px #ccc;
  201. }
  202. .handle .more{
  203. clear: both;
  204. overflow: hidden;
  205. float:right;
  206. font-size: 14px;
  207. color: #323131;
  208. margin-top: 15px;
  209. margin-bottom: 64px;
  210. }
  211. .handle ul li:hover .handleBox .maskTxt {
  212. top: 60px;
  213. transition: all .5s ease-in-out;
  214. }
  215. .handle ul li .handleBox .maskTxt img{
  216. width: 65px;
  217. height: 55px;
  218. }
  219. .handle ul li:hover .handleBox .maskTxt img{
  220. width: 0px;
  221. height: 0px;
  222. transition: all .5s ease-in-out;
  223. }
  224. .handle ul li:hover .handleBox .maskTxt .contentTxt{
  225. top:100px;
  226. }
  227. .maskTxt .contentTxt{
  228. width: 200px;
  229. position: absolute;
  230. top: 202px;
  231. margin-left: -40px;
  232. transition: all .5s ease-in-out;
  233. }
  234. .maskTxt .contentTxt p{
  235. color:#ffffff;
  236. font-size: 14px;
  237. text-align: left;
  238. overflow: hidden;
  239. display: -webkit-box;
  240. text-overflow: ellipsis;
  241. -webkit-box-orient: vertical;
  242. -webkit-line-clamp:3;
  243. }
  244. .handle .more:hover{
  245. color: #1697e9;
  246. }
  247. .handle .more:hover span{
  248. background: #1697e9;
  249. }
  250. .handle .more:hover span::after{
  251. background: #1697e9;
  252. }
  253. .handle .more span{
  254. display: inline-block;
  255. width: 22px;
  256. height: 1px;
  257. margin-left: 10px;
  258. margin-right: 8px;
  259. background: #323131;
  260. vertical-align: middle;
  261. }
  262. .handle .more span:after{
  263. content: '';
  264. width: 6px;
  265. height: 1px;
  266. display: inline-block;
  267. background:#323131;
  268. transform: rotate(45deg);
  269. vertical-align: top;
  270. margin-left: 16px;
  271. margin-top: -3px;
  272. }
  273. /* 热门推荐 */
  274. .RecommendTitle{
  275. clear: both;
  276. text-align: center;
  277. }
  278. .RecommendTitle h2{
  279. font-size: 26px;
  280. color: #323131;
  281. }
  282. .RecommendTitle span{
  283. display: inline-block;
  284. width: 54px;
  285. height: 4px;
  286. background: #1697e9;
  287. transition: all .2s ease-in;
  288. }
  289. .RecommendBody {
  290. margin-top: 22px;
  291. margin-bottom: 80px;
  292. display: flex;
  293. display: -webkit-flex;
  294. justify-content: space-between;
  295. }
  296. .RecommendBody .RecommendTxt{
  297. width: 295px;
  298. height: 420px;
  299. text-align: center;
  300. background: #f9f9f9;
  301. position: relative;
  302. }
  303. .RecommendTxtBottom p{
  304. font-size: 22px;
  305. color: #1f1f1f;
  306. margin-top: 24px;
  307. margin-bottom: 12px;
  308. padding: 0 10px;
  309. overflow: hidden;
  310. text-overflow: ellipsis;
  311. -o-text-overflow: ellipsis;
  312. white-space: nowrap;
  313. }
  314. .RecommendTxt .RecommendTxtImg{
  315. position: relative;
  316. width: 295px;
  317. height: 296px;
  318. overflow: hidden;
  319. }
  320. .RecommendTxt .RecommendTxtImg img{
  321. width: 100%;
  322. height: 100%;
  323. position: absolute;
  324. top: 0;
  325. left: 0;
  326. display: inline-block;
  327. }
  328. .RecommendTxtImg .txts{
  329. opacity: 0;
  330. width: 100%;
  331. height: 100%;
  332. background: rgba(152, 154, 156, 0.7);
  333. position: absolute;
  334. top: 0;
  335. left: 0;
  336. }
  337. .RecommendBody .RecommendTxt:hover .txts{
  338. opacity: 1;
  339. }
  340. .RecommendBody .RecommendTxt:hover .txts p{
  341. top: 50%;
  342. transform: translate(0%,-50%);
  343. transition: all .5s ease-in-out;
  344. }
  345. .RecommendTxtImg .txts p{
  346. font-size: 14px;
  347. color: #fff;
  348. width: 200px;
  349. position: absolute;
  350. margin-left: -100px;
  351. left: 50%;
  352. top: 100%;
  353. text-align: left;
  354. overflow: hidden;
  355. display: -webkit-box;
  356. text-overflow: ellipsis;
  357. -webkit-box-orient: vertical;
  358. -webkit-line-clamp:6;
  359. }
  360. .RecommendBody .RecommendImg{
  361. width: 586px;
  362. height: 420px;
  363. }
  364. .RecommendImg .RecommendRemask{
  365. position: relative;
  366. display: inline-block;
  367. width:586px;
  368. height: 246px;
  369. overflow: hidden;
  370. }
  371. .RecommendImg .RecommendRemask:hover .remaskImg{
  372. height: 100%;
  373. transition: all .2s ease-in-out;
  374. }
  375. .RecommendImg>.RecommendRemask>img{
  376. position: absolute;
  377. top: 0;
  378. left: 0;
  379. width:100%;
  380. height: 100%;
  381. transition: all .2s ease-in;
  382. }
  383. .RecommendImg .imgGrounp{
  384. padding-top: 10px;
  385. display: flex;
  386. justify-content: space-between;
  387. }
  388. .RecommendImg .imgGrounp .RecommendRemask{
  389. display: inline-block;
  390. overflow: hidden;
  391. width: 285px;
  392. height: 162px;
  393. }
  394. .RecommendImg .RecommendRemask{
  395. position: relative;
  396. }
  397. .RecommendImg .RecommendRemask .remaskImg div{
  398. position: absolute;
  399. left: 50%;
  400. top: 50%;
  401. width: 270px;
  402. text-align: center;
  403. transform: translate(-50%,-50%);
  404. }
  405. .RecommendImg .RecommendRemask .remaskImg div p{
  406. font-size: 22px;
  407. color: #ffffff;
  408. margin-bottom: 12px;
  409. overflow: hidden;
  410. text-overflow: ellipsis;
  411. -o-text-overflow: ellipsis;
  412. white-space: nowrap;
  413. }
  414. .RecommendImg .RecommendRemask .remaskImg div a{
  415. display: inline-block;
  416. width: 110px;
  417. height: 34px;
  418. line-height: 30px;
  419. font-size: 16px;
  420. text-align: center;
  421. color: #000;
  422. background: #ffffff;
  423. border: 2px solid #fff;
  424. border-radius: 4px;
  425. }
  426. .RecommendImg .RecommendRemask .remaskImg div a:hover{
  427. background: #40acff;
  428. color: #ffffff;
  429. border: 2px solid #40acff;
  430. }
  431. .RecommendImg .imgGrounp .RecommendRemask img{
  432. width: 100%;
  433. height: 100%;
  434. position: absolute;
  435. left: 0;top: 0;
  436. transition: all .2s ease-in;
  437. }
  438. .RecommendImg .RecommendRemask .remaskImg{
  439. position: absolute;
  440. text-align: center;
  441. overflow: hidden;
  442. width: 100%;
  443. height:0%;
  444. background: rgba(152, 154, 156, 0.7);
  445. top: 0;
  446. left: 0;
  447. transition: all .2s ease-in;
  448. }
  449. .RecommendBody .RecommendTxt img{
  450. width: 100%;
  451. height: 296px;
  452. display: inline-block;
  453. }
  454. .RecommendBody .RecommendTxt>p{
  455. font-size: 22px;
  456. color: #1f1f1f;
  457. margin-top: 24px;
  458. margin-bottom: 12px;
  459. }
  460. .RecommendTxtBottom {
  461. position: absolute;
  462. bottom: 0;
  463. height: 122px;
  464. width: 100%;
  465. left: 0
  466. }
  467. .RecommendBody .RecommendTxt a{
  468. display: inline-block;
  469. width: 110px;
  470. height: 34px;
  471. line-height: 30px;
  472. font-size: 16px;
  473. text-align: center;
  474. color: #40acff;
  475. border: 2px solid #40acff;
  476. border-radius: 4px;
  477. }
  478. .RecommendBody .RecommendTxt:hover{
  479. box-shadow: 0 4px 10px #ccc;
  480. }
  481. .RecommendImg .RecommendRemask:hover img {
  482. transform: scale(1.1);
  483. transition: all .2s ease-in-out;
  484. }
  485. .RecommendTxt a:hover{
  486. background: #1697e9;
  487. border-color: #1697e9;
  488. color: #ffffff;
  489. }
  490. /* 品牌建设 */
  491. .brand{
  492. margin-top: 17px;
  493. margin-bottom: 60px;
  494. width: 100%;
  495. height: 590px;
  496. background: url(../../../img/index/index_brandBj.jpg) no-repeat;
  497. background-size:100% 100%;
  498. }
  499. .brand .brandBody{
  500. padding-top: 72px;
  501. display: flex;
  502. justify-content: space-between;
  503. text-align: center;
  504. }
  505. .brand .brandBody div{
  506. transition: all .3s ease-in;
  507. }
  508. .brand .brandBody .brandLeft{
  509. width: 374px;
  510. height: 420px;
  511. display: flex;
  512. flex-direction: column;
  513. justify-content: space-between;
  514. }
  515. .brand .brandBody .brandLeft .writeBj{
  516. background: #ffffff;
  517. height: 200px;
  518. box-shadow: 0 0 15px rgb(230, 228, 228)
  519. }
  520. .brand .brandBody .brandMid{
  521. box-shadow: 0 0 15px rgb(230, 228, 228);
  522. width: 370px;
  523. height: 420px;
  524. background: #FFFFFF
  525. }
  526. .brand .brandBody .brandLeft .writeBj img{
  527. margin-top: 36px;
  528. margin-bottom: 22px;
  529. }
  530. .brand .brandBody .brandLeft .writeBj p{
  531. font-size: 18px;
  532. color:#1f1f1f;
  533. }
  534. .brand .brandBody .brandMid img{
  535. margin-top: 64px;
  536. }
  537. .brand .brandBody .brandMid h4{
  538. font-weight: normal;
  539. font-size: 18px;
  540. color: #1f1f1f;
  541. margin-top: 22px;
  542. margin-bottom: 30px;
  543. }
  544. .brand .brandBody .brandMid p{
  545. font-size: 16px;
  546. color: #959595;
  547. margin-bottom: 12px;
  548. }
  549. .brand .brandBody .brandMid a{
  550. width: 110px;
  551. height: 34px;
  552. border: 2px solid #40acff;
  553. color: #40acff;
  554. display: inline-block;
  555. line-height: 30px;
  556. border-radius: 4px;
  557. margin-top: 14px;
  558. }
  559. .brand .brandBody .brandMid a:hover{
  560. background: #40acff;
  561. color: #ffffff;
  562. }
  563. .brandBody .brandLeft .writeBj:hover,.brand .brandBody .brandMid:hover{
  564. margin-top: -8px;
  565. margin-bottom: 8px;
  566. box-shadow: 0 10px 15px #ccc;
  567. transition: all .3s ease-in-out;
  568. }
  569. /* 政策咨询 */
  570. .news{
  571. display: flex;
  572. display: -webkit-flex;
  573. justify-content: space-between;
  574. margin-bottom: 60px;
  575. }
  576. .news div{
  577. width:578px;
  578. margin-top: 28px;
  579. }
  580. .news div h4{
  581. font-size: 18px;
  582. color: #323131;
  583. font-weight: normal;
  584. margin-bottom: 24px;
  585. }
  586. .news div ul{
  587. clear: both;
  588. }
  589. .news div ul li a{
  590. display: flex;
  591. display: -webkit-flex;
  592. justify-content: space-between;
  593. }
  594. .news div ul li a .newTxt{
  595. width: 476px;
  596. }
  597. .news div ul li a .time{
  598. width: 75px;
  599. height: 74px;
  600. text-align: center;
  601. background: #f4f4f4;
  602. padding-top: 16px;
  603. }
  604. .news div ul li a .time span{
  605. display: inline-block;
  606. margin-bottom: 4px;
  607. color: #000000;
  608. font-size: 16px;
  609. }
  610. .news div ul li a .time span:nth-child(2){
  611. font-weight: 800
  612. }
  613. .news div ul li a .newTxt h5{
  614. font-weight: normal;
  615. color: #1f1f1f;
  616. font-size: 16px;
  617. overflow: hidden;
  618. white-space: nowrap;
  619. text-overflow: ellipsis;
  620. -o-text-overflow: ellipsis;
  621. margin-bottom: 10px;
  622. }
  623. .news div ul li a .newTxt p{
  624. font-size: 14px;
  625. color: #7a7878;
  626. overflow: hidden;
  627. display: -webkit-box;
  628. text-overflow: ellipsis;
  629. -webkit-box-orient: vertical;
  630. -webkit-line-clamp:2;
  631. }
  632. .news div ul li a:hover .time{
  633. background: #1697e9;
  634. }
  635. .news div ul li a:hover .time span{
  636. color: #ffffff;
  637. }
  638. .news div ul li a:hover .newTxt h5{
  639. color: #1697e9;
  640. }
  641. .consultation .time,.consultation .newTxt{
  642. margin-top: 0
  643. }
  644. .consultation ul li{
  645. margin-bottom: 24px;
  646. }
  647. .news h4 a{
  648. float: right;
  649. }
  650. .news h4 a span:nth-child(2){
  651. width: 22px;
  652. height: 22px;
  653. border: 1px solid #cecece;
  654. text-align: center;
  655. line-height: 18px;
  656. display: inline-block;
  657. float: right;
  658. color: #cecece
  659. }
  660. .news h4 a:hover .line{
  661. background: #1697e9;
  662. }
  663. .news h4 a:hover span{
  664. border-color:#1697e9;
  665. color:#1697e9;
  666. }
  667. .news h4 .line{
  668. vertical-align: middle;
  669. width: 470px;
  670. height: 1px;
  671. background: #cecece;
  672. display: inline-block;
  673. }
  674. .news .policy img{
  675. width: 100%;
  676. height: 170px;
  677. display: inline-block;
  678. }
  679. .publicNumber{
  680. margin-top: 26px;
  681. display: flex;
  682. display: -webkit-flex;
  683. justify-content: space-between;
  684. margin-bottom: 60px;
  685. }
  686. .publicNumber .video{
  687. width: 565px;
  688. height: 320px;
  689. }
  690. .publicNumber .video img{
  691. width: 100%;
  692. height: 100%;
  693. }
  694. .publicNumber ul {
  695. width: 578px;
  696. height: 320px;
  697. display: flex;
  698. display: -webkit-flex;
  699. flex-direction: column;
  700. justify-content: space-between;
  701. }
  702. .publicNumber ul li a{
  703. border-left: 4px solid transparent;
  704. width: 100%;
  705. height: 70px;
  706. display: inline-block;
  707. display: flex;
  708. display: -webkit-flex;
  709. background: #f4f4f4;
  710. padding-left:15px;
  711. justify-content: space-between;
  712. transition: all .2s ease-in-out;
  713. }
  714. .publicNumber ul li a .time{
  715. text-align: center;
  716. width: 70px;
  717. }
  718. .publicNumber ul li a .time span{
  719. display: inline-block;
  720. font-size: 16px;
  721. color: #333;
  722. }
  723. .publicNumber ul li a .time span:nth-child(1){
  724. margin-top: 16px;
  725. letter-spacing: 4px;
  726. margin-bottom: 2px;
  727. }
  728. .publicNumber ul li a .time span:nth-child(2){
  729. font-weight: 600
  730. }
  731. .publicNumber ul li a p{
  732. width: 480px;
  733. height: 40px;
  734. line-height: 40px;
  735. margin-top: 15px;
  736. font-size: 16px;
  737. color: #1f1f1f;
  738. border-left: 2px dotted #b5b5b5;
  739. padding:0 20px;
  740. overflow: hidden;
  741. white-space:nowrap;
  742. text-overflow:ellipsis;
  743. -o-text-overflow:ellipsis;
  744. }
  745. .publicNumber ul li a:hover {
  746. border-color: #1697e9;
  747. margin-left: -8px;
  748. transition: all .2s ease-in-out;
  749. }
  750. .publicNumber ul li a:hover .time span{
  751. color: #1697e9
  752. }
  753. .publicNumber ul li a:hover p{
  754. color: #40acff
  755. }