@charset "UTF-8";
/*
断点选择策略
xs	超小设备（Extra small）	<768px	  手机竖屏
sm	小设备（Small）	        ≥768px	  大屏手机、小型平板
md	中等设备（Medium）	    ≥992px	  平板、小尺寸笔记本
lg	大设备（Large）	        ≥1200px	  标准桌面显示器
xl	超大设备（Extra large）	≥1400px	  大屏桌面（1080p+）
xxl	超超大设备（XX-Large）	≥1920px	  4K/超宽屏（2K及以上）

*/
/*灰色系*/
/*色环*/
/*辅助色*/
/*应用色*/
/*边框色*/
/*字体颜色*/
/* BEM support Func
 -------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -0.02rem; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none !important;
}

@font-face {
  font-family: "iconfont"; /* project id 2385602 */
  src: url("https://relcdn.oss-cn-hangzhou.aliyuncs.com/project/cooksgo/pc/fonts/fonticon.ttf") format("truetype"), url("https://relcdn.oss-cn-hangzhou.aliyuncs.com/project/cooksgo/pc/fonts/fonticon.woff") format("woff");
}
* {
  border: none;
  color: inherit;
  margin: 0;
  padding: 0;
  text-rendering: geometricPrecision;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
*:before, *:after {
  box-sizing: border-box;
}

html {
  font-family: Noto Sans Balinese, "PingFang SC", "Microsoft YaHei", 思源黑体, PingFang, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 100px;
}

html,
body {
  margin: 0;
  padding: 0;
  min-width: 12.2rem;
}

@media screen and (max-width: 1200px) {
  html,
  body {
    min-width: initial;
  }
}
body {
  line-height: 1.5;
  font-size: 0.3rem;
  color: #434343;
  height: 100vh;
  overflow: hidden;
}

a {
  text-decoration: none;
}

input,
button,
select,
textarea {
  outline: none;
}

/**
 * Created by henian.xu on 2017/7/3 0003.
 * 实用工具类
 */
.fn-left {
  float: left;
}

.fn-right {
  float: right;
}

.fn-clear:before, .fn-clear:after {
  content: "";
  display: table;
}
.fn-clear:after {
  clear: both;
}

.fn-hide {
  display: none !important;
}

.fn-hidden {
  overflow: hidden !important;
}

.fn-hidden-x {
  overflow-x: hidden !important;
}

.fn-hidden-y {
  overflow-y: hidden !important;
}

.fs-mini {
  font-size: 0.15rem !important;
}

.fs-small {
  font-size: 0.225rem !important;
}

.fs-little {
  font-size: 0.255rem !important;
}

.fs-base {
  font-size: 0.3rem !important;
}

.fs-big {
  font-size: 0.375rem !important;
}

.fs-large {
  font-size: 0.45rem !important;
}

.fs-huge {
  font-size: 0.525rem !important;
}

.fs-inherit {
  font-size: inherit !important;
}

.fs-mini {
  font-size: 50% !important;
}

.fs-small {
  font-size: 75% !important;
}

.fs-little {
  font-size: 85% !important;
}

.fs-big {
  font-size: 125% !important;
}

.fs-large {
  font-size: 150% !important;
}

.fs-huge {
  font-size: 175% !important;
}

.fw-bold {
  font-weight: bold !important;
}

.fw-normal {
  font-weight: normal !important;
}

.ta-c {
  text-align: center !important;
}

.ta-l {
  text-align: left !important;
}

.ta-r {
  text-align: right !important;
}

.ta-j {
  text-align: justify !important;
}

.va-t {
  vertical-align: top !important;
}

.va-m {
  vertical-align: middle !important;
}

.va-b {
  vertical-align: bottom !important;
}

.bor-a {
  border: 1px solid #d7d8db !important;
}

.nbor-a {
  border: 0 !important;
}

.bor-t {
  border-top: 1px solid #d7d8db !important;
}

.nbor-t {
  border-top: 0 !important;
}

.bor-r {
  border-right: 1px solid #d7d8db !important;
}

.nbor-r {
  border-right: 0 !important;
}

.bor-b {
  border-bottom: 1px solid #d7d8db !important;
}

.nbor-b {
  border-bottom: 0 !important;
}

.bor-l {
  border-left: 1px solid #d7d8db !important;
}

.nbor-l {
  border-left: 0 !important;
}

.brr-a {
  border-radius: 0.24rem !important;
}

.nbrr-a {
  border-radius: 0 !important;
}

.brr-tl {
  border-top-left-radius: 0.24rem !important;
}

.nbrr-tl {
  border-top-left-radius: 0 !important;
}

.brr-tr {
  border-top-right-radius: 0.24rem !important;
}

.nbrr-tr {
  border-top-right-radius: 0 !important;
}

.brr-bl {
  border-bottom-left-radius: 0.24rem !important;
}

.nbrr-bl {
  border-bottom-left-radius: 0 !important;
}

.brr-br {
  border-bottom-right-radius: 0.24rem !important;
}

.nbrr-br {
  border-bottom-right-radius: 0 !important;
}

.dp-b {
  display: block !important;
}

.dp-i {
  display: inline !important;
}

.dp-ib {
  display: inline-block !important;
}

.dp-fx {
  display: flex !important;
}

.fx-row {
  flex-direction: row !important;
}

.fx-col {
  flex-direction: column !important;
}

.fx-jc-fs {
  justify-content: flex-start !important;
}

.fx-jc-fe {
  justify-content: flex-end !important;
}

.fx-jc-c {
  justify-content: center !important;
}

.fx-jc-sb {
  justify-content: space-between !important;
}

.fx-jc-sa {
  justify-content: space-around !important;
}

.fx-ai-fs {
  align-items: flex-start !important;
}

.fx-ai-fe {
  align-items: flex-end !important;
}

.fx-ai-c {
  align-items: center !important;
}

.fx-ai-s {
  align-items: stretch !important;
}

.fx-as-fs {
  align-self: flex-start !important;
}

.fx-as-fe {
  align-self: flex-end !important;
}

.fx-as-c {
  align-self: center !important;
}

.fx-as-s {
  align-self: stretch !important;
}

.w-5per {
  width: 5% !important;
}

.w-10per {
  width: 10% !important;
}

.w-15per {
  width: 15% !important;
}

.w-20per {
  width: 20% !important;
}

.w-25per {
  width: 25% !important;
}

.w-30per {
  width: 30% !important;
}

.w-35per {
  width: 35% !important;
}

.w-40per {
  width: 40% !important;
}

.w-45per {
  width: 45% !important;
}

.w-50per {
  width: 50% !important;
}

.w-55per {
  width: 55% !important;
}

.w-60per {
  width: 60% !important;
}

.w-65per {
  width: 65% !important;
}

.w-70per {
  width: 70% !important;
}

.w-75per {
  width: 75% !important;
}

.w-80per {
  width: 80% !important;
}

.w-85per {
  width: 85% !important;
}

.w-90per {
  width: 90% !important;
}

.w-95per {
  width: 95% !important;
}

.w-100per {
  width: 100% !important;
}

.w-5px {
  width: 0.05rem !important;
}

.w-10px {
  width: 0.1rem !important;
}

.w-15px {
  width: 0.15rem !important;
}

.w-20px {
  width: 0.2rem !important;
}

.w-25px {
  width: 0.25rem !important;
}

.w-30px {
  width: 0.3rem !important;
}

.w-35px {
  width: 0.35rem !important;
}

.w-40px {
  width: 0.4rem !important;
}

.w-45px {
  width: 0.45rem !important;
}

.w-50px {
  width: 0.5rem !important;
}

.w-55px {
  width: 0.55rem !important;
}

.w-60px {
  width: 0.6rem !important;
}

.w-65px {
  width: 0.65rem !important;
}

.w-70px {
  width: 0.7rem !important;
}

.w-75px {
  width: 0.75rem !important;
}

.w-80px {
  width: 0.8rem !important;
}

.w-85px {
  width: 0.85rem !important;
}

.w-90px {
  width: 0.9rem !important;
}

.w-95px {
  width: 0.95rem !important;
}

.w-100px {
  width: 1rem !important;
}

.w-1em {
  width: 1em !important;
}

.w-2em {
  width: 2em !important;
}

.w-3em {
  width: 3em !important;
}

.w-4em {
  width: 4em !important;
}

.w-5em {
  width: 5em !important;
}

.w-6em {
  width: 6em !important;
}

.w-7em {
  width: 7em !important;
}

.w-8em {
  width: 8em !important;
}

.w-9em {
  width: 9em !important;
}

.w-10em {
  width: 10em !important;
}

.w-11em {
  width: 11em !important;
}

.w-12em {
  width: 12em !important;
}

.w-13em {
  width: 13em !important;
}

.w-14em {
  width: 14em !important;
}

.w-15em {
  width: 15em !important;
}

.w-16em {
  width: 16em !important;
}

.w-17em {
  width: 17em !important;
}

.w-18em {
  width: 18em !important;
}

.w-19em {
  width: 19em !important;
}

.w-20em {
  width: 20em !important;
}

.h-5per {
  height: 5% !important;
}

.h-10per {
  height: 10% !important;
}

.h-15per {
  height: 15% !important;
}

.h-20per {
  height: 20% !important;
}

.h-25per {
  height: 25% !important;
}

.h-30per {
  height: 30% !important;
}

.h-35per {
  height: 35% !important;
}

.h-40per {
  height: 40% !important;
}

.h-45per {
  height: 45% !important;
}

.h-50per {
  height: 50% !important;
}

.h-55per {
  height: 55% !important;
}

.h-60per {
  height: 60% !important;
}

.h-65per {
  height: 65% !important;
}

.h-70per {
  height: 70% !important;
}

.h-75per {
  height: 75% !important;
}

.h-80per {
  height: 80% !important;
}

.h-85per {
  height: 85% !important;
}

.h-90per {
  height: 90% !important;
}

.h-95per {
  height: 95% !important;
}

.h-100per {
  height: 100% !important;
}

.h-5px {
  height: 0.05rem !important;
}

.h-10px {
  height: 0.1rem !important;
}

.h-15px {
  height: 0.15rem !important;
}

.h-20px {
  height: 0.2rem !important;
}

.h-25px {
  height: 0.25rem !important;
}

.h-30px {
  height: 0.3rem !important;
}

.h-35px {
  height: 0.35rem !important;
}

.h-40px {
  height: 0.4rem !important;
}

.h-45px {
  height: 0.45rem !important;
}

.h-50px {
  height: 0.5rem !important;
}

.h-55px {
  height: 0.55rem !important;
}

.h-60px {
  height: 0.6rem !important;
}

.h-65px {
  height: 0.65rem !important;
}

.h-70px {
  height: 0.7rem !important;
}

.h-75px {
  height: 0.75rem !important;
}

.h-80px {
  height: 0.8rem !important;
}

.h-85px {
  height: 0.85rem !important;
}

.h-90px {
  height: 0.9rem !important;
}

.h-95px {
  height: 0.95rem !important;
}

.h-100px {
  height: 1rem !important;
}

.h-1em {
  height: 1em !important;
}

.h-2em {
  height: 2em !important;
}

.h-3em {
  height: 3em !important;
}

.h-4em {
  height: 4em !important;
}

.h-5em {
  height: 5em !important;
}

.h-6em {
  height: 6em !important;
}

.h-7em {
  height: 7em !important;
}

.h-8em {
  height: 8em !important;
}

.h-9em {
  height: 9em !important;
}

.h-10em {
  height: 10em !important;
}

.h-11em {
  height: 11em !important;
}

.h-12em {
  height: 12em !important;
}

.h-13em {
  height: 13em !important;
}

.h-14em {
  height: 14em !important;
}

.h-15em {
  height: 15em !important;
}

.h-16em {
  height: 16em !important;
}

.h-17em {
  height: 17em !important;
}

.h-18em {
  height: 18em !important;
}

.h-19em {
  height: 19em !important;
}

.h-20em {
  height: 20em !important;
}

.lh-5per {
  line-height: 5% !important;
}

.lh-10per {
  line-height: 10% !important;
}

.lh-15per {
  line-height: 15% !important;
}

.lh-20per {
  line-height: 20% !important;
}

.lh-25per {
  line-height: 25% !important;
}

.lh-30per {
  line-height: 30% !important;
}

.lh-35per {
  line-height: 35% !important;
}

.lh-40per {
  line-height: 40% !important;
}

.lh-45per {
  line-height: 45% !important;
}

.lh-50per {
  line-height: 50% !important;
}

.lh-55per {
  line-height: 55% !important;
}

.lh-60per {
  line-height: 60% !important;
}

.lh-65per {
  line-height: 65% !important;
}

.lh-70per {
  line-height: 70% !important;
}

.lh-75per {
  line-height: 75% !important;
}

.lh-80per {
  line-height: 80% !important;
}

.lh-85per {
  line-height: 85% !important;
}

.lh-90per {
  line-height: 90% !important;
}

.lh-95per {
  line-height: 95% !important;
}

.lh-100per {
  line-height: 100% !important;
}

.lh-5px {
  line-height: 0.05rem !important;
}

.lh-10px {
  line-height: 0.1rem !important;
}

.lh-15px {
  line-height: 0.15rem !important;
}

.lh-20px {
  line-height: 0.2rem !important;
}

.lh-25px {
  line-height: 0.25rem !important;
}

.lh-30px {
  line-height: 0.3rem !important;
}

.lh-35px {
  line-height: 0.35rem !important;
}

.lh-40px {
  line-height: 0.4rem !important;
}

.lh-45px {
  line-height: 0.45rem !important;
}

.lh-50px {
  line-height: 0.5rem !important;
}

.lh-55px {
  line-height: 0.55rem !important;
}

.lh-60px {
  line-height: 0.6rem !important;
}

.lh-65px {
  line-height: 0.65rem !important;
}

.lh-70px {
  line-height: 0.7rem !important;
}

.lh-75px {
  line-height: 0.75rem !important;
}

.lh-80px {
  line-height: 0.8rem !important;
}

.lh-85px {
  line-height: 0.85rem !important;
}

.lh-90px {
  line-height: 0.9rem !important;
}

.lh-95px {
  line-height: 0.95rem !important;
}

.lh-100px {
  line-height: 1rem !important;
}

.lh-1em {
  line-height: 1em !important;
}

.lh-2em {
  line-height: 2em !important;
}

.lh-3em {
  line-height: 3em !important;
}

.lh-4em {
  line-height: 4em !important;
}

.lh-5em {
  line-height: 5em !important;
}

.lh-6em {
  line-height: 6em !important;
}

.lh-7em {
  line-height: 7em !important;
}

.lh-8em {
  line-height: 8em !important;
}

.lh-9em {
  line-height: 9em !important;
}

.lh-10em {
  line-height: 10em !important;
}

.lh-11em {
  line-height: 11em !important;
}

.lh-12em {
  line-height: 12em !important;
}

.lh-13em {
  line-height: 13em !important;
}

.lh-14em {
  line-height: 14em !important;
}

.lh-15em {
  line-height: 15em !important;
}

.lh-16em {
  line-height: 16em !important;
}

.lh-17em {
  line-height: 17em !important;
}

.lh-18em {
  line-height: 18em !important;
}

.lh-19em {
  line-height: 19em !important;
}

.lh-20em {
  line-height: 20em !important;
}

.tr-45r {
  transform: rotate(45deg) !important;
}

.tr-90r {
  transform: rotate(90deg) !important;
}

.tr-135r {
  transform: rotate(135deg) !important;
}

.tr-180r {
  transform: rotate(180deg) !important;
}

.tr-225r {
  transform: rotate(225deg) !important;
}

.tr-270r {
  transform: rotate(270deg) !important;
}

.tr-315r {
  transform: rotate(315deg) !important;
}

.tr-360r {
  transform: rotate(360deg) !important;
}

.form-item-guise {
  flex: 1;
  min-height: 0.6rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.form-item-guise.noop {
  color: #757575;
}

.lh-normal {
  line-height: 1.5 !important;
}

.tc-base {
  color: #434343 !important;
}

.tc-minor {
  color: #cdcdcd !important;
}

.tc-minor2 {
  color: #666 !important;
}

.tc-price {
  color: #ff5000 !important;
}

.tc-white {
  color: #fff !important;
}

.tc-g1 {
  color: #f5f8ff !important;
}

.tc-g2 {
  color: #e0e0e0 !important;
}

.tc-g3 {
  color: #d9d9d9 !important;
}

.tc-g4 {
  color: #b3b3b3 !important;
}

.tc-g5 {
  color: #808080 !important;
}

.tc-g6 {
  color: #666666 !important;
}

.tc-g7 {
  color: #4d4d4d !important;
}

.tc-g8 {
  color: #333333 !important;
}

.tc-g9 {
  color: #1a1a1a !important;
}

.tc-w {
  color: #fff !important;
}

.tc-primary {
  color: #1450f5 !important;
}

.tc-secondary {
  color: #c87d2f !important;
}

.tc-success {
  color: #91d300 !important;
}

.tc-warning {
  color: #ffc300 !important;
}

.tc-danger {
  color: #fa5151 !important;
}

.tc-info {
  color: #666666 !important;
}

.tc-red {
  color: #fa5151 !important;
}

.tc-orange {
  color: #c87d2f !important;
}

.tc-brown {
  color: #7b4d13 !important;
}

.tc-yellow {
  color: #ffc300 !important;
}

.tc-green {
  color: #91d300 !important;
}

.tc-lightGreen {
  color: #95ec69 !important;
}

.tc-darkGreen {
  color: #07c160 !important;
}

.tc-lightBlue {
  color: #10aeff !important;
}

.tc-blue {
  color: #1485ee !important;
}

.tc-darkBlue {
  color: #6467f0 !important;
}

.tc-grayBlue {
  color: #576b95 !important;
}

.tc-purple {
  color: #cf50fb !important;
}

.bc-white {
  background-color: #fff !important;
}

.bc-g1 {
  background-color: #f5f8ff !important;
}

.bc-g2 {
  background-color: #e0e0e0 !important;
}

.bc-g3 {
  background-color: #d9d9d9 !important;
}

.bc-g4 {
  background-color: #b3b3b3 !important;
}

.bc-g5 {
  background-color: #808080 !important;
}

.bc-g6 {
  background-color: #666666 !important;
}

.bc-g7 {
  background-color: #4d4d4d !important;
}

.bc-g8 {
  background-color: #333333 !important;
}

.bc-g9 {
  background-color: #1a1a1a !important;
}

.bc-w {
  background-color: #fff !important;
}

.bc-primary {
  background-color: #1450f5 !important;
}

.bc-secondary {
  background-color: #c87d2f !important;
}

.bc-success {
  background-color: #91d300 !important;
}

.bc-warning {
  background-color: #ffc300 !important;
}

.bc-danger {
  background-color: #fa5151 !important;
}

.bc-info {
  background-color: #666666 !important;
}

.bc-red {
  background-color: #fa5151 !important;
}

.bc-orange {
  background-color: #c87d2f !important;
}

.bc-brown {
  background-color: #7b4d13 !important;
}

.bc-yellow {
  background-color: #ffc300 !important;
}

.bc-green {
  background-color: #91d300 !important;
}

.bc-lightGreen {
  background-color: #95ec69 !important;
}

.bc-darkGreen {
  background-color: #07c160 !important;
}

.bc-lightBlue {
  background-color: #10aeff !important;
}

.bc-blue {
  background-color: #1485ee !important;
}

.bc-darkBlue {
  background-color: #6467f0 !important;
}

.bc-grayBlue {
  background-color: #576b95 !important;
}

.bc-purple {
  background-color: #cf50fb !important;
}

.bc-t {
  background-color: transparent !important;
}

/* small */
.ma-as {
  margin: 0.12rem !important;
}

.pa-as {
  padding: 0.12rem !important;
}

.ma-bor-as {
  border: 0.12rem solid rgb(229.5, 229.5, 229.5) !important;
}

.ma-ass {
  margin: 0.06rem !important;
}

.pa-ass {
  padding: 0.06rem !important;
}

.ma-bor-ass {
  border: 0.06rem solid rgb(229.5, 229.5, 229.5) !important;
}

/* normal */
.ma-a {
  margin: 0.2rem !important;
}

.nma-a {
  margin: 0 !important;
}

.pa-a {
  padding: 0.2rem !important;
}

.npa-a {
  padding: 0 !important;
}

.ma-bor-a {
  border: 0.2rem solid #f5f8ff !important;
}

/* big */
.ma-ab {
  margin: 0.28rem !important;
}

.pa-ab {
  padding: 0.28rem !important;
}

.ma-bor-ab {
  border: 0.28rem solid #f5f8ff !important;
}

/* small */
.ma-ts {
  margin-top: 0.12rem !important;
}

.pa-ts {
  padding-top: 0.12rem !important;
}

.ma-bor-ts {
  border-top: 0.12rem solid rgb(229.5, 229.5, 229.5) !important;
}

.ma-tss {
  margin-top: 0.06rem !important;
}

.pa-tss {
  padding-top: 0.06rem !important;
}

.ma-bor-tss {
  border-top: 0.06rem solid rgb(229.5, 229.5, 229.5) !important;
}

/* normal */
.ma-t {
  margin-top: 0.2rem !important;
}

.nma-t {
  margin-top: 0 !important;
}

.pa-t {
  padding-top: 0.2rem !important;
}

.npa-t {
  padding-top: 0 !important;
}

.ma-bor-t {
  border-top: 0.2rem solid #f5f8ff !important;
}

/* big */
.ma-tb {
  margin-top: 0.28rem !important;
}

.pa-tb {
  padding-top: 0.28rem !important;
}

.ma-bor-tb {
  border-top: 0.28rem solid #f5f8ff !important;
}

/* small */
.ma-rs {
  margin-right: 0.12rem !important;
}

.pa-rs {
  padding-right: 0.12rem !important;
}

.ma-bor-rs {
  border-right: 0.12rem solid rgb(229.5, 229.5, 229.5) !important;
}

.ma-rss {
  margin-right: 0.06rem !important;
}

.pa-rss {
  padding-right: 0.06rem !important;
}

.ma-bor-rss {
  border-right: 0.06rem solid rgb(229.5, 229.5, 229.5) !important;
}

/* normal */
.ma-r {
  margin-right: 0.2rem !important;
}

.nma-r {
  margin-right: 0 !important;
}

.pa-r {
  padding-right: 0.2rem !important;
}

.npa-r {
  padding-right: 0 !important;
}

.ma-bor-r {
  border-right: 0.2rem solid #f5f8ff !important;
}

/* big */
.ma-rb {
  margin-right: 0.28rem !important;
}

.pa-rb {
  padding-right: 0.28rem !important;
}

.ma-bor-rb {
  border-right: 0.28rem solid #f5f8ff !important;
}

/* small */
.ma-bs {
  margin-bottom: 0.12rem !important;
}

.pa-bs {
  padding-bottom: 0.12rem !important;
}

.ma-bor-bs {
  border-bottom: 0.12rem solid rgb(229.5, 229.5, 229.5) !important;
}

.ma-bss {
  margin-bottom: 0.06rem !important;
}

.pa-bss {
  padding-bottom: 0.06rem !important;
}

.ma-bor-bss {
  border-bottom: 0.06rem solid rgb(229.5, 229.5, 229.5) !important;
}

/* normal */
.ma-b {
  margin-bottom: 0.2rem !important;
}

.nma-b {
  margin-bottom: 0 !important;
}

.pa-b {
  padding-bottom: 0.2rem !important;
}

.npa-b {
  padding-bottom: 0 !important;
}

.ma-bor-b {
  border-bottom: 0.2rem solid #f5f8ff !important;
}

/* big */
.ma-bb {
  margin-bottom: 0.28rem !important;
}

.pa-bb {
  padding-bottom: 0.28rem !important;
}

.ma-bor-bb {
  border-bottom: 0.28rem solid #f5f8ff !important;
}

/* small */
.ma-ls {
  margin-left: 0.12rem !important;
}

.pa-ls {
  padding-left: 0.12rem !important;
}

.ma-bor-ls {
  border-left: 0.12rem solid rgb(229.5, 229.5, 229.5) !important;
}

.ma-lss {
  margin-left: 0.06rem !important;
}

.pa-lss {
  padding-left: 0.06rem !important;
}

.ma-bor-lss {
  border-left: 0.06rem solid rgb(229.5, 229.5, 229.5) !important;
}

/* normal */
.ma-l {
  margin-left: 0.2rem !important;
}

.nma-l {
  margin-left: 0 !important;
}

.pa-l {
  padding-left: 0.2rem !important;
}

.npa-l {
  padding-left: 0 !important;
}

.ma-bor-l {
  border-left: 0.2rem solid #f5f8ff !important;
}

/* big */
.ma-lb {
  margin-left: 0.28rem !important;
}

.pa-lb {
  padding-left: 0.28rem !important;
}

.ma-bor-lb {
  border-left: 0.28rem solid #f5f8ff !important;
}

.ma-bor {
  border-top: 0.12rem solid #d7d8db;
}

/**
 * Created by henian.xu on 2017/11/11.
 *
 */
@keyframes up-in {
  0% {
    transform: translate(0, 25%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes up-out {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}
@keyframes footer-in {
  0% {
    height: 0;
  }
  100% {
    height: 1rem;
  }
}
@keyframes footer-out {
  0% {
    height: 1rem;
  }
  100% {
    height: 0;
  }
}
@keyframes down-in {
  0% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes down-out {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 25%);
  }
}
@keyframes left-in {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes left-out {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-25%, 0);
  }
}
@keyframes right-in {
  0% {
    transform: translate(-25%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes right-out {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes show-in {
  0% {
    opacity: 0;
    /*transform: scale(1.1);*/
  }
  100% {
    opacity: 1;
    /*transform: scale(1);*/
  }
}
/*上入动画*/
.up-enter-active {
  animation: up-in 0.5s;
}

.up-leave-active {
  z-index: 1;
  animation: up-out 0.5s;
}

/*下入动画*/
.down-enter-active {
  z-index: 1;
  animation: down-in 0.5s;
}

.down-leave-active {
  animation: down-out 0.5s;
}

/*左入动画*/
.left-enter-active {
  z-index: 1;
  animation: left-in 0.5s;
  animation-fill-mode: both;
}

.left-leave-active {
  animation: left-out 0.5s;
  animation-fill-mode: both;
}

/*右入动画*/
.right-enter-active {
  animation: right-in 0.5s;
  animation-fill-mode: both;
}

.right-leave-active {
  z-index: 1;
  animation: right-out 0.5s;
  animation-fill-mode: both;
}

/*菜单动画*/
.footer-enter-active {
  overflow: hidden;
  min-height: inherit !important;
  animation-fill-mode: both;
  animation: footer-in 0.5s;
}

.footer-leave-active {
  overflow: hidden;
  min-height: inherit !important;
  z-index: 1;
  animation: footer-out 0.5s;
}

/*sidebar*/
.sidebar-left-enter-active {
  animation: left-in 0.5s;
}

.sidebar-left-leave-active {
  animation: right-out 0.5s;
}

/*弹跳*/
.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.3s reverse;
}

/*query-box*/
.query-box-enter-active {
  animation: down-in 0.5s;
}

.query-box-leave-active {
  animation: up-out 0.5s;
}

.popup-down-enter-active {
  animation: up-in 0.5s;
}

.popup-down-leave-active {
  animation: down-out 0.5s;
}

.popup-up-enter-active {
  animation: down-in 0.5s;
}

.popup-up-leave-active {
  animation: up-out 0.5s;
}

.show-enter-active {
  animation: show-in 0.5s;
}

.show-leave-active {
  animation: show-in 0.3s reverse;
}

#__nuxt {
  overflow: hidden;
}
/*
断点选择策略
xs	超小设备（Extra small）	<768px	  手机竖屏
sm	小设备（Small）	        ≥768px	  大屏手机、小型平板
md	中等设备（Medium）	    ≥992px	  平板、小尺寸笔记本
lg	大设备（Large）	        ≥1200px	  标准桌面显示器
xl	超大设备（Extra large）	≥1400px	  大屏桌面（1080p+）
xxl	超超大设备（XX-Large）	≥1920px	  4K/超宽屏（2K及以上）

*/
/*灰色系*/
/*色环*/
/*辅助色*/
/*应用色*/
/*边框色*/
/*字体颜色*/
/* BEM support Func
 -------------------------- */
.x-button {
  font-size: inherit;
  appearance: none;
  vertical-align: middle;
  line-height: 1;
  min-height: 0.74rem;
  cursor: pointer;
}
.x-button {
  padding: 0.08rem 0.16rem;
  border: 1px solid #d7d8db;
  background-color: #fff;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  /* 主题颜色 */
  /* 尺寸大小 */
}
.x-button.radius {
  border-radius: 0.16rem;
}
.x-button.radius-all {
  border-radius: 100vw;
}
.x-button.white {
  background-color: #fff;
  border-color: #fff;
  color: #434343;
}
.x-button.white.plain {
  border-color: #fff;
}
.x-button.white.plain, .x-button.white.link {
  color: #fff;
}
.x-button.g1 {
  background-color: #f5f8ff;
  border-color: #f5f8ff;
  color: #434343;
}
.x-button.g1.plain {
  border-color: #f5f8ff;
}
.x-button.g1.plain, .x-button.g1.link {
  color: #f5f8ff;
}
.x-button.g2 {
  background-color: #e0e0e0;
  border-color: #e0e0e0;
  color: #434343;
}
.x-button.g2.plain {
  border-color: #e0e0e0;
}
.x-button.g2.plain, .x-button.g2.link {
  color: #e0e0e0;
}
.x-button.g3 {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
  color: #434343;
}
.x-button.g3.plain {
  border-color: #d9d9d9;
}
.x-button.g3.plain, .x-button.g3.link {
  color: #d9d9d9;
}
.x-button.g4 {
  background-color: #b3b3b3;
  border-color: #b3b3b3;
  color: #fff;
}
.x-button.g4.plain {
  border-color: #b3b3b3;
}
.x-button.g4.plain, .x-button.g4.link {
  color: #b3b3b3;
}
.x-button.g5 {
  background-color: #808080;
  border-color: #808080;
  color: #fff;
}
.x-button.g5.plain {
  border-color: #808080;
}
.x-button.g5.plain, .x-button.g5.link {
  color: #808080;
}
.x-button.g6 {
  background-color: #666666;
  border-color: #666666;
  color: #fff;
}
.x-button.g6.plain {
  border-color: #666666;
}
.x-button.g6.plain, .x-button.g6.link {
  color: #666666;
}
.x-button.g7 {
  background-color: #4d4d4d;
  border-color: #4d4d4d;
  color: #fff;
}
.x-button.g7.plain {
  border-color: #4d4d4d;
}
.x-button.g7.plain, .x-button.g7.link {
  color: #4d4d4d;
}
.x-button.g8 {
  background-color: #333333;
  border-color: #333333;
  color: #fff;
}
.x-button.g8.plain {
  border-color: #333333;
}
.x-button.g8.plain, .x-button.g8.link {
  color: #333333;
}
.x-button.g9 {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.x-button.g9.plain {
  border-color: #1a1a1a;
}
.x-button.g9.plain, .x-button.g9.link {
  color: #1a1a1a;
}
.x-button.w {
  background-color: #fff;
  border-color: #fff;
  color: #434343;
}
.x-button.w.plain {
  border-color: #fff;
}
.x-button.w.plain, .x-button.w.link {
  color: #fff;
}
.x-button.primary {
  background-color: #1450f5;
  border-color: #1450f5;
  color: #fff;
}
.x-button.primary.plain {
  border-color: #1450f5;
}
.x-button.primary.plain, .x-button.primary.link {
  color: #1450f5;
}
.x-button.secondary {
  background-color: #c87d2f;
  border-color: #c87d2f;
  color: #fff;
}
.x-button.secondary.plain {
  border-color: #c87d2f;
}
.x-button.secondary.plain, .x-button.secondary.link {
  color: #c87d2f;
}
.x-button.success {
  background-color: #91d300;
  border-color: #91d300;
  color: #fff;
}
.x-button.success.plain {
  border-color: #91d300;
}
.x-button.success.plain, .x-button.success.link {
  color: #91d300;
}
.x-button.warning {
  background-color: #ffc300;
  border-color: #ffc300;
  color: #fff;
}
.x-button.warning.plain {
  border-color: #ffc300;
}
.x-button.warning.plain, .x-button.warning.link {
  color: #ffc300;
}
.x-button.danger {
  background-color: #fa5151;
  border-color: #fa5151;
  color: #fff;
}
.x-button.danger.plain {
  border-color: #fa5151;
}
.x-button.danger.plain, .x-button.danger.link {
  color: #fa5151;
}
.x-button.info {
  background-color: #666666;
  border-color: #666666;
  color: #fff;
}
.x-button.info.plain {
  border-color: #666666;
}
.x-button.info.plain, .x-button.info.link {
  color: #666666;
}
.x-button.red {
  background-color: #fa5151;
  border-color: #fa5151;
  color: #fff;
}
.x-button.red.plain {
  border-color: #fa5151;
}
.x-button.red.plain, .x-button.red.link {
  color: #fa5151;
}
.x-button.orange {
  background-color: #c87d2f;
  border-color: #c87d2f;
  color: #fff;
}
.x-button.orange.plain {
  border-color: #c87d2f;
}
.x-button.orange.plain, .x-button.orange.link {
  color: #c87d2f;
}
.x-button.brown {
  background-color: #7b4d13;
  border-color: #7b4d13;
  color: #fff;
}
.x-button.brown.plain {
  border-color: #7b4d13;
}
.x-button.brown.plain, .x-button.brown.link {
  color: #7b4d13;
}
.x-button.yellow {
  background-color: #ffc300;
  border-color: #ffc300;
  color: #fff;
}
.x-button.yellow.plain {
  border-color: #ffc300;
}
.x-button.yellow.plain, .x-button.yellow.link {
  color: #ffc300;
}
.x-button.green {
  background-color: #91d300;
  border-color: #91d300;
  color: #fff;
}
.x-button.green.plain {
  border-color: #91d300;
}
.x-button.green.plain, .x-button.green.link {
  color: #91d300;
}
.x-button.lightGreen {
  background-color: #95ec69;
  border-color: #95ec69;
  color: #fff;
}
.x-button.lightGreen.plain {
  border-color: #95ec69;
}
.x-button.lightGreen.plain, .x-button.lightGreen.link {
  color: #95ec69;
}
.x-button.darkGreen {
  background-color: #07c160;
  border-color: #07c160;
  color: #fff;
}
.x-button.darkGreen.plain {
  border-color: #07c160;
}
.x-button.darkGreen.plain, .x-button.darkGreen.link {
  color: #07c160;
}
.x-button.lightBlue {
  background-color: #10aeff;
  border-color: #10aeff;
  color: #fff;
}
.x-button.lightBlue.plain {
  border-color: #10aeff;
}
.x-button.lightBlue.plain, .x-button.lightBlue.link {
  color: #10aeff;
}
.x-button.blue {
  background-color: #1485ee;
  border-color: #1485ee;
  color: #fff;
}
.x-button.blue.plain {
  border-color: #1485ee;
}
.x-button.blue.plain, .x-button.blue.link {
  color: #1485ee;
}
.x-button.darkBlue {
  background-color: #6467f0;
  border-color: #6467f0;
  color: #fff;
}
.x-button.darkBlue.plain {
  border-color: #6467f0;
}
.x-button.darkBlue.plain, .x-button.darkBlue.link {
  color: #6467f0;
}
.x-button.grayBlue {
  background-color: #576b95;
  border-color: #576b95;
  color: #fff;
}
.x-button.grayBlue.plain {
  border-color: #576b95;
}
.x-button.grayBlue.plain, .x-button.grayBlue.link {
  color: #576b95;
}
.x-button.purple {
  background-color: #cf50fb;
  border-color: #cf50fb;
  color: #fff;
}
.x-button.purple.plain {
  border-color: #cf50fb;
}
.x-button.purple.plain, .x-button.purple.link {
  color: #cf50fb;
}
.x-button.mini {
  font-size: 50%;
  padding: 0.04rem 0.08rem;
  min-height: 0.36rem;
}
.x-button.mini.icon.keep-width {
  min-height: 0.36rem;
  min-width: 0.36rem;
}
.x-button.small {
  font-size: 75%;
  padding: 0.06rem 0.12rem;
  min-height: 0.55rem;
}
.x-button.small.icon.keep-width {
  min-height: 0.55rem;
  min-width: 0.55rem;
}
.x-button.little {
  font-size: 85%;
  padding: 0.068rem 0.136rem;
  min-height: 0.626rem;
}
.x-button.little.icon.keep-width {
  min-height: 0.626rem;
  min-width: 0.626rem;
}
.x-button.big {
  font-size: 125%;
  padding: 0.1rem 0.2rem;
  min-height: 0.93rem;
}
.x-button.big.icon.keep-width {
  min-height: 0.93rem;
  min-width: 0.93rem;
}
.x-button.large {
  font-size: 150%;
  padding: 0.12rem 0.24rem;
  min-height: 1.12rem;
}
.x-button.large.icon.keep-width {
  min-height: 1.12rem;
  min-width: 1.12rem;
}
.x-button.huge {
  font-size: 175%;
  padding: 0.14rem 0.28rem;
  min-height: 1.31rem;
}
.x-button.huge.icon.keep-width {
  min-height: 1.31rem;
  min-width: 1.31rem;
}
.x-button.plain, .x-button.link {
  background-color: transparent;
}
.x-button.link {
  border: none;
}
.x-button.icon {
  padding: 0;
  min-height: initial;
}
.x-button.icon.keep-width {
  min-width: 0.74rem;
  min-height: 0.74rem;
}
.x-button.block {
  display: flex;
  width: 100%;
}
.x-button.fill-width {
  flex: 1;
}
.x-button.disabled {
  opacity: 0.5;
  background-color: #e0e0e0;
  border-color: #e0e0e0;
}
/*
断点选择策略
xs	超小设备（Extra small）	<768px	  手机竖屏
sm	小设备（Small）	        ≥768px	  大屏手机、小型平板
md	中等设备（Medium）	    ≥992px	  平板、小尺寸笔记本
lg	大设备（Large）	        ≥1200px	  标准桌面显示器
xl	超大设备（Extra large）	≥1400px	  大屏桌面（1080p+）
xxl	超超大设备（XX-Large）	≥1920px	  4K/超宽屏（2K及以上）

*/
/*灰色系*/
/*色环*/
/*辅助色*/
/*应用色*/
/*边框色*/
/*字体颜色*/
/* BEM support Func
 -------------------------- */
.x-icon {
  display: inline-block;
  font-family: "iconfont", serif;
  font-size: inherit;
  line-height: inherit;
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 1em;
  min-height: 1em;
  line-height: 1;
  display: inline-flex;
  margin: 0;
  /* 主题颜色 */
  /* 尺寸大小 */
}
.x-icon.block {
  display: block;
}
.x-icon > img {
  display: block;
  width: 100%;
  height: auto;
}
.x-icon.white {
  color: #fff;
}
.x-icon.g1 {
  color: #f5f8ff;
}
.x-icon.g2 {
  color: #e0e0e0;
}
.x-icon.g3 {
  color: #d9d9d9;
}
.x-icon.g4 {
  color: #b3b3b3;
}
.x-icon.g5 {
  color: #808080;
}
.x-icon.g6 {
  color: #666666;
}
.x-icon.g7 {
  color: #4d4d4d;
}
.x-icon.g8 {
  color: #333333;
}
.x-icon.g9 {
  color: #1a1a1a;
}
.x-icon.w {
  color: #fff;
}
.x-icon.primary {
  color: #1450f5;
}
.x-icon.secondary {
  color: #c87d2f;
}
.x-icon.success {
  color: #91d300;
}
.x-icon.warning {
  color: #ffc300;
}
.x-icon.danger {
  color: #fa5151;
}
.x-icon.info {
  color: #666666;
}
.x-icon.red {
  color: #fa5151;
}
.x-icon.orange {
  color: #c87d2f;
}
.x-icon.brown {
  color: #7b4d13;
}
.x-icon.yellow {
  color: #ffc300;
}
.x-icon.green {
  color: #91d300;
}
.x-icon.lightGreen {
  color: #95ec69;
}
.x-icon.darkGreen {
  color: #07c160;
}
.x-icon.lightBlue {
  color: #10aeff;
}
.x-icon.blue {
  color: #1485ee;
}
.x-icon.darkBlue {
  color: #6467f0;
}
.x-icon.grayBlue {
  color: #576b95;
}
.x-icon.purple {
  color: #cf50fb;
}
.x-icon.mini {
  font-size: 50%;
  /*> .inner,
  > .svg-inner,
  > .x-image {
  }*/
}
.x-icon.small {
  font-size: 75%;
  /*> .inner,
  > .svg-inner,
  > .x-image {
  }*/
}
.x-icon.little {
  font-size: 85%;
  /*> .inner,
  > .svg-inner,
  > .x-image {
  }*/
}
.x-icon.big {
  font-size: 125%;
  /*> .inner,
  > .svg-inner,
  > .x-image {
  }*/
}
.x-icon.large {
  font-size: 150%;
  /*> .inner,
  > .svg-inner,
  > .x-image {
  }*/
}
.x-icon.huge {
  font-size: 175%;
  /*> .inner,
  > .svg-inner,
  > .x-image {
  }*/
}
/*
断点选择策略
xs	超小设备（Extra small）	<768px	  手机竖屏
sm	小设备（Small）	        ≥768px	  大屏手机、小型平板
md	中等设备（Medium）	    ≥992px	  平板、小尺寸笔记本
lg	大设备（Large）	        ≥1200px	  标准桌面显示器
xl	超大设备（Extra large）	≥1400px	  大屏桌面（1080p+）
xxl	超超大设备（XX-Large）	≥1920px	  4K/超宽屏（2K及以上）

*/
/*灰色系*/
/*色环*/
/*辅助色*/
/*应用色*/
/*边框色*/
/*字体颜色*/
/* BEM support Func
 -------------------------- */
.x-message-box {
  position: absolute;
  z-index: 700;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.x-message-box > .inner {
  background-color: #fff;
  min-width: 61.8%;
  min-height: 3.4rem;
  padding: 0.1rem;
  border-radius: 0.16rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.x-message-box > .inner > .header {
  padding: 0.1rem;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.x-message-box > .inner > .header > .title {
  flex: 1;
  text-align: center;
  font-size: 0.375rem;
}
.x-message-box > .inner > .header > .del {
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
}
.x-message-box > .inner > .body {
  flex: 1;
  padding: 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.x-message-box > .inner > .footer {
  margin: 0.1rem -0.1rem -0.1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 0.85rem;
}
.x-message-box.toast {
  background-color: transparent;
  pointer-events: none;
}
.x-message-box.toast > .inner {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  min-width: initial;
  min-height: initial;
  padding: 0.1rem 0.28rem;
}
/*
断点选择策略
xs	超小设备（Extra small）	<768px	  手机竖屏
sm	小设备（Small）	        ≥768px	  大屏手机、小型平板
md	中等设备（Medium）	    ≥992px	  平板、小尺寸笔记本
lg	大设备（Large）	        ≥1200px	  标准桌面显示器
xl	超大设备（Extra large）	≥1400px	  大屏桌面（1080p+）
xxl	超超大设备（XX-Large）	≥1920px	  4K/超宽屏（2K及以上）

*/
/*灰色系*/
/*色环*/
/*辅助色*/
/*应用色*/
/*边框色*/
/*字体颜色*/
/* BEM support Func
 -------------------------- */
#app {
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
#app > .pages {
  height: 100%;
}

/*页面左入动画*/
.page-left-enter-active {
  z-index: 1;
  position: absolute;
  top: 0;
  animation: left-in 0.3s;
  pointer-events: none;
}
.page-left-leave-active {
  position: relative;
  animation: left-out 0.3s;
  pointer-events: none;
}

/*页面右入动画*/
.page-right-enter-active {
  position: absolute;
  top: 0;
  animation: right-in 0.3s;
  pointer-events: none;
}
.page-right-leave-active {
  position: relative;
  z-index: 1;
  animation: right-out 0.3s;
  pointer-events: none;
}