index.css 24 KB

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