
/*--公共部分--*/
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: pointer; }

body, form, img, ul, ol, li, dl, dt, dd, p, tr, td, strong, span, pre { margin: 0; padding: 0; border: 0;  }

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: normal; }

body, button, input, select, textarea { font: 14px/1.5 'microsoft yahei', 'hiragino sans gb', sans-serif,arial; color: #333; }

ul, li { list-style: none; }

img { border: 0px; vertical-align: middle; }

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

table th, table td { border: 1px solid #ccc; }

*, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat: no-repeat; }

article, aside, footer, header, nav, section { display: block; }

a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: #333; outline: none; cursor: pointer; }

a:hover { background-repeat: no-repeat; text-decoration: none; }

a, input[type="button"], button, label, input[type="submit"], input[type="reset"] { cursor: pointer; }

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

sub { bottom: -0.25em; }

sup { top: -0.5em; }

audio, video { display: inline-block; }

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

input, textarea, select { outline: none; }

input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="reset"], select, textarea { outline-style: none; -webkit-appearance: none; resize: none; border: none; -webkit-border-radius: 0; border-radius: 0; }

textarea { overflow: auto; vertical-align: top; }

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px rgba(255, 255, 255, 0) inset !important; }

.bd_weixin_popup, .content-box { -webkit-box-sizing: content-box; box-sizing: content-box; }

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.clearfix { *zoom: 1; }

.clear { clear: both; line-height: 0; height: 0; font-size: 0; }

.fl { float: left; }

.fr { float: right; }

.show { display: block !important; }

.hide { display: none !important; }

.commonweb { padding: 0px 10px; }

.commonwebbox { margin-left: 0px; margin-right: 0px; }

.commonleft { float: none; }

.commonright { float: none; }

.visible-sm, .visible-md, .visible-lg { display: none; }

.hidden-sm, .hidden-md, .hidden-lg { display: block; }

.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; padding-left: 10px; padding-right: 10px; }

.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%; }

@media (max-width: 320px) { body { min-width: 320px; } }

@media (min-width: 768px) { .commonweb { padding: 0px 20px; }
  .commonwebbox { margin-left: -10px; margin-right: -10px; }
  .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; padding-left: 10px; padding-right: 10px; }
  .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%; }
  .visible-sm { display: block; }
  .hidden-sm { display: none; }
  .commonweb { margin: 0px auto; max-width: 750px; } }

@media (min-width: 992px) { .commonweb { padding: 0px 10px; }
  .commonwebbox { margin-left: -10px; margin-right: -10px; }
  .commonleft { float: left; }
  .commonright { float: right; }
  .visible-md { display: block; }
  .hidden-md { display: none; }
  .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; padding-left: 10px; padding-right: 10px; }
  .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%; }
  .commonweb { max-width: 970px; } }

@media (min-width: 1260px) { html { cursor: default; }
  .commonleft { float: left; }
  .commonright { float: right; }
  .visible-lg { display: block; }
  .hidden-lg { display: none; }
  .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; padding-left: 10px; padding-right: 10px; }
  .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%; } }

@media (min-width: 1260px) { .commonweb { max-width: 1100px; } }

@media (min-width: 1400px) { .commonweb { max-width: 1300px; } }

@media (min-width: 1640px) { .commonweb { max-width: 1400px; } }

@media (min-width: 1890px) { .commonweb { max-width: 1680px; } }

/* layout start*/
.swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1; }

.swiper-container-no-flexbox .swiper-slide { float: left; }

.swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }

.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform,-webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; }

.swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; }

.swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; }

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; }

.swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform,height; -webkit-transition-property: height,-webkit-transform; transition-property: height,-webkit-transform; transition-property: transform,height; transition-property: transform,height,-webkit-transform; }

.swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; }

.swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; }

.swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; }

.swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; }

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; }

.swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; }

.swiper-pagination.swiper-pagination-hidden { opacity: 0; }

.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }

.swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }

.swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; }

.swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; }

.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; }

.swiper-pagination.swiper-pagination-hidden { opacity: 0; }

.swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; -webkit-border-radius: 100%; border-radius: 100%; background: #000; }

button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; }

.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }

.swiper-pagination-bullet-active { opacity: 1; background: #007aff; }

.swiper-scrollbar { -webkit-border-radius: 10px; border-radius: 10px; position: relative; -ms-touch-action: none; background: #dde2e9; }

.swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 0px; bottom: 20px; z-index: 50; height: 2px; width: 100%; opacity: 1 !important; }

.swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; }

.swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: #c1c7cf; -webkit-border-radius: 10px; border-radius: 10px; left: 0; top: 0; }

.swiper-scrollbar-cursor-drag { cursor: move; }

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

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

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

.animated.bouncein, .animated.bounceout, .animated.flipoutx, .animated.flipouty { -webkit-animation-duration: .75s; animation-duration: .75s; }

