xinmei_operate.css 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413
  1. @charset "UTF-8";
  2. /* width1200px */
  3. body {
  4. background: #f5f7fa;
  5. }
  6. .center_page {
  7. width: 1200px;
  8. margin: auto;
  9. content: '';
  10. display: block;
  11. clear: both;
  12. }
  13. /* 小区域头部*/
  14. .area_title {
  15. text-align: left;
  16. font-size: 22px;
  17. color: #333333;
  18. padding: 25px 0 20px 0;
  19. margin: 0 20px;
  20. border-bottom: 1px solid #e5e5e5;
  21. }
  22. .set {
  23. width: 100%;
  24. height: 851px;
  25. background: url(../list_images/xinmei_operate/bg1.png) no-repeat center;
  26. margin-top: -108px;
  27. }
  28. .set .center_page {
  29. padding-top: 88px;
  30. }
  31. .set_choose {
  32. float: left;
  33. width: 860px;
  34. height: 574px;
  35. position: relative;
  36. padding: 25px 20px 0 20px;
  37. background: #fff;
  38. }
  39. .set_choose_item {
  40. position: relative;
  41. border-bottom: 1px solid #e5e5e5;
  42. border-left: 1px solid #e5e5e5;
  43. }
  44. .set_choose_item1, .set_choose_item2, .set_choose_item3, .set_choose_item4 {
  45. float: left;
  46. width: 155px;
  47. height: 40px;
  48. border-right: 1px solid #e5e5e5;
  49. border-top: 1px solid #e5e5e5;
  50. background: #f0f0f0;
  51. }
  52. .set_choose_item1:hover, .set_choose_item2:hover, .set_choose_item3:hover, .set_choose_item4:hover {
  53. border-bottom: none;
  54. background: #fff;
  55. }
  56. .set_choose_item1:hover .set_choose_itemt, .set_choose_item2:hover .set_choose_itemt, .set_choose_item3:hover .set_choose_itemt, .set_choose_item4:hover .set_choose_itemt {
  57. border-top: 3px solid #576fff;
  58. position: absolute;
  59. top: -1px;
  60. font-size: 16px;
  61. color: #576fff;
  62. font-weight: bold;
  63. background: #fff;
  64. }
  65. .set_choose_itemt {
  66. width: 155px;
  67. height: 41px;
  68. border-top: 3px solid transparent;
  69. text-align: center;
  70. line-height: 41px;
  71. font-size: 16px;
  72. color: #4c4c4c;
  73. cursor: pointer;
  74. transition: all .5s;
  75. }
  76. .set_choose_itemd {
  77. display: none;
  78. /*套餐价格*/
  79. /* 一种套餐类型 */
  80. /*另套餐类型*/
  81. /*套餐周期*/
  82. /* 第一种套餐周期 */
  83. /* 立即购买等btn */
  84. /* 另一个购买btn的height变化 */
  85. /* 商品编号等 */
  86. }
  87. .set_choose_itemd_title {
  88. font-size: 20px;
  89. color: #333333;
  90. font-weight: bold;
  91. }
  92. .set_choose_itemd_intro {
  93. font-size: 14px;
  94. color: #808080;
  95. width: 820px;
  96. height: 14px;
  97. margin: 12px 0 36px 0;
  98. }
  99. .set_choose_itemd_price {
  100. width: 100%;
  101. height: 82px;
  102. background: #f7f9fa;
  103. }
  104. .set_choose_itemd_price .serve_price {
  105. float: left;
  106. width: 575px;
  107. height: 100%;
  108. line-height: 82px;
  109. }
  110. .set_choose_itemd_price .serve_pricen {
  111. font-size: 14px;
  112. color: #4c4c4c;
  113. font-weight: bold;
  114. margin-left: 20px;
  115. }
  116. .set_choose_itemd_price .serve_pricep {
  117. font-size: 20px;
  118. color: #ff7200;
  119. font-weight: bold;
  120. position: relative;
  121. }
  122. .set_choose_itemd_price .serve_pricep:before {
  123. content: '¥';
  124. font-size: 12px;
  125. color: #ff7200;
  126. }
  127. .set_choose_itemd_price .serve_pricep > span {
  128. display: inline-block;
  129. padding: 0 5px;
  130. text-align: center;
  131. line-height: 22px;
  132. font-size: 12px;
  133. color: #fff;
  134. background: #576fff;
  135. position: relative;
  136. margin-left: 10px;
  137. top: -5px;
  138. }
  139. .set_choose_itemd_price .serve_pricep > span:before {
  140. content: '';
  141. display: inline-block;
  142. width: 0;
  143. height: 0;
  144. border-bottom: 5px solid #576fff;
  145. border-left: 5px solid transparent;
  146. position: absolute;
  147. bottom: 0;
  148. left: -5px;
  149. }
  150. .set_choose_itemd_price .serve_price_info {
  151. font-size: 14px;
  152. color: #999999;
  153. }
  154. .set_choose_itemd_price .focus_yuzhua {
  155. float: right;
  156. font-size: 14px;
  157. line-height: 82px;
  158. position: relative;
  159. width: 240px;
  160. }
  161. .set_choose_itemd_price .focus_yuzhua > a {
  162. margin-right: 28px;
  163. color: #6a4cff;
  164. float: right;
  165. }
  166. .set_choose_itemd_price .focus_yuzhua > a:before {
  167. content: '';
  168. display: inline-block;
  169. width: 15px;
  170. height: 15px;
  171. position: relative;
  172. top: 3px;
  173. margin-right: 8px;
  174. background: url(../list_images/xinmei_operate/icon1.png) no-repeat center;
  175. }
  176. .set_choose_itemd_price .focus_yuzhua .display_er_code {
  177. max-width: 248px;
  178. max-height: 248px;
  179. border: 1px solid #6a4cff;
  180. background-color: #ffffff;
  181. box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.1);
  182. position: absolute;
  183. top: 60px;
  184. left: 0px;
  185. z-index: -1;
  186. opacity: 0;
  187. transition: all 0.3s linear;
  188. }
  189. .set_choose_itemd_price .focus_yuzhua .display_er_code_sin {
  190. width: 0;
  191. height: 0;
  192. border-width: 0px 7px 7px 7px;
  193. border-style: solid;
  194. border-color: transparent transparent #6a4cff transparent;
  195. position: relative;
  196. top: -7px;
  197. left: 100px;
  198. }
  199. .set_choose_itemd_price .focus_yuzhua .display_er_code_sin:after {
  200. content: '';
  201. width: 0;
  202. height: 0;
  203. border-width: 0px 6px 6px 6px;
  204. border-style: solid;
  205. border-color: transparent transparent #ffffff transparent;
  206. position: absolute;
  207. top: 7px;
  208. bottom: 0;
  209. left: -6px;
  210. right: 0;
  211. margin: auto;
  212. }
  213. .set_choose_itemd_price .focus_yuzhua .display_er_code_sin .cod_pic {
  214. width: 100%;
  215. height: 100%;
  216. margin: auto;
  217. text-align: center;
  218. overflow: hidden;
  219. }
  220. .set_choose_itemd_price .focus_yuzhua .display_er_code_sin .cod_pic > img {
  221. display: none;
  222. width: 240px;
  223. height: 240px;
  224. position: absolute;
  225. top: 55px;
  226. left: 0;
  227. }
  228. .set_choose_itemd_price .focus_yuzhua:after {
  229. content: '';
  230. display: block;
  231. clear: both;
  232. }
  233. .set_choose_itemd_price .focus_yuzhua:hover .display_er_code {
  234. opacity: 9;
  235. z-index: 9;
  236. }
  237. .set_choose_itemd_price:after {
  238. content: '';
  239. display: block;
  240. clear: both;
  241. }
  242. .set_choose_itemd_type1 {
  243. width: 100%;
  244. height: 89px;
  245. border-bottom: 1px dashed #dbdbdb;
  246. overflow: hidden;
  247. }
  248. .set_choose_itemd_type1 .type_name {
  249. width: 85px;
  250. padding-top: 35px;
  251. float: left;
  252. font-size: 14px;
  253. color: #575757;
  254. font-weight: bold;
  255. text-align: right;
  256. }
  257. .set_choose_itemd_type1 .type_wrap {
  258. width: 730px;
  259. float: left;
  260. padding-top: 28px;
  261. }
  262. .set_choose_itemd_type1 .type_wrap_each {
  263. display: inline-block;
  264. width: 95px;
  265. height: 30px;
  266. border: 1px solid #dfdfdf;
  267. margin-right: 10px;
  268. text-align: center;
  269. line-height: 30px;
  270. position: relative;
  271. cursor: pointer;
  272. }
  273. .set_choose_itemd_type1 .type_wrap_each:after {
  274. content: '';
  275. display: none;
  276. width: 0;
  277. height: 0;
  278. border-bottom: 12px solid #c26aff;
  279. border-left: 12px solid transparent;
  280. position: absolute;
  281. bottom: 0px;
  282. right: 0px;
  283. }
  284. .set_choose_itemd_type1 .type_wrap_each:first-child {
  285. margin-left: 5px;
  286. }
  287. .set_choose_itemd_type1 .type_wrap .on {
  288. width: 93px;
  289. height: 28px;
  290. border: 2px solid #c26aff;
  291. line-height: 28px;
  292. }
  293. .set_choose_itemd_type1 .type_wrap .on:after {
  294. display: inline-block;
  295. }
  296. .set_choose_itemd_type {
  297. width: 100%;
  298. height: 140px;
  299. border-bottom: 1px dashed #dbdbdb;
  300. }
  301. .set_choose_itemd_type .type_name {
  302. float: left;
  303. width: 85px;
  304. height: 115px;
  305. padding-top: 25px;
  306. font-size: 14px;
  307. color: #575757;
  308. font-weight: bold;
  309. text-align: right;
  310. }
  311. .set_choose_itemd_type .type_detail {
  312. float: left;
  313. width: 720px;
  314. height: 135px;
  315. position: relative;
  316. margin: 15px 0 0 8px;
  317. }
  318. .set_choose_itemd_type .type_detail1, .set_choose_itemd_type .type_detail2 {
  319. cursor: pointer;
  320. width: 265px;
  321. height: 32px;
  322. border: 1px solid #dfdfdf;
  323. text-align: center;
  324. line-height: 32px;
  325. float: left;
  326. text-align: center;
  327. }
  328. .set_choose_itemd_type .type_detail1:after, .set_choose_itemd_type .type_detail2:after {
  329. content: '';
  330. display: none;
  331. width: 0;
  332. height: 0;
  333. border-bottom: 12px solid #c26aff;
  334. border-left: 12px solid transparent;
  335. position: relative;
  336. top: -20px;
  337. left: 127px;
  338. }
  339. .set_choose_itemd_type .type_detail1 {
  340. margin-right: 10px;
  341. }
  342. .set_choose_itemd_type .type_detail .on {
  343. width: 263px;
  344. height: 30px;
  345. border: 2px solid #c26aff;
  346. line-height: 30px;
  347. }
  348. .set_choose_itemd_type .type_detail .on .type_detail_show {
  349. display: block;
  350. }
  351. .set_choose_itemd_type .type_detail .on:after {
  352. display: inline-block;
  353. }
  354. .set_choose_itemd_type .type_detail_name {
  355. font-size: 14px;
  356. color: #484848;
  357. }
  358. .set_choose_itemd_type .type_detail_name > span {
  359. color: #c26aff;
  360. }
  361. .set_choose_itemd_type .type_detail_show {
  362. display: none;
  363. position: absolute;
  364. width: 715px;
  365. height: 70px;
  366. background: #f3ecf8;
  367. top: 0;
  368. left: 0;
  369. margin-top: 40px;
  370. text-align: left;
  371. padding-top: 5px;
  372. }
  373. .set_choose_itemd_type .type_detail_show > span {
  374. font-size: 14px;
  375. color: #808080;
  376. display: inline-block;
  377. margin-left: 10px;
  378. }
  379. .set_choose_itemd_type .type_detail_show > span > i {
  380. display: inline-block;
  381. width: 20px;
  382. height: 20px;
  383. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  384. background-position: -26px -26px;
  385. position: relative;
  386. top: 5px;
  387. margin-right: 5px;
  388. }
  389. .set_choose_itemd_type .type_detail_show:after {
  390. content: '';
  391. display: block;
  392. clear: both;
  393. }
  394. .set_choose_itemd_type .type_detail_show .type1, .set_choose_itemd_type .type_detail_show .type5 {
  395. width: 140px;
  396. }
  397. .set_choose_itemd_type .type_detail_show .type2, .set_choose_itemd_type .type_detail_show .type6 {
  398. width: 168px;
  399. }
  400. .set_choose_itemd_type .type_detail_show .type3, .set_choose_itemd_type .type_detail_show .type7 {
  401. width: 125px;
  402. }
  403. .set_choose_itemd_type .type_detail_show .type4, .set_choose_itemd_type .type_detail_show .type8 {
  404. width: 225px;
  405. }
  406. .set_choose_itemd_type .type_detail_show .active > i {
  407. display: inline-block;
  408. width: 20px;
  409. height: 20px;
  410. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  411. background-position: -27px -68px;
  412. position: relative;
  413. top: 5px;
  414. margin-right: 5px;
  415. }
  416. .set_choose_itemd_type:after {
  417. content: '';
  418. display: block;
  419. clear: both;
  420. }
  421. .set_choose_itemd_cycle, .set_choose_itemd_cycle1 {
  422. width: 100%;
  423. height: 49px;
  424. border-bottom: 1px dashed #dbdbdb;
  425. }
  426. .set_choose_itemd_cycle .cycle_name, .set_choose_itemd_cycle1 .cycle_name {
  427. float: left;
  428. width: 85px;
  429. height: 39px;
  430. font-size: 14px;
  431. color: #575757;
  432. font-weight: bold;
  433. text-align: right;
  434. padding-top: 10px;
  435. }
  436. .set_choose_itemd_cycle .cycle_detail, .set_choose_itemd_cycle1 .cycle_detail {
  437. margin-top: 18px;
  438. /* 给套餐周期加类名,让点击能有效果 */
  439. }
  440. .set_choose_itemd_cycle .cycle_detail_each, .set_choose_itemd_cycle1 .cycle_detail_each {
  441. float: left;
  442. width: 124px;
  443. height: 32px;
  444. border: 1px solid #dfdfdf;
  445. margin-right: 10px;
  446. text-align: center;
  447. line-height: 32px;
  448. position: relative;
  449. cursor: pointer;
  450. /* 这里的hover效果先注释 */
  451. }
  452. .set_choose_itemd_cycle .cycle_detail_each .each_span, .set_choose_itemd_cycle1 .cycle_detail_each .each_span {
  453. font-size: 14px;
  454. color: #4d4d4d;
  455. }
  456. .set_choose_itemd_cycle .cycle_detail_each .each_span > span, .set_choose_itemd_cycle1 .cycle_detail_each .each_span > span {
  457. color: #c26aff;
  458. }
  459. .set_choose_itemd_cycle .cycle_detail_each:first-child, .set_choose_itemd_cycle1 .cycle_detail_each:first-child {
  460. margin-left: 5px;
  461. }
  462. .set_choose_itemd_cycle .cycle_detail_each:after, .set_choose_itemd_cycle1 .cycle_detail_each:after {
  463. content: '';
  464. display: none;
  465. width: 0;
  466. height: 0;
  467. border-bottom: 12px solid #c26aff;
  468. border-left: 12px solid transparent;
  469. position: absolute;
  470. bottom: 0px;
  471. right: 0px;
  472. }
  473. .set_choose_itemd_cycle .cycle_detail:after, .set_choose_itemd_cycle1 .cycle_detail:after {
  474. content: '';
  475. display: block;
  476. clear: both;
  477. }
  478. .set_choose_itemd_cycle .cycle_detail .on, .set_choose_itemd_cycle1 .cycle_detail .on {
  479. width: 122px;
  480. height: 33px;
  481. border: 2px solid #c26aff;
  482. line-height: 30px;
  483. }
  484. .set_choose_itemd_cycle .cycle_detail .on:after, .set_choose_itemd_cycle1 .cycle_detail .on:after {
  485. display: inline-block;
  486. }
  487. .set_choose_itemd_cycle:after, .set_choose_itemd_cycle1:after {
  488. content: '';
  489. display: block;
  490. clear: both;
  491. }
  492. .set_choose_itemd_cycle:after:after, .set_choose_itemd_cycle1:after:after {
  493. display: inline-block;
  494. }
  495. .set_choose_itemd_cycle1 {
  496. height: 69px;
  497. padding-top: 10px;
  498. }
  499. .set_choose_itemd_cycle1 .cycle_name {
  500. padding-top: 20px;
  501. }
  502. .set_choose_itemd_cycle1 .cycle_detail_each {
  503. display: inline-block;
  504. width: 95px;
  505. height: 30px;
  506. border: 1px solid #dfdfdf;
  507. margin: 0 5px 0 5px;
  508. text-align: center;
  509. line-height: 30px;
  510. position: relative;
  511. cursor: pointer;
  512. }
  513. .set_choose_itemd_cycle1 .cycle_detail_each:after {
  514. content: '';
  515. display: none;
  516. width: 0;
  517. height: 0;
  518. border-bottom: 12px solid #c26aff;
  519. border-left: 12px solid transparent;
  520. position: absolute;
  521. bottom: 0px;
  522. right: 0px;
  523. }
  524. .set_choose_itemd_cycle1 .on1 {
  525. width: 193px;
  526. height: 28px;
  527. border: 2px solid #c26aff;
  528. line-height: 28px;
  529. }
  530. .set_choose_itemd_cycle1 .on1:after {
  531. display: inline-block;
  532. }
  533. .set_choose_itemd_btns {
  534. padding: 24px 0;
  535. border-bottom: 1px dashed #dbdbdb;
  536. /* / 给后台预留的添加类名,亮起加入购物车*/
  537. /* / 给后台预留的添加类名,亮起加入收藏 */
  538. }
  539. .set_choose_itemd_btns .btn_buy, .set_choose_itemd_btns .btn_contact {
  540. display: inline-block;
  541. width: 198px;
  542. height: 44px;
  543. border: 1px solid #576fff;
  544. background: #576fff;
  545. text-align: center;
  546. line-height: 44px;
  547. border-radius: 4px;
  548. font-size: 18px;
  549. color: #fff;
  550. transition: .5s;
  551. }
  552. .set_choose_itemd_btns .btn_buy:hover {
  553. background: #3751ec;
  554. }
  555. .set_choose_itemd_btns .btn_contact {
  556. border: 1px solid #9a9a9a;
  557. background: #fff;
  558. margin-left: 10px;
  559. color: #4c4c4c;
  560. }
  561. .set_choose_itemd_btns .btn_contact:hover {
  562. color: #6a4cff;
  563. border: 1px solid #6a4cff;
  564. }
  565. .set_choose_itemd_btns .btn_car, .set_choose_itemd_btns .btn_select {
  566. font-size: 14px;
  567. color: #808080;
  568. margin-left: 20px;
  569. }
  570. .set_choose_itemd_btns .btn_car i, .set_choose_itemd_btns .btn_select i {
  571. display: inline-block;
  572. margin-right: 4px;
  573. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  574. width: 17px;
  575. height: 17px;
  576. position: relative;
  577. top: 6px;
  578. }
  579. .set_choose_itemd_btns .btn_car:hover, .set_choose_itemd_btns .btn_select:hover {
  580. color: #576fff;
  581. }
  582. .set_choose_itemd_btns .btn_car {
  583. margin-left: 20px;
  584. }
  585. .set_choose_itemd_btns .btn_car > i {
  586. background-position: -151px -26px;
  587. }
  588. .set_choose_itemd_btns .btn_car:hover > i {
  589. background-position: -152px -68px;
  590. }
  591. .set_choose_itemd_btns .btn_select > i {
  592. background-position: -95px -26px;
  593. }
  594. .set_choose_itemd_btns .btn_select:hover > i {
  595. background-position: -95px -68px;
  596. }
  597. .set_choose_itemd_btns .active2 > i {
  598. background-position: -95px -68px;
  599. }
  600. .set_choose_itemd .other_btns {
  601. height: 50px;
  602. padding: 33px 0;
  603. }
  604. .set_choose_itemd_num {
  605. width: 100%;
  606. height: 39px;
  607. border-bottom: 1px dashed #dbdbdb;
  608. line-height: 39px;
  609. }
  610. .set_choose_itemd_num > span {
  611. font-size: 12px;
  612. color: #999999;
  613. margin-right: 50px;
  614. }
  615. .set_choose_itemd_serve {
  616. width: 100%;
  617. padding-top: 12px;
  618. }
  619. .set_choose_itemd_serve > span {
  620. font-size: 12px;
  621. color: #999999;
  622. margin-right: 30px;
  623. position: relative;
  624. }
  625. .set_choose_itemd_serve > span > i {
  626. display: inline-block;
  627. width: 20px;
  628. height: 20px;
  629. position: relative;
  630. top: 7px;
  631. left: 0;
  632. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  633. }
  634. .set_choose_itemd_serve > span:after {
  635. content: '';
  636. display: inline-block;
  637. width: 1px;
  638. height: 9px;
  639. background: #e8e6f0;
  640. position: absolute;
  641. top: 5px;
  642. right: -15px;
  643. }
  644. .set_choose_itemd_serve .serve1 > i {
  645. background-position: -277px -68px;
  646. }
  647. .set_choose_itemd_serve .serve2 > i {
  648. background-position: -338px -68px;
  649. }
  650. .set_choose_itemd_serve .serve3 > i {
  651. background-position: -387px -68px;
  652. }
  653. .set_choose_itemd_serve .serve4 > i {
  654. background-position: -437px -68px;
  655. }
  656. .set_choose_itemd_serve .serve5 > i {
  657. background-position: -490px -68px;
  658. }
  659. .set_choose_item .on {
  660. border-bottom: none;
  661. background: #fff;
  662. }
  663. .set_choose_item .on .set_choose_itemt {
  664. position: absolute;
  665. background: #fff;
  666. top: -1px;
  667. border-top: 3px solid #576fff;
  668. font-size: 16px;
  669. color: #576fff;
  670. font-weight: bold;
  671. }
  672. .set_choose_item .on .set_choose_itemd {
  673. display: block;
  674. height: 500px;
  675. width: 820px;
  676. padding: 10px 20px 0 20px;
  677. position: absolute;
  678. top: 0;
  679. left: 0;
  680. margin-top: 43px;
  681. }
  682. .set_choose_item:after {
  683. content: '';
  684. display: block;
  685. clear: both;
  686. }
  687. .set_custorm {
  688. float: right;
  689. width: 285px;
  690. background: #fff;
  691. padding-top: 42px;
  692. }
  693. .set_custorm_title {
  694. width: 182px;
  695. height: 20px;
  696. background: url(../list_images/xinmei_operate/icon2.png) no-repeat center;
  697. margin: auto auto 36px auto;
  698. font-size: 20px;
  699. color: #4c4c4c;
  700. font-weight: bold;
  701. text-align: center;
  702. line-height: 20px;
  703. }
  704. .set_custorm_wrap {
  705. width: 100%;
  706. }
  707. .set_custorm_info {
  708. width: 225px;
  709. height: 225px;
  710. background: url(../list_images/xinmei_operate/p1_bg2.png) no-repeat center;
  711. margin: auto;
  712. text-align: center;
  713. }
  714. .set_custorm_info .custorm_name {
  715. font-size: 16px;
  716. color: #808080;
  717. font-weight: bold;
  718. }
  719. .set_custorm_info .custorm_pic {
  720. width: 140px;
  721. height: 140px;
  722. position: relative;
  723. vertical-align: middle;
  724. overflow: hidden;
  725. border-radius: 100%;
  726. margin: 27px auto;
  727. }
  728. .set_custorm_info .custorm_pic > img {
  729. position: absolute;
  730. left: 0;
  731. top: 0;
  732. right: 0;
  733. bottom: 0;
  734. margin: auto;
  735. /* 有了这个就自动居中了 */
  736. }
  737. .set_custorm_info .custorm_post {
  738. font-size: 16px;
  739. color: #404040;
  740. font-weight: bold;
  741. }
  742. .set_custorm_rate {
  743. width: 87px;
  744. height: 14px;
  745. margin: auto;
  746. position: relative;
  747. padding: 10px 0 20px 0;
  748. overflow: hidden;
  749. }
  750. .set_custorm_rate .rate_mask {
  751. position: absolute;
  752. top: 11px;
  753. left: 0;
  754. background: #576fff;
  755. height: 13px;
  756. }
  757. .set_custorm_rate .rate_star {
  758. position: absolute;
  759. top: 10px;
  760. left: 0;
  761. z-index: 1;
  762. }
  763. .set_custorm_experience {
  764. width: 100%;
  765. height: 45px;
  766. text-align: center;
  767. line-height: 45px;
  768. border-top: 1px solid #dbdbdb;
  769. border-bottom: 1px solid #dbdbdb;
  770. }
  771. .set_custorm_experience > span {
  772. font-size: 14px;
  773. color: #797979;
  774. }
  775. .set_custorm_phone {
  776. width: 100%;
  777. height: 47px;
  778. line-height: 47px;
  779. text-align: center;
  780. }
  781. .set_custorm_phone .phone_name {
  782. font-size: 14px;
  783. color: #787878;
  784. }
  785. .set_custorm_phone .phone_num {
  786. font-size: 16px;
  787. color: #ff6600;
  788. }
  789. .set_custorm_contact {
  790. display: block;
  791. width: 100%;
  792. height: 49px;
  793. text-align: center;
  794. line-height: 49px;
  795. background: url(../list_images/xinmei_operate/p1_bg3.png) no-repeat center;
  796. }
  797. .set_custorm_contact > i {
  798. display: inline-block;
  799. width: 21px;
  800. height: 21px;
  801. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  802. background-position: -215px -26px;
  803. vertical-align: middle;
  804. }
  805. .set_custorm_contact > span {
  806. font-size: 16px;
  807. color: #ffffff;
  808. font-weight: bold;
  809. }
  810. .set_custorm_advice {
  811. width: 100%;
  812. height: 89px;
  813. line-height: 89px;
  814. text-align: center;
  815. }
  816. .set_custorm_advice .custorm_rate, .set_custorm_advice .custorm_advice {
  817. display: inline-block;
  818. width: 122px;
  819. height: 30px;
  820. background: #e5e9ff;
  821. border: 1px solid #576fff;
  822. border-radius: 4px;
  823. line-height: 30px;
  824. font-size: 14px;
  825. }
  826. .set_custorm_advice .custorm_rate > i, .set_custorm_advice .custorm_advice > i {
  827. display: inline-block;
  828. width: 21px;
  829. height: 21px;
  830. vertical-align: middle;
  831. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  832. }
  833. .set_custorm_advice .custorm_rate {
  834. color: #576fff;
  835. }
  836. .set_custorm_advice .custorm_rate > i {
  837. background-position: -214px -68px;
  838. }
  839. .set_custorm_advice .custorm_advice {
  840. background: transparent;
  841. border: 1px solid #c8c8c8;
  842. margin-left: 5px;
  843. }
  844. .set_custorm_advice .custorm_advice > i {
  845. background-position: -27px -158px;
  846. }
  847. .wrap_content {
  848. margin-top: -74px;
  849. background: #fff;
  850. }
  851. .nav1 {
  852. width: 100%;
  853. height: 56px;
  854. background: #f8f7fb;
  855. overflow: hidden;
  856. }
  857. .nav1_item {
  858. width: 122px;
  859. height: 54px;
  860. line-height: 54px;
  861. border-right: 1px solid #e5e5e5;
  862. text-align: center;
  863. float: left;
  864. cursor: pointer;
  865. border-top: 2px solid transparent;
  866. }
  867. .nav1_item > a {
  868. display: inline-block;
  869. font-size: 16px;
  870. color: #666666;
  871. }
  872. .nav1_item:hover {
  873. border-top: 2px solid #6a4cff;
  874. color: #6a4cff;
  875. font-weight: bold;
  876. }
  877. .nav1_item.on {
  878. border-top: 2px solid #6a4cff;
  879. color: #6a4cff;
  880. font-weight: bold;
  881. background: #fff;
  882. }
  883. /*服务简介*/
  884. .summary_title {
  885. text-align: left;
  886. font-size: 22px;
  887. color: #333333;
  888. padding: 25px 0 20px 0;
  889. margin: 0 20px;
  890. border-bottom: 1px solid #e5e5e5;
  891. }
  892. .summary_show {
  893. width: 100%;
  894. height: 425px;
  895. background: url(../list_images/xinmei_operate/p2_bg1.jpg) no-repeat center;
  896. }
  897. .summary_show_t {
  898. font-size: 22px;
  899. color: #4d4d4d;
  900. text-align: center;
  901. padding-top: 65px;
  902. }
  903. .summary_show_detail {
  904. padding-top: 45px;
  905. margin: 0 84px;
  906. font-size: 15px;
  907. color: #4d4d4d;
  908. line-height: 32px;
  909. }
  910. .summary_show_items {
  911. width: 1035px;
  912. margin: auto;
  913. overflow: hidden;
  914. padding-top: 36px;
  915. }
  916. .summary_show_items .show_item {
  917. float: left;
  918. width: 110px;
  919. margin-right: 44px;
  920. text-align: center;
  921. }
  922. .summary_show_items .show_item > i {
  923. display: inline-block;
  924. width: 20px;
  925. height: 3px;
  926. background: url(../list_images/xinmei_operate/icon3.png) no-repeat center;
  927. }
  928. .summary_show_items .show_item:last-child {
  929. margin: 0;
  930. }
  931. .summary_show_items .show_img {
  932. width: 70px;
  933. height: 70px;
  934. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  935. margin: auto;
  936. }
  937. .summary_show_items .show_p {
  938. font-size: 16px;
  939. color: #4d4d4d;
  940. font-weight: bold;
  941. margin: 20px 0 8px 0;
  942. }
  943. .summary_show_items .show_img1 {
  944. background-position: -27px -200px;
  945. }
  946. .summary_show_items .show_img2 {
  947. background-position: -151px -200px;
  948. }
  949. .summary_show_items .show_img3 {
  950. background-position: -277px -200px;
  951. }
  952. .summary_show_items .show_img4 {
  953. background-position: -387px -200px;
  954. }
  955. .summary_show_items .show_img5 {
  956. background-position: -490px -200px;
  957. }
  958. .summary_show_items .show_img6 {
  959. background-position: -592px -200px;
  960. }
  961. .summary_show_items .show_img7 {
  962. background-position: -698px -200px;
  963. }
  964. /*服务流程*/
  965. .process {
  966. width: 100%;
  967. }
  968. .process_shows {
  969. overflow: hidden;
  970. margin-left: 20px;
  971. padding-top: 20px;
  972. }
  973. .process_show {
  974. width: 223px;
  975. height: 102px;
  976. background: url(../list_images/xinmei_operate/s3_bg1.png) no-repeat center;
  977. margin-right: 12px;
  978. overflow: hidden;
  979. float: left;
  980. }
  981. .process_show:last-child {
  982. margin-right: 0;
  983. }
  984. .process_show_img {
  985. float: left;
  986. width: 52px;
  987. height: 52px;
  988. margin: 25px 0 0 10px;
  989. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  990. }
  991. .process_show_img1 {
  992. background-position: -27px -292px;
  993. }
  994. .process_show_img2 {
  995. background-position: -151px -292px;
  996. }
  997. .process_show_img3 {
  998. background-position: -277px -292px;
  999. }
  1000. .process_show_img4 {
  1001. background-position: -387px -292px;
  1002. }
  1003. .process_show_img5 {
  1004. background-position: -490px -292px;
  1005. }
  1006. .process_show_intro {
  1007. width: 135px;
  1008. height: 102px;
  1009. float: left;
  1010. position: relative;
  1011. }
  1012. .process_show_intro .process_num {
  1013. position: absolute;
  1014. top: 42%;
  1015. right: -8px;
  1016. margin-top: -28px;
  1017. display: inline-block;
  1018. width: 57px;
  1019. height: 70px;
  1020. background: url(../list_images/xinmei_operate/operate_pingtu.png) right center;
  1021. }
  1022. .process_show_intro .process_info {
  1023. position: absolute;
  1024. top: 0;
  1025. left: 0;
  1026. margin: 21px 0 0 6px;
  1027. font-size: 0;
  1028. }
  1029. .process_show_intro .process_info_name {
  1030. font-size: 15px;
  1031. color: #4d4d4d;
  1032. font-weight: bold;
  1033. }
  1034. .process_show_intro .process_info_line {
  1035. display: inline-block;
  1036. width: 28px;
  1037. height: 3px;
  1038. margin: 7px 0 11px 0;
  1039. background: url(../list_images/xinmei_operate/line.png) no-repeat center;
  1040. }
  1041. .process_show_intro .process_info_e1 {
  1042. font-size: 15px;
  1043. color: #9dc2f3;
  1044. text-transform: uppercase;
  1045. margin-bottom: 3px;
  1046. }
  1047. .process_show_intro .process_info_e2 {
  1048. font-size: 12px;
  1049. color: #c8dff6;
  1050. text-transform: uppercase;
  1051. }
  1052. .process_show_intro1 .process_num {
  1053. background-position: -27px -369px;
  1054. }
  1055. .process_show_intro2 .process_num {
  1056. background-position: -151px -369px;
  1057. }
  1058. .process_show_intro3 .process_num {
  1059. background-position: -277px -369px;
  1060. }
  1061. .process_show_intro4 .process_num {
  1062. background-position: -387px -369px;
  1063. }
  1064. .process_show_intro5 .process_num {
  1065. background-position: -490px -369px;
  1066. }
  1067. /*服务优势*/
  1068. .advantage_show {
  1069. overflow: hidden;
  1070. margin-left: 20px;
  1071. }
  1072. .advantage_item {
  1073. float: left;
  1074. width: 277px;
  1075. height: 330px;
  1076. background: url(../list_images/xinmei_operate/p4_bg1.png) no-repeat center;
  1077. margin-right: 16px;
  1078. }
  1079. .advantage_item:last-child {
  1080. margin-right: 0;
  1081. }
  1082. .advantage_item_intro {
  1083. margin: 22px 0 0 20px;
  1084. }
  1085. .advantage_item_intro .item_name {
  1086. font-size: 16px;
  1087. color: #fff;
  1088. font-weight: bold;
  1089. }
  1090. .advantage_item_intro .wight_line {
  1091. width: 24px;
  1092. height: 4px;
  1093. background: #fff;
  1094. margin: 10px 0 18px 0;
  1095. }
  1096. .advantage_item_intro .item_intro {
  1097. font-size: 14px;
  1098. color: #ffffff;
  1099. line-height: 22px;
  1100. }
  1101. /*常见问题*/
  1102. .questions {
  1103. padding-bottom: 132px;
  1104. margin-bottom: 90px;
  1105. }
  1106. .questions_all {
  1107. overflow: hidden;
  1108. margin: 25px 0 0 30px;
  1109. }
  1110. .questions_one {
  1111. float: left;
  1112. width: 545px;
  1113. height: 142px;
  1114. margin: 0 8px 10px 0;
  1115. border: 1px solid #f0f1f5;
  1116. }
  1117. .questions_one_up {
  1118. margin: 0 9px;
  1119. height: 57px;
  1120. border-bottom: 1px solid #ecf5ff;
  1121. overflow: hidden;
  1122. }
  1123. .questions_one_up_img {
  1124. width: 30px;
  1125. height: 30px;
  1126. float: left;
  1127. margin: 15px 0 0 10px;
  1128. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  1129. background-position: -27px -481px;
  1130. }
  1131. .questions_one_up_name {
  1132. float: left;
  1133. font-size: 16px;
  1134. color: #4c4c4c;
  1135. font-weight: bold;
  1136. line-height: 57px;
  1137. width: 477px;
  1138. height: 57px;
  1139. white-space: nowrap;
  1140. text-overflow: ellipsis;
  1141. -o-text-overflow: ellipsis;
  1142. overflow: hidden;
  1143. }
  1144. .questions_one_down {
  1145. overflow: hidden;
  1146. }
  1147. .questions_one_down_img {
  1148. width: 30px;
  1149. height: 30px;
  1150. float: left;
  1151. margin: 15px 0 0 19px;
  1152. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  1153. background-position: -151px -481px;
  1154. }
  1155. .questions_one_down_answer {
  1156. font-size: 14px;
  1157. color: #999999;
  1158. margin-top: 20px;
  1159. line-height: 25px;
  1160. display: inline-block;
  1161. width: 477px;
  1162. height: 50px;
  1163. overflow: hidden;
  1164. }
  1165. .questions_one_down_answer .view_details {
  1166. font-size: 14px;
  1167. color: #999999;
  1168. }
  1169. .questions_one:hover .questions_one_up_name {
  1170. color: #649be8;
  1171. }
  1172. .questions_one:hover .view_details {
  1173. color: #649be8;
  1174. }
  1175. .questions_one:nth-child(2n) {
  1176. margin-right: 0;
  1177. }
  1178. .questions_more {
  1179. display: block;
  1180. width: 260px;
  1181. height: 52px;
  1182. margin: 28px auto 0 auto;
  1183. border: 4px solid #f1f3f8;
  1184. text-align: center;
  1185. line-height: 52px;
  1186. font-size: 15px;
  1187. color: #757575;
  1188. transition: .5s;
  1189. }
  1190. .questions_more > i {
  1191. display: inline-block;
  1192. margin-right: 10px;
  1193. width: 13px;
  1194. height: 12px;
  1195. background: url(../list_images/xinmei_operate/operate_pingtu.png);
  1196. background-position: -277px -484px;
  1197. }
  1198. .questions_more:hover {
  1199. border: 4px solid #9dbceb;
  1200. color: #566fff;
  1201. }
  1202. .questions_more:hover > i {
  1203. background: url(../list_images/xinmei_operate/icon4.png) no-repeat center;
  1204. position: relative;
  1205. top: -1px;
  1206. left: 1px;
  1207. }