@charset "utf-8";
.user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.tap-highlight-color {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  overflow-y: scroll;
  font-family: '微软雅黑', "黑体";
  font-size: 12px;
  color: #000;
  background: #ffffff;
}
body {
  width: 100%;
  float: left;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
img {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul,
li {
  list-style: none outside none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before,
q:after {
  content: '';
}
abbr,
acronym {
  border: 0;
  font-variant: normal;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  outline: none;
  border: none;
  background: none;
}
input,
textarea,
select {
  *font-size: 100%;
}
textarea {
  resize: none;
}
legend {
  color: #000000;
}
a,
a:link {
  text-decoration: none;
}
a,
button,
input,
textarea {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.clearfix_a:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both;
}
.clearfix_a {
  *zoom: 1;
}
.clearfix_b:before,
.clearfix_b:after {
  content: "";
  display: table;
  line-height: 0;
}
.clearfix_b:after {
  clear: both;
}
.clearfix_b {
  *zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.inlineBlockFloat {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
}
html,
body {
  font-family: "微软雅黑,Helvetica";
  line-height: 1.3;
  color: #000000;
  background: #ffffff;
}
@media screen and (min-width: 320px) and (max-width: 375px) {
  html {
    font-size: 13px;
  }
}
@media screen and (min-width: 375px) and (max-width: 414px) {
  html {
    font-size: 15.234375px;
  }
}
@media screen and (min-width: 414px) and (max-width: 640px) {
  html {
    font-size: 16.81875px;
  }
}
@media screen and (min-width: 640px) and (max-width: 720px) {
  html {
    font-size: 26px;
  }
}
@media screen and (min-width: 720px) and (max-width: 750px) {
  html {
    font-size: 29.25px;
  }
}
@media screen and (min-width: 750px) and (max-width: 800px) {
  html {
    font-size: 30.46875px;
  }
}
@media screen and (min-width: 800px) {
  html {
    font-size: 32.5px;
  }
}
html {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  position: relative;
  overflow: hidden;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
a {
  display: block;
  outline: none;
}
input[type=number] {
  -moz-appearance: textfield
;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#page {
  position: relative;
  width: 100%;
  height: 100%;
}
#page #pageBody {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#page #pageBody .common {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#page #pageBody .common .swiper-container {
  height: 100%;
}
#page #pageBody .common .swiper-container .swiper-slide {
  -webkit-writing-mode: horizontal-tb;
  writing-mode: horizontal-tb;
  writing-mode: lr-tb;
}
#flowRule {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../images/img_001.jpg") center center no-repeat;
  background-size: cover;
  z-index: 999;
}
#flowRule .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#flowRule .layer.layer01 {
  z-index: 1;
}
#flowRule .layer.layer02 {
  z-index: 2;
}
#flowRule .layer01 {
  background: url("../images/img_015.png") center center no-repeat;
  background-size: 100% 100%;
}
#flowRule .layer02 .title {
  margin-left: -25.234375%;
  width: 50.46875%;
  position: absolute;
  left: 50%;
  top: 2.97619048%;
}
#flowRule .layer02 .content {
  margin-left: -38.90625%;
  width: 77.8125%;
  position: absolute;
  left: 50%;
  top: 14.88095238%;
}
#flowRule .layer02 .close {
  margin-left: -27.890625%;
  width: 55.78125%;
  position: absolute;
  left: 50%;
  bottom: 4.96031746%;
}
#flowRule .layer02 .close .closeBtn {
  position: absolute;
  left: 50%;
  margin-left: -39.49579832%;
  top: 0%;
  width: 78.99159664%;
}
#flowResult {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
#flowResult .result {
  display: none;
  margin-left: -43.671875%;
  width: 87.34375%;
  position: absolute;
  left: 50%;
  top: 19.04761905%;
}
#flowResult .result.active {
  display: block;
}
#flowResult .result01 .moreSurpriseBtn {
  position: absolute;
  left: 50%;
  margin-left: -25.2236136%;
  bottom: 5.26315789%;
  width: 50.44722719%;
}
#flowResult .result02 .moreSurpriseBtn {
  position: absolute;
  left: 50%;
  margin-left: -25.2236136%;
  bottom: 8.77192982%;
  width: 50.44722719%;
}
#flowResult .result03 .moreSurpriseBtn {
  position: absolute;
  left: 50%;
  margin-left: -25.2236136%;
  bottom: 8.77192982%;
  width: 50.44722719%;
}
#redRule {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../images/img_001.jpg") center center no-repeat;
  background-size: cover;
  z-index: 999;
}
#redRule .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#redRule .layer.layer01 {
  z-index: 1;
}
#redRule .layer.layer02 {
  z-index: 2;
}
#redRule .layer01 {
  background: url("../images/img_015.png") center center no-repeat;
  background-size: 100% 100%;
}
#redRule .layer02 .title {
  margin-left: -25.234375%;
  width: 50.46875%;
  position: absolute;
  left: 50%;
  top: 3.96825397%;
}
#redRule .layer02 .content {
  margin-left: -38.90625%;
  width: 77.8125%;
  position: absolute;
  left: 50%;
  top: 17.46031746%;
}
#redRule .layer02 .close {
  margin-left: -27.890625%;
  width: 55.78125%;
  position: absolute;
  left: 50%;
  bottom: 4.96031746%;
}
#redRule .layer02 .close .closeBtn {
  position: absolute;
  left: 50%;
  margin-left: -39.49579832%;
  top: 0%;
  width: 78.99159664%;
}
#receiveRule {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../images/img_001.jpg") center center no-repeat;
  background-size: cover;
  z-index: 999;
}
#receiveRule .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#receiveRule .layer.layer01 {
  z-index: 1;
}
#receiveRule .layer.layer02 {
  z-index: 2;
}
#receiveRule .layer01 {
  background: url("../images/img_015.png") center center no-repeat;
  background-size: 100% 100%;
}
#receiveRule .layer02 .title {
  margin-left: -25.234375%;
  width: 50.46875%;
  position: absolute;
  left: 50%;
  top: 3.96825397%;
}
#receiveRule .layer02 .content {
  margin-left: -37.8125%;
  width: 75.625%;
  position: absolute;
  left: 50%;
  top: 19.04761905%;
}
#receiveRule .layer02 .close {
  margin-left: -27.890625%;
  width: 55.78125%;
  position: absolute;
  left: 50%;
  bottom: 4.96031746%;
}
#receiveRule .layer02 .close .closeBtn {
  position: absolute;
  left: 50%;
  margin-left: -39.49579832%;
  top: 0%;
  width: 78.99159664%;
}
#APPdownload {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
#APPdownload .appGuide {
  margin-left: -43.671875%;
  width: 87.34375%;
  position: absolute;
  left: 50%;
  top: 16.86507937%;
}
#APPdownload .appGuide .APPdownloadBtn {
  position: absolute;
  left: 50%;
  margin-left: -28.2647585%;
  bottom: 7.24876442%;
  width: 56.52951699%;
}
#alert {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
#alert .dialog {
  position: absolute;
  left: 10%;
  top: 30%;
  width: 80%;
  background: #ffffff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  height: 22%;
}
#alert .dialog p {
  margin-top: 14px;
  font-size: 1.4rem;
  line-height: 2rem;
  text-align: center;
  font-weight: bold;
}
#alert .dialog .button {
  position: absolute;
  bottom: 10px;
  font-size: 1.2rem;
  padding: 5px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #da1420;
  color: #ffffff;
}
#alert .dialog .sureBtn {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
#home .logo {
  z-index: 9;
  margin-left: -46.5625%;
  width: 32.5%;
  position: absolute;
  left: 50%;
  top: 1.98412698%;
}
#home .panel-page01 {
  background: url("../images/img_001.jpg") center center no-repeat;
  background-size: cover;
}
#home .panel-page01 .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#home .panel-page01 .layer.layer01 {
  z-index: 1;
}
#home .panel-page01 .layer.layer02 {
  z-index: 2;
}
#home .panel-page01 .layer01 .redHornRT {
  position: absolute;
  right: 0;
  top: 0;
  width: 41.5625%;
}
#home .panel-page01 .layer01 .redHornLB {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15.625%;
}
#home .panel-page01 .layer01 .monkey {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28.125%;
}
#home .panel-page01 .layer02 .title {
  margin-left: -50%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 10.91269841%;
}
#home .panel-page01 .layer02 .identification {
  margin-left: -42.34375%;
  width: 84.6875%;
  position: absolute;
  left: 50%;
  top: 48.61111111%;
}
#home .panel-page01 .layer02 .phoneNumber {
  margin-left: -42.34375%;
  width: 84.6875%;
  position: absolute;
  left: 50%;
  top: 56.54761905%;
}
#home .panel-page01 .layer02 .phoneVerCode {
  margin-left: -42.34375%;
  width: 84.6875%;
  position: absolute;
  left: 50%;
  top: 72.42063492%;
}
#home .panel-page01 .layer02 .phoneVerCode .sendBtn {
  position: absolute;
  right: 0%;
  top: 17.74193548%;
  width: 22.50922509%;
  height: 70.96774194%;
}
#home .panel-page01 .layer02 .phoneVerCode .sendBtn .sendBtn01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#home .panel-page01 .layer02 .phoneVerCode .sendBtn .sendBtn02 {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#home .panel-page01 .layer02 .phoneVerCode .sendBtn .sendBtn02 .text {
  text-align: center;
  width: 100%;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #000000;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#home .panel-page01 .layer02 .graphicalVerCode {
  margin-left: -42.34375%;
  width: 84.6875%;
  position: absolute;
  left: 50%;
  top: 64.48412698%;
}
#home .panel-page01 .layer02 .graphicalVerCode .graphicalBtn {
  background-color: #ccc;
  position: absolute;
  right: 0%;
  top: 14.51612903%;
  width: 22.69372694%;
  height: 67.74193548%;
}
#home .panel-page01 .layer02 .graphicalVerCode .graphicalBtn .graphicalImg {
  position: absolute;
  left: 50%;
  margin-left: -50%;
  top: 0%;
  width: 100%;
}
#home .panel-page01 .layer02 .graphicalVerCode .graphicalBtn .loading {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#home .panel-page01 .layer02 .graphicalVerCode .graphicalBtn .loading .loadingImg {
  position: absolute;
  left: 50%;
  margin-left: -17.07317073%;
  top: 0%;
  width: 34.14634146%;
  -moz-animation: loading 1s linear 0s infinite normal both;
  -webkit-animation: loading 1s linear 0s infinite normal both;
  -o-animation: loading 1s linear 0s infinite normal both;
  -ms-animation: loading 1s linear 0s infinite normal both;
  animation: loading 1s linear 0s infinite normal both;
}
#home .panel-page01 .layer02 .textWrap .textWrap01 {
  position: absolute;
  left: 30.81180812%;
  top: 0%;
  width: 69.18819188%;
  height: 100%;
  font-size: 1.6rem;
  z-index: 99;
}
#home .panel-page01 .layer02 .textWrap .textWrap01 input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 10px;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000000;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#home .panel-page01 .layer02 .textWrap .textWrap02 {
  position: absolute;
  left: 30.81180812%;
  top: 0%;
  width: 44.09594096%;
  height: 100%;
  font-size: 1rem;
  z-index: 99;
}
#home .panel-page01 .layer02 .textWrap .textWrap02 input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 10px;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000000;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#home .panel-page01 .layer02 .flow {
  margin-left: -27.890625%;
  width: 55.78125%;
  position: absolute;
  left: 50%;
  bottom: 8.92857143%;
}
#home .panel-page01 .layer02 .flow .flowBtn {
  position: absolute;
  left: 50%;
  margin-left: -39.49579832%;
  top: 0%;
  width: 78.99159664%;
}
#home .panel-page01 .layer02 .ruleBtn {
  margin-left: -11.25%;
  width: 22.5%;
  position: absolute;
  left: 50%;
  bottom: 2.18253968%;
}
#redPacket .logo {
  z-index: 9;
  margin-left: -46.5625%;
  width: 32.5%;
  position: absolute;
  left: 50%;
  top: 1.98412698%;
}
#redPacket .panel-page01 {
  background: url("../images/img_001.jpg") center center no-repeat;
  background-size: cover;
}
#redPacket .panel-page01 .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#redPacket .panel-page01 .layer.layer01 {
  z-index: 1;
}
#redPacket .panel-page01 .layer.layer02 {
  z-index: 2;
}
#redPacket .panel-page01 .layer01 .redHornRT {
  position: absolute;
  right: 0;
  top: 0;
  width: 41.5625%;
}
#redPacket .panel-page01 .layer01 .redHornLB {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15.625%;
}
#redPacket .panel-page01 .layer01 .monkey {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28.125%;
}
#redPacket .panel-page01 .layer02 .title {
  margin-left: -50%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 10.91269841%;
}
#redPacket .panel-page01 .layer02 .redpacket {
  margin-left: -50%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 36.70634921%;
}
#redPacket .panel-page01 .layer02 .email {
  margin-left: -39.53125%;
  width: 79.0625%;
  position: absolute;
  left: 50%;
  top: 62.1031746%;
}
#redPacket .panel-page01 .layer02 .graphicalVerCode {
  margin-left: -39.53125%;
  width: 79.0625%;
  position: absolute;
  left: 50%;
  top: 70.93253968%;
}
#redPacket .panel-page01 .layer02 .graphicalVerCode .graphicalBtn {
  background-color: #ccc;
  position: absolute;
  right: 3.35968379%;
  top: 14.51612903%;
  width: 24.3083004%;
  height: 67.74193548%;
}
#redPacket .panel-page01 .layer02 .graphicalVerCode .graphicalBtn .graphicalImg {
  position: absolute;
  left: 50%;
  margin-left: -50%;
  top: 0%;
  width: 100%;
}
#redPacket .panel-page01 .layer02 .graphicalVerCode .graphicalBtn .loading {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#redPacket .panel-page01 .layer02 .graphicalVerCode .graphicalBtn .loading .loadingImg {
  position: absolute;
  left: 50%;
  margin-left: -17.07317073%;
  top: 0%;
  width: 34.14634146%;
  -moz-animation: loading 1s linear 0s infinite normal both;
  -webkit-animation: loading 1s linear 0s infinite normal both;
  -o-animation: loading 1s linear 0s infinite normal both;
  -ms-animation: loading 1s linear 0s infinite normal both;
  animation: loading 1s linear 0s infinite normal both;
}
#redPacket .panel-page01 .layer02 .graphicalVerCode .debRed {
  right: -7.90513834%;
  top: 0%;
  position: absolute;
  width: 7.90513834%;
}
#redPacket .panel-page01 .layer02 .textWrap .textWrap01 {
  position: absolute;
  left: 22.52964427%;
  top: 0%;
  width: 74.11067194%;
  height: 100%;
  font-size: 1.6rem;
  z-index: 99;
}
#redPacket .panel-page01 .layer02 .textWrap .textWrap01 input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 10px;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000000;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#redPacket .panel-page01 .layer02 .textWrap .textWrap02 {
  position: absolute;
  left: 22.52964427%;
  top: 0%;
  width: 47.23320158%;
  height: 100%;
  font-size: 1rem;
  z-index: 99;
}
#redPacket .panel-page01 .layer02 .textWrap .textWrap02 input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 10px;
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #000000;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#redPacket .panel-page01 .layer02 .energyAgree {
  margin-left: -29.21875%;
  width: 58.4375%;
  position: absolute;
  left: 50%;
  bottom: 17.46031746%;
}
#redPacket .panel-page01 .layer02 .energyAgree .img_png {
  width: 100%;
  height: 0;
  padding-top: 11.76470588%;
  position: relative;
}
#redPacket .panel-page01 .layer02 .energyAgree .energyText {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#redPacket .panel-page01 .layer02 .energyAgree .dontAgree {
  display: block;
}
#redPacket .panel-page01 .layer02 .energyAgree.active .agree {
  display: block;
}
#redPacket .panel-page01 .layer02 .send {
  margin-left: -27.890625%;
  width: 55.78125%;
  position: absolute;
  left: 50%;
  bottom: 8.92857143%;
}
#redPacket .panel-page01 .layer02 .send .sendBtn {
  position: absolute;
  left: 50%;
  margin-left: -39.77591036%;
  top: 0%;
  width: 79.55182073%;
}
#redPacket .panel-page01 .layer02 .redRuleBtn {
  margin-left: -11.25%;
  width: 22.5%;
  position: absolute;
  left: 50%;
  bottom: 2.18253968%;
}
#redPacket .panel-page02 {
  background: url("../images/img_001.jpg") center center no-repeat;
  background-size: cover;
}
#redPacket .panel-page02 .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#redPacket .panel-page02 .layer.layer01 {
  z-index: 1;
}
#redPacket .panel-page02 .layer.layer02 {
  z-index: 2;
}
#redPacket .panel-page02 .layer01 .redHornRT {
  position: absolute;
  right: 0;
  top: 0;
  width: 41.5625%;
}
#redPacket .panel-page02 .layer01 .redHornLB {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15.625%;
}
#redPacket .panel-page02 .layer01 .monkey {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28.125%;
}
#redPacket .panel-page02 .layer02 .title {
  margin-left: -50%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 10.91269841%;
}
#redPacket .panel-page02 .layer02 .redpacket {
  margin-left: -50%;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 29.56349206%;
}
#redPacket .panel-page02 .layer02 .receive {
  margin-left: -27.890625%;
  width: 55.78125%;
  position: absolute;
  left: 50%;
  bottom: 8.92857143%;
}
#redPacket .panel-page02 .layer02 .receive .receiveBtn {
  position: absolute;
  left: 50%;
  margin-left: -39.49579832%;
  top: 0%;
  width: 78.99159664%;
}
#redPacket .panel-page02 .layer02 .receiveRuleBtn {
  margin-left: -8.046875%;
  width: 16.09375%;
  position: absolute;
  left: 50%;
  bottom: 2.18253968%;
}