@-webkit-keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translatez(0);
    transform: translatez(0); }
  40%, 43% { -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  40%, 43%, 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
  70% { -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% { -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }

@keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translatez(0);
    transform: translatez(0); }
  40%, 43% { -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  40%, 43%, 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
  70% { -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: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; }

@-webkit-keyframes flash { 0%, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0; } }

@keyframes flash { 0%, 50%, to { opacity: 1; }
  25%, 75% { opacity: 0; } }

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

@-webkit-keyframes pulse { 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 pulse { 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: pulse; animation-name: pulse; }

@-webkit-keyframes rubberband { 0% { -webkit-transform: scalex(1);
    transform: scalex(1); }
  30% { -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% { -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to { -webkit-transform: scalex(1);
    transform: scalex(1); } }

@keyframes rubberband { 0% { -webkit-transform: scalex(1);
    transform: scalex(1); }
  30% { -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% { -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% { -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% { -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% { -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to { -webkit-transform: scalex(1);
    transform: scalex(1); } }

.rubberband { -webkit-animation-name: rubberband; animation-name: rubberband; }

@-webkit-keyframes shake { 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 shake { 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: shake; animation-name: shake; }

@-webkit-keyframes headshake { 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 headshake { 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: headshake; animation-name: headshake; }

@-webkit-keyframes swing { 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 swing { 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; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }

@-webkit-keyframes tada { 0% { -webkit-transform: scalex(1);
    transform: scalex(1); }
  10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.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 tada { 0% { -webkit-transform: scalex(1);
    transform: scalex(1); }
  10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.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: tada; animation-name: tada; }

@-webkit-keyframes wobble { 0% { -webkit-transform: none;
    transform: none; }
  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: none;
    transform: none; } }

@keyframes wobble { 0% { -webkit-transform: none;
    transform: none; }
  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: none;
    transform: none; } }

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

@-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: none;
    transform: none; }
  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(-0.78125deg) skewy(-0.78125deg);
    transform: skewx(-0.78125deg) skewy(-0.78125deg); }
  77.7% { -webkit-transform: skewx(0.39063deg) skewy(0.39063deg);
    transform: skewx(0.39063deg) skewy(0.39063deg); }
  88.8% { -webkit-transform: skewx(-0.19531deg) skewy(-0.19531deg);
    transform: skewx(-0.19531deg) skewy(-0.19531deg); } }

@keyframes jello { 0%, 11.1%, to { -webkit-transform: none;
    transform: none; }
  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(-0.78125deg) skewy(-0.78125deg);
    transform: skewx(-0.78125deg) skewy(-0.78125deg); }
  77.7% { -webkit-transform: skewx(0.39063deg) skewy(0.39063deg);
    transform: skewx(0.39063deg) skewy(0.39063deg); }
  88.8% { -webkit-transform: skewx(-0.19531deg) skewy(-0.19531deg);
    transform: skewx(-0.19531deg) skewy(-0.19531deg); } }

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

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

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

.bouncein { -webkit-animation-name: bouncein; animation-name: bouncein; }

@-webkit-keyframes bounceindown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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: none;
    transform: none; } }

@keyframes bounceindown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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: none;
    transform: none; } }

.bounceindown { -webkit-animation-name: bounceindown; animation-name: bounceindown; }

@-webkit-keyframes bounceinleft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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: none;
    transform: none; } }

@keyframes bounceinleft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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: none;
    transform: none; } }

.bounceinleft { -webkit-animation-name: bounceinleft; animation-name: bounceinleft; }

@-webkit-keyframes bounceinright { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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: none;
    transform: none; } }

@keyframes bounceinright { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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: none;
    transform: none; } }

.bounceinright { -webkit-animation-name: bounceinright; animation-name: bounceinright; }

