pagemm.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. /*============订购=============*/
  2. .dg_body {
  3. background: -webkit-linear-gradient(top, #26026e, #7006d8);
  4. }
  5. .info_banner img {
  6. display: block;
  7. width: 100%;
  8. }
  9. .info_main {
  10. position: relative;
  11. z-index: 1;
  12. width: 94%;
  13. margin: 0 auto;
  14. background: #FFF;
  15. padding: 1rem;
  16. box-sizing: border-box;
  17. }
  18. .info_main h2 {
  19. font-size: 0.875rem;
  20. color: #2d2d2d;
  21. text-align: center;
  22. }
  23. .info_main h2 span {
  24. color: #fb6b63;
  25. }
  26. .info_main p {
  27. color: #2d2d2d;
  28. font-size: 0.875rem;
  29. text-align: center;
  30. }
  31. .info_data li {
  32. position: relative;
  33. margin-top: 1rem;
  34. /*overflow:hidden;*/
  35. font-size: 0.75rem;
  36. color: #5e5e5e;
  37. }
  38. .info_data li.ck {
  39. text-align: left;
  40. }
  41. .info_data li.btn {
  42. margin-top: 3rem;
  43. }
  44. .info_data li .text_case {
  45. float: left;
  46. width: 50%;
  47. position: relative;
  48. }
  49. .info_data li .input_100 {
  50. width: 100%;
  51. height: 2.5rem;
  52. padding: 0.5rem;
  53. box-sizing: border-box;
  54. border: 1px #bfbfbf solid;
  55. border-radius: 5px;
  56. background: #FFF;
  57. font-size: 0.875rem;
  58. -webkit-appearance: none;
  59. }
  60. .info_data li .input_50 {
  61. height: 2.5rem;
  62. width: 100%;
  63. padding: 0.5rem;
  64. box-sizing: border-box;
  65. border: 1px #bfbfbf solid;
  66. border-radius: 5px;
  67. background: #FFF;
  68. font-size: 0.875rem;
  69. -webkit-appearance: none;
  70. }
  71. .info_data li .input_100.active,
  72. .info_data li .input_50.active {
  73. border: 1px #3274e3 solid;
  74. }
  75. .info_data li .send_btn {
  76. float: right;
  77. display: block;
  78. width: 48%;
  79. height: 2.5rem;
  80. line-height: 2.5rem;
  81. /*padding:0.4rem 0.5rem;*/
  82. box-sizing: border-box;
  83. border: 1px #da4f33 solid;
  84. border-radius: 5px;
  85. background: #FFF;
  86. font-size: 0.875rem;
  87. color: #da4f33;
  88. text-align: center;
  89. }
  90. .info_data li .again_send_btn {
  91. float: right;
  92. display: block;
  93. width: 48%;
  94. height: 2.5rem;
  95. line-height: 2.5rem;
  96. /*padding:0.4rem 0.5rem;*/
  97. box-sizing: border-box;
  98. border: 1px #bfbfbf solid;
  99. border-radius: 5px;
  100. background: #FFF;
  101. font-size: 0.875rem;
  102. color: #bfbfbf;
  103. text-align: center;
  104. }
  105. .info_data li .again_send_btn .number {
  106. font-style: normal;
  107. }
  108. .info_data li .chose_no {
  109. background: url(../images/chose_no.png) no-repeat left center;
  110. background-size: 0.9rem;
  111. padding-left: 1.4rem;
  112. }
  113. .info_data li .chose_yes {
  114. background: url(../images/chose_yes.png) no-repeat left center;
  115. background-size: 0.9rem;
  116. padding-left: 1.4rem;
  117. }
  118. .info_data li .red_btn {
  119. display: block;
  120. width: 100%;
  121. height: 3rem;
  122. background: -webkit-linear-gradient(top, #26026e, #7006d8);
  123. /*background: url(../images/btn_bg.png) no-repeat;*/
  124. background-size: 100% 3rem;
  125. font-size: 1.2rem;
  126. color: #FFF;
  127. text-align: center;
  128. border: none;
  129. text-shadow: 0 2px 0 #E53B32;
  130. }
  131. .info_data li .warning {
  132. position: absolute;
  133. top: 0.8rem;
  134. right: 0;
  135. background: #FFFFFF;
  136. box-shadow: 0 2px 10px 0 rgba(91, 91, 91, 0.50);
  137. border-radius: 6px;
  138. font-size: 0.75rem;
  139. color: #EB3829;
  140. padding: 0.5rem;
  141. }
  142. .info_data li .warning #triangle-topleft {
  143. position: absolute;
  144. top: 3px;
  145. left: -14px;
  146. width: 14px;
  147. height: 14px;
  148. background: url(../images/arrow.png) no-repeat;
  149. }
  150. .info_data li .input_100.warn,
  151. .info_data li .input_50.warn {
  152. /*border: 1px #da4f33 solid;*/
  153. }
  154. .info_data li p {
  155. text-align: center;
  156. }
  157. .info_data li p a {
  158. color: #3274e3;
  159. font-size: 0.875rem
  160. }
  161. .info_content,
  162. .info_notice {
  163. margin-top: 3rem;
  164. }
  165. .info_content fieldset,
  166. .info_notice fieldset {
  167. border-left: none;
  168. border-bottom: none;
  169. border-right: none;
  170. border-top: 1px #e6e6e6 solid;
  171. }
  172. .info_content fieldset legend,
  173. .info_notice fieldset legend {
  174. color: #4e4e4e;
  175. text-align: center;
  176. font-size: 0.875rem;
  177. background: #FFF;
  178. padding: 0 1rem;
  179. }
  180. .info_content ul li {
  181. font-size: 0.875rem;
  182. color: #000000;
  183. overflow: hidden;
  184. margin-top: 0.5rem;
  185. }
  186. .info_content ul li.f_red {
  187. color: #e8705e;
  188. margin-top: 1rem;
  189. font-weight: bold;
  190. }
  191. .info_content ul li span {
  192. display: block;
  193. float: left;
  194. width: 1rem;
  195. height: 1rem;
  196. border-radius: 50%;
  197. background: #ea7868;
  198. font-size: 0.75rem;
  199. color: #FFF;
  200. text-align: center;
  201. line-height: 1rem;
  202. margin-top: 0.2rem;
  203. }
  204. .info_content ul li p {
  205. margin-left: 1.5rem;
  206. }
  207. .info_notice ul li {
  208. font-size: 0.75rem;
  209. color: #6d6d6d;
  210. margin-top: 0.5rem;
  211. text-align: justify;
  212. }
  213. .copyright {
  214. padding: 0.5rem 0;
  215. text-align: center;
  216. color: #fff;
  217. font-size: 0.75rem;
  218. }
  219. /*遮罩*/
  220. .layer {
  221. width: 100%;
  222. height: 100%;
  223. position: fixed;
  224. z-index: 999;
  225. top: 0;
  226. left: 0;
  227. }
  228. .layer .mask {
  229. width: 100%;
  230. height: 100%;
  231. position: absolute;
  232. z-index: 8;
  233. background: #000;
  234. opacity: 0.7;
  235. top: 0;
  236. left: 0;
  237. }
  238. .close {
  239. position: absolute;
  240. right: 8%;
  241. top: 7%;
  242. width: 8%;
  243. z-index: 9;
  244. }
  245. .close img {
  246. display: block;
  247. width: 100%;
  248. }
  249. .pop_box {
  250. position: absolute;
  251. width: 90%;
  252. left: 5%;
  253. top: 15%;
  254. z-index: 10;
  255. }
  256. .pop_box .info {
  257. width: 100%;
  258. background: #FFF;
  259. border-radius: 6px;
  260. box-sizing: border-box;
  261. padding-bottom: 1rem;
  262. }
  263. .pop_box .info .head {
  264. background: -webkit-linear-gradient(top, #26026e, #7006d8);
  265. /*background: url(../images/pop_bg.png) no-repeat;*/
  266. width: 100%;
  267. background-size: 100%;
  268. border-radius: 6px 6px 0 0;
  269. padding: 2rem 0;
  270. }
  271. .pop_box .info .head h2 {
  272. color: #FFF;
  273. font-size: 1.2rem;
  274. font-weight: bold;
  275. text-align: center;
  276. }
  277. .pop_box .info .head h3 {
  278. color: #FFF;
  279. font-size: 0.875rem;
  280. font-weight: bold;
  281. text-align: center;
  282. padding-top: 0.5rem;
  283. }
  284. .pop_box .info .coupon p {
  285. color: #4E4E4E;
  286. font-size: 0.75rem;
  287. padding: 2rem 1rem;
  288. text-align: center;
  289. }
  290. .pop_box .info .coupon .red_btn {
  291. display: block;
  292. width: 90%;
  293. height: 3rem;
  294. background: -webkit-linear-gradient(top, #26026e, #7006d8);
  295. /*background: url(../images/btn_bg.png) no-repeat;*/
  296. background-size: 100% 3rem;
  297. font-size: 1.2rem;
  298. color: #FFF;
  299. text-align: center;
  300. border: none;
  301. text-shadow: 0 2px 0 #5832e5;
  302. margin: auto;
  303. }
  304. /*激活*/
  305. .info_main.jh h2 {
  306. text-align: left;
  307. }
  308. .info_notice.jh {
  309. margin-bottom: 3rem;
  310. }
  311. .info_notice.jh fieldset {
  312. margin-bottom: 3rem;
  313. }
  314. /*退订*/
  315. .info_main.td h2 {
  316. text-align: center;
  317. }
  318. .info_notice.td {
  319. margin-bottom: 1rem;
  320. margin-top: 1rem;
  321. }
  322. /*订购成功*/
  323. .dgcg_wrap {
  324. padding: 0 3%;
  325. text-align: center;
  326. }
  327. .dgcg_wrap .dgcg_logo {
  328. width: 40%;
  329. margin: 0 auto;
  330. padding: 5rem 0 3rem 0;
  331. }
  332. .dgcg_wrap .dgcg_logo img {
  333. width: 100%;
  334. }
  335. .dgcg_wrap h2 {
  336. font-size: 1.875rem;
  337. color: #222;
  338. letter-spacing: 1px;
  339. }
  340. .dgcg_wrap a {
  341. display: inline-block;
  342. margin-top: 3.5rem;
  343. margin-bottom: 8rem;
  344. color: #037bc7;
  345. }
  346. .dgcg_wrap .line {
  347. background: #f2f2f2;
  348. height: 2px;
  349. }
  350. .dgcg_wrap h4 {
  351. font-size: 1rem;
  352. color: #818181;
  353. margin-top: 1.5rem;
  354. }
  355. .dgcg_wrap h4 em {
  356. font-weight: bold;
  357. font-style: normal;
  358. color: #919191;
  359. padding: 0 0.5rem;
  360. }
  361. .dgcg_wrap p {
  362. color: #919191;
  363. font-size: 0.875rem;
  364. padding: 0.5rem;
  365. }