.gift-list {
    overflow: hidden;
}
#app .gift-list li::before {
    top: 0.03rem;
}

@charset "UTF-8";
body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
p {
  line-height: 1.6;
  margin-bottom: 0.24rem;
}
html {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: .28rem;
  line-height: 1.4;
}
a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: #7483af;
  background: transparent;
}
a:focus {
  outline: thin dotted;
}
a:active, a:hover {
  outline: 0;
}
pre,
xmp,
plaintext,
listing {
  font-family: "Helvetica Neue", Helvetica, sans-serif !important;
  white-space: pre-wrap !important;
  margin: 0 !important;
}
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
b,
strong {
  font-weight: bold;
}
img {
  border: 0;
  outline: none;
}
ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin-right: 0;
  text-transform: none;
  border: 0;
  background: 0 0;
  -webkit-appearance: none;
  outline: 0;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
textarea {
  vertical-align: top;
  overflow: auto;
  resize: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
cite {
  font-style: normal;
}
svg:not(:root) {
  overflow: hidden;
}
.none {
  display: none !important;
}
.hidden {
  visibility: hidden !important;
}
.cols {
  -webkit-box-align: center;
  display: -webkit-box;
}
.cols .span {
  -webkit-box-flex: 1;
}
.rows {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.rows .span {
  -webkit-box-flex: 1;
}
@-webkit-keyframes fix_iphonex {
0% {
    -webkit-transform: scale3d(1, 1, 1);
}
100% {
    -webkit-transform: scale3d(1, 1, 1);
}
}
html,
body {
  background-color: #2D3059;
  background-repeat: repeat-y;
  background-size: 100% auto;
}
.active,
.return:active,
button:active {
  opacity: .5;
}
.page-newYearGame {
  background-image: url(../img/bg1.2ef6a.jpg?max_age=2592000&_bid=4070);
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-height: 10rem;
}
.banner {
  height: 6.55rem;
  width: 100%;
}
.header {
  margin-top: .1rem;
  position: relative;
}
.header .logo {
  position: absolute;
  top: .04rem;
  left: .1rem;
}
.title {
  text-align: center;
  margin: auto;
}
.hidden {
  display: none !important;
}
.nav-bar .back {
  float: left;
}
.nav-bar .back::after {
  content: "<";
}
.nav-bar .right {
  vertical-align: middle;
  float: right;
  color: white;
  font-size: 0.28rem;
  margin: 0px 0px 0px 6.14rem;
}
.list-mod1 {
  margin-top: -.5rem;
  padding: .5rem;
}
.list-mod1 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.list-mod1 ul .title {
  color: #F6E7BB;
  font-size: .3rem;
  padding-top: .05rem;
  font-family: PingFangSC-Semibold, sans-serif;
}
.list-mod1 ul .title-s {
  color: #F93B6D;
  font-size: .2rem;
}
.list-mod1 li {
  width: 5rem;
  height: 3rem;
  margin: 1rem auto;
  margin-top: 0.5rem;
  width: 2.55rem;
  min-height: 3.53rem;
  position: relative;
}
.list-mod1 li .img {
  margin: auto;
  width: 1rem;
  height: 1rem;
  background-size: 100% 100%;
}
.list-mod1 li .pic {
  margin: auto;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.list-mod1 li .popularity {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.list-mod1 li .popularity .circle {
  margin: 1.45rem auto 0 auto;
  background-image: url(../img/open.c68bf.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 1.28rem;
  height: 1.26rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.list-mod1 li .popularity .name {
  position: absolute;
  top: 2.784rem;
  width: 100%;
  height: 0.494rem;
  text-align: center;
}
.list-mod1 li .popularity .name .img {
  width: .43rem;
  height: .43rem;
  overflow: hidden;
  border-radius: 0.1rem;
  border: 1px solid #E6AA71;
  display: inline-block;
  vertical-align: middle;
}
.list-mod1 li .popularity .name span {
  color: #FFAABF;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  display: inline-block;
  vertical-align: middle;
  padding-left: .1rem;
  font-size: 0.24rem;
}
.list-mod2 {
  overflow: hidden;
  margin: .5rem 0;
  padding: .5rem 0;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #242962), color-stop(98%, #0D234F));
  background-image: linear-gradient(180deg, #242962 1%, #0D234F 98%);
}
.list-mod2 .title {
  width: 6.31rem;
  height: .59rem;
  overflow: hidden;
  background-image: url(../img/title01.5ab66.png?max_age=2592000&_bid=4070);
  color: transparent;
  background-size: 100% 100%;
}
.list-mod2 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  margin-bottom: .52rem;
  margin-top: .53rem;
}
.list-mod2 li {
  width: 33.33%;
  height: auto;
  margin: auto;
  margin-right: .71rem;
  text-align: center;
}
.list-mod2 li .pic {
  margin: auto;
  width: 1rem;
  height: 1rem;
  background-size: 100% 100%;
  border-radius: .2rem;
  overflow: hidden;
  border: 1px solid #E6AA71;
}
.list-mod2 li:first-child {
  margin-left: .56rem;
}
.list-mod2 li:last-child {
  margin-right: .58rem;
}
.list-mod2 li .abstract {
  text-align: center;
}
.list-mod2 li .abstract .abstract-l {
  font-family: PingFangSC-Semibold;
  font-size: .3rem;
  color: #F6E7BB;
  letter-spacing: 0;
  padding-top: .18rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.list-mod2 li .abstract .abstract-s {
  padding: .11rem 0;
  font-family: PingFangSC-Regular;
  font-size: .24rem;
  color: rgba(247, 222, 190, 0.7);
  letter-spacing: 0;
}
.list-mod2 li button {
  width: 1.68rem;
  height: .64rem;
  margin: auto;
  color: transparent;
  background-image: url(../img/button-v2.202ba.png?max_age=2592000&_bid=4070);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.list-mod3 {
  overflow: hidden;
}
.list-mod3 .link {
  font-size: .3rem;
  color: #F6E7BB;
  text-align: center;
  width: 100%;
  margin-top: -.9rem;
}
.list-mod3 .title {
  overflow: hidden;
  background-image: url(../img/title02.5301c.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 6.9rem;
  height: 0.59rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: transparent;
  margin: .2rem auto;
}
.list-mod3 .luck-draw {
  display: none;
}
.list-mod3 .check-in {
  width: 6.9rem;
  margin: .2rem auto 1.1rem .2rem;
  background-size: contain;
  background-position: center;
  padding-bottom: .1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #F6E7BB;
  font-size: .2rem;
}
.list-mod3 .check-in .lottery-box {
  height: auto;
  margin: 0 auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 4px;
}
.list-mod3 .check-in .lottery-box .block {
  position: relative;
  margin: .1rem .06rem;
  width: 1.8rem;
  height: 1.8rem;
  background: url(../img/block_n.26ad5.png?max_age=2592000&_bid=4070) no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
  white-space: nowrap;
}
.list-mod3 .check-in .lottery-box .block strong {
  position: absolute;
  bottom: .1rem;
  left: 0;
  font-weight: normal;
  right: 0;
  text-align: center;
  margin: 0;
}
.list-mod3 .check-in .lottery-box .block .thank {
  margin-top: 0;
}
.list-mod3 .check-in .lottery-box .block_active {
  background: url(../img/block_a.7356f.png?max_age=2592000&_bid=4070) no-repeat;
  background-size: contain;
  background-position: center;
}
.list-mod3 .check-in .lottery-box .block_empty {
  position: relative;
  background: url(../img/block_na.d61e4.png?max_age=2592000&_bid=4070) no-repeat;
  background-size: contain;
  background-position: center;
  text-align: center;
}
.list-mod3 .check-in .lottery-box .block_empty::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  line-height: 1.8rem;
  right: 0;
  z-index: 100;
  content: "已抽完";
  font-size: .3rem;
  display: block;
  text-align: center;
  background: url(../img/block_naup.7bbbf.png?max_age=2592000&_bid=4070) no-repeat;
  background-size: contain;
  background-position: center;
}
.list-mod3 .check-in .lottery-box .block_thank {
  line-height: 1.5rem;
  font-size: .3rem;
}
.list-mod3 .negative {
  opacity: .5;
}
.list-mod3 .check-in .lottery-box #active {
  background: url(../img/center_a.c0d1e.png?max_age=2592000&_bid=4070) no-repeat;
  background-size: contain;
  background-position: center;
}
.list-mod3 .check-in .lottery-box #active strong {
  top: .6rem;
  color: #fff;
  font-size: .3rem;
}
.list-mod3 .check-in .lottery-box #active strong.chance {
  top: 1.1rem;
  color: #F6E7BB;
  font-size: .2rem;
}
.list-mod3 .check-in .lottery-box .gift {
  height: 1.8rem;
  width: 1.8rem;
  margin: .06rem auto;
}
.list-mod3 .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  margin-right: .1rem;
  border-width: .04rem 0 .04rem .04rem;
  border-color: transparent transparent transparent #ffffff;
}
.list-mod3 .rule {
  width: 3.45rem;
  height: 2.6rem;
  margin: .22rem auto .2rem;
  background: url(../img/rule_bg.422a2.png?max_age=2592000&_bid=4070) no-repeat;
  background-size: contain;
  background-position: center;
  line-height: 20px;
  letter-spacing: 0px;
  color: #e5e5e5;
  font-size: 13px;
}
.list-mod3 .rule .rule-title {
  height: .25rem;
  width: 1.44rem;
  margin: 0 auto;
  padding: .15rem 0;
  background: url(../img/rule_title.2efa1.png?max_age=2592000&_bid=4070) no-repeat;
  background-size: contain;
  background-position: center;
}
.list-mod3 .rule .rule-content {
  width: 2.88rem;
  height: 1.6rem;
  overflow-y: scroll;
  margin: 0 auto;
  padding: .06rem .14rem;
}
.list-mod3 .rule .rule-content .rule-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: .06rem;
}
.list-mod3 .rule .rule-content .rule-item i {
  margin-top: .04rem;
}
.list-mod3 .feedback {
  text-decoration: underline;
}
.list-mod3 .button {
  display: block;
  width: 2.4rem;
  height: .4rem;
  margin: .1rem auto;
  background-color: #ff779d;
  -webkit-box-shadow: 0 7px 0 rgba(236, 77, 122, 0.75);
          box-shadow: 0 7px 0 rgba(236, 77, 122, 0.75);
  border-radius: 39px;
  line-height: 0.4rem;
  color: white;
  font-size: 16px;
  white-space: nowrap;
}
.list-mod3 .gift1 {
  background-image: url(../img/gift1.d828e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.05rem;
  background-size: contain;
}
.list-mod3 .gift2 {
  background-image: url(../img/gift3.ce1ea.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.05rem;
  background-size: contain;
}
.list-mod3 .gift3 {
  background-image: url(../img/gift4.67412.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.05rem;
  background-size: contain;
}
.list-mod3 .gift4 {
  background-image: url(../img/gift4.67412.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.05rem;
  background-size: contain;
}
.list-mod3 .gift6 {
  background-image: url(../img/gift5.6ccd2.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.05rem;
  background-size: contain;
}
.list-mod3 .gift7 {
  background-image: url(../img/gift6.55550.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.05rem;
  background-size: contain;
}
.list-mod3 .gift8 {
  background-image: url(../img/gift1.d828e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.05rem;
  background-size: contain;
}
.list-mod3 .gift9 {
  background-image: url(../img/gift1.d828e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center -.1rem;
  background-size: contain;
}
.list-mod3 .gift10 {
  background-image: url(../img/gift11.47129.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: .2rem .1rem;
  background-size: 80%;
}
.list-mod3 .gift11 {
  background-image: url(../img/gift12.e6c4e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: .2rem .1rem;
  background-size: 80%;
}
.list-mod3 .gift12 {
  background-image: url(../img/gift13.15686.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: .2rem .1rem;
  background-size: 80%;
}
.list-mod3 .gift13 {
  background-image: url(../img/gift10.af254.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: .2rem .1rem;
  background-size: 80%;
}
.list-mod3 .mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: rgba(6, 6, 6, 0.8);
}
.list-mod3 .mask .content {
  width: 2.79rem;
  height: auto;
  margin: 30% auto 10%;
  padding-bottom: .2rem;
  background-color: #0081c1;
  -webkit-box-shadow: inset 0px 1px 24px 0px rgba(61, 157, 228, 0.29);
          box-shadow: inset 0px 1px 24px 0px rgba(61, 157, 228, 0.29);
  border-radius: 20px;
  border: solid 2px #031c29;
  text-align: center;
}
.list-mod3 .mask .content .title {
  width: 1.27rem;
  height: .44rem;
  margin: -.22rem auto;
  background-color: #009fe3;
  -webkit-box-shadow: inset 0px 1px 24px 0px rgba(61, 157, 228, 0.29);
          box-shadow: inset 0px 1px 24px 0px rgba(61, 157, 228, 0.29);
  border-radius: 43px;
  border: solid 2px #0a6492;
  text-align: center;
  line-height: 0.44rem;
  color: #012e4f;
  font-size: 24px;
  white-space: nowrap;
}
.list-mod3 .mask .content .giftshow {
  width: 100%;
  height: 1rem;
  margin: .4rem auto 10px;
}
.list-mod3 .mask .content .gift-name {
  font-size: 18px;
  color: #fff;
}
.list-mod3 .mask .close {
  margin: 0 auto;
  background-image: url(../img/close.f429e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 1.06rem;
  height: 0.57rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.gift-list {
  margin: 0 1rem;
  height: 2.2rem;
  overflow: hidden;
}
.gift-list li {
  line-height: .7rem;
  position: relative;
  color: #F6E7BB;
}
.gift-list li::before {
  content: " ";
  position: relative;
  top: .1rem;
  display: inline-block;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #ccc;
}
.gift-list li .pic {
  margin-right: .1rem;
  vertical-align: middle;
}
.gift-list li span {
  font-weight: normal;
  vertical-align: middle;
}
.gift-list li strong {
  vertical-align: middle;
  font-weight: bold;
}
.gift-list .pic {
  width: .48rem;
  height: .48rem;
  display: inline-block;
  border-radius: .3rem;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #fff;
}
.gift-list p {
  display: inline-block;
  color: #F6E7BB;
}
.list-mod4 .title {
  overflow: hidden;
  color: transparent;
  margin: .7rem auto .4rem auto;
  background-image: url(../img/title03.aca7e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 5.8rem;
  height: 0.62rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.list-mod4 li {
  width: 6.8rem;
  height: 4.22rem;
  margin: 0 auto .5rem auto;
}
.list-mod4 li .pic {
  margin: auto;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.rule-more {
  color: #F6E7BB;
  font-size: .3rem;
  padding-right: 0.2rem;
  text-align: center;
  width: 4rem;
  line-height: .5rem;
  height: .5rem;
  margin: auto;
}
.footer {
  overflow: hidden;
  background-image: url(../img/footer.bc74e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 7.48rem;
  height: 1.21rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: .8rem;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  z-index: 1000;
}
.popup .popup-main {
  position: relative;
  width: 6.51rem;
  height: 8rem;
}
.popup .popup-main::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 6.51rem;
  height: 5.14rem;
  background-image: url(../img/popup-bg.58fef.png?max_age=2592000&_bid=4070);
  background-size: 100% auto;
  background-position: top 0;
}
.popup .popup-main::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 6.51rem;
  height: 5.14rem;
  background-image: url(../img/popup-bg.58fef.png?max_age=2592000&_bid=4070);
  background-size: 100% auto;
  background-position: 0 bottom;
}
.popup .content {
  font-size: .3rem;
  position: relative;
  z-index: 3;
  padding: .5rem;
  min-height: 5rem;
}
.popup .content h3 {
  font-size: .4rem;
}
.popup .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
  width: 1.06rem;
  height: 1rem;
  background-image: url(../img/close.f429e.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.cont1 {
  color: #fff;
}
.cont1 h3 {
  padding: .2rem 0 0 0;
}
.cont1 p {
  font-size: .25rem;
}
.cont2 {
  color: #fff;
  text-align: center;
}
.cont2 h3 {
  padding: 2.2rem 0 .1rem 0;
}
.cont3 {
  color: #fff;
  text-align: center;
}
.cont3 .pic {
  width: 5.2rem;
  height: 5.2rem;
  margin: auto;
  background-size: 100% auto;
}
.cont3 h3 {
  padding: .2rem 0 .1rem 0;
}
.cont3 p {
  color: #eee;
}
.cont3 button {
  color: #f00;
  font-size: .4rem;
  background-image: url(../img/button-v3.248e3.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 5.26rem;
  height: 1.01rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.return {
  color: transparent;
  margin: auto;
  background-image: url(../img/return.51381.png?max_age=2592000&_bid=4070);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 3.06rem;
  height: 1.14rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.scroll-guide {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(45,48,89,0)), to(rgba(45,48,89,1)));
  background-image: linear-gradient(to bottom, rgba(45,48,89,0), rgba(45,48,89,1));
  z-index: 4;
}
.scroll-guide::before {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 30px;
  width: .72rem;
  height: .5rem;
  transform: translate3d(50%, 0, 0);
  -webkit-transform: translate3d(50%, 0, 0);
  background-image: url(../img/guide.a2c25.png?max_age=2592000&_bid=4070);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  animation: dance 1s infinite;
  -webkit-animation: dance 1s infinite;
}
@-webkit-keyframes dance {
0% {
    bottom: 30px;
}
50% {
    bottom: 25px;
}
100% {
    bottom: 30px;
}
}
@keyframes dance {
0% {
    bottom: 30px;
}
50% {
    bottom: 25px;
}
100% {
    bottom: 30px;
}
}


.main .top {
  width: 100%;
  height: .93rem;
}
.main .top .mobile-bar {
  height: .35rem;
  width: 100%;
}