html,
      body {
        min-height: 100vh;
        background: #130F26;
      }

      #loadingMask {
        width: 100%;
        height: 100vh;
        background: #130F26;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10000;
      }

      #loading {
        width: 70px;
        height: 70px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-image: url('https://m.mobilelegends.com/static/images/loading.png');
        background-repeat: no-repeat;
        background-size: 350px 70px;
        animation-name: loadingAnimate;
        animation-duration: 500ms;
        animation-iteration-count: infinite;
        animation-timing-function: step-start;
        -webkit-animation-name: loadingAnimate;
        -webkit-animation-duration: 500ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: step-start;
      }

      @keyframes loadingAnimate {
        0% {
          background-position: 0 0;
        }

        25% {
          background-position: -70px 0;
        }

        50% {
          background-position: -140px 0;
        }

        75% {
          background-position: -210px 0;
        }

        1000% {
          background-position: -280px 0;
        }
      }

      @-moz-keyframes loadingAnimate {
        0% {
          background-position: 0 0;
        }

        20% {
          background-position: -70px 0;
        }

        40% {
          background-position: -140px 0;
        }

        60% {
          background-position: -210px 0;
        }

        80% {
          background-position: -280px 0;
        }

        100% {
          background-position: 0 0;
        }
      }

      @-webkit-keyframes loadingAnimate {
        0% {
          background-position: 0 0;
        }

        20% {
          background-position: -70px 0;
        }

        40% {
          background-position: -140px 0;
        }

        60% {
          background-position: -210px 0;
        }

        80% {
          background-position: -280px 0;
        }

        100% {
          background-position: 0 0;
        }
      }

      @-o-keyframes loadingAnimate {
        0% {
          background-position: 0 0;
        }

        20% {
          background-position: -70px 0;
        }

        40% {
          background-position: -140px 0;
        }

        60% {
          background-position: -210px 0;
        }

        80% {
          background-position: -280px 0;
        }

        100% {
          background-position: 0 0;
        }
      }

      @media screen and (orientation:landscape) {
        #outcontainer {
          padding-left: .77961rem
        }

        #outcontainer .changecountry {
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 10000;
          background-color: rgba(0, 0, 0, .5)
        }

        #outcontainer .changecountry ul {
          font-size: 0;
          position: absolute;
          height: .67466rem;
          width: 5.997rem;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          text-align: center
        }

        #outcontainer .changecountry ul li {
          position: relative;
          display: inline-block;
          width: 1.34933rem;
          height: .67466rem;
          line-height: .67466rem;
          text-align: center;
          border: 1px solid #4e517d;
          border-right: 0;
          background-color: #252c5b
        }

        #outcontainer .changecountry ul li.now .bk {
          display: none
        }

        #outcontainer .changecountry ul li .bk {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 2;
          background-color: rgba(0, 0, 0, .8)
        }

        #outcontainer .changecountry ul li:last-child {
          border-right: 1px solid #4e517d
        }

        #outcontainer .changecountry ul li img {
          width: .44978rem;
          vertical-align: middle;
          height: .44978rem
        }
      }

      @media screen and (orientation:portrait) {
        #outcontainer {
          padding-bottom: 1.2rem
        }

        #outcontainer .country {
          position: fixed;
          top: 0;
          left: 0;
          width: 1.38667rem;
          height: .64rem;
          background-color: #1e2139;
          background-position: 50%;
          background-repeat: no-repeat;
          background-size: .46667rem;
          z-index: 1000
        }

        #outcontainer .country.en {
          background-image: url("https://m.mobilelegends.com/static/images/country/en.png")
        }

        #outcontainer .country.id {
          background-image: url("https://m.mobilelegends.com/static/images/country/id.png")
        }

        #outcontainer .changecountry {
          position: fixed;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 10000;
          background-color: rgba(0, 0, 0, .5)
        }

        #outcontainer .changecountry ul {
          font-size: 0;
          position: absolute;
          height: 1.2rem;
          width: 10.66667rem;
          top: .64rem;
          left: 0;
          margin: auto;
          text-align: center
        }

        #outcontainer .changecountry ul li {
          position: relative;
          width: 1.38667rem;
          height: .64rem;
          line-height: .64rem;
          text-align: center;
          border: 1px solid #4e517d;
          background-color: #252c5b
        }

        #outcontainer .changecountry ul li.now .bk {
          display: none
        }

        #outcontainer .changecountry ul li .bk {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 2;
          background-color: rgba(0, 0, 0, .8)
        }

        #outcontainer .changecountry ul li:last-child {
          border-top: 0
        }

        #outcontainer .changecountry ul li img {
          width: .44rem;
          vertical-align: middle;
          height: .44rem
        }
      }

      input {
        -webkit-user-select: auto !important
      }

      @font-face {
        font-family: iconfont;
        src: url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.eot");
        src: url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.woff") format("woff"), url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.ttf") format("truetype"), url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.svg#iconfont") format("svg")
      }

      a,
      abbr,
      acronym,
      address,
      applet,
      article,
      aside,
      audio,
      b,
      big,
      blockquote,
      body,
      canvas,
      caption,
      center,
      cite,
      code,
      dd,
      del,
      details,
      dfn,
      div,
      dl,
      dt,
      em,
      embed,
      fieldset,
      figcaption,
      figure,
      footer,
      form,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      header,
      hgroup,
      html,
      i,
      iframe,
      img,
      ins,
      kbd,
      label,
      legend,
      li,
      mark,
      menu,
      nav,
      object,
      ol,
      output,
      p,
      pre,
      q,
      ruby,
      s,
      samp,
      section,
      small,
      span,
      strike,
      strong,
      sub,
      summary,
      sup,
      table,
      tbody,
      td,
      tfoot,
      th,
      thead,
      time,
      tr,
      tt,
      u,
      ul,
      var,
      video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        font-family: arial;
        -webkit-overflow-scrolling: touch;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
      }

      article,
      aside,
      details,
      figcaption,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block
      }

      body.maskbody {
        position: fixed;
        width: 100%
      }

      @media screen and (orientation:landscape) {
        body {
          background-position: 50%;
          background-size: 10rem 1px;
          background-repeat: repeat-y;
          background-image: url(https://m.mobilelegends.com/static/images/background/bodybac.png);
          background-color: #150b28
        }

        .getmore {
          display: block;
          height: .32984rem;
          width: 100%;
          font-size: .13493rem;
          text-align: center;
          line-height: .32984rem;
          color: #8b90b9;
          background-color: #2a2f52
        }

        .commonbar {
          position: fixed;
          top: 0;
          left: .77961rem;
          right: 0;
          z-index: 2;
          height: .5997rem;
          background-color: #141831
        }

        .commonbar ul {
          border-bottom: .01499rem solid #2c2f49
        }

        .commonbar ul li {
          font-size: .1949rem;
          text-align: center;
          line-height: .5997rem;
          height: .5997rem;
          position: relative
        }

        .commonbar ul li a {
          display: inline-block;
          width: 100%;
          height: 100%
        }

        .commonbar ul li.search {
          width: .55472rem;
          height: .5997rem;
          background-position: 50%;
          background-size: .22489rem .21739rem;
          background-repeat: no-repeat;
          background-image: url(https://m.mobilelegends.com/static/images/icons/search.png)
        }

        .commonbar ul li.now a {
          color: #00b0ff;
          border-bottom: .03748rem solid #00b0ff
        }

        .commonbar ul li a {
          color: #fff
        }

        .commonbar ul li.line {
          width: 1px;
          height: .1949rem;
          background-color: #2c2f49
        }

        .graphicwrapper {
          background-color: #1a1e3d
        }

        .graphicitem {
          position: relative;
          padding: 0 .12744rem;
          padding-bottom: .11244rem
        }

        .graphicitem:first-child p {
          border-top: 0
        }

        .graphicitem p {
          padding-top: .11244rem;
          color: #b2b7dd;
          font-size: .16492rem;
          line-height: 1.1;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          border-top: 1px dashed #7b7e9a
        }

        .graphicitem .add {
          margin-top: .09745rem;
          text-align: right
        }

        .graphicitem .add span {
          color: rgba(71, 75, 111, .8);
          font-size: .13493rem
        }

        .v {
          display: none !important
        }
      }

      @media screen and (orientation:portrait) {
        .richtext iframe {
          max-height: 200px
        }

        body {
          background-position: 50%;
          background-size: 5.62219rem 1px;
          background-repeat: repeat-y;
          background-image: url(https://m.mobilelegends.com/static/images/background/bodybac.png);
          background-color: #150b28
        }

        .getmore {
          display: block;
          height: .66667rem;
          width: 100%;
          font-size: .32rem;
          text-align: center;
          line-height: .66667rem;
          margin-top: .21333rem;
          color: #8b90b9;
          background-color: #2a2f52
        }

        .commonbar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 2;
          background-color: #141831;
          overflow: auto;
          word-wrap: break-word;
          overflow-y: hidden;
          height: 1.09333rem
        }

        .commonbar ul {
          border-bottom: .02667rem solid #2c2f49;
          width: 16rem
        }

        .commonbar ul li {
          font-size: .34667rem;
          text-align: center;
          line-height: 1.09333rem;
          height: 1.09333rem;
          position: relative;
          border-bottom: .06667rem solid transparent
        }

        .commonbar ul li a {
          display: inline-block;
          width: 100%;
          height: 100%
        }

        .commonbar ul li.search {
          width: .98667rem;
          height: 1.09333rem;
          background-position: 50%;
          background-size: .4rem .38667rem;
          background-repeat: no-repeat;
          background-image: url(https://m.mobilelegends.com/static/images/icons/search.png)
        }

        .commonbar ul li.now {
          border-bottom: .06667rem solid #00b0ff
        }

        .commonbar ul li.now a {
          color: #00b0ff
        }

        .commonbar ul li a {
          color: #fff
        }

        .commonbar ul li.line {
          width: 1px;
          height: .34667rem;
          background-color: #2c2f49
        }

        .graphicwrapper {
          background-color: #1a1e3d
        }

        .graphicitem {
          position: relative;
          padding: 0 .22667rem;
          padding-bottom: .2rem
        }

        .graphicitem:first-child p {
          border-top: 0
        }

        .graphicitem p {
          padding-top: .2rem;
          color: #b2b7dd;
          font-size: .29333rem;
          line-height: 1.1;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          border-top: 1px dashed #7b7e9a
        }

        .graphicitem .add {
          margin-top: .17333rem;
          text-align: right
        }

        .graphicitem .add span {
          color: rgba(71, 75, 111, .8);
          font-size: .24rem
        }

        .m {
          display: none !important
        }
      }

      body,
      html {
        height: 100%
      }

      body {
        line-height: 1;
        -webkit-overflow-scrolling: touch
      }

      #app {
        height: 100%
      }

      ol,
      ul {
        list-style: none
      }

      blockquote,
      q {
        quotes: none
      }

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

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

      a,
      ins {
        text-decoration: none
      }

      body {
        width: 100%
      }

      .hide {
        display: none !important
      }

      a.link {
        position: absolute;
        width: 100%;
        height: 100%;
        display: inline-block;
        z-index: 100000;
        top: 0;
        left: 0
      }

      .clearfix {
        clear: both
      }

      .clearfix:after,
      .clearfix:before {
        display: table;
        content: "";
        width: 1px;
        clear: both
      }

      .iconfont {
        font-family: iconfont;
        font-style: normal
      }

      .globallink {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2
      }

      .btn:active {
        opacity: .8
      }

      .righttoleft-enter-active,
      .righttoleft-leave-active {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
      }

      .righttoleft-enter,
      .righttoleft-leave {
        -webkit-transform: translateX(3000px);
        -moz-transform: translateX(3000px);
        -ms-transform: translateX(3000px);
        -o-transform: translateX(3000px);
        transform: translateX(3000px)
      }

      .scale-enter-active,
      .scale-leave-active {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
      }

      .scale-enter,
      .scale-leave {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
      }

      .tag.news {
        background-color: #c30
      }

      .tag.events {
        background-color: #0641ad
      }

      .tag.e-sports,
      .tag.esports {
        background-color: #00b5ff
      }

      .tag.guides {
        background-color: #f90
      }

      .tag.fanart {
        background-color: #0cc277
      }

      ::-webkit-scrollbar {
        display: none
      }

      .richtext {
        overflow: hidden;
        padding-top: .14993rem
      }

      .richtext p {
        color: #bbbfd7;
        font-size: .17991rem;
        margin: .25487rem 0
      }

      .richtext img {
        max-width: 100%;
        display: inline-block;
        margin: 0 auto
      }

      .richtext a {
        color: #e5a117
      }

      .richtext iframe {
        max-width: 100%
      }

      @media screen and (orientation:landscape) {
        #bar {
          left: 0;
          width: .77961rem;
          z-index: 11;
          height: 100vh;
          position: fixed
        }

        #bar .country {
          height: .35982rem;
          width: .77961rem;
          background-position: 50%;
          background-repeat: no-repeat;
          background-size: .26237rem;
          background-color: #1e2139
        }

        #bar .country.en {
          background-image: url("https://m.mobilelegends.com/static/images/country/en.png")
        }

        #bar .country.id {
          background-image: url("https://m.mobilelegends.com/static/images/country/id.png")
        }

        #bar ul.nav li {
          position: relative;
          background-position: 50%;
          background-size: .77961rem 1px;
          background-repeat: repeat-y;
          background-image: url(https://m.mobilelegends.com/static/images/background/barbac.png);
          width: .77961rem;
          margin-bottom: 1px;
          text-align: center
        }

        #bar ul.nav li.noclick {
          opacity: .6
        }

        #bar ul.nav li:active {
          opacity: .8
        }

        #bar ul.nav li.now {
          background-image: url(https://m.mobilelegends.com/static/images/background/barbaclighter.png);
          background-repeat: no-repeat;
          background-size: cover
        }

        #bar ul.nav li.now i,
        #bar ul.nav li.now p {
          color: #b3bce6
        }

        #bar ul.nav li.now .border {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 2px;
          background-color: #67a4fe
        }

        #bar ul.nav li .iconfont-wrapper {
          text-align: center
        }

        #bar ul.nav li .border {
          display: none
        }

        #bar ul.nav li i {
          position: relative;
          color: #7075a1;
          font-size: .29985rem
        }

        #bar ul.nav li p {
          position: relative;
          text-align: center;
          color: #7075a1;
          font-size: .11994rem;
          margin-top: .11994rem
        }

        #bar ul.nav li .border {
          display: inline-block;
          width: .05997rem;
          position: absolute;
          right: 0;
          top: 0;
          height: 100%
        }
      }

      @media screen and (orientation:portrait) {
        #barv {
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1.2rem;
          z-index: 1000000;
          position: fixed;
          background-color: #252946
        }

        #barv ul.nav li {
          position: relative;
          text-align: center;
          height: 1.2rem
        }

        #barv ul.nav li.noclick {
          opacity: .6
        }

        #barv ul.nav li:active {
          opacity: .8
        }

        #barv ul.nav li.now {
          background-image: url(https://m.mobilelegends.com/static/images/v/barbac.png);
          background-repeat: no-repeat;
          background-size: cover
        }

        #barv ul.nav li.now i,
        #barv ul.nav li.now p {
          color: #b3bce6
        }

        #barv ul.nav li.now .border {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 2px;
          background-color: #67a4fe
        }

        #barv ul.nav li .iconfont-wrapper {
          text-align: center
        }

        #barv ul.nav li .border {
          display: none
        }

        #barv ul.nav li i {
          position: relative;
          color: #7075a1;
          font-size: .44978rem
        }

        #barv ul.nav li p {
          position: relative;
          text-align: center;
          color: #7075a1;
          font-size: 8px;
          margin-top: .11994rem
        }
      }

      input {
        -webkit-user-select: auto !important
      }

      @font-face {
        font-family: iconfont;
        src: url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.eot");
        src: url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.woff") format("woff"), url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.ttf") format("truetype"), url("//at.alicdn.com/t/font_474459_iufgkjienxfos9k9.svg#iconfont") format("svg")
      }

      a,
      abbr,
      acronym,
      address,
      applet,
      article,
      aside,
      audio,
      b,
      big,
      blockquote,
      body,
      canvas,
      caption,
      center,
      cite,
      code,
      dd,
      del,
      details,
      dfn,
      div,
      dl,
      dt,
      em,
      embed,
      fieldset,
      figcaption,
      figure,
      footer,
      form,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      header,
      hgroup,
      html,
      i,
      iframe,
      img,
      ins,
      kbd,
      label,
      legend,
      li,
      mark,
      menu,
      nav,
      object,
      ol,
      output,
      p,
      pre,
      q,
      ruby,
      s,
      samp,
      section,
      small,
      span,
      strike,
      strong,
      sub,
      summary,
      sup,
      table,
      tbody,
      td,
      tfoot,
      th,
      thead,
      time,
      tr,
      tt,
      u,
      ul,
      var,
      video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        font-family: arial;
        -webkit-overflow-scrolling: touch;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
      }

      article,
      aside,
      details,
      figcaption,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block
      }

      body.maskbody {
        position: fixed;
        width: 100%
      }

      @media screen and (orientation:landscape) {
        body {
          background-position: 50%;
          background-size: 10rem 1px;
          background-repeat: repeat-y;
          background-image: url(https://m.mobilelegends.com/static/images/background/bodybac.png);
          background-color: #150b28
        }

        .getmore {
          display: block;
          height: .32984rem;
          width: 100%;
          font-size: .13493rem;
          text-align: center;
          line-height: .32984rem;
          color: #8b90b9;
          background-color: #2a2f52
        }

        .commonbar {
          position: fixed;
          top: 0;
          left: .77961rem;
          right: 0;
          z-index: 2;
          height: .5997rem;
          background-color: #141831
        }

        .commonbar ul {
          border-bottom: .01499rem solid #2c2f49
        }

        .commonbar ul li {
          font-size: .1949rem;
          text-align: center;
          line-height: .5997rem;
          height: .5997rem;
          position: relative
        }

        .commonbar ul li a {
          display: inline-block;
          width: 100%;
          height: 100%
        }

        .commonbar ul li.search {
          width: .55472rem;
          height: .5997rem;
          background-position: 50%;
          background-size: .22489rem .21739rem;
          background-repeat: no-repeat;
          background-image: url(https://m.mobilelegends.com/static/images/icons/search.png)
        }

        .commonbar ul li.now a {
          color: #00b0ff;
          border-bottom: .03748rem solid #00b0ff
        }

        .commonbar ul li a {
          color: #fff
        }

        .commonbar ul li.line {
          width: 1px;
          height: .1949rem;
          background-color: #2c2f49
        }

        .graphicwrapper {
          background-color: #1a1e3d
        }

        .graphicitem {
          position: relative;
          padding: 0 .12744rem;
          padding-bottom: .11244rem
        }

        .graphicitem:first-child p {
          border-top: 0
        }

        .graphicitem p {
          padding-top: .11244rem;
          color: #b2b7dd;
          font-size: .16492rem;
          line-height: 1.1;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          border-top: 1px dashed #7b7e9a
        }

        .graphicitem .add {
          margin-top: .09745rem;
          text-align: right
        }

        .graphicitem .add span {
          color: rgba(71, 75, 111, .8);
          font-size: .13493rem
        }

        .v {
          display: none !important
        }
      }

      @media screen and (orientation:portrait) {
        .richtext iframe {
          max-height: 200px
        }

        body {
          background-position: 50%;
          background-size: 5.62219rem 1px;
          background-repeat: repeat-y;
          background-image: url(https://m.mobilelegends.com/static/images/background/bodybac.png);
          background-color: #150b28
        }

        .getmore {
          display: block;
          height: .66667rem;
          width: 100%;
          font-size: .32rem;
          text-align: center;
          line-height: .66667rem;
          margin-top: .21333rem;
          color: #8b90b9;
          background-color: #2a2f52
        }

        .commonbar {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 2;
          background-color: #141831;
          overflow: auto;
          word-wrap: break-word;
          overflow-y: hidden;
          height: 1.09333rem
        }

        .commonbar ul {
          border-bottom: .02667rem solid #2c2f49;
          width: 16rem
        }

        .commonbar ul li {
          font-size: .34667rem;
          text-align: center;
          line-height: 1.09333rem;
          height: 1.09333rem;
          position: relative;
          border-bottom: .06667rem solid transparent
        }

        .commonbar ul li a {
          display: inline-block;
          width: 100%;
          height: 100%
        }

        .commonbar ul li.search {
          width: .98667rem;
          height: 1.09333rem;
          background-position: 50%;
          background-size: .4rem .38667rem;
          background-repeat: no-repeat;
          background-image: url(https://m.mobilelegends.com/static/images/icons/search.png)
        }

        .commonbar ul li.now {
          border-bottom: .06667rem solid #00b0ff
        }

        .commonbar ul li.now a {
          color: #00b0ff
        }

        .commonbar ul li a {
          color: #fff
        }

        .commonbar ul li.line {
          width: 1px;
          height: .34667rem;
          background-color: #2c2f49
        }

        .graphicwrapper {
          background-color: #1a1e3d
        }

        .graphicitem {
          position: relative;
          padding: 0 .22667rem;
          padding-bottom: .2rem
        }

        .graphicitem:first-child p {
          border-top: 0
        }

        .graphicitem p {
          padding-top: .2rem;
          color: #b2b7dd;
          font-size: .29333rem;
          line-height: 1.1;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          border-top: 1px dashed #7b7e9a
        }

        .graphicitem .add {
          margin-top: .17333rem;
          text-align: right
        }

        .graphicitem .add span {
          color: rgba(71, 75, 111, .8);
          font-size: .24rem
        }

        .m {
          display: none !important
        }
      }

      body,
      html {
        height: 100%
      }

      body {
        line-height: 1;
        -webkit-overflow-scrolling: touch
      }

      #app {
        height: 100%
      }

      ol,
      ul {
        list-style: none
      }

      blockquote,
      q {
        quotes: none
      }

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

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

      a,
      ins {
        text-decoration: none
      }

      body {
        width: 100%
      }

      .hide {
        display: none !important
      }

      a.link {
        position: absolute;
        width: 100%;
        height: 100%;
        display: inline-block;
        z-index: 100000;
        top: 0;
        left: 0
      }

      .clearfix {
        clear: both
      }

      .clearfix:after,
      .clearfix:before {
        display: table;
        content: "";
        width: 1px;
        clear: both
      }

      .iconfont {
        font-family: iconfont;
        font-style: normal
      }

      .globallink {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2
      }

      .btn:active {
        opacity: .8
      }

      .righttoleft-enter-active,
      .righttoleft-leave-active {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
      }

      .righttoleft-enter,
      .righttoleft-leave {
        -webkit-transform: translateX(3000px);
        -moz-transform: translateX(3000px);
        -ms-transform: translateX(3000px);
        -o-transform: translateX(3000px);
        transform: translateX(3000px)
      }

      .scale-enter-active,
      .scale-leave-active {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease
      }

      .scale-enter,
      .scale-leave {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
      }

      .tag.news {
        background-color: #c30
      }

      .tag.events {
        background-color: #0641ad
      }

      .tag.e-sports,
      .tag.esports {
        background-color: #00b5ff
      }

      .tag.guides {
        background-color: #f90
      }

      .tag.fanart {
        background-color: #0cc277
      }

      ::-webkit-scrollbar {
        display: none
      }

      .richtext {
        overflow: hidden;
        padding-top: .14993rem
      }

      .richtext p {
        color: #bbbfd7;
        font-size: .17991rem;
        margin: .25487rem 0
      }

      .richtext img {
        max-width: 100%;
        display: inline-block;
        margin: 0 auto
      }

      .richtext a {
        color: #e5a117
      }

      .richtext iframe {
        max-width: 100%
      }

      .sketchmap {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .22489rem
      }

      .sketchmap .header {
        width: 1.11694rem;
        height: 1.11694rem;
        background-position: 50%;
        background-size: 100%;
        background-image: url(https://m.mobilelegends.com/static/images/header.png);
        background-repeat: no-repeat;
        margin-right: .37481rem
      }

      .sketchmap .msgRow {
        display: flex;
        color: #fff
      }

      .sketchmap .msgRow .id {
        color: #a9a1ed;
        margin-right: .11244rem
      }

      .sketchmap .msgRow .column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        vertical-align: top;
        margin-left: .04498rem
      }

      .sketchmap .msgRow .column .arrow {
        width: .14243rem;
        height: .14993rem;
        background-size: 100%;
        background-image: url(https://m.mobilelegends.com/static/images/arrow.png);
        background-repeat: no-repeat;
        margin: .05997rem 0
      }

      .sketchmap .msgRow .column .serverId {
        opacity: .5
      }

      .sketchmap .msgRow .column .tipBox {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .02999rem .14993rem;
        font-size: .17991rem;
        max-width: 1.7991rem;
        background: #171334;
        border: .01499rem solid #a9a1ed
      }

      @media screen and (orientation:landscape) {
        #codexchange {
          padding: .13493rem 0
        }

        #codexchange .sketchmap {
          height: 1.7991rem;
          width: 100%;
          background-position: 50%;
          background-size: cover;
          background-image: url(https://m.mobilelegends.com/static/images/exchange.jpg);
          background-repeat: no-repeat;
          position: relative;
          margin-bottom: .22489rem
        }

        #codexchange .sketchmap .changeCountry {
          position: absolute;
          right: .42667rem;
          top: .13333rem;
          display: flex
        }

        #codexchange .sketchmap .changeCountry div {
          color: #999;
          padding: 0 .2rem
        }

        #codexchange .sketchmap .changeCountry div.active {
          color: #fff
        }

        #codexchange .sketchmap .changeCountry div:first-child {
          border-right: 1px solid #fff
        }

        #codexchange .sketchmap span {
          color: #fff;
          font-size: .22489rem;
          position: absolute
        }

        #codexchange .sketchmap span:first-child {
          bottom: .37481rem;
          right: 3.89805rem
        }

        #codexchange .sketchmap span:last-child {
          bottom: .37481rem;
          right: 2.3988rem
        }

        #codexchange .form {
          width: 6.37931rem;
          margin: 0 auto
        }

        #codexchange .form .inputgroup {
          margin-bottom: .29985rem;
          font-size: 0
        }

        #codexchange .form .inputgroup.vcode input {
          width: 2.22639rem
        }

        #codexchange .form .inputgroup.vcode img {
          width: .74963rem;
          height: .32984rem;
          margin-left: .14993rem
        }

        #codexchange .form .inputgroup.vcode .interval,
        #codexchange .form .inputgroup.vcode .send {
          margin-left: .22489rem;
          width: 1.28186rem;
          height: .35232rem;
          line-height: .35232rem;
          text-align: center;
          background-color: #b90023;
          font-size: .16492rem;
          border-radius: .07496rem;
          color: #fff
        }

        #codexchange .form .inputgroup label {
          display: inline-block;
          font-size: .22489rem;
          color: #fff;
          text-align: right;
          margin-right: .45727rem;
          width: 1.87406rem
        }

        #codexchange .form .inputgroup input {
          height: .32984rem;
          background-color: #171334;
          border: 1px solid #29215e;
          outline: none;
          padding-left: .14993rem;
          color: #fff
        }

        #codexchange p {
          font-size: .14993rem;
          width: 6.37931rem;
          margin: 0 auto;
          color: #b9b1ff;
          text-align: center;
          height: .26237rem;
          line-height: .26237rem;
          background-color: #2b2363
        }

        #codexchange .redeem {
          width: 1.72414rem;
          height: .47226rem;
          line-height: .47226rem;
          text-align: center;
          color: #fff;
          font-size: .22489rem;
          border-radius: .07496rem;
          background-color: #b90023;
          margin: 0 auto;
          margin-top: .25487rem
        }
      }

      @media screen and (orientation:portrait) {
        #codexchange {
          padding: .24rem 0
        }

        #codexchange .sketchmap {
          height: 3.2rem;
          background-position: 50%;
          background-size: 14.53333rem 3.2rem;
          background-image: url(https://m.mobilelegends.com//static/images/exchange.jpg);
          background-repeat: no-repeat;
          position: relative;
          margin-bottom: .4rem
        }

        #codexchange .sketchmap .changeCountry {
          position: absolute;
          right: .42667rem;
          top: .24rem;
          display: flex
        }

        #codexchange .sketchmap .changeCountry div {
          color: #999;
          padding: 0 .2rem
        }

        #codexchange .sketchmap .changeCountry div.active {
          color: #fff
        }

        #codexchange .sketchmap .changeCountry div:first-child {
          border-right: 1px solid #fff
        }

        #codexchange .sketchmap span {
          color: #fff;
          font-size: .4rem;
          position: absolute
        }

        #codexchange .sketchmap span:first-child {
          bottom: .66667rem;
          right: 4rem
        }

        #codexchange .sketchmap span:last-child {
          bottom: .66667rem;
          left: 6.4rem
        }

        #codexchange .form {
          margin: 0 auto;
          padding: 0 .42667rem
        }

        #codexchange .form .inputgroup {
          margin-bottom: .53333rem;
          font-size: 0
        }

        #codexchange .form .inputgroup.vcode input {
          width: 2.76rem
        }

        #codexchange .form .inputgroup.vcode img {
          width: 1.33333rem;
          margin-left: .26667rem
        }

        #codexchange .form .inputgroup.vcode .interval,
        #codexchange .form .inputgroup.vcode .send {
          display: inline-block;
          margin-left: .4rem;
          width: 2.94667rem;
          height: .62667rem;
          line-height: .62667rem;
          text-align: center;
          background-color: #b90023;
          font-size: .29333rem;
          border-radius: .13333rem;
          color: #fff
        }

        #codexchange .form .inputgroup label {
          display: inline-block;
          font-size: .4rem;
          color: #fff;
          text-align: right;
          margin-right: .81333rem;
          width: 3.33333rem
        }

        #codexchange .form .inputgroup input {
          height: .58667rem;
          background-color: #171334;
          border: 1px solid #29215e;
          outline: none;
          padding-left: .26667rem;
          color: #fff
        }

        #codexchange p {
          font-size: .26667rem;
          margin: 0 auto;
          color: #b9b1ff;
          text-align: center;
          height: .46667rem;
          line-height: .46667rem;
          background-color: #2b2363;
          padding: 0 .42667rem
        }

        #codexchange .redeem {
          width: 3.06667rem;
          height: .84rem;
          line-height: .84rem;
          text-align: center;
          color: #fff;
          font-size: .4rem;
          border-radius: .13333rem;
          background-color: #b90023;
          margin: 0 auto;
          margin-top: .45333rem
        }
      }