index.css 16 KB

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