office.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780
  1. body{
  2. max-width: 750px;
  3. margin: 0 auto;
  4. background: #fff;
  5. }
  6. .officeHead{
  7. width: 100%;
  8. height: auto;
  9. }
  10. .officeHead p,.officeHead p img{
  11. width: 100%;
  12. height: auto;
  13. }
  14. .officeHead p.time{
  15. position: relative;
  16. }
  17. .officeHead p.time span{
  18. display: block;
  19. position: absolute;
  20. left: 0px;
  21. bottom: 5%;
  22. text-align: center;
  23. width: 100%;
  24. }
  25. .officeHead p.time span em{
  26. display: inline-block;
  27. font-size: 0.75rem;
  28. color: #fff;
  29. background: rgba(0,0,0,0.5);
  30. border-radius: 10px;
  31. padding: 3px 10px;
  32. }
  33. .officeDy{
  34. width: 100%;
  35. height: auto;
  36. }
  37. .officeDy_main{
  38. width: 92%;
  39. margin: 0 auto;
  40. height: auto;
  41. }
  42. .officeDy_main p,.officeDy_main p img{
  43. width: 100%;
  44. height: auto;
  45. }
  46. .officeBm{
  47. width: 100%;
  48. height: auto;
  49. }
  50. .officeBm_main{
  51. width: 92%;
  52. margin: 0 auto;
  53. position: relative;
  54. }
  55. .officeBm_main p.bg,.officeBm_main p.bg img{
  56. width: 100%;
  57. height: auto;
  58. }
  59. .officeBm_form{
  60. position: absolute;
  61. left: 50%;
  62. width: 80%;
  63. margin-left: -40%;
  64. bottom: 8%;
  65. }
  66. .officeBm_form p.int{
  67. display: -webkit-flex; /* Safari */
  68. display: flex;
  69. justify-content:space-between;
  70. align-items:center;
  71. background: #fff;
  72. border-radius: 20px;
  73. height: 38px;
  74. }
  75. .officeBm_form p.int img{
  76. display: inline-block;
  77. width: 10px;
  78. height: 17px;
  79. line-height: 18px;
  80. margin-left: 10px;
  81. }
  82. .officeBm_form p.int input{
  83. display: inline-block;
  84. height: 32px;
  85. background: #fff;
  86. border:none;
  87. font-size: 0.8125rem;
  88. color: #666;
  89. width: 55%;
  90. }
  91. .officeBm_form p.int a{
  92. display: inline-block;
  93. height: 32px;
  94. line-height: 32px;
  95. text-align: center;
  96. width: 30%;
  97. border-radius: 20px;
  98. font-size: 0.937rem;
  99. font-weight: bold;
  100. color: #2E2200;
  101. background: #FFF600;
  102. margin-right: 5px;
  103. }
  104. .officeTiele,.officeTiele img{
  105. width: 100%;
  106. height: auto;
  107. }
  108. .officeLise{
  109. width: 100%;
  110. height:auto;
  111. }
  112. .officeLise_main{
  113. width: 92%;
  114. margin: 0 auto;
  115. margin-top: 25px;
  116. }
  117. .officeLise_list{
  118. width: 100%;
  119. height: auto;
  120. overflow: hidden;
  121. }
  122. .officeLise_list .list_li{
  123. display: -webkit-flex; /* Safari */
  124. display: flex;
  125. justify-content:space-between;
  126. align-items:center;
  127. background: #F1F4F6;
  128. padding: 10px;
  129. margin-bottom: 20px;
  130. }
  131. .officeLise_list .list_li .list_mL{
  132. width: 40%;
  133. position: relative;
  134. height: 130px;
  135. }
  136. .officeLise_list .list_li .list_mL img{
  137. width: 100%;
  138. height: 100%;
  139. }
  140. .officeLise_list .list_li .list_mL p.zk{
  141. position: absolute;
  142. left: 0px;
  143. top: 10px;
  144. width: 100%;
  145. display: -webkit-flex; /* Safari */
  146. display: flex;
  147. justify-content:flex-start;
  148. align-items:center;
  149. }
  150. .officeLise_list .list_li .list_mL p.zk span{
  151. display: inline-block;
  152. font-size: 0.75rem;
  153. color: #fff;
  154. background:#FC4C31;
  155. height: 22px;
  156. line-height: 22px;
  157. padding: 0 5px 0 8px;
  158. max-width: 90%;
  159. overflow: hidden;
  160. text-overflow: ellipsis;
  161. white-space: nowrap;
  162. }
  163. .officeLise_list .list_li .list_mL p.zk img{
  164. width: auto;
  165. height: 22px;
  166. display: inline-block;
  167. }
  168. .officeLise_list .list_li .list_mR{
  169. width: 55%;
  170. height: 130px;
  171. position: relative;
  172. }
  173. .officeLise_list .list_li .list_mR .list_mR_m p.title{
  174. font-size: 1.0125rem;
  175. font-weight: bold;
  176. color: #333;
  177. }
  178. .officeLise_list .list_li .list_mR .list_mR_m p.pric{
  179. font-size: 0.75rem;
  180. color: #F10909;
  181. margin-top: 10px;
  182. }
  183. .officeLise_list .list_li .list_mR .list_mR_m p.pric em{
  184. font-size: 1.0125rem;
  185. font-weight: bold;
  186. }
  187. .officeLise_list .list_li .list_mR .list_mR_m p.city{
  188. display: -webkit-flex; /* Safari */
  189. display: flex;
  190. justify-content:flex-start;
  191. align-items:flex-start;
  192. margin-top: 6px;
  193. }
  194. .officeLise_list .list_li .list_mR .list_mR_m p.city img{
  195. width: 9px;
  196. height: 12px;
  197. line-height: 12px;
  198. position: relative;
  199. top: 2px;
  200. display: inline-block;
  201. }
  202. .officeLise_list .list_li .list_mR .list_mR_m p.city span{
  203. display: block;
  204. font-size: 0.75rem;
  205. color: #666;
  206. display: -webkit-box;
  207. -webkit-box-orient: vertical;
  208. -webkit-line-clamp: 2;
  209. overflow: hidden;
  210. width: 90%;
  211. margin-left: 5px;
  212. }
  213. .officeLise_list .list_li .list_mR .lpbm{
  214. position: absolute;
  215. left: 0px;
  216. bottom: 0px;
  217. width: 100%;
  218. display: -webkit-flex; /* Safari */
  219. display: flex;
  220. justify-content:space-between;
  221. align-items:center;
  222. }
  223. .officeLise_list .list_li .list_mR .lpbm a{
  224. display: inline-block;
  225. font-size: 0.875rem;
  226. color: #fff;
  227. font-weight: bold;
  228. height: 30px;
  229. line-height: 30px;
  230. width: 45%;
  231. text-align: center;
  232. }
  233. .officeLise_list .list_li .list_mR .lpbm a.djtx{
  234. background: #2567CE;
  235. }
  236. .officeLise_list .list_li .list_mR .lpbm a.zxzx{
  237. background: #F19718;
  238. }
  239. .officeLise_list .swiper-pagination{
  240. position: static;
  241. }
  242. .officeLise_list .swiper-pagination-bullet{
  243. width: 7px;
  244. height: 7px;
  245. background:#CCCCCC;
  246. opacity: 1;
  247. }
  248. .officeLise_list .swiper-pagination-bullet-active{
  249. height: 7px;
  250. width: 20px;
  251. background: #2465CD;
  252. opacity: 1;
  253. border-radius: 10px;
  254. }
  255. .officeHot{
  256. width: 100%;
  257. background: #F1F4F6;
  258. height: auto;
  259. margin-top: 30px;
  260. overflow: hidden;
  261. }
  262. .officeHot_main{
  263. width: 92%;
  264. margin:0 auto;
  265. padding: 30px 0 30px;
  266. }
  267. .officeHot_list{
  268. width: 100%;
  269. height: 285px;
  270. margin-top: 18px;
  271. }
  272. .officeHot_list ul li{
  273. width: 259px;
  274. height: 265px;
  275. background: #fff;
  276. margin-right: 20px;
  277. position: relative;
  278. top: 12px;
  279. }
  280. /*.officeHot_list ul li+li{
  281. margin-left: 20px;
  282. }*/
  283. .officeHot_list ul li .top_ico{
  284. position: relative;
  285. width: 236px;
  286. height: 144px;
  287. margin: 0 auto;
  288. margin-top: 14px;
  289. }
  290. .officeHot_list ul li .top_ico p.img,.officeHot_list ul li .top_ico p.img img{
  291. width: 100%;
  292. height: 100%;
  293. }
  294. .officeHot_list ul li .top_ico .ap_text{
  295. position: absolute;
  296. left: 0px;
  297. width: 100%;
  298. bottom:0px;
  299. z-index: 2;
  300. display: -webkit-flex; /* Safari */
  301. display: flex;
  302. justify-content:flex-end;
  303. align-items:flex-end;
  304. }
  305. .officeHot_list ul li .top_ico .ap_text p.pric{
  306. font-size: 0.625rem;
  307. color: #fff;
  308. background: url('/zt/office20200727/image/ico_12.png') no-repeat center;
  309. background-size:100% 100%;
  310. height: 40px;
  311. line-height: 40px;
  312. padding: 0 5px 0 10px;
  313. position: relative;
  314. z-index: 2;
  315. }
  316. .officeHot_list ul li .top_ico .ap_text p.pric span{
  317. font-size: 1.0625rem;
  318. font-weight: bold;
  319. padding: 0 3px;
  320. }
  321. .officeHot_list ul li .top_ico .ap_text p.zkyh{
  322. background: url('/zt/office20200727/image/ico_19.png') no-repeat center;
  323. background-size:100% 100%;
  324. height: 25px;
  325. line-height: 25px;
  326. font-size: 0.625rem;
  327. color: #fff;
  328. position: relative;
  329. padding: 0 15px 0 20px;
  330. right: -10px;
  331. z-index: 1;
  332. overflow: hidden;
  333. text-overflow: ellipsis;
  334. white-space: nowrap;
  335. max-width: 45%;
  336. }
  337. .officeHot_list ul li .text_b{
  338. width: 236px;
  339. margin: 0 auto;
  340. }
  341. .officeHot_list ul li .text_b .top_text{
  342. margin-top: 8px;
  343. }
  344. .officeHot_list ul li .text_b .top_text a{
  345. font-size: 1rem;
  346. font-weight: bold;
  347. color: #333;
  348. display: inline-block;
  349. overflow: hidden;
  350. text-overflow: ellipsis;
  351. white-space: nowrap;
  352. }
  353. .officeHot_list ul li .text_b .top_text p.city{
  354. display: -webkit-flex; /* Safari */
  355. display: flex;
  356. justify-content:flex-start;
  357. align-items:center;
  358. margin-top: 0px;
  359. }
  360. .officeHot_list ul li .text_b .top_text p.city span{
  361. display: inline-block;
  362. font-size: 0.75rem;
  363. color: #999;
  364. overflow: hidden;
  365. text-overflow: ellipsis;
  366. white-space: nowrap;
  367. }
  368. .officeHot_list ul li .text_b .lpbm{
  369. display: -webkit-flex; /* Safari */
  370. display: flex;
  371. justify-content:space-between;
  372. align-items:center;
  373. margin-top: 10px;
  374. }
  375. .officeHot_list ul li .text_b .lpbm a{
  376. display: inline-block;
  377. font-size: 0.937rem;
  378. color: #fff;
  379. height: 32px;
  380. line-height: 32px;
  381. width: 45%;
  382. text-align: center;
  383. }
  384. .officeHot_list ul li .text_b .lpbm a.djtx{
  385. background: #2567CE;
  386. }
  387. .officeHot_list ul li .text_b .lpbm a.zxzx{
  388. background: #F19718;
  389. }
  390. .officeHot_list ul li.swiper-slide-active{/*选中的效果*/
  391. position:relative;
  392. top:0;
  393. transition: all .3s;
  394. height:287px;
  395. width: 293px;
  396. }
  397. .officeHot_list ul li.swiper-slide-active .top_ico{
  398. width: 262px;
  399. height: 159px;
  400. }
  401. .officeHot_list ul li.swiper-slide-active .top_ico .ap_text p.pric{
  402. height: 35px;
  403. line-height: 35px;
  404. font-size: 0.75rem;
  405. }
  406. .officeHot_list ul li.swiper-slide-active .top_ico .ap_text p.pric span{
  407. font-size: 1.025rem;
  408. }
  409. .officeHot_list ul li.swiper-slide-active .text_b{
  410. width: 262px;
  411. }
  412. .officeHot_list ul li.swiper-slide-active .top_ico .ap_text p.zkyh{
  413. height: 28px;
  414. line-height: 28px;
  415. font-size: 0.75rem;
  416. }
  417. .officeHot_list ul li.swiper-slide-active .text_b .top_text{
  418. margin-top: 8px;
  419. }
  420. .officeHot_list ul li.swiper-slide-active .text_b .top_text a{
  421. font-size: 1.25rem;
  422. }
  423. .officeHot_list ul li.swiper-slide-active .text_b .top_text p.city span{
  424. font-size: 0.875rem;
  425. }
  426. .officeHot_list ul li.swiper-slide-active .text_b .lpbm a{
  427. font-size: 0.975rem;
  428. width: 45%;
  429. height: 34px;
  430. line-height: 34px;
  431. }
  432. .officeHot_list_main .swiper-pagination{
  433. margin-top: 20px;
  434. position: static;
  435. }
  436. .officeHot_list_main .swiper-pagination-bullet{
  437. width: 7px;
  438. height: 7px;
  439. background:#fff;
  440. opacity: 1;
  441. margin: 0 4px;
  442. }
  443. .officeHot_list_main .swiper-pagination-bullet-active{
  444. height: 7px;
  445. width: 24px;
  446. background: #2465CD;
  447. opacity: 1;
  448. border-radius: 10px;
  449. }
  450. .officeTeam{
  451. width: 100%;
  452. height: auto;
  453. margin-top: 20px;
  454. }
  455. .officeTeam_t{
  456. width: 92%;
  457. margin: 0 auto;
  458. }
  459. .officeTeam_main{
  460. background: url('/zt/office20200727/image/ico_20.png') no-repeat;
  461. background-size: 100% auto;
  462. padding: 16px 0;
  463. }
  464. .officeTeam_top{
  465. width: 92%;
  466. margin:0 auto;
  467. background: url('/zt/office20200727/image/ico_22.jpg') no-repeat;
  468. background-size: 100% 100%;
  469. display: -webkit-flex; /* Safari */
  470. display: flex;
  471. justify-content:space-between;
  472. align-items:center;
  473. }
  474. .officeTeam_top .t_list{
  475. width: 30%;
  476. height: auto;
  477. position: relative;
  478. bottom: 0px;
  479. left: 12px;
  480. margin-top: 12px;
  481. }
  482. .officeTeam_top .t_list img{
  483. width: 100%;
  484. height: auto;
  485. }
  486. .officeTeam_top .t_right{
  487. width: 65%;
  488. position: relative;
  489. right: 20px;
  490. height: 100px;
  491. }
  492. .officeTeam_top .t_right p.name span{
  493. font-size: 1.025rem;
  494. color: #fff;
  495. font-weight: bold;
  496. }
  497. .officeTeam_top .t_right p.name em{
  498. font-size: 0.75rem;
  499. color: #fff;
  500. margin-left: 5px;
  501. display: inline-block;
  502. }
  503. .officeTeam_top .t_right p.text{
  504. font-size: 0.75rem;
  505. color: #fff;
  506. margin-top: 5px;
  507. }
  508. .officeTeam_top .t_right a{
  509. background: #F19718;
  510. font-size: 0.937rem;
  511. font-weight: bold;
  512. color: #fff;
  513. height: 32px;
  514. line-height: 32px;
  515. text-align: center;
  516. width: 100px;
  517. position: absolute;
  518. right: 0px;
  519. bottom: -5px;
  520. }
  521. .officeTeam_list{
  522. width: 92%;
  523. margin: 0 auto;
  524. }
  525. .officeTeam_list .b_list ul{
  526. display: -webkit-flex; /* Safari */
  527. display: flex;
  528. justify-content:center;
  529. align-items:center;
  530. }
  531. .officeTeam_list .b_list ul li{
  532. width: 18%;
  533. background: #F1F4F6;
  534. height: 63px;
  535. }
  536. .officeTeam_list .b_list ul li a{
  537. display: inline-block;
  538. width: 100%;
  539. height: 100%;
  540. display: -webkit-flex; /* Safari */
  541. display: flex;
  542. justify-content:center;
  543. align-items:flex-end;
  544. }
  545. .officeTeam_list .b_list ul li+li{
  546. margin-left: 3%;
  547. }
  548. .officeTeam_list .b_list ul li img{
  549. width: 80%;
  550. margin: 0 auto;
  551. display: inline-block;
  552. }
  553. .officeTeam_list .b_list ul li.on{
  554. background: #2567CE;
  555. }
  556. .myAdvantage{
  557. width: 100%;
  558. height: auto;
  559. }
  560. .myAdvantage_main,.myAdvantage_main p,.myAdvantage_main p img{
  561. width: 100%;
  562. height: auto;
  563. }
  564. .officeAppen{
  565. position: fixed;
  566. width: 90%;
  567. margin-left: -45%;
  568. left: 50%;
  569. top: 15%;
  570. z-index: 202;
  571. display: none;
  572. }
  573. .officeAppen_bg{
  574. width:100%;
  575. height: 100%;
  576. position: fixed;
  577. left: 0px;
  578. top: 0px;
  579. z-index: 200;
  580. background: rgba(0,0,0,0.5);
  581. display: none;
  582. }
  583. .officeAppen_main{
  584. width: 100%;
  585. height: auto;
  586. position: relative;
  587. }
  588. .officeAppen_m,.officeAppen_m img{
  589. width: 100%;
  590. height: auto;
  591. }
  592. .officeAppen_gb{
  593. position: absolute;
  594. z-index: 2;
  595. right: 25px;
  596. top: 20px;
  597. width: 23px;
  598. height: 23px;
  599. }
  600. .officeAppen_gb img{
  601. width: 100%;
  602. height: 100%;
  603. }
  604. .officeAppen_form{
  605. position: absolute;
  606. width: 70%;
  607. margin-left: -35%;
  608. left: 50%;
  609. bottom:23.5%;
  610. }
  611. .officeAppen_form p.un{
  612. background: #fff;
  613. height: 40px;
  614. width: 100%;
  615. border-radius: 20px;
  616. display: -webkit-flex; /* Safari */
  617. display: flex;
  618. justify-content:center;
  619. align-items:center;
  620. }
  621. .officeAppen_form p.un img{
  622. width: 10px;
  623. height: 13px;
  624. display: inline-block;
  625. margin-right: 10px;
  626. }
  627. .officeAppen_form p.un input{
  628. display: inline-block;
  629. height: 38px;
  630. font-size: 0.875rem;
  631. color: #666;
  632. width: 80%;
  633. background: #fff;
  634. border:none;
  635. border-radius: 0 20px 20px 0;
  636. }
  637. .officeAppen_form p.inb{
  638. width: 100%;
  639. height: 40px;
  640. margin-top: 10px;
  641. }
  642. .officeAppen_form p.inb a{
  643. display: inline-block;
  644. height: 40px;
  645. line-height: 40px;
  646. width: 100%;
  647. text-align: center;
  648. border-radius: 20px;
  649. font-size: 1.0625rem;
  650. color: #543300;
  651. font-weight: bold;
  652. background:linear-gradient(0deg,rgba(226,163,53,1) 0%,rgba(255,252,0,1) 100%);
  653. }
  654. .office_title{
  655. text-align: center;
  656. margin-bottom: 15px;
  657. }
  658. .office_title p{
  659. width: auto;
  660. position: relative;
  661. z-index: 1;
  662. }
  663. .office_title p span{
  664. font-size: 1.5625rem;
  665. color: #333;
  666. font-weight: bold;
  667. position: relative;
  668. z-index: 2;
  669. }
  670. .office_title i{
  671. display: inline-block;
  672. width: 33px;
  673. height: 3px;
  674. background: #2465CD;
  675. margin-top: 0px;
  676. position: relative;
  677. z-index: 2;
  678. }
  679. .office_title em{
  680. position: absolute;
  681. left: 0px;
  682. bottom: -13px;
  683. font-size: 0.973rem;
  684. font-weight: bold;
  685. display: inline-block;
  686. width: 100%;
  687. text-align: center;
  688. z-index: 1;
  689. color: #F1F4F6;
  690. }
  691. .office_title2 em{
  692. color: #fff;
  693. }
  694. .offcieFooter{
  695. text-align: center;
  696. margin-top: 30px;
  697. }
  698. .offcieFooter p{
  699. font-size: 0.875rem;
  700. color: #999;
  701. }
  702. .offcieFooter p+p{
  703. margin-top: 5px;
  704. }