inded.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
  1. /*.header div>div.APP{float:left;position: relative;cursor: pointer;padding: 0 10px;}
  2. div.APP>div.xialaewm{width:230px;height:120px;position: absolute;margin-left:0px;float: none;
  3. display:none;justify-content: space-between;background-color: #fff;}
  4. div.APP:hover>div.xialaewm{display:flex;}
  5. div.APP:hover{background-color: #fff;}*/
  6. .search-inp a.zaixian {
  7. right: 150px;
  8. background-color: #1797E9;
  9. }
  10. .searchImg {
  11. position: absolute;
  12. top: 7px;
  13. right: 20px;
  14. z-index: 10;
  15. cursor: pointer;
  16. }
  17. .webkitDown {
  18. width: 12px;
  19. height: 8px;
  20. display: inline-block;
  21. background: url(../../img/index/index_down.jpg) no-repeat;
  22. background-size: 100% 100%;
  23. margin-left: 6px;
  24. }
  25. .jump {
  26. clear: both;
  27. list-style: none;
  28. }
  29. .jump>li {
  30. display: inline-block;
  31. font-size: 16px;
  32. line-height: 30px;
  33. margin-right: 10px;
  34. }
  35. .jump>li>a {
  36. color: #757575;
  37. }
  38. .jump>li>a:hover {
  39. color: #1797E9
  40. }
  41. #terrace {
  42. width: 100%;
  43. margin: 20px 0;
  44. }
  45. .terrace_title {
  46. width: 1200px;
  47. height: 50px;
  48. margin: 20px auto;
  49. text-align: center;
  50. }
  51. .terrace_cont {
  52. width: 1200px;
  53. height: 75px;
  54. margin: 0 auto;
  55. display: flex;
  56. justify-content: space-around;
  57. }
  58. .terrace_cont>div {
  59. width: 400px;
  60. height: 75px;
  61. display: flex;
  62. justify-content: flex-start;
  63. }
  64. .terraceH {
  65. margin-left: 15px;
  66. padding-top: 10px;
  67. }
  68. .terraceH>h4 {
  69. margin-bottom: 10px;
  70. font-size: 17px;
  71. letter-spacing: 2px;
  72. font-weight: bold;
  73. }
  74. #apply {
  75. width: 100%;
  76. margin-top: 40px;
  77. }
  78. .apply {
  79. width: 1200px;
  80. height: 300px;
  81. margin: 0 auto;
  82. display: flex;
  83. justify-content: space-between;
  84. }
  85. .apply_left {
  86. width: 260px;
  87. height: 300px;
  88. }
  89. .apply_right {
  90. width: 915px;
  91. height: 300px;
  92. display: flex;
  93. justify-content: flex-start;
  94. flex-wrap: wrap;
  95. }
  96. .apply_right>div>a {
  97. background-color: #F0F9FF;
  98. width: 295px;
  99. height: 145px;
  100. margin-left: 10px;
  101. display: flex;
  102. justify-content: space-around;
  103. padding: 35px 40px;
  104. }
  105. .apply_right>div>a>img {
  106. width: 70px;
  107. height: 75px;
  108. }
  109. .apply_right>div>a>h4 {
  110. line-height: 70px;
  111. letter-spacing: 2px;
  112. font-size: 17px;
  113. font-weight: normal;
  114. color: #3C3E3E;
  115. width: 120px;
  116. overflow: hidden;
  117. white-space: nowrap;
  118. text-overflow: ellipsis;
  119. -o-text-overflow: ellipsis;
  120. }
  121. #wield {
  122. width: 100%;
  123. margin-top: 40px;
  124. }
  125. .wield_cont {
  126. width: 1200px;
  127. height: 400px;
  128. margin: 20px auto;
  129. text-align: center;
  130. position: relative;
  131. z-index: 22;
  132. }
  133. .wield_cont .video {
  134. position: absolute;
  135. width: 600px;
  136. height: 400px;
  137. z-index: 30;
  138. background: #000;
  139. box-shadow: 0 0 3px #000;
  140. }
  141. .wield_cont .video video {
  142. width: 100%;
  143. height: 100%;
  144. display: inline-block;
  145. }
  146. .moreVideo {
  147. width: 1200px;
  148. margin: 0 auto;
  149. text-align: right;
  150. height: 60px;
  151. }
  152. .moreVideo a {
  153. font-size: 16px;
  154. color: #383838
  155. }
  156. .moreVideo a:hover {
  157. color: #1596E8;
  158. }
  159. .wield_cont>img {
  160. width: 600px;
  161. position: absolute;
  162. right: 0;
  163. top: 0;
  164. height: 100%;
  165. z-index: 25;
  166. }
  167. #wield>a {
  168. color: #383838;
  169. }
  170. .brands {
  171. width: 100%;
  172. margin-top: -4px;
  173. position: relative;
  174. }
  175. .brands img {
  176. width: 100%;
  177. }
  178. #hotProject {
  179. width: 100%;
  180. padding-top: 30px;
  181. background: url("../../img/indedImg/inded40.png")no-repeat;
  182. }
  183. .hotProject_cont {
  184. width: 1200px;
  185. height: 700px;
  186. margin: 30px auto;
  187. display: flex;
  188. justify-content: space-between;
  189. flex-wrap: wrap;
  190. }
  191. .hotProject_cont>div {
  192. width: 285px;
  193. height: 335px;
  194. background-color: #fff;
  195. }
  196. .hotProject_cont>div>img {
  197. width: 285px;
  198. height: 165px;
  199. }
  200. .hotProject_cont>div>h3 {
  201. margin: 10px 0 10px 20px;
  202. letter-spacing: 2px;
  203. }
  204. .hotProject_cont>div>p {
  205. margin-left: 20px;
  206. letter-spacing: 1px;
  207. height: 60px;
  208. text-align: justify;
  209. text-overflow: ellipsis;
  210. overflow: hidden;
  211. display: -webkit-box;
  212. -webkit-box-orient: vertical;
  213. -webkit-line-clamp: 3;
  214. }
  215. .hotProject_cont>div>a {
  216. display: block;
  217. width: 110px;
  218. height: 33px;
  219. line-height: 30px;
  220. border: 2px solid #1596E8;
  221. margin-right: 15px;
  222. border-radius: 5px;
  223. margin-top: 15px;
  224. /*float: right;*/
  225. margin-left: 78px;
  226. text-align: center;
  227. color: #1596E8;
  228. letter-spacing: 1px;
  229. cursor: pointer;
  230. }
  231. .RecommendTitle>h2 {
  232. font-weight: 500;
  233. }
  234. .view {
  235. padding-left: 620px;
  236. margin-top: 30px;
  237. }
  238. .view>h4 {
  239. font-size: 18px;
  240. color: #323131;
  241. font-weight: normal;
  242. margin-bottom: 24px;
  243. }
  244. .view>h4 a {
  245. float: right;
  246. }
  247. .view>h4 a span:nth-child(2) {
  248. width: 22px;
  249. height: 22px;
  250. border: 1px solid #cecece;
  251. text-align: center;
  252. line-height: 18px;
  253. display: inline-block;
  254. float: right;
  255. color: #cecece
  256. }
  257. .view>h4 a:hover .line {
  258. background: #1697e9;
  259. }
  260. .view>h4 a:hover span {
  261. border-color: #1697e9;
  262. color: #1697e9;
  263. }
  264. .view>h4 .line {
  265. vertical-align: middle;
  266. width: 470px;
  267. height: 1px;
  268. background: #cecece;
  269. display: inline-block;
  270. }
  271. .brands>div {
  272. width: 16%;
  273. height: 90%;
  274. position: absolute;
  275. top: 2.5%;
  276. right: 20%;
  277. background-color: #fff;
  278. overflow: hidden;
  279. }
  280. .brands>div.brandsDiv {
  281. top: 4.5%;
  282. }
  283. .brands>div>img {
  284. width: 100%;
  285. height: 100%;
  286. position: absolute;
  287. opacity: 0;
  288. }
  289. .brands>div>img:nth-child(1) {
  290. opacity: 1;
  291. }
  292. /*.brands>div>img:nth-child(1){transition:opacity 2s linear }*/
  293. @keyframes imgani {
  294. from {
  295. opacity: 0;
  296. }
  297. to {
  298. opacity: 1;
  299. }
  300. }
  301. @keyframes imgbni {
  302. from {
  303. opacity: 1;
  304. }
  305. to {
  306. opacity: 0;
  307. }
  308. }
  309. .brands>div>img.ani {
  310. animation: imgani 4s linear 1 normal;
  311. animation-fill-mode: forwards;
  312. }
  313. .brands>div>img.bni {
  314. animation: imgbni 4s linear 1 normal;
  315. animation-fill-mode: forwards;
  316. }
  317. .carousel-control {
  318. top: 38%;
  319. background-image: none !important;
  320. }
  321. .initModel {
  322. position: fixed;
  323. width: 100%;
  324. height: 0;
  325. background: rgba(0, 0, 0, .2);
  326. top: 0;
  327. left: 0;
  328. z-index: 9999999999;
  329. overflow: hidden;
  330. }
  331. .initModel div {
  332. position: fixed;
  333. left: 0;
  334. top: 10%;
  335. width: 100%;
  336. height: 0px;
  337. background: url(../../img/index/initModelBj.png) no-repeat;
  338. background-size: 100% 100%;
  339. overflow: hidden;
  340. transition: all .2s ease-in;
  341. z-index: 99999999991;
  342. }
  343. .initModel.active div {
  344. height: 80%;
  345. transition: all .2s ease-in-out;
  346. }
  347. .initModel.active {
  348. height: 100%;
  349. }
  350. .initModel .glyphicon-remove {
  351. position: absolute;
  352. font-size: 30px;
  353. color: #fff;
  354. right: 20px;
  355. top: 20px;
  356. cursor: pointer;
  357. }
  358. .initModel .glyphicon-remove:hover {
  359. color: #f00;
  360. }
  361. .initModel a:hover {
  362. color: #1596E8;
  363. }
  364. .initModel .moreActive {
  365. position: absolute;
  366. color: #fff;
  367. font-size: 16px;
  368. left: 52%;
  369. transform: translateX(-50%);
  370. bottom: 20%;
  371. }
  372. .initModel .ljZhuCe {
  373. position: absolute;
  374. color: #fff;
  375. font-size: 40px;
  376. right: 7%;
  377. top: 45%;
  378. transform: translateY(-50%);
  379. }
  380. .pub_fix {
  381. z-index: 999999;
  382. }
  383. @media screen and (max-width:1600px) {
  384. .initModel .ljZhuCe {
  385. font-size: 26px !important;
  386. right: 8.5%;
  387. }
  388. }