@charset "UTF-8";
/* CSS Mobile Reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box; }

html {
  font-size: 12px; }

@media screen and (min-width: 375px) {
  html {
    font-size: 15px; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) and (orientation: portrait) {
  html {
    font-size: 9px; } }

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40 / 71) and (orientation: portrait) {
  html {
    font-size: 12px; } }

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
  html {
    font-size: 14px; } }

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  html {
    font-size: 16px; } }

body {
  font-family: Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  background: #fff;
  padding: 5px;
  color: #000;
  word-wrap: break-word;
  -webkit-text-size-adjust: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

p img {
  float: left;
  margin: 0 0.8em 0.4em 0;
  padding: 0; }

img {
  border: 0;
  max-width: 100%; }

table {
  width: auto;
  /**
  HTML中使用Tables进行布局一直是个很头疼的问题，它们使用起来很简单，但是无法进行响应式操作，并且也不方便进行全局样式设置。譬如，如果你打算为Table的边与单元的边添加样式，可能得到的结果如下:
  ```
  table {
      width: 600px;
      border: 1px solid #505050;
      margin-bottom: 15px;
      color:#505050;
  }

  td{
      border: 1px solid #505050;
      padding: 10px;
  }
  ```
  这里存在的问题是出现了很多的重复的边，会导致视觉上不协调的情况，那么我们可以通过设置border-collapse:collapse来进行处理:
  */
  border-collapse: collapse;
  border-spacing: 0; }

.vertical-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 50rem;
  -webkit-overflow-scrolling: touch; }

.horizaontal-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch; }

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                         not supported by any browser */ }

@media screen and (min-width: 480px) {
  .show-on-mobile {
    display: none; } }

@media screen and (min-width: 769px) {
  .hide-on-mobile {
    display: none; } }

/*设置常见布局*/
.msp-flex-vertical-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }

.msp-flex-vertical-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }

.msp-flex-item-1-2 {
  flex: 1 0 50%; }

.msp-flex-item-1-3 {
  flex: 1 0 33.33%; }

.msp-flex-item-2-3 {
  flex: 1 0 66.67%; }

.msp-flex-item-1-4 {
  flex: 1 0 25%; }

.msp-flex-item-3-4 {
  flex: 1 0 75%; }

/* 定义些通用的样式标准 */
.msp_container {
  height: 100%;
  background: white; }

/* 定义常用字体配置 */
.msp_small {
  font-size: 1em; }

.msp_middle {
  font-size: 1.5em; }

.msp_big {
  font-size: 2em; }

/* 定义菜单项配置 */