demand.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771
  1. /*
  2. @author:liting
  3. @update:2018/06/04
  4. */
  5. /* 主体内容 */
  6. .demand-marq {
  7. position: relative;
  8. top: -12px;
  9. clear: both;
  10. width: 100%;
  11. height: 50px;
  12. line-height: 50px;
  13. box-shadow: 0 5px 5px #ccc;
  14. padding: 0 20px;
  15. background-color: #ffffff;
  16. }
  17. .demand-marq span {
  18. float: left;
  19. width: 96px;
  20. height: 20px;
  21. display: inline-block;
  22. background: url(../../../img/newMenu/demand-1.png) no-repeat;
  23. vertical-align: top;
  24. margin-top: 15px
  25. }
  26. .demand-marq marquee ul {
  27. overflow: hidden;
  28. width: 3500px;
  29. height: 50px;
  30. }
  31. .demand-marq marquee {
  32. overflow: hidden;
  33. margin-left: 20px;
  34. width: 980px;
  35. float: left;
  36. }
  37. .demand-marq ul li {
  38. margin: 0 30px;
  39. float: left;
  40. }
  41. /* 最新需求 */
  42. .newDemand {
  43. clear: both;
  44. overflow: hidden;
  45. background: #f9f9f9;
  46. padding: 10px 14px;
  47. margin-bottom: 42px;
  48. }
  49. .newDemand .demandZnew{
  50. width: 200px;
  51. height: 140px;
  52. float: left;
  53. position: relative;
  54. background: url(../../../img/newMenu/demand-2.jpg)no-repeat;
  55. background-size: 100% 100%;
  56. }
  57. .newDemand .demandZnew a{
  58. width: 112px;
  59. height: 28px;
  60. position: absolute;
  61. bottom: 26px;
  62. left: 50%;
  63. margin-left: -56px;
  64. display: inline-block;
  65. color: #ffffff;
  66. text-align: center;
  67. line-height: 28px;
  68. background: rgba(105, 2, 2, 0.5);
  69. border-radius: 12px;
  70. }
  71. .newDemand .demandZnew a:hover{
  72. background: #ffffff;
  73. color: red;
  74. border: 1px solid red
  75. }
  76. .newDemand ul {
  77. width:940px;
  78. box-sizing: border-box;
  79. float: left;
  80. }
  81. .newDemand ul li {
  82. padding: 10px 0;
  83. box-sizing: border-box;
  84. width: 19.6%;
  85. float: left;
  86. }
  87. .newDemand ul li a{
  88. color: #666;
  89. }
  90. .newDemand ul li:first-child div {
  91. border: none;
  92. }
  93. .newDemand ul li div {
  94. box-sizing: border-box;
  95. padding: 0px 16px;
  96. border-left: 1px solid #dfdfdf;
  97. }
  98. .newDemand ul li div p .timeBefor {
  99. float: right;
  100. margin-top: 3px;
  101. }
  102. .newDemand ul li div p:nth-child(2){
  103. height: 30px;
  104. line-height: 30px;
  105. overflow: hidden;
  106. white-space:nowrap;
  107. text-overflow:ellipsis;
  108. -o-text-overflow:ellipsis;
  109. }
  110. .newDemand ul li:hover div p:nth-child(2){
  111. font-size: 15px;
  112. color: #0a7dd4!important;
  113. }
  114. /* HOT */
  115. .mainHot .hot {
  116. width: 40px;
  117. display: inline-block;
  118. height: 20px;
  119. font-size: 14px;
  120. text-align: center;
  121. line-height: 20px;
  122. background-color: #f52429;
  123. color: #ffffff;
  124. border-radius: 3px;
  125. margin-right: 10px
  126. }
  127. .mainHot .crumbNav {
  128. display: inline-block;
  129. }
  130. .crumbNav li {
  131. color: #393838;
  132. margin: 0 6px;
  133. display: inline-block;
  134. }
  135. .crumbNav li a{
  136. color: #393838;
  137. }
  138. .crumbNav li:nth-child(2n+1):hover a{
  139. cursor: pointer;
  140. color: #0289df;
  141. }
  142. .enterprise a:hover,.study a:hover{
  143. cursor: pointer;
  144. color: #0289df;
  145. }
  146. .mainHot .hr {
  147. display: inline-block;
  148. width: 100%;
  149. height: 3px;
  150. background: #ff570c;
  151. margin: 8px 0;
  152. }
  153. .mainHot .mainLeft{
  154. padding-right: 0px;
  155. }
  156. .mainHot .demandTxt,
  157. .talentsTxt {
  158. padding-right: 15px;
  159. }
  160. .demandTxt{
  161. height: 220px;
  162. }
  163. .talentsTxt ol li:hover p span:nth-child(2){
  164. color:#ff580e
  165. }
  166. .talentsIntroduce{
  167. overflow: hidden;
  168. white-space:nowrap;
  169. text-overflow:ellipsis;
  170. -o-text-overflow:ellipsis;
  171. overflow: hidden;
  172. }
  173. .demandTxt .col-md-7 .name{
  174. color: #333333;
  175. }
  176. .demandTxt .col-md-7>div{
  177. margin-bottom: 16px;
  178. padding: 5px 0;;
  179. width: 100%;
  180. transition: all .2s ease-out;
  181. }
  182. .demandTxt .col-md-7:hover{
  183. margin-left: -8px;
  184. transition: all .2s ease-in;
  185. }
  186. .demandTxt .col-md-7:hover .name{
  187. color: #0a7dd4;
  188. }
  189. .demandTxt .col-md-7 div a{
  190. color:#333;
  191. }
  192. .demandTxt .col-md-7 div>div:nth-child(2) {
  193. padding: 8px 5px 20px;
  194. }
  195. .demandTxt .col-md-7 div:hover{
  196. }
  197. .demandTxt .col-md-7 div>p:first
  198. .mainHot .demandTxt img {
  199. float: left;
  200. }
  201. .demandTxt .problemDes {
  202. margin-top: 10px;
  203. }
  204. .demandTxt .talents,
  205. .talentsTxt .talents {
  206. display: inline-block;
  207. width: 110px;
  208. color: #ffffff;
  209. height: 22px;
  210. padding-left: 10px;
  211. line-height: 22px;
  212. text-align: center;
  213. margin-right: 5px;
  214. background: url(../../../img/newMenu/demand-6.png) no-repeat;
  215. }
  216. .demandTxt .col-md-7 {
  217. padding-right: 0px;
  218. margin-bottom: 20px;
  219. }
  220. .demandTxt p:nth-child(2),
  221. .talentsTxt p:nth-child(2) {
  222. color: #7a7878;
  223. text-align: justify;
  224. font-size: 12px;
  225. margin-top: 10px;
  226. line-height: 24px;
  227. }
  228. .colorOrange {
  229. color: #ff570c;
  230. font-size: 12px;
  231. float: right;
  232. margin-left: 20px;
  233. }
  234. .demandTxt .colorOrange{
  235. vertical-align: top;
  236. margin-right: 10px;
  237. float: right;
  238. }
  239. .colorOrt {
  240. color: #ff570c;
  241. float: right;
  242. }
  243. .demandTxt .colorTime{
  244. vertical-align: top;
  245. }
  246. .colorTime {
  247. font-size: 12px;
  248. float: right;
  249. color: #0289df!important;
  250. }
  251. .talentsTxt {
  252. padding-left: 15px;
  253. }
  254. .talentsTxt ol li {
  255. padding: 5px 5px 0px;
  256. height: 56px;
  257. margin-bottom: 30px;
  258. }
  259. .talentsTxt ol li img{
  260. float: right;
  261. }
  262. .talentsTxt ol li:hover{
  263. margin-left: -8px;
  264. transition: all .2s ease-in
  265. }
  266. .talentsTxt ol li:hover div span:nth-child(2){
  267. color: #0a7dd4;
  268. }
  269. .introduceP{
  270. padding-left: 10px;
  271. margin-top: 12px;
  272. }
  273. .introduceP span{
  274. color: #7a7878;
  275. font-size: 12px;
  276. display: inline-block;
  277. }
  278. .talentsTxt ol li a{
  279. color:#333;
  280. }
  281. .demandTxt .problemDes{
  282. margin-bottom:10px;
  283. overflow: hidden;
  284. white-space:nowrap;
  285. text-overflow:ellipsis;
  286. -o-text-overflow:ellipsis;
  287. color: #7a7878;
  288. font-size: 12px;
  289. line-height: 24px;
  290. }
  291. /* 企业技术需求 */
  292. .enterprise {
  293. padding-bottom: 80px;
  294. }
  295. .enterprise .col-md-2{
  296. padding-right: 0;
  297. }
  298. .enterprise .col-md-2 img{
  299. width: 100%;
  300. height: 340px;
  301. }
  302. .enterprise h4,.study h4 {
  303. font-weight: normal;
  304. font-size: 22px;
  305. color: #1f1f1f;
  306. padding-bottom: 24px;
  307. }
  308. .enterprise h4 a,.study h4 a {
  309. display: inline-block;
  310. color: #cacaca;
  311. font-size: 12px;
  312. margin-left: 24px;
  313. }
  314. .imgGroup {
  315. box-sizing: border-box;
  316. }
  317. .imgGroup ul {
  318. box-sizing: border-box;
  319. }
  320. .imgGroup ul li {
  321. padding: 0 5px;
  322. display: inline-block;
  323. overflow: hidden;
  324. width: 24.6%;
  325. margin-bottom: 30px;
  326. transition: all .2s ease-in;
  327. }
  328. .imgGroup ul li:hover{
  329. transition: all .2s ease-in;
  330. box-shadow: 0 5px 10px #ccc;
  331. }
  332. .imgGroup ul li:hover p{
  333. color: #0a7dd4;
  334. }
  335. .imgGroup ul li img {
  336. display: inline-block;
  337. width: 100%;
  338. height: 116px;
  339. }
  340. .imgGroup p {
  341. white-space: nowrap;
  342. text-overflow: ellipsis;
  343. -o-text-overflow: ellipsis;
  344. overflow: hidden;
  345. width: 100%;
  346. line-height: 40px;
  347. font-size: 14px;
  348. color: #1f1f1f;
  349. text-align: center;
  350. }
  351. /* 地区成果 */
  352. .areaDemand h3 {
  353. width: 700px;
  354. margin: 0 auto 22px;
  355. }
  356. .fullImg .fullImgTxt {
  357. position: absolute;
  358. top: 0;
  359. left: 50%;
  360. margin-left: -600px;
  361. }
  362. .areaDemand .fullImg {
  363. position: relative;
  364. left: 0;
  365. top: 0;
  366. width: 100%;
  367. padding-top: 130px;
  368. padding-bottom: 70px;
  369. }
  370. .areaDemand .fullImg img {
  371. width: 100%;
  372. height: 400px;
  373. }
  374. .fullImgTxt li {
  375. padding-top: 10px;
  376. transition: all .2s ease-in-out;
  377. }
  378. .fullImgTxt li .warpImg {
  379. width: 100%;
  380. background: #ffffff;
  381. box-shadow: 0 5px 15px #333;
  382. }
  383. .fullImgTxt li p {
  384. text-align: justify;
  385. line-height: 24px;
  386. font-size: 14px;
  387. color: #7a7878;
  388. }
  389. .fullImgTxt .btnAreaBj {
  390. text-align: center;
  391. height: 118px;
  392. background: url(../../../img/newMenu/demand-14.jpg) no-repeat
  393. }
  394. .fullImgTxt .btnAreaBj .btnArea {
  395. display: inline-block;
  396. padding: 0 10px;
  397. height: 34px;
  398. background: #ffffff;
  399. border-radius: 17px;
  400. line-height: 34px;
  401. text-align: center;
  402. font-size: 18px;
  403. color: #191919;
  404. vertical-align: top;
  405. margin-top: 70px;
  406. }
  407. .fullImgTxt ul li:hover {
  408. margin-top: -4px;
  409. transition: all .2s ease-in;
  410. }
  411. .fullImgTxt .btnAreaBj .btnArea:hover {
  412. background: #0289df;
  413. color: #ffffff;
  414. }
  415. .fullImgTxt .introduction {
  416. padding: 10px 20px 10px;
  417. }
  418. .fullImgTxt .introduction p{
  419. padding-top: 12px;
  420. height: 300px;
  421. overflow: hidden;
  422. display: -webkit-box;
  423. text-overflow: ellipsis;
  424. -webkit-box-orient: vertical;
  425. -webkit-line-clamp:12;
  426. }
  427. .fullImgTxt .btnSee {
  428. text-align: center
  429. }
  430. .fullImgTxt .btnSee span {
  431. display: inline-block;
  432. width: 160px;
  433. height: 44px;
  434. line-height: 44px;
  435. font-size: 16px;
  436. text-align: center;
  437. color: #ffffff;
  438. background: linear-gradient(#ff8518, #ffac2a);
  439. vertical-align: bottom;
  440. margin-bottom: -30px;
  441. box-shadow: 0 3px 10px #333;
  442. border-radius: 10px;
  443. }
  444. .fullImgTxt .btnSee:hover span {
  445. color: #ffffff;
  446. background: #0289df;
  447. }
  448. /* 产学研合作需求 */
  449. .studyTxt{
  450. padding-left: 10px;
  451. }
  452. .studyTxt ul li{
  453. box-sizing: border-box;
  454. height:110px;
  455. overflow: hidden;
  456. margin-bottom: 20px;
  457. border: 1px solid transparent;
  458. }
  459. .studyTxt ul li img {
  460. width: 132px;
  461. height: 110px;
  462. border: none
  463. }
  464. .studyTxt ul li .imgLeft{
  465. vertical-align: top;
  466. width: 132px;
  467. height: 110px;
  468. float: left;
  469. border: none;
  470. overflow: hidden;
  471. }
  472. .studyTxt ul li:hover img {
  473. opacity: 0.6;
  474. transition: all .1s ease-in
  475. }
  476. .studyTxt ul li:hover .imgRight h5{
  477. color:#0a7dd4;
  478. }
  479. .studyTxt ul li .imgRight{
  480. box-sizing: border-box;
  481. padding-left:10px;
  482. float: left;
  483. width: 59%;
  484. height: 110px;
  485. padding-right: 5px;
  486. background: #f9f9f9;
  487. }
  488. .studyTxt ul li .imgRight h5{
  489. font-size: 14px;
  490. color: #393838;
  491. padding-top: 13px;
  492. padding-bottom: 10px;
  493. }
  494. .studyTxt ul li .imgRight p{
  495. font-size: 12px;
  496. text-align: justify;
  497. color: #7a7878;
  498. margin-bottom: 5px;
  499. overflow: hidden;
  500. line-height: 18px;
  501. display: -webkit-box;
  502. text-overflow: ellipsis;
  503. -webkit-box-orient: vertical;
  504. -webkit-line-clamp: 2;
  505. }
  506. .studyTxt ul li .imgRight span{
  507. display: inline-block;
  508. text-align: right;
  509. height: 22px;
  510. line-height: 22px;
  511. border: 1px solid #ff570c;
  512. color: #ff570c;
  513. padding:0 5px;
  514. font-size: 12px;
  515. float: right;
  516. margin-left:6px;
  517. }
  518. .studyTxt>div.col-sm-2{
  519. padding-left: 0px
  520. }
  521. .studyTxt>div>img{
  522. width: 100%;
  523. height: 369px;
  524. }
  525. .studyTxt .col-sm-4{
  526. padding-right: 0;
  527. padding-left: 5px;
  528. }
  529. /* 研产资金需求 */
  530. .capital{
  531. padding-top: 40px;
  532. }
  533. .capitalMain{
  534. height: 322px;
  535. }
  536. .capitalMain div ol{
  537. display: -webkit-flex;
  538. display: flex;
  539. }
  540. .capitalMain div ol li{
  541. padding: 20px 20px;
  542. margin-right: 20px;
  543. overflow: hidden;
  544. transition: all .2s ease-out;
  545. background: url(../../../img/newMenu/demand-20.jpg) no-repeat;
  546. }
  547. .capitalMain div ol li:hover{
  548. margin-top: -4px;
  549. box-shadow: 0 5px 5px #ccc;
  550. transition: all .2s ease-in
  551. }
  552. .capitalMain div ol li:hover h4{
  553. color: #0289df;
  554. }
  555. .capitalMain .col-sm-2 img{
  556. width: 100%;
  557. }
  558. .capital-administration{
  559. text-align: center;
  560. width: 190px;
  561. }
  562. .capital-administration .capitalBj{
  563. height: 193px;
  564. overflow: hidden;
  565. background: rgba(255, 255,255, .5);
  566. padding:20px;
  567. }
  568. .capital-administration .capitalBj h4{
  569. overflow: hidden;
  570. white-space:nowrap;
  571. text-overflow:ellipsis;
  572. -o-text-overflow:ellipsis;
  573. overflow: hidden;
  574. color: #191919;
  575. }
  576. .capital-administration .capitalBj>p{
  577. height: 100px;
  578. text-align: left;
  579. font-size: 14px;
  580. color:#7a7878;
  581. padding:20px 0;
  582. overflow: hidden;
  583. display: -webkit-box;
  584. text-overflow: ellipsis;
  585. -webkit-box-orient: vertical;
  586. -webkit-line-clamp:3;
  587. }
  588. .capitalMain ol li {
  589. width: 233px;
  590. height: 322px;
  591. }
  592. .capital-administration .capitalBj>div>p{
  593. font-size: 12px;
  594. color: #393838;
  595. }
  596. .capital-administration>a:nth-child(2):hover{
  597. background: #0289df;
  598. color: #ffffff;
  599. box-shadow: 0 5px 20px #0289df;
  600. }
  601. .capital-administration>a:nth-child(2){
  602. clear: both;
  603. display: inline-block;
  604. width: 100%;
  605. background: #ffffff;
  606. color: #ff580e;
  607. font-size: 16px;
  608. margin-top: 30px;
  609. margin-bottom: 6px;
  610. height: 44px;
  611. line-height: 44px;
  612. box-shadow: 0 5px 10px #ccc;
  613. border-radius: 5px;
  614. }
  615. /* 技术人才需求*/
  616. .technology>div>img{
  617. width: 180px;
  618. height: 280px;
  619. }
  620. .technology.row{
  621. margin-right: 0
  622. }
  623. .technology ol li{
  624. height: 136px;
  625. margin-bottom: 8px;
  626. transition: all .2s ease-in-out;
  627. }
  628. .technology ol li:hover div{
  629. transition: all .2s ease-in-out;
  630. border-radius: 5px;
  631. border-color: #1797e9;
  632. }
  633. .technology ol li div{
  634. box-sizing: border-box;
  635. overflow: hidden;
  636. border: 1px solid #eeeeee;
  637. padding: 18px 10px 8px;
  638. }
  639. .technology ol li div>p{
  640. height: 48px;
  641. clear: both;
  642. }
  643. .technology .col-sm-4{
  644. padding-left: 8px;
  645. padding-right: 0px;
  646. }
  647. .technology ol li div h4{
  648. font-size: 16px;
  649. font-weight: normal;
  650. color: #1f1f1f;
  651. padding-bottom: 6px;
  652. }
  653. .technology ol li div h4>span:first-child{
  654. display: inline-block;
  655. width:145px;
  656. }
  657. .technology ol li div .titleBorder{
  658. width: 42px;
  659. height: 24px;
  660. line-height: 24px;
  661. display: inline-block;
  662. background: #f6f6f6;
  663. border-radius: 12px;
  664. color: #7a7878;
  665. text-align: center;
  666. font-size: 14px;
  667. margin: 0 5px;
  668. }
  669. .technology ol li div .money{
  670. color: #ff570c;
  671. font-size: 14px;
  672. float: right;
  673. vertical-align: top;
  674. margin-top: 4px;
  675. }
  676. .technology ol li div>p{
  677. overflow: hidden;
  678. display: -webkit-box;
  679. text-overflow: ellipsis;
  680. -webkit-box-orient: vertical;
  681. -webkit-line-clamp:2;
  682. font-size: 14px;
  683. color: #7f7f7f;
  684. line-height: 24px;
  685. text-align: justify;
  686. }
  687. .technology ol li div>span{
  688. width: 60px;
  689. height: 24px;
  690. line-height: 24px;
  691. text-align: center;
  692. border-radius: 12px;
  693. border: 1px solid #0289df;
  694. font-size: 12px;
  695. color: #0289df;
  696. margin-top: 6px;
  697. transition: all .2s ease-out;
  698. }
  699. .technology ol li:hover div>span{
  700. transition: all .2s ease-in;
  701. width: 100px;
  702. background: #0289df;
  703. color: #ffffff;
  704. }
  705. .demandFootImg{
  706. width: 100%;
  707. padding-top: 40px;
  708. padding-bottom: 140px;
  709. }
  710. .demandFootImg img{
  711. width: 100%;
  712. }