@-webkit-keyframes bounceinup { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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 bounceinup { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0;
    -webkit-transform: 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: bounceinup; animation-name: bounceinup; }

@-webkit-keyframes bounceout { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% { opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

@keyframes bounceout { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% { opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }

.bounceout { -webkit-animation-name: bounceout; animation-name: bounceout; }

@-webkit-keyframes bounceoutdown { 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 bounceoutdown { 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: bounceoutdown; animation-name: bounceoutdown; }

@-webkit-keyframes bounceoutleft { 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 bounceoutleft { 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: bounceoutleft; animation-name: bounceoutleft; }

@-webkit-keyframes bounceoutright { 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 bounceoutright { 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: bounceoutright; animation-name: bounceoutright; }

@-webkit-keyframes bounceoutup { 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 bounceoutup { 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: bounceoutup; animation-name: bounceoutup; }

@-webkit-keyframes fadein { 0% { opacity: 0; }
  to { opacity: 1; } }

@keyframes fadein { 0% { opacity: 0; }
  to { opacity: 1; } }

.fadein { -webkit-animation-name: fadein; animation-name: fadein; }

@-webkit-keyframes fadeindown { 0% { opacity: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeindown { 0% { opacity: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeindown { -webkit-animation-name: fadeindown; animation-name: fadeindown; }

@-webkit-keyframes fadeindownbig { 0% { opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeindownbig { 0% { opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeindownbig { -webkit-animation-name: fadeindownbig; animation-name: fadeindownbig; }

@-webkit-keyframes fadeinleft { 0% { opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeinleft { 0% { opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeinleft { -webkit-animation-name: fadeinleft; animation-name: fadeinleft; }

@-webkit-keyframes fadeinleftbig { 0% { opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeinleftbig { 0% { opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeinleftbig { -webkit-animation-name: fadeinleftbig; animation-name: fadeinleftbig; }

@-webkit-keyframes fadeinright { 0% { opacity: 0;
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeinright { 0% { opacity: 0;
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeinright { -webkit-animation-name: fadeinright; animation-name: fadeinright; }

@-webkit-keyframes fadeinrightbig { 0% { opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeinrightbig { 0% { opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeinrightbig { -webkit-animation-name: fadeinrightbig; animation-name: fadeinrightbig; }

@-webkit-keyframes fadeinup { 0% { opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeinup { 0% { opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeinup { -webkit-animation-name: fadeinup; animation-name: fadeinup; }

@-webkit-keyframes fadeinupbig { 0% { opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeinupbig { 0% { opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  to { opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeinupbig { -webkit-animation-name: fadeinupbig; animation-name: fadeinupbig; }

@-webkit-keyframes fadeout { 0% { opacity: 1; }
  to { opacity: 0; } }

@keyframes fadeout { 0% { opacity: 1; }
  to { opacity: 0; } }

.fadeout { -webkit-animation-name: fadeout; animation-name: fadeout; }

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

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

.fadeoutdown { -webkit-animation-name: fadeoutdown; animation-name: fadeoutdown; }

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

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

.fadeoutdownbig { -webkit-animation-name: fadeoutdownbig; animation-name: fadeoutdownbig; }

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

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

.fadeoutleft { -webkit-animation-name: fadeoutleft; animation-name: fadeoutleft; }

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

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

.fadeoutleftbig { -webkit-animation-name: fadeoutleftbig; animation-name: fadeoutleftbig; }

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

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

.fadeoutright { -webkit-animation-name: fadeoutright; animation-name: fadeoutright; }

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

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

.fadeoutrightbig { -webkit-animation-name: fadeoutrightbig; animation-name: fadeoutrightbig; }

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

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

.fadeoutup { -webkit-animation-name: fadeoutup; animation-name: fadeoutup; }

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

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

.fadeoutupbig { -webkit-animation-name: fadeoutupbig; animation-name: fadeoutupbig; }

@-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotatey(-1turn);
    transform: perspective(400px) rotatey(-1turn); }
  0%, 40% { -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); }
  50% { -webkit-transform: perspective(400px) translatez(150px) rotatey(-170deg);
    transform: perspective(400px) translatez(150px) rotatey(-170deg); }
  50%, 80% { -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95); }
  to { -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip { 0% { -webkit-transform: perspective(400px) rotatey(-1turn);
    transform: perspective(400px) rotatey(-1turn); }
  0%, 40% { -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); }
  50% { -webkit-transform: perspective(400px) translatez(150px) rotatey(-170deg);
    transform: perspective(400px) translatez(150px) rotatey(-170deg); }
  50%, 80% { -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95); }
  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: flip; animation-name: flip; }

@-webkit-keyframes flipinx { 0% { -webkit-transform: perspective(400px) rotatex(90deg);
    transform: perspective(400px) rotatex(90deg);
    opacity: 0; }
  0%, 40% { -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  40% { -webkit-transform: perspective(400px) rotatex(-20deg);
    transform: perspective(400px) rotatex(-20deg); }
  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 flipinx { 0% { -webkit-transform: perspective(400px) rotatex(90deg);
    transform: perspective(400px) rotatex(90deg);
    opacity: 0; }
  0%, 40% { -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  40% { -webkit-transform: perspective(400px) rotatex(-20deg);
    transform: perspective(400px) rotatex(-20deg); }
  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: flipinx; animation-name: flipinx; }

@-webkit-keyframes flipiny { 0% { -webkit-transform: perspective(400px) rotatey(90deg);
    transform: perspective(400px) rotatey(90deg);
    opacity: 0; }
  0%, 40% { -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  40% { -webkit-transform: perspective(400px) rotatey(-20deg);
    transform: perspective(400px) rotatey(-20deg); }
  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 flipiny { 0% { -webkit-transform: perspective(400px) rotatey(90deg);
    transform: perspective(400px) rotatey(90deg);
    opacity: 0; }
  0%, 40% { -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  40% { -webkit-transform: perspective(400px) rotatey(-20deg);
    transform: perspective(400px) rotatey(-20deg); }
  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: flipiny; animation-name: flipiny; }

@-webkit-keyframes flipoutx { 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 flipoutx { 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-name: flipoutx; animation-name: flipoutx; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flipouty { 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 flipouty { 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-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipouty; animation-name: flipouty; }

@-webkit-keyframes lightspeedin { 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); }
  60%, 80% { opacity: 1; }
  80% { -webkit-transform: skewx(-5deg);
    transform: skewx(-5deg); }
  to { -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes lightspeedin { 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); }
  60%, 80% { opacity: 1; }
  80% { -webkit-transform: skewx(-5deg);
    transform: skewx(-5deg); }
  to { -webkit-transform: none;
    transform: none;
    opacity: 1; } }

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

@-webkit-keyframes lightspeedout { 0% { opacity: 1; }
  to { -webkit-transform: translate3d(100%, 0, 0) skewx(30deg);
    transform: translate3d(100%, 0, 0) skewx(30deg);
    opacity: 0; } }

@keyframes lightspeedout { 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: lightspeedout; animation-name: lightspeedout; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }

@-webkit-keyframes rotatein { 0% { -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: center; }
  to { -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotatein { 0% { -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: center; }
  to { -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotatein { -webkit-animation-name: rotatein; animation-name: rotatein; }

@-webkit-keyframes rotateindownleft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: left bottom; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateindownleft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: left bottom; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateindownleft { -webkit-animation-name: rotateindownleft; animation-name: rotateindownleft; }

@-webkit-keyframes rotateindownright { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: right bottom; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateindownright { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: right bottom; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateindownright { -webkit-animation-name: rotateindownright; animation-name: rotateindownright; }

@-webkit-keyframes rotateinupleft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: left bottom; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateinupleft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: left bottom; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateinupleft { -webkit-animation-name: rotateinupleft; animation-name: rotateinupleft; }

@-webkit-keyframes rotateinupright { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: right bottom; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes rotateinupright { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }
  0%, to { -webkit-transform-origin: right bottom; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

.rotateinupright { -webkit-animation-name: rotateinupright; animation-name: rotateinupright; }

@-webkit-keyframes rotateout { 0% { -webkit-transform-origin: center; transform-origin: center;
    opacity: 1; }
  0%, to { -webkit-transform-origin: center; }
  to { -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateout { 0% { -webkit-transform-origin: center; transform-origin: center;
    opacity: 1; }
  0%, to { -webkit-transform-origin: center; }
  to { -webkit-transform-origin: center; transform-origin: center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

.rotateout { -webkit-animation-name: rotateout; animation-name: rotateout; }

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

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

.rotateoutdownleft { -webkit-animation-name: rotateoutdownleft; animation-name: rotateoutdownleft; }

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

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

.rotateoutdownright { -webkit-animation-name: rotateoutdownright; animation-name: rotateoutdownright; }

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

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

.rotateoutupleft { -webkit-animation-name: rotateoutupleft; animation-name: rotateoutupleft; }

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

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

.rotateoutupright { -webkit-animation-name: rotateoutupright; animation-name: rotateoutupright; }

@-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; }
  0%, 20%, 60% { -webkit-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; }
  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 hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; }
  0%, 20%, 60% { -webkit-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; }
  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-name: hinge; animation-name: hinge; }

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

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

.rollin { -webkit-animation-name: rollin; animation-name: rollin; }

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

@keyframes rollout { 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: rollout; animation-name: rollout; }

@-webkit-keyframes zoomin { 0% { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }

@keyframes zoomin { 0% { opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }

.zoomin { -webkit-animation-name: zoomin; animation-name: zoomin; }

@-webkit-keyframes zoomindown { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomindown { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomindown { -webkit-animation-name: zoomindown; animation-name: zoomindown; }

@-webkit-keyframes zoominleft { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoominleft { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoominleft { -webkit-animation-name: zoominleft; animation-name: zoominleft; }

@-webkit-keyframes zoominright { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoominright { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoominright { -webkit-animation-name: zoominright; animation-name: zoominright; }

@-webkit-keyframes zoominup { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoominup { 0% { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoominup { -webkit-animation-name: zoominup; animation-name: zoominup; }

@-webkit-keyframes zoomout { 0% { opacity: 1; }
  50% { -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50%, to { opacity: 0; } }

@keyframes zoomout { 0% { opacity: 1; }
  50% { -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50%, to { opacity: 0; } }

.zoomout { -webkit-animation-name: zoomout; animation-name: zoomout; }

@-webkit-keyframes zoomoutdown { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomoutdown { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomoutdown { -webkit-animation-name: zoomoutdown; animation-name: zoomoutdown; }

@-webkit-keyframes zoomoutleft { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to { opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

@keyframes zoomoutleft { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to { opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }

.zoomoutleft { -webkit-animation-name: zoomoutleft; animation-name: zoomoutleft; }

@-webkit-keyframes zoomoutright { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to { opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

@keyframes zoomoutright { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to { opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }

.zoomoutright { -webkit-animation-name: zoomoutright; animation-name: zoomoutright; }

@-webkit-keyframes zoomoutup { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

@keyframes zoomoutup { 40% { opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomoutup { -webkit-animation-name: zoomoutup; animation-name: zoomoutup; }

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

@keyframes slideindown { 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: slideindown; animation-name: slideindown; }

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

@keyframes slideinleft { 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: slideinleft; animation-name: slideinleft; }

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

@keyframes slideinright { 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: slideinright; animation-name: slideinright; }

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

@keyframes slideinup { 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: slideinup; animation-name: slideinup; }

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

@keyframes slideoutdown { 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: slideoutdown; animation-name: slideoutdown; }

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

@keyframes slideoutleft { 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: slideoutleft; animation-name: slideoutleft; }

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

@keyframes slideoutright { 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: slideoutright; animation-name: slideoutright; }

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

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

body,html{ overflow: visible;}

.slideoutup { -webkit-animation-name: slideoutup; animation-name: slideoutup; }

img.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; }


.soft_banner { position: relative; }

.soft_banner img { width: 100%; }

.soft_videobg { background-image: url(/uploads/image/mdimages/soft_02.jpg); background-repeat: no-repeat; background-position: center 30px; background-size: 100% auto; padding-bottom: 60px; }

.soft_video { position: relative; cursor: pointer; margin-top: -50px; }

.soft_video img { width: 100%; }

.soft_video span { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; width: 64px; height: 64px; border: 4px solid #fff; -webkit-border-radius: 100%; border-radius: 100%; }

.soft_video span::after { content: ''; left: -webkit-calc(50%   3px); left: calc(50%   3px); top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 9px solid transparent; border-left-width: 12px; border-right: none; border-left-color: #fff; display: block; position: absolute; }

.soft_video video { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: #000; }

.soft_commontitle { padding-top: 15px; }

.soft_commontitle h3 { background: url(/uploads/image/mdimages/soft_04.png) no-repeat center; position: relative; height: 60px; background-size: auto 60px; }

.soft_commontitle h3 span { position: absolute; display: block; top: -webkit-calc(50%   7px); top: calc(50%   7px); -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); transform: translatey(-50%); left: 0px; width: 100%; text-align: center; color: #000000; font-size: 18px; }

.soft_commontitle p { text-align: center; font-size: 12px; color: rgba(3, 3, 3, 0.6); padding-top: 15px; }

.soft_paper { margin: 0px auto; max-width: 300px; padding-top: 30px; }

.soft_paper img { display: block; width: 100%; }

.soft_coursebox { overflow: hidden; position: relative; }

.soft_course { max-width: 520px; margin: 0px auto; padding-top: 90px; }

.soft_coursetime { overflow: hidden; position: relative; }

.soft_coursetime ul li { font-size: 18px; -webkit-transition: all .4s ease; transition: all .4s ease; color: #c4c4c4; text-align: center; line-height: 60px; cursor: pointer; }

.soft_coursetime ul li.swiper-slide-active { color: #00ac97; font-size: 50px; }

.soft_coursetext { margin-top: 20px; overflow: hidden; position: relative; }

.soft_coursetext ul li { text-align: center; }

.soft_coursetext ul li h3 { font-size: 18px; color: #000000; }

.soft_coursetext ul li p { color: rgba(0, 0, 0, 0.7); font-size: 12px; padding-top: 5px; }

.soft_advantagebg { background: url(/uploads/image/mdimages/soft_06.jpg) no-repeat center top; background-size: 100% auto; overflow: hidden; position: relative; }

.soft_advantage { max-width: 1540px; margin: 0px auto; padding-top: 30px; }

.soft_advantage dl { padding-bottom: 20px; }

.soft_advantage dl dt { padding-top: 10px; padding-left: 0px; }

.soft_advantage dl dt .num { font-size: 24px; color: #00ac97; line-height: 26px; }

.soft_advantage dl dt h3 { font-size: 18px; color: #000000; padding: 10px 0px; }

.soft_advantage dl dt .desc { font-size: 14px; color: rgba(3, 3, 3, 0.6); }

.soft_advantage dl dd { position: relative; }

.soft_advantage dl dd img { display: block; max-width: 300px; position: relative; z-index: 3; -webkit-border-radius: 100%; border-radius: 100%; margin: 0px auto; }

.soft_papertowelsimg { max-width: 80%; margin: 20px auto 0px; }

.soft_papertowelsimg ul li { opacity: 0.2; -webkit-transition: all .6s ease; transition: all .6s ease; overflow: hidden; }

.soft_papertowelsimg ul li img { display: block; width: 100%; }

.soft_papertowelsimg ul li.swiper-slide-active { opacity: 1; }

.soft_paperimg { overflow: hidden; position: relative; }

.soft_papertowelslistimg { width: 100%; overflow: hidden; position: relative; margin-top: 20px; }

.soft_papertowelslistimg ul { margin: 0px -5px; }

.soft_papertowelslistimg ul li { float: left; width: 14%; padding: 0px 5px; overflow: hidden; opacity: 0.4; -webkit-transition: all .4s ease; transition: all .4s ease; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.soft_papertowelslistimg ul li.cur { width: 72%; opacity: 1; }

.soft_papertowelslistimg ul li p { overflow: hidden; position: relative; }

.soft_papertowelslistimg ul li img { display: block; }

.infooter { background: #c4c0bc; }

.infooter-top { padding: 30px 0 20px; }

.infooter-item { border-bottom: 1px solid #aca9a4; }

.infooter-item:last-of-type { border-bottom: none; }

.infooter-h3 { position: relative; }

.infooter-h3 a { display: block; width: 100%; height: 40px; line-height: 40px; font-size: 16px; color: #86837e; }

.infooter-h3.active .infooter-span { display: block; }

.infooter-h3.active:after { position: absolute; top: 50%; right: 10px; width: 10px; height: 10px; border-top: 2px solid #aca9a4; border-right: 2px solid #aca9a4; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); -webkit-transition: all 0.5s; transition: all 0.5s; content: ""; }

.infooter-h3.active2:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); -ms-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); }

.infooter-span { position: absolute; bottom: 0; right: 0; z-index: 10; display: none; width: 40%; height: 100%; }

.infooter-menu { display: none; border-top: 1px solid #aca9a4; }

.infooter-menu a { position: relative; display: block; width: 100%; line-height: 35px; padding: 0 10px; font-size: 14px; color: #6a6662; -webkit-transition: all .3s; transition: all .3s; }

.infooter-menu a:hover { color: #0ba690; }

.infooter-menu a:hover .infooter-menuweim { visibility: inherit; opacity: 1; margin-left: 0; }

.infooter-fen { text-align: center; font-size: 0; }

.infooter-fen a { position: relative; display: inline-block; vertical-align: top; width: 42px; height: 42px; margin: 0 5px; border: 1px solid #96938e; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transition: all .5s; transition: all .5s; }

.infooter-fen a img { -webkit-transition: all .5s; transition: all .5s; }

.infooter-fen a .infooter-fenicon1 { width: 100%; }

.infooter-fen a .infooter-fenicon2 { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; }

.infooter-fen a:hover { border-color: #0ba690; }

.infooter-fen a:hover .infooter-fenicon1 { visibility: hidden; opacity: 0; }

.infooter-fen a:hover .infooter-fenicon2 { visibility: inherit; opacity: 1; }

.infooter-fen a:hover .infooter-fenview { margin-bottom: 0px; visibility: inherit; opacity: 1; }

.infooter-fenview { position: absolute; bottom: 100%; left: 50%; z-index: 10; width: 94px; padding-bottom: 5px; -webkit-transform: translatex(-50%); -ms-transform: translatex(-50%); transform: translatex(-50%); margin-bottom: 20px; visibility: hidden; -webkit-transition: all .5s; transition: all .5s; opacity: 0; }

.infooter-fenview:after { position: absolute; bottom: 0; left: 50%; border-top: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; -webkit-transform: translatex(-50%); -ms-transform: translatex(-50%); transform: translatex(-50%); content: ""; }

.infooter-fenview img { width: 100%; border: 4px solid #fff; }

.infooter-btm { border-top: 1px solid #aca9a4; padding: 10px 0 10px; line-height: 1.69231; text-align: center; font-size: 13px; color: #86837e; }

.infooter-btm a { color: #86837e; }

.infooter-menuweim { position: absolute; left: 130px; bottom: -8px; z-index: 5; width: 107px; padding-left: 7px; margin-left: 20px; visibility: hidden; opacity: 0; -webkit-transition: all .5s; transition: all .5s; }

.infooter-menuweim:after { position: absolute; bottom: 18px; left: 0%; border-right: 7px solid #ffffff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; content: ""; }

.infooter-menuweim img { width: 100%; border: 9px solid #fff; }

.infooter-zhong { display: none; }

@media (min-width: 768px) { .soft_commontitle { padding-top: 30px; }
  .soft_commontitle h3 { height: 80px; background-size: auto 80px; }
  .soft_commontitle h3 span { top: -webkit-calc(50%   8px); top: calc(50%   8px); font-size: 20px; }
  .soft_commontitle p { font-size: 16px; }
  .soft_videobg { background-position: center 60px; }
  .soft_video { margin-top: -70px; }
  .soft_advantage { padding-top: 0px; }
  .soft_advantage dl dt { float: left; width: -webkit-calc(100% - 200px); width: calc(100% - 200px); padding-top: 30px; padding-left: 20px; }
  .soft_advantage dl dt .num { font-size: 24px; line-height: 26px; }
  .soft_advantage dl dt h3 { font-size: 18px; padding: 10px 0px; }
  .soft_advantage dl dt .desc { font-size: 14px; }
  .soft_advantage dl dd { float: right; width: 200px; }
  .soft_advantage dl dd img { -webkit-border-radius: 100%; border-radius: 100%; max-width: inherit; width: 100%; margin: 0px; }
  .soft_advantage dl dd span { width: 100%; height: 100%; position: absolute; display: block; }
  .soft_advantage dl dd span.circular { z-index: 2; left: 40px; top: 0px; background: #eff8f6; -webkit-border-radius: 100%; border-radius: 100%; }
  .soft_advantage dl dd span.circularline { z-index: 1; left: 0px; top: 0px; }
  .soft_advantage dl dd span.circularline::after { content: ''; width: 130%; height: 130%; position: absolute; left: 50%; top: 50%; -webkit-transform: translatey(-50%); -ms-transform: translatey(-50%); transform: translatey(-50%); -webkit-border-radius: 100%; border-radius: 100%; border: 1px solid #ededec; }
  .soft_advantage dl:nth-child(2n) dd { float: left; }
  .soft_advantage dl:nth-child(2n) dd span.circular { left: -40px; }
  .soft_advantage dl:nth-child(2n) dd span.circularline::after { left: -50%; }
  .soft_papertowelsimg { max-width: 1450px; margin: 50px auto 0px; }
  .soft_papertowelslistimg { margin-top: 50px; } }

@media (min-width: 992px) { .soft_videobg { background-position: center; }
  .soft_video { margin-top: -150px; }
  .soft_paper { float: left; width: 40%; padding-left: 80px; padding-top: 0px; max-width: inherit; }
  .soft_coursebox { float: left; width: 60%; }
  .soft_course { max-width: 740px; padding-top: 50px; }
  .soft_coursetime ul li { font-size: 22px; line-height: 90px; cursor: pointer; }
  .soft_coursetime ul li.swiper-slide-active { color: #00ac97; font-size: 60px; }
  .soft_coursetext { margin-top: 20px; }
  .soft_coursetext ul li h3 { font-size: 20px; }
  .soft_coursetext ul li p { font-size: 14px; padding-top: 5px; }
  .soft_advantage dl dt { width: -webkit-calc(100% - 360px); width: calc(100% - 360px); padding-top: 70px; padding-left: 80px; }
  .soft_advantage dl dt .num { font-size: 30px; line-height: 32px; }
  .soft_advantage dl dt h3 { font-size: 24px; padding: 10px 0px; }
  .soft_advantage dl dt .desc { font-size: 16px; }
  .soft_advantage dl dd { width: 360px; } }

@media (min-width: 1024px) { .infooter-top { padding: 60px 0 42px; }
  .infooter-item { float: left; width: 25%; padding-right: 10px; border-bottom: none; }
  .infooter-item:nth-child(2) { width: 30.83333%; }
  .infooter-item:nth-child(2) .infooter-menu { padding-left: 175px; }
  .infooter-item:nth-child(3) { width: auto; max-width: 19.16667%; }
  .infooter-item.last { width: auto; float: right; padding-right: 0; border-bottom: none; }
  .infooter-item.last .infooter-h3 { display: inline-block; vertical-align: middle; }
  .infooter-h3 { padding-top: 10px; float: left; }
  .infooter-h3 a { display: block; width: auto; height: auto; line-height: 22px; font-size: 16px; }
  .infooter-menu { display: block; border-top: none; padding: 10px 0 0 120px; }
  .infooter-menu a { display: block; width: 100%; line-height: 22px; padding: 0px; margin-bottom: 14px; font-size: 13px; }
  .infooter-menuweim { left: 115px; bottom: -12px; }
  .infooter-fen { display: inline-block; vertical-align: middle; padding: 0px 0 0 15px; }
  .infooter-btm { padding: 35px 0 42px; }
  .infooter-btm a { -webkit-transition: all .5s; transition: all .5s; }
  .infooter-btm a:hover { color: #0ba690; text-decoration: underline; }
  .infooter-h3.active .infooter-span { display: none; }
  .infooter-h3.active:after { display: none; }

  
   }

@media (min-width: 1260px) { .soft_commontitle { padding-top: 45px; }
  .soft_commontitle h3 { height: 90px; background-size: auto 90px; }
  .soft_commontitle h3 span { top: -webkit-calc(50%   9px); top: calc(50%   9px); font-size: 24px; }
  .soft_commontitle p { font-size: 18px; }
  .soft_paper { width: 40%; padding-left: 80px; }
  .soft_coursebox { width: 60%; }
  .soft_course { max-width: 540px; padding-top: 50px; }
  .soft_coursetime ul li { font-size: 22px; line-height: 90px; cursor: pointer; }
  .soft_coursetime ul li.swiper-slide-active { color: #00ac97; font-size: 60px; }
  .soft_coursetext { margin-top: 20px; }
  .soft_coursetext ul li h3 { font-size: 20px; }
  .soft_coursetext ul li p { font-size: 14px; padding-top: 5px; }
  .inabout-btm { margin-top: 120px; margin-top: 2.5rem; }
  .infooter-item:nth-child(2) { width: 32.83333%; }
  .infooter-item:nth-child(2) .infooter-menu { padding-left: 220px; }
  .infooter-menuweim { left: 130px; }
  .infooter-h3 a { font-size: 20px; }
  .infooter-menu { padding-left: 150px; }
  .infooter-menu a { font-size: 16px; }
  .infooter-btm { padding: 35px 0 42px; }
  .infooter-btmfl { float: left; }
  .infooter-btmfr { float: right; max-width: 45%; }
  .infooter-top { border-bottom: 1px solid #aca9a4; }
  .infooter-zhong { margin: 55px 0; display: block; }
  .infooter-zhong .infowai_ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  /* .infooter-zhong .infowai_ul li{float: left;} */
  .infooter-zhong .infowai_ul li { width: 25%; border-right: 1px solid #aca9a4; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 3%; }
  .infooter-zhong .infowai_ul li:first-child { width: 22%; padding-right: 3%; padding-left: 0; }
  .infooter-zhong .infowai_ul li:last-child { width: 22%; padding-left: 3%; padding-right: 0; border-right: none; }
  .infooter-zhong .infowai_ul li .ftz_tou { width: 100%; border: 1px solid #aca9a4; height: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-border-radius: 10px; border-radius: 10px; padding-left: 15px; }
  .infooter-zhong .infowai_ul li .ftz_tou span { margin-left: 10px; font-size: 16px; color: #86837e; }
  .infooter-zhong .infowai_ul li .ftz_tou img { width: 30px; }
  .infooter-zhong .infowai_ul li .fotzi_list a { display: block; margin-top: 20px; font-size: 13px; color: #6a6662; }
  .infooter-zhong .infowai_ul li .fotzi_list p { width: 18px; height: 2px; background: #989898; margin-top: 20px; }
  .infooter-zhong .infowai_ul li .fotzi_list { padding-left: 60px; }

   }

@media (min-width: 1420px) { .soft_commontitle { padding-top: 55px; }
  .soft_commontitle h3 { height: 100px; background-size: auto 100px; }
  .soft_commontitle h3 span { top: -webkit-calc(50%   11px); top: calc(50%   11px); font-size: 32px; }
  .soft_commontitle p { font-size: 20px; }
  .soft_course { max-width: 640px; padding-top: 70px; }
  .soft_coursetime ul li { font-size: 26px; line-height: 90px; cursor: pointer; }
  .soft_coursetime ul li.swiper-slide-active { color: #00ac97; font-size: 75px; }
  .soft_coursetext { margin-top: 25px; }
  .soft_coursetext ul li h3 { font-size: 24px; }
  .soft_coursetext ul li p { font-size: 16px; padding-top: 5px; }
  .soft_advantage dl dt { width: -webkit-calc(100% - 460px); width: calc(100% - 460px); padding-top: 90px; padding-left: 80px; }
  .soft_advantage dl dt .num { font-size: 40px; line-height: 42px; }
  .soft_advantage dl dt h3 { font-size: 30px; padding: 10px 0px; }
  .soft_advantage dl dt .desc { font-size: 18px; }
  .soft_advantage dl dd { width: 460px; }
  .infooter .commonweb { max-width: 1380px; }
}

@media (min-width: 1640px) { .soft_commontitle { padding-top: 65px; }
  .soft_commontitle h3 { height: 116px; background-size: auto 116px; }
  .soft_commontitle h3 span { top: -webkit-calc(50%   11px); top: calc(50%   11px); font-size: 40px; }
  .soft_commontitle p { font-size: 22px; }
  .soft_paper { width: 38.3%; padding-left: 100px; }
  .soft_coursebox { width: 61.7%; }
  .soft_course { max-width: 740px; padding-top: 80px; }
  .soft_coursetime ul li { font-size: 30px; line-height: 110px; cursor: pointer; }
  .soft_coursetime ul li.swiper-slide-active { color: #00ac97; font-size: 95px; }
  .soft_coursetext { margin-top: 30px; }
  .soft_coursetext ul li h3 { font-size: 30px; }
  .soft_coursetext ul li p { font-size: 18px; padding-top: 5px; }
  .soft_advantage dl dt { width: -webkit-calc(100% - 560px); width: calc(100% - 560px); padding-top: 120px; padding-left: 80px; }
  .soft_advantage dl dt .num { font-size: 50px; line-height: 52px; }
  .soft_advantage dl dt h3 { font-size: 36px; padding: 10px 0px; }
  .soft_advantage dl dt .desc { font-size: 20px; }
  .soft_advantage dl dd { width: 560px; } }

@media (min-width: 1890px) { .soft_commontitle { padding-top: 85px; }
  .soft_commontitle h3 { height: 136px; background-size: auto 136px; }
  .soft_commontitle h3 span { top: -webkit-calc(50%   11px); top: calc(50%   11px); font-size: 48px; }
  .soft_commontitle p { font-size: 24px; }
  .soft_paper { width: 38.3%; padding-left: 130px; }
  .soft_coursebox { width: 61.7%; }
  .soft_course { padding-top: 90px; }
  .soft_coursetime ul li { font-size: 36px; line-height: 130px; cursor: pointer; }
  .soft_coursetime ul li.swiper-slide-active { color: #00ac97; font-size: 105px; }
  .soft_coursetext { margin-top: 35px; }
  .soft_coursetext ul li h3 { font-size: 34px; }
  .soft_coursetext ul li p { font-size: 20px; padding-top: 5px; }
  .soft_advantage dl dt { width: -webkit-calc(100% - 683px); width: calc(100% - 683px); padding-top: 180px; padding-left: 80px; }
  .soft_advantage dl dt .num { font-size: 60px; line-height: 62px; }
  .soft_advantage dl dt h3 { font-size: 42px; padding: 10px 0px; }
  .soft_advantage dl dt .desc { font-size: 24px; }
  .soft_advantage dl dd { width: 683px; }
  .soft_papertowelslistimg ul li { float: left; width: -webkit-calc((100% - 1450px) / 2); width: calc((100% - 1450px) / 2); overflow: hidden; }
  .soft_papertowelslistimg ul li.cur { width: 1450px; } }
