@charset "UTF-8";
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, q, s, samp,
small, strike, strong, sub, sup,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none; }

input, textarea, button, a, select, div {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent !important; }

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  /*-webkit-user-select:none;*/ }

a, img, label {
  /*-webkit-touch-callout: none;*/
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

input:focus {
  outline: none; }

/**
 * sass core
 */
/*多行截字*/
/*基础类在common中*/
/*处理border*/
/*单独控制图标的大小*/
/**
 * var 
 */
/*Background color*/
/*Font icon color*/
/*card background*/
/*Font Name*/
/*Font Path*/
/*Font Class Prefix*/
/*Image Icon Prefix*/
/*Image Icon Path*/
/*Button Prefix*/
/*Animation Prefix*/
/*Border Color*/
/*bar background color*/
/*line box background color*/
/*tap topbar bg*/
/*Popup background*/
/*Dialog background*/
/*Pop s background*/
/**/
/*Pop s border*/
/*Pop lt background*/
/*Pop lt line color*/
/*Avatar Line Color*/
/*Bubble Color*/
/*Rank Star Color*/
/*Colors*/
/*font*/
/*Font Size*/
/*card gap*/
/*devices*/
/**
 * common
 */
html {
  background: #f2f2f2;
  font-size: 16px; }

a {
  color: #507DAF; }

.card {
  margin-bottom: 0.5625rem; }
  .card .card-wrap {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    height: 100%; }
    .card .card-wrap .card-main {
      box-sizing: border-box;
      margin-left: -0.75rem;
      margin-right: -0.75rem;
      height: 100%; }
      .card .card-wrap .card-main > .m-box {
        height: 100%; }
  .card .box-right .m-font-arrow-right {
    font-size: 0.875rem;
    width: 0.625rem;
    color: #939393; }

.m-img-icon,
.link-text,
.main-link,
.sub-link {
  display: inline-block;
  vertical-align: middle; }

.m-active {
  background-color: #e6e6e6 !important;
  position: relative;
  z-index: 2; }

.m-img-box {
  display: inline-block;
  width: 100%; }
  .m-img-box img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    -o-object-fit: cover;
       object-fit: cover; }
  .m-img-box + .m-box-col {
    overflow: hidden; }

.m-text-cut {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.m-text-cut-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }

.m-img-icon {
  margin-right: 0.625rem;
  width: 1.5rem;
  height: 1.5rem; }
  .m-img-icon img {
    width: 100%;
    height: 100%;
    vertical-align: top; }

.m-line-gradient {
  -webkit-mask: -webkit-linear-gradient(top, transparent, #000 30%, #000 70%, transparent 100%);
  width: 1px;
  background-color: #e6e6e6;
  height: 1.5rem; }
  .android .m-line-gradient {
    -webkit-transform: scale(0.5, 1);
            transform: scale(0.5, 1); }
  .iosx2 .m-line-gradient {
    width: 0.5px; }
  .iosx3 .m-line-gradient {
    width: 0.35714px; }

/*点评星星元素*/
.m-star-box {
  display: inline-block;
  position: relative;
  font-size: 1rem;
  line-height: 1;
  color: #b8b8b8; }
  .m-star-box .star-value {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    overflow: hidden;
    white-space: nowrap; }
    .m-star-box .star-value .m-font-star {
      color: #fcce17; }
  .m-star-box .m-font-star {
    vertical-align: top;
    font-size: 1em; }

/*点评星星另一种表现形式*/
.m-star-full {
  color: #fcce17; }

.m-star-null {
  color: #b8b8b8; }

.m-star-half {
  color: #b8b8b8; }
  .m-star-half::after {
    width: 50%;
    color: #fcce17;
    overflow: hidden; }

/*image and text box*/
.m-text-box h3 {
  font-size: 1rem;
  color: #333;
  line-height: 1.4; }
  .m-text-box h3.txt-cut {
    line-height: normal; }
  .m-text-box h3 .m-icon {
    vertical-align: -0.125rem; }

.m-text-box h4 {
  font-size: 0.75rem;
  color: #636363;
  line-height: 1.5; }
  .m-text-box h4:last-child {
    color: #939393; }

.m-text-box > * {
  margin: 0 0 0.375rem 0; }

.m-text-box > :last-child {
  margin: 0; }

.m-btn-box .m-diy-btn {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }
  .m-btn-box .m-diy-btn img {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: top; }
  .m-btn-box .m-diy-btn .m-font {
    font-size: 1.5rem; }
  .m-btn-box .m-diy-btn h4 {
    font-size: 0.625rem;
    margin: 0.25rem 0 0 0; }

.box-right.m-btn-box {
  color: #507DAF;
  margin-left: 0.75rem;
  width: 3.25rem; }

/*follow btn*/
.m-add-box {
  color: #FF8200;
  text-align: center;
  display: inline-block; }
  .m-add-box.m-btn {
    width: 2.3125rem;
    min-width: 0;
    height: 2.0625rem;
    line-height: 2.0625rem;
    vertical-align: top; }
    .m-add-box.m-btn .m-font {
      font-size: 1.25rem; }
  .m-add-box.m-add-text {
    width: auto;
    color: #FF8200;
    font-size: 0.75rem;
    padding: 0 0.625rem;
    height: 1.6875rem;
    line-height: 1.6875rem; }
    .m-add-box.m-add-text .m-font {
      font-size: 0.75rem;
      vertical-align: top; }
  .m-add-box h4 {
    font-size: 0.625rem; }
  .m-add-box .m-font {
    color: #FF8200;
    font-size: 1.75rem; }
  .m-add-box.m-add-al {
    color: #939393; }
    .m-add-box.m-add-al .m-font {
      color: #939393; }
  .m-add-box.m-add-each {
    color: #10B524; }
    .m-add-box.m-add-each .m-font {
      color: #10B524; }

.m-sld-dot li {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  margin: 0 0 0 0.25rem; }
  .m-sld-dot li.cur {
    background: #FF8200; }

.m-link-icon {
  margin-left: 0.25rem;
  display: inline-block;
  vertical-align: middle;
  width: 1.5rem;
  height: 0.875rem; }
  .m-link-icon img {
    width: 100%;
    height: 100%;
    vertical-align: top; }

.m-ctrl-box .m-diy-btn {
  color: #939393;
  height: 100%; }
  .m-ctrl-box .m-diy-btn img {
    width: 1.125rem;
    height: 1.125rem; }
  .m-ctrl-box .m-diy-btn h4 {
    font-size: 0.8125rem;
    display: inline-block;
    margin-top: 0;
    margin-left: 0.25rem; }
    .m-ctrl-box .m-diy-btn h4 a {
      color: #507DAF; }

.m-ctrl-box .m-font {
  font-size: 1rem;
  vertical-align: middle; }

.m-ctrl-box .m-icon {
  font-size: 16px;
  vertical-align: middle; }
  @media screen and (min-width: 414px) and (max-width: 767px) {
    .m-ctrl-box .m-icon {
      font-size: 17px; } }
  @media screen and (min-width: 768px) {
    .m-ctrl-box .m-icon {
      font-size: 20px; } }

footer.m-ctrl-box {
  border-top-width: 1px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  border-color: #e6e6e6;
  border-style: solid;
  height: 2.125rem; }
  .android footer.m-ctrl-box {
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
    border-color: transparent;
    border-style: solid;
    -o-border-image: url("data:image/svg+xml;utf-8,%3C?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%0A%3C!--%20Generator:%20Adobe%20Illustrator%2016.0.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20%20--%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version=%221.1%22%20%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%0A%09%20width=%226px%22%20height=%226px%22%20viewBox=%220%200%206%206%22%20enable-background=%22new%200%200%206%206%22%20xml:space=%22preserve%22%3E%0A%3Crect%20x=%220.5%22%20y=%220.5%22%20fill=%22none%22%20stroke=%22#e6e6e6%22%20stroke-miterlimit=%2210%22%20width=%225%22%20height=%225%22/%3E%0A%3C/svg%3E") 2 repeat;
       border-image: url("data:image/svg+xml;utf-8,%3C?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%0A%3C!--%20Generator:%20Adobe%20Illustrator%2016.0.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20%20--%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version=%221.1%22%20%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%0A%09%20width=%226px%22%20height=%226px%22%20viewBox=%220%200%206%206%22%20enable-background=%22new%200%200%206%206%22%20xml:space=%22preserve%22%3E%0A%3Crect%20x=%220.5%22%20y=%220.5%22%20fill=%22none%22%20stroke=%22#e6e6e6%22%20stroke-miterlimit=%2210%22%20width=%225%22%20height=%225%22/%3E%0A%3C/svg%3E") 2 repeat; }
  .iosx2 footer.m-ctrl-box {
    -o-border-image: none;
       border-image: none;
    border-top-width: 0.5px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0; }
  .iosx3 footer.m-ctrl-box {
    -o-border-image: none;
       border-image: none;
    border-top-width: 0.35714px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0; }

.m-btm-btns .m-box-col {
  margin-right: 0.625rem; }
  .m-btm-btns .m-box-col:last-child {
    margin: 0; }

.m-btm-btns a {
  width: 100%; }

/*处理头像圆角 icsize控制处理不同设备的V标适配*/
.m-avatar-box .m-img-box {
  border-radius: 50%;
  position: relative; }
  .m-avatar-box .m-img-box::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%; }
    .iosx2 .m-avatar-box .m-img-box::before {
      border: 0.5px solid rgba(0, 0, 0, 0.05); }
    .iosx3 .m-avatar-box .m-img-box::before {
      border: 0.35714px solid rgba(0, 0, 0, 0.05); }
  .m-avatar-box .m-img-box img {
    border-radius: 50%; }
  .m-avatar-box .m-img-box .m-icon {
    position: absolute;
    z-index: 3;
    right: -0.0625rem;
    bottom: -0.0625rem; }

.m-avatar-box.m-col-4 .m-icon {
  font-size: 18px; }
  @media screen and (min-width: 414px) and (max-width: 767px) {
    .m-avatar-box.m-col-4 .m-icon {
      font-size: 20px; } }
  @media screen and (min-width: 768px) {
    .m-avatar-box.m-col-4 .m-icon {
      font-size: 23px; } }

.m-avatar-box.m-col-7 .m-icon {
  font-size: 10px; }
  @media screen and (min-width: 414px) and (max-width: 767px) {
    .m-avatar-box.m-col-7 .m-icon {
      font-size: 11px; } }
  @media screen and (min-width: 768px) {
    .m-avatar-box.m-col-7 .m-icon {
      font-size: 13px; } }

/*遮罩层*/
.m-mask {
  position: fixed;
  z-index: 996;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); }

/*控制图片容器内图形尺寸*/
[class*=m-imghold] {
  height: 0;
  position: relative; }
  [class*=m-imghold] > img {
    z-index: 0;
    height: 100%;
    position: absolute; }

.m-imghold-square {
  padding-bottom: 100%; }

.m-imghold-wide {
  padding-bottom: 56.25%; }

/**
 * font icon
 */
@font-face {
  font-family: "marvelfont";
  src: url("../../font/marvelfont.woff2") format("woff2"), url("../../font/marvelfont.woff") format("woff"), url("../../font/marvelfont.svg") format("svg"), url("../../font/marvelfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

.m-font {
  font-family: "marvelfont";
  display: inline-block;
  -webkit-font-smoothing: antialiased; }

/*arrow right chart 1*/
.m-font-arrow-right::before {
  content: "\E000"; }

.m-font-dot-more::before {
  content: "\E001"; }

.m-font-download::before {
  content: "\E002"; }

.m-font-comment::before {
  content: "\E003"; }

.m-font-forward::before {
  content: "\E004"; }

.m-font-star {
  position: relative; }
  .m-font-star::before {
    content: "\E005"; }
  .m-font-star::after {
    content: "\E005";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; }

.m-font-follow::before {
  content: "\E006"; }

.m-font-followed::before {
  content: "\E007"; }

.m-font-arrow-down::before {
  content: "\E008"; }

.m-font-check::before {
  content: "\E009"; }

.m-font-close::before {
  content: "\E00A"; }

.m-font-exchange::before {
  content: "\E00B"; }

.m-font-minus::before {
  content: "\E00C"; }

.m-font-plus::before {
  content: "\E00D"; }

.m-font-repeat::before {
  content: "\E00E"; }

.m-font-play::before {
  content: "\E00F"; }

.m-font-stop::before {
  content: "\E010"; }

.m-font-down::before {
  content: "\E011"; }

.m-font-up::before {
  content: "\E012"; }

.m-font-chart::before {
  content: "\E013"; }

.m-font-up-s::before {
  content: "\E014"; }

.m-font-search::before {
  content: "\E015"; }

.m-font-bars::before {
  content: "\E016"; }

.m-font-arrow-left::before {
  content: "\E017"; }

.m-font-wb::before {
  content: "\E018"; }

.m-font-wbmsg::before {
  content: "\E019"; }

.m-font-wc::before {
  content: "\E01A"; }

.m-font-warn::before {
  content: "\E01B"; }

.m-font-wcmms::before {
  content: "\E01C"; }

.m-font-line-check::before {
  content: "\E01D"; }

.m-font-line-close::before {
  content: "\E01E"; }

/**
 * layout
 */
.m-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.m-box-col {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  display: block; }

.m-box-center-a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }

.m-box-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.m-box-dir {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

.m-tb {
  display: table;
  box-sizing: border-box; }

.m-thd {
  display: table-header-group; }

.m-tbd {
  display: table-row-group; }

.m-tr {
  display: table-row; }

.m-td {
  display: table-cell; }

.m-item-list {
  overflow: hidden;
  font-size: 0;
  margin-bottom: -1px; }

.m-item-box {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  position: relative;
  font-size: 0;
  color: #333; }
  .m-item-box::before, .m-item-box::after {
    content: "";
    position: absolute; }
  .m-item-box::before {
    right: 0;
    top: 1rem;
    bottom: 1rem;
    width: 1px;
    background-color: #e6e6e6; }
    .android .m-item-box::before {
      -webkit-transform: scale(0.5, 1);
              transform: scale(0.5, 1); }
    .iosx2 .m-item-box::before {
      width: 0.5px; }
    .iosx3 .m-item-box::before {
      width: 0.35714px; }
  .m-item-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background-color: #e6e6e6; }
    .android .m-item-box::after {
      -webkit-transform: scale(1, 0.5);
              transform: scale(1, 0.5); }
    .iosx2 .m-item-box::after {
      height: 0.5px; }
    .iosx3 .m-item-box::after {
      height: 0.35714px; }
  .m-no-break .m-item-box::before, .m-no-break .m-item-box::after {
    background-color: transparent; }

.m-auto-list {
  overflow: hidden;
  font-size: 0; }

.m-auto-box {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box; }

.m-col-1 .m-item-box, .m-col-1 .m-auto-box {
  width: 100%; }

.m-col-1 .m-item-box:nth-of-type(1n)::before {
  display: none; }

.m-col-2 .m-item-box, .m-col-2 .m-auto-box {
  width: 50%; }

.m-col-2 .m-item-box:nth-of-type(2n)::before {
  display: none; }

.m-col-3 .m-item-box, .m-col-3 .m-auto-box {
  width: 33.33333%; }

.m-col-3 .m-item-box:nth-of-type(3n)::before {
  display: none; }

.m-col-4 .m-item-box, .m-col-4 .m-auto-box {
  width: 25%; }

.m-col-4 .m-item-box:nth-of-type(4n)::before {
  display: none; }

.m-col-5 .m-item-box, .m-col-5 .m-auto-box {
  width: 20%; }

.m-col-5 .m-item-box:nth-of-type(5n)::before {
  display: none; }

.m-col-6 .m-item-box, .m-col-6 .m-auto-box {
  width: 16.66667%; }

.m-col-6 .m-item-box:nth-of-type(6n)::before {
  display: none; }

.m-col-7 .m-item-box, .m-col-7 .m-auto-box {
  width: 14.28571%; }

.m-col-7 .m-item-box:nth-of-type(7n)::before {
  display: none; }

.m-col-8 .m-item-box, .m-col-8 .m-auto-box {
  width: 12.5%; }

.m-col-8 .m-item-box:nth-of-type(8n)::before {
  display: none; }

.m-col-9 .m-item-box, .m-col-9 .m-auto-box {
  width: 11.11111%; }

.m-col-9 .m-item-box:nth-of-type(9n)::before {
  display: none; }

.m-col-10 .m-item-box, .m-col-10 .m-auto-box {
  width: 10%; }

.m-col-10 .m-item-box:nth-of-type(10n)::before {
  display: none; }

[class*="m-col"] {
  overflow: hidden; }

/**
 * card panel
 */
.m-panel {
  border-top-width: 1px;
  border-right-width: 0;
  border-bottom-width: 1px;
  border-left-width: 0;
  border-color: #e6e6e6;
  border-style: solid;
  background: #fff; }
  .android .m-panel {
    border-top-width: 1px;
    border-right-width: 0;
    border-bottom-width: 1px;
    border-left-width: 0;
    border-color: transparent;
    border-style: solid;
    -o-border-image: url("data:image/svg+xml;utf-8,%3C?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%0A%3C!--%20Generator:%20Adobe%20Illustrator%2016.0.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20%20--%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version=%221.1%22%20%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%0A%09%20width=%226px%22%20height=%226px%22%20viewBox=%220%200%206%206%22%20enable-background=%22new%200%200%206%206%22%20xml:space=%22preserve%22%3E%0A%3Crect%20x=%220.5%22%20y=%220.5%22%20fill=%22none%22%20stroke=%22#e6e6e6%22%20stroke-miterlimit=%2210%22%20width=%225%22%20height=%225%22/%3E%0A%3C/svg%3E") 2 repeat;
       border-image: url("data:image/svg+xml;utf-8,%3C?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%0A%3C!--%20Generator:%20Adobe%20Illustrator%2016.0.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20%20--%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version=%221.1%22%20%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%0A%09%20width=%226px%22%20height=%226px%22%20viewBox=%220%200%206%206%22%20enable-background=%22new%200%200%206%206%22%20xml:space=%22preserve%22%3E%0A%3Crect%20x=%220.5%22%20y=%220.5%22%20fill=%22none%22%20stroke=%22#e6e6e6%22%20stroke-miterlimit=%2210%22%20width=%225%22%20height=%225%22/%3E%0A%3C/svg%3E") 2 repeat; }
  .iosx2 .m-panel {
    -o-border-image: none;
       border-image: none;
    border-top-width: 0.5px;
    border-right-width: 0;
    border-bottom-width: 0.5px;
    border-left-width: 0; }
  .iosx3 .m-panel {
    -o-border-image: none;
       border-image: none;
    border-top-width: 0.35714px;
    border-right-width: 0;
    border-bottom-width: 0.35714px;
    border-left-width: 0; }

.m-bar-panel {
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 0 0 #fff, 0 -2px 2px -1px rgba(0, 0, 0, 0.15); }

.m-line-panel {
  background-color: #f9f9f9;
  border-top: 1px solid #e6e6e6; }
  .iosx2 .m-line-panel {
    border-top: 0.5px solid #e6e6e6; }
  .iosx3 .m-line-panel {
    border-top: 0.35714px solid #e6e6e6; }

/**
 * bubble
 */
.bubble {
  display: inline-block;
  vertical-align: middle; }

.bubble-red {
  padding: 0 0.3125rem;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.625rem;
  background: #ff5b36;
  color: #fff;
  font-size: 0.625rem;
  text-align: center; }

.bubble-red-s {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ff5b36; }

/**
 * button
 */
[class^="m-btn"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none; }

.m-btn {
  text-align: center;
  line-height: 2.625rem;
  height: 2.625rem;
  font-size: 1.0625rem;
  border-radius: 1.3125rem;
  outline: 0;
  display: inline-block;
  min-width: 4.375rem;
  box-sizing: border-box;
  padding: 0; }
  .m-btn.m-btn-block {
    width: 100%;
    display: block; }

.m-btn-round {
  display: inline-block;
  box-sizing: border-box;
  border-radius: 50%;
  width: 0.625em;
  height: 0.625em;
  font-size: 1.8rem;
  position: relative; }
  .m-btn-round:active .m-font {
    opacity: 0.6; }
  .m-btn-round .m-font {
    font-size: 0.375em;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    color: #fff; }

.m-btn-large {
  font-size: 2.2rem; }

.m-btn-media {
  font-size: 3.4rem;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2); }
  .m-btn-media .m-font {
    font-size: 0.25em; }
  .m-btn-media .m-font-play {
    margin-left: 0.125em; }
  .m-btn-media:active .m-font {
    opacity: 1; }

/*按钮名称 文字色 背景色 边框大小 边框颜色 激活色 激活边框*/
.m-btn-red {
  color: #fff;
  background: -webkit-linear-gradient(top, #f73b3b 0%, #f83232 100%);
  background: linear-gradient(to bottom, #f73b3b 0%, #f83232 100%);
  border: 0 solid transparent; }
  .iosx2 .m-btn-red {
    border: 0 solid transparent; }
  .iosx3 .m-btn-red {
    border: 0 solid transparent; }
  .m-btn-red:active {
    background: -webkit-linear-gradient(top, #d93434 0%, #d92b2b 100%);
    background: linear-gradient(to bottom, #d93434 0%, #d92b2b 100%);
    border-color: transparent; }
  .m-btn-red:disabled, .m-btn-red.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-red:disabled:active, .m-btn-red.m-btn-disabled:active {
    background: -webkit-linear-gradient(top, #f73b3b 0%, #f83232 100%);
    background: linear-gradient(to bottom, #f73b3b 0%, #f83232 100%);
    border-color: transparent; }

.m-btn-green {
  color: #fff;
  background: -webkit-linear-gradient(top, #18b52a 0%, #10b524 100%);
  background: linear-gradient(to bottom, #18b52a 0%, #10b524 100%);
  border: 0 solid transparent; }
  .iosx2 .m-btn-green {
    border: 0 solid transparent; }
  .iosx3 .m-btn-green {
    border: 0 solid transparent; }
  .m-btn-green:active {
    background: -webkit-linear-gradient(top, #149623 0%, #0e961e 100%);
    background: linear-gradient(to bottom, #149623 0%, #0e961e 100%);
    border-color: transparent; }
  .m-btn-green:disabled, .m-btn-green.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-green:disabled:active, .m-btn-green.m-btn-disabled:active {
    background: -webkit-linear-gradient(top, #18b52a 0%, #10b524 100%);
    background: linear-gradient(to bottom, #18b52a 0%, #10b524 100%);
    border-color: transparent; }

.m-btn-orange {
  color: #fff;
  background: linear-gradient(90deg, #FF8200 0%, #FFBC33 96.43%);
  border: 0 solid transparent; }
  .iosx2 .m-btn-orange {
    border: 0 solid transparent; }
  .iosx3 .m-btn-orange {
    border: 0 solid transparent; }
  .m-btn-orange:active {
    background: -webkit-linear-gradient(top, #e07809 0%, #e07400 100%);
    background: linear-gradient(to bottom, #e07809 0%, #e07400 100%);
    border-color: transparent; }
  .m-btn-orange:disabled, .m-btn-orange.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-orange:disabled:active, .m-btn-orange.m-btn-disabled:active {
    background: linear-gradient(90deg, #FF8200 0%, #FFBC33 96.43%);
    border-color: transparent; }

.m-btn-blue {
  color: #fff;
  background: -webkit-linear-gradient(top, #1a90ff 0%, #108cff 100%);
  background: linear-gradient(to bottom, #1a90ff 0%, #108cff 100%);
  border: 0 solid transparent; }
  .iosx2 .m-btn-blue {
    border: 0 solid transparent; }
  .iosx3 .m-btn-blue {
    border: 0 solid transparent; }
  .m-btn-blue:active {
    background: -webkit-linear-gradient(top, #167fe0 0%, #0d7ae0 100%);
    background: linear-gradient(to bottom, #167fe0 0%, #0d7ae0 100%);
    border-color: transparent; }
  .m-btn-blue:disabled, .m-btn-blue.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-blue:disabled:active, .m-btn-blue.m-btn-disabled:active {
    background: -webkit-linear-gradient(top, #1a90ff 0%, #108cff 100%);
    background: linear-gradient(to bottom, #1a90ff 0%, #108cff 100%);
    border-color: transparent; }

.m-btn-white {
  color: #787878;
  background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
  border: 1px solid #ccc; }
  .iosx2 .m-btn-white {
    border: 0.5px solid #ccc; }
  .iosx3 .m-btn-white {
    border: 0.35714px solid #ccc; }
  .m-btn-white:active {
    background: -webkit-linear-gradient(top, #e0e0e0 0%, #dbdbdb 100%);
    background: linear-gradient(to bottom, #e0e0e0 0%, #dbdbdb 100%);
    border-color: #adadad; }
  .m-btn-white:disabled, .m-btn-white.m-btn-disabled {
    color: rgba(120, 120, 120, 0.3); }
  .m-btn-white:disabled:active, .m-btn-white.m-btn-disabled:active {
    background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
    border-color: #ccc; }

.m-btn-ltgreen {
  color: #fff;
  background: #29c944;
  border: 0 solid transparent; }
  .iosx2 .m-btn-ltgreen {
    border: 0 solid transparent; }
  .iosx3 .m-btn-ltgreen {
    border: 0 solid transparent; }
  .m-btn-ltgreen:active {
    background: #1f9733;
    border-color: #1f9733; }
  .m-btn-ltgreen:disabled, .m-btn-ltgreen.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-ltgreen:disabled:active, .m-btn-ltgreen.m-btn-disabled:active {
    background: #29c944;
    border-color: transparent; }

.m-btn-ltred {
  color: #fff;
  background: #ef3f1e;
  border: 0 solid transparent; }
  .iosx2 .m-btn-ltred {
    border: 0 solid transparent; }
  .iosx3 .m-btn-ltred {
    border: 0 solid transparent; }
  .m-btn-ltred:active {
    background: #b32f16;
    border-color: #b32f16; }
  .m-btn-ltred:disabled, .m-btn-ltred.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-ltred:disabled:active, .m-btn-ltred.m-btn-disabled:active {
    background: #ef3f1e;
    border-color: transparent; }

.m-btn-bdgreen {
  color: #fff;
  background: #29c944;
  border: 1px solid #fff; }
  .iosx2 .m-btn-bdgreen {
    border: 0.5px solid #fff; }
  .iosx3 .m-btn-bdgreen {
    border: 0.35714px solid #fff; }
  .m-btn-bdgreen:active {
    background: #1f9733;
    border-color: #bfbfbf; }
  .m-btn-bdgreen:disabled, .m-btn-bdgreen.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-bdgreen:disabled:active, .m-btn-bdgreen.m-btn-disabled:active {
    background: #29c944;
    border-color: #fff; }

.m-btn-gray {
  color: #fff;
  background: #797979;
  border: 0 solid transparent; }
  .iosx2 .m-btn-gray {
    border: 0 solid transparent; }
  .iosx3 .m-btn-gray {
    border: 0 solid transparent; }
  .m-btn-gray:active {
    background: #bdbdbd;
    border-color: #bdbdbd; }
  .m-btn-gray:disabled, .m-btn-gray.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-gray:disabled:active, .m-btn-gray.m-btn-disabled:active {
    background: #797979;
    border-color: transparent; }

.m-btn-mblack {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  border: 0.0625rem solid #fff; }
  .iosx2 .m-btn-mblack {
    border: 0.03125rem solid #fff; }
  .iosx3 .m-btn-mblack {
    border: 0.02232rem solid #fff; }
  .m-btn-mblack:active {
    background: rgba(0, 0, 0, 0.3);
    border-color: #fff; }
  .m-btn-mblack:disabled, .m-btn-mblack.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-mblack:disabled:active, .m-btn-mblack.m-btn-disabled:active {
    background: rgba(0, 0, 0, 0.3);
    border-color: #fff; }

.m-btn-myellow {
  color: #fff;
  background: #faa247;
  border: 1px solid #fff; }
  .iosx2 .m-btn-myellow {
    border: 0.5px solid #fff; }
  .iosx3 .m-btn-myellow {
    border: 0.35714px solid #fff; }
  .m-btn-myellow:active {
    background: #faa247;
    border-color: #fff; }
  .m-btn-myellow:disabled, .m-btn-myellow.m-btn-disabled {
    color: rgba(255, 255, 255, 0.3); }
  .m-btn-myellow:disabled:active, .m-btn-myellow.m-btn-disabled:active {
    background: #faa247;
    border-color: #fff; }

.m-btn-white.m-btn-text-orange {
  color: #FF8200; }

.m-btn-white.m-btn-text-green {
  color: #10B524; }

.m-btn-white.m-btn-text-red {
  color: #e14123; }

.m-btn-white.m-btn-text-blue {
  color: #108cff; }

.m-btn-bdgreen .m-font {
  font-size: 0.4375em; }

.m-btn-gray {
  font-size: 1.6rem; }

.m-icon {
  display: inline-block;
  vertical-align: top;
  background-image: url("../../img/sprite.svg");
  background-size: 3em auto;
  width: 1em;
  height: 1em; }

.m-icon-yellowv {
  background-position: -1em -1em; }

.m-icon-bluev {
  background-position: -1em -4em; }

.m-icon-club {
  background-position: -1em -7em; }

.m-icon-vgirl {
  background-position: -1em -10em; }

.m-icon-male {
  background-position: -1em -13em; }

.m-icon-female {
  background-position: -1em -16em; }

.m-icon-vip {
  background-position: -1em -19em; }

.m-icon-nvip {
  background-position: -1em -22em; }

.m-icon-like {
  background-position: -1em -25em; }

.m-icon-liked {
  background-position: -1em -28em; }

.m-icon-warn {
  background-position: -1em -31em; }

.m-icon-vipl1 {
  background-position: -1em -34em; }

.m-icon-vipl2 {
  background-position: -1em -37em; }

.m-icon-vipl3 {
  background-position: -1em -40em; }

.m-icon-vipl4 {
  background-position: -1em -43em; }

.m-icon-vipl5 {
  background-position: -1em -46em; }

.m-icon-vipl6 {
  background-position: -1em -49em; }

.m-icon {
  font-size: 14px; }

.m-icon-large {
  font-size: 22px; }

.m-icon-warn {
  font-size: 18px; }

/**
 * form
 */
label {
  vertical-align: middle; }

.m-switch {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 1rem; }
  .m-switch input[type="checkbox"] {
    opacity: 0;
    position: absolute; }
    .m-switch input[type="checkbox"] + span {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      width: 3.1875em;
      height: 2em;
      background: #fff;
      box-shadow: inset 0 0 0 0.09375em #ebebeb;
      border-radius: 1em;
      -webkit-transition: all 0.3s cubic-bezier(0.17, 0.67, 0.43, 0.98);
              transition: all 0.3s cubic-bezier(0.17, 0.67, 0.43, 0.98); }
      .m-switch input[type="checkbox"] + span:after {
        position: absolute;
        content: '';
        width: 1.875em;
        height: 1.875em;
        border-radius: 0.9375em;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        left: 0;
        background: #fff;
        box-shadow: inset 0 0 0.125em -0.0625em rgba(0, 0, 0, 0.8), 0 0.0625em 0.0625em 0.03125em rgba(0, 0, 0, 0.1), 0 0.1875em 0.0625em 0.03125em rgba(0, 0, 0, 0.15), 0 0.3125em 0.3125em 0 rgba(0, 0, 0, 0.1);
        -webkit-transition: all 0.2s linear;
                transition: all 0.2s linear; }
    .m-switch input[type="checkbox"]:checked + span {
      box-shadow: inset 0 0 0 1.25em #29c944; }
      .m-switch input[type="checkbox"]:checked + span:after {
        left: 1.25em; }

.m-checkbox {
  display: inline-block;
  font-size: 1rem;
  position: relative; }
  .m-checkbox span {
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #ccc;
    background: #fff;
    width: 1.125em;
    height: 1.125em;
    line-height: 1.125em;
    margin: 0;
    text-align: center;
    overflow: hidden;
    vertical-align: middle; }
    .iosx2 .m-checkbox span {
      border: 0.5px solid #ccc; }
    .iosx3 .m-checkbox span {
      border: 0.35714px solid #ccc; }
  .m-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute; }
    .m-checkbox input[type="checkbox"]:checked + span .m-font {
      display: inline-block; }
  .m-checkbox .m-font {
    font-size: 0.875em;
    display: none;
    color: #29c944; }
  .m-checkbox em {
    font-size: 0.8125rem;
    color: #939393;
    vertical-align: middle; }

.m-radio {
  display: inline-block;
  position: relative; }
  .m-radio input[type="radio"] {
    opacity: 0;
    position: absolute; }
    .m-radio input[type="radio"]:checked + span:after {
      /*display: inline-block;*/ }
  .m-radio span {
    box-sizing: border-box;
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 50%;
    padding: 0.1875em;
    vertical-align: top; }
    .iosx2 .m-radio span {
      border: 0.5px solid #ccc; }
    .iosx3 .m-radio span {
      border: 0.35714px solid #ccc; }
    .m-radio span:after {
      content: "";
      display: none;
      border-radius: 50%;
      background: #29c944;
      position: absolute;
      top: 0.25em;
      right: 0.25em;
      bottom: 0.25em;
      left: 0.25em; }

.m-num {
  border-radius: 0.25rem;
  border: 1px solid #e6e6e6;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  display: inline-block;
  background: #fff;
  font-size: 1rem;
  color: #939393; }
  .iosx2 .m-num {
    border: 0.5px solid #e6e6e6; }
  .iosx3 .m-num {
    border: 0.35714px solid #e6e6e6; }
  .m-num span {
    display: inline-block;
    vertical-align: top;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center; }
  .m-num input[type="tel"] {
    width: 7.3125em;
    height: 2em;
    line-height: 2em;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-radius: 0;
    text-align: center;
    color: #FF8200; }
    .iosx2 .m-num input[type="tel"] {
      border-right: 0.5px solid #e6e6e6; }
    .iosx3 .m-num input[type="tel"] {
      border-right: 0.35714px solid #e6e6e6; }
    .iosx2 .m-num input[type="tel"] {
      border-left: 0.5px solid #e6e6e6; }
    .iosx3 .m-num input[type="tel"] {
      border-left: 0.35714px solid #e6e6e6; }

.m-search {
  display: block;
  background: #e3e4e6;
  color: #939393;
  border-radius: 0.25rem;
  box-sizing: border-box;
  position: relative; }
  .m-search .m-font {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    left: 0.8125rem; }
  .m-search input[type="search"] {
    border: none;
    background: transparent;
    width: 100%;
    height: 1.75rem;
    font-size: 0.8125rem;
    padding: 0 0 0 2.1875rem; }

.m-textarea {
  display: block;
  position: relative;
  color: #939393; }
  .m-textarea h3 {
    font-size: 0.75rem;
    margin: 0 0 0.4375rem 0; }
  .m-textarea textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.625rem;
    font-size: 0.8125rem;
    border: 1px solid #e6e6e6;
    -webkit-appearance: none;
    resize: none;
    border-radius: 0.1875rem;
    outline: none;
    min-height: 4.375rem;
    box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.25); }
    .iosx2 .m-textarea textarea {
      border: 0.5px solid #e6e6e6; }
    .iosx3 .m-textarea textarea {
      border: 0.35714px solid #e6e6e6; }
  .m-textarea .ta-plus {
    position: absolute;
    bottom: 0.4375rem;
    right: 0.625rem;
    font-size: 0.6875rem; }
    .m-textarea .ta-plus .m-btn-round {
      vertical-align: middle;
      font-size: 1rem;
      background: #c0c0c0; }

.m-select select {
  -webkit-appearance: none;
  background-color: #fff;
  border: none;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9375rem;
  outline: none;
  padding: 0.6875rem;
  vertical-align: top; }
  .m-select select:required:invalid {
    color: rgba(147, 147, 147, 0.4); }
  .m-select select option {
    color: #333; }
    .m-select select option[value=""][disabled] {
      display: none; }

.m-form-list .m-tb {
  width: 100%; }

.m-form-list .m-tr + .m-tr .m-td {
  border-top: 1px solid #e6e6e6; }
  .iosx2 .m-form-list .m-tr + .m-tr .m-td {
    border-top: 0.5px solid #e6e6e6; }
  .iosx3 .m-form-list .m-tr + .m-tr .m-td {
    border-top: 0.35714px solid #e6e6e6; }

.m-form-list .m-td {
  height: 2.8125rem;
  line-height: 2.8125rem;
  vertical-align: top; }
  .m-form-list .m-td:first-child {
    width: 1px; }
  .m-form-list .m-td label {
    color: #939393;
    font-size: 0.9375rem;
    vertical-align: top;
    margin: 0 0 0 0.75rem;
    white-space: nowrap; }
    .m-form-list .m-td label b {
      color: #e14123;
      vertical-align: middle; }

.m-form-list input {
  border: none;
  font-size: 0.9375rem;
  padding: 0.6875rem;
  color: #333;
  box-sizing: border-box;
  width: 100%; }

/**
 * tip layer
 */
.m-popup {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 7.5rem;
  height: 7.5rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  border-radius: 0.3125rem; }
  .m-popup .m-box {
    height: 100%; }
  .m-popup header {
    margin: 0 0 0.75rem 0; }
  .m-popup .m-font {
    color: #fff;
    font-size: 2.3125rem;
    vertical-align: top; }
  .m-popup h3 {
    font-size: 1rem; }

/**
 * alert layer
 */
.m-alert {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 16.875rem;
  border-radius: 0.3125rem;
  background: rgba(255, 255, 255, 0.95);
  text-align: center;
  -webkit-backdrop-filter: blur(0.625rem); }
  .m-alert header {
    padding: 1.25rem;
    color: #000;
    line-height: 1.25; }
    .m-alert header h2 {
      font-size: 1rem; }
    .m-alert header h3 {
      font-size: 0.75rem;
      margin: 0.5rem 0 0 0; }
  .m-alert footer {
    font-size: 1rem;
    border-top: 1px solid #b6b6b6; }
    .iosx2 .m-alert footer {
      border-top: 0.5px solid #b6b6b6; }
    .iosx3 .m-alert footer {
      border-top: 0.35714px solid #b6b6b6; }
    .m-alert footer .m-box-col + .m-box-col {
      border-left: 1px solid #b6b6b6; }
      .iosx2 .m-alert footer .m-box-col + .m-box-col {
        border-left: 0.5px solid #b6b6b6; }
      .iosx3 .m-alert footer .m-box-col + .m-box-col {
        border-left: 0.35714px solid #b6b6b6; }
    .m-alert footer a {
      display: block;
      line-height: 2.8125rem;
      color: #007aff; }

@supports (overflow: -webkit-marquee) and (justify-content: inherit) {
  .m-alert {
    background: rgba(255, 255, 255, 0.8); } }

/**
 * dialog layer
 */
.m-dialog {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 17.5rem;
  background: #f8f8f8;
  padding: 1rem 0.875rem;
  border-radius: 0.125rem;
  box-shadow: 0 0 0.1875rem rgba(0, 0, 0, 0.2);
  text-align: center; }
  .m-dialog h2 {
    margin: 1.875rem 0 2.1875rem 0;
    font-size: 1.125rem; }
  .m-dialog h3 {
    font-size: 0.9375rem;
    margin: 2.1875rem 0;
    color: #636363; }

/**
 * bottom bar
 */
/**transform backface-visibility是处理页面调整时，偶发fixed元素莫名消失的问题**/
.m-bottom-bar {
  position: fixed;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.375rem 0.75rem; }
  .m-bottom-bar aside {
    padding: 0 2.125rem 0 0; }
  .m-bottom-bar .bar-text {
    font-size: 0.6875rem;
    color: #FF8200;
    text-align: center;
    padding: 0 0 0.375rem 0; }
  .m-bottom-bar .m-btn-box {
    margin: 0 -0.75rem; }
    .m-bottom-bar .m-btn-box .m-diy-btn {
      color: #636363; }
      .m-bottom-bar .m-btn-box .m-diy-btn h4 {
        margin-top: 0.1875rem; }
      .m-bottom-bar .m-btn-box .m-diy-btn.m-cur .m-font {
        color: #FF8200; }
      .m-bottom-bar .m-btn-box .m-diy-btn.m-cur h4 {
        color: #FF8200; }

/**
 * tab bar
 */
.m-tab-bar {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0; }
  .m-tab-bar > div {
    height: 2.8125rem;
    line-height: 2.8125rem; }
  .m-tab-bar .m-ctrl-box {
    border: 0; }
    .m-tab-bar .m-ctrl-box .m-diy-btn .m-font-bars {
      font-size: 0.75rem; }
    .m-tab-bar .m-ctrl-box .m-diy-btn h4 {
      font-size: 0.9375rem; }
    .m-tab-bar .m-ctrl-box .m-add-box .m-font {
      font-size: 0.875rem; }
  .m-tab-bar .nav-box {
    font-size: 1.25rem; }
    .m-tab-bar .nav-box .nav-ctrl {
      display: inline-block;
      color: #707070;
      text-align: center;
      margin: 0 0.75rem; }
  .m-tab-bar .page-box .m-box-col {
    color: #939393;
    font-size: 0.875rem; }
    .m-tab-bar .page-box .m-box-col + .m-box-col {
      border-left: 1px solid #e6e6e6; }
      .iosx2 .m-tab-bar .page-box .m-box-col + .m-box-col {
        border-left: 0.5px solid #e6e6e6; }
      .iosx3 .m-tab-bar .page-box .m-box-col + .m-box-col {
        border-left: 0.35714px solid #e6e6e6; }
    .m-tab-bar .page-box .m-box-col .m-font {
      font-size: 0.75rem;
      margin: 0 0 0 0.4375rem; }
  .m-tab-bar .page-box .m-cur {
    color: #507DAF; }

/**
 * tab
 */
.m-tab {
  background: #f5f5f5; }
  .m-tab a {
    line-height: 2.5625rem;
    color: #333;
    text-align: center;
    font-size: 0.9375rem; }
    .m-tab a.m-cur {
      color: #FF8200;
      box-shadow: inset 0 -2px 0 0 #FF8200; }

/**
 * tab
 */
.m-top-bar {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  height: 2.75rem; }
  .m-top-bar .nav-ctrl {
    color: #636363;
    font-size: 0.9375rem;
    text-align: center;
    display: inline-block;
    padding: 0 0.625rem; }
    .m-top-bar .nav-ctrl .m-font {
      vertical-align: top;
      font-size: 1.25rem; }
  .m-top-bar .nav-left,
  .m-top-bar .nav-right,
  .m-top-bar .nav-main {
    position: absolute;
    line-height: 2.75rem; }
  .m-top-bar .nav-left {
    left: 0; }
  .m-top-bar .nav-right {
    right: 0; }
  .m-top-bar .nav-main {
    left: 0;
    right: 0;
    top: 0;
    right: 0;
    text-align: center;
    font-size: 1.125rem;
    color: #333; }
    .m-top-bar .nav-main h3 {
      display: inline-block;
      max-width: 12rem; }

/**
 * tab
 */
.m-top-nav {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  height: 2.3125rem;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6; }
  .iosx2 .m-top-nav {
    border-bottom: 0.5px solid #e6e6e6; }
  .iosx3 .m-top-nav {
    border-bottom: 0.35714px solid #e6e6e6; }
  .m-top-nav .nav-main {
    overflow: hidden;
    width: 1px; }
    .m-top-nav .nav-main::before {
      content: "";
      position: absolute;
      z-index: 9;
      width: 0.75rem;
      left: 0;
      top: 0;
      bottom: 0;
      background: -webkit-linear-gradient(left, white 0%, white 50%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(to right, white 0%, white 50%, rgba(255, 255, 255, 0) 100%); }
  .m-top-nav .scroll-box {
    overflow: auto;
    -webkit-overflow-scrolling: touch; }
    .m-top-nav .scroll-box::-webkit-scrollbar {
      display: none; }
  .m-top-nav .nav-item {
    white-space: nowrap;
    padding: 0 0.5rem; }
    .m-top-nav .nav-item li {
      display: inline-block;
      font-size: 1rem;
      line-height: 2.3125rem;
      padding: 0 0.5625rem; }
      .m-top-nav .nav-item li span {
        display: block;
        padding: 0 0.25rem; }
      .m-top-nav .nav-item li.m-cur span {
        color: #FF8200;
        box-shadow: inset 0 -2px 0 0 #FF8200; }
  .m-top-nav .nav-plus {
    width: 2.4375rem;
    position: relative; }
    .m-top-nav .nav-plus::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 0.5rem;
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
      -webkit-mask: -webkit-linear-gradient(top, transparent, #000 45%, #000 55%, transparent 100%);
      border-right: 1px solid #ccc;
      box-shadow: inset -3px 0 3px rgba(0, 0, 0, 0.11); }
      .iosx2 .m-top-nav .nav-plus::before {
        border-right: 0.5px solid #ccc; }
      .iosx3 .m-top-nav .nav-plus::before {
        border-right: 0.35714px solid #ccc; }

/**
 * loading
 */
.m-loading {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  width: 2.3125em;
  height: 2.3125em; }
  .m-loading span {
    position: absolute;
    will-change: background-color;
    left: 1.10938em;
    bottom: 0;
    width: 0.09375em;
    height: 0.5em;
    border-radius: 0.25em;
    background-color: transparent;
    -webkit-transform-origin: center -0.65625em;
            transform-origin: center -0.65625em;
    -webkit-backface-visibility: hidden; }
    .m-loading span:nth-child(1) {
      -webkit-animation-delay: 0s;
              animation-delay: 0s;
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg); }
    .m-loading span:nth-child(2) {
      -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
      -webkit-transform: rotate(30deg);
              transform: rotate(30deg); }
    .m-loading span:nth-child(3) {
      -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
      -webkit-transform: rotate(60deg);
              transform: rotate(60deg); }
    .m-loading span:nth-child(4) {
      -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg); }
    .m-loading span:nth-child(5) {
      -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
      -webkit-transform: rotate(120deg);
              transform: rotate(120deg); }
    .m-loading span:nth-child(6) {
      -webkit-animation-delay: 0.5s;
              animation-delay: 0.5s;
      -webkit-transform: rotate(150deg);
              transform: rotate(150deg); }
    .m-loading span:nth-child(7) {
      -webkit-animation-delay: 0.6s;
              animation-delay: 0.6s;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg); }
    .m-loading span:nth-child(8) {
      -webkit-animation-delay: 0.7s;
              animation-delay: 0.7s;
      -webkit-transform: rotate(210deg);
              transform: rotate(210deg); }
    .m-loading span:nth-child(9) {
      -webkit-animation-delay: 0.8s;
              animation-delay: 0.8s;
      -webkit-transform: rotate(240deg);
              transform: rotate(240deg); }
    .m-loading span:nth-child(10) {
      -webkit-animation-delay: 0.9s;
              animation-delay: 0.9s;
      -webkit-transform: rotate(270deg);
              transform: rotate(270deg); }
    .m-loading span:nth-child(11) {
      -webkit-animation-delay: 1s;
              animation-delay: 1s;
      -webkit-transform: rotate(300deg);
              transform: rotate(300deg); }
    .m-loading span:nth-child(12) {
      -webkit-animation-delay: 1.1s;
              animation-delay: 1.1s;
      -webkit-transform: rotate(330deg);
              transform: rotate(330deg); }

.m-loading-dark span {
  -webkit-animation: loading-fade-dark 1.1s infinite linear;
          animation: loading-fade-dark 1.1s infinite linear; }

@-webkit-keyframes loading-fade-dark {
  0% {
    background-color: #5c5c5c; }
  100% {
    background-color: transparent; } }

@keyframes loading-fade-dark {
  0% {
    background-color: #5c5c5c; }
  100% {
    background-color: transparent; } }

.m-loading-light span {
  -webkit-animation: loading-fade-light 1.1s infinite linear;
          animation: loading-fade-light 1.1s infinite linear; }

@-webkit-keyframes loading-fade-light {
  0% {
    background-color: #fff; }
  100% {
    background-color: transparent; } }

@keyframes loading-fade-light {
  0% {
    background-color: #fff; }
  100% {
    background-color: transparent; } }

/**
 * tip layer
 */
.m-tips {
  font-size: 0.875rem;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
  position: relative; }
  .m-tips .m-font-arrow-right,
  .m-tips .m-font-close {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    color: #fff;
    font-size: 0.75rem; }
  .m-tips.m-tips-music {
    text-align: left; }
    .m-tips.m-tips-music .m-img-box {
      width: 2rem;
      vertical-align: top; }
    .m-tips.m-tips-music .main-link {
      font-size: 0.8125rem;
      margin: 0 0 0 0.75rem;
      vertical-align: top; }
    .m-tips.m-tips-music .sub-link {
      font-size: 0.8125rem;
      opacity: 0.7;
      vertical-align: top; }
    .m-tips.m-tips-music .m-font-chart {
      font-size: 1.25rem;
      vertical-align: top;
      margin: 0 0 0 0.5625rem; }
  .m-tips.m-tips-tp {
    font-size: 0.75rem; }
    .m-tips.m-tips-tp .m-font {
      font-size: 1.125rem;
      vertical-align: middle; }
    .m-tips.m-tips-tp .m-loading {
      vertical-align: middle;
      font-size: 0.54054rem; }
    .m-tips.m-tips-tp .main-link {
      margin: 0 0 0 0.6875rem; }
  .m-tips.m-tips-tps {
    font-size: 0.6875rem; }
    .m-tips.m-tips-tps .m-font {
      vertical-align: top;
      margin: 0 0.3125rem 0 0; }

.m-tips-ltyellow {
  color: #f48800;
  background: #feeddb; }

.m-tips-yellow {
  color: #fffefe;
  background: #fdab57; }

.m-tips-red {
  color: #fff;
  background: #fd7d66; }

.m-tips-pink {
  color: #fff;
  background: -webkit-linear-gradient(top, #ce8a92 0%, #cf978f 100%);
  background: linear-gradient(to bottom, #ce8a92 0%, #cf978f 100%); }

.m-tips-tp {
  color: #7c7c7c;
  background: transparent; }

.m-tips-tps {
  color: #bfbfbf;
  background: transparent; }

/**
 * pop layer
 */
.m-pop {
  position: absolute;
  z-index: 999; }
  .m-pop.m-pop-s {
    border: 1px solid #a6a6a6;
    border-radius: 0.1875rem;
    background: #fff;
    -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2)); }
    .iosx2 .m-pop.m-pop-s {
      border: 0.5px solid #a6a6a6; }
    .iosx3 .m-pop.m-pop-s {
      border: 0.35714px solid #a6a6a6; }
    .m-pop.m-pop-s:after {
      content: "";
      position: absolute;
      z-index: 8;
      width: 0.625rem;
      height: 0.625rem;
      background: #fff;
      border-top: 1px solid #a6a6a6;
      border-left: 1px solid #a6a6a6;
      border-radius: 0.0625rem 0 0 0;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: rotate(-135deg);
              transform: rotate(-135deg);
      left: 50%;
      bottom: -1.13812rem; }
      .iosx2 .m-pop.m-pop-s:after {
        border-top: 0.5px solid #a6a6a6; }
      .iosx3 .m-pop.m-pop-s:after {
        border-top: 0.35714px solid #a6a6a6; }
      .iosx2 .m-pop.m-pop-s:after {
        border-left: 0.5px solid #a6a6a6; }
      .iosx3 .m-pop.m-pop-s:after {
        border-left: 0.35714px solid #a6a6a6; }
    .m-pop.m-pop-s ul {
      padding: 0.125rem 0.3125rem;
      background: #fff;
      border-radius: 0.1875rem;
      position: relative;
      z-index: 9; }
    .m-pop.m-pop-s li {
      min-width: 3.0625rem;
      text-align: center; }
      .m-pop.m-pop-s li + li {
        border-top: 1px solid #e6e6e6; }
        .iosx2 .m-pop.m-pop-s li + li {
          border-top: 0.5px solid #e6e6e6; }
        .iosx3 .m-pop.m-pop-s li + li {
          border-top: 0.35714px solid #e6e6e6; }
      .m-pop.m-pop-s li a {
        display: block;
        height: 2.3125rem;
        line-height: 2.3125rem;
        color: #333;
        font-size: 0.875rem;
        border-radius: 0.1875rem;
        margin: 0.1875rem 0; }
        .m-pop.m-pop-s li a:active {
          background: #ededed; }
  .m-pop.m-pop-lt {
    background: #f8f8f8;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
    padding: 0 0.875rem 1rem 0.875rem;
    border-radius: 0.3125rem;
    color: #333; }
    .m-pop.m-pop-lt header {
      line-height: 2.875rem;
      font-size: 1.125rem; }
    .m-pop.m-pop-lt section {
      border-top: 1px solid #f2f2f2;
      border-bottom: 1px solid #f2f2f2;
      font-size: 0.9375rem; }
      .iosx2 .m-pop.m-pop-lt section {
        border-top: 0.5px solid #f2f2f2; }
      .iosx3 .m-pop.m-pop-lt section {
        border-top: 0.35714px solid #f2f2f2; }
      .iosx2 .m-pop.m-pop-lt section {
        border-bottom: 0.5px solid #f2f2f2; }
      .iosx3 .m-pop.m-pop-lt section {
        border-bottom: 0.35714px solid #f2f2f2; }
      .m-pop.m-pop-lt section .gp-list {
        max-height: 12.5rem;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; }
        .m-pop.m-pop-lt section .gp-list li:last-child {
          border: none; }
      .m-pop.m-pop-lt section a {
        color: #333; }
      .m-pop.m-pop-lt section .m-font-plus {
        vertical-align: top;
        margin: 0 0.4375rem 0 0; }
      .m-pop.m-pop-lt section ul {
        width: 14.875rem;
        margin: 0 -0.3125rem;
        padding: 0 0.3125rem; }
      .m-pop.m-pop-lt section li {
        border-bottom: 1px solid #f2f2f2; }
        .iosx2 .m-pop.m-pop-lt section li {
          border-bottom: 0.5px solid #f2f2f2; }
        .iosx3 .m-pop.m-pop-lt section li {
          border-bottom: 0.35714px solid #f2f2f2; }
        .m-pop.m-pop-lt section li a, .m-pop.m-pop-lt section li label {
          display: block;
          height: 2.25rem;
          line-height: 2.25rem;
          margin: 0.1875rem -0.3125rem;
          padding: 0 0.3125rem;
          -webkit-touch-callout: none;
          -webkit-user-select: none; }
          .m-pop.m-pop-lt section li a:active, .m-pop.m-pop-lt section li label:active {
            background: #f2f2f2; }
        .m-pop.m-pop-lt section li .m-checkbox span {
          position: absolute;
          right: 0.3125rem;
          top: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%); }
    .m-pop.m-pop-lt .m-btm-btns {
      margin: 0.9375rem 0 0 0; }

/**
 * animations
 */
.m-animated {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both; }

.m-an-pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-timing-function: cubic-bezier(0.88, 0.48, 0.63, 1);
          animation-timing-function: cubic-bezier(0.88, 0.48, 0.63, 1); }

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

/**
 * adapter
 */
@media screen and (min-width: 414px) and (max-width: 767px) {
  html {
    font-size: 16.96px; }
  .m-icon {
    font-size: 15px; }
  .m-icon-large {
    font-size: 24px; }
  .m-icon-warn {
    font-size: 20px; } }

@media screen and (min-width: 768px) {
  html {
    font-size: 20px; }
  .m-icon {
    font-size: 18px; }
  .m-icon-large {
    font-size: 28px; }
  .m-icon-warn {
    font-size: 23px; } }

@media screen and (min-width: 769px) {
  .m-container-max {
    width: 750px;
    margin: 0 auto; } }