main.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996
  1. @charset "UTF-8";
  2. html,
  3. body,
  4. div,
  5. span,
  6. applet,
  7. object,
  8. iframe,
  9. h1,
  10. h2,
  11. h3,
  12. h4,
  13. h5,
  14. h6,
  15. p,
  16. blockquote,
  17. pre,
  18. a,
  19. abbr,
  20. acronym,
  21. address,
  22. big,
  23. cite,
  24. code,
  25. del,
  26. dfn,
  27. em,
  28. img,
  29. ins,
  30. kbd,
  31. q,
  32. s,
  33. samp,
  34. small,
  35. strike,
  36. strong,
  37. sub,
  38. sup,
  39. tt,
  40. var,
  41. b,
  42. u,
  43. i,
  44. center,
  45. dl,
  46. dt,
  47. dd,
  48. ol,
  49. ul,
  50. li,
  51. fieldset,
  52. form,
  53. label,
  54. legend,
  55. table,
  56. caption,
  57. tbody,
  58. tfoot,
  59. thead,
  60. tr,
  61. th,
  62. td,
  63. article,
  64. aside,
  65. canvas,
  66. details,
  67. embed,
  68. figure,
  69. figcaption,
  70. footer,
  71. header,
  72. hgroup,
  73. menu,
  74. nav,
  75. output,
  76. ruby,
  77. section,
  78. summary,
  79. time,
  80. mark,
  81. audio,
  82. video {
  83. margin: 0;
  84. padding: 0;
  85. border: 0;
  86. font-size: 100%;
  87. font: inherit;
  88. vertical-align: baseline; }
  89. /* HTML5 display-role reset for older browsers */
  90. article,
  91. aside,
  92. details,
  93. figcaption,
  94. figure,
  95. footer,
  96. header,
  97. hgroup,
  98. menu,
  99. nav,
  100. section {
  101. display: block; }
  102. ol,
  103. ul {
  104. list-style: none; }
  105. blockquote,
  106. q {
  107. quotes: none; }
  108. blockquote:before,
  109. blockquote:after,
  110. q:before,
  111. q:after {
  112. content: '';
  113. content: none; }
  114. table {
  115. border-collapse: collapse;
  116. border-spacing: 0; }
  117. /******x reset end*****/
  118. * {
  119. box-sizing: border-box;
  120. -ms-box-sizing: border-box;
  121. -webkit-box-sizing: border-box;
  122. -moz-box-sizing: border-box;
  123. margin: 0;
  124. padding: 0;
  125. border: 0; }
  126. html,
  127. body {
  128. -webkit-overflow-scrolling: touch; }
  129. a {
  130. background-color: transparent;
  131. outline: 0;
  132. text-decoration: none;
  133. -webkit-tap-highlight-color: transparent;
  134. cursor: pointer; }
  135. .clear {
  136. clear: both;
  137. *zoom: 1; }
  138. .cf:after {
  139. font-size: 0;
  140. display: block;
  141. visibility: hidden;
  142. clear: both;
  143. height: 0;
  144. content: ''; }
  145. .center-block {
  146. display: block;
  147. margin-left: auto;
  148. margin-right: auto; }
  149. /*显示类*/
  150. .hide,
  151. .hidden {
  152. display: none; }
  153. .show {
  154. display: block; }
  155. .invisible {
  156. visibility: hidden; }
  157. .visible {
  158. visibility: visible; }
  159. .block {
  160. display: block; }
  161. .inline {
  162. display: inline; }
  163. .inlineblock,
  164. .inline-block {
  165. display: inline-block;
  166. *display: inline;
  167. *zoom: 1; }
  168. /*位置浮动类*/
  169. .float-left,
  170. .pull-left {
  171. float: left; }
  172. .float-right,
  173. .pull-right {
  174. float: right; }
  175. .vertical-middle {
  176. vertical-align: middle; }
  177. .over-hide,
  178. .over-hidden {
  179. overflow: hidden; }
  180. .table {
  181. display: table; }
  182. .table-cell {
  183. display: table-cell; }
  184. .scroll-auto,
  185. .scrollauto {
  186. overflow: auto; }
  187. .scroll {
  188. overflow: auto; }
  189. /*内联文本类*/
  190. .text-center {
  191. text-align: center; }
  192. .text-left {
  193. text-align: left; }
  194. .text-right {
  195. text-align: right; }
  196. .text-justify {
  197. text-align: justify !important; }
  198. .text-truncate {
  199. overflow: hidden;
  200. -o-text-overflow: ellipsis;
  201. text-overflow: ellipsis;
  202. white-space: nowrap; }
  203. .text-nowrap,
  204. .nowrap {
  205. white-space: nowrap; }
  206. .breakall,
  207. .break-all,
  208. .text-break {
  209. word-break: break-all; }
  210. .text-bold,
  211. .font-bold {
  212. font-weight: bold !important; }
  213. .text-lowercase,
  214. .lowercase {
  215. text-transform: lowercase !important; }
  216. .text-uppercase,
  217. .uppercase {
  218. text-transform: uppercase !important; }
  219. .text-capitalize {
  220. text-transform: capitalize !important; }
  221. .text-white {
  222. color: #fff !important; }
  223. .text-muted {
  224. color: #636c72 !important; }
  225. .hover-transition {
  226. -webkit-transition: all 0.35s ease;
  227. -o-transition: all 0.35s ease;
  228. -moz-transition: all 0.35s ease;
  229. transition: all 0.35s ease; }
  230. body {
  231. font-family: "PingFang SC", "PingHei", "STHeitiSC-Light", "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "microsoft yahei", "SimHei", "tahoma", "Arial", "Verdana", "sans-serif"; }
  232. textarea,
  233. input {
  234. outline: none; }
  235. .voice_active:after {
  236. content: ' ';
  237. width: .893333rem;
  238. height: .893333rem;
  239. display: block;
  240. background: url("../images/voice_active.png");
  241. -moz-background-size: 100% 100%;
  242. background-size: 100% 100%;
  243. position: absolute;
  244. z-index: 100;
  245. top: 0;
  246. left: 0; }
  247. .poster-mode .qrcode-box p {
  248. overflow: hidden;
  249. -o-text-overflow: ellipsis;
  250. text-overflow: ellipsis;
  251. white-space: nowrap; }
  252. * {
  253. margin: 0;
  254. padding: 0;
  255. -webkit-box-sizing: border-box;
  256. -moz-box-sizing: border-box;
  257. box-sizing: border-box;
  258. -webkit-tap-highlight-color: transparent; }
  259. select {
  260. -webkit-appearance: none;
  261. -moz-appearance: none;
  262. appearance: none; }
  263. body {
  264. line-height: 1.5;
  265. color: #151f3a; }
  266. li {
  267. list-style: none; }
  268. a {
  269. text-decoration: none; }
  270. img {
  271. max-width: 100%;
  272. vertical-align: top; }
  273. .hide {
  274. display: none !important; }
  275. .show {
  276. display: show !important; }
  277. .bold {
  278. font-weight: bold; }
  279. .js-an {
  280. display: none !important;
  281. -webkit-animation-name: none !important;
  282. -moz-animation-name: none !important;
  283. -o-animation-name: none !important;
  284. animation-name: none !important; }
  285. .animated {
  286. -webkit-animation-duration: .6s;
  287. -moz-animation-duration: .6s;
  288. -o-animation-duration: .6s;
  289. animation-duration: .6s;
  290. -webkit-transform: translate3d(0, 0, 0);
  291. -moz-transform: translate3d(0, 0, 0);
  292. transform: translate3d(0, 0, 0); }
  293. .origin-tc {
  294. -webkit-transform-origin: top center;
  295. -moz-transform-origin: top center;
  296. -ms-transform-origin: top center;
  297. -o-transform-origin: top center;
  298. transform-origin: top center; }
  299. .origin-rb {
  300. -webkit-transform-origin: right bottom;
  301. -moz-transform-origin: right bottom;
  302. -ms-transform-origin: right bottom;
  303. -o-transform-origin: right bottom;
  304. transform-origin: right bottom; }
  305. .origin-lb {
  306. -webkit-transform-origin: left center;
  307. -moz-transform-origin: left center;
  308. -ms-transform-origin: left center;
  309. -o-transform-origin: left center;
  310. transform-origin: left center; }
  311. .origin-cb {
  312. -webkit-transform-origin: center bottom;
  313. -moz-transform-origin: center bottom;
  314. -ms-transform-origin: center bottom;
  315. -o-transform-origin: center bottom;
  316. transform-origin: center bottom; }
  317. .origin-cc {
  318. -webkit-transform-origin: center center;
  319. -moz-transform-origin: center center;
  320. -ms-transform-origin: center center;
  321. -o-transform-origin: center center;
  322. transform-origin: center center; }
  323. .iteration {
  324. -webkit-animation-iteration-count: infinite;
  325. -moz-animation-iteration-count: infinite;
  326. -o-animation-iteration-count: infinite;
  327. animation-iteration-count: infinite; }
  328. .ease-in {
  329. -webkit-animation-timing-function: ease-in;
  330. -moz-animation-timing-function: ease-in;
  331. -o-animation-timing-function: ease-in;
  332. animation-timing-function: ease-in; }
  333. .ease-out {
  334. -webkit-animation-timing-function: ease-out;
  335. -moz-animation-timing-function: ease-out;
  336. -o-animation-timing-function: ease-out;
  337. animation-timing-function: ease-out; }
  338. .delay0 {
  339. -webkit-animation-delay: 0s;
  340. -moz-animation-delay: 0s;
  341. -o-animation-delay: 0s;
  342. animation-delay: 0s; }
  343. .delay1 {
  344. -webkit-animation-delay: 0.2s;
  345. -moz-animation-delay: 0.2s;
  346. -o-animation-delay: 0.2s;
  347. animation-delay: 0.2s; }
  348. .delay2 {
  349. -webkit-animation-delay: 0.4s;
  350. -moz-animation-delay: 0.4s;
  351. -o-animation-delay: 0.4s;
  352. animation-delay: 0.4s; }
  353. .delay3 {
  354. -webkit-animation-delay: 0.6s;
  355. -moz-animation-delay: 0.6s;
  356. -o-animation-delay: 0.6s;
  357. animation-delay: 0.6s; }
  358. .delay4 {
  359. -webkit-animation-delay: 0.8s;
  360. -moz-animation-delay: 0.8s;
  361. -o-animation-delay: 0.8s;
  362. animation-delay: 0.8s; }
  363. .delay5 {
  364. -webkit-animation-delay: 1s;
  365. -moz-animation-delay: 1s;
  366. -o-animation-delay: 1s;
  367. animation-delay: 1s; }
  368. .delay6 {
  369. -webkit-animation-delay: 1.2s;
  370. -moz-animation-delay: 1.2s;
  371. -o-animation-delay: 1.2s;
  372. animation-delay: 1.2s; }
  373. .delay7 {
  374. -webkit-animation-delay: 1.4s;
  375. -moz-animation-delay: 1.4s;
  376. -o-animation-delay: 1.4s;
  377. animation-delay: 1.4s; }
  378. .delay8 {
  379. -webkit-animation-delay: 1.6s;
  380. -moz-animation-delay: 1.6s;
  381. -o-animation-delay: 1.6s;
  382. animation-delay: 1.6s; }
  383. .delay9 {
  384. -webkit-animation-delay: 1.8s;
  385. -moz-animation-delay: 1.8s;
  386. -o-animation-delay: 1.8s;
  387. animation-delay: 1.8s; }
  388. .delay10 {
  389. -webkit-animation-delay: 2s;
  390. -moz-animation-delay: 2s;
  391. -o-animation-delay: 2s;
  392. animation-delay: 2s; }
  393. .delay11 {
  394. -webkit-animation-delay: 2.2s;
  395. -moz-animation-delay: 2.2s;
  396. -o-animation-delay: 2.2s;
  397. animation-delay: 2.2s; }
  398. .delay12 {
  399. -webkit-animation-delay: 2.4s;
  400. -moz-animation-delay: 2.4s;
  401. -o-animation-delay: 2.4s;
  402. animation-delay: 2.4s; }
  403. .delay13 {
  404. -webkit-animation-delay: 2.6s;
  405. -moz-animation-delay: 2.6s;
  406. -o-animation-delay: 2.6s;
  407. animation-delay: 2.6s; }
  408. .delay14 {
  409. -webkit-animation-delay: 2.8s;
  410. -moz-animation-delay: 2.8s;
  411. -o-animation-delay: 2.8s;
  412. animation-delay: 2.8s; }
  413. .delay15 {
  414. -webkit-animation-delay: 3s;
  415. -moz-animation-delay: 3s;
  416. -o-animation-delay: 3s;
  417. animation-delay: 3s; }
  418. .time0 {
  419. -webkit-animation-duration: 0s;
  420. -moz-animation-duration: 0s;
  421. -o-animation-duration: 0s;
  422. animation-duration: 0s; }
  423. .time1 {
  424. -webkit-animation-duration: 0.2s;
  425. -moz-animation-duration: 0.2s;
  426. -o-animation-duration: 0.2s;
  427. animation-duration: 0.2s; }
  428. .time2 {
  429. -webkit-animation-duration: 0.4s;
  430. -moz-animation-duration: 0.4s;
  431. -o-animation-duration: 0.4s;
  432. animation-duration: 0.4s; }
  433. .time3 {
  434. -webkit-animation-duration: 0.6s;
  435. -moz-animation-duration: 0.6s;
  436. -o-animation-duration: 0.6s;
  437. animation-duration: 0.6s; }
  438. .time4 {
  439. -webkit-animation-duration: 0.8s;
  440. -moz-animation-duration: 0.8s;
  441. -o-animation-duration: 0.8s;
  442. animation-duration: 0.8s; }
  443. .time5 {
  444. -webkit-animation-duration: 1s;
  445. -moz-animation-duration: 1s;
  446. -o-animation-duration: 1s;
  447. animation-duration: 1s; }
  448. .time6 {
  449. -webkit-animation-duration: 1.2s;
  450. -moz-animation-duration: 1.2s;
  451. -o-animation-duration: 1.2s;
  452. animation-duration: 1.2s; }
  453. .time7 {
  454. -webkit-animation-duration: 1.4s;
  455. -moz-animation-duration: 1.4s;
  456. -o-animation-duration: 1.4s;
  457. animation-duration: 1.4s; }
  458. .time8 {
  459. -webkit-animation-duration: 1.6s;
  460. -moz-animation-duration: 1.6s;
  461. -o-animation-duration: 1.6s;
  462. animation-duration: 1.6s; }
  463. .time9 {
  464. -webkit-animation-duration: 1.8s;
  465. -moz-animation-duration: 1.8s;
  466. -o-animation-duration: 1.8s;
  467. animation-duration: 1.8s; }
  468. .time10 {
  469. -webkit-animation-duration: 2s;
  470. -moz-animation-duration: 2s;
  471. -o-animation-duration: 2s;
  472. animation-duration: 2s; }
  473. .time11 {
  474. -webkit-animation-duration: 2.2s;
  475. -moz-animation-duration: 2.2s;
  476. -o-animation-duration: 2.2s;
  477. animation-duration: 2.2s; }
  478. .time12 {
  479. -webkit-animation-duration: 2.4s;
  480. -moz-animation-duration: 2.4s;
  481. -o-animation-duration: 2.4s;
  482. animation-duration: 2.4s; }
  483. .time13 {
  484. -webkit-animation-duration: 2.6s;
  485. -moz-animation-duration: 2.6s;
  486. -o-animation-duration: 2.6s;
  487. animation-duration: 2.6s; }
  488. .time14 {
  489. -webkit-animation-duration: 2.8s;
  490. -moz-animation-duration: 2.8s;
  491. -o-animation-duration: 2.8s;
  492. animation-duration: 2.8s; }
  493. .time15 {
  494. -webkit-animation-duration: 3s;
  495. -moz-animation-duration: 3s;
  496. -o-animation-duration: 3s;
  497. animation-duration: 3s; }
  498. .clearfix:after {
  499. content: ".";
  500. display: block;
  501. height: 0;
  502. clear: both;
  503. visibility: hidden; }
  504. .secret-box {
  505. position: fixed;
  506. top: 0;
  507. left: 0;
  508. width: 100%;
  509. height: 100vh;
  510. background: url(../img/loading/bg.jpg) no-repeat 0 0/cover;
  511. display: none;
  512. z-index: 1001; }
  513. .secret-box img {
  514. position: absolute;
  515. top: 50%;
  516. -webkit-transform: translate(0, -50%);
  517. -moz-transform: translate(0, -50%);
  518. -ms-transform: translate(0, -50%);
  519. -o-transform: translate(0, -50%);
  520. transform: translate(0, -50%); }
  521. .warp {
  522. width: 10rem;
  523. margin: 0 auto;
  524. position: relative;
  525. height: 100vh;
  526. background: url(../img/loading/bg.jpg) no-repeat 0 0/cover; }
  527. .loading {
  528. position: fixed;
  529. top: 0;
  530. left: 50%;
  531. width: 10rem;
  532. height: 100vh;
  533. margin-left: -5rem;
  534. background: url(../img/loading/bg.jpg) no-repeat 0 0/cover;
  535. z-index: 100;
  536. /*display: none;*/ }
  537. .loading .curtain-box {
  538. position: absolute;
  539. top: 0.89062rem;
  540. left: 50%;
  541. width: 10.42188rem;
  542. height: 14.04688rem;
  543. margin-left: -5.21094rem;
  544. background: url(../img/loading/bg2.png) no-repeat 0 0/100% auto; }
  545. .loading .curtain-box .txt {
  546. position: absolute;
  547. top: 5.3125rem;
  548. left: 50%;
  549. width: 2.5625rem;
  550. margin-left: -1.28125rem; }
  551. .loading .curtain-box .loading-bar {
  552. position: absolute;
  553. top: 10.625rem;
  554. left: 50%;
  555. width: 7.5rem;
  556. margin-left: -3.75rem; }
  557. .loading .curtain-box .loading-bar .load-txt {
  558. font-size: 0.53125rem;
  559. color: #1e0502;
  560. text-align: center;
  561. text-shadow: 2px 2px 0 #b9b988;
  562. margin-bottom: 0.78125rem; }
  563. .loading .curtain-box .loading-bar .bar {
  564. width: 100%;
  565. height: 0.26562rem;
  566. border: 1px solid rgba(255, 255, 255, 0.5);
  567. -webkit-border-radius: 0.26562rem;
  568. -moz-border-radius: 0.26562rem;
  569. border-radius: 0.26562rem;
  570. white-space: nowrap; }
  571. .loading .curtain-box .loading-bar .bar span {
  572. width: 0;
  573. height: 100%;
  574. background: -webkit-gradient(linear, left top, right bottom, from(#00489d), to(#3478c9));
  575. background: -webkit-linear-gradient(top left, #00489d, #3478c9);
  576. background: -moz-linear-gradient(top left, #00489d, #3478c9);
  577. background: -o-linear-gradient(top left, #00489d, #3478c9);
  578. background: linear-gradient(to bottom right, #00489d, #3478c9);
  579. display: block;
  580. position: relative; }
  581. .loading .curtain-box .loading-bar .bar .icon-load {
  582. position: absolute;
  583. right: -1.40625rem;
  584. top: 50%;
  585. width: 2.15625rem;
  586. height: 1.04688rem;
  587. margin-top: -0.52344rem;
  588. background: url(../img/loading/loading_icon.png) no-repeat 0 0/100% auto; }
  589. .select-dish-box {
  590. position: absolute;
  591. top: 1.17188rem;
  592. left: 50%;
  593. width: 10rem;
  594. height: 15.53125rem;
  595. margin-left: -5rem;
  596. background: url(../img/menu_bg.png) no-repeat 0 0/100% auto;
  597. padding-top: 2.34375rem; }
  598. .select-dish-box .tt {
  599. width: 3.85938rem;
  600. margin: 0 auto;
  601. display: block; }
  602. .select-dish-box .list {
  603. margin: 1.09375rem auto 0;
  604. width: 3.82812rem; }
  605. .select-dish-box .list .item {
  606. margin-bottom: 0.9375rem; }
  607. .select-dish-box .list .item.active {
  608. -webkit-filter: grayscale(50%);
  609. filter: grayscale(50%); }
  610. .select-dish-box .confirm {
  611. width: 2.8125rem;
  612. height: 0.92188rem;
  613. margin: 0 auto;
  614. background: url(../img/select_menu_btn.png) no-repeat 0 0/100% auto;
  615. display: none; }
  616. .game-box {
  617. position: absolute;
  618. top: 0;
  619. left: 0;
  620. width: 100%;
  621. height: 100vh;
  622. z-index: 1;
  623. display: none; }
  624. .poster-mode {
  625. position: fixed;
  626. top: 0;
  627. left: 50%;
  628. width: 10rem;
  629. height: 100vh;
  630. margin-left: -5rem;
  631. z-index: 100;
  632. background: #000;
  633. display: none; }
  634. .poster-mode.poster-bg1 {
  635. background: url(../img/poster/bg1.jpg) no-repeat top center/cover; }
  636. .poster-mode.poster-bg2 {
  637. background: url(../img/poster/bg2.jpg) no-repeat top center/cover; }
  638. .poster-mode.poster-bg3 {
  639. background: url(../img/poster/bg3.jpg) no-repeat top center/cover; }
  640. .poster-mode .logo {
  641. position: absolute;
  642. top: 0.3125rem;
  643. left: 0.46875rem;
  644. width: 1.5625rem; }
  645. .poster-mode .poster-img {
  646. position: absolute;
  647. bottom: 0;
  648. left: 50%;
  649. width: 8.26562rem;
  650. margin-left: -4.13281rem; }
  651. .poster-mode .leads-box {
  652. position: absolute;
  653. top: 1.65625rem;
  654. left: 50%;
  655. width: 9.15625rem;
  656. height: 3.57812rem;
  657. margin-left: -4.57812rem;
  658. background: url(../img/leads_bg.png) no-repeat top center/100% auto;
  659. padding-top: 0.46875rem;
  660. padding-left: 2.65625rem;
  661. padding-right: 1.875rem; }
  662. .poster-mode .leads-box .form-group {
  663. border-bottom: 1px solid #c19e83; }
  664. .poster-mode .leads-box .form-group input , .poster-mode .leads-box .form-group .msg {
  665. width: 100%;
  666. height: 0.78125rem;
  667. line-height: 0.78125rem;
  668. font-size: 0.375rem;
  669. font-size: 20x;
  670. color: #c19e83;
  671. background: transparent; }
  672. .poster-mode .leads-box .user-info {
  673. position: absolute;
  674. right: 0.3125rem;
  675. top: 50%;
  676. -webkit-transform: translate(0, -50%);
  677. -moz-transform: translate(0, -50%);
  678. -ms-transform: translate(0, -50%);
  679. -o-transform: translate(0, -50%);
  680. transform: translate(0, -50%); }
  681. .poster-mode .leads-box .user-info .headimg-box {
  682. width: 1.25rem; }
  683. .poster-mode .leads-box .user-info p {
  684. font-size: 0.3125rem;
  685. color: #743d2f;
  686. margin-top: 0.15625rem; }
  687. .poster-mode .leads-box .submit {
  688. position: absolute;
  689. bottom: -0.15625rem;
  690. left: 50%;
  691. width: 3.04688rem;
  692. margin-left: -1.52344rem; }
  693. .poster-mode .leads-box .pro {
  694. position: absolute;
  695. top: 50%;
  696. left: 0.46875rem;
  697. width: 1.82812rem;
  698. -webkit-transform: translate(0, -50%);
  699. -moz-transform: translate(0, -50%);
  700. -ms-transform: translate(0, -50%);
  701. -o-transform: translate(0, -50%);
  702. transform: translate(0, -50%); }
  703. .poster-mode .qrcode-box {
  704. position: absolute;
  705. bottom: 1.92188rem;
  706. right: 0.46875rem;
  707. width: 1.40625rem; }
  708. .poster-mode .qrcode-box p {
  709. font-size: 0.21875rem;
  710. color: #fff;
  711. text-align: center; }
  712. .poster-mode .replay-btn {
  713. position: absolute;
  714. bottom: 0.70312rem;
  715. left: 1.48438rem;
  716. width: 2.8125rem; }
  717. .poster-mode .secret-btn {
  718. position: absolute;
  719. bottom: 0.70312rem;
  720. right: 1.48438rem;
  721. width: 2.8125rem; }
  722. .shake-mode {
  723. position: fixed;
  724. top: 0;
  725. left: 0;
  726. width: 100%;
  727. height: 100vh;
  728. z-index: 100;
  729. background: rgba(0, 0, 0, 0.6);
  730. display: none; }
  731. .shake-mode .shake-dialog {
  732. position: absolute;
  733. top: 40%;
  734. left: 50%;
  735. width: 6.28125rem;
  736. -webkit-transform: translate(-50%, -50%);
  737. -moz-transform: translate(-50%, -50%);
  738. -ms-transform: translate(-50%, -50%);
  739. -o-transform: translate(-50%, -50%);
  740. transform: translate(-50%, -50%);
  741. padding-top: 0.78125rem; }
  742. .shake-mode .shake-dialog .icon {
  743. position: absolute;
  744. top: 5.625rem;
  745. left: 50%;
  746. width: 2.23438rem;
  747. margin-left: -1.11719rem; }
  748. .shake-mode .shake-dialog .fire {
  749. width: 5.98438rem;
  750. height: 10.54688rem;
  751. background: url(../img/fire.png) no-repeat 0 0;
  752. -moz-background-size: 600% 100%;
  753. background-size: 600% 100%;
  754. -webkit-animation: fire 1.5s steps(5) infinite;
  755. -moz-animation: fire 1.5s steps(5) infinite;
  756. -o-animation: fire 1.5s steps(5) infinite;
  757. animation: fire 1.5s steps(5) infinite; }
  758. .shake-mode .shake-dialog .txt {
  759. position: absolute;
  760. top: 8.35938rem;
  761. left: 50%;
  762. width: 4.96875rem;
  763. margin-left: -2.48438rem; }
  764. .anim-time {
  765. -webkit-animation-duration: 0.5 !important;
  766. -moz-animation-duration: 0.5 !important;
  767. -o-animation-duration: 0.5 !important;
  768. animation-duration: 0.5 !important; }
  769. @-webkit-keyframes fire {
  770. 0% {
  771. background-position: 0 0; }
  772. 100% {
  773. background-position: 100% 0; } }
  774. @-moz-keyframes fire {
  775. 0% {
  776. background-position: 0 0; }
  777. 100% {
  778. background-position: 100% 0; } }
  779. @-o-keyframes fire {
  780. 0% {
  781. background-position: 0 0; }
  782. 100% {
  783. background-position: 100% 0; } }
  784. @keyframes fire {
  785. 0% {
  786. background-position: 0 0; }
  787. 100% {
  788. background-position: 100% 0; } }
  789. .anim-light {
  790. -webkit-animation: light 2s ease-out infinite;
  791. -moz-animation: light 2s ease-out infinite;
  792. -o-animation: light 2s ease-out infinite;
  793. animation: light 2s ease-out infinite; }
  794. @-webkit-keyframes light {
  795. 0%, 100% {
  796. opacity: 1; }
  797. 50% {
  798. opacity: 0.7; } }
  799. @-moz-keyframes light {
  800. 0%, 100% {
  801. opacity: 1; }
  802. 50% {
  803. opacity: 0.7; } }
  804. @-o-keyframes light {
  805. 0%, 100% {
  806. opacity: 1; }
  807. 50% {
  808. opacity: 0.7; } }
  809. @keyframes light {
  810. 0%, 100% {
  811. opacity: 1; }
  812. 50% {
  813. opacity: 0.7; } }
  814. .anim-btn {
  815. -webkit-animation: btn 1s ease infinite;
  816. -moz-animation: btn 1s ease infinite;
  817. -o-animation: btn 1s ease infinite;
  818. animation: btn 1s ease infinite; }
  819. @-webkit-keyframes btn {
  820. 0%, 100% {
  821. -webkit-transform: scale(1, 1);
  822. transform: scale(1, 1); }
  823. 15% {
  824. -webkit-transform: scale(1.1, 1.1);
  825. transform: scale(1.1, 1.1); }
  826. 20% {
  827. -webkit-transform: scale(1.1, 1.1);
  828. transform: scale(1.1, 1.1); }
  829. 35% {
  830. -webkit-transform: scale(1.2, 1.2);
  831. transform: scale(1.2, 1.2); } }
  832. @-moz-keyframes btn {
  833. 0%, 100% {
  834. -moz-transform: scale(1, 1);
  835. transform: scale(1, 1); }
  836. 15% {
  837. -moz-transform: scale(1.1, 1.1);
  838. transform: scale(1.1, 1.1); }
  839. 20% {
  840. -moz-transform: scale(1.1, 1.1);
  841. transform: scale(1.1, 1.1); }
  842. 35% {
  843. -moz-transform: scale(1.2, 1.2);
  844. transform: scale(1.2, 1.2); } }
  845. @-o-keyframes btn {
  846. 0%, 100% {
  847. -o-transform: scale(1, 1);
  848. transform: scale(1, 1); }
  849. 15% {
  850. -o-transform: scale(1.1, 1.1);
  851. transform: scale(1.1, 1.1); }
  852. 20% {
  853. -o-transform: scale(1.1, 1.1);
  854. transform: scale(1.1, 1.1); }
  855. 35% {
  856. -o-transform: scale(1.2, 1.2);
  857. transform: scale(1.2, 1.2); } }
  858. @keyframes btn {
  859. 0%, 100% {
  860. -webkit-transform: scale(1, 1);
  861. -moz-transform: scale(1, 1);
  862. -o-transform: scale(1, 1);
  863. transform: scale(1, 1); }
  864. 15% {
  865. -webkit-transform: scale(1.1, 1.1);
  866. -moz-transform: scale(1.1, 1.1);
  867. -o-transform: scale(1.1, 1.1);
  868. transform: scale(1.1, 1.1); }
  869. 20% {
  870. -webkit-transform: scale(1.1, 1.1);
  871. -moz-transform: scale(1.1, 1.1);
  872. -o-transform: scale(1.1, 1.1);
  873. transform: scale(1.1, 1.1); }
  874. 35% {
  875. -webkit-transform: scale(1.2, 1.2);
  876. -moz-transform: scale(1.2, 1.2);
  877. -o-transform: scale(1.2, 1.2);
  878. transform: scale(1.2, 1.2); } }