@charset "UTF-8";

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: transparent
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
  appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

[hidden],
template {
  display: none
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

@-webkit-keyframes a {

  0%,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0)
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0)
  }
}

@keyframes a {

  0%,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0)
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0)
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0)
  }
}

.bounce {
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom
}

@-webkit-keyframes b {

  0%,
  50%,
  to {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

@keyframes b {

  0%,
  50%,
  to {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

.flash {
  -webkit-animation-name: b;
  animation-name: b
}

@-webkit-keyframes c {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes c {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.pulse {
  -webkit-animation-name: c;
  animation-name: c
}

@-webkit-keyframes d {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }

  40% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1)
  }

  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes d {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1)
  }

  40% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1)
  }

  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1)
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1)
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.rubberBand {
  -webkit-animation-name: d;
  animation-name: d
}

@-webkit-keyframes e {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}

@keyframes e {

  0%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}

.shake {
  -webkit-animation-name: e;
  animation-name: e
}

@-webkit-keyframes f {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg)
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg)
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg)
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg)
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes f {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg)
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg)
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg)
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg)
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: f;
  animation-name: f
}

@-webkit-keyframes g {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg)
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg)
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg)
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg)
  }

  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@keyframes g {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg)
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg)
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg)
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg)
  }

  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: g;
  animation-name: g
}

@-webkit-keyframes h {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes h {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  10%,
  20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.tada {
  -webkit-animation-name: h;
  animation-name: h
}

@-webkit-keyframes i {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg)
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg)
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg)
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg)
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes i {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg)
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg)
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg)
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg)
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.wobble {
  -webkit-animation-name: i;
  animation-name: i
}

@-webkit-keyframes j {

  0%,
  11.1%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg)
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }

  66.6% {
    -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
    transform: skewX(-.78125deg) skewY(-.78125deg)
  }

  77.7% {
    -webkit-transform: skewX(.390625deg) skewY(.390625deg);
    transform: skewX(.390625deg) skewY(.390625deg)
  }

  88.8% {
    -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
    transform: skewX(-.1953125deg) skewY(-.1953125deg)
  }
}

@keyframes j {

  0%,
  11.1%,
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg)
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg)
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg)
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg)
  }

  66.6% {
    -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
    transform: skewX(-.78125deg) skewY(-.78125deg)
  }

  77.7% {
    -webkit-transform: skewX(.390625deg) skewY(.390625deg);
    transform: skewX(.390625deg) skewY(.390625deg)
  }

  88.8% {
    -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
    transform: skewX(-.1953125deg) skewY(-.1953125deg)
  }
}

.jello {
  -webkit-animation-name: j;
  animation-name: j;
  -webkit-transform-origin: center;
  transform-origin: center
}

@-webkit-keyframes k {

  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1)
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .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(.97, .97, .97);
    transform: scale3d(.97, .97, .97)
  }

  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes k {

  0%,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1)
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .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(.97, .97, .97);
    transform: scale3d(.97, .97, .97)
  }

  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.bounceIn {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-name: k;
  animation-name: k
}

@-webkit-keyframes l {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0)
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes l {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0)
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.bounceInDown {
  -webkit-animation-name: l;
  animation-name: l
}

@-webkit-keyframes m {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0)
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes m {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0)
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.bounceInLeft {
  -webkit-animation-name: m;
  animation-name: m
}

@-webkit-keyframes n {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0)
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes n {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0)
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.bounceInRight {
  -webkit-animation-name: n;
  animation-name: n
}

@-webkit-keyframes o {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes o {

  0%,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.bounceInUp {
  -webkit-animation-name: o;
  animation-name: o
}

@-webkit-keyframes p {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .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(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
}

@keyframes p {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .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(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
}

.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-name: p;
  animation-name: p
}

@-webkit-keyframes q {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}

@keyframes q {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}

.bounceOutDown {
  -webkit-animation-name: q;
  animation-name: q
}

@-webkit-keyframes r {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}

@keyframes r {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}

.bounceOutLeft {
  -webkit-animation-name: r;
  animation-name: r
}

@-webkit-keyframes s {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}

@keyframes s {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}

.bounceOutRight {
  -webkit-animation-name: s;
  animation-name: s
}

@-webkit-keyframes t {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}

@keyframes t {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}

.bounceOutUp {
  -webkit-animation-name: t;
  animation-name: t
}

@-webkit-keyframes u {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes u {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.fadeIn {
  -webkit-animation-name: u;
  animation-name: u
}

@-webkit-keyframes v {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes v {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInDown {
  -webkit-animation-name: v;
  animation-name: v
}

@-webkit-keyframes w {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes w {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInDownBig {
  -webkit-animation-name: w;
  animation-name: w
}

@-webkit-keyframes x {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes x {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInLeft {
  -webkit-animation-name: x;
  animation-name: x
}

@-webkit-keyframes y {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes y {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInLeftBig {
  -webkit-animation-name: y;
  animation-name: y
}

@-webkit-keyframes z {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes z {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInRight {
  -webkit-animation-name: z;
  animation-name: z
}

@-webkit-keyframes A {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes A {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInRightBig {
  -webkit-animation-name: A;
  animation-name: A
}

@-webkit-keyframes B {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes B {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInUp {
  -webkit-animation-name: B;
  animation-name: B
}

@-webkit-keyframes C {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes C {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.fadeInUpBig {
  -webkit-animation-name: C;
  animation-name: C
}

@-webkit-keyframes D {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes D {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

.fadeOut {
  -webkit-animation-name: D;
  animation-name: D
}

@-webkit-keyframes E {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

@keyframes E {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

.fadeOutDown {
  -webkit-animation-name: E;
  animation-name: E
}

@-webkit-keyframes F {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}

@keyframes F {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}

.fadeOutDownBig {
  -webkit-animation-name: F;
  animation-name: F
}

@-webkit-keyframes G {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

@keyframes G {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

.fadeOutLeft {
  -webkit-animation-name: G;
  animation-name: G
}

@-webkit-keyframes H {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}

@keyframes H {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: H;
  animation-name: H
}

@-webkit-keyframes I {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

@keyframes I {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

.fadeOutRight {
  -webkit-animation-name: I;
  animation-name: I
}

@-webkit-keyframes J {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}

@keyframes J {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}

.fadeOutRightBig {
  -webkit-animation-name: J;
  animation-name: J
}

@-webkit-keyframes K {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

@keyframes K {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

.fadeOutUp {
  -webkit-animation-name: K;
  animation-name: K
}

@-webkit-keyframes L {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}

@keyframes L {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}

.fadeOutUpBig {
  -webkit-animation-name: L;
  animation-name: L
}

@-webkit-keyframes M {
  0% {
    -webkit-transform: perspective(400px) rotateY(-1turn);
    transform: perspective(400px) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
}

@keyframes M {
  0% {
    -webkit-transform: perspective(400px) rotateY(-1turn);
    transform: perspective(400px) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: M;
  animation-name: M
}

@-webkit-keyframes N {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

@keyframes N {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: N;
  animation-name: N
}

@-webkit-keyframes O {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

@keyframes O {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }

  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1
  }

  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg)
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: O;
  animation-name: O
}

@-webkit-keyframes P {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

@keyframes P {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0
  }
}

.flipOutX {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-name: P;
  animation-name: P;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important
}

@-webkit-keyframes Q {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }
}

@keyframes Q {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }

  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1
  }

  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0
  }
}

.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: Q;
  animation-name: Q
}

@-webkit-keyframes R {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes R {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.lightSpeedIn {
  -webkit-animation-name: R;
  animation-name: R;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out
}

@-webkit-keyframes S {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0
  }
}

@keyframes S {
  0% {
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0
  }
}

.lightSpeedOut {
  -webkit-animation-name: S;
  animation-name: S;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in
}

@-webkit-keyframes T {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes T {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.rotateIn {
  -webkit-animation-name: T;
  animation-name: T
}

@-webkit-keyframes U {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes U {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.rotateInDownLeft {
  -webkit-animation-name: U;
  animation-name: U
}

@-webkit-keyframes V {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes V {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.rotateInDownRight {
  -webkit-animation-name: V;
  animation-name: V
}

@-webkit-keyframes W {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes W {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.rotateInUpLeft {
  -webkit-animation-name: W;
  animation-name: W
}

@-webkit-keyframes X {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

@keyframes X {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1
  }
}

.rotateInUpRight {
  -webkit-animation-name: X;
  animation-name: X
}

@-webkit-keyframes Y {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0
  }
}

@keyframes Y {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0
  }
}

.rotateOut {
  -webkit-animation-name: Y;
  animation-name: Y
}

@-webkit-keyframes Z {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }
}

@keyframes Z {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: Z;
  animation-name: Z
}

@-webkit-keyframes ab {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

@keyframes ab {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

.rotateOutDownRight {
  -webkit-animation-name: ab;
  animation-name: ab
}

@-webkit-keyframes bb {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

@keyframes bb {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: bb;
  animation-name: bb
}

@-webkit-keyframes cb {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0
  }
}

@keyframes cb {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0
  }
}

.rotateOutUpRight {
  -webkit-animation-name: cb;
  animation-name: cb
}

@-webkit-keyframes db {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  40%,
  80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0
  }
}

@keyframes db {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  20%,
  60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
  }

  40%,
  80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: db;
  animation-name: db
}

@-webkit-keyframes eb {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg)
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes eb {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg)
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg)
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.jackInTheBox {
  -webkit-animation-name: eb;
  animation-name: eb
}

@-webkit-keyframes fb {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fb {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg)
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.rollIn {
  -webkit-animation-name: fb;
  animation-name: fb
}

@-webkit-keyframes gb {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg)
  }
}

@keyframes gb {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg)
  }
}

.rollOut {
  -webkit-animation-name: gb;
  animation-name: gb
}

@-webkit-keyframes hb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

@keyframes hb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  50% {
    opacity: 1
  }
}

.zoomIn {
  -webkit-animation-name: hb;
  animation-name: hb
}

@-webkit-keyframes ib {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes ib {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInDown {
  -webkit-animation-name: ib;
  animation-name: ib
}

@-webkit-keyframes jb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes jb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInLeft {
  -webkit-animation-name: jb;
  animation-name: jb
}

@-webkit-keyframes kb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes kb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInRight {
  -webkit-animation-name: kb;
  animation-name: kb
}

@-webkit-keyframes lb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes lb {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomInUp {
  -webkit-animation-name: lb;
  animation-name: lb
}

@-webkit-keyframes mb {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  to {
    opacity: 0
  }
}

@keyframes mb {
  0% {
    opacity: 1
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }

  to {
    opacity: 0
  }
}

.zoomOut {
  -webkit-animation-name: mb;
  animation-name: mb
}

@-webkit-keyframes nb {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes nb {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomOutDown {
  -webkit-animation-name: nb;
  animation-name: nb
}

@-webkit-keyframes ob {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center
  }
}

@keyframes ob {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center
  }
}

.zoomOutLeft {
  -webkit-animation-name: ob;
  animation-name: ob
}

@-webkit-keyframes pb {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center
  }
}

@keyframes pb {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center
  }
}

.zoomOutRight {
  -webkit-animation-name: pb;
  animation-name: pb
}

@-webkit-keyframes qb {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

@keyframes qb {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
    animation-timing-function: cubic-bezier(.55, .055, .675, .19)
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
    animation-timing-function: cubic-bezier(.175, .885, .32, 1)
  }
}

.zoomOutUp {
  -webkit-animation-name: qb;
  animation-name: qb
}

@-webkit-keyframes rb {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes rb {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.slideInDown {
  -webkit-animation-name: rb;
  animation-name: rb
}

@-webkit-keyframes sb {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes sb {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.slideInLeft {
  -webkit-animation-name: sb;
  animation-name: sb
}

@-webkit-keyframes tb {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes tb {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.slideInRight {
  -webkit-animation-name: tb;
  animation-name: tb
}

@-webkit-keyframes ub {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes ub {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.slideInUp {
  -webkit-animation-name: ub;
  animation-name: ub
}

@-webkit-keyframes vb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

@keyframes vb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}

.slideOutDown {
  -webkit-animation-name: vb;
  animation-name: vb
}

@-webkit-keyframes wb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

@keyframes wb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

.slideOutLeft {
  -webkit-animation-name: wb;
  animation-name: wb
}

@-webkit-keyframes xb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

@keyframes xb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}

.slideOutRight {
  -webkit-animation-name: xb;
  animation-name: xb
}

@-webkit-keyframes yb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

@keyframes yb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}

.slideOutUp {
  -webkit-animation-name: yb;
  animation-name: yb
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #313332
}

a {
  cursor: pointer;
  text-decoration: none
}

a,
a:active,
a:focus,
a:hover {
  text-decoration: none
}

ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  width: 100%
}

.container:after {
  display: table;
  clear: both;
  content: ""
}

.row:after {
  display: table;
  clear: both;
  content: ""
}

.heading-bar .container {
  padding-right: 125px;
  height: 45px;
}

.heading-bar {
  width: 100%;
  height: 44px;
  text-align: center;
  font-size: 0;
  line-height: 44px;
  border-bottom: 1px solid #bfbfbf
}

.heading-bar:after {
  display: inline-table;
  clear: both;
  content: ""
}

.heading-bar .container {
  position: relative;
  padding-left: 110px
}

.heading-bar .logo {
  position: absolute;
  top: 6px;
  left: 12px;
  margin: 0
}

.heading-bar .logo a {
  width: 99px;
  height: 33px;
  display: block;
  background-image: url('https://qixinyun.oss-cn-beijing.aliyuncs.com/officialWebsite/logo.png');
  background-repeat: no-repeat;
  background-size: contain
}

.heading-bar .nav {
  display: block;
  overflow: -moz-scrollbars-none;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  overflow-y: hidden;
}

.heading-bar .nav::-webkit-scrollbar {
  width: 0
}

.heading-bar .nav .navbar {
  width: 100%;
  height: 44px;
  font-size: 0;
}

.heading-bar .nav .navbar li {
  margin: 0 12px;
  width: 64px;
  display: inline-block
}

.heading-bar .nav .navbar li a {
  position: relative;
  width: 100%;
  display: block;
  font-size: 14px;
  line-height: 44px;
  color: #313332
}

.heading-bar .nav .navbar li a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 7;
  width: 0;
  height: 4px;
  display: block;
  content: "";
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #055094
}

.heading-bar .nav .navbar li a:hover {
  color: #055094
}

.heading-bar .nav .navbar li a:hover:before {
  width: 100%
}

.heading-bar .nav .navbar .active a {
  color: #055094
}

.heading-bar .nav .navbar .active a:after {
  width: 100%
}

@media (min-width:768px) {
  .heading-bar {
    height: 74px;
    line-height: 74px
  }

  .heading-bar .container {
    padding-left: 143px;
    height: 75px;
  }

  .heading-bar .logo {
    top: 13px
  }

  .heading-bar .logo a {
    width: 131px;
    height: 44px;
  }

  .heading-bar .nav .navbar {
    height: 74px
  }

  .heading-bar .nav .navbar li {
    margin: 0 18px;
    width: 86px;
    display: inline-block
  }

  .heading-bar .nav .navbar li a {
    height: 74px;
    font-size: 18px;
    line-height: 74px
  }
}

@media (min-width:1200px) {
  .container {
    margin: 0 auto;
    padding: 0 40px;
    width: 1200px
  }
}

.section .container {
  position: relative
}

.section .container .section-title {
  margin: 0 auto;
  padding-top: 13.5px;
  width: 123.5px;
  height: 51px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 37.5px;
  color: #313332;
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/section_title_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: contain
}

.section .container .section-description {
  margin-top: 9px;
  margin-bottom: 0;
  text-align: center;
  font-size: 14px
}

@media (min-width:768px) {
  .section .container .section-title {
    padding-top: 27px;
    width: 247px;
    height: 102px;
    font-size: 30px;
    line-height: 75px
  }

  .section .container .section-description {
    margin-top: 18px;
    font-size: 18px
  }
}

.index-enterprise-ecosystem {
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/index_banner_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 100%
}

.index-enterprise-ecosystem .container {
  min-height: 380px
}

.index-enterprise-ecosystem .index-enterprise-ecosystem-logo {
  position: absolute;
  top: 29px;
  left: 50%;
  z-index: 7;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center
}

.index-enterprise-ecosystem .index-enterprise-ecosystem-logo img {
  max-width: 80%
}

.index-enterprise-ecosystem .animate-float {
  position: absolute;
  left: 50%;
  z-index: 8;
  margin: 0;
  max-width: 120px;
  text-align: center
}

.index-enterprise-ecosystem .animate-float img {
  max-width: 48px
}

.index-enterprise-ecosystem .animate-float .element-title {
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #055094
}

.index-enterprise-ecosystem .animate-float:first-of-type,
.index-enterprise-ecosystem .animate-float:nth-of-type(3) {
  top: 80px
}

.index-enterprise-ecosystem .animate-float:nth-of-type(2) {
  top: 62px
}

.index-enterprise-ecosystem .animate-float:nth-of-type(4),
.index-enterprise-ecosystem .animate-float:nth-of-type(5) {
  top: 180px
}

.index-enterprise-ecosystem .animate-float:first-of-type {
  margin-left: -162px;
  -webkit-animation-delay: .2s !important;
  animation-delay: .2s !important
}

.index-enterprise-ecosystem .animate-float:nth-of-type(2) {
  margin-left: -24px;
  -webkit-animation-delay: .4s !important;
  animation-delay: .4s !important
}

.index-enterprise-ecosystem .animate-float:nth-of-type(3) {
  margin-left: 106px;
  -webkit-animation-delay: .6s !important;
  animation-delay: .6s !important
}

.index-enterprise-ecosystem .animate-float:nth-of-type(4) {
  margin-left: -128px;
  -webkit-animation-delay: .8s !important;
  animation-delay: .8s !important
}

.index-enterprise-ecosystem .animate-float:nth-of-type(5) {
  margin-left: 68px;
  -webkit-animation-delay: 1s !important;
  animation-delay: 1s !important
}

.index-enterprise-ecosystem .icon-cloud {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 100%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  text-align: center
}

.index-enterprise-ecosystem .icon-cloud img {
  max-width: 337px
}

.index-enterprise-ecosystem .index-enterprise-ecosystem-content {
  position: absolute;
  bottom: 40px;
  left: 50%;
  z-index: 7;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.index-enterprise-ecosystem .index-enterprise-ecosystem-content .title {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #055094
}

.index-enterprise-ecosystem .index-enterprise-ecosystem-content .scroll-text {
  margin-top: 0
}

.index-enterprise-ecosystem .index-enterprise-ecosystem-content .scroll-text ul {
  margin: 0;
  height: 24px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #055094
}

.index-enterprise-ecosystem .index-enterprise-ecosystem-content .scroll-text ul li {
  text-align: center
}

@media (min-width:768px) {
  .index-enterprise-ecosystem .container {
    min-height: 690px
  }

  .index-enterprise-ecosystem .index-enterprise-ecosystem-logo {
    top: 58px;
    height: 64px
  }

  .index-enterprise-ecosystem .index-enterprise-ecosystem-logo img {
    max-width: 80%
  }

  .index-enterprise-ecosystem .index-enterprise-ecosystem-content {
    bottom: 92px
  }

  .index-enterprise-ecosystem .index-enterprise-ecosystem-content .title {
    font-size: 36px;
    line-height: 36px
  }

  .index-enterprise-ecosystem .index-enterprise-ecosystem-content .scroll-text {
    margin-top: 11px
  }

  .index-enterprise-ecosystem .index-enterprise-ecosystem-content .scroll-text ul {
    margin: 0;
    height: 24px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #055094
  }

  .index-enterprise-ecosystem .index-enterprise-ecosystem-content .scroll-text ul li {
    text-align: center
  }

  .index-enterprise-ecosystem .animate-float img {
    max-width: 100px
  }

  .index-enterprise-ecosystem .animate-float .element-title {
    margin-top: 9px;
    font-size: 18px;
    line-height: 24px
  }

  .index-enterprise-ecosystem .animate-float:nth-of-type(2) {
    top: 126px
  }

  .index-enterprise-ecosystem .animate-float:first-of-type,
  .index-enterprise-ecosystem .animate-float:nth-of-type(3) {
    top: 190px
  }

  .index-enterprise-ecosystem .animate-float:nth-of-type(4),
  .index-enterprise-ecosystem .animate-float:nth-of-type(5) {
    top: 333px
  }

  .index-enterprise-ecosystem .animate-float:first-of-type {
    margin-left: -360px
  }

  .index-enterprise-ecosystem .animate-float:nth-of-type(2) {
    margin-left: -50px
  }

  .index-enterprise-ecosystem .animate-float:nth-of-type(3) {
    margin-left: 260px
  }

  .index-enterprise-ecosystem .animate-float:nth-of-type(4) {
    margin-left: -260px
  }

  .index-enterprise-ecosystem .animate-float:nth-of-type(5) {
    margin-left: 160px
  }

  .index-enterprise-ecosystem .icon-cloud {
    width: 597px
  }

  .index-enterprise-ecosystem .icon-cloud img {
    max-width: 100%
  }
}

.new-thought {
  margin-top: 40px;
  text-align: center
}

.new-thought .new-thought-picture {
  position: relative;
  margin: 0 auto;
  width: 120px;
  height: 120px
}

.new-thought .new-thought-picture .light-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.new-thought .new-thought-picture .light-items li {
  position: absolute;
  top: 0;
  margin-left: -1.5px;
  width: 3px;
  height: 18px;
  display: block;
  -webkit-transform-origin: 60px;
  transform-origin: 60px;
  border-radius: 3px;
  background-color: #ffc633
}

.new-thought .new-thought-picture .light-items li:first-of-type {
  top: 66px;
  left: 82px;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg)
}

.new-thought .new-thought-picture .light-items li:nth-of-type(2) {
  top: 35px;
  left: 80px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg)
}

.new-thought .new-thought-picture .light-items li:nth-of-type(3) {
  top: 8px;
  left: 66px;
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg)
}

.new-thought .new-thought-picture .light-items li:nth-of-type(4) {
  top: -28px;
  left: 34px;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg)
}

.new-thought .new-thought-picture .light-items li:nth-of-type(5) {
  top: -34px;
  left: -9px;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg)
}

.new-thought .new-thought-picture .light-items li:nth-of-type(6) {
  top: -15px;
  left: -38px;
  -webkit-transform: rotate(-80deg);
  transform: rotate(-80deg)
}

.new-thought .new-thought-picture .light-items li:nth-of-type(7) {
  top: 12px;
  left: -58px;
  -webkit-transform: rotate(-100deg);
  transform: rotate(-100deg)
}

.new-thought .new-thought-picture .light-items li:nth-of-type(2),
.new-thought .new-thought-picture .light-items li:nth-of-type(4),
.new-thought .new-thought-picture .light-items li:nth-of-type(6) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.new-thought .new-thought-picture .light-items li:nth-of-type(3),
.new-thought .new-thought-picture .light-items li:nth-of-type(5),
.new-thought .new-thought-picture .light-items li:nth-of-type(7) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}

.new-model,
.new-technology,
.new-thought {
  float: left;
  width: 33.33333333%;
  margin-top: 0;
  text-align: center
}

.new-model .new-model-picture,
.new-technology .new-technology-picture,
.new-thought .new-thought-picture {
  margin: 0 auto;
  width: 120px;
  height: 120px;
  -webkit-transform: scale(.5);
  transform: scale(.5)
}

.new-model .title,
.new-technology .title,
.new-thought .title {
  margin-top: -24px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

.new-technology .new-technology-picture {
  position: relative;
  display: inline-block
}

.new-technology .new-technology-picture .icon-rocket-fire {
  position: absolute;
  top: 71px;
  left: 2px;
  z-index: 7
}

.new-model .description,
.new-technology .description,
.new-thought .description {
  margin-top: 0;
  margin-bottom: 0;
  display: none;
  font-size: 18px;
  line-height: 30px
}

.data-think {
  position: relative;
  margin: 18px auto;
  width: 320px;
  height: 320px;
  clear: both
}

.data-think .new-model-data,
.data-think .new-technology-data,
.data-think .new-thought-data {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  opacity: 0
}

.data-think .new-model-data.active,
.data-think .new-technology-data.active,
.data-think .new-thought-data.active {
  opacity: 1
}

.data-think .new-model-data {
  z-index: 6
}

.data-think .new-technology-data {
  z-index: 5
}

.data-think .new-model-data .circle,
.data-think .new-technology-data .circle,
.data-think .new-thought-data .circle {
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.data-think .new-model-data .text,
.data-think .new-technology-data .text,
.data-think .new-thought-data .text {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  width: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

@media (min-width:768px) {

  .new-model .new-model-picture,
  .new-technology .new-technology-picture,
  .new-thought .new-thought-picture {
    -webkit-transform: scale(.8);
    transform: scale(.8)
  }

  .new-model .title,
  .new-technology .title,
  .new-thought .title {
    margin-top: -12px;
    font-size: 18px
  }

  .new-skill .container {
    padding-bottom: 24px
  }

  .data-think {
    position: relative;
    width: 480px;
    height: 480px
  }

  .data-think .new-model,
  .data-think .new-technology {
    position: absolute;
    bottom: 24px
  }

  .data-think .new-model {
    left: 0;
    margin-top: 0
  }

  .data-think .new-model .new-model-picture {
    margin-left: 30px;
    width: 117px;
    height: 119px;
    text-align: center
  }

  .data-think .new-model .new-model-picture img {
    max-width: 100%
  }

  .data-think .new-model .title {
    margin-left: 60px;
    text-align: left;
    font-weight: 400
  }

  .data-think .new-model .description {
    text-align: left
  }

  .data-think .new-technology {
    right: 0;
    margin-top: 0;
    text-align: right
  }

  .data-think .new-technology .new-technology-picture {
    margin-right: 30px;
    width: 111px;
    height: 104px;
    display: inline-block;
    text-align: center
  }

  .data-think .new-technology .new-technology-picture img {
    max-width: 100%
  }

  .data-think .new-technology .title {
    margin-right: 60px;
    text-align: right;
    font-weight: 400
  }

  .data-think .new-technology .description {
    text-align: left
  }
}

@media (min-width:1024px) {

  .new-model,
  .new-technology,
  .new-thought {
    margin-top: 0;
    width: auto;
    display: block;
    float: inherit
  }

  .new-model,
  .new-technology {
    position: absolute;
    bottom: 40px;
    z-index: 7
  }

  .new-model {
    left: 40px;
    text-align: left
  }

  .new-technology {
    right: 40px;
    text-align: right
  }

  .new-model .title,
  .new-technology .title,
  .new-thought .title {
    margin-top: 0;
    margin-bottom: 8px;
    -webkit-transform: scale(1);
    transform: scale(1);
    font-size: 30px;
    font-weight: 400;
    line-height: 30px
  }

  .new-model .new-model-picture,
  .new-model .title {
    margin-left: 70px
  }

  .new-technology .new-technology-picture,
  .new-technology .title {
    margin-right: 70px
  }

  .new-model .description,
  .new-technology .description,
  .new-thought .description {
    display: block
  }

  .data-think .new-model-data .text,
  .data-think .new-technology-data .text,
  .data-think .new-thought-data .text {
    width: 60%
  }
}

@media (min-width:1200px) {
  .data-think {
    position: relative;
    width: 702px;
    height: 702px
  }
}

.credit .container,
.finance .container,
.market .container {
  min-height: 390px
}

.credit,
.solve {
  background-color: #e8f3fa
}

.credit-content,
.finance-content,
.market-content {
  padding-top: 24px
}

.credit-content .title,
.finance-content .title,
.market-content .title {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px
}

.credit-content .description,
.finance-content .description,
.market-content .description {
  margin-top: 8px;
  margin-bottom: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

.credit-pictures,
.finance-pictures,
.market-pictures {
  margin: 24px auto;
  width: 100%
}

.credit-pictures .animation-content,
.finance-pictures .animation-content,
.market-pictures .animation-content {
  position: relative;
  margin: 0 auto;
  width: 320px
}

.credit-pictures .animation-content {
  height: 304px
}

.finance-pictures .animation-content {
  height: 280px
}

.market-pictures .animation-content {
  height: 332px
}

.credit-pictures .animation-content .item-bg,
.finance-pictures .animation-content .item-bg {
  width: 100%
}

.credit-pictures .animation-content .item-circle {
  position: absolute;
  top: 34px;
  left: 128px;
  z-index: 1;
  width: 160px
}

.credit-pictures .animation-content .item-safety {
  position: absolute;
  top: 52px;
  left: 19px;
  z-index: 7;
  width: 240px
}

.credit-pictures .animation-content .item-scanner {
  position: absolute;
  top: 9px;
  left: 200px;
  z-index: 2;
  width: 108px;
  -webkit-transform-origin: 0 106px;
  transform-origin: 0 106px
}

.finance-pictures .animation-content .item-gold {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -32px
}

.market-pictures .animation-content .item-bg,
.market-pictures .animation-content .item-chain {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

@media (min-width:768px) {

  .credit-pictures,
  .finance-pictures,
  .market-pictures {
    width: 50%;
    float: right
  }

  .finance-pictures {
    float: left
  }

  .credit-content,
  .finance-content,
  .market-content {
    padding-top: 120px;
    width: 50%;
    float: left
  }

  .finance-content {
    float: right
  }

  .credit-content .title,
  .finance-content .title,
  .market-content .title {
    font-size: 30px;
    font-weight: 400;
    line-height: 30px
  }

  .credit-content .description,
  .finance-content .description,
  .market-content .description {
    margin-top: 24px;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px
  }
}

.solve .container {
  padding-top: 24px;
  min-height: 220px
}

.solve .title {
  margin: 0 0 24px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  color: #055094
}

.solve .btn {
  margin: 0 auto 24px;
  width: 100%;
  max-width: 280px;
  height: 40px;
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  color: #fff;
  background-color: #055094
}

.solve .solve-pictures {
  margin: 0 auto;
  display: block
}

@media (min-width:768px) {
  .solve .container {
    padding-top: 0
  }

  .solve .title {
    margin: 95px 0 0
  }

  .solve .btn {
    margin: 75px auto 0;
    padding: 0 12px;
    width: 100%;
    max-width: 280px;
    height: 70px;
    display: block;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 70px;
    color: #fff;
    background-color: #055094
  }

  .solve .solve-pictures {
    margin: 12px auto 0;
    display: block
  }
}

@media (min-width:992px) {
  .solve .title {
    margin-top: 74px;
    font-size: 36px;
    line-height: 36px
  }
}

.footer-bar {
  background-color: #2f2c28
}

.footer-bar .container {
  padding: 24px
}

.footer-bar .footer-lists:after {
  display: table;
  clear: both;
  content: ""
}

.footer-bar .footer-lists .footer-list {
  width: 50%;
  min-height: 180px;
  float: left
}

.footer-bar .footer-items {
  margin: 0
}

.footer-bar .footer-items dd,
.footer-bar .footer-items dt {
  margin: 0;
  padding: 0;
  line-height: 24px;
  color: #fff
}

.footer-bar .footer-items dt {
  margin-bottom: 12px
}

.footer-bar .contact-us,
.footer-bar .footer-items dd a,
.footer-bar .footer-items dt a {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #fff
}

.footer-bar .contact-us .telephone {
  margin-bottom: 24px
}

.footer-bar .wechart-qr-code {
  text-align: center;
  color: #fff
}

.footer-bar .wechart-qr-code .title {
  margin-top: 0;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

@media (min-width:768px) {
  .footer-bar .container {
    padding: 24px 0
  }

  .footer-bar .footer-lists:after {
    display: table;
    clear: both;
    content: ""
  }

  .footer-bar .footer-lists .footer-list {
    margin-bottom: 24px;
    width: 25%;
    float: left
  }
}

@media (min-width:1200px) {
  .footer-bar .footer-lists {
    width: 960px;
    float: left
  }

  .footer-bar .footer-lists:after {
    display: table;
    clear: both;
    content: ""
  }

  .footer-bar .footer-lists .footer-list {
    margin-bottom: 24px;
    width: 25%;
    float: left
  }

  .footer-bar .wechart-qr-code {
    width: 240px;
    float: left;
    text-align: left
  }
}

.features {
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/banner_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 1213px 201.5px
}

.features .container {
  min-height: 320px
}

.features .logo-yun {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 0;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center
}

.features .logo-yun img {
  max-width: 80%
}

.features .features-content {
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 7;
  padding: 15px;
  width: 100%;
  max-width: 720px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center
}

.features .features-content .title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #055094
}

.features .features-content .description {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: #055094
}

.features .process {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 7;
  padding: 0 15px;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.features .process .process_bg {
  width: 100%
}

@media (min-width:768px) {
  .features {
    background-size: 2426px 403px
  }

  .features .container {
    min-height: 560px
  }

  .features .logo-yun {
    width: 579px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center
  }

  .features .logo-yun img {
    max-width: 100%
  }

  .features .features-content {
    top: 134px;
    left: 50%;
    padding: 0;
    width: 100%;
    max-width: 720px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center
  }

  .features .features-content .title {
    margin: 0 0 24px;
    font-size: 36px;
    font-weight: 400;
    line-height: 36px;
    color: #055094
  }

  .features .features-content .description {
    margin: 0;
    font-size: 18px;
    line-height: 30px;
    color: #055094
  }
}

.hide-lg {
  display: block
}

.show-lg {
  display: none
}

@media (min-width:1200px) {
  .process {
    width: 100%;
    height: 318px
  }

  .hide-lg {
    display: none
  }

  .show-lg {
    display: block
  }
}

.animation-process .element-items,
.animation-process .process-data-collection,
.animation-process .process-data-processing,
.animation-process .process-report-distribution,
.animation-process .process-visual-analysis {
  position: absolute;
  top: 0;
  z-index: 7
}

.animation-process .element-items {
  left: 0;
  width: 320px;
  height: 318px
}

.animation-process .element-items .process-excel {
  position: absolute;
  top: 105px;
  left: 20px
}

.animation-process .element-items .process-api {
  position: absolute;
  top: 115px;
  left: 114px;
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.animation-process .element-items .process-crm {
  position: absolute;
  top: 138px;
  left: 197px;
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}

.animation-process .element-items .process-more {
  position: absolute;
  top: 155px;
  left: 36px;
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}

.animation-process .element-items .process-mysql {
  position: absolute;
  top: 176px;
  left: 102px;
  -webkit-animation-delay: .8s;
  animation-delay: .8s
}

.animation-process .element-items .process-erp {
  position: absolute;
  top: 210px;
  left: 20px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

.animation-process .element-items .process-arr {
  position: absolute;
  top: 154px;
  left: 298px;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s
}

.animation-process .element-items .process-arr2 {
  position: absolute;
  top: 154px;
  left: 304px;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s
}

.animation-process .element-items .process-arr3 {
  position: absolute;
  top: 154px;
  left: 310px;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s
}

.animation-process .process-data-collection {
  top: 97px;
  left: 372px;
  width: 139px
}

.animation-process .process-data-collection .animate-ele {
  position: relative;
  width: 100%;
  height: 122px
}

.animation-process .process-data-collection .animate-ele .process-setting-big {
  position: absolute;
  top: 64px;
  left: 43px
}

.animation-process .process-data-collection .animate-ele .process-setting-little {
  position: absolute;
  top: 51px;
  left: 23px
}

.animation-process .process-data-collection .animate-ele .process-setting-little2 {
  position: absolute;
  top: 82px;
  left: 31px
}

.animation-process .process-data-collection .animate-ele .process-binary {
  position: absolute;
  top: 29px;
  left: 47px
}

.animation-process .process-data-collection .title {
  margin-top: 18px;
  display: block;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: #055094
}

.animation-process .process-data-collection:hover .title {
  -webkit-transform: translateY(-12px);
  transform: translateY(-12px)
}

.animation-process .process-data-processing {
  top: 97px;
  left: 511px;
  width: 139px
}

.animation-process .process-data-processing .animate-ele {
  position: relative;
  width: 100%;
  height: 122px
}

.animation-process .process-data-processing .animate-ele .process-page {
  position: absolute;
  top: 22px;
  left: 64px;
  z-index: 1;
  -webkit-transition: all .3s linear;
  transition: all .3s linear
}

.animation-process .process-data-processing .animate-ele .process-page2 {
  position: absolute;
  top: 41px;
  left: 40px;
  z-index: 2;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.animation-process .process-data-processing .title {
  margin-top: 18px;
  display: block;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: #055094
}

.animation-process .process-data-processing:hover .animate-ele .process-page {
  -webkit-transform: translate3d(6px, -4px, 0);
  transform: translate3d(6px, -4px, 0)
}

.animation-process .process-data-processing:hover .animate-ele .process-page2 {
  -webkit-transform: translate3d(-6px, 4px, 0);
  transform: translate3d(-6px, 4px, 0)
}

.animation-process .process-data-processing:hover .title {
  -webkit-transform: translateY(-12px);
  transform: translateY(-12px)
}

.animation-process .process-visual-analysis {
  top: 97px;
  left: 648px;
  width: 139px
}

.animation-process .process-visual-analysis .animate-ele {
  position: relative;
  width: 100%;
  height: 122px
}

.animation-process .process-visual-analysis .animate-ele .process-square {
  position: absolute;
  top: 35px;
  left: 76px
}

.animation-process .process-visual-analysis .title {
  margin-top: 18px;
  display: block;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: #055094
}

.animation-process .process-report-distribution {
  top: 97px;
  left: 786px;
  width: 139px
}

.animation-process .process-report-distribution .animate-ele {
  position: relative;
  width: 100%;
  height: 122px
}

.animation-process .process-report-distribution .animate-ele .bar-group {
  position: absolute;
  top: 42px;
  left: 22px;
  width: 63px;
  height: 30px;
  overflow: hidden
}

.animation-process .process-report-distribution .animate-ele .bar-group .bar-item {
  margin-right: 3px;
  width: 4px;
  height: 30px;
  float: left;
  background-color: #055094
}

.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:first-of-type,
.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(3),
.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(5) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(2),
.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(6),
.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(9) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}

.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(3),
.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(4),
.animation-process .process-report-distribution .animate-ele .bar-group .bar-item:nth-of-type(8) {
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}

.animation-process .process-report-distribution .animate-ele .process-circle {
  position: absolute;
  top: 43px;
  left: 96px
}

.animation-process .process-report-distribution .title {
  margin-top: 18px;
  display: block;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  color: #055094
}

.animation-process .process-report-distribution:hover .title {
  -webkit-transform: translateY(-12px);
  transform: translateY(-12px)
}

.animation-process .process-limit {
  position: absolute;
  top: 139px;
  left: 939px;
  z-index: 7
}

.animation-process .display-device {
  position: absolute;
  top: 38px;
  left: 968px;
  z-index: 7;
  width: 245px;
  height: 240px
}

.animation-process .display-device .pc {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}

.animation-process .display-device .pc .pc-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

.animation-process .display-device .pc .pc-word {
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  opacity: 0
}

.animation-process .display-device .pc:hover .pc-icon {
  -webkit-transform: translate3d(-50%, -70%, 0);
  transform: translate3d(-50%, -70%, 0);
  opacity: 0
}

.animation-process .display-device .pc:hover .pc-word {
  opacity: 1
}

.animation-process .display-device .pad {
  position: absolute;
  top: 59px;
  left: 105px;
  z-index: 2
}

.animation-process .display-device .pad .pad-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

.animation-process .display-device .pad .pad-word {
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  opacity: 0
}

.animation-process .display-device .pad:hover .pad-icon {
  -webkit-transform: translate3d(-50%, -70%, 0);
  transform: translate3d(-50%, -70%, 0);
  opacity: 0
}

.animation-process .display-device .pad:hover .pad-word {
  opacity: 1
}

.animation-process .display-device .phone {
  position: absolute;
  top: 120px;
  left: 0;
  z-index: 3
}

.animation-process .display-device .phone .phone-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

.animation-process .display-device .phone .phone-word {
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  opacity: 0
}

.animation-process .display-device .phone:hover .phone-icon {
  -webkit-transform: translate3d(-50%, -70%, 0);
  transform: translate3d(-50%, -70%, 0);
  opacity: 0
}

.animation-process .display-device .phone:hover .phone-word {
  opacity: 1
}

.special .account,
.special .data-integrate,
.special .data-manage,
.special .visible {
  position: relative;
  margin-top: 25px;
  margin-bottom: 25px;
  min-height: 220px
}

.special .account:after,
.special .data-integrate:after,
.special .data-manage:after,
.special .visible:after {
  display: table;
  clear: both;
  content: ""
}

.special .data-integrate .content,
.special .data-manage .content {
  float: left
}

.special .account .content,
.special .visible .content {
  float: right
}

.special .account .content .title,
.special .data-integrate .content .title,
.special .data-manage .content .title,
.special .visible .content .title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #313332
}

.special .account .content .data-items li,
.special .data-integrate .content .data-items li,
.special .data-manage .content .data-items li,
.special .visible .content .data-items li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 24px;
  color: #313332
}

.special .account .content .data-items li:not(:last-child),
.special .data-integrate .content .data-items li:not(:last-child),
.special .data-manage .content .data-items li:not(:last-child),
.special .visible .content .data-items li:not(:last-child) {
  margin-bottom: 8px
}

.special .account .content .data-items li:before,
.special .data-integrate .content .data-items li:before,
.special .data-manage .content .data-items li:before,
.special .visible .content .data-items li:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  display: block;
  content: "";
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #a0bdd7
}

.special .data-manage .content .data-items li:before {
  background-color: #a8c422
}

.special .visible .content .data-items li:before {
  background-color: #e76969
}

.special .account .content .data-items li:before {
  background-color: #fce473
}

.special .account .picture,
.special .data-integrate .picture,
.special .data-manage .picture,
.special .visible .picture {
  position: absolute;
  top: 0
}

.special .data-integrate .picture {
  left: 107px;
  width: 240px;
  height: 200px
}

.special .data-integrate .picture img {
  width: 100%
}

.special .data-manage .picture {
  left: 105px;
  width: 240px;
  height: 200px
}

.special .data-manage .picture img {
  width: 100%
}

.special .visible .picture {
  right: 110px;
  width: 240px;
  height: 200px
}

.special .visible .picture img {
  width: 100%
}

.special .account .picture {
  right: 113px;
  width: 240px;
  height: 201px
}

.special .account .picture img {
  width: 100%
}

@media (min-width:768px) {

  .special .account,
  .special .data-integrate,
  .special .data-manage,
  .special .visible {
    margin-top: 65px;
    margin-bottom: 65px;
    min-height: 250px
  }

  .special .account .content .title,
  .special .data-integrate .content .title,
  .special .data-manage .content .title,
  .special .visible .content .title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 30px;
    line-height: 30px
  }

  .special .account .content .data-items li,
  .special .data-integrate .content .data-items li,
  .special .data-manage .content .data-items li,
  .special .visible .content .data-items li {
    position: relative;
    padding-left: 30px;
    font-size: 18px;
    line-height: 30px
  }

  .special .account .content .data-items li:not(:last-child),
  .special .data-integrate .content .data-items li:not(:last-child),
  .special .data-manage .content .data-items li:not(:last-child),
  .special .visible .content .data-items li:not(:last-child) {
    margin-bottom: 8px
  }

  .special .account .content .data-items li:before,
  .special .data-integrate .content .data-items li:before,
  .special .data-manage .content .data-items li:before,
  .special .visible .content .data-items li:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    display: block;
    content: "";
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #a0bdd7
  }

  .special .data-manage .content .data-items li:before {
    background-color: #a8c422
  }

  .special .visible .content .data-items li:before {
    background-color: #e76969
  }

  .special .account .content .data-items li:before {
    background-color: #fce473
  }

  .special .account .picture,
  .special .data-integrate .picture,
  .special .data-manage .picture,
  .special .visible .picture {
    position: absolute;
    top: 0
  }

  .special .data-integrate .picture {
    left: 167px;
    width: 296px;
    height: 240px
  }

  .special .data-integrate .picture img {
    width: 100%
  }

  .special .data-manage .picture {
    left: 165px;
    width: 333px;
    height: 247px
  }

  .special .data-manage .picture img {
    width: 100%
  }

  .special .visible .picture {
    right: 200px;
    width: 321px;
    height: 243px
  }

  .special .visible .picture img {
    width: 100%
  }

  .special .account .picture {
    right: 183px;
    width: 315px;
    height: 201px
  }

  .special .account .picture img {
    width: 100%
  }
}

.data-interact,
.self-data-manage {
  background-color: #e8f3fa
}

.data-interact .container,
.data-package .container,
.self-data-manage .container {
  padding: 0;
  min-height: 390px
}

.data-interact .description,
.data-package .description,
.self-data-manage .description {
  padding: 24px 0
}

.data-interact .description .title,
.data-package .description .title,
.self-data-manage .description .title {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 0 15px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px
}

.data-interact .description .content,
.data-package .description .content,
.self-data-manage .description .content {
  margin-top: 0;
  margin-bottom: 12px;
  padding: 0 15px;
  font-size: 14px;
  line-height: 24px
}

.data-interact .picture img,
.data-package .picture img,
.self-data-manage .picture img {
  width: 100%
}

@media (min-width:768px) {

  .data-interact .container,
  .data-package .container,
  .self-data-manage .container {
    padding: 0;
    min-height: 260px
  }

  .data-interact .description,
  .data-interact .picture,
  .data-package .description,
  .data-package .picture,
  .self-data-manage .description,
  .self-data-manage .picture {
    width: 50%;
    float: left
  }

  .data-interact .description,
  .data-package .picture,
  .self-data-manage .description {
    float: right
  }
}

@media (min-width:1024px) {

  .data-interact .description,
  .data-interact .picture,
  .data-package .description,
  .data-package .picture,
  .self-data-manage .description,
  .self-data-manage .picture {
    width: 50%;
    float: left
  }

  .data-interact .description,
  .data-package .picture,
  .self-data-manage .description {
    float: right
  }

  .data-interact .picture {
    margin-top: 31px
  }

  .data-package .picture {
    margin-top: 17.5px
  }

  .self-data-manage .picture {
    margin-top: 47.5px
  }

  .data-interact .picture img,
  .data-package .picture img,
  .self-data-manage .picture img {
    width: 100%
  }

  .data-interact .description,
  .data-package .description,
  .self-data-manage .description {
    padding-top: 112px
  }

  .data-interact .description .title,
  .data-package .description .title,
  .self-data-manage .description .title {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0 15px;
    font-size: 30px;
    font-weight: 400;
    line-height: 30px
  }

  .data-interact .description .content,
  .data-package .description .content,
  .self-data-manage .description .content {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0 15px;
    font-size: 18px;
    line-height: 30px
  }
}

@media (min-width:1200px) {
  .data-interact .picture {
    margin-top: 31px
  }

  .data-package .picture {
    margin-top: 17.5px
  }

  .self-data-manage .picture {
    margin-top: 47.5px
  }

  .data-interact .picture img,
  .data-package .picture img,
  .self-data-manage .picture img {
    width: 100%
  }

  .data-interact .description,
  .data-package .description,
  .self-data-manage .description {
    padding-top: 112px
  }

  .data-interact .description .title,
  .data-package .description .title,
  .self-data-manage .description .title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 400;
    line-height: 30px
  }

  .data-interact .description .content,
  .data-package .description .content,
  .self-data-manage .description .content {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 30px
  }
}

.enterprise-ecosystem {
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/banner_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 1213px 201.5px
}

.enterprise-ecosystem .container {
  min-height: 320px
}

.enterprise-ecosystem .logo-yun {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 0;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center
}

.enterprise-ecosystem .logo-yun img {
  max-width: 80%
}

.enterprise-ecosystem .enterprise-ecosystem-content {
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 7;
  padding: 15px;
  width: 100%;
  max-width: 720px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center
}

.enterprise-ecosystem .enterprise-ecosystem-content .title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: #055094
}

.enterprise-ecosystem .enterprise-ecosystem-content .description {
  margin: 0;
  text-align: left;
  font-size: 14px;
  line-height: 24px;
  color: #055094
}

.enterprise-ecosystem .products-items {
  position: absolute;
  bottom: 15px;
  left: 50%;
  z-index: 7;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.enterprise-ecosystem .products-items .product-animate-item {
  position: absolute;
  top: -84px;
  left: 50%;
  text-align: center;
  margin: 0;
}

.enterprise-ecosystem .products-items .product-animate-item .title {
  margin-top: 0;
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #055094
}

.enterprise-ecosystem .products-items .product-animate-item .icon {
  max-width: 50%
}

.enterprise-ecosystem .products-items .credit-item {
  margin-left: -200px;
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.enterprise-ecosystem .products-items .market-item {
  top: -104px;
  margin-left: -100px;
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}

.enterprise-ecosystem .products-items .loan-item {
  top: -104px;
  margin-left: 0;
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}

.enterprise-ecosystem .products-items .train-item {
  margin-left: 100px;
  -webkit-animation-delay: .8s;
  animation-delay: .8s
}

.enterprise-ecosystem .products-items .medicine-item {
  margin-left: -45px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}

@media (min-width:768px) {
  .enterprise-ecosystem {
    background-size: 2426px 403px
  }

  .enterprise-ecosystem .container {
    min-height: 560px
  }

  .enterprise-ecosystem .logo-yun {
    width: 579px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center
  }

  .enterprise-ecosystem .logo-yun img {
    max-width: 100%
  }

  .enterprise-ecosystem .enterprise-ecosystem-content {
    top: 134px;
    left: 50%;
    padding: 0;
    width: 100%;
    max-width: 720px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center
  }

  .enterprise-ecosystem .enterprise-ecosystem-content .title {
    margin: 0 0 24px;
    font-size: 36px;
    font-weight: 400;
    line-height: 36px;
    color: #055094
  }

  .enterprise-ecosystem .enterprise-ecosystem-content .description {
    margin: 0;
    font-size: 18px;
    line-height: 30px;
    color: #055094
  }

  .enterprise-ecosystem .products-items {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 7;
    width: 100%;
    max-width: 720px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
  }

  .enterprise-ecosystem .products-items .product-animate-item {
    position: absolute;
    top: -138px;
    text-align: center
  }

  .enterprise-ecosystem .products-items .product-animate-item .title {
    margin-top: 9px;
    display: block;
    font-size: 18px;
    line-height: 24px;
    color: #055094
  }

  .enterprise-ecosystem .products-items .product-animate-item .icon {
    max-width: 100%
  }

  .enterprise-ecosystem .products-items .credit-item {
    margin-left: -340px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s
  }

  .enterprise-ecosystem .products-items .market-item {
    top: -198px;
    margin-left: -180px;
    -webkit-animation-delay: .4s;
    animation-delay: .4s
  }

  .enterprise-ecosystem .products-items .loan-item {
    top: -198px;
    margin-left: 60px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
  }

  .enterprise-ecosystem .products-items .train-item {
    margin-left: 240px;
    -webkit-animation-delay: .8s;
    animation-delay: .8s
  }
}

.existing-products {
  margin-left: -6px
}

.existing-products:after {
  display: table;
  clear: both;
  content: ""
}

.existing-products .card-item {
  padding-left: 6px;
  width: 100%
}

.existing-products .card-content {
  position: relative;
  margin-top: 24px;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #69c
}

.existing-products .card-content:hover .card-info {
  -webkit-transform: translateZ(0);
  transform: translateZ(0)
}

.existing-products .card-index {
  position: relative;
  padding: 30px 20px;
  min-height: 320px;
  text-align: center;
}

.existing-products .card-index .title {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px
}

.existing-products .card-index .animate-item {
  position: relative;
  padding-top: 100%;
  text-align: center
}

.existing-products .card-index .animate-item img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.existing-products .card-index .animate-item .skynet_animate {
  position: relative;
  margin: 0 auto;
  width: 180px;
  height: 174px
}

.existing-products .card-index .animate-item .skynet_animate .fingerprint {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

.existing-products .card-index .animate-item .skynet_animate .scanning-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -66.5px
}

.existing-products .card-info {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 7;
  padding: 30px 20px 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  color: #fff;
  background-color: #69c
}

.existing-products .card-info .title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px
}

.existing-products .card-info .description {
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
}

.existing-products .card-info .btn-hollow {
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;
  margin-top: 24px;
  height: 50px;
  display: block;
  text-align: center;
  font-size: 18px;
  line-height: 48px;
  color: #fff;
  border: 1px solid #e8f3fa
}

@media (min-width:768px) {
  .existing-products .card-item {
    float: left;
    width: 33.33%;
  }
}

@media (min-width:1024px) {
  .existing-products .card-item {
    float: left;
    width: 20%;
  }
}

.gov-project {
  background-color: #e8f3fa
}

.gov-project .container {
  padding-top: 40px;
  padding-bottom: 40px;
  min-height: 400px
}

.gov-project .title {
  margin: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px
}

.gov-project .description {
  margin-top: 12px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  font-size: 18px;
  line-height: 30px
}

.gov-project .project-list:after {
  display: table;
  clear: both;
  content: ""
}

.gov-project .project-list .project-item {
  margin-top: 12px;
  width: 100%;
  text-align: center
}

.gov-project .project-list .project-item .title {
  margin-top: 6px;
  display: block;
  font-size: 18px;
  line-height: 24px
}

.gov-project .project-list .project-item .description {
  text-align: left;
  font-size: 14px;
  line-height: 24px
}

.gov-project .project-list .project-item .project-pic {
  min-height: 100px;
  text-align: center;
  line-height: 96px
}

.gov-project .project-list .project-item .project-pic img {
  vertical-align: middle
}

@media (min-width:768px) {
  .gov-project .project-list .project-item {
    position: relative;
    margin-top: 24px;
    padding-left: 120px;
    min-height: 100px
  }

  .gov-project .project-list .project-item .project-pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    display: block;
    text-align: center
  }

  .gov-project .project-list .project-item .title {
    margin: 6px auto 0
  }
}

.news-banner {
  background-color: #065195;
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/news_banner.png);
  background-repeat: no-repeat;
  background-position: 50% 0
}

.news-banner .container {
  min-height: 240px
}

.news-banner .description {
  padding-top: 56px;
  text-align: center;
  color: #fff
}

.news-banner .description .title {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px
}

.news-banner .description .content {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 18px
}

.news-ad {
  margin-top: 12px;
  margin-right: -6px;
  margin-left: -6px
}

.news-ad:after {
  display: table;
  clear: both;
  content: ""
}

.news-ad .ad-card {
  padding-right: 6px;
  padding-left: 6px;
  width: 100%;
  display: block;
}

@media (min-width:768px) {
  .news-ad .ad-card {
    width: 50%;
    display: block;
    float: left
  }
}

.news-ad .ad-card img {
  width: 100%
}

.latest-news {
  margin-top: 12px
}

.latest-news .recent-news-title {
  margin: 0 auto;
  padding-top: 14px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/news_title.png);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 373px 40px
}

.latest-news .latest-news-list {
  border: 1px solid #bfbfbf
}

.latest-news .latest-news-list .news-item {
  padding: 10px
}

.latest-news .latest-news-list .news-item:after {
  display: table;
  clear: both;
  content: ""
}

.latest-news .latest-news-list .news-item:not(:last-child) {
  border-bottom: 1px solid #bfbfbf
}

.latest-news .latest-news-list .news-item .news-picture {
  width: 100%;
  text-align: center;
  display: block
}

.latest-news .latest-news-list .news-item .news-picture img {
  max-width: 100%
}

.latest-news .latest-news-list .news-item .news-info {
  padding-top: 12px
}

.latest-news .latest-news-list .news-item .news-info .news-title {
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px
}

.latest-news .latest-news-list .news-item .news-info .news-title a {
  color: #313332
}

.latest-news .latest-news-list .news-item .news-info .news-sub-info {
  font-size: 0
}

.latest-news .latest-news-list .news-item .news-info .news-sub-info .release-date {
  width: 176px;
  height: 24px;
  display: inline-block;
  font-size: 12px;
  line-height: 24px;
  color: #999
}

.latest-news .latest-news-list .news-item .news-info .news-sub-info .news-label {
  padding: 0 12px;
  height: 24px;
  display: inline-block;
  font-size: 12px;
  line-height: 24px
}

.latest-news .latest-news-list .news-item .news-info .news-Introduction {
  margin-top: 17px;
  font-size: 14px;
  line-height: 24px
}

.latest-news .latest-news-list .news-item .news-info .news-Introduction a {
  margin-left: 20px;
  color: #055094
}

.latest-news .latest-news-list .news-item .news-info .share-plugin {
  margin-top: 12px;
  height: 24px;
  line-height: 24px
}

.latest-news .latest-news-list .news-item .news-info .share-plugin img {
  margin-left: 8px;
  vertical-align: -7px
}

.latest-news .btn-add-bar {
  margin-top: 12px;
  height: 40px;
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  color: #055094;
  border: 1px solid #adc9e0;
  background-color: #e8f3fa
}

.info {
  background-color: #a0bdd7
}

.success {
  background-color: #a8c422
}

.warning {
  background-color: #f8a44f
}

@media (min-width:768px) {
  .news-ad {
    margin-top: 24px
  }

  .latest-news {
    margin-top: 18px
  }

  .latest-news .recent-news-title {
    padding-top: 18px;
    height: 63px;
    font-size: 30px;
    line-height: 30px;
    background-size: 587px 63px
  }
}

@media (min-width:1024px) {
  .news-banner .description {
    padding-left: 264px;
    text-align: left
  }

  .news-ad {
    margin-top: 40px
  }

  .latest-news .latest-news-list .news-item {
    position: relative;
    padding-left: 380px;
    min-height: 237px
  }

  .latest-news .latest-news-list .news-item:after {
    display: table;
    clear: both;
    content: ""
  }

  .latest-news .latest-news-list .news-item .news-picture {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 340px;
    height: 217px;
    float: left;
    overflow: hidden
  }

  .latest-news .latest-news-list .news-item .news-picture img {
    max-width: 100%
  }

  .latest-news .latest-news-list .news-item .news-info .share-plugin {
    margin-top: 42px
  }
}

.news-page .container {
  padding: 0
}

.news-wrap {
  margin-bottom: 24px
}

.news-wrap:after {
  display: block;
  clear: both;
  content: ""
}

.news-wrap .news-content {
  padding: 24px;
  border: 1px solid #bfbfbf
}

.news-wrap .news-content .title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px
}

.news-wrap .news-content .news-page-sub-info {
  margin-top: 10px;
  font-size: 0
}

.news-wrap .news-content .news-page-sub-info .news-label,
.news-wrap .news-content .news-page-sub-info .release-date,
.news-wrap .news-content .news-page-sub-info .share-plugin {
  height: 24px;
  display: inline-block;
  font-size: 12px;
  line-height: 24px
}

.news-wrap .news-content .news-page-sub-info .release-date {
  width: 166px;
  color: #999
}

.news-wrap .news-content .news-page-sub-info .news-label {
  padding: 0 12px;
  height: 24px;
  display: inline-block;
  font-size: 12px;
  line-height: 24px
}

.news-wrap .news-content .news-page-sub-info .share-plugin {
  margin-left: 24px
}

.news-wrap .news-content .news-page-sub-info .share-plugin img {
  margin-left: 8px;
  vertical-align: -7px
}

.news-wrap .news-content .news-main {
  font-size: 14px;
  line-height: 24px
}

.news-wrap .news-content .news-main figure {
  margin-right: 0;
  margin-left: 0
}

.news-wrap .news-content .news-main figure img {
  margin: 0 auto;
  max-width: 100%;
  display: block
}

.news-wrap .news-content .news-main figure span {
  margin-top: 12px;
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: #999
}

.news-wrap .news-page {
  margin-bottom: 14px
}

.news-wrap .news-page .page-nav li:not(:last-child) {
  margin-bottom: 12px
}

.news-wrap .news-page .page-nav li a {
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #313332
}

.news-wrap .news-page .page-nav li a:hover {
  color: #055094
}

.news-wrap .back-link {
  font-size: 14px;
  line-height: 24px;
  color: #055094
}

.news-wrap .sidebar {
  margin-top: 24px;
  border: 1px solid #bfbfbf
}

.news-wrap .sidebar .sidebar-title {
  padding: 0 24px;
  height: 64px;
  line-height: 64px;
  border-bottom: 1px solid #bfbfbf;
  background-color: #e8f3fa;
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/news_side_title.png);
  background-repeat: no-repeat;
  background-position: 50% 0
}

.news-wrap .sidebar .sidebar-title:after {
  display: block;
  clear: both;
  content: ""
}

.news-wrap .sidebar .sidebar-title .title {
  margin: 0;
  float: left;
  font-size: 18px;
  font-weight: 400
}

.news-wrap .sidebar .sidebar-title .more {
  float: right;
  font-size: 14px;
  color: #055094
}

.news-wrap .sidebar .sidebar-list li {
  padding: 24px;
  border-bottom: 1px solid #bfbfbf
}

.news-wrap .sidebar .sidebar-list li .pic {
  width: 100%;
  display: block
}

.news-wrap .sidebar .sidebar-list li .pic img {
  width: 100%
}

.news-wrap .sidebar .sidebar-list li .title {
  margin-top: 5px;
  height: 24px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 24px;
  color: #313332
}

@media (min-width:768px) {
  .news-wrap {
    margin-bottom: 40px
  }

  .news-wrap .news-content {
    padding: 40px
  }
}

@media (min-width:1200px) {
  .news-wrap .news-content {
    width: 898px;
    float: left
  }

  .news-wrap .sidebar {
    margin-top: 0;
    width: 288px;
    float: right
  }
}

.recruitment-banner {
  background-color: #065195;
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/recruitment_banner.png);
  background-repeat: no-repeat;
  background-position: 50% 0
}

.recruitment-banner .container {
  min-height: 240px
}

.recruitment-banner .description {
  padding-top: 56px;
  text-align: center;
  color: #fff
}

.recruitment-banner .description .title {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px
}

.recruitment-banner .description .content {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 18px
}

.industry-nformation-banner {
  background-image: url('https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/industryInformation-banner.png')
}

.recruitment-menu {
  margin-top: 24px;
  margin-bottom: 24px;
  width: 100%
}

.recruitment-menu li .title {
  position: relative;
  padding-left: 26px;
  display: block;
  cursor: pointer;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px
}

.recruitment-menu li .title:before {
  left: 0;
  width: 13px;
  height: 3px
}

.recruitment-menu li .title:after,
.recruitment-menu li .title:before {
  position: absolute;
  top: 50%;
  display: block;
  content: "";
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  background-color: #055094
}

.recruitment-menu li .title:after {
  left: 5px;
  width: 3px;
  height: 13px
}

.recruitment-menu li .sub-menu {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 46px;
  display: none;
  font-size: 14px;
  line-height: 24px
}

.recruitment-menu li .sub-menu a {
  color: #313332
}

.recruitment-menu li .sub-menu .active a,
.recruitment-menu li .sub-menu a:hover {
  color: #055094
}

.recruitment-menu .open .title:after {
  display: none
}

.recruitment-content h4 {
  margin-top: 0;
  margin-bottom: 11px;
  font-size: 18px;
  line-height: 24px;
  color: #055094
}

.recruitment-content ul {
  margin-bottom: 12px
}

.recruitment-content ul li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 24px
}

.recruitment-content ul li:after {
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  display: block;
  content: "";
  border-radius: 50%;
  background-color: #6d879f
}

.recruitment-content .page-item {
  display: none
}

.recruitment-content .page-item:first-child {
  display: block
}

.platform-advantage {
  display: none
}

@media (min-width:1024px) {
  .recruitment-banner .description {
    padding-left: 264px;
    text-align: left
  }
}

@media (min-width:1200px) {
  .recruitment-menu {
    margin-top: 26px;
    width: 235px;
    float: left
  }

  .recruitment-content {
    margin-top: 26px;
    padding: 0 24px;
    width: 698px;
    min-height: 600px;
    float: left
  }

  .platform-advantage {
    padding-top: 26px;
    width: 187px;
    height: 272px;
    display: block;
    float: right;
    background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/platform_advantage_bg.png)
  }

  .platform-advantage .title {
    margin: 0;
    height: 54px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 54px
  }

  .platform-advantage .list {
    padding: 18px
  }

  .platform-advantage .list li {
    font-size: 14px;
    line-height: 24px;
    color: #055094
  }

  .platform-advantage .list li:not(:last-child) {
    margin-bottom: 9px
  }
}

.about .container {
  padding: 0;
}

.about-banner {
  background-color: #065195;
  background-image: url(https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/about_banner.png);
  background-repeat: no-repeat;
  background-position: 50% 0
}

.about-banner .container {
  min-height: 240px
}

.about-banner .description {
  padding-top: 56px;
  text-align: center;
  color: #fff
}

.about-banner .description .title {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px
}

.about-banner .description .content {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 18px
}

.expert {
  margin-top: 40px;
  margin-bottom: 40px
}

.expert .container {
  padding: 0
}

.expert .title {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px
}

.expert .expert-item {
  margin: 40px auto 0;
  width: 100%;
  height: 298px;
  text-align: center
}

.expert .expert-item .avatar {
  width: 100%;
  display: block
}

.expert .expert-item .avatar img {
  max-width: 100%
}

.expert .expert-item .name {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px
}

.expert .expert-item .name a {
  color: #055094
}

.expert .expert-item .introduce {
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 24px
}

@media (min-width:1024px) {
  .about-banner .description {
    padding-left: 264px;
    text-align: left
  }
}

@media (min-width:1200px) {
  .section .container .section-description {
    text-align: left
  }
}



.section-with-list:nth-of-type(even) {
  background-color: #e8f3fa
}

.section-with-list .container {
  padding: 40px 0
}

.section-with-list .title {
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  line-height: 30px
}

.honor .honor-list,
.certificate .certificate-list,
.copyright .copyright-list,
.software .software-list,
.talent .talent-list,
.trademark .copyright-list,
.trademark-list {
  text-align: center;
  font-size: 0
}

.honor .honor-list:after,
.certificate .certificate-list:after,
.copyright .copyright-list:after,
.software .software-list:after,
.talent .talent-list:after,
.trademark .copyright-list:after,
.trademark .trademark-list::after {
  display: table;
  clear: both;
  content: ""
}

.honor .honor-item,
.certificate .certificate-item,
.copyright .copyright-item,
.software .software-item,
.talent .talent-item,
.trademark .trademark-item {
  margin-top: 24px;
  margin-right: 5px;
  margin-left: 5px;
  width: 220px;
  height: 295px;
  display: inline-block;
  overflow: hidden;
  line-height: 295px;
  border: 1px solid #bfbfbf;
  background-color: #fff;
}

.honor .honor-item img,
.certificate .certificate-item img,
.copyright .copyright-item img,
.software .software-item img,
.talent .talent-item img,
.trademark .trademark-item img {
  width: 100%;
  vertical-align: middle
}

@media (min-width:768px) {

  .honor .honor-list,
  .certificate .certificate-list,
  .copyright .copyright-list,
  .software .software-list,
  .talent .talent-list,
  .trademark .trademark-list {
    text-align: left
  }
}

.mobile-animation-processs {
  width: 100%
}

@-webkit-keyframes zb {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes zb {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.animate-float,
.product-animate-item {
  -webkit-animation: zb 3s ease-in-out infinite;
  animation: zb 3s ease-in-out infinite
}

@-webkit-keyframes Ab {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes Ab {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.process-api,
.process-crm,
.process-erp,
.process-excel,
.process-more,
.process-mysql {
  -webkit-animation: Ab 3s linear infinite;
  animation: Ab 3s linear infinite
}

@-webkit-keyframes Bb {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
  }

  to {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
    opacity: 0
  }
}

@keyframes Bb {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
  }

  to {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
    opacity: 0
  }
}

.process-arr,
.process-arr2,
.process-arr3 {
  -webkit-animation: Bb 2s linear infinite;
  animation: Bb 2s linear infinite
}

@-webkit-keyframes Cb {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    transform: translate3d(-50%, -50%, 0) rotate(0deg)
  }

  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(1turn);
    transform: translate3d(-50%, -50%, 0) rotate(1turn)
  }
}

@keyframes Cb {
  0% {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    transform: translate3d(-50%, -50%, 0) rotate(0deg)
  }

  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(1turn);
    transform: translate3d(-50%, -50%, 0) rotate(1turn)
  }
}

.market .animation-content .item-chain {
  -webkit-animation: Cb 15s linear infinite;
  animation: Cb 15s linear infinite
}

@-webkit-keyframes Db {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes Db {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

.item-scanner {
  -webkit-animation: Db 15s linear infinite;
  animation: Db 15s linear infinite
}

.new-model:hover .new-model-picture .icon-new-model,
.process-circle,
.process-setting-little,
.process-setting-little2 {
  -webkit-animation: Db 4s linear infinite;
  animation: Db 4s linear infinite
}

@-webkit-keyframes Eb {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn)
  }
}

@keyframes Eb {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn)
  }
}

.process-setting-big {
  -webkit-animation: Eb 4s linear infinite;
  animation: Eb 4s linear infinite
}

@-webkit-keyframes Fb {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  80% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    opacity: 0
  }
}

@keyframes Fb {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  80% {
    opacity: 1
  }

  to {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    opacity: 0
  }
}

@-webkit-keyframes Gb {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
  }

  to {
    -webkit-transform: rotateY(1turn);
    transform: rotateY(1turn)
  }
}

@keyframes Gb {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
  }

  to {
    -webkit-transform: rotateY(1turn);
    transform: rotateY(1turn)
  }
}

.item-gold {
  -webkit-animation: Gb 5s linear infinite;
  animation: Gb 5s linear infinite
}

@-webkit-keyframes Hb {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(-174px);
    transform: translateY(-174px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes Hb {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  50% {
    -webkit-transform: translateY(-174px);
    transform: translateY(-174px)
  }

  to {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

.scanning-line {
  -webkit-animation: Hb 5s linear infinite;
  animation: Hb 5s linear infinite
}

@-webkit-keyframes Ib {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  25% {
    -webkit-transform: translate3d(-7px, 24px, 0);
    transform: translate3d(-7px, 24px, 0)
  }

  50% {
    -webkit-transform: translate3d(-12px, 17px, 0);
    transform: translate3d(-12px, 17px, 0)
  }

  75% {
    -webkit-transform: translate3d(-20px, 26px, 0);
    transform: translate3d(-20px, 26px, 0)
  }

  to {
    -webkit-transform: translate3d(-28px, 7px, 0);
    transform: translate3d(-28px, 7px, 0)
  }
}

@keyframes Ib {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  25% {
    -webkit-transform: translate3d(-7px, 24px, 0);
    transform: translate3d(-7px, 24px, 0)
  }

  50% {
    -webkit-transform: translate3d(-12px, 17px, 0);
    transform: translate3d(-12px, 17px, 0)
  }

  75% {
    -webkit-transform: translate3d(-20px, 26px, 0);
    transform: translate3d(-20px, 26px, 0)
  }

  to {
    -webkit-transform: translate3d(-28px, 7px, 0);
    transform: translate3d(-28px, 7px, 0)
  }
}

.process-visual-analysis:hover .animate-ele {
  -webkit-animation: Ib 1.5s linear;
  animation: Ib 1.5s linear
}

.process-visual-analysis:hover .title {
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px)
}

@-webkit-keyframes Jb {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  0% {
    -webkit-transform: scaleY(-1.2);
    transform: scaleY(-1.2)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

@keyframes Jb {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }

  0% {
    -webkit-transform: scaleY(-1.2);
    transform: scaleY(-1.2)
  }

  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}

.bar-item {
  -webkit-animation: Jb 1s ease-in infinite;
  animation: Jb 1s ease-in infinite
}

@-webkit-keyframes Kb {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
  }

  50% {
    -webkit-transform: rotateY(1turn);
    transform: rotateY(1turn)
  }

  to {
    -webkit-transform: rotateY(2turn);
    transform: rotateY(2turn)
  }
}

@keyframes Kb {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
  }

  50% {
    -webkit-transform: rotateY(1turn);
    transform: rotateY(1turn)
  }

  to {
    -webkit-transform: rotateY(2turn);
    transform: rotateY(2turn)
  }
}

.process-limit:hover {
  -webkit-animation: Kb 1.5s linear infinite;
  animation: Kb 1.5s linear infinite
}

@-webkit-keyframes Lb {
  0% {
    opacity: 1
  }

  50% {
    opacity: .1
  }

  to {
    opacity: 1
  }
}

@keyframes Lb {
  0% {
    opacity: 1
  }

  50% {
    opacity: .1
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes Mb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  50% {
    -webkit-transform: translate3d(-3px, 6px, 0);
    transform: translate3d(-3px, 6px, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes Mb {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }

  50% {
    -webkit-transform: translate3d(-3px, 6px, 0);
    transform: translate3d(-3px, 6px, 0)
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

.new-technology:hover .new-technology-picture .icon-rocket-fire {
  -webkit-animation: Mb .3s ease-in infinite;
  animation: Mb .3s ease-in infinite
}

.new-thought:hover .light-items li {
  -webkit-animation: Lb 1.5s linear infinite;
  animation: Lb 1.5s linear infinite
}

.new-model.in ~ .data-think .circle,
.new-model:hover ~ .data-think .circle,
.new-technology.in ~ .data-think .circle,
.new-technology:hover ~ .data-think .circle,
.new-thought.in ~ .data-think .circle,
.new-thought:hover ~ .data-think .circle {
  -webkit-animation: Fb .4s linear;
  animation: Fb .4s linear
}

.share-plugin a {
  float: inherit !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-image: url('https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/share_icon.png') !important;
  vertical-align: -7px;
  display: inline-block;
}

.share-plugin a.bds_sqq {
  background-position: 0 0 !important;
}

.share-plugin a.bds_weixin {
  background-position: 0 -27px !important;
}

.share-plugin a.bds_tsina {
  background-position: 0 -54px !important;
}

.news-page-sub-info .share-plugin {
  vertical-align: -28px;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: #000;
  opacity: .3;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  padding: 15px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  display: none;
}

.modal.fadeIn {
  display: block;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 12px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  width: 90%;
  margin: 0;
  border: 1px solid #3b9f48;
  background-color: #fff;
  background-image: url("https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/contact-us.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.modal-content {
  border: 2px dashed #3b9f48;
  padding: 24px;
}

.modal-header::after {
  display: table;
  content: "";
  clear: both;
}

.modal-header .btn-close {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10;
  background: transparent url("https://qxy-official-website.oss-cn-beijing.aliyuncs.com/img/contact-close.png") no-repeat 50% 50%;
  width: 35px;
  height: 0;
  overflow: hidden;
  padding-top: 35px;
  border: 0;
  outline: none;
  cursor: pointer;
}

.leave-a-message-modal .contact-fly {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.modal-body .title {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  font-weight: 400;
  color: #3b9f48;
}

.modal-body .description {
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}

.message-form {
  margin-top: 18px;
}

.form-group {
  position: relative;
  min-height: 30px;
  padding-left: 80px;
  margin-bottom: 24px;
}

.form-group::after {
  display: table;
  content: "";
  clear: both;
}

.form-group .control-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
}

.form-group .from-control {
  padding: 0 12px;
  border: 1px solid #999;
  resize: none;
  font-size: 14px;
  line-height: 30px;
  width: 100%;
  display: block;
  max-width: 310px;
}

.modal .btn-submit {
  margin: 0 auto;
  display: block;
  width: 100%;
  max-width: 207px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #3b9f48;
  border: 0;
  cursor: pointer;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 564px;
  }

  .modal-content {
    padding: 32px;
  }

  .modal-body .title {
    font-size: 30px;
  }

  .modal .form-group {
    padding-left: 90px;
  }

  .modal .btn-submit {
    margin-left: 141px;
  }
}

.copyright-bar {
  padding: 0 24px 24px;
  text-align: center;
  color: #fff;
  opacity: 0.8;
}

.copyright-bar p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 28px;
  font-weight: 300;
}

.copyright-bar p a {
  color: #fff;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  float: left;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-11 {
  width: 91.66666667%;
}

.col-xs-10 {
  width: 83.33333333%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-8 {
  width: 66.66666667%;
}

.col-xs-7 {
  width: 58.33333333%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-5 {
  width: 41.66666667%;
}

.col-xs-4 {
  width: 33.33333333%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-2 {
  width: 16.66666667%;
}

.col-xs-1 {
  width: 8.33333333%;
}

.col-xs-pull-12 {
  right: 100%;
}

.col-xs-pull-11 {
  right: 91.66666667%;
}

.col-xs-pull-10 {
  right: 83.33333333%;
}

.col-xs-pull-9 {
  right: 75%;
}

.col-xs-pull-8 {
  right: 66.66666667%;
}

.col-xs-pull-7 {
  right: 58.33333333%;
}

.col-xs-pull-6 {
  right: 50%;
}

.col-xs-pull-5 {
  right: 41.66666667%;
}

.col-xs-pull-4 {
  right: 33.33333333%;
}

.col-xs-pull-3 {
  right: 25%;
}

.col-xs-pull-2 {
  right: 16.66666667%;
}

.col-xs-pull-1 {
  right: 8.33333333%;
}

.col-xs-pull-0 {
  right: auto;
}

.col-xs-push-12 {
  left: 100%;
}

.col-xs-push-11 {
  left: 91.66666667%;
}

.col-xs-push-10 {
  left: 83.33333333%;
}

.col-xs-push-9 {
  left: 75%;
}

.col-xs-push-8 {
  left: 66.66666667%;
}

.col-xs-push-7 {
  left: 58.33333333%;
}

.col-xs-push-6 {
  left: 50%;
}

.col-xs-push-5 {
  left: 41.66666667%;
}

.col-xs-push-4 {
  left: 33.33333333%;
}

.col-xs-push-3 {
  left: 25%;
}

.col-xs-push-2 {
  left: 16.66666667%;
}

.col-xs-push-1 {
  left: 8.33333333%;
}

.col-xs-push-0 {
  left: auto;
}

.col-xs-offset-12 {
  margin-left: 100%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-0 {
  margin-left: 0%;
}

@media (min-width: 768px) {

  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12 {
    float: left;
  }

  .col-sm-12 {
    width: 100%;
  }

  .col-sm-11 {
    width: 91.66666667%;
  }

  .col-sm-10 {
    width: 83.33333333%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-8 {
    width: 66.66666667%;
  }

  .col-sm-7 {
    width: 58.33333333%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-5 {
    width: 41.66666667%;
  }

  .col-sm-4 {
    width: 33.33333333%;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-2 {
    width: 16.66666667%;
  }

  .col-sm-1 {
    width: 8.33333333%;
  }

  .col-sm-pull-12 {
    right: 100%;
  }

  .col-sm-pull-11 {
    right: 91.66666667%;
  }

  .col-sm-pull-10 {
    right: 83.33333333%;
  }

  .col-sm-pull-9 {
    right: 75%;
  }

  .col-sm-pull-8 {
    right: 66.66666667%;
  }

  .col-sm-pull-7 {
    right: 58.33333333%;
  }

  .col-sm-pull-6 {
    right: 50%;
  }

  .col-sm-pull-5 {
    right: 41.66666667%;
  }

  .col-sm-pull-4 {
    right: 33.33333333%;
  }

  .col-sm-pull-3 {
    right: 25%;
  }

  .col-sm-pull-2 {
    right: 16.66666667%;
  }

  .col-sm-pull-1 {
    right: 8.33333333%;
  }

  .col-sm-pull-0 {
    right: auto;
  }

  .col-sm-push-12 {
    left: 100%;
  }

  .col-sm-push-11 {
    left: 91.66666667%;
  }

  .col-sm-push-10 {
    left: 83.33333333%;
  }

  .col-sm-push-9 {
    left: 75%;
  }

  .col-sm-push-8 {
    left: 66.66666667%;
  }

  .col-sm-push-7 {
    left: 58.33333333%;
  }

  .col-sm-push-6 {
    left: 50%;
  }

  .col-sm-push-5 {
    left: 41.66666667%;
  }

  .col-sm-push-4 {
    left: 33.33333333%;
  }

  .col-sm-push-3 {
    left: 25%;
  }

  .col-sm-push-2 {
    left: 16.66666667%;
  }

  .col-sm-push-1 {
    left: 8.33333333%;
  }

  .col-sm-push-0 {
    left: auto;
  }

  .col-sm-offset-12 {
    margin-left: 100%;
  }

  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-sm-offset-9 {
    margin-left: 75%;
  }

  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-sm-offset-6 {
    margin-left: 50%;
  }

  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-sm-offset-3 {
    margin-left: 25%;
  }

  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-sm-offset-0 {
    margin-left: 0%;
  }
}

@media (min-width: 992px) {

  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }

  .col-md-12 {
    width: 100%;
  }

  .col-md-11 {
    width: 91.66666667%;
  }

  .col-md-10 {
    width: 83.33333333%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-8 {
    width: 66.66666667%;
  }

  .col-md-7 {
    width: 58.33333333%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-5 {
    width: 41.66666667%;
  }

  .col-md-4 {
    width: 33.33333333%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-2 {
    width: 16.66666667%;
  }

  .col-md-1 {
    width: 8.33333333%;
  }

  .col-md-pull-12 {
    right: 100%;
  }

  .col-md-pull-11 {
    right: 91.66666667%;
  }

  .col-md-pull-10 {
    right: 83.33333333%;
  }

  .col-md-pull-9 {
    right: 75%;
  }

  .col-md-pull-8 {
    right: 66.66666667%;
  }

  .col-md-pull-7 {
    right: 58.33333333%;
  }

  .col-md-pull-6 {
    right: 50%;
  }

  .col-md-pull-5 {
    right: 41.66666667%;
  }

  .col-md-pull-4 {
    right: 33.33333333%;
  }

  .col-md-pull-3 {
    right: 25%;
  }

  .col-md-pull-2 {
    right: 16.66666667%;
  }

  .col-md-pull-1 {
    right: 8.33333333%;
  }

  .col-md-pull-0 {
    right: auto;
  }

  .col-md-push-12 {
    left: 100%;
  }

  .col-md-push-11 {
    left: 91.66666667%;
  }

  .col-md-push-10 {
    left: 83.33333333%;
  }

  .col-md-push-9 {
    left: 75%;
  }

  .col-md-push-8 {
    left: 66.66666667%;
  }

  .col-md-push-7 {
    left: 58.33333333%;
  }

  .col-md-push-6 {
    left: 50%;
  }

  .col-md-push-5 {
    left: 41.66666667%;
  }

  .col-md-push-4 {
    left: 33.33333333%;
  }

  .col-md-push-3 {
    left: 25%;
  }

  .col-md-push-2 {
    left: 16.66666667%;
  }

  .col-md-push-1 {
    left: 8.33333333%;
  }

  .col-md-push-0 {
    left: auto;
  }

  .col-md-offset-12 {
    margin-left: 100%;
  }

  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-md-offset-9 {
    margin-left: 75%;
  }

  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-md-offset-6 {
    margin-left: 50%;
  }

  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-md-offset-3 {
    margin-left: 25%;
  }

  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-md-offset-0 {
    margin-left: 0%;
  }
}

@media (min-width: 1200px) {

  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    float: left;
  }

  .col-lg-12 {
    width: 100%;
  }

  .col-lg-11 {
    width: 91.66666667%;
  }

  .col-lg-10 {
    width: 83.33333333%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-8 {
    width: 66.66666667%;
  }

  .col-lg-7 {
    width: 58.33333333%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-5 {
    width: 41.66666667%;
  }

  .col-lg-4 {
    width: 33.33333333%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-2 {
    width: 16.66666667%;
  }

  .col-lg-1 {
    width: 8.33333333%;
  }

  .col-lg-pull-12 {
    right: 100%;
  }

  .col-lg-pull-11 {
    right: 91.66666667%;
  }

  .col-lg-pull-10 {
    right: 83.33333333%;
  }

  .col-lg-pull-9 {
    right: 75%;
  }

  .col-lg-pull-8 {
    right: 66.66666667%;
  }

  .col-lg-pull-7 {
    right: 58.33333333%;
  }

  .col-lg-pull-6 {
    right: 50%;
  }

  .col-lg-pull-5 {
    right: 41.66666667%;
  }

  .col-lg-pull-4 {
    right: 33.33333333%;
  }

  .col-lg-pull-3 {
    right: 25%;
  }

  .col-lg-pull-2 {
    right: 16.66666667%;
  }

  .col-lg-pull-1 {
    right: 8.33333333%;
  }

  .col-lg-pull-0 {
    right: auto;
  }

  .col-lg-push-12 {
    left: 100%;
  }

  .col-lg-push-11 {
    left: 91.66666667%;
  }

  .col-lg-push-10 {
    left: 83.33333333%;
  }

  .col-lg-push-9 {
    left: 75%;
  }

  .col-lg-push-8 {
    left: 66.66666667%;
  }

  .col-lg-push-7 {
    left: 58.33333333%;
  }

  .col-lg-push-6 {
    left: 50%;
  }

  .col-lg-push-5 {
    left: 41.66666667%;
  }

  .col-lg-push-4 {
    left: 33.33333333%;
  }

  .col-lg-push-3 {
    left: 25%;
  }

  .col-lg-push-2 {
    left: 16.66666667%;
  }

  .col-lg-push-1 {
    left: 8.33333333%;
  }

  .col-lg-push-0 {
    left: auto;
  }

  .col-lg-offset-12 {
    margin-left: 100%;
  }

  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }

  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-lg-offset-0 {
    margin-left: 0%;
  }
}

.user-info {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 10;
  font-size: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  white-space: nowrap;
  vertical-align: top;
  line-height: 32px;
}

.user-info .user-avatar {
  margin: 0;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: #f9f9f9;
  border: 1px solid #69c;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: -10px;
}

.user-info .user-avatar img {
  width: 100%;
  height: 100%;
}

.signIn-info {
  display: inline-block;
  line-height: 32px;
  height: 32px;
}

.signIn-info a {
  margin: 0 6px;
  display: inline-block;
  font-size: 14px;
  line-height: 32px;
  color: #333;
}

.signIn-info a:hover {
  color: #055094;
}

.signIn-info .line {
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #333;
  vertical-align: -2px;
}

.water-fall-list {
  padding: 12px 0;
  min-height: 60vh;
}

.water-fall-list .loading {
  display: block;
  margin: 10% auto;
}

.water-fall-list .water-fall-item {
  margin-bottom: 12px;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  height: 300px;
}

.water-fall-list .water-fall-item:hover {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}

.water-fall-list .water-fall-item .title {
  margin: 0 0 6px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.5;
  height: 64px;
}

.water-fall-list .water-fall-item .description {
  padding: 12px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.water-fall-list .water-fall-item .title a,
.water-fall-list .water-fall-item .description a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.water-fall-list .water-fall-item .title a {
  color: #055094;
  font-weight: 400;
  -webkit-line-clamp: 2;
}

.water-fall-list .water-fall-item .description a {
  -webkit-line-clamp: 10;
}

.water-fall-list .water-fall-item a {
  color: #333;
}

.water-fall-list .water-fall-item:hover a {
  color: #055094;
}

.sign-tab {
  position: relative;
  margin-bottom: 20px;
  font-size: 0;
  vertical-align: top;
}

.sign-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.sign-tab .sign-tab-item {
  display: inline-block;
  width: 50%;
  font-size: 24px;
  line-height: 24px;
  font-weight: normal;
  text-align: center;
}

.sign-tab .sign-tab-item a {
  color: #333;
}

.sign-tab .sign-tab-item.active a {
  color: #3b9f48;
}

.input-group {
  position: relative;
  display: inline-table;
  vertical-align: middle;
  border-collapse: separate;
}

.input-group .form-control,
.input-group .input-group-btn {
  display: table-cell;
}

.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}

.input-group .input-group-btn {
  position: relative;
  width: auto;
  font-size: 0;
  white-space: nowrap;
}

.btn-send-msg {
  margin-left: 12px;
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  border: 1px solid #3b9f48;
  padding: 6px 12px;
  background-color: #3b9f48;
  cursor: pointer;
}

@media (min-width: 768px) {
  #signModal .modal-dialog {
    width: 470px;
  }

  #signModal .form-group {
    padding-left: 0;
  }

  #signModal .modal-content {
    padding: 32px 76px;
  }
}

#signModal .btn-submit {
  margin: 0 auto;
}

#signModal .modal-dialog {
  background-image: none;
}

#signModal .form-group .iconfont {
  position: absolute;
  top: 50%;
  left: 6px;
  z-index: 10;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #666;
}

#signModal .form-group .input-control {
  display: block;
  width: 100%;
  padding: 6px 12px 6px 24px;
  border: 1px solid #ededed;
  font-size: 14px;
  line-height: 1.5;
}

.btn-submit:focus,
.btn-submit:active,
.btn-send-msg:focus,
.btn-send-msg:active,
.input-control:focus {
  outline: none;
}

.sign-panel {
  display: none;
  transition: all 0.3s ease-in-out;
}

.sign-panel.active {
  display: block;
}

.signin-prompt {
  font-size: 14px;
  line-height: 1.5;
  color: #f00;
}