zarm-web/dist/zarm-web.css

基于 React 的桌面端UI库

/*!
 * 
 *     zarm-web v0.0.1-alpha.4
 * 
 *     Github: https://github.com/ZhonganTechENG/zarm-web
 * 
 *     Copyright (c) 2013-present, ZhonganTech, Inc.
 * 
 *     This source code is licensed under the MIT license found in the
 *     LICENSE file in the root directory of this source tree.
 *   
 */
/*! 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 {
  -webkit-box-sizing: content-box;
          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 */
  -webkit-text-decoration: underline dotted;
          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.
 */
button,
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 {
  -webkit-box-sizing: border-box;
          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] {
  -webkit-box-sizing: border-box;
          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: -2px;
  /* 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;
}
@charset "UTF-8";
:root {
  --theme-default:hsl(0, 0%, 90%);
  --theme-default-light:hsla(0, 0%, 90%, 0.8);
  --theme-default-dark:hsl(0, 0%, 86%);
  --theme-primary:hsl(156, 100%, 36.9%);
  --theme-primary-light:hsla(156, 100%, 36.9%, 0.8);
  --theme-primary-dark:hsl(156, 100%, 32.9%);
  --theme-success:hsl(156, 100%, 36.9%);
  --theme-success-light:hsla(156, 100%, 36.9%, 0.8);
  --theme-success-dark:hsl(156, 100%, 32.9%);
  --theme-warning:hsl(31, 83.1%, 55.9%);
  --theme-warning-light:hsla(31, 83.1%, 55.9%, 0.8);
  --theme-warning-dark:hsl(31, 83.1%, 51.9%);
  --theme-danger:hsl(0, 100%, 65.7%);
  --theme-danger-light:hsla(0, 100%, 65.7%, 0.8);
  --theme-danger-dark:hsl(0, 100%, 61.7%);
  --color-text: #343434;
  --color-text-inverse: #fff;
  --color-text-placeholder: #a9a9a9;
  --color-text-disabled: #bcbcbc;
  --color-text-caption: #909090;
  --color-link: var(--theme-primary);
  --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 0, 0, 0.1);
  --box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.2);
  --background-disabled: #fafafa;
  --border-color: #dcdcdc;
  --border-disabled: #e6e6e6;
  --zindex-tooltip: 1500;
  --opacity-disabled: 0.5;
  --opacity-tooltip: 0.8;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-round: 1000px;
  --radius-circle: 50%;
  --padding-h-xs: 8px;
  --padding-h-sm: 12px;
  --padding-h-md: 14px;
  --padding-h-lg: 16px;
  --padding-h-xl: 18px;
  --padding-v-xs: 6px;
  --padding-v-sm: 8px;
  --padding-v-md: 12px;
  --padding-v-lg: 14px;
  --padding-v-xl: 18px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --activity-indicator-size-md: 16px;
  --activity-indicator-size-lg: 32px;
  --activity-indicator-path-color: #e6e6e6;
  --avatar-border-radius: 50%;
  --avatar-fontSize: 14px;
  --avatar-width-md: 40px;
  --avatar-height-md: 40px;
  --avatar-width-xl: 72px;
  --avatar-height-xl: 72px;
  --avatar-width-lg: 48px;
  --avatar-height-lg: 48px;
  --avatar-width-sm: 32px;
  --avatar-height-sm: 32px;
  --avatar-width-xs: 24px;
  --avatar-height-xs: 24px;
  --avatar-default-color: #fff;
  --avatar-default-bg-color: #ccc;
  --badge-height: 14px;
  --badge-font-size: var(--font-size-xs);
  --badge-padding-h: 4px;
  --badge-dot-diameter: 8px;
  --badge-border-radius-rect: var(--radius-sm);
  --badge-border-radius-round: var(--radius-round);
  --badge-sup-top: -4px;
  --badge-text-color: #fff;
  --breadcrumb-default-font-size: 14px;
  --breadcrumb-default-color: var(--color-text-caption);
  --breadcrumb-color: var(--color-text);
  --breadcrumb-hover-color: var(--theme-primary);
  --breadcrumb-separator-color: rgba(0, 0, 0, 0.45);
  --button-ghost-disabled-border: var(--border-color);
  --button-ghost-disabled-color: var(--color-text-inverse);
  --button-padding-h-xl: var(--padding-h-xl);
  --button-padding-h-lg: var(--padding-h-lg);
  --button-padding-h-md: var(--padding-h-md);
  --button-padding-h-sm: var(--padding-h-sm);
  --button-padding-h-xs: var(--padding-h-xs);
  --button-height-xl: 40px;
  --button-height-lg: 36px;
  --button-height-md: 32px;
  --button-height-sm: 28px;
  --button-height-xs: 24px;
  --button-font-size-xl: 16px;
  --button-font-size-lg: 16px;
  --button-font-size-md: 14px;
  --button-font-size-sm: 12px;
  --button-font-size-xs: 12px;
  --button-icon-size-xl: 20px;
  --button-icon-size-lg: 18px;
  --button-icon-size-md: 16px;
  --button-icon-size-sm: 14px;
  --button-icon-size-xs: 14px;
  --button-disabled-opacity: var(--opacity-disabled);
  --button-disabled-color-ghost: var(--border-disabled);
  --button-default-background: var(--color-text-inverse);
  --button-default-border: var(--border-color);
  --button-default-color: var(--color-text);
  --button-default-hover-background: var(--color-text-inverse);
  --button-default-hover-border: var(--theme-primary);
  --button-default-hover-color: var(--theme-primary);
  --button-default-active-background: var(--color-text-inverse);
  --button-default-active-border: var(--theme-primary-dark);
  --button-default-active-color: var(--theme-primary-dark);
  --button-default-ghost-border: var(--color-text-inverse);
  --button-default-ghost-color: var(--color-text-inverse);
  --button-default-ghost-hover-border: var(--theme-primary-light);
  --button-default-ghost-hover-color: var(--theme-primary-light);
  --button-default-ghost-active-border: var(--theme-primary-dark);
  --button-default-ghost-active-color: var(--theme-primary-dark);
  --button-primary-background: var(--theme-primary);
  --button-primary-border: var(--theme-primary);
  --button-primary-color: var(--color-text-inverse);
  --button-primary-hover-background: var(--theme-primary-light);
  --button-primary-hover-border: var(--theme-primary-light);
  --button-primary-hover-color: var(--color-text-inverse);
  --button-primary-active-background: var(--theme-primary-dark);
  --button-primary-active-border: var(--theme-primary-dark);
  --button-primary-active-color: var(--color-text-inverse);
  --button-primary-ghost-border: var(--theme-primary);
  --button-primary-ghost-color: var(--theme-primary);
  --button-primary-ghost-hover-border: var(--theme-primary-light);
  --button-primary-ghost-hover-color: var(--theme-primary-light);
  --button-primary-ghost-active-border: var(--theme-primary-dark);
  --button-primary-ghost-active-color: var(--theme-primary-dark);
  --button-primary-gap-color: hsla(0, 0%, 100%, 0.3);
  --button-danger-background: var(--theme-danger);
  --button-danger-border: var(--theme-danger);
  --button-danger-color: var(--color-text-inverse);
  --button-danger-hover-background: var(--theme-danger-light);
  --button-danger-hover-border: var(--theme-danger-light);
  --button-danger-hover-color: var(--color-text-inverse);
  --button-danger-active-background: var(--theme-danger-dark);
  --button-danger-active-border: var(--theme-danger-dark);
  --button-danger-active-color: var(--color-text-inverse);
  --button-danger-ghost-border: var(--theme-danger);
  --button-danger-ghost-color: var(--theme-danger);
  --button-danger-ghost-hover-border: var(--theme-danger-light);
  --button-danger-ghost-hover-color: var(--theme-danger-light);
  --button-danger-ghost-active-border: var(--theme-danger-dark);
  --button-danger-ghost-active-color: var(--theme-danger-dark);
  --checkbox-size: 14px;
  --checkbox-radius: var(--radius-sm);
  --checkbox-border-color: var(--border-color);
  --loading-height-xs: 12px;
  --loading-height-md: 24px;
  --loading-height-lg: 36px;
  --loading-margin-h-xs: var(--padding-h-xs);
  --loading-margin-h-md: var(--padding-h-md);
  --loading-margin-h-lg: var(--padding-h-lg);
  --loading-font-size-xs: var(--font-size-xs);
  --loading-font-size-md: var(--font-size-md);
  --loading-font-size-lg: var(--font-size-lg);
  --loading-default-svg-color: var(--theme-primary);
  --loading-default-text-color: var(--color-text-disabled);
  --loading-default-mask-color: rgba(255, 255, 255, 0.4);
  --loading-default-mask-zIndex: 1000;
  --loading-inverse-mask-color: rgba(0, 0, 0, 0.4);
  --icon-font-size-sm: 16px;
  --icon-font-size-md: 24px;
  --icon-font-size-lg: 32px;
  --icon-theme-default: var(--color-text);
  --radio-size: 14px;
  --radio-radius: var(--radius-circle);
  --radio-border-color: var(--border-color);
  --radio-color: #616161;
  --menu-color: #343434;
  --menu-default-bg-color: var(--color-text-inverse);
  --menu-dark-bg-color: #001529;
  --menu-collapsed-width: 80px;
  --submenu-dark-bg-color: #000c17;
  --menuitem-dark-color: hsla(0, 0%, 100%, 0.65);
  --menuitem-dark-active-color: var(--color-text-inverse);
  --menuitem-default-color: #343434;
  --menuitem-active-color: var(--theme-primary);
  --menuitem-active-bg-color: rgba(0, 188, 112, 0.0625);
  --menuitem-disabled-color: rgba(0, 0, 0, 0.25);
  --menuitem-divider-bg-color: #e5e5e5;
  --menuitem-horizontal-padding: 20px;
  --menuitem-horizontal-height: 56px;
  --steps-title-color: var(--color-text);
  --steps-desc-color: var(--color-text-caption);
  --steps-title-font-size: var(--font-size-md);
  --steps-desc-font-size: var(--font-size-md);
  --steps-border-color: var(--border-color);
  --steps-status-wait: #bcbcbc;
  --steps-status-process: var(--theme-primary);
  --steps-status-error: var(--theme-danger);
  --steps-icon-size: 28px;
  --steps-content-width: 140px;
  --switch-width-md: 48px;
  --switch-width-sm: 32px;
  --switch-height-md: 20px;
  --switch-height-sm: 16px;
  --switch-background: #bcbcbc;
  --tabs-font-size-sm: 14px;
  --tabs-font-size-md: 16px;
  --tabs-font-size-lg: 18px;
  --tabs-header-icon-sm: 12px;
  --tabs-header-icon-md: 14px;
  --tabs-header-icon-lg: 16px;
  --tabs-header-card-height-sm: 34px;
  --tabs-header-card-height-md: 40px;
  --tabs-header-card-height-lg: 46px;
  --tabs-header-line-height-sm: 38px;
  --tabs-header-line-height-md: 48px;
  --tabs-header-line-height-lg: 58px;
  --tabs-header-vertical-height-sm: 30px;
  --tabs-header-vertical-height-md: 36px;
  --tabs-header-vertical-height-lg: 42px;
  --tabs-header-line-padding-sm: 12px;
  --tabs-header-line-padding-md: 16px;
  --tabs-header-line-padding-lg: 20px;
  --tabs-header-card-padding-sm: 10px;
  --tabs-header-card-padding-md: 12px;
  --tabs-header-card-padding-lg: 14px;
  --tabs-header-vertical-padding-sm: 16px;
  --tabs-header-vertical-padding-md: 20px;
  --tabs-header-vertical-padding-lg: 24px;
  --tabs-default-color: #616161;
  --tabs-default-hover-color: #33c98d;
  --tabs-default-disabled-color: var(--color-text-disabled);
  --tabs-default-icon-color: #bcbcbc;
  --tabs-default-icon-disabled-color: var(--border-disabled);
  --tabs-default-icon-hover-color: var(--color-text);
  --tabs-default-active-background: var(--color-text-inverse);
  --tabs-default-line-color: #00bc70;
  --tabs-default-active-color: #00bc70;
  --tabs-default-background-color: var(--color-text-inverse);
  --tabs-default-card-background: #fafafa;
  --tabs-default-noborder-background: #f2f2f2;
  --tag-height-lg: 32px;
  --tag-height-md: 28px;
  --tag-height-sm: 24px;
  --tag-height-xs: 20px;
  --tag-padding-h-lg: 16px;
  --tag-padding-h: 12px;
  --tag-font-size: 12px;
  --tag-icon-size-lg: 14px;
  --tag-icon-size: 12px;
  --tag-icon-size-xs: 10px;
  --tag-color-disabled: var(--color-text-disabled);
  --tag-disabled-opacity: var(--opacity-disabled);
  --tag-default-background: #f9f9f9;
  --tag-default-color: #616161;
  --tag-default-border: var(--border-color);
  --tag-primary-color: var(--theme-primary);
  --tag-success-color: var(--theme-success);
  --tag-warning-color: var(--theme-warning);
  --tag-danger-color: var(--theme-danger);
  --tag-primary-hover-background: var(--theme-primary-light);
  --tag-primary-active-background: var(--theme-primary-dark);
  --tag-color-green: 0, 188, 112;
  --tag-color-blue: 84, 192, 232;
  --tag-color-orange: 236, 145, 49;
  --tag-color-red: 255, 80, 80;
  --tooltip-font-size: 12px;
  --tooltip-color: var(--color-text-inverse);
  --tooltip-arrow-size: 4px;
  --tooltip-light-background-color: #f2f2f2;
  --tooltip-dark-background-color: rgba(0, 0, 0, var(--opacity-tooltip));
  --tooltip-padding-v: var(--padding-v-xs);
  --tooltip-padding-h: var(--padding-h-xs);
}

@-webkit-keyframes door-enter {
  from {
    -webkit-transform: scale3d(0, 1, 1);
            transform: scale3d(0, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 0.1);
            transform: scale3d(1, 1, 0.1);
  }
}

@keyframes door-enter {
  from {
    -webkit-transform: scale3d(0, 1, 1);
            transform: scale3d(0, 1, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 0.1);
            transform: scale3d(1, 1, 0.1);
  }
}
.door-enter {
  -webkit-animation: door-enter both cubic-bezier(0.4, 0, 0, 1.5);
          animation: door-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes door-leave {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  60% {
    -webkit-transform: scale3d(0.01, 1, 1);
            transform: scale3d(0.01, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0, 1, 0.1);
            transform: scale3d(0, 1, 0.1);
  }
}

@keyframes door-leave {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  60% {
    -webkit-transform: scale3d(0.01, 1, 1);
            transform: scale3d(0.01, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0, 1, 0.1);
            transform: scale3d(0, 1, 0.1);
  }
}
.door-leave {
  -webkit-animation: door-leave both;
          animation: door-leave both;
}

@-webkit-keyframes fade-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-enter {
  -webkit-animation: fade-enter both ease-in;
          animation: fade-enter both ease-in;
}

@-webkit-keyframes fade-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fade-leave {
  -webkit-animation: fade-leave both ease-out;
          animation: fade-leave both ease-out;
}

@-webkit-keyframes flip-enter {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flip-enter {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}
.flip-enter {
  -webkit-animation: flip-enter both ease-in;
          animation: flip-enter both ease-in;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

@-webkit-keyframes flip-leave {
  from {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}

@keyframes flip-leave {
  from {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}
.flip-leave {
  -webkit-animation: flip-leave both;
          animation: flip-leave both;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

@-webkit-keyframes rotate360 {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate360 {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.rotate360 {
  -webkit-animation: rotate360 1s linear infinite;
          animation: rotate360 1s linear infinite;
}

/* rotate */
@-webkit-keyframes rotate-enter {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes rotate-enter {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.rotate-enter {
  -webkit-animation: rotate-enter both;
          animation: rotate-enter both;
}

@-webkit-keyframes rotate-leave {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes rotate-leave {
  from {
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  to {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}
.rotate-leave {
  -webkit-animation: rotate-leave both;
          animation: rotate-leave both;
}

/* slideUp */
@-webkit-keyframes slideUp-enter {
  from {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes slideUp-enter {
  from {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.slideUp-enter {
  -webkit-animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
          animation: slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes slideUp-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
}

@keyframes slideUp-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
}
.slideUp-leave {
  -webkit-animation: slideUp-leave both;
          animation: slideUp-leave both;
}

/* slideDown */
@-webkit-keyframes slideDown-enter {
  from {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes slideDown-enter {
  from {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.slideDown-enter {
  -webkit-animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
          animation: slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes slideDown-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
}

@keyframes slideDown-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
}
.slideDown-leave {
  -webkit-animation: slideDown-leave both;
          animation: slideDown-leave both;
}

/* slideLeft */
@-webkit-keyframes slideLeft-enter {
  from {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes slideLeft-enter {
  from {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.slideLeft-enter {
  -webkit-animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
          animation: slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes slideLeft-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}

@keyframes slideLeft-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
.slideLeft-leave {
  -webkit-animation: slideLeft-leave both;
          animation: slideLeft-leave both;
}

/* slideRight */
@-webkit-keyframes slideRight-enter {
  from {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes slideRight-enter {
  from {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.slideRight-enter {
  -webkit-animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
          animation: slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes slideRight-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
}

@keyframes slideRight-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
}
.slideRight-leave {
  -webkit-animation: slideRight-leave both;
          animation: slideRight-leave both;
}

@-webkit-keyframes zoom-enter {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes zoom-enter {
  from {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.zoom-enter {
  -webkit-animation: zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
          animation: zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes zoom-leave {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes zoom-leave {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
}
.zoom-leave {
  -webkit-animation: zoom-leave both cubic-bezier(0.4, 0, 0, 1.5);
          animation: zoom-leave both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes za-zoom-fade-enter {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes za-zoom-fade-enter {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
.za-zoom-fade-enter {
  -webkit-animation: za-zoom-fade-enter both cubic-bezier(0.08, 0.82, 0.17, 1);
          animation: za-zoom-fade-enter both cubic-bezier(0.08, 0.82, 0.17, 1);
}

@-webkit-keyframes za-zoom-fade-leave {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes za-zoom-fade-leave {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
}
.za-zoom-fade-leave {
  -webkit-animation: za-zoom-fade-leave both cubic-bezier(0.78, 0.14, 0.15, 0.86);
          animation: za-zoom-fade-leave both cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

/* moveUp */
@-webkit-keyframes moveUp-enter {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes moveUp-enter {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.moveUp-enter {
  -webkit-animation: moveUp-enter both ease-in;
          animation: moveUp-enter both ease-in;
}

@-webkit-keyframes moveUp-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@keyframes moveUp-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
.moveUp-leave {
  -webkit-animation: moveUp-leave both ease-out;
          animation: moveUp-leave both ease-out;
}

/* moveDown */
@-webkit-keyframes moveDown-enter {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes moveDown-enter {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.moveDown-enter {
  -webkit-animation: moveDown-enter both ease-in;
          animation: moveDown-enter both ease-in;
}

@-webkit-keyframes moveDown-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes moveDown-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
.moveDown-leave {
  -webkit-animation: moveDown-leave both ease-out;
          animation: moveDown-leave both ease-out;
}

/* moveLeft */
@-webkit-keyframes moveLeft-enter {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes moveLeft-enter {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.moveLeft-enter {
  -webkit-animation: moveLeft-enter both ease-in;
          animation: moveLeft-enter both ease-in;
}

@-webkit-keyframes moveLeft-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@keyframes moveLeft-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
.moveLeft-leave {
  -webkit-animation: moveLeft-leave both ease-out;
          animation: moveLeft-leave both ease-out;
}

/* moveRight */
@-webkit-keyframes moveRight-enter {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes moveRight-enter {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.moveRight-enter {
  -webkit-animation: moveRight-enter both ease-in;
          animation: moveRight-enter both ease-in;
}

@-webkit-keyframes moveRight-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@keyframes moveRight-leave {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
.moveRight-leave {
  -webkit-animation: moveRight-leave both ease-out;
          animation: moveRight-leave both ease-out;
}

@-webkit-keyframes scaleDown-enter {
  from {
    opacity: 0;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes scaleDown-enter {
  from {
    opacity: 0;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
.scaleDown-enter {
  -webkit-animation: scaleDown-enter both;
          animation: scaleDown-enter both;
}

@-webkit-keyframes scaleDown-leave {
  from {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    opacity: 0;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}

@keyframes scaleDown-leave {
  from {
    opacity: 1;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    opacity: 0;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}
.scaleDown-leave {
  -webkit-animation: scaleDown-leave both;
          animation: scaleDown-leave both;
}

@-webkit-keyframes scaleUp-enter {
  from {
    opacity: 0;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes scaleUp-enter {
  from {
    opacity: 0;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
.scaleUp-enter {
  -webkit-animation: scaleUp-enter both;
          animation: scaleUp-enter both;
}

@-webkit-keyframes scaleUp-leave {
  from {
    opacity: 1;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    opacity: 0;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}

@keyframes scaleUp-leave {
  from {
    opacity: 1;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    opacity: 0;
    -webkit-transform-origin: bottom center;
            transform-origin: bottom center;
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
  }
}
.scaleUp-leave {
  -webkit-animation: scaleUp-leave both;
          animation: scaleUp-leave both;
}

@-webkit-keyframes bounce-enter {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounce-enter {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes bounce-leave {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounce-leave {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
}
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}
@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
            transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
            transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*[contenteditable] {
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
}

*:focus {
  outline: none;
}

a {
  background: transparent;
  text-decoration: none;
  outline: none;
}

/* border */
/* box shadow */
/* btn */
.ui-alert {
  padding: 16px 16px 16px 75px;
  position: relative;
  color: #666;
  line-height: 1.5;
}
.ui-alert .ui-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -30px;
  font-size: 40px;
  color: #eca632;
}
.ui-alert span {
  font-size: 16px;
  color: #666;
}

.zw-avatar {
  font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant: tabular-nums;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: center;
  background: #ccc;
  background: var(--avatar-default-bg-color);
  color: #fff;
  color: var(--avatar-default-color);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 50%;
  border-radius: var(--avatar-border-radius);
  font-size: 14px;
  font-size: var(--avatar-fontSize);
  /* Avatar sizes */
  /* Avatar shape */
  /* Avatar image */
  /* Avatar string */
}
.zw-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
}
.zw-avatar--md {
  width: 40px;
  width: var(--avatar-width-md);
  height: 40px;
  height: var(--avatar-height-md);
  line-height: 40px;
  line-height: var(--avatar-height-md);
  font-size: var(--avatar-fontSize-icon-md);
}
.zw-avatar--md > * {
  line-height: 40px;
  line-height: var(--avatar-height-md);
}
.zw-avatar--md.has-icon {
  font-size: var(--avatar-fontSize-icon-md);
}

.zw-avatar--xl {
  width: 72px;
  width: var(--avatar-width-xl);
  height: 72px;
  height: var(--avatar-height-xl);
  line-height: 72px;
  line-height: var(--avatar-height-xl);
  font-size: var(--avatar-fontSize-icon-xl);
}
.zw-avatar--xl > * {
  line-height: 72px;
  line-height: var(--avatar-height-xl);
}
.zw-avatar--xl.has-icon {
  font-size: var(--avatar-fontSize-icon-xl);
}

.zw-avatar--lg {
  width: 48px;
  width: var(--avatar-width-lg);
  height: 48px;
  height: var(--avatar-height-lg);
  line-height: 48px;
  line-height: var(--avatar-height-lg);
  font-size: var(--avatar-fontSize-icon-lg);
}
.zw-avatar--lg > * {
  line-height: 48px;
  line-height: var(--avatar-height-lg);
}
.zw-avatar--lg.has-icon {
  font-size: var(--avatar-fontSize-icon-lg);
}

.zw-avatar--sm {
  width: 32px;
  width: var(--avatar-width-sm);
  height: 32px;
  height: var(--avatar-height-sm);
  line-height: 32px;
  line-height: var(--avatar-height-sm);
  font-size: var(--avatar-fontSize-icon-sm);
}
.zw-avatar--sm > * {
  line-height: 32px;
  line-height: var(--avatar-height-sm);
}
.zw-avatar--sm.has-icon {
  font-size: var(--avatar-fontSize-icon-sm);
}

.zw-avatar--xs {
  width: 24px;
  width: var(--avatar-width-xs);
  height: 24px;
  height: var(--avatar-height-xs);