global.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635
  1. html {
  2. font-family: 'Source Han Sans CN', 'pingfang SC', 'helvetica neue', arial, 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
  3. }
  4. /* .animated {
  5. animation-duration: 2s !important;
  6. } */
  7. .fixed-top {
  8. position: fixed;
  9. top: 0;
  10. right: 0;
  11. left: 0;
  12. z-index: 1030;
  13. }
  14. .flex_div {
  15. display: flex;
  16. justify-content: space-between;
  17. flex-wrap: nowrap;
  18. }
  19. .h80 {
  20. height: 80px;
  21. }
  22. a,
  23. a:hover,
  24. a:visited {
  25. text-decoration: none;
  26. color: #333;
  27. }
  28. /* 通用header样式开始 */
  29. .head_bg {
  30. width: 100%;
  31. /* height: 100%; */
  32. height: 600px;
  33. max-width: 100%;
  34. /* background: url(../imgs/banner.png) no-repeat;
  35. background-size: 100% 100%; */
  36. }
  37. .head_wrap {
  38. width: 100%;
  39. height: 80px;
  40. /* background: #fff; */
  41. background-color: rgba(255, 255, 255, 0.5);
  42. position: relative;
  43. }
  44. .logo {
  45. width: 161px;
  46. height: 21px;
  47. /* margin-top: 29px; */
  48. margin-top: 19px;
  49. }
  50. .logo img {
  51. width: 100%;
  52. display: block;
  53. }
  54. .nav {}
  55. .navbar-nav>li>a {
  56. line-height: 50px;
  57. font-size: 16px;
  58. /* font-weight: bold; */
  59. color: #434343;
  60. box-sizing: border-box;
  61. }
  62. .nav>li>a {
  63. box-sizing: border-box;
  64. position: relative;
  65. }
  66. .nav>li>a::after {
  67. content: '';
  68. position: absolute;
  69. bottom: -2px;
  70. left: 0;
  71. transition: all 0.3s linear;
  72. width: 0;
  73. height: 2px;
  74. background: #0052D9;
  75. }
  76. .nav>li>a:hover::after {
  77. width: 100%;
  78. }
  79. .nav>li>a:focus,
  80. .nav>li>a:hover {
  81. text-decoration: none;
  82. background-color: #fff;
  83. color: #0052D9;
  84. padding-bottom: 13px;
  85. /* border-bottom: 2px solid #0052D9; */
  86. }
  87. .nav>li:hover #dropdow_menu {
  88. display: block;
  89. /* justify-content: space-between;
  90. flex-wrap: wrap;
  91. height: auto; */
  92. }
  93. .selected>a {
  94. color: #0052D9 !important;
  95. padding-bottom: 13px !important;
  96. border-bottom: 2px solid #0052D9;
  97. }
  98. .banner_wrap {
  99. margin-top: 170px;
  100. margin-left: 0;
  101. }
  102. .banner_main_title {
  103. font-size: 48px;
  104. font-weight: bold;
  105. color: #161616;
  106. margin-bottom: 40px;
  107. }
  108. .banner_sub_title {
  109. font-size: 20px;
  110. font-weight: 500;
  111. color: #5A5A5A;
  112. line-height: 1.6;
  113. }
  114. .banner_sub_title_li li {
  115. /* list-style-type: square; */
  116. list-style-type: disc;
  117. margin-left: 20px;
  118. }
  119. .banner_btn_wrap {
  120. margin-top: 45px;
  121. font-weight: 400;
  122. font-size: 16px;
  123. }
  124. .banner_btn_wrap .yuyue {
  125. padding: 0 40px;
  126. background: #5183E6;
  127. border-radius: 10px;
  128. display: inline-block;
  129. height: 46px;
  130. line-height: 46px;
  131. color: #fff;
  132. }
  133. .yuyue1 {
  134. padding: 0 40px;
  135. background: #5183E6;
  136. border-radius: 10px;
  137. display: inline-block;
  138. height: 46px;
  139. line-height: 46px;
  140. color: #fff;
  141. }
  142. .banner_btn_wrap .zixun {
  143. padding: 0 37px;
  144. margin-left: 30px;
  145. display: inline-block;
  146. background: #90a4ae;
  147. border-radius: 10px;
  148. height: 46px;
  149. line-height: 46px;
  150. color: #fff;
  151. }
  152. #dropdow_menu {
  153. width: 1000px;
  154. padding: 50px 35px;
  155. cursor: default;
  156. background: #fff;
  157. color: #000;
  158. border-radius: 4px;
  159. box-shadow: 0 3px 10px 3px rgb(0 0 0 / 7%);
  160. display: block;
  161. }
  162. .dropdown-menu {
  163. /* right: -144px !important; */
  164. }
  165. .classify-nav {
  166. display: flex;
  167. }
  168. .sencon_menu {
  169. width: 200px;
  170. border: 1px solid red;
  171. }
  172. .sencon_menu>ul>li:hover {
  173. background: #f60;
  174. }
  175. .third_menu {
  176. width: 200px;
  177. margin-left: -30px;
  178. border: 1px solid yellow;
  179. }
  180. .third_sub_menu {
  181. display: none;
  182. }
  183. .third_sub_menu>ul>li:hover {
  184. background: #0052D9;
  185. }
  186. .four_sub_menu {
  187. display: none;
  188. }
  189. /* .navbar-nav>li>a:hover #dropdown-menu {
  190. display: flex;
  191. justify-content: space-between;
  192. flex-wrap: wrap;
  193. } */
  194. /* 通用header样式结束 */
  195. /* 中间通用标题 开始*/
  196. .common_title_wrap {
  197. text-align: center;
  198. padding: 64px 0;
  199. }
  200. .common_main_title {
  201. position: relative;
  202. font-size: 36px;
  203. font-weight: bold;
  204. color: #333333;
  205. -webkit-transform: translate(0px, 0px);
  206. transform: translate(0px, 0px);
  207. -webkit-transition: all 600ms ease-in-out 0s;
  208. transition: all 600ms ease-in-out 0s;
  209. }
  210. .common_sub_title {
  211. font-size: 18px;
  212. font-weight: 400;
  213. color: #666666;
  214. margin-top: 22px;
  215. -webkit-transform: translate(0px, 0px);
  216. transform: translate(0px, 0px);
  217. -webkit-transition: all 600ms ease-in-out 0s;
  218. transition: all 600ms ease-in-out 0s;
  219. }
  220. .common_sub_title a {
  221. display: inline-block;
  222. margin-left: 16px;
  223. color: #0052D9;
  224. }
  225. .common_sub_title a:hover {
  226. text-decoration: none;
  227. cursor: pointer;
  228. }
  229. .common_sub_title a .arrow {
  230. font-style: normal;
  231. display: inline-block;
  232. width: 10px;
  233. height: 10px;
  234. border: #0052D9 solid;
  235. border-width: 2px 2px 0 0;
  236. transform: rotate(45deg);
  237. margin-bottom: 1px;
  238. margin-left: 2px;
  239. }
  240. /* 中间通用标题 结束*/
  241. /* *******************合作伙伴开始*************** */
  242. .list_flex {
  243. display: flex;
  244. flex-wrap: wrap;
  245. }
  246. .space_b {
  247. justify-content: space-between;
  248. }
  249. .hezuo li {
  250. width: 187px;
  251. height: 88px;
  252. margin-bottom: 30px;
  253. }
  254. .hezuo li img {
  255. display: block;
  256. width: 100%;
  257. }
  258. /* *******************合作伙伴结束**************** */
  259. /* 通用footer样式开始 */
  260. .footer_con {
  261. width: 100%;
  262. /* height: 389px; */
  263. background: #333333;
  264. }
  265. .footer_wrap {
  266. display: flex;
  267. justify-content: space-between;
  268. font-size: 16px;
  269. font-weight: 400;
  270. color: #999999;
  271. }
  272. .footer_wrap h4 {
  273. font-size: 18px;
  274. font-weight: 500;
  275. color: #FFFFFF;
  276. margin-bottom: 35px;
  277. margin-top: 56px;
  278. }
  279. .footer_wrap ul li {
  280. margin-bottom: 20px;
  281. }
  282. .footer_wrap ul li a {
  283. font-size: 16px;
  284. font-family: SourceHanSansCN;
  285. font-weight: 400;
  286. color: #999999;
  287. }
  288. .map {
  289. width: 259px;
  290. height: 106px;
  291. }
  292. .map img {
  293. display: block;
  294. width: 100%;
  295. }
  296. .icon-weixin,
  297. .icon-youxiang {
  298. font-size: 36px;
  299. color: #999;
  300. /* display: inline-block; */
  301. text-align: center;
  302. }
  303. .footer {
  304. color: #999;
  305. text-align: center;
  306. margin-top: 20px;
  307. margin-bottom: 18px;
  308. }
  309. .footer a {
  310. color: #999;
  311. }
  312. .contact_us {
  313. position: fixed;
  314. right: 24px;
  315. bottom: 64px;
  316. z-index: 99999;
  317. }
  318. .contact_us_btn {
  319. width: 60px;
  320. /* height: 132px; */
  321. /* background: #FFFFFF;
  322. box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.04);
  323. border-radius: 4px; */
  324. background: #FFFFFF;
  325. box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.04);
  326. border-radius: 4px;
  327. box-sizing: border-box;
  328. /* padding: 12px; */
  329. font-size: 12px;
  330. font-weight: 400;
  331. color: #666666;
  332. /* text-indent: 3px; */
  333. text-align: center;
  334. cursor: pointer;
  335. }
  336. .contact_us_btn>a {
  337. color: #666666;
  338. }
  339. .contact_us_btn img {
  340. display: block;
  341. /* width: 23px;
  342. height: 23px; */
  343. margin: 5px auto;
  344. /* margin-bottom: 5px; */
  345. }
  346. .top {
  347. margin-top: 18px;
  348. width: 60px;
  349. height: 60px;
  350. background: #FFFFFF;
  351. box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.04);
  352. border-radius: 4px;
  353. box-sizing: border-box;
  354. /* padding: 12px 10px; */
  355. cursor: pointer;
  356. position: relative;
  357. }
  358. .top img {
  359. display: block;
  360. width: 23px;
  361. height: 18px;
  362. position: absolute;
  363. top: 50%;
  364. left: 50%;
  365. transform: translate(-50%, -50%);
  366. }
  367. /* .phone .btn-default {
  368. color: #fff;
  369. border-color: transparent;
  370. width: 60px;
  371. height: 60px;
  372. background: #0052D9;
  373. border-radius: 4px 4px 0px 0px;
  374. font-size: 12px;
  375. padding: 0;
  376. } */
  377. /* .phone .btn-default {
  378. color: #666;
  379. border-color: transparent;
  380. width: 60px;
  381. height: 60px;
  382. background: transparent;
  383. font-size: 12px;
  384. padding: 0;
  385. }
  386. .phone .btn-default:hover {
  387. color: #fff;
  388. border-color: transparent;
  389. width: 60px;
  390. height: 60px;
  391. background: #0052D9;
  392. border-radius: 4px 4px 0px 0px;
  393. font-size: 12px;
  394. } */
  395. .f_img {
  396. display: block;
  397. }
  398. .f_img_active {
  399. display: none;
  400. }
  401. .btn-default {
  402. color: #666;
  403. border-color: transparent;
  404. width: 60px;
  405. height: 60px;
  406. background: transparent;
  407. /* border-radius: 4px 4px 0px 0px; */
  408. font-size: 12px;
  409. padding: 0;
  410. }
  411. .btn-default:hover {
  412. color: #fff;
  413. border-color: transparent;
  414. width: 60px;
  415. height: 60px;
  416. background: #0052D9;
  417. border-radius: 0px 0px 0px 0px;
  418. font-size: 12px;
  419. }
  420. /* .email .btn-default {
  421. color: #666;
  422. border-color: transparent;
  423. width: 60px;
  424. height: 60px;
  425. background: transparent;
  426. font-size: 12px;
  427. padding: 0;
  428. }
  429. .emial .btn-default:hover {
  430. color: #fff;
  431. border-color: transparent;
  432. width: 60px;
  433. height: 60px;
  434. background: #0052D9;
  435. border-radius: 4px 4px 0px 0px;
  436. font-size: 12px;
  437. } */
  438. .footer_btn:hover {}
  439. .fade-in {
  440. transform: translate(0px, 0px);
  441. transition: all 600ms ease-in-out 0s;
  442. opacity: 1;
  443. visibility: visible;
  444. z-index: 1;
  445. }
  446. /* 模态框样式开始 */
  447. #myModal .modal-content {
  448. background: url('../imgs/index/madel_bg.png') no-repeat;
  449. background-size: 100% 100%;
  450. width: 820px;
  451. padding: 10px;
  452. overflow: hidden;
  453. }
  454. #myModal .modal-header {
  455. border-bottom: 0px solid #e5e5e5;
  456. }
  457. #myModal .modal-title {
  458. font-size: 36px;
  459. font-family: Source Han Sans CN;
  460. font-weight: bold;
  461. color: #333333;
  462. text-align: center;
  463. margin-top: 50px;
  464. margin-bottom: 20px;
  465. }
  466. #myModal .modal-sub-title {
  467. font-size: 18px;
  468. font-family: Source Han Sans CN;
  469. font-weight: 400;
  470. color: #666666;
  471. text-align: center;
  472. margin-bottom: 32px;
  473. }
  474. #myModal .modal-footer {
  475. padding: 15px;
  476. text-align: center;
  477. border-top: 0px solid #e5e5e5;
  478. }
  479. #myModal .submit_btn {
  480. width: 320px;
  481. height: 68px;
  482. background: #0052D9;
  483. border-radius: 10px;
  484. color: #fff;
  485. text-align: center;
  486. line-height: 68px;
  487. padding: 0;
  488. margin-top: 35px;
  489. }
  490. #myModal .submit_btn:hover {
  491. background: #0052D9;
  492. border-color: transparent;
  493. }
  494. #myModal .submit_btn.btn-primary {
  495. border-color: transparent;
  496. }
  497. .form_i {
  498. color: #FF4A4A;
  499. /* margin-left: -2px; */
  500. margin-top: -2px;
  501. margin-left: 2px;
  502. }
  503. .form-control {
  504. height: 48px;
  505. border: 0px solid #ccc;
  506. border-radius: 10px;
  507. }
  508. .control-label {
  509. margin-bottom: 14px;
  510. font-size: 18px;
  511. font-family: Source Han Sans CN;
  512. font-weight: 500;
  513. color: #666666;
  514. text-indent: 9px;
  515. }
  516. /* 模态框样式结束 */
  517. /* 通用footer样式结束 */
  518. @media (min-width: 1200px) {
  519. .container {
  520. width: 1200px;
  521. }
  522. }
  523. @media screen and (min-width:1440px) {}
  524. @media screen and (min-width:1200px)and (max-width:1439px) {}
  525. @media screen and (max-width:1200px) {}
  526. @media screen and (min-width:769)and (max-width:1120px) {}
  527. @media screen and (max-width:768px) {}
  528. @media screen and (max-width:600px) {}