index.css 24 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207
  1. /* 织梦无忧网 做最好的织梦整站模板下载网站 Www.dedecms51.com */
  2. /* QQ:379144319 */
  3. /* 仿站:www.dedecms51.com */
  4. /* 素材:www.dedecms51.com */
  5. @charset "utf-8";
  6. .banner .swiper-container-horizontal>.swiper-pagination-bullets {
  7. width: auto;
  8. left: 50%;
  9. transform: translateX(-50%);
  10. -webkit-transform: translateX(-50%);
  11. -moz-transform: translateX(-50%);
  12. background: #1754a3;
  13. font-size: 0;
  14. vertical-align: middle;
  15. padding: 3px 9px;
  16. border-radius: 10px;
  17. bottom: 28px;
  18. }
  19. .banner .swiper-pagination-bullet {
  20. width: 10px;
  21. height: 10px;
  22. background: #fff;
  23. opacity: 1
  24. }
  25. .banner .swiper-pagination-bullet-active {
  26. background: #f08519;
  27. }
  28. .banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  29. margin: 0 6px;
  30. }
  31. .banner .swiper-container {
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .banner .swiper-slide {
  36. position: relative;
  37. }
  38. .banner .swiper-slide .txt {
  39. position: absolute;
  40. width: 45%;
  41. z-index: 10;
  42. color: #fff;
  43. text-align: right;
  44. }
  45. .txt p:nth-child(1) {
  46. font-size: 55px;
  47. font-weight: 700;
  48. }
  49. .txt p:nth-child(2) {
  50. font-size: 24px;
  51. }
  52. .banner .swiper-slide .txt.txt1 {
  53. left: 5%;
  54. top: 30%;
  55. }
  56. .banner .swiper-slide .txt.txt2 {
  57. top: 30%;
  58. left: 5%;
  59. }
  60. .banner .swiper-slide .txt.txt3 {
  61. text-align: left;
  62. top: 60%;
  63. left: 5%;
  64. }
  65. .banner .swiper-slide .txt.txt2 p:nth-child(2) {
  66. font-size: 24px;
  67. }
  68. .banner .swiper-slide .txt.txt4 {
  69. bottom: 34%;
  70. left: 0%;
  71. }
  72. .banner .swiper-slide .txt.txt4 p:nth-child(1) {
  73. font-size: 58px;
  74. }
  75. .banner p {
  76. opacity: 0;
  77. }
  78. .banner .swiper-slide-active p:nth-child(1) {
  79. -webkit-animation: lightSpeedIn 0.6s ease-out forwards;
  80. -moz-animation: lightSpeedIn 0.6s ease-out forwards;
  81. -o-animation: lightSpeedIn 0.6s ease-out forwards;
  82. animation: lightSpeedIn 0.6s ease-out forwards;
  83. }
  84. .banner .swiper-slide-active p:nth-child(2) {
  85. -webkit-animation: lightSpeedIn2 0.6s 0.3s ease-out forwards;
  86. -moz-animation: lightSpeedIn2 0.6s 0.3s ease-out forwards;
  87. -o-animation: lightSpeedIn2 0.6s 0.3s ease-out forwards;
  88. animation: lightSpeedIn2 0.6s 0.3s ease-out forwards;
  89. }
  90. @-webkit-keyframes lightSpeedIn {
  91. 0% {
  92. -webkit-transform: translate3d(200px, 0, 0) skewX(-30deg);
  93. transform: translate3d(200px, 0, 0) skewX(-30deg);
  94. opacity: 0;
  95. }
  96. 60% {
  97. -webkit-transform: skewX(20deg);
  98. transform: skewX(20deg);
  99. opacity: 1;
  100. }
  101. 80% {
  102. -webkit-transform: skewX(-5deg);
  103. transform: skewX(-5deg);
  104. opacity: 1;
  105. }
  106. 100% {
  107. -webkit-transform: none;
  108. transform: none;
  109. opacity: 1;
  110. }
  111. }
  112. @keyframes lightSpeedIn {
  113. 0% {
  114. -webkit-transform: translate3d(200px, 0, 0) skewX(-30deg);
  115. -ms-transform: translate3d(200px, 0, 0) skewX(-30deg);
  116. transform: translate3d(200px, 0, 0) skewX(-30deg);
  117. opacity: 0;
  118. }
  119. 60% {
  120. -webkit-transform: skewX(20deg);
  121. -ms-transform: skewX(20deg);
  122. transform: skewX(20deg);
  123. opacity: 1;
  124. }
  125. 80% {
  126. -webkit-transform: skewX(-5deg);
  127. -ms-transform: skewX(-5deg);
  128. transform: skewX(-5deg);
  129. opacity: 1;
  130. }
  131. 100% {
  132. -webkit-transform: none;
  133. -ms-transform: none;
  134. transform: none;
  135. opacity: 1;
  136. }
  137. }
  138. .lightSpeedIn {
  139. -webkit-animation-name: lightSpeedIn;
  140. animation-name: lightSpeedIn;
  141. -webkit-animation-timing-function: ease-out;
  142. animation-timing-function: ease-out;
  143. }
  144. @-webkit-keyframes lightSpeedIn2 {
  145. 0% {
  146. -webkit-transform: translate3d(-200px, 0, 0) skewX(30deg);
  147. transform: translate3d(-200px, 0, 0) skewX(30deg);
  148. opacity: 0;
  149. }
  150. 60% {
  151. -webkit-transform: skewX(-20deg);
  152. transform: skewX(-20deg);
  153. opacity: 1;
  154. }
  155. 80% {
  156. -webkit-transform: skewX(5deg);
  157. transform: skewX(5deg);
  158. opacity: 1;
  159. }
  160. 100% {
  161. -webkit-transform: none;
  162. transform: none;
  163. opacity: 1;
  164. }
  165. }
  166. @keyframes lightSpeedIn {
  167. 0% {
  168. -webkit-transform: translate3d(-50px, 0, 0) skewX(30deg);
  169. -ms-transform: translate3d(-50px, 0, 0) skewX(30deg);
  170. transform: translate3d(-50px, 0, 0) skewX(30deg);
  171. opacity: 0;
  172. }
  173. 60% {
  174. -webkit-transform: skewX(-20deg);
  175. -ms-transform: skewX(-20deg);
  176. transform: skewX(-20deg);
  177. opacity: 1;
  178. }
  179. 80% {
  180. -webkit-transform: skewX(5deg);
  181. -ms-transform: skewX(5deg);
  182. transform: skewX(5deg);
  183. opacity: 1;
  184. }
  185. 100% {
  186. -webkit-transform: none;
  187. -ms-transform: none;
  188. transform: none;
  189. opacity: 1;
  190. }
  191. }
  192. .lightSpeedIn2 {
  193. -webkit-animation-name: lightSpeedIn2;
  194. animation-name: lightSpeedIn2;
  195. -webkit-animation-timing-function: ease-out;
  196. animation-timing-function: ease-out;
  197. }
  198. .banner .swiper-slide img {
  199. width: 100%;
  200. height: 667px;
  201. min-height: 100%;
  202. transition: 1s linear 2s;
  203. }
  204. .banner .swiper-slide-active img, .banner .swiper-slide-duplicate-active img {
  205. transition: 16s linear;
  206. transform: scale(1.2, 1.2);
  207. }
  208. /*child-menu*/
  209. .child-menu ul li {
  210. width: 25%;
  211. float: left;
  212. position: relative;
  213. overflow: hidden;
  214. padding-bottom: 20px;
  215. }
  216. .child-menu ul li:first-child a{
  217. display: block;
  218. width: 100%;
  219. height: 100%;
  220. z-index: 11;
  221. position: relative;
  222. transform: translate3d(103%, 0, 0) rotate(.0001deg);
  223. transition: transform cubic-bezier(0.46, 0.03, 0.23, 0.96) .6s;
  224. }
  225. .child-menu.move ul li>div, .child-menu.move ul li:first-child >a {
  226. -webkit-transform: translate3d(0%, 0, 0) rotate(.0001deg);
  227. -moz-transform: translate3d(0%, 0, 0) rotate(.0001deg);
  228. transform: translate3d(0%, 0, 0) rotate(.0001deg);
  229. }
  230. .child-menu ul li img {
  231. opacity: 0.5;
  232. -webkit-transition: all .4s ease-out;
  233. -o-transition: all .4s ease-out;
  234. transition: all .4s ease-out;
  235. }
  236. .child-menu ul li a:before {
  237. content: '';
  238. position: absolute;
  239. background: #1655a3;
  240. width: 100%;
  241. height: 100%;
  242. width: 100%;
  243. height: 100%;
  244. left: 0;
  245. top: 0;
  246. -webkit-transform: translate3d(0%, 0, 0) rotate(.0001deg);
  247. -moz-transform: translate3d(0%, 0, 0) rotate(.0001deg);
  248. transform: translate3d(0%, 0, 0) rotate(.0001deg);
  249. z-index: 22;
  250. -o-transition: transform ease .6s;
  251. -moz-transition: transform ease .6s;
  252. transition: transform ease .6s;
  253. }
  254. .child-menu.move ul li a:before {
  255. -moz-transition-delay: .6s;
  256. -o-transition-delay: .6s;
  257. transition-delay: .6s;
  258. -webkit-transform: translate3d(-100%, 0, 0) rotate(.0001deg);
  259. -moz-transform: translate3d(-100%, 0, 0) rotate(.0001deg);
  260. transform: translate3d(-100%, 0, 0) rotate(.0001deg);
  261. }
  262. .child-menu ul li img {
  263. transition: all cubic-bezier(0.64, 0.13, 0.09, 0.87) .8s;
  264. -moz-transition: all cubic-bezier(0.64, 0.13, 0.09, 0.87) .8s;
  265. -webkit-transition: all cubic-bezier(0.64, 0.13, 0.09, 0.87) .8s;
  266. -o-transition: all cubic-bezier(0.64, 0.13, 0.09, 0.87) .8s;
  267. opacity: 0;
  268. -moz-transition-delay: .3s;
  269. -o-transition-delay: .3s;
  270. transition-delay: .3s;
  271. -webkit-transform: translate3d(50%, 0, 0);
  272. -moz-transform: translate3d(50%, 0, 0);
  273. transform: translate3d(50%, 0, 0);
  274. }
  275. .child-menu.move ul li img {
  276. -webkit-transform: translate3d(0%, 0, 0);
  277. -moz-transform: translate3d(0%, 0, 0);
  278. transform: translate3d(0%, 0, 0);
  279. opacity: 0.5;
  280. -moz-transition-delay: .3s;
  281. -o-transition-delay: .3s;
  282. transition-delay: .3s;
  283. }
  284. .menu-txt {
  285. width: 100%;
  286. height: 100%;
  287. left: 0;
  288. top: 0;
  289. padding-left: 15%;
  290. padding-right: 15%;
  291. padding-top: 10%;
  292. box-sizing: border-box;
  293. -webkit-box-sizing: border-box;
  294. -moz-box-sizing: border-box;
  295. }
  296. .menu-tit {
  297. font-size: 24px;
  298. color: #1754a3;
  299. line-height: 1;
  300. }
  301. .line {
  302. width: 50px;
  303. height: 2px;
  304. background: #1754a3;
  305. margin-top: 12px;
  306. margin-bottom: 24px;
  307. }
  308. .menu-tit2 {
  309. font-size: 18px;
  310. color: #3d3d3d;
  311. line-height: 1;
  312. margin-bottom: 7px;
  313. }
  314. .menu-info {
  315. font-size: 14px;
  316. color: #555555;
  317. line-height: 22px;
  318. }
  319. .right_icon {
  320. position: absolute;
  321. width: 37px;
  322. height: 37px;
  323. background: url(../images/right_icon.png) no-repeat;
  324. right: 11%;
  325. top: 20%;
  326. display: block;
  327. -webkit-transition: all .4s ease-out;
  328. -o-transition: all .4s ease-out;
  329. transition: all .4s ease-out;
  330. }
  331. .child-menu ul li:hover .right_icon {
  332. right: 10%;
  333. }
  334. .child-menu ul li .menu-img {
  335. overflow: hidden;
  336. }
  337. .child-menu ul li .menu-img img {
  338. -webkit-transition: all .4s ease-out;
  339. -o-transition: all .4s ease-out;
  340. transition: all .4s ease-out;
  341. }
  342. .child-menu ul li:hover .menu-img img {
  343. -webkit-transform: scale(1.1);
  344. -moz-transform: scale(1.1);
  345. -o-transform: scale(1.1);
  346. transform: scale(1.1);
  347. opacity: 1;
  348. }
  349. .case {
  350. background: #f5f5f5;
  351. padding-top: 2.86458%;
  352. padding-bottom: 1.5625%;
  353. }
  354. .swiper-case {
  355. margin-top: 1.5625%;
  356. }
  357. .swiper-case .swiper-slide {
  358. border: 1px solid #d9d9d9;
  359. box-sizing: border-box;
  360. -webkit-box-sizing: border-box;
  361. -moz-box-sizing: border-box;
  362. }
  363. .case-con {
  364. padding: 6.667% 9.3333% 5.333% 9.3333%;
  365. }
  366. .case-tit {
  367. font-size: 16px;
  368. color: #4d4c4c;
  369. line-height: 1;
  370. overflow: hidden;
  371. white-space: nowrap;
  372. text-overflow: ellipsis;
  373. -webkit-transition: all .4s ease-out;
  374. -o-transition: all .4s ease-out;
  375. transition: all .4s ease-out;
  376. }
  377. .case-txt {
  378. font-size: 12px;
  379. overflow: hidden;
  380. white-space: nowrap;
  381. text-overflow: ellipsis;
  382. color: #828282;
  383. line-height: 1;
  384. margin-top: 10px;
  385. }
  386. .case-line {
  387. width: 35px;
  388. height: 1px;
  389. background: #cfcece;
  390. margin-top: 8px;
  391. margin-bottom: 15px;
  392. }
  393. .case-time {
  394. font-size: 12px;
  395. color: #828282;
  396. line-height: 1;
  397. }
  398. .swiper-case .swiper-slide:hover .case-tit {
  399. color: #1754a3
  400. }
  401. .case-img {
  402. position: relative;
  403. overflow: hidden;
  404. }
  405. .case-img img {
  406. -webkit-transition: all 0.3s;
  407. -moz-transition: all 0.3s;
  408. -o-transition: all 0.3s;
  409. transition: all 0.3s;
  410. }
  411. .case-img::before {
  412. position: absolute;
  413. content: "";
  414. left: 0;
  415. top: 0;
  416. width: 100%;
  417. height: 100%;
  418. background-color: rgba(23,84,163,0.7);
  419. opacity: 0;
  420. -webkit-transform: perspective(400px) rotateX(-90deg);
  421. -moz-transform: perspective(400px) rotateX(-90deg);
  422. -ms-transform: perspective(400px) rotateX(-90deg);
  423. -o-transform: perspective(400px) rotateX(-90deg);
  424. transform: perspective(400px) rotateX(-90deg);
  425. -webkit-transform-origin: top;
  426. -moz-transform-origin: top;
  427. -ms-transform-origin: top;
  428. -o-transform-origin: top;
  429. transform-origin: top;
  430. -webkit-transition: all 0.3s;
  431. -moz-transition: all 0.3s;
  432. -o-transition: all 0.3s;
  433. transition: all 0.3s;
  434. }
  435. .swiper-case .swiper-slide:hover .case-img::before {
  436. opacity: 1;
  437. -webkit-transform: perspective(400px) rotateX(0deg);
  438. -moz-transform: perspective(400px) rotateX(0deg);
  439. -ms-transform: perspective(400px) rotateX(0deg);
  440. -o-transform: perspective(400px) rotateX(0deg);
  441. transform: perspective(400px) rotateX(0deg);
  442. }
  443. .case-img::after {
  444. position: absolute;
  445. content: "";
  446. left: 0;
  447. top: 0;
  448. width: 100%;
  449. height: 100%;
  450. background: url(../images/case_icon.png) no-repeat center;
  451. -webkit-transition: all 0.2s 0.3s;
  452. -moz-transition: all 0.2s 0.3s;
  453. -o-transition: all 0.2s 0.3s;
  454. transition: all 0.2s 0.3s;
  455. opacity: 0;
  456. }
  457. .swiper-case .swiper-slide:hover .case-img::after {
  458. opacity: 1;
  459. }
  460. .swiper-case:hover {
  461. }
  462. .swiper-case .swiper-pagination {
  463. position: relative;
  464. font-size: 0;
  465. bottom: 0;
  466. width: auto;
  467. display: inline-block;
  468. vertical-align: middle;
  469. }
  470. .swiper-case .swiper-pagination-bullet {
  471. margin: 0 5px;
  472. }
  473. .swiper-button-prev, .swiper-button-next {
  474. position: relative;
  475. display: inline-block;
  476. width: 26px;
  477. height: 26px;
  478. font-size: 0;
  479. vertical-align: middle;
  480. margin: 0 10px;
  481. -webkit-transition: all .4s ease-out;
  482. -o-transition: all .4s ease-out;
  483. transition: all .4s ease-out;
  484. }
  485. .swiper-button-prev {
  486. background: url(../images/prev-icon1.png) no-repeat;
  487. }
  488. .swiper-button-next {
  489. background: url(../images/next_icon1.png) no-repeat;
  490. }
  491. .swiper-button-prev:hover {
  492. background: url(../images/prev-icon2.png) no-repeat;
  493. }
  494. .swiper-button-next:hover {
  495. background: url(../images/next_icon2.png) no-repeat;
  496. }
  497. .swiper-bottom {
  498. text-align: center;
  499. width: 100%;
  500. margin-top: 2.4767%;
  501. }
  502. .more {
  503. width: 80px;
  504. height: 30px;
  505. line-height: 28px;
  506. margin: 0 auto;
  507. display: block;
  508. color: #1754a3;
  509. text-transform: uppercase;
  510. border: 1px solid #1754a3;
  511. border-radius: 24px;
  512. font-size: 12px;
  513. text-align: center;
  514. margin-top: 1.8175%;
  515. vertical-align: middle;
  516. position: relative;
  517. background: url(../images/more_icon.png) no-repeat center right 12px;
  518. }
  519. .more:after {
  520. color: #fff;
  521. }
  522. .more {
  523. overflow: hidden;
  524. padding: 0;
  525. padding-right: 12px;
  526. box-sizing: border-box;
  527. -webkit-box-sizing: border-box;
  528. -moz-box-sizing: border-box;
  529. -webkit-transition: border-color 0.3s, background-color 0.3s;
  530. transition: border-color 0.3s, background-color 0.3s;
  531. -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  532. transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  533. }
  534. .more::after {
  535. font-size: 12px;
  536. content: attr(data-text);
  537. position: absolute;
  538. width: 100%;
  539. height: 100%;
  540. top: 0;
  541. left: 0;
  542. opacity: 0;
  543. color: #fff;
  544. padding-right: 12px;
  545. box-sizing: border-box;
  546. -webkit-box-sizing: border-box;
  547. -moz-box-sizing: border-box;
  548. background: url(../images/more_icon2.png) no-repeat center right 12px;
  549. -webkit-transform: translate3d(0, 25%, 0);
  550. transform: translate3d(0, 25%, 0);
  551. }
  552. .more > span {
  553. display: block;
  554. }
  555. .more.button--inverted {
  556. color: #7986cb;
  557. }
  558. .more.button--inverted:after {
  559. color: #fff;
  560. }
  561. .more::after, .more > span {
  562. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  563. transition: transform 0.3s, opacity 0.3s;
  564. -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  565. transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  566. }
  567. .more:hover {
  568. border-color: #1754a3;
  569. background-color: #1754a3;
  570. }
  571. .more:hover::after {
  572. opacity: 1;
  573. -webkit-transform: translate3d(0, 0, 0);
  574. transform: translate3d(0, 0, 0);
  575. }
  576. .more:hover > span {
  577. opacity: 0;
  578. -webkit-transform: translate3d(0, -25%, 0);
  579. transform: translate3d(0, -25%, 0);
  580. }
  581. /* project */
  582. section .inner {
  583. padding-top: 10px;
  584. }
  585. .panel {
  586. position: relative;
  587. }
  588. .project{
  589. background: url(../images/bg3.png) no-repeat center;
  590. background-color: #F5F5F5;
  591. }
  592. .project .inner {
  593. padding-left: 5%;
  594. overflow: hidden;
  595. }
  596. .project .inner>div {
  597. position: relative;
  598. }
  599. .project-type {
  600. background: url(../images/line.png) no-repeat 60px 6px;
  601. position: absolute;
  602. top: 0;
  603. left: 0;
  604. height: 250px;
  605. }
  606. .project-type>li {
  607. cursor: pointer;
  608. width: 67px;
  609. font-size: 18px;
  610. margin-bottom: 30px;
  611. font-weight: 700;
  612. color: #909090;
  613. position: relative;
  614. }
  615. .project-type>li::before {
  616. content: " ";
  617. width: 12px;
  618. height: 12px;
  619. background-color: #909090;
  620. position: absolute;
  621. border-radius: 12px;
  622. right: 0;
  623. top: 0;
  624. margin-top: 3px;
  625. z-index: 9;
  626. }
  627. .project-type>li.active {
  628. color: #0073ef;
  629. }
  630. .project-type>li.active::before {
  631. background-color: #0073ef;
  632. }
  633. .project-type>li.active::after {
  634. content: " ";
  635. width: 20px;
  636. height: 20px;
  637. border: solid 1px #0073ef;
  638. background-color: rgba(0, 115, 239, 0.21);
  639. position: absolute;
  640. border-radius: 12px;
  641. right: -5px;
  642. top: -5px;
  643. margin-top: 3px;
  644. z-index: 7;
  645. }
  646. .project-board {
  647. padding-left: 68px;
  648. }
  649. .project-board li {
  650. position: relative;
  651. text-align: center;
  652. padding-top: 20px;
  653. float: left;
  654. margin-left: 20px;
  655. margin-bottom: 20px;
  656. width: 335px;
  657. height: 190px;
  658. box-sizing: border-box;
  659. background-color: #fff;
  660. border: 2px solid transparent;
  661. border-radius: 4px;
  662. }
  663. .project-board>ul>li::before{
  664. content: " ";
  665. width: 210px;
  666. height: 32px;
  667. position: absolute;
  668. right: 60px;
  669. top: -10px;
  670. }
  671. .project-board li:hover {
  672. box-shadow: 0px 0px 23px 3px rgba(130, 131, 132, 0.34);
  673. }
  674. .project-board>ul:nth-child(1)>li::before {
  675. background: url(../images/lan.png) no-repeat;
  676. }
  677. .project-board>ul:nth-child(2)>li::before {
  678. background: url(../images/huang.png) no-repeat;
  679. }
  680. .project-board .icon {
  681. display: inline-block;
  682. width: 62px;
  683. height: 62px;
  684. margin-top:26px;
  685. }
  686. .project-board .title {
  687. margin-top: 10px;
  688. font-size: 18px;
  689. color: #222222;
  690. }
  691. .project-board a {
  692. text-decoration: none;
  693. font-size: 14px;
  694. line-height: 42px;
  695. color: #0073ef;
  696. }
  697. .project-board ol {
  698. overflow: hidden;
  699. padding-left: 110px;
  700. margin-top: 50px;
  701. }
  702. .project-board ol li {
  703. float: left;
  704. width: 8px;
  705. height: 8px;
  706. border-radius: 4px;
  707. padding: 0;
  708. background-color: #0073ef;
  709. }
  710. /*news*/
  711. .news {
  712. padding-top: 3.8%;
  713. padding-bottom: 5%;
  714. background: url(../images/bg4.png) no-repeat center center;
  715. }
  716. .news_menu {
  717. position: relative;
  718. margin-top: 2.083%;
  719. }
  720. .news_menu ul {
  721. float: left;
  722. position: relative;
  723. left: 50%;
  724. }
  725. .news_menu ul li {
  726. cursor: pointer;
  727. position: relative;
  728. float: left;
  729. left: -50%;
  730. width: 170px;
  731. height: 45px;
  732. border: 1px solid #d9d9d9;
  733. border-right: none;
  734. font-size: 20px;
  735. text-align: center;
  736. line-height: 45px;
  737. -webkit-transition: all .4s ease-out;
  738. -o-transition: all .4s ease-out;
  739. transition: all .4s ease-out;
  740. }
  741. .news_menu ul li:last-child {
  742. border-right: 1px solid #d9d9d9;
  743. }
  744. .news_menu ul li a {
  745. color: #5f5f5f;
  746. -webkit-transition: all .4s ease-out;
  747. -o-transition: all .4s ease-out;
  748. transition: all .4s ease-out;
  749. }
  750. .news_menu ul li::after {
  751. position: absolute;
  752. content: "";
  753. width: 21px;
  754. height: 9px;
  755. left: 50%;
  756. margin-left: -10.5px;
  757. bottom: 0px;
  758. background: url(../images/down_icon.png) no-repeat;
  759. opacity: 0;
  760. -webkit-transition: all .3s 0.2s ease-out;
  761. -o-transition: all .3s 0.2s ease-out;
  762. transition: all .3s 0.2s ease-out;
  763. }
  764. .news_menu ul li:hover, .news_menu ul li.cur {
  765. background: #1754a3
  766. }
  767. .news_menu ul li:hover a, .news_menu ul li.cur a {
  768. color: #fff;
  769. }
  770. .news_menu ul li:hover::after, .news_menu ul li.cur::after {
  771. opacity: 1;
  772. bottom: -9px;
  773. }
  774. /*news-con*/
  775. .news-con {
  776. margin-top: 3.125%;
  777. }
  778. .news-left {
  779. float: left;
  780. width: 47.3%;
  781. }
  782. .news-left-tit, .news-right-tit {
  783. color: #3f4040;
  784. font-size: 24px;
  785. margin-top: 25px;
  786. line-height: 1;
  787. overflow: hidden;
  788. white-space: nowrap;
  789. text-overflow: ellipsis;
  790. -webkit-transition: all .4s ease-out;
  791. -o-transition: all .4s ease-out;
  792. transition: all .4s ease-out;
  793. }
  794. .news-left-time {
  795. font-size: 12px;
  796. color: #717172;
  797. margin-top: 10px;
  798. margin-bottom: 15px;
  799. }
  800. .news-left-txt {
  801. font-size: 12px;
  802. color: #7e7e7e;
  803. line-height: 2;
  804. }
  805. .more.more2 {
  806. margin: 0;
  807. margin-top: 20px;
  808. }
  809. .news-left:hover .news-left-tit {
  810. color: #1754a3;
  811. }
  812. .news-left-img {
  813. overflow: hidden;
  814. }
  815. .news-left-img img {
  816. -webkit-transition: all .4s ease-out;
  817. -o-transition: all .4s ease-out;
  818. transition: all .4s ease-out;
  819. width:100%;
  820. }
  821. .news-left:hover .news-left-img img {
  822. -webkit-transform: scale(1.1);
  823. -moz-transform: scale(1.1);
  824. -o-transform: scale(1.1);
  825. transform: scale(1.1);
  826. }
  827. .news-right {
  828. float: right;
  829. width: 48.6%;
  830. font-size: 0;
  831. }
  832. .date {
  833. color: #999999;
  834. font-size: 58px;
  835. line-height: 1;
  836. text-align: center;
  837. -webkit-transition: all .4s ease-out;
  838. -o-transition: all .4s ease-out;
  839. transition: all .4s ease-out;
  840. }
  841. .time {
  842. text-align: center;
  843. font-size: 16px;
  844. color: #999999;
  845. }
  846. .news-right-left, .news-right-con {
  847. display: inline-block;
  848. vertical-align: top
  849. }
  850. .news-right-left {
  851. width: 79px;
  852. }
  853. .news-right-con {
  854. margin-left: 20px;
  855. width: calc(100% - 100px);
  856. width: -webkit-calc(100% - 100px);
  857. width: -moz-calc(100% - 100px);
  858. }
  859. .news-right-tit {
  860. margin-top: 0;
  861. margin-bottom: 15px;
  862. }
  863. .news-right-txt {
  864. font-size: 12px;
  865. color: #7e7e7e;
  866. line-height: 24px;
  867. height: 48px;
  868. overflow: hidden;
  869. }
  870. .news-list ul li {
  871. padding-top: 20px;
  872. padding-bottom: 15px;
  873. border-bottom: 1px solid #cfcece;
  874. background: #FFF;
  875. }
  876. .news-list ul li:hover .news-right-tit, .news-list ul li:hover .date {
  877. color: #1754a3;
  878. }
  879. .about {
  880. background: #FFF url(../images/about_bck.jpg) center;
  881. background-size: 100% 100%;
  882. border-top: 20px solid #000000;
  883. text-align: center;
  884. padding-top: 4.427%;
  885. padding-bottom: 12.24%;
  886. }
  887. .aboutbg{
  888. opacity: 0.8;
  889. filter: alpha(opacity=80);
  890. border-radius: 25px;
  891. border: 2px solid #467EC0;
  892. padding: 1.858%;
  893. background: #FFF;
  894. text-align: left;
  895. box-shadow: 5px 5px 5px #fff;
  896. }
  897. .about .about-con {
  898. margin-top: 1.858%;
  899. font-size: 14px;
  900. line-height: 30px;
  901. color: #1754a3;
  902. }
  903. .about .tit-zh {
  904. color: #1754a3;
  905. }
  906. .about .tit-line {
  907. background: #1754a3
  908. }
  909. .about .tit-en {
  910. color: #1754a3;
  911. }
  912. .more.more3 {
  913. color: #1754a3;
  914. border-color: #1754a3;
  915. background: url(../images/more_icon2.png) no-repeat center right 12px;
  916. }
  917. .more.more3:hover {
  918. border-color: #1754a3;
  919. background-color: #1754a3;
  920. }
  921. @media (max-width: 1440px) {
  922. .menu-txt {
  923. padding-left: 8%;
  924. padding-right: 8%;
  925. }
  926. .line {
  927. margin-bottom: 15px;
  928. }
  929. .menu-tit {
  930. font-size: 22px;
  931. }
  932. .news-left-tit, .news-right-tit {
  933. font-size: 22px;
  934. }
  935. .date {
  936. font-size: 50px;
  937. }
  938. .news-right-con {
  939. margin-left: 10px;
  940. }
  941. .news-right-tit {
  942. margin-bottom: 10px;
  943. }
  944. .txt p:nth-child(1) {
  945. font-size: 36px;
  946. }
  947. .txt p:nth-child(2) {
  948. font-size: 20px;
  949. }
  950. .banner .swiper-slide .txt.txt2 p:nth-child(1), .banner .swiper-slide .txt.txt2 p:nth-child(2) {
  951. font-size: 20px;
  952. }
  953. .banner .swiper-slide .txt.txt4 p:nth-child(1) {
  954. font-size: 48px;
  955. }
  956. .banner .swiper-container-horizontal>.swiper-pagination-bullets {
  957. bottom: 20px;
  958. }
  959. }
  960. @media (max-width: 1200px) {
  961. .menu-txt {
  962. padding-left: 5%;
  963. padding-right: 5%;
  964. padding-top: 5%;
  965. }
  966. .menu-tit2 {
  967. font-size: 16px;
  968. }
  969. .line {
  970. margin-top: 12px;
  971. margin-bottom: 8px;
  972. }
  973. .menu-tit {
  974. font-size: 20px;
  975. }
  976. .news-left-tit, .news-right-tit {
  977. font-size: 20px;
  978. }
  979. .news-left-time {
  980. margin-bottom: 10px;
  981. }
  982. .date {
  983. font-size: 42px;
  984. }
  985. .time {
  986. font-size: 14px;
  987. }
  988. .news-list ul li {
  989. padding-top: 10px;
  990. padding-bottom: 8px;
  991. }
  992. .txt p:nth-child(1) {
  993. font-size: 30px;
  994. }
  995. .txt p:nth-child(2) {
  996. font-size: 18px;
  997. }
  998. .banner .swiper-slide .txt.txt2 p:nth-child(1), .banner .swiper-slide .txt.txt2 p:nth-child(2) {
  999. font-size: 28px;
  1000. }
  1001. .banner .swiper-slide .txt.txt4 p:nth-child(1) {
  1002. font-size: 36px;
  1003. }
  1004. .banner .swiper-container-horizontal>.swiper-pagination-bullets {
  1005. bottom: 15px;
  1006. }
  1007. }
  1008. @media (max-width: 992px) {
  1009. .menu-txt {
  1010. padding-left: 8%;
  1011. padding-right: 8%;
  1012. padding-top: 10%;
  1013. }
  1014. .menu-info {
  1015. line-height: 20px;
  1016. }
  1017. .menu-info {
  1018. display: none;
  1019. }
  1020. .txt p:nth-child(1) {
  1021. font-size: 24px;
  1022. }
  1023. .txt p:nth-child(2) {
  1024. font-size: 16px;
  1025. }
  1026. .banner .swiper-slide .txt.txt2 p:nth-child(1), .banner .swiper-slide .txt.txt2 p:nth-child(2) {
  1027. font-size: 24px;
  1028. }
  1029. .banner .swiper-slide .txt.txt4 p:nth-child(1) {
  1030. font-size: 24px;
  1031. }
  1032. .banner .swiper-container-horizontal>.swiper-pagination-bullets {
  1033. bottom: 10px;
  1034. }
  1035. }
  1036. @media (max-width: 768px) {
  1037. .banner .swiper-slide .txt {
  1038. width: 100%
  1039. }
  1040. .banner .swiper-slide img {
  1041. width: auto;
  1042. height: 250px;
  1043. }
  1044. .banner .swiper-slide p {
  1045. color: #fff;
  1046. font-size: 14px
  1047. }
  1048. .banner .swiper-slide p:first-child {
  1049. font-size: 20px;
  1050. }
  1051. .banner .swiper-slide .txt.txt1, .banner .swiper-slide .txt.txt2, .banner .swiper-slide .txt.txt3, .banner .swiper-slide .txt.txt4 {
  1052. width: 55%;
  1053. left: 35%;
  1054. top: 50%;
  1055. text-align: center;
  1056. transform: translateX(-50%)translateY(-50%);
  1057. -webkit-transform: translateX(-50%)translateY(-50%);
  1058. -moz-transform: translateX(-50%)translateY(-50%);
  1059. }
  1060. .txt p:nth-child(2) {
  1061. margin-top:5```````px;
  1062. }
  1063. .banner .swiper-container-horizontal>.swiper-pagination-bullets {
  1064. bottom: 10px;
  1065. }
  1066. .banner .swiper-slide-active p, .banner .swiper-slide-duplicate-active p {
  1067. animation: none;
  1068. -webkit-animation: none;
  1069. }
  1070. .child-menu.move ul li>div, .child-menu ul li >a {
  1071. -webkit-transform: translate3d(0%, 0, 0) rotate(.0001deg);
  1072. -moz-transform: translate3d(0%, 0, 0) rotate(.0001deg);
  1073. transform: translate3d(0%, 0, 0) rotate(.0001deg);
  1074. }
  1075. .child-menu ul li a:before {
  1076. display: none;
  1077. }
  1078. .menu-img, .line, .menu-tit2, .menu-info, .right_icon {
  1079. display: none;
  1080. }
  1081. .child-menu ul li {
  1082. height: 50px;
  1083. border: 1px solid #d6d6d6;
  1084. border-right: 0;
  1085. box-sizing: border-box;
  1086. -webkit-box-sizing: border-box;
  1087. -moz-box-sizing: border-box;
  1088. }
  1089. .child-menu ul li:first-child {
  1090. border-left: none;
  1091. }
  1092. .menu-txt {
  1093. position: relative;
  1094. color: #333;
  1095. padding: 0;
  1096. }
  1097. .menu-txt .menu-tit {
  1098. font-size: 16px;
  1099. color: #333;
  1100. line-height: 50px;
  1101. text-align: center;
  1102. }
  1103. .child-menu ul li:hover {
  1104. background: #1754a3;
  1105. border-color: #1754a3
  1106. }
  1107. .child-menu ul li:hover .menu-tit {
  1108. color: #fff;
  1109. }
  1110. .case, .news {
  1111. padding-top: 30px;
  1112. padding-bottom: 30px;
  1113. }
  1114. .swiper-case {
  1115. margin-top: 20px;
  1116. }
  1117. .swiper-bottom {
  1118. margin-top: 15px;
  1119. }
  1120. .news_menu ul li {
  1121. width: 100px;
  1122. font-size: 16px;
  1123. height: 40px;
  1124. line-height: 40px;
  1125. }
  1126. .news_menu ul li::after {
  1127. width: 14px;
  1128. height: 6px;
  1129. background-size: 14px 6px;
  1130. }
  1131. .news_menu ul li:hover::after, .news_menu ul li.cur::after {
  1132. bottom: -6px;
  1133. }
  1134. .news-con {
  1135. margin-top: 25px;
  1136. }
  1137. .news-left, .news-right {
  1138. float: none;
  1139. width: 100%;
  1140. }
  1141. .news-left-tit, .news-right-tit {
  1142. font-size: 18px;
  1143. margin-top: 20px;
  1144. line-height: 1.2
  1145. }
  1146. .news-left-time {
  1147. margin-bottom: 10px;
  1148. }
  1149. .date {
  1150. font-size: 42px;
  1151. }
  1152. .time {
  1153. font-size: 12px;
  1154. }
  1155. .news-right-left {
  1156. width: 50px;
  1157. }
  1158. .news-right-con {
  1159. width: calc(100% - 60px);
  1160. width: -webkit-calc(100% - 60px);
  1161. width: -moz-calc(100% - 60px);
  1162. margin-left: 10px;
  1163. }
  1164. .news-right-tit {
  1165. margin-top: 0;
  1166. margin-bottom: 10px;
  1167. }
  1168. .news-right-txt {
  1169. line-height: 18px;
  1170. height: 36px;
  1171. }
  1172. .news-list {
  1173. margin-top: 20px;
  1174. }
  1175. .about {
  1176. background-size: auto 100%;
  1177. padding-top: 25px;
  1178. padding-bottom: 25px;
  1179. }
  1180. .about .about-con {
  1181. line-height: 20px;
  1182. margin-top: 15px;
  1183. }
  1184. .more {
  1185. margin-top: 15px;
  1186. }
  1187. .news-left-txt {
  1188. line-height: 20px;
  1189. }
  1190. .banner .swiper-slide .txt p:nth-child(1), .banner .swiper-slide .txt.txt2 p:nth-child(1), .banner .swiper-slide .txt.txt4 p:nth-child(1) {
  1191. font-size: 16px;
  1192. line-height: 1.6;
  1193. }
  1194. .banner .swiper-slide .txt p:nth-child(2), .banner .swiper-slide .txt.txt2 p:nth-child(2) {
  1195. font-size: 14px;
  1196. line-height: 1.4;
  1197. }
  1198. }