patent.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686
  1. /*
  2. updata:2018/7/25
  3. author:liting
  4. */
  5. .menuPosition {
  6. width: 100%;
  7. height: 500px;
  8. position: relative;
  9. z-index: 10;
  10. }
  11. .menuPosition .carousel{
  12. width: 100%;
  13. height: 500px;
  14. }
  15. .menuPosition .carousel img{
  16. width: 100%;
  17. height: 100%;
  18. display: inline-block;
  19. position: absolute;
  20. top: 0;
  21. left: 0;
  22. }
  23. .patentMenu{
  24. width: 1164px;
  25. position: absolute;
  26. top: 0;
  27. left: 50%;
  28. transform: translateX(-50%);
  29. height: 0px;
  30. }
  31. .patentMenu .firstMenu{
  32. position: absolute;
  33. z-index: 20;
  34. overflow: hidden;
  35. width: 198px;
  36. height: 452px;
  37. top: -12px;
  38. left: 15px;
  39. background: #fff;
  40. border-radius: 10px 10px 0 0 ;
  41. border-left: 1px solid #e0e0e0;
  42. border-bottom: 1px solid #e0e0e0;
  43. }
  44. .patentMenu .firstMenu a{
  45. color: #7a7878;
  46. }
  47. .patentMenu .firstMenu>p{
  48. width: 100%;
  49. height: 72px;
  50. border-radius: 10px 10px 0 0 ;
  51. text-align: center;
  52. background: url(../../../img/patent/patent_menu1.png)no-repeat;
  53. background-size:100% 100%;
  54. }
  55. .firstMenu ul li {
  56. width: 100%;
  57. height: 127px;
  58. text-align: center;
  59. border-right: 1px solid #e0e0e0;
  60. border-bottom: 1px solid #e0e0e0;
  61. }
  62. .firstMenu ul li.active{
  63. border-right: 1px solid transparent;
  64. }
  65. .firstMenu ul li.active a{
  66. color: #1797e9;
  67. }
  68. .firstMenu ul li.active span{
  69. color: #1797e9!important;
  70. border-color: #1797e9;
  71. }
  72. .firstMenu ul li.active p{
  73. color: #1797e9;
  74. }
  75. .firstMenu ul li>p{
  76. height: 127px;
  77. font-size: 18px;
  78. color: #7a7878;
  79. line-height: 126px;
  80. }
  81. .firstMenu ul li>p span:nth-child(1){
  82. display: inline-block;
  83. height: 20px;
  84. line-height: 18px;
  85. color:#7a7878;
  86. vertical-align: middle;
  87. }
  88. .firstMenu ul li .circl{
  89. display: inline-block;
  90. width: 20px;
  91. height:20px;
  92. border: 1px solid #7a7878;
  93. border-radius: 50%;
  94. font-size: 10px;
  95. vertical-align: middle;
  96. margin-right: 10px;
  97. margin-top: -2px;
  98. }
  99. .firstMenu ul li:hover{
  100. cursor: pointer;
  101. }
  102. .firstMenu ul li .direction{
  103. float: right;
  104. margin-right: 34px;
  105. line-height: 127px;
  106. width: 10px;
  107. font-size: 10px;
  108. height: 10px;
  109. display: inline-block;
  110. }
  111. .secondMenu{
  112. overflow: hidden;
  113. position: absolute;
  114. left: 213px;
  115. top:0px;
  116. background: #fff;
  117. height:440px;
  118. width: 0px;
  119. border-top: 1px solid #e0e0e0;
  120. border-bottom: 1px solid #e0e0e0;
  121. border-right: 1px solid #e0e0e0;
  122. transition: all .3s ease-in-out;
  123. }
  124. .secondMenu.active{
  125. width: 960px;
  126. transition: all .3s ease-in
  127. }
  128. .secondMenu ul li{
  129. position: absolute;
  130. top: 0;
  131. left: 200px;
  132. z-index: 50;
  133. opacity: 0;
  134. transition: all .3s ease-in-out;
  135. }
  136. .secondMenu ul li div{
  137. width: 180px;
  138. float: left;
  139. height: 300px;
  140. margin-top:44px;
  141. border-left: 1px dotted #e0e0e0;
  142. text-align: center;
  143. }
  144. .secondMenu ul li.active{
  145. left: 0;
  146. transition: all .3s ease-in-out;
  147. opacity: 1;
  148. }
  149. .secondMenu ul li div:first-child{
  150. border-left: none;
  151. }
  152. .secondMenu ul li div p a{
  153. display: inline-block;
  154. margin-bottom: 45px!important;
  155. color: #7a7878;
  156. }
  157. .secondMenu ul li div p:nth-child(1) a{
  158. margin-top: 10px;
  159. }
  160. .secondMenu ul li div p a:hover{
  161. color: #1797e9;
  162. }
  163. .secondMenu ul li div p {
  164. width: 100%;
  165. overflow: hidden;
  166. padding: 0 5px;
  167. }
  168. .secondMenu .menuBj{
  169. width: 130px;
  170. height: 110px;
  171. background: url(../../../img/patent/patent_menuBj.jpg)no-repeat;
  172. background-size:100% 100%;
  173. position: absolute;
  174. right: 13px;
  175. bottom: 60px;
  176. }
  177. /* 搜索 */
  178. .indexSearch{
  179. width: 743px;
  180. height: 36px;
  181. margin: 10px auto 74px;;
  182. }
  183. .indexSearch .search-inp{
  184. clear: both;
  185. width:635px;
  186. height: 36px;
  187. }
  188. .indexSearch .demandSearch{
  189. width: 530px;
  190. height: 36px;
  191. line-height: 34px;
  192. }
  193. .indexSearch .searchBtn{
  194. height: 36px;
  195. line-height: 22px;
  196. background: #1697e9;
  197. border: 1px solid #1697e9;
  198. color: #ffffff;
  199. }
  200. .indexSearch .searchBtn img{
  201. width: 25px;height: 24px;
  202. vertical-align: top
  203. }
  204. .indexSearch .search-inp{
  205. float: left;
  206. }
  207. .indexSearch .search-inp .input-group{
  208. width: 530px;
  209. }
  210. .form-control,.btn{
  211. border-radius: 0;
  212. }
  213. .btn{
  214. padding: 0;
  215. }
  216. .indexSearch .search-inp .input-group .input-group-btn{
  217. width: 104px;
  218. }
  219. .indexSearch .search-inp .input-group .input-group-btn button{
  220. width: 104px;;
  221. font-size: 18px;
  222. }
  223. .indexSearch .apply{
  224. cursor: pointer;
  225. float: right;
  226. width: 105px;
  227. height: 36px;
  228. line-height: 36px;
  229. text-align: center;
  230. font-size: 18px;
  231. color: #ffffff;
  232. background: #ffac2a;
  233. }
  234. /* 热门推荐 */
  235. .RecommendTitle{
  236. clear: both;
  237. text-align: center;
  238. }
  239. .RecommendTitle h2{
  240. font-size: 26px;
  241. color: #323131;
  242. }
  243. .RecommendTitle span{
  244. display: inline-block;
  245. width: 54px;
  246. height: 4px;
  247. background: #1697e9;
  248. transition: all .2s ease-in;
  249. }
  250. /* 最新发布 */
  251. .newRelease{
  252. margin-top: 30px;
  253. display: flex;
  254. display: -webkit-flex;
  255. justify-content: space-between;
  256. margin-bottom: 70px;
  257. }
  258. .newRelease li{
  259. width: 25%;
  260. height: 322px;
  261. position: relative;
  262. z-index: 20;
  263. }
  264. .newRelease li:first-child .txt{
  265. border-left: 1px solid #e0e0e0;
  266. }
  267. .newRelease li:last-child .txt{
  268. border-right: 1px solid #e0e0e0;
  269. }
  270. .newRelease li:nth-child(2n) .newReleaseImgs{
  271. width: 100%;
  272. height: 162px;
  273. position: absolute;
  274. bottom: 0;
  275. left: 0;
  276. z-index: 25;
  277. overflow: hidden;
  278. transition: all .2s ease-in
  279. }
  280. .newRelease li:nth-child(2n+1) .newReleaseImgs{
  281. width: 100%;
  282. height: 162px;
  283. position: absolute;
  284. top: 0;
  285. left: 0;
  286. z-index: 25;
  287. overflow: hidden;
  288. transition: all .2s ease-in
  289. }
  290. .newRelease li:nth-child(2n+1) .txt{
  291. width: 100%;
  292. height: 162px;
  293. position: absolute;
  294. bottom: 0;
  295. left: 0;
  296. z-index: 26;
  297. border-bottom: 1px solid #e0e0e0;
  298. }
  299. .newRelease li:nth-child(2n) .txt{
  300. width: 100%;
  301. height: 162px;
  302. position: absolute;
  303. top: 0;
  304. left: 0;
  305. z-index: 26;
  306. border-top: 1px solid #e0e0e0;
  307. }
  308. .newRelease li:nth-child(2n+1) .txt .triangle_border_up{
  309. position: absolute;
  310. top: -12px;
  311. left: 42px;
  312. z-index: 60;
  313. }
  314. .newRelease li:nth-child(2n) .txt .triangle_border_up{
  315. position: absolute;
  316. transform: rotate(180deg);
  317. bottom: -12px;
  318. left:42px;
  319. z-index: 60;
  320. }
  321. .newRelease li div img{
  322. width: 100%;
  323. height: 100%;
  324. display: inline-block;
  325. transition: all .2s ease-in;
  326. }
  327. .triangle_border_up{
  328. width:0;
  329. height:0;
  330. border-width:0 14px 14px;
  331. border-style:solid;
  332. border-color:transparent transparent #fff;/*透明 透明 灰*/
  333. }
  334. .newRelease li .txt .triangle{
  335. width: 18px;height: 12px;
  336. display: inline-block;
  337. }
  338. .txt{
  339. padding: 45px 30px;
  340. }
  341. .txt .wrapperTxt h4{
  342. font-weight: normal;
  343. font-size: 20px;
  344. color: #1f1f1f;
  345. margin-bottom: 16px;
  346. transition: all .2s ease-in-out;
  347. overflow: hidden;
  348. white-space:nowrap;
  349. text-overflow:ellipsis;
  350. -o-text-overflow:ellipsis;
  351. }
  352. .txt .wrapperTxt p{
  353. font-size: 16px;
  354. color: #919292;
  355. overflow: hidden;
  356. display: -webkit-box;
  357. text-overflow: ellipsis;
  358. -webkit-box-orient: vertical;
  359. -webkit-line-clamp:2;
  360. }
  361. .txt .wrapperTxt p span{
  362. display: inline-block;
  363. width:0;
  364. height:0;
  365. margin-left: 14px;
  366. border-width:6px 0 6px 6px;
  367. border-style:solid;
  368. border-color:transparent transparent transparent #40acff;/*透明 透明 透明 灰*/
  369. }
  370. .newRelease li:hover .newReleaseImgs img{
  371. transform: scale(1.1);
  372. transition: all .4s ease-in-out;
  373. }
  374. .newRelease li:hover h4{
  375. color: #1697e9;
  376. margin-left: 10px;
  377. transition: all .2s ease-in-out;
  378. }
  379. /* 专利服务 */
  380. .patentService{
  381. width: 100%;
  382. height: 388px;
  383. background: url(../../../img/patent/patentServesBj.jpg)no-repeat;
  384. background-size:100% 100%;
  385. margin-top: 24px;
  386. margin-bottom: 64px;
  387. padding-top: 46px;
  388. }
  389. .patentService .patentServiceList ul{
  390. display: flex;
  391. height: 280px;
  392. display: -webkit-flex;
  393. justify-content: space-between;
  394. }
  395. .patentService .patentServiceList ul li{
  396. width: 370px;
  397. height: 280px;
  398. background: #ffffff;
  399. transition: all .2s ease-in;
  400. }
  401. .patentServiceList ul li:hover p{
  402. color: #1697e9!important;
  403. }
  404. .patentService .patentServiceList ul li div{
  405. width: 100%;
  406. height: 202px;
  407. overflow: hidden;
  408. }
  409. .patentService .patentServiceList ul li p{
  410. height: 78px;
  411. line-height: 78px;
  412. text-align: center;
  413. padding:0 10px;
  414. overflow: hidden;
  415. text-overflow: ellipsis;
  416. white-space: nowrap;
  417. -o-text-overflow: ellipsis;
  418. font-size: 22px;
  419. color: #1f1f1f;
  420. }
  421. .patentService .patentServiceList ul{
  422. margin-bottom: 20px;
  423. }
  424. .patentService .patentServiceList ul li div img{
  425. width: 100%;
  426. height: 100%;
  427. display: inline-block;
  428. transition: all .2s ease-in;
  429. }
  430. .patentService .patentServiceList ul li:hover{
  431. box-shadow: 0 4px 10px #ccc;
  432. transition: all .2s ease-in-out;
  433. margin-top: -4px;
  434. }
  435. /* more */
  436. .more{
  437. clear: both;
  438. overflow: hidden;
  439. float:right;
  440. font-size: 14px;
  441. color: #323131;
  442. }
  443. .more:hover{
  444. color: #1697e9;
  445. }
  446. .more:hover span{
  447. background: #1697e9;
  448. }
  449. .more:hover span::after{
  450. background: #1697e9;
  451. }
  452. .more span{
  453. display: inline-block;
  454. width: 22px;
  455. height: 1px;
  456. margin-left: 10px;
  457. margin-right: 8px;
  458. background: #323131;
  459. vertical-align: middle;
  460. }
  461. .more span:after{
  462. content: '';
  463. width: 6px;
  464. height: 1px;
  465. display: inline-block;
  466. background:#323131;
  467. transform: rotate(45deg);
  468. vertical-align: top;
  469. margin-left: 16px;
  470. margin-top: -3px;
  471. }
  472. /* 商标服务 */
  473. .trademark{
  474. margin-top: 20px;
  475. background: #f4f4f4;
  476. padding-top: 36px;
  477. padding-bottom: 44px;
  478. overflow: hidden;
  479. }
  480. .trademarkList{
  481. height: 380px;
  482. display: -webkit-flex;
  483. display: flex;
  484. justify-content: space-between;
  485. padding: 0 14px;
  486. margin-bottom: 16px;
  487. }
  488. .trademarkList li{
  489. width: 284px;
  490. height: 380px;
  491. background: #ffffff;
  492. transition: all .2s ease-in;
  493. }
  494. .trademarkList li div{
  495. width: 100%;
  496. height: 288px;
  497. overflow: hidden;
  498. }
  499. .trademarkList li div img{
  500. width: 100%;
  501. height: 100%;
  502. display: inline-block;
  503. }
  504. .trademarkList li p{
  505. height: 94px;
  506. line-height: 94px;
  507. overflow: hidden;
  508. text-overflow: ellipsis;
  509. -o-text-overflow: ellipsis;
  510. white-space: nowrap;
  511. font-size: 23px;
  512. color: #1f1f1f;
  513. text-align: center
  514. }
  515. .trademarkList li:hover{
  516. margin-top: -4px;
  517. box-shadow: 0 4px 10px #ccc;
  518. transition: all .2s ease-in-out;
  519. }
  520. /* 版权服务 */
  521. .copyright {
  522. height: 304px;
  523. clear: both;
  524. margin-top: 82px;
  525. padding:0 14px;
  526. }
  527. .copyright h3{
  528. font-weight: normal;
  529. font-size: 26px;
  530. color: #2f2f2f;
  531. height: 32px;
  532. padding-left: 14px;
  533. border-left: 4px solid #1697e9;
  534. margin-bottom: 12px;
  535. }
  536. .copyright ul{
  537. height: 260px;
  538. display: flex;
  539. display: -webkit-flex;
  540. justify-content: space-between;
  541. margin-bottom: 20px;
  542. }
  543. .copyright ul li{
  544. width: 360px;
  545. height: 260px;
  546. background: #ffffff;
  547. transition: all .2s ease-in;
  548. }
  549. .copyright ul li div{
  550. width: 100%;
  551. height: 198px;
  552. overflow: hidden;
  553. }
  554. .copyright ul li div img{
  555. width: 100%;
  556. height: 100%;
  557. display: inline-block;
  558. }
  559. .copyright ul li:hover p{
  560. color: #1697e9
  561. }
  562. .copyright ul li p{
  563. height: 62px;
  564. line-height: 62px;
  565. overflow: hidden;
  566. text-overflow: ellipsis;
  567. -o-text-overflow: ellipsis;
  568. white-space: nowrap;
  569. font-size: 20px;
  570. color: #484545;
  571. text-align: center
  572. }
  573. .copyright ul li:hover{
  574. margin-top: -4px;
  575. box-shadow: 0 4px 10px #ccc;
  576. transition: all .2s ease-in-out
  577. }
  578. .trademarkList li:hover{
  579. margin-top: -4px;
  580. box-shadow: 0 4px 10px #ccc;
  581. transition: all .2s ease-in-out;
  582. }
  583. .trademarkList li:hover p{
  584. color: #1697e9;
  585. }
  586. /* 知产百科 */
  587. .Encyclopedias {
  588. clear: both;
  589. padding-top: 52px
  590. }
  591. .Encyclopedias ul{
  592. overflow: hidden;
  593. margin-top: 26px;
  594. width: 100%;
  595. display: flex;
  596. display: -webkit-flex;
  597. justify-content: space-between;
  598. flex-flow: row wrap;/*子元素溢出父容器时换行*/
  599. }
  600. .Encyclopedias ul li{
  601. width:578px;
  602. height: 157px;
  603. margin-bottom: 30px;
  604. }
  605. .Encyclopedias ul li a{
  606. display: inline-block;
  607. display: flex;
  608. display: -webkit-flex;
  609. justify-content:space-between;
  610. }
  611. .Encyclopedias ul li .EncyclopediasImg{
  612. width: 290px;
  613. height: 157px;
  614. overflow: hidden;
  615. }
  616. .Encyclopedias ul li .EncyclopediasImg img{
  617. width: 100%;
  618. height: 100%;
  619. display: inline-block;
  620. transition: all .4s ease-in-out;
  621. }
  622. .Encyclopedias ul li .EncyclopediasTxt{
  623. width: 288px;
  624. height: 157px;
  625. padding: 22px 12px 0px;
  626. }
  627. .Encyclopedias ul li .EncyclopediasTxt h4{
  628. font-weight: normal;
  629. font-size: 16px;
  630. color: #1f1f1f;
  631. margin-bottom: 19px;
  632. }
  633. .Encyclopedias ul li .EncyclopediasTxt p{
  634. font-size: 14px;
  635. color: #7a7878;
  636. overflow: hidden;
  637. display: -webkit-box;
  638. text-overflow: ellipsis;
  639. -webkit-box-orient: vertical;
  640. -webkit-line-clamp:4;
  641. }
  642. .Encyclopedias .more{
  643. margin-bottom: 50px;
  644. }
  645. .Encyclopedias ul li:hover .EncyclopediasImg img{
  646. transform: scale(1.1);
  647. transition: all .4s ease-in-out;
  648. }
  649. .Encyclopedias ul li:hover h4{
  650. color: #1697e9;
  651. }