tradingIndex.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  1. .patentTitle{
  2. clear: both;
  3. text-align: center;
  4. }
  5. .patentTitle h2{
  6. font-size: 26px;
  7. color: #323131;
  8. }
  9. .patentTitle span{
  10. display: inline-block;
  11. width: 54px;
  12. height: 4px;
  13. background: #1697e9;
  14. }
  15. .patentHeader{
  16. width: 100%;
  17. height:396px;
  18. background: #f3f9fc;
  19. position: relative;
  20. margin-bottom: 77px;
  21. }
  22. .patentAchievement a{
  23. background: #fff;
  24. width: 120px;
  25. height: 36px;
  26. line-height: 32px;
  27. display: inline-block;
  28. text-align: center;
  29. position: absolute;
  30. bottom:120px;
  31. left:770px;
  32. z-index: 20;
  33. color: #40acff;
  34. font-size: 16px;
  35. border: 2px solid #40acff;
  36. }
  37. .patentAchievement a:hover{
  38. background: #40acff;
  39. color: #ffffff;
  40. }
  41. .patentHeader .patentAchievement{
  42. position: absolute;
  43. left: 50%;
  44. z-index: 10;
  45. transform: translateX(-50%);
  46. }
  47. .patentAchievement .patentTop{
  48. position: absolute;
  49. top: 88px;
  50. left: 50%;
  51. transform: translateX(-50%);
  52. }
  53. .patentAchievementList{
  54. position: relative;
  55. z-index: 20;
  56. height: 400px;
  57. margin-bottom: 58px;
  58. }
  59. .patentAchievementList .patentAchievLeft{
  60. position: absolute;
  61. left: 0;
  62. top: 0;
  63. width: 357px;
  64. height: 360px;
  65. position: relative;
  66. display: flex;
  67. display: -webkit-flex;
  68. justify-content: space-between;
  69. z-index: 26;
  70. }
  71. .patentAchievementList .patentAchievLeft img{
  72. width: 100%;
  73. height: 100%;
  74. display: inline-block;
  75. position: absolute;
  76. top: 0;
  77. left: 0;
  78. z-index: 30;
  79. }
  80. .patentAchievementList .patentAchievLeft .remark{
  81. position: absolute;
  82. width: 100%;
  83. height: 100%;
  84. overflow: hidden;
  85. left: 0;
  86. bottom: 0;
  87. z-index: 30;
  88. background: rgba(47, 87, 176, .5);
  89. transition: all .2s ease-in;
  90. }
  91. .patentAchievementList .patentAchievLeft:hover .remark{
  92. height: 100%;
  93. transition: all .2s ease-in-out
  94. }
  95. .patentAchievementList .patentAchievLeft .remark p{
  96. margin-left: 70px;
  97. margin-top: 72px;
  98. width: 220px;
  99. font-size: 18px;
  100. color: #ffffff;
  101. overflow: hidden;
  102. display: -webkit-box;
  103. text-overflow: ellipsis;
  104. -webkit-box-orient: vertical;
  105. -webkit-line-clamp:3;
  106. line-height: 32px;
  107. }
  108. .patentAchievementList .patentAchievLeft .remark a{
  109. width: 110px;
  110. height: 34px;
  111. display: inline-block;
  112. text-align: center;
  113. color: #ffffff;
  114. border: 2px solid #ffffff;
  115. line-height: 30px;
  116. margin-left: 200px;
  117. margin-top: 47px;
  118. }
  119. .patentAchievementList .patentAchievLeft .remark a:hover{
  120. color: #f3f9fc;
  121. background: #1697e9;
  122. border: 2px solid #1697e9;
  123. }
  124. .patentAchievementList ul {
  125. position: absolute;
  126. top: 0;
  127. right: 0;
  128. display: flex;
  129. display: -webkit-flex;
  130. width: 795px;
  131. justify-content: space-between;
  132. z-index: 32;
  133. }
  134. .patentAchievementList ul li{
  135. width: 254px;
  136. text-align: center;
  137. height: 360px;
  138. background: #ffffff;
  139. }
  140. .patentAchievementList ul li div{
  141. width: 254px;
  142. height: 200px;
  143. overflow: hidden;
  144. }
  145. .patentAchievementList ul li div img{
  146. width: 100%;
  147. height: 100%;
  148. }
  149. .patentAchievementList ul li p{
  150. padding: 14px 22px 30px;;
  151. height: 30px;
  152. line-height: 30px;
  153. font-size: 18px;
  154. color: #1f1f1f;
  155. text-align: left;
  156. overflow: hidden;
  157. white-space:nowrap;
  158. text-overflow:ellipsis;
  159. -o-text-overflow:ellipsis;
  160. }
  161. .patentAchievementList ul li a{
  162. display: inline-block;
  163. width: 110px;
  164. height: 34px;
  165. line-height: 30px;
  166. border: 2px solid #40acff;
  167. color: #40acff;
  168. margin-top: 40px;
  169. }
  170. .patentAchievementListBj{
  171. background: #f9f9f9;
  172. height: 350px;
  173. width: 100%;
  174. position: absolute;
  175. top: 50px;
  176. z-index: 21;
  177. }
  178. .patentAchievementList ul li a:hover{
  179. background: #1697e9;
  180. color: #ffffff;
  181. border-color:#1697e9
  182. }
  183. .patentAchievementList ul li:hover{
  184. box-shadow: 0 4px 10px #ccc;
  185. margin-top: -4px;
  186. transition: all .2s ease-in-out;
  187. }
  188. /* 解决技术难题 */
  189. .patentSolve{
  190. margin-top: 13px;
  191. margin-bottom: 86px;
  192. width: 100%;
  193. height: 475px;
  194. background: url(../../../img/patent/patent_jiejue.jpg)no-repeat;
  195. background-size:100% 100%;
  196. }
  197. .patentSolve .patentSolveBody{
  198. position: relative;
  199. z-index: 40;
  200. height: 475px
  201. }
  202. .patentSolveBody ul{
  203. position: absolute;
  204. right: 0;
  205. top: 50%;
  206. transform: translateY(-50%);
  207. height:246px;
  208. width:660px;
  209. z-index: 192;
  210. display: flex;
  211. display: -webkit-flex;
  212. justify-content: space-between;
  213. }
  214. .patentSolveBody ul li{
  215. width: 320px;
  216. height: 246px;
  217. background: #ffffff;
  218. transition: all .2s ease-in
  219. }
  220. .patentSolveBody ul li div{
  221. position: relative;
  222. z-index: 40;
  223. width: 100%;
  224. height: 174px;
  225. overflow: hidden;
  226. }
  227. .patentSolveBody ul li div img{
  228. width: 100%;
  229. height: 100%;
  230. display: inline-block;
  231. }
  232. .patentSolveBody{
  233. text-align: center
  234. }
  235. .patentSolveBody ul li div a{
  236. position: absolute;
  237. bottom: 15px;
  238. left: 50%;
  239. width: 120px;
  240. height: 34px;
  241. line-height: 30px;
  242. background: #ffffff;
  243. border: 2px solid #40acff;
  244. color: #40acff;
  245. text-align: center;
  246. margin-left: -60px;
  247. }
  248. .patentSolveBody ul li div a:hover{
  249. background: #1697e9;
  250. color: #ffffff;
  251. border-color: #1697e9;
  252. }
  253. .patentSolveBody ul li:hover{
  254. margin-top: -6px;
  255. box-shadow: 0 4px 10px #ccc;
  256. transition: all .2s ease-in-out
  257. }
  258. .patentSolveBody ul li p{
  259. font-size: 17px;
  260. color: #1f1f1f;
  261. text-align: center;
  262. overflow: hidden;
  263. text-overflow: ellipsis;
  264. white-space: nowrap;
  265. -o-text-overflow: ellipsis;
  266. height: 70px;
  267. line-height: 70px;
  268. padding: 0 15px;
  269. }
  270. .patentSolveBody>a{
  271. position: absolute;
  272. bottom: 30px;
  273. left: 50%;
  274. margin-left: -60px;
  275. width: 120px;
  276. height: 36px;
  277. line-height: 32px;
  278. text-align: center;
  279. font-size: 16px;
  280. color: #40acff;
  281. border: 2px solid #40acff;
  282. }
  283. .patentSolveBody>a:hover{
  284. background: #1697e9;
  285. color: #ffffff;
  286. border-color:#1697e9;
  287. }
  288. /*知识产权交易政策 */
  289. /* 政策咨询 */
  290. .news{
  291. display: flex;
  292. display: -webkit-flex;
  293. justify-content: space-between;
  294. }
  295. .news div{
  296. width:578px;
  297. margin-top: 28px;
  298. }
  299. .news div h4{
  300. font-size: 18px;
  301. color: #323131;
  302. font-weight: normal
  303. }
  304. .news div h4 img{
  305. float: right;
  306. margin-bottom: 24px;
  307. }
  308. .news div ul{
  309. clear: both;
  310. }
  311. .news div ul li a{
  312. display: flex;
  313. display: -webkit-flex;
  314. justify-content: space-between;
  315. }
  316. .news div ul li a .newTxt{
  317. width: 476px;
  318. }
  319. .news div ul li a .time{
  320. width: 75px;
  321. height: 74px;
  322. text-align: center;
  323. background: #f4f4f4;
  324. padding-top: 16px;
  325. }
  326. .news div ul li a .time span{
  327. display: inline-block;
  328. margin-bottom: 4px;
  329. color: #000000;
  330. font-size: 16px;
  331. }
  332. .news div ul li a .time span:nth-child(2){
  333. font-weight: 800
  334. }
  335. .news div ul li a .newTxt h5{
  336. font-weight: normal;
  337. color: #1f1f1f;
  338. font-size: 16px;
  339. overflow: hidden;
  340. white-space: nowrap;
  341. text-overflow: ellipsis;
  342. -o-text-overflow: ellipsis;
  343. margin-bottom: 10px;
  344. }
  345. .news div ul li a .newTxt p{
  346. font-size: 14px;
  347. color: #7a7878;
  348. overflow: hidden;
  349. display: -webkit-box;
  350. text-overflow: ellipsis;
  351. -webkit-box-orient: vertical;
  352. -webkit-line-clamp:2;
  353. }
  354. .news div ul li a:hover .time{
  355. background: #1697e9;
  356. }
  357. .new .policy>img{
  358. width: 565px;
  359. height: 115px;
  360. }
  361. .news div ul li a:hover .time span{
  362. color: #ffffff;
  363. }
  364. .news div ul li a:hover .newTxt h5{
  365. color: #1697e9;
  366. }
  367. .consultation ul li .time {
  368. margin-top: 20px;
  369. }
  370. .more{
  371. clear: both;
  372. overflow: hidden;
  373. float:right;
  374. font-size: 14px;
  375. color: #323131;
  376. margin-top: 15px;
  377. margin-bottom: 50px;
  378. }
  379. .more:hover{
  380. color: #1697e9;
  381. }
  382. .more:hover span{
  383. background: #1697e9;
  384. }
  385. .more:hover span::after{
  386. background: #1697e9;
  387. }
  388. .more span{
  389. display: inline-block;
  390. width: 22px;
  391. height: 1px;
  392. margin-left: 10px;
  393. margin-right: 8px;
  394. background: #323131;
  395. vertical-align: top;
  396. margin-top: 9px;
  397. }
  398. .more span:after{
  399. content: '';
  400. width: 6px;
  401. height: 1px;
  402. display: inline-block;
  403. background:#323131;
  404. transform: rotate(45deg);
  405. vertical-align: top;
  406. margin-left: 16px;
  407. margin-top: -2px;
  408. }
  409. .expert{
  410. clear: both;
  411. margin-top: 20px;
  412. }
  413. .expert h5{
  414. font-weight: normal;
  415. padding-left: 18px;
  416. border-left: 4px solid #1697e9;
  417. height:30px;
  418. line-height: 27px;
  419. font-size: 26px;
  420. color: #2f2f2f;
  421. }
  422. .expertList {
  423. display: flex;
  424. display: -webkit-flex;
  425. justify-content: space-between;
  426. margin-top: 28px;
  427. margin-bottom: 15px;
  428. }
  429. .expertList ul {
  430. display: flex;
  431. display: -webkit-flex;
  432. justify-content: space-between;
  433. width: 794px;
  434. }
  435. .expertList ul li{
  436. width: 257px;
  437. height: 370px;
  438. background: #f9f9f9;
  439. transition: all .2s ease-in-out;
  440. text-align: center;
  441. border-bottom: 4px solid transparent;
  442. }
  443. .expertList ul li div{
  444. width: 100%;
  445. }
  446. .expertList ul li div img{
  447. width: 140px;
  448. height: 140px;
  449. margin: 37px auto 33px;
  450. display: inline-block;
  451. border-radius: 50%;
  452. }
  453. .expertList ul li h3{
  454. font-weight: normal;
  455. font-size: 22px;
  456. margin-left: 8px;
  457. color: #1f1f1f;
  458. padding: 0 10px;
  459. height: 42px;
  460. line-height: 42px;
  461. overflow: hidden;
  462. white-space:nowrap;
  463. text-overflow:ellipsis;
  464. -o-text-overflow:ellipsis;
  465. }
  466. .expertList ul li h3 span{
  467. font-size: 18px;
  468. display: inline-block;
  469. margin-left: 12px;
  470. color: #1797e9;
  471. vertical-align: top
  472. }
  473. .expertList ul li p{
  474. padding: 0 50px;
  475. font-size: 14px;
  476. color: #707070;
  477. overflow: hidden;
  478. display: -webkit-box;
  479. text-overflow: ellipsis;
  480. -webkit-box-orient: vertical;
  481. -webkit-line-clamp:3;
  482. margin-top: 12px;
  483. }
  484. .expertList .expertImg{
  485. width: 380px;
  486. height: 400px;
  487. margin-top: -30px;
  488. }
  489. .expertList .expertImg img{
  490. width: 100% ;
  491. height: 100%;
  492. display: inline-block;
  493. }
  494. .expertList ul li:hover{
  495. box-shadow: 0 0px 15px #ccc;
  496. margin-top: -4px;
  497. transition: all .2s ease-in-out;
  498. border-bottom: 4px solid #1697e9;
  499. }