/*--公共部分--*/ body, button, input, select, textarea { font: 14px/1.5 Arial, 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; color: #333; } table { border-collapse: collapse; border-spacing: 0; } table th, table td { border: 1px solid #ccc; } *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background-repeat: no-repeat; } article, aside, footer, header, nav, section { display: block; } 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; -moz-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 { } textarea { background:#fff; overflow: auto; vertical-align: top; width: 100%; } 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; -moz-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 { font-size: 0; } .fl { float: left; } .fr { float: right; margin-top: 11px; margin-right: 5px; } .show { } .hide { display: none !important; } .commonweb { padding: 0px 15px; } .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; } } @media (min-width: 992px) { .commonweb { padding: 0px 40px; } .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, .col-md-13 { 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%; } .col-md-13 { width: 20%; } } @media (min-width: 1200px) { 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, .col-lg-13 { 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%; } .col-lg-13 { width:20%; } } @media (min-width: 1260px) { .commonweb { margin: 0px auto; max-width: 1200px; padding: 0; } } /* 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; -moz-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: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: -webkit-transform; -moz-transition-property: transform,-moz-transform; -moz-transition-property: transform, -moz-transform; transition-property: transform; transition-property: transform, -webkit-transform, -moz-transform, -o-transform; transition-property: transform,-webkit-transform,-moz-transform,-o-transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate(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; -moz-transition-timing-function: ease-out; -o-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; -moz-box-align: start; align-items: flex-start; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: height,-webkit-transform; transition-property: height,-webkit-transform; -o-transition-property: height,-o-transform; -moz-transition-property: transform,height,-moz-transform; transition-property: transform,height; transition-property: transform,height,-webkit-transform,-moz-transform,-o-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-pagination { position: absolute; text-align: center; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -moz-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; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-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; } /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; -moz-animation-duration: .75s; -o-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); } } @-moz-keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-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); -moz-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-transform: translate3d(0, -30px, 0); -moz-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); -moz-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); -moz-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); -moz-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @-o-keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -o-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); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -moz-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-transform: translate3d(0, -30px, 0); -moz-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); -moz-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-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); -moz-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); -moz-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-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; -moz-animation-name: flash; -o-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); } } @-moz-keyframes pulse { 0% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); -moz-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes pulse { 0% { -webkit-transform: scaleX(1); -o-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); -o-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); -moz-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-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); } } @-moz-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); -o-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); -o-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } .rubberBand { -webkit-animation-name: rubberBand; -moz-animation-name: rubberBand; -o-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); } } @-moz-keyframes shake { 0%, to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); -moz-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); -moz-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @-o-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); -moz-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); -moz-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); -moz-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-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); } } @-moz-keyframes headShake { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); -moz-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); -moz-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); -moz-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); -moz-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes headShake { 0% { -webkit-transform: translateX(0); -o-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); -o-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); -moz-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); -moz-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); -moz-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); -moz-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; -moz-animation-name: headShake; -o-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); } } @-moz-keyframes swing { 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes swing { 20% { -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-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); } } @-moz-keyframes tada { 0% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); -moz-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); -moz-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); -moz-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); -moz-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes tada { 0% { -webkit-transform: scaleX(1); -o-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); -o-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); -moz-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); -moz-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); -moz-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); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-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; } } @-moz-keyframes wobble { 0% { -webkit-transform: none; -moz-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); -moz-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); -moz-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); -moz-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); -moz-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); -moz-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes wobble { 0% { -webkit-transform: none; -o-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; -o-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); -moz-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); -moz-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); -moz-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); -moz-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); -moz-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-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); } } @-moz-keyframes jello { 0%, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); -moz-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -moz-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @-o-keyframes jello { 0%, 11.1%, to { -webkit-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); -o-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); -moz-transform: skewX(0.39063deg) skewY(0.39063deg); -o-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -moz-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; -moz-animation-name: jello; -o-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-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); } } @-moz-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-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); -moz-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); -moz-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); -moz-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); -moz-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); -moz-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -o-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); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -moz-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); -moz-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); -moz-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); -moz-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); -moz-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-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; } } @-moz-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-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); -moz-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); -moz-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); -moz-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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; -o-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -moz-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); -moz-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); -moz-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-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; } } @-moz-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-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); -moz-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); -moz-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); -moz-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); -moz-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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; -o-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -moz-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); -moz-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); -moz-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); -moz-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-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; } } @-moz-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-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); -moz-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); -moz-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); -moz-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); -moz-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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; -o-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -moz-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); -moz-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); -moz-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); -moz-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-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); } } @-moz-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-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); -moz-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } @-o-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-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); -moz-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-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); } } @-moz-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -moz-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); -moz-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); -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-o-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); -moz-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); -moz-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); -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-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); } } @-moz-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-o-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); -moz-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-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); } } @-moz-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); -moz-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -moz-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @-o-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); -moz-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -moz-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-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); } } @-moz-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); -moz-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -moz-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @-o-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); -moz-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -moz-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-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); } } @-moz-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-o-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); -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-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; } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); -moz-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); -moz-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-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; } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -moz-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -moz-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(15px, 0, 0); -moz-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(15px, 0, 0); -moz-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-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; } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -moz-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -moz-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 15px, 0); -moz-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 15px, 0); -moz-transform: translate3d(0, 15px, 0); transform: translate3d(0, 15px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-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; } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; -o-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-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); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-o-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); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-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); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-o-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); -moz-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-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); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-o-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); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-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); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -moz-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @-o-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); -moz-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-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); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-o-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); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-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); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -moz-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @-o-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); -moz-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-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); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @-o-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); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-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); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-o-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); -moz-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-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; } } @-moz-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); -moz-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%, 40% { -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%, 80% { -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -moz-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); -moz-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%, 40% { -webkit-animation-timing-function: ease-out; -o-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; -o-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; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); -moz-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%, 40% { -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%, 80% { -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -moz-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); -moz-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -moz-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; -moz-animation-name: flip; -o-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); } } @-moz-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); -moz-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); -moz-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); -moz-transform: perspective(400px); transform: perspective(400px); } } @-o-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; -o-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); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); -moz-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); -moz-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); -moz-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -o-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); } } @-moz-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); -moz-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); -moz-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); -moz-transform: perspective(400px); transform: perspective(400px); } } @-o-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; -o-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); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); -moz-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); -moz-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); -moz-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-animation-name: flipInY; -o-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; } } @-moz-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); -moz-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); -moz-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-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); -moz-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); -moz-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -moz-animation-name: flipOutX; -o-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-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; } } @-moz-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); -moz-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); -moz-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-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); -moz-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); -moz-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-animation-name: flipOutY; -o-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; } } @-moz-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); -moz-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); transform: skewX(20deg); } 60%, 80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); -moz-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; -moz-transform: none; transform: none; opacity: 1; } } @-o-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); -o-transform: skewX(20deg); transform: skewX(20deg); } 60%, 80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); -o-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; -o-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); -moz-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -o-transform: skewX(20deg); transform: skewX(20deg); } 60%, 80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); -moz-transform: skewX(-5deg); -o-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-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; } } @-moz-keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); -moz-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @-o-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); -moz-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-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; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%, to { -webkit-transform-origin: center; } to { -moz-transform-origin: center; transform-origin: center; -webkit-transform: none; -moz-transform: none; transform: none; opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%, to { -webkit-transform-origin: center; } to { -o-transform-origin: center; transform-origin: center; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%, to { -webkit-transform-origin: center; } to { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-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; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -moz-transform: none; transform: none; opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-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; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -moz-transform: none; transform: none; opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-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; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -moz-transform: none; transform: none; opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-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; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -moz-transform: none; transform: none; opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -o-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-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; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center; transform-origin: center; opacity: 1; } 0%, to { -webkit-transform-origin: center; } to { -moz-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center; transform-origin: center; opacity: 1; } 0%, to { -webkit-transform-origin: center; } to { -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; transform-origin: center; opacity: 1; } 0%, to { -webkit-transform-origin: center; } to { -webkit-transform-origin: center; -moz-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-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; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-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; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-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; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-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; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-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; } } @-moz-keyframes hinge { 0% { -moz-transform-origin: top left; transform-origin: top left; } 0%, 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); transform: rotate(80deg); -moz-transform-origin: top left; transform-origin: top left; } 40%, 80% { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); -moz-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform-origin: top left; transform-origin: top left; } 0%, 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -o-transform-origin: top left; transform-origin: top left; } 40%, 80% { -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-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; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 0%, 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40%, 80% { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); -moz-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-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; } } @-moz-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); -moz-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } } @-o-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; -o-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); -moz-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-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); } } @-moz-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); -moz-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @-o-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); -moz-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-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; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-o-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); -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -o-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); } } @-moz-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-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); -moz-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-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); -o-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); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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; -moz-animation-name: zoomInDown; -o-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); } } @-moz-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-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); -moz-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-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); -o-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); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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; -moz-animation-name: zoomInLeft; -o-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); } } @-moz-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-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); -moz-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-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); -o-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); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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; -moz-animation-name: zoomInRight; -o-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 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); } } @-moz-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-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); -moz-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInUp { 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); -o-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); -o-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, 1000px, 0); -moz-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); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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; -moz-animation-name: zoomInUp; -o-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; } } @-moz-keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%, to { opacity: 0; } } @-o-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); -moz-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; -moz-animation-name: zoomOut; -o-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); } } @-moz-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-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); -moz-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); -moz-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; -moz-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-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); -o-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; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-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); -moz-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; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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; -moz-animation-name: zoomOutDown; -o-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; } } @-moz-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-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); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; transform-origin: left center; } } @-o-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; -o-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); -moz-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); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; -moz-animation-name: zoomOutLeft; -o-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; } } @-moz-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-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); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; transform-origin: right center; } } @-o-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; -o-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); -moz-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); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; -moz-animation-name: zoomOutRight; -o-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); } } @-moz-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-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); -moz-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); -moz-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; -moz-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-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); -o-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; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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); -moz-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); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-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); -moz-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; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-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; -moz-animation-name: zoomOutUp; -o-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); } } @-moz-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } @-o-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); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } .slideInDown { -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -o-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); } } @-moz-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } @-o-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); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -o-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); } } @-moz-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } @-o-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); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } .slideInRight { -webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -o-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); } } @-moz-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } @-o-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); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } } .slideInUp { -webkit-animation-name: slideInUp; -moz-animation-name: slideInUp; -o-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); } } @-moz-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-o-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); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; -moz-animation-name: slideOutDown; -o-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); } } @-moz-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-o-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); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -o-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); } } @-moz-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-o-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); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -o-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); } } @-moz-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @-o-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); -moz-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); -moz-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; -moz-animation-name: slideOutUp; -o-animation-name: slideOutUp; animation-name: slideOutUp; } header { height: 60px; } .header { width: 100%; height: 60px; position: fixed; top: 0; left: 0; z-index: 50; padding: 7px 0; border-bottom: 1px solid #ddd; background-color: #fff; } .logo { display: block; padding: 8px 0; } .logo img { display: block; } .header .ctrl { padding: 9px 0; vertical-align: middle; } .search-icon { width: 35px; height: 35px; display: inline-block; vertical-align: middle; background: url(../images/search.png) center center no-repeat; -o-background-size: 20px; background-size: 20px; margin-right: 15px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .language { width: 25px; height: 25px; display: inline-block; vertical-align: middle; background: url(../images/language.png) center center no-repeat; margin-right: 15px; margin-top: 1px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .language-wrap { width: 100%; position: fixed; left: 0; top: 60px; z-index: 50; background-color: #f2f2f2; display: none; } .language-wrap a { display: block; font-size: 16px; padding: 15px 20px; border-bottom: 1px solid #ddd; color: #fff; } .header-search { width: 100%; padding: 15px 10px; position: fixed; left: 440px; top: 0px; z-index: 50; background-color: #f2f2f2; display: none; } .header-search form { position: relative; padding-right: 60px; -webkit-border-radius: 3px; border-radius: 3px; overflow: hidden; } .header-search input { height: 40px; line-height: 40px; font-size: 14px; display: block; } .header-search input[type=text] { width: 100%; padding: 0 10px; } .header-search input[type=submit] { width: 60px; text-align: center; position: absolute; right: 0; top: 0; z-index: 1; background-color: #01868b; color: #fff; } .nav-btn { width: 22px; height: 20px; position: relative; display: inline-block; vertical-align: middle; } .nav-btn span { width: 22px; height: 3px; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; position: absolute; top: 50%; left: 0; background-color:#fff; margin-top: -2px; } .nav-btn span:first-child { content: ""; top: 0; left: 0; margin-top: 0; } .nav-btn span:last-child { content: ""; top: auto; bottom: 0; left: 0; } .nav-btn.on span { opacity: 0; } .nav-btn.on span:first-child { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 8px; opacity: 1; } .nav-btn.on span:last-child { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 10px; opacity: 1; } .nav { width: 100%; vertical-align: middle; position: fixed; top:103px; left: 0; bottom: 0; z-index: 100; background-color: #fff; overflow-x: hidden; overflow-y: auto; padding-bottom: 20px; display: none; } .nav a { display: inline-block; color: #333; padding: 0 20px; font-size: 16px; width: 100%; } .nav .subnav { padding: 0 35px 15px; background-color: #fff; } .nav .subnav a { color: #000; font-size: 14px; padding: 12px 10px; } .nav i { padding: 14px 0; display: block; position: relative; font-style: normal; transition: all 0.65s; box-shadow: 0px 0px 0px 0px; width: 100%; box-sizing: border-box } .nav i:hover { box-sizing: border-box } .nav .bar { width: 0; height: 3px; background-color: #124bbe; position: absolute; left: 0; bottom: 0; z-index: 1; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; display: none; } .subnav .item{border-bottom: 1px solid #fff} .nav li { border-bottom: 1px solid #ddd; text-align: left; position: relative; width: 100%; float: left; } .nav .subnav { display: none; } .nav li { position: relative; } .nav li .showicon { position: absolute; top: 0; right: 0px; width: 30%; height: 100%; z-index: 3; display: none; } .nav li .showicon:after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid #999; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); right: 20px; top: 14px; } @media (min-width: 1024px) { .nav{position: static;} } @media (min-width: 1260px) { header, .header { height:80px; } .header .ctrl { padding: 0; } .header .commonweb { max-width: 1400px; padding: 0 20px; } .logo { padding: 28px 0; } .logo img { } .nav li { } .nav a { font-size: 18px; line-height: 24px; padding: 0 25px; } .wt .nav i {padding: 0px;} .nav i { } .search-icon { width: 35px; height: 35px; -o-background-size: auto; background-size: auto; } .nav li h4:after{bottom:0;} } @media (min-width: 1800px) { .header .commonweb { padding: 0; } } .banner { position: relative; } .banner img { width: 100%; display: block; } .banner .banner-dot { width: 100%; position: absolute; bottom: 5px; left: 0; z-index: 30; text-align: center; } .banner .banner-dot span { width: 20px; height: 20px; background: none; position: relative; -webkit-border-radius: 100%; border-radius: 100%; vertical-align: top; margin: 0 2px; } .banner .banner-dot span:after { content: ''; display: block; width: 6px; height: 6px; position: absolute; left: 50%; top: 50%; background-color: #fff; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 100%; border-radius: 100%; } .banner .banner-dot span:before { content: ''; display: block; width: 6px; height: 6px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 100%; border-radius: 100%; border: 1px solid #fff; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .banner .banner-dot .swiper-pagination-bullet-active:before { width: 100%; height: 100%; } @media (min-width: 1260px) { .banner .banner-dot { bottom: 27px; } } .inTitle dt { line-height: 26px; } .inTitle dt span { color: #cccccc; display: block; font-family:"Titillium"; letter-spacing:-1px; font-style:italic; } .inTitle dd { padding-top: 8px; } .inTitle dd a { width: 90px; height: 36px; line-height: 36px; background-color: #bf0000; display: block; color: #fff; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; font-family:Montserrat; } .inTitle .text { color: #929292; } .inResearch { padding: 30px 0; } .inResearch li { padding-bottom: 30px; } .inResearch .switch { padding-top: 20px; white-space: nowrap; overflow-y: hidden; overflow-x: auto; } .inResearch .switch a { min-width: 98px; padding: 0 10px; height: 38px; line-height: 38px; display: inline-block; vertical-align: top; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inResearch .switch .on { background-color: #bf0000; color: #fff; } .inResearch .tab { padding-top: 20px; } .inResearch .img { -webkit-border-radius: 5px; border-radius: 5px; } .inResearch img { width: 100%; display: block; } .inResearch .article { position: relative; z-index: 1; max-width: 90%; margin: 0 auto; background-color: #fff; margin-top: -30px; -webkit-border-radius: 5px; border-radius: 5px; padding: 20px 30px; border: 1px solid #bf0000; -webkit-box-shadow: 0 0 25px 2px rgba(181, 178, 178, 0.1); box-shadow: 0 0 25px 2px rgba(181, 178, 178, 0.1); } .inResearch h3 { padding-bottom: 5px; } .inResearch .desc { color: #808080; } .inResearch .td { display: none; } .inResearch .td:first-child { display: block; } .inResearch .thumb { display: block; } @media (min-width: 768px) { .inTitle dt { line-height: 36px; } .inTitle dt span { display: inline-block; padding-left: 10px; } .inTitle dd { padding-top: 0; } .inTitle .text { padding-top: 10px; } .inResearch li { width: 33.3333%; float: left; padding: 0 5px; } } @media (min-width: 1260px) { .inResearch { padding: 60px 0; } .inResearch .switch { padding-top: 35px; } .inResearch .switch a:hover { color: #fff; background-color: #bf0000; } .inResearch .tab { padding-top: 30px; } .inResearch ul { margin: 0 -15px; } .inResearch li { padding: 0 15px; } .inResearch .img{ max-height:255px; display:block; } .inResearch .article { position: relative; padding: 45px 45px 50px; border-color: transparent; border-width: 2px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inResearch .article:after { content: ''; display: block; width: 60px; height: 60px; background: #fff url(../images/icon14.png) center center no-repeat; border: 2px solid #bf0000; -webkit-border-radius: 100%; border-radius: 100%; position: absolute; bottom: -50px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inResearch .desc { line-height: 30px; font-size: 16px; } .inResearch .thumb:hover .article { border-color: #bf0000; box-shadow: 0 0 25px 2px rgba(191, 0, 0, 0.1); } .inResearch .thumb:hover .article:after { opacity: 1; bottom: -28px; } } .inManage { padding: 30px 0; background-color: #f2f2f2; } .inManage img { width: 100%; display: block; } .inManage .list { padding-top: 20px; } .inManage .list dl { padding-bottom: 15px; } .inManage .list dt { position: relative; } .inManage .list dt a { display: block; } .inManage .list h3 { width: 100%; position: absolute; bottom: 0; left: 0; text-align: center; color: #fff; padding-bottom: 5px; font-weight: bold; } .inManage .list dd { padding: 10px 0; line-height: 26px; } .inManage .list dd p { overflow: hidden; } .inManage .list dd span { color: #a4a8ae; float: right; font-family: Montserrat; } .inManage .list dd a { max-width: 60%; float: left; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } @media (min-width: 768px) { .inManage { padding-bottom: 10px; } .inManage .list { margin: 0 -10px; } } @media (min-width: 1260px) { .inManage { padding-top: 70px; padding-bottom: 50px; } .inManage .list { margin: 0 -17px; padding-top: 37px; } .inManage .list dl { padding: 0; } .inManage .list dd { line-height: 34px; padding-top: 20px; } .inManage .list dd a { max-width: 70%; font-size: 16px; } .inManage .list h3 { padding-bottom: 10px; } } .inNews { padding: 30px 0; } .inNews img { width: 100%; display: block; } .inNews .image { padding-top: 20px; } .inNews .image .thumb { background-color: #f7f7f7; padding: 20px 15px; } .inNews .image .date { color: #a4a8ae; font-family: Montserrat; } .inNews .image h3 { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; color: #3f4144; } .inNews .image .desc { color: #8d929a; display: -webkit-box; height: 52px; line-height: 26px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .inNews .image .more { width: 120px; height: 34px; line-height: 34px; background: #c10808 url(../images/icon15.png) 83px 10px no-repeat; color: #fff; display: block; -webkit-border-radius: 3px; border-radius: 3px; padding-left: 25px; margin-top: 10px; font-family: Montserrat; } .inNews .list { padding-top: 30px; } .inNews .list ul { border-top: 1px solid #f2f2f2; } .inNews .list li { border-bottom: 1px solid #f2f2f2; padding: 15px 0; } .inNews .list h4 { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .inNews .list .date { display: block; padding: 2px 0; } .inNews .list .date { color: #a4a8ae; font-family: Montserrat; } .inNews .list .desc { color: #808080; display: -webkit-box; height: 52px; line-height: 26px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (min-width: 768px) { .inNews .image { width: 45%; float: left; } .inNews .image h3 { padding-bottom: 5px; } .inNews .image .thumb { padding-bottom: 30px; } .inNews .image .more { margin-top: 15px; } .inNews .list { width: 50%; float: right; padding-top: 20px; } .inNews .list li { padding: 13px 0; } .inNews .list .desc { height: 48px; } } @media (min-width: 1024px) { .inNews .list li { padding: 20px 0; } } @media (min-width: 1260px) { .inNews { padding: 60px 0 125px; } .inNews .bd { padding-top: 15px; } .inNews .image { width: 45.5%; } .inNews .image .thumb { padding: 15px 30px 32px; } .inNews .image .desc { height: 60px; line-height: 30px; } .inNews .list ul { border-width: 2px; } .inNews .list li { border-width: 2px; position: relative; padding: 0; } .inNews .list .tit { padding-bottom: 7px; position: relative; } .inNews .list .tit:before { content: ''; display: block; width: 6px; height: 6px; background-color: #8d929a; -webkit-border-radius: 100%; border-radius: 100%; position: absolute; left: -20px; top: 10px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inNews .list h4 { float: left; max-width: 70%; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inNews .list .date { float: right; } .inNews .list .desc { width: 450px; height: 60px; line-height: 30px; font-size: 16px; } .inNews .list a { display: block; position: relative; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; padding: 35px 10px 35px 30px; } .inNews .list a:hover { -webkit-box-shadow: 0 0 8px 8px rgba(202, 202, 202, 0.1); box-shadow: 0 0 8px 8px rgba(202, 202,202, 0.1); } .inNews .list a:after { content: ''; display: block; width: 19px; height: 13px; background: url(../images/icon16.png) no-repeat; position: absolute; right: 10px; top: 60%; margin-top: 3px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inNews .list a:hover .tit:before { background-color: #bf0000; } .inNews .list a:hover h4 { color: #bf0000; } .inNews .list a:hover:after { background-image: url(../images/icon17.png); } } .inService { padding: 30px 0; background-position-x: center; } .inService .inTitle { color: #fff; } .inService .inTitle .text, .inService .inTitle dt span { color: #fff; } .inService img { width: 100%; display: block; } .inService .list { padding-top: 20px; } .inService .list li { -webkit-border-radius: 3px; border-radius: 3px; overflow: hidden; text-align: center; -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); margin-bottom: 30px; } .inService .list .tit { padding: 10px; } .inService .list h3 { font-size: 16px; } .inService .list .desc { color: #929292; } @media (min-width: 768px) { .inService .bd { margin-top: 20px; position: relative; -webkit-border-radius: 3px; border-radius: 3px; overflow: hidden; -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); background-color: #fff; } .inService .bd .img { width: 75%; } .inService .item { width: 25%; height: 100%; background-color: #fff; position: absolute; right: 0; top: 0; z-index: 1; } .inService .item a { width: 100%; height: 33.3333%; display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical; text-align: center; -webkit-transition: .5s; -o-transition: .5s; -moz-transition: .5s; transition: .5s; border-bottom:1px solid #bf0000; } .inService .item a:last-child{ border-bottom:none; } .inService .item a.on { background-color: #bf0000; color: #fff; } .inService .item a.on .desc { color: #fff; } .inService .item span { display: block; width: 100%; } .inService .item .desc { width: 100%; font-size: 16px; color: #929292; } } @media (min-width: 1260px) { .inService { padding-top: 70px; } .inService .bd { margin-top: 70px; } .inService .bd .item a { float: right; position: relative; } .inService .bd .item a:after { content: ''; display: block; width: 10px; height: 18px; background: url(../images/icon18.png) no-repeat; position: absolute; right: 50px; top: 50%; margin-top: -9px; opacity: 0; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inService .bd .item a.on { width: 117%; text-align: left; padding-left: 30px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } .inService .bd .item a.on .font20 { font-size: 24px; } .inService .bd .item a.on .desc { font-size: 20px; } .inService .bd .item a.on:after { opacity: 1; right: 30px; } } .inTeam .list { background-color: #f2f2f2; -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1); margin-top: 20px; } .inTeam ul { margin: 0 -5px; } .inTeam li { width: 50%; float: left; text-align: center; padding: 10px; } .inTeam .img { width: 112px; height: 112px; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; display: block; margin: 0 auto; } .inTeam .thumb { background-color: #fff; display: block; padding: 10px; } .inTeam h4 { padding-top: 10px; } .inTeam .desc { color: #929292; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } @media (min-width: 768px) { .inTeam li { width: 25%; } } @media (min-width: 1024px) { .inTeam .thumb { padding: 20px 10px; } } @media (min-width: 1024px) { .inTeam { padding-top: 30px; padding-bottom: 80px; } .inTeam .list { -webkit-box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.1); } .inTeam ul { margin: 0 -12px; } .inTeam li { padding: 12px; } .inTeam .thumb { padding: 35px 10px 40px; } .inTeam h4 { padding-top: 25px; padding-bottom: 5px; } .inTeam .desc { font-size: 16px; } } .inCase { background-color: #f2f2f2; padding: 30px 0 10px; margin-top: 30px; } .inCase-list { padding-top: 20px; } .inCase-list li { padding-bottom: 30px; } .inCase-list .thumb { display: block; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; } .inCase-list img { width: 100%; display: block; } .inCase-list .article { background-color: #fff; padding: 20px; } .inCase-list h4 { padding-bottom: 5px; } .inCase-list .desc { color: #808080; } .inCase-list .more { display: block; position: relative; background-color: #e6e6e6; padding: 10px 20px; } .inCase-list .more:after { content: ''; display: block; width: 14px; height: 11px; position: absolute; top: 50%; right: 20px; margin-top: -5px; background: url(../images/icon19.png) no-repeat; } .inCustomer { padding-top: 30px; padding-bottom: 30px; /*background-color: #f2f2f2; border-top: 1px solid #eaeaea;*/ } .inCustomer li { padding-bottom: 20px; } .inCustomer .thumb { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; height: 60px; padding: 0 10px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .inCustomer img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; } @media (min-width: 768px) { .inCase-list { padding-bottom: 30px; } .inCase-list ul { margin: 0 -10px; } .inCase-list li { padding-bottom: 0; } } @media (min-width: 1024px) { .inCustomer li { padding-bottom: 30px; } } @media (min-width: 1260px) { .inCase { padding-top: 65px; } .inCase-list { padding-top: 35px; padding-bottom: 57px; } .inCase-list ul { margin: 0 -15px; } .inCase-list li { padding: 0 15px; } .inCase-list .article { padding-bottom: 27px; } .inCase-list .desc { font-size: 16px; display: -webkit-box; height: 78px; line-height: 26px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .inCase-list .more { font-size: 16px; padding: 19px 20px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .inCase-list .thumb:hover { -webkit-box-shadow: 0 5px 5px 3px rgba(191, 0, 0, 0.1); box-shadow: 0 5px 5px 3px rgba(191, 0, 0, 0.1); } .inCase-list .thumb:hover .more { background-color: #bf0000; color: #fff; } .inCase-list .thumb:hover .more:after { background-image: url(../images/icon20.png); } .inCustomer { padding-top: 60px; } .inCustomer li { padding-bottom: 53px; } .inCustomer li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } .inCustomer img { -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; /*-webkit-filter: grayscale(100%); filter: grayscale(100%);*/ } } .free-evaluation { background-position: center 0; background-image: url(../images/img85.jpg); background-repeat: no-repeat; padding: 30px 20px; -webkit-border-radius: 6px; border-radius: 6px; -o-background-size: cover; background-size: cover; position: relative; z-index: 2; margin-top: 20px; } .free-conbox { color: #fff; } .free-conbox h4 { font-size: 20px; text-align: center; margin-bottom: 10px; font-weight: bold; } .free-conbox h4 br { display: none; } .free-right { color: #ffffff; } .free-list { margin-top: 20px; position: relative; } .free-list ul li { width: 100%; float: left; margin-bottom: 10px; } .free-list ul li input { width: 100%; background: #fff; height: 42px; padding-left: 20px; -webkit-border-radius: 2px; border-radius: 2px; } .free-list ul li input::-webkit-input-placeholder { color: #666; } .free-list ul li input:-moz-placeholder { color: #666; } .free-list ul li input::-moz-placeholder { color: #666; } .free-list ul li input:-ms-input-placeholder { color: #666; } .free-list .free-submit { display: block; overflow: hidden; width: 120px; height: 42px; background-color: #ffffff; -webkit-border-radius: 26px; border-radius: 26px; color: #bf0000; font-size: 16px; margin: 10px auto 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } @media (min-width: 768px) { .foot-nav li.ewm{ float:left; width:50%; text-align:center;border-bottom:none; margin-top:20px;} .foot-nav h1{ font-size:1.875rem; color:#fff; text-align:center;} .free-conbox h4 { text-align: left; } .free-conbox h4 br { display: block; } .free-list ul li { width: 33.3%; padding-right: 10px; padding-bottom: 0; } .index-contactlist li { width: 30%; } .index-contactlist li:last-child { width: 39%; } } @media (min-width: 1024px) { .free-evaluation { padding: 40px 88px 40px 100px; } .free-conbox h4 { float: left; font-size: 34px; max-width: 278px; width: 30%; } .free-right { font-size: 16px; line-height: 30px; padding-top: 2px; } .free-list { padding-right: 120px; margin-top: 20px; } .free-list ul li { width: 33.3%; padding-right: 24px; } .free-list ul li input { height: 52px; padding-left: 20px; } .free-list .free-submit { position: absolute; top: 0; right: 0; width: 120px; height: 52px; font-size: 18px; margin-top: 0; } } footer { background-color: #2b2b2b; } .foot-nav { padding: 30px 0; } .foot-nav li { color: #bababa; border-bottom: 1px solid #fff; } .foot-nav li:last-child { border-bottom: none; } .foot-nav li:last-child h4:after { display: none; } .foot-nav .box { text-align: center; display: inline-block; } .foot-nav .box img { display: block; margin-bottom: 5px;width: 145px; } .foot-nav h4 { color: #fff; padding: 10px 0; position: relative; } .foot-nav h4:after { content: '+'; width: 20px; text-align: center; font-weight: normal; font-size: 20px; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .foot-nav .on:after { content: '-'; } .foot-nav .item { padding: 5px 0 15px 10px; display: none; } .foot-nav a { color: #a6a6a6; display: block; line-height: 30px; } .foot-info { padding: 10px 0; background-color: #2b2b2b; color: #b7b7b7; text-align: center; border-top: 1px solid #3c3c3c; overflow: hidden; } .foot-info a { color: #b7b7b7; } .friend_link a{ color:#fff;} #foot-share { padding-top: 5px; } #foot-share a { width: 34px; height: 34px; float: none; margin: 0 3px; padding: 0; opacity: 1; display: inline-block; vertical-align: top; } #foot-share .bds_weixin { background: url(../images/icon21.png); } #foot-share .bds_tsina { background: url(../images/icon22.png); } #foot-share .youku { background: url(../images/icon23.png); } @media (min-width: 1024px) { .foot-nav { padding-bottom: 15px; } .foot-nav ul.clearfix:nth-of-type(1){width: 68%;} .commonweb .foot-nav { display: flex; justify-content: space-between; } .foot-nav li { padding-right: 20px; float: left; border-bottom: none; } .foot-nav li:last-child { padding-right: 0; /*float:right;*/ } .foot-nav .box { padding-top: 14px; } .foot-nav h1{ font-size:1.25rem; color:#fff;} .foot-nav .item { display: block !important; padding-left: 0; } .foot-nav h4 { padding-bottom: 0; } .foot-nav h4:after { display: none; } .foot-info { padding: 14px 0; } .foot-info .info { float: left; line-height: 34px; } .foot-info .info a { padding-left: 20px; display: inline-block; vertical-align: top; } #foot-share { float: right; padding-top: 0; } } @media (min-width: 1260px) { .foot-nav li { /* padding-right: 66px;*/ } } .ovhid { overflow: hidden; } .bold { font-weight: bold; } .ac { color: #bf0000; } .disblock { display: block; } .inblock { display: inline-block; } .font16 { font-size: 14px; } .font17, .font18 { font-size: 15px; } .font20, .font22 { font-size: 16px; } .font24, .font26, .font28 { font-size: 18px; } .font30, .font32, .font36, .font40, .font42, .font46 { font-size: 20px; } .font54 { font-size: 24px; } .font60 { font-size: 30px; } .lighter { font-weight: lighter; } .unline { text-decoration: underline; } .text-center { text-align: center; } .scale img { -webkit-transition: 1s; -o-transition: 1s; -moz-transition: 1s; transition: 1s; } .grey { color: #666; } .white { color: #fff; } .imghover img { -webkit-transition: 1s; -o-transition: 1s; -moz-transition: 1s; transition: 1s; } .center { text-align: center; } @media (min-width: 768px) { .font16 { font-size: 16px; } .font17 { font-size: 17px; } .font18, .font17 { line-height: 34px; } .font18, .font22, .font20 { font-size: 18px; } .font28, .font24, .font26 { font-size: 22px; } .font30, .font32, .font36 { font-size: 24px; } .font40, .font42 { font-size: 26px; } .font46 { font-size: 28px; } .font54 { font-size: 30px; } .distable { width: 100%; display: table; } .table-cell { display: table-cell; vertical-align: middle; } } @media (min-width: 1024px) { .font22, .font20 { font-size: 20px; } .font24 { font-size: 24px; } .font26 { font-size: 26px; } .font28 { font-size: 28px; line-height: normal; } .font40, .font42 { font-size: 30px; line-height: normal; } .font46 { font-size: 32px; } .font54 { font-size: 36px; } .md-block { display: block; } } @media (min-width: 1200px) { .font22 { font-size: 22px; } .font30 { font-size: 30px; line-height: normal; } .font32 { font-size: 32px; line-height: normal; } .font36 { font-size: 36px; line-height: normal; } .font40 { font-size: 40px; } .scale:hover img { -webkit-transform: scale(1.03, 1.03); -moz-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); -o-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); } .font42 { font-size: 42px; } .font46 { font-size: 46px; } .font54 { font-size: 54px; } .imghover:hover img { -webkit-transform: scale(1.03, 1.03); -moz-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); -o-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); } } .subbanner img { height: 150px; position: relative; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .container { padding: 0px 0; } .class-thumb { padding-bottom: 20px; } .class-thumb .tit { text-align: center; line-height: 1; cursor: pointer; } .class-thumb .tit span:after { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-left: 10px; background: url(../images/navdw.png) no-repeat center; -o-background-size: 14px auto; background-size: 14px auto; -webkit-transition: all ease .3s; -o-transition: all ease .3s; -moz-transition: all ease .3s; transition: all ease .3s; } .class-thumb .item { padding-top: 20px; } .class-thumb a { display: block; padding-left: 38px; background: url(../images/icon01.png) left center no-repeat; margin-bottom: 15px; overflow: hidden; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .class-thumb .amount { color: #666; float: right; font-size: 14px; } .class-thumb .on { background-image: url(../images/icon02.png); color: #bf0000; } .class-thumb .item { display: none; } .n-list a { display: block; background-color: #f8f5f5; } .n-list li { padding-bottom: 25px; } .n-list li img { width: 100%; display: block; } .n-list .thumb { padding: 20px; } .n-list h3 { padding-bottom: 5px; } .n-list .desc { color: #666; line-height: 26px; } .page img { max-width: 100%; margin: 0 auto; display: block; } .detail-main h2 { padding-bottom: 5px; } .detail-main .ctrl { color: #999; font-size: 16px; } .detail-main .date { font-family: "Montserrat"; } .detail-main .writer { padding-left: 20px; } .detail-article { border-top: 1px solid #e0e0e0; padding-top: 30px; margin-top: 20px; color: #666; line-height: 26px; } .detail-article h4 { color: #333; font-weight: bold; padding-top: 10px; } .detail-article img { max-width: 100%; height: auto !important; } .detail-article h5 { color: #333; padding-bottom: 10px; } #news-share { overflow: hidden; padding-top: 3px; } #news-share a { width: 33px; height: 32px; background: url(../images/icon05.png) no-repeat; margin: 0 10px 0 0; } #news-share a:last-child { margin-right: 0; } #news-share .bds_tsina { background-position-x: right; } .detail-thumb { padding-top: 30px; } .detail-thumb .ctrl { padding-bottom: 3px; border-bottom: 2px solid #bf0000; } .detail-thumb .ctrl a { color: #808080; font-size: 14px; font-family: "Montserrat"; } .detail-thumb ul { padding-top: 20px; } .detail-thumb li a { margin-bottom: 8px; color: #4c4c4c; position: relative; display: block; padding-left: 14px; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .detail-thumb li a:before { content: ''; display: block; width: 5px; height: 5px; background-color: #939393; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -2px; } .m-tit { text-align: center; padding-bottom: 20px; } @media (min-width: 768px) { .container { } .class-thumb { } .n-list ul { padding-bottom: 10px; } .n-list li { padding-bottom: 30px; } .n-list li img { width: 41.41%; float: right; } .n-list a { overflow: hidden; } .n-list .thumb { width: 58.59%; float: left; padding: 40px 30px; } .n-list h3 { padding-bottom: 10px; } } @media (min-width: 1024px) { .subbanner img { width: 100%; height: auto; } .container { } .class-thumb { width: 30%; float: left; } .class-thumb .tit { display: none; } .class-thumb .item { display: block !important; padding-top: 0; } .m-tit { padding-bottom: 25px; } .n-list { width: 61.25%; float: right; } .n-list .thumb { padding: 20px 30px; } .n-list h3 { font-size: 20px; } .crumb { padding-top: 25px; } .crumb .home { width: 16px; height: 21px; display: inline-block; background: url(../images/icon03.png) center center no-repeat; } .crumb .cur { color: #666; padding-left: 11px; background: url(../images/icon04.png) left center no-repeat; margin-left: 5px; display: inline-block; vertical-align: top; } } @media (min-width: 1260px) { .container { } .detail-container { padding-bottom: 50px; } .m-tit { padding-bottom: 65px; } .n-list ul { padding-bottom: 30px; } .n-list .thumb { padding: 50px 40px 0; } .n-list h3 { line-height: 34px; padding-bottom: 13px; } .n-list .desc { line-height: 30px; } .class-thumb a { margin-bottom: 25px; } .detail-main { width: 67.75%; float: left; } .detail-main h2 { padding-bottom: 25px; } .detail-main .ctrl { line-height: 35px; } .detail-main h5 { padding-bottom: 20px; } #news-share { float: right; } .detail-article { padding-top: 60px; line-height: 30px; } .detail-thumb { width: 28.5%; float: right; padding-top: 0; } .detail-thumb a { -webkit-transition: ease color 0.2s; -o-transition: ease color 0.2s; -moz-transition: ease color 0.2s; transition: ease color 0.2s; } .detail-thumb .ctrl { padding-bottom: 13px; } .detail-thumb .ctrl a { padding-top: 5px; } .detail-thumb a:hover { color: #bf0000; } .detail-thumb ul { padding-top: 33px; } .detail-thumb li a { margin-bottom: 13px; } } .m-list ul { padding-bottom: 30px; } .m-list li { border-bottom: 1px solid #e0e0e0; padding: 30px 0 20px; } .m-list li a { overflow: hidden; display: block; } .m-list li:first-child { padding-top: 0; } .m-list li img { width: 100%; } .m-list h3 { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; margin: 10px 0 5px; font-weight: bold; -webkit-transition: .2s; -o-transition: .2s; -moz-transition: .2s; transition: .2s; } .m-list .desc { color: #666; line-height: 26px; } @media (min-width: 768px) { .m-list li { padding: 30px 0; } .m-list h3 { margin-bottom: 15px; } .m-list .img { float: left; margin-right: 28px; } .m-list .desc { display: -webkit-box; height: 90px; line-height: 30px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } } @media (min-width: 1024px) { .m-list { width: 61.25%; float: right; } } @media (min-width: 1260px) { .m-list ul { padding-bottom: 55px; } .m-list .img { width: 34.4%; } .m-list a:hover { color: #bf0000; } } .newsA-topnews-swiper { margin-bottom: 15px; } .newsA-topnews-swiper .thumb { overflow: hidden; } .newsA-topnews-swiper .thumb img { width: 100%; } .newsA-topnews-swiper a { display: block; background-color: #f2f2f2; } .newsA-topnews-swiper .conent { padding: 10px 15px 40px; } .newsA-topnews-swiper .title { margin-bottom: 2px; font-size: 18px; line-height: 30px; color: #333; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .newsA-topnews-swiper .date { color: #bf0000; font-family: "Montserrat"; padding-bottom: 2px; } .newsA-topnews-swiper .desc { font-size: 14px; line-height: 24px; color: #808080; display: -webkit-box; height: 72px; line-height: 24px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .newsA-topnews-swiper .more { min-width: 90px; display: inline-block; vertical-align: top; font-size: 14px; line-height: 32px; color: #fff; background-color: #bf0000; font-family: "Montserrat"; text-align: center; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 10px; } .newsA-topnews-swiper .newsA-pages { position: absolute; left: 0; bottom: 15px; z-index: 10; width: 100%; font-size: 0; line-height: 0; text-align: center; } .newsA-topnews-swiper .newsA-pages span { opacity: 1; display: inline-block; vertical-align: top; width: 10px; height: 10px; margin: 0 5px; background-color: #d9d9d9; } .newsA-topnews-swiper .newsA-pages .swiper-pagination-bullet-active { background-color: #de0012; } @media (min-width: 1024px) { .m-tit { text-align: left; } .newsA-topnews-swiper { margin-bottom: 47px; } .newsA-topnews-swiper .thumb { float: left; width: 65%; } .newsA-topnews-swiper .thumb img { -webkit-transition: -webkit-transform ease .7s; transition: -webkit-transform ease .7s; -o-transition: -o-transform ease .7s; -moz-transition: transform ease .7s, -moz-transform ease .7s; transition: transform ease .7s; transition: transform ease .7s, -webkit-transform ease .7s, -moz-transform ease .7s, -o-transform ease .7s; } .newsA-topnews-swiper a { overflow: hidden; zoom: 1; } .newsA-topnews-swiper a:hover .title { color: #de0012; } .newsA-topnews-swiper a:hover img { -webkit-transform: scale(1.04); -moz-transform: scale(1.04); -ms-transform: scale(1.04); -o-transform: scale(1.04); transform: scale(1.04); } .newsA-topnews-swiper .conent { overflow: hidden; zoom: 1; padding: 40px 25px 35px; } .newsA-topnews-swiper .title { margin-bottom: 10px; font-size: 22px; max-height: 64px; line-height: 32px; display: -webkit-box; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; } .newsA-topnews-swiper .desc { margin-bottom: 24px; height: 120px; line-height: 24px; -webkit-line-clamp: 5; } .newsA-topnews-swiper .more { margin-top: 0; } .newsA-topnews-swiper .newsA-pages { left: auto; right: 36%; bottom: 15px; width: auto; text-align: left; padding-left: 25px; } } @media (min-width: 1260px) { .newsA-topnews-swiper .conent { padding: 60px 38px 50px; } .newsA-topnews-swiper .thumb { width: 62.5%; } .newsA-topnews-swiper .title { font-size: 24px; max-height: 72px; line-height: 36px; display: -webkit-box; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .newsA-topnews-swiper .desc { height: 120px; line-height: 30px; -webkit-line-clamp: 4; font-size: 16px; } .newsA-topnews-swiper .date { padding-bottom: 13px; } .newsA-topnews-swiper .more { margin-top: 3px; } .newsA-topnews-swiper .newsA-pages { padding-left: 38px; right: 40%; } } .R-list li { padding-bottom: 30px; } .R-list li img { width: 100%; display: block; } .R-list .img { -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .R-list .date { font-family: "Montserrat"; color: #999999; } .R-list .thumb { padding: 20px 10px; -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); } .R-list .desc { color: #666; display: -webkit-box; height: 60px; line-height: 30px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .R-list h3 { padding: 5px 0; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } @media (min-width: 768px) { .R-list .thumb { padding: 20px 20px 30px; } } @media (min-width: 768px) { .R-list .thumb { padding: 20px 20px 30px; } } @media (min-width: 1260px) { .R-list ul { margin: 0 -21px 20px; } .R-list li { padding: 0 21px 45px; } .R-list .thumb { padding: 27px 28px 50px; } } .menu { max-width: 788px; border-bottom: 1px solid #e0e0e0; margin-bottom: 30px; white-space: nowrap; overflow-x: auto; overflow-y: visible; } .menu a { color: #666; white-space: nowrap; display: inline-block; padding-bottom: 10px; margin-right: 20px; position: relative; } .menu a:after { content: ''; display: block; width: 100%; height: 2px; position: absolute; bottom: -1px; left: 0; z-index: 1; -webkit-transition: .2s ease background-color; -o-transition: .2s ease background-color; -moz-transition: .2s ease background-color; transition: .2s ease background-color; } .menu a:hover:after, .menu a.on:after { background-color: #bf0000; } .menu a.on, .menu a:hover { color: #bf0000; } .partner ul { margin: 0 -10px 10px; } .partner li { margin-bottom: 20px; } .partner li img { max-width: 80%; max-height: 100%; display: block; margin: 0 auto; } .partner .thumb { padding: 10px; height: 80px; border: 1px solid #ededed; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 768px) { .menu { overflow: visible; } .partner ul { margin-bottom: 20px; } } @media (min-width: 1024px) { .menu { margin-bottom: 40px; } .menu a { padding-bottom: 15px; } .partner .thumb { height: 130px; } } @media (min-width: 1260px) { .menu { margin-bottom: 60px; margin-top: -28px; } .menu a { margin-right: 30px; } .partner ul { margin-bottom: 15px; } .partner li { margin-bottom: 40px; } .partner .thumb { height: 180px; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .partner .thumb:hover { -webkit-box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.1); } } .heartfelt .thumb { -webkit-box-shadow: 0 0 20px 3px rgba(136, 136, 136, 0.1); box-shadow: 0 0 20px 3px rgba(136, 136, 136, 0.1); padding: 60px 30px 30px; } .heartfelt li { padding-top: 45px; padding-bottom: 40px; position: relative; } .heartfelt li:nth-child(2n) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } .heartfelt .photo { width: 80px; height: 80px; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; display: block; position: absolute; left: 30px; top: 0; } .heartfelt img { max-width: 100%; } .heartfelt .desc { color: #666; } .heartfelt .name { padding-top: 20px; } @media (min-width: 768px) { .heartfelt li { padding-top: 50px; } .heartfelt .thumb { padding-top: 70px; } .heartfelt .photo { width: 100px; height: 100px; left: 40px; } } @media (min-width: 1260px) { .heartfelt li { padding: 60px 30px; } .heartfelt .thumb { padding: 70px 50px 75px; position: relative; } .heartfelt .photo { left: 80px; } .heartfelt .desc { line-height: 26px; } .heartfelt .name { position: absolute; bottom: 37px; left: 50px; } } .expert-list li { margin-bottom: 40px; } .expert-list li:last-child { margin-bottom: 20px; } .expert-list .thumb { -webkit-transition: .3s ease; -o-transition: .3s ease; -moz-transition: .3s ease; transition: .3s ease; display: block; -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1); padding: 20px; } .expert-list .article:before { content: ''; display: block; width: 100px; height: 1px; background-color: #dedede; margin: 10px 0; } .expert-list .desc { color: #7f7f7f; padding-top: 10px; } .expert-list .more { min-width: 90px; line-height: 35px; padding: 0 10px; color: #fff; background-color: #bf0000; display: inline-block; text-align: center; -webkit-border-radius: 3px; border-radius: 3px; margin-top: 20px; } .menu.full { max-width: 100%; } .expert-ctrl { color: #4c4c4c; border-bottom: 1px solid #dcdce5; padding-bottom: 20px; margin-bottom: 20px; } .expert-ctrl h2 { padding-bottom: 10px; } .expert-article { line-height: 26px; } .expert-article h3 { color: #333; padding-bottom: 10px; } .case-list { padding-top: 30px; } .case-list ul { padding-top: 10px; } .case-list li { padding-bottom: 30px; } .case-list .img { -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .case-list img { width: 100%; } .case-list .article { padding: 20px; border: 1px solid #dcdce5; } .case-list .desc { line-height: 26px; padding-top: 5px; } @media (min-width: 768px) { .expert-article { line-height: 30px; } .expert-ctrl { padding-bottom: 30px; margin-bottom: 30px; } .expert-ctrl .post { line-height: 30px; } .case-list ul { margin: 0 -5px; } .case-list li { padding: 0 5px 20px; } } @media (min-width: 1024px) { .case-list { padding-top: 50px; } .case-list ul { margin: 0 -15px; padding-top: 20px; } .case-list li { padding: 0 15px 10px; } } @media (min-width: 1260px) { .menu.full a { margin-right: 57px; } .expert-list li { margin-bottom: 25px; } .expert-list .thumb { padding-left: 167px; position: relative; padding-right: 370px; -webkit-box-shadow: none; box-shadow: none; } .expert-list .article { padding-left: 25px; } .expert-list .article:before { display: none; } .expert-list h3 { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .expert-list .name { width: 167px; border-right: 1px solid #dedede; line-height: 80px; position: absolute; left: 0; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .2s color ease; -o-transition: .2s color ease; -moz-transition: .2s color ease; transition: .2s color ease; } .expert-list .desc { display: -webkit-box; height: 60px; line-height: 30px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-top: 0; margin-top: 10px; } .expert-list .more { position: absolute; right: 45px; top: 50%; margin-top: -18px; } .expert-list li:hover .name { color: #bf0000; } .expert-list li:hover .thumb { -webkit-box-shadow: 0 0 5px 3px rgba(180, 180, 180, 0.1); box-shadow: 0 0 5px 3px rgba(180, 180, 180, 0.1); } .expert-list li:last-child { margin-bottom: 0; } .expert-ctrl { padding-bottom: 43px; margin-bottom: 35px; } .expert-ctrl h2 { line-height: 1; padding-bottom: 30px; } .expert-article h3 { padding-top: 28px; padding-bottom: 25px; } .case-list { padding-top: 70px; } .case-list ul { padding-top: 40px; } .case-list .article { padding: 30px 30px 35px; } .case-list .desc { line-height: 30px; } } .advisory-list dl { border-top: 2px solid #c21313; padding: 20px 15px; -webkit-box-shadow: 0 5px 25px 3px rgba(156, 156, 156, 0.1); box-shadow: 0 5px 25px 3px rgba(156, 156, 156, 0.1); margin-bottom: 20px; } .advisory-list dd { padding-top: 5px; line-height: 30px; } .advisory-list .more{ padding:1px 15px; border:1px solid #ccc; display:inline-block; color:#666; font-size:14px; vertical-align:top; margin-top:10px; } .advisory-hd { background-color: #f9f9f9; padding: 40px 15px; margin-top: 50px; } .advisory-hd h3 { color: #c7000b; } .advisory-hd h5 { color: #222; } .advisory-hd .article { padding-top: 20px; line-height: 30px; } .advisory-hd .section { padding-bottom: 40px; } .advisory-hd .section:last-child { padding-bottom: 0; } @media (min-width: 1024px) { .service { width: 75%; float: right; } .service-thumb { width: 25%; } .advisory-list .more{ padding:5px 25px; } .expert-list ul{ padding-bottom:30px; } } @media (min-width: 1260px) { .advisory-list { padding-bottom: 15px; margin-bottom: 0; } .advisory-list dl { padding: 55px 47px 48px; border-width: 4px; margin-bottom: 60px; } .advisory-list dl:hover dt a { color:#bf0000; } .advisory-list dd { line-height: 36px; padding-top: 15px; } .advisory-hd { padding: 50px 22px 47px 45px; margin-top: 0; } .advisory-hd .article { padding-top: 45px; line-height: 36px; } .advisory-hd .section { padding-bottom: 60px; } .container.botnone { padding-bottom: 0; } .advisory-list .more{ padding: 3px 20px; font-size:16px; margin-top:25px; } .advisory-list .more:hover{ color:#fff; background-color:#bf0000; border-color:#bf0000; } } .insrecruit-list { padding: 20px 0 0; } .insrecruit-list ul { padding: 0 0 20px; } .insrecruit-list li { border-radius: 10px; border:1px solid rgba(0,0,0,.125); margin-bottom: 30px; width:100%; float:left; } .insrecruit-list li:hover .rectue-top, .insrecruit-list li.cur .rectue-top { background-color: rgba(0,0,0,.03); border-bottom:1px; border:none; } .insrecruit-list li:hover .rectue-top span, .insrecruit-list li.cur .rectue-top span { color: #000; } .insrecruit-list li:hover .rectue-top .date, .insrecruit-list li.cur .rectue-top .date { background-image: url(../images/icon07.png); } .insrecruit-list li.cur .rectue-top .icon em { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: #fff; } .insrecruit-list .rectue-top { border: 1px solid #e5e5e5; padding: 10px 30px 5px 10px; color: #323232; font-size: 0; position: relative; -webkit-border-radius: 3px; border-radius: 3px; } .insrecruit-list .rectue-top span { display: inline-block; vertical-align: top; *display: inline; *zoom: 1; vertical-align: middle; margin-right: 20px; margin-bottom: 5px; width: 40%; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; color: #323232; } .insrecruit-list .rectue-top .pnum, .insrecruit-list .rectue-top .loac { color: #929292; } .insrecruit-list .rectue-top .date { background: url(../images/icon06.png) no-repeat 0 center; padding-left: 28px; font-family: Montserrat; color: #808080; } .insrecruit-list .rectue-top .icon { width: 20px; height: 20px; position: absolute; right: 10px; top: 10px; margin: 0; } .insrecruit-list .rectue-top .icon em { position: absolute; background: #bfbfbf; width: 20px; height: 1px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; left: 0; top: 50%; } .insrecruit-list .rectue-top .icon em:nth-child(2) { width: 1px; height: 20px; left: 50%; top: 0; } .insrecruit-list .rectue-min { padding: 20px 10px; color: #757575; display: none; } .insrecruit-list .rectue-min .desc { padding: 0 0 10px; } .insrecruit-list .rectue-min h3 { color: #333333; padding: 0 0 5px; } .insrecruit-list .rectue-send { padding: 20px 0 0; margin-top: 80px; border-top:dashed 1px #ccc } .insrecruit-list .rectue-send a { display: inline-block; vertical-align: top; color: #fff; background: #2d8eb4; -webkit-transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; transition: all .3s; line-height: 45px; text-align: center; min-width: 160px; -webkit-border-radius: 3px; border-radius: 3px; padding: 0 15px; } @media (min-width: 1024px) { .insrecruit-list { padding: 0; } .insrecruit-list ul { padding: 0 0 30px; } .insrecruit-list .rectue-top { -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; cursor: pointer; padding: 26px 40px 26px 30px; border: none; background: rgba(0,0,0,.03) } .insrecruit-list .rectue-top span { width: 100%; text-align: center; margin-bottom: 0; font-size:36px; } .insrecruit-list .rectue-top .date { width: 15%; float: right; margin-top: 6px; margin-right: 25px; } .insrecruit-list .rectue-top .icon { width: 36px; height: 36px; right: 40px; top: 25px; } .insrecruit-list .rectue-top .icon em { width: 36px; } .insrecruit-list .rectue-top .icon em:nth-child(2) { width: 1px; height: 36px; } .insrecruit-list .rectue-min { padding: 25px 30px 30px; line-height: 24px; } .insrecruit-list .rectue-min .desc { padding: 0 0 40px 0; line-height: 30px; width:20%; } .insrecruit-list .rectue-min h3 { padding: 0 0 10px; } } @media (min-width: 1260px) { .insrecruit-list { margin-top: -10px; } .insrecruit-list ul { padding-bottom: 55px; } } .contact img { width: 100%; display: block; } .contact .info { padding: 20px 20px 10px; border: 1px solid #e0e0e0; } .contact h2 { color: #333; } .contact h2:after { content: ''; display: block; width: 40px; height: 3px; background-color: #bf0000; margin: 10px 0 15px; } .contact p { padding-bottom: 10px; } .contact .ac { font-family: "Montserrat"; letter-spacing: -1px; } .contact .address, .contact .tel { padding-left: 32px; } .contact .tel { background: url(../images/icon08.png) left 7px no-repeat; } .contact .address { background: url(../images/icon09.png) left 2px no-repeat; } .contact .qrcode { padding-top: 10px; display: inline-block; color: #999; text-align: center; font-size: 14px; padding-bottom: 0; } .contact .qrcode img { margin-bottom: 3px; } .map { height: 300px; margin-top: 30px; } @media (min-width: 1024px) { .contact { width: 100%; display: table; } .contact .info, .contact .img { display: table-cell; vertical-align: middle; } .contact .info { width: 41%; padding: 10px 30px; } .map { height: 400px; margin-top: 50px; } } @media (min-width: 1260px) { .contact .img, .contact .info { width: 50%; } .contact .info { padding-left: 85px; } .contact h2:after { margin: 22px 0; } .contact p { padding-bottom: 15px; } .contact .qrcode { padding-top: 13px; } .map { height: 580px; } } .introductionA-one { padding-top: 20px; padding-bottom: 20px; color: #868686; } .introductionA-one .year { color: #ececec; font-family: "Montserrat"; line-height: 1.8; } .introductionA-one h2 { color: #cd002b; padding-bottom: 10px; text-transform: uppercase; line-height: 1; } .introductionA-text { line-height: 20px; } .introductionA-slide { padding-bottom: 30px; position: relative; } .introductionA-bd { overflow: hidden; padding-top: 20px; } .introductionA-bd img { width: 100%; display: block; } .introductionA-hd { display: none; position: absolute; right: 0; bottom: 30px; z-index: 20; font-size: 0; white-space: nowrap; } .introductionA-hd a { width: 40px; height: 40px; display: inline-block; vertical-align: top; position: relative; } .introductionA-hd a:after { content: ''; display: block; width: 12px; height: 12px; position: absolute; left: 50%; top: 50%; } .introductionA-prev { background-color: #FFFFFF; } .introductionA-prev:after { border: 1px solid #666666; border-right: none; border-top: none; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin: -6px 0 0 -3px; } .introductionA-next { background-color: #333333; } .introductionA-next:after { border: 1px solid #ffffff; border-left: none; border-bottom: none; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); margin: -6px 0 0 -9px; } .introductionA-dot { text-align: center; padding-top: 5px; position: absolute; width: 100%; } .introductionA-dot span { width: 20px; height: 2px; opacity: 1; background-color: #c1c1c1; -webkit-border-radius: 0; border-radius: 0; margin: 0 5px; } .introductionA-dot span.swiper-pagination-bullet-active { background-color: #de0012; } @media (min-width: 768px) { .introductionA-one { padding: 40px 0; } .introductionA-one h3 { font-size: 20px; } .introductionA-two .text { padding-top: 0; } } @media (min-width: 1024px) { .introductionA-bd { padding-top: 0; } } @media (min-width: 1260px) { .introductionA-container { padding: 70px 0 0; } .introductionA-one { padding: 20px 0 5.41667%; } .introductionA-one .col-md-6 { padding: 0; } .introductionA-one .introductionA-text { padding: 0 46px 0 0; font-size: 16px; line-height: 30px; margin-top: -20px; } .introductionA-one .year { letter-spacing: -1px; line-height: 1; padding-bottom: 20px; } .introductionA-one h2 { padding-bottom: 30px; } .introductionA-title { font-size: 30px; line-height: 1.5; padding: 30px; } .introductionA-title:after { margin-top: 8px; } .introductionA-one h3 { font-size: 24px; line-height: 30px; padding-bottom: 23px; } .introductionA-hd { display: block; right: -50px; } .introductionA-hd a { width: 50px; height: 50px; } } @media (min-width: 1400px) { .introductionA-hd { right: -80px; } .introductionA-hd a { width: 80px; height: 80px; } } .about-post { padding: 30px 0; background-color: #f7f7f7; } .about-post li { padding-top: 10px; padding-bottom: 10px; } .about-post .thumb { width: 100%; display: table; } .about-post .img, .about-post img { width: 120px; } .about-post .img { -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; } .about-post .img, .about-post .info { display: table-cell; vertical-align: middle; } .about-post .info { padding-left: 20px; } .about-post h4 { padding-bottom: 3px; } .about-post .desc { color: #666; } .container.padbot { padding-bottom: 0; } @media (min-width: 768px) { .about-post li { padding-top: 22px; padding-bottom: 22px; } .about-post .img, .about-post img { width: 140px; } .about-post h4 { padding-bottom: 0; } .about-post .desc { line-height: 30px; font-size: 16px; } } @media (min-width: 1260px) { .about-post { padding: 60px 0; } } .full-img { width: 100%; display: block; } .dimension { padding-top: 20px; } .dimension ul { padding-top: 20px; } .dimension li { border-bottom: 1px solid #e5e5e5; padding-bottom: 20px; margin-bottom: 20px; } .dimension h4 { padding-bottom: 5px; } .founder-list { padding-top: 30px; } .founder-list.nopadding,.founder-list.nopadding ul{ padding-top: 0; } .founder-list ul { padding-top: 20px; } .founder-list li { border-bottom: 1px solid #e5e5e5; -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; } .founder-list h3 { -webkit-transition: .3s; -o-transition: .3s; -moz-transition: .3s; transition: .3s; padding: 10px 50px 10px 15px; background: url(../images/icon10.png) 95% center no-repeat; } .founder-list .info { background-color: #f7f7f7; padding: 20px 15px; display: none; } .founder-list .info .font18 { padding: 5px 0; } .founder-list .on { -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; border-bottom: transparent; } .founder-list .on h3 { background-color: #bf0000; color: #fff; background-image: url(../images/icon11.png); } .founder-article { padding-top: 10px; } .founder-article .article { padding-top: 20px; line-height: 26px; } @media (max-width: 640px) { .dimension .font24 { font-size: 16px; } } @media (min-width: 1024px) { .dimension { padding-top: 40px; } .dimension ul { padding-top: 40px; display: table; width: 100%; } .dimension li { width: 33.33333%; vertical-align: top; display: table-cell; padding: 0 20px; border-bottom: none; position: relative; line-height: 30px; } .dimension li:after { content: ''; display: block; width: 1px; height: 100%; position: absolute; right: 0; top: 15px; z-index: 1; background-color: #e5e5e5; } .dimension li:first-child { padding-left: 0; } .dimension li:last-child:after { display: none; } .dimension h4 { padding-bottom: 20px; } .founder-article { padding-top: 50px; } .founder-list .info { padding: 30px; } } @media (min-width: 1260px) { .founder { margin-top: -10px; } .dimension ul { padding-top: 60px; } .dimension li { padding: 0 30px 10px; } .dimension h4 { padding-bottom: 25px; } .founder-article { padding-top: 60px; } .founder-article .article { padding-top: 37px; line-height: 30px; } .founder-list { padding-top: 75px; padding-bottom: 10px; } .founder-list ul { padding-top: 47px; } .founder-list h3 { padding: 10px 50px; background-position-x: 96%; } .founder-list .info { padding: 50px 50px 80px; font-size: 16px; line-height: 30px; } } .training-section { line-height: 28px; } .training-section h3 { color: #333333; padding-bottom: 5px; } .training-section .gray { color: #4d4d4d; } .schedule { padding-top: 30px; } .schedule .box { padding-top: 10px; overflow-x: scroll; overflow-y: hidden; } .training-qrcode { text-align: center; background-color: #f7f7f7; padding: 30px 0; margin-top: 20px; } .training-qrcode img { max-width: 40%; margin: 0 auto 10px; display: block; } .training-list { padding-top: 30px; } @media (min-width: 1260px) { .training-qrcode { margin-bottom: 20px; padding-bottom: 42px; } .training-qrcode img { margin-bottom: 15px; } .training-list dd { overflow: hidden; } .training-list .item { width: 50%; float: left; } .training-list .changewidth .item:first-child { width: 68%; } .training-list .changewidth .item:last-child { width: 32%; } } .train-list .box { padding-top: 20px; overflow-y: hidden; overflow-x: auto; } .train-list ul { padding-top: 20px; } .train-list .odd { border-top: 2px solid #c21212; } .train-list .even { padding: 30px 15px; line-height: 30px; } .train-list .tit { text-indent: -8px; padding-bottom: 5px; } .train-list .tit span:after { content: ''; display: inline-block; width: 30px; height: 1px; vertical-align: middle; background-color: #282828; margin-right: 5px; } .train-list .ac { color: #d32228; } .train-list .thumb { padding: 20px 15px; -webkit-box-shadow: 0 5px 25px 3px rgba(156, 156, 156, 0.1); box-shadow: 0 5px 25px 3px rgba(156, 156, 156, 0.1); } .train-list dt { float: left; line-height: 36px; color: #c7000b; } .train-list dd { float: right; } .train-list dd a { width: 90px; height: 36px; line-height: 36px; display: block; text-align: center; color: #fff; background-color: #bf0000; font-size: 14px; text-transform: uppercase; -webkit-border-radius: 3px; border-radius: 3px; } .train-list .cont { margin-top: 15px; padding: 22px; line-height: 26px; position: relative; } .train-list .cont:before { content: ''; display: block; width: 22px; height: 18px; background: url(../images/icon12.png) no-repeat; position: absolute; left: 0; top: 0; } .train-list .cont:after { content: ''; display: block; width: 22px; height: 18px; background: url(../images/icon13.png) no-repeat; position: absolute; right: 0; bottom: 0; } .train-list .bot { padding-top: 20px; color: #282828; text-align: right; } .train-list .bot:before { content: ''; width: 30px; height: 1px; display: inline-block; vertical-align: middle; background-color: #474747; margin-right: 5px; } @media (min-width: 768px) { .train-list .box img { width: 100%; } .train-list .even { padding: 50px 15px; } } @media (min-width: 1024px) { .train-list .even { line-height: 50px; } .train-list .cont { line-height: 36px; } } @media (min-width: 1260px) { .train-list .thumb { padding: 60px 33px 55px 25px; } .train-list .bot { padding-right: 10px; padding-top: 30px; } .train-list .bot:before { width: 55px; } .train-list .even { padding: 50px 15px 50px 30px; } } .searchtitle401 { padding: 15px; background-color: #f1f1f1; } .searchcont401 { padding: 0; } .resultlist401 { font-size: 13px; padding: 15px 0; } .resultlist401 h2{ text-align:center; padding-top:10px; color:#666; } .resultlist401 img { display: block; width: 100%; } .resultlist401 li { padding: 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-bottom: -1px; } .resultlist401 h4 { font-size: 16px; line-height: 24px; margin-bottom: 10px; } .resultlist401 h4 a { display: block; } .resultlist401 h4 em { color: red; font-style: normal; } .resultlist401 h4 a { display: block; } .resulttext401 { height: 72px; font-size: 14px; line-height: 24px; display: -webkit-box; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #666; } .resultlabel401 { color: #333; display: inline-block; padding-top: 3%; } .searchinputcont401 { padding-right: 60px; } .searchinputcont401 dt input { position: relative; float: left; width: 100%; height: 40px; line-height: 40px; text-indent: 12px; font-size: 15px; color: #333; background-color: #fff; } .searchinputcont401 dd input { position: relative; left: 60px; margin-left: -60px; float: left; width: 60px; height: 40px; line-height: 40px; font-size: 14px; color: #fff; cursor: pointer; background: #bf0000; } .searchimg401 { display: block; margin-bottom: 3%; } @media (min-width: 768px) { .searchinputcont401 { max-width: 61.8%; margin: 0 auto; } .searchtitle401 { font-size: 24px; } .resultlist401 { padding: 3% 0; } .resultlist401 img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; width: auto; } .searchimg401 { float: left; margin: 0 3% 0 0; display: block; width: 200px; height: 150px; overflow: hidden; position: relative; } .resultlist401 h4 { font-size: 20px; margin-bottom: 2%; } } @media (min-width: 1024px) { .searchtitle401 { padding: 28px 15px; } .searchinputcont401 { width: 45%; } .searchinputcont401 dt { float: left; width: 78%; } .searchinputcont401 dd { float: left; width: 22%; } .searchinputcont401 dd input { left: 0; margin-left: 0; width: 100%; } .searchinputcont401 dt input { font-size: 18px; } .searchinputcont401 dd input { text-align: center; font-size: 16px; } } .sitemapcont2 { padding: 6% 10px; overflow: hidden; background: #fff; } .sitemapcont2 dl { position: relative; margin-bottom: 36px; } .sitemapcont2 dl:last-of-type { margin-bottom: 0; } .sitemapcont2 dl dt { font-size: 16px; font-weight: bold; padding: 0 8px; background: #fff; position: absolute; left: 18px; top: -14px; } .sitemapcont2 dl dt a { color: #bf0000; } .sitemapcont2 dl dt a:hover { color: #bf0000; } .sitemapcont2 dl dd { padding: 4% 3% 1% 3%; border: 1px solid #e6e6e6; } .sitemapcont2 dl dd a { display: inline-block; padding-left: 10px; margin: 0 23px 8px 0; } @media (min-width: 767px) { .sitemapcont2 { padding: 5% 10px; } .sitemapcont2 dl dt { font-size: 20px; } .sitemapcont2 dl dd { padding: 2% 3% 1% 3%; border: 1px solid #e6e6e6; } .sitemapcont2 dl dd a { margin: 0 45px 8px 0; } .sitemapcont2 dl dd a:hover { color: #bf0000; } } @media (min-width: 1024px) { .sitemapcont2 { padding: 3.5% 30px; margin-top: -30px; } .sitemapcont2 dl { margin-bottom: 50px; } } #ie-alert-overlay { width: 100%; height: 100%; background: url(../images/bg.png) repeat 0 0; position: fixed; top: 0; left: 0; z-index: 9999; } * html #ie-alert-overlay { position: absolute; z-index: 9999; } #ie-alert-panel { width: 520px; height: 331px; position: fixed; background: url(../images/iealertsprite.png) no-repeat; background-position: -1px -109px; top: 50%; left: 50%; margin: -201px 0 0 -296px; padding: 72px 0 0 72px; _position: absolute; _top: expression(300+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; color: #333; line-height: 1.5em; z-index: 10000; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #ie-alert-panel div, #ie-alert-panel p, #ie-alert-panel span, #ie-alert-panel a, #ie-alert-panel img, #ie-alert-panel ul, #ie-alert-panel li { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #ie-alert-panel p { font-size: 14px; width: 486px; text-align: justify; } #ie-alert-panel img { border: 0; } #ie-alert-panel span { font-size: 18px; margin: 0 0 20px 0; display: block; padding: 0; } #ie-alert-panel ul { list-style: none; margin: 0; padding: 0; overflow: hidden; } #ie-alert-panel li { float: left; margin: 0 22px 0 0; } #ie-alert-panel li.last { margin-right: 0; } #ie-alert-panel a { display: inline-block; vertical-align: top; } #goon { text-decoration: underline; } .browser { position: absolute; bottom: 35px; } .chrome, .firefox, .ie9, .opera, .safari { background: url(../images/iealertsprite.png) no-repeat; } .chrome { background-position: 0 0; width: 73px; height: 96px; margin: 0 4px 0 0; } .firefox { background-position: -292px 0; width: 73px; height: 98px; } .ie9 { background-position: -179px 0; width: 95px; height: 98px; } .opera { background-position: -90px 0; width: 73px; height: 98px; } .safari { background-position: -387px 0; width: 73px; height: 98px; margin: 0 4px 0 0; } .full-newsdetailB-container { padding: 30px 0; background-color: #ffffff; /* {"title": "栏目全局背景色","type":"color","name": "@bgcgnewsdetailBcol","value": "#ffffff"}*/ } .full-newsdetailB-container .article-tilte { margin-bottom: 8px; font-size: 18px; line-height: 26px; color: #333333; /* {"title": "新闻详细B标题文本色","type":"color","name": "@clnewsdetailBtilte","value": "#333333"}*/ } .full-newsdetailB-container .date { margin-bottom: 10px; font-size: 16px; line-height: 32px; color: #8e8e8e; /* {"title": "新闻详细B日期文本色","type":"color","name": "@clnewsdetailBdate","value": "#8e8e8e"}*/ } .full-newsdetailB-container .newsdetailB-article { position: relative; padding: 38px 0 30px; margin-bottom: 15px; border: 1px solid #d9d9d9; /* {"title": "新闻详细B内容上下边框色","type":"color","name": "@bdnewsdetailBart","value": "#d9d9d9"}*/ border-left: 0; border-right: 0; font-size: 14px; line-height: 24px; color: #888888; /* {"title": "新闻详细B内容文本色","type":"color","name": "@clnewsdetailBart","value": "#888888"}*/ } .full-newsdetailB-container .newsdetailB-article img { max-width: 100%; margin: 0.5em 0; } .full-newsdetailB-container .newsdetailB-bdshare { position: absolute; right: 0; top: -43px; overflow: hidden; zoom: 1; } .full-newsdetailB-container .newsdetailB-bdshare a { float: left; display: block; width: 32px; height: 32px; padding: 0; margin: 0 0 0 5px; background-repeat: no-repeat; background-position: center; -o-background-size: cover; background-size: cover; } .full-newsdetailB-container .newsdetailB-bdshare .bds_weixin { background-image: url(../images/newsdetailBwxico.png); /* {"title": "新闻详情A微信分享背景图","type":"image","name": "@imgnewsdetailAsharewx","value": "url(../images/newsdetailBwxico.png)"}*/ } .full-newsdetailB-container .newsdetailB-bdshare .bds_tsina { background-image: url(../images/newsdetailBsnico.png); /* {"title": "新闻详情A新浪分享背景图","type":"image","name": "@imgnewsdetailAsharesn","value": "url(../images/newsdetailBsnico.png)"}*/ } .full-newsdetailB-container .newsdetailB-bdshare .bds_sqq { background-image: url(../images/newsdetailBqqico.png); /* {"title": "新闻详情A企鹅分享背景图","type":"image","name": "@imgnewsdetailAshareqq","value": "url(../images/newsdetailBqqico.png)"}*/ } .full-newsdetailB-container .newsdetailB-ctrl .page-ctrl { margin-bottom: 10px; } .full-newsdetailB-container .newsdetailB-ctrl .page-ctrl a { display: block; font-size: 14px; line-height: 30px; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; color: #666666; /* {"title": "新闻详细B上下页文本色","type":"color","name": "@clnewsdetailBpage","value": "#666666"}*/ } .full-newsdetailB-container .newsdetailB-ctrl .return { display: block; width: 120px; height: 40px; margin: 0 auto; text-align: center; font-size: 16px; line-height: 40px; color: #ffffff; /* {"title": "新闻详细B返回文本色","type":"color","name": "@clnewsdetailBreturn","value": "#ffffff"}*/ background-color: #de0012; /* {"title": "新闻详细B返回背景色","type":"color","name": "@bgcnewsdetailBreturn","value": "#de0012"}*/ } @media (min-width: 768px) { .full-newsB-container .newsB-list ul { margin: 0 -10px; } .full-newsB-container .newsB-list li { width: 50%; padding: 0 10px; margin-bottom: 20px; } } @media (min-width: 1024px) { .full-newsdetailB-container { padding: 75px 0 78px; /* {"title": "栏目全局内填充","type":"text","name": "@pdgnewsdetailBcol","value": "75px 0 78px"}*/ } .full-newsdetailB-container .article-tilte { font-size: 24px; /* {"title": "新闻详细B标题字号","type":"text","name": "@fznewsdetailBtilte","value": "24px"}*/ margin: 0 0 18px; /* {"title": "新闻详细B标题下外间距","type":"text","name": "@mgnewsdetailBtilte","value": "0 0 18px"}*/ line-height: 32px; } .full-newsdetailB-container .date { margin: 0 0 40px; /* {"title": "新闻详细B日期下外间距","type":"text","name": "@mgnewsdetailBdate","value": "0 0 40px"}*/ font-size: 24px; } .full-newsdetailB-container .newsdetailB-article { padding: 72px 0 55px; margin-bottom: 42px; } .full-newsdetailB-container .single-page { padding: 0 100px; } .full-newsdetailB-container .newsdetailB-bdshare { position: absolute; right: auto; left: 0; top: 76px; z-index: 50; } .full-newsdetailB-container .newsdetailB-bdshare.js-fixed-top { position: fixed; left: 40px; } .full-newsdetailB-container .newsdetailB-bdshare.js-absolute-bottom { position: absolute; left: 0; top: auto; bottom: 55px; } .full-newsdetailB-container .newsdetailB-bdshare a { float: none; width: 72px; height: 72px; margin: 0 0 1px 0; -webkit-transition: all ease .3s; -o-transition: all ease .3s; -moz-transition: all ease .3s; transition: all ease .3s; } .full-newsdetailB-container .newsdetailB-bdshare .bds_weixin:hover { background-image: url(../images/newsdetailBwxicoac.jpg); /* {"title": "新闻详情A微信分享背景图","type":"image","name": "@imgnewsdetailAsharewx","value": "url(../images/newsdetailBwxicoac.jpg)"}*/ } .full-newsdetailB-container .newsdetailB-bdshare .bds_tsina:hover { background-image: url(../images/newsdetailBsnicoac.jpg); /* {"title": "新闻详情A新浪分享背景图","type":"image","name": "@imgnewsdetailAsharesn","value": "url(../images/newsdetailBsnicoac.jpg)"}*/ } .full-newsdetailB-container .newsdetailB-bdshare .bds_sqq:hover { background-image: url(../images/newsdetailBqqicoac.jpg); /* {"title": "新闻详情A企鹅分享背景图","type":"image","name": "@imgnewsdetailAshareqq","value": "url(../images/newsdetailBqqicoac.jpg)"}*/ } .full-newsdetailB-container .newsdetailB-ctrl { position: relative; padding-right: 200px; } .full-newsdetailB-container .newsdetailB-ctrl .page-ctrl { margin-bottom: 0; } .full-newsdetailB-container .newsdetailB-ctrl .page-ctrl a:hover { color: #de0012; /* {"title": "新闻详细B上下页文本色","type":"color","name": "@clnewsdetailBpage","value": "#de0012"}*/ } .full-newsdetailB-container .newsdetailB-ctrl .return { position: absolute; right: 0; top: 5px; z-index: 3; width: 145px; height: 50px; line-height: 50px; } } @media (min-width: 1260px) { .full-newsdetailB-container .single-page { max-width: 840px; padding: 0; margin: 0 auto; } .full-newsdetailB-container .newsdetailB-bdshare.js-fixed-top { position: fixed; left: 50%; margin-left: -590px; } .full-newsdetailB-container .newsdetailB-bdshare.js-absolute-bottom { position: absolute; left: 0; top: auto; margin-left: 0; } } #page{ text-align:center; } #page .laypageskin_molv a,#page .laypageskin_molv span{ width:36px; height:36px; padding:0; margin:0 2px 10px 3px; border:1px solid #d8d8d8; display:inline-block; background-color:#fff; line-height:34px; text-align:center; vertical-align:middle; font-size:14px; border-radius:0; } #page .laypageskin_molv a span{ margin: 0; vertical-align: text-bottom; border: none; background: none; } #page .laypageskin_molv a img{ display:inline-block; vertical-align:middle; } #page .laypageskin_molv .laypage_curr{ color:#fff; background-color:#bf0000 !important; border-color:#bf0000; } /*20190911*/ .tc { text-align: center; } .inlink { display: inline-block; } .wqp-tabnav { position: relative; overflow: hidden; margin-bottom:30px; } .wqp-tabnav ul { text-align: center; } .wqp-tabnav ul li { padding: 0 5px; font-size: 0; width: auto; } .wqp-tabnav ul li a { font-size: 14px; line-height: 24px; display: block; -webkit-border-radius: 4px; border-radius: 4px; border: solid 1px #dfdfdf; background-color: #f6f6f6; padding: 6px 12px; -webkit-transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .wqp-tabnav ul li:hover a, .wqp-tabnav ul li.cur a { background-color: #bf0000; color: #fff; border-color: #bf0000; } .video-wrap { margin: 30px 0; position: relative; overflow: hidden; } .video-wrap.nomargin{margin-top:0;} .video-wrap img { max-width: 100%; display: block; -webkit-border-radius: 10px; border-radius: 10px; } .wqp-videobtn { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 55px; height: 55px; background: url(../images/videobtn.png) 0 0 no-repeat; -o-background-size: cover; background-size: cover; cursor: pointer; } .Improvement { background-color: #f7f7f7; padding: 30px 0; color: #666666; line-height: 26px; } .Improvement img { max-width: 100%; } .improve-title { color: #333333; font-size: 20px; text-align: center; margin-bottom: 10px; } .improve-title:after { content: ""; width: 30px; height: 2px; background-color: #bf0000; margin-top: 20px; display: block; margin: 15px auto 0; } .pt40 { padding-top: 20px; } .m-position { position: relative; } .related-courses { padding-top: 30px; padding-bottom: 0; } .related-swiper { position: relative; overflow: hidden; padding-bottom: 10px; padding-top: 20px; } .related-swiper ul li { float: left; width: 33.333%; } .related-swiper ul li a { display: block; color: #212121; } .related-swiper ul li a .zoomimg { position: relative; overflow: hidden; } .related-swiper ul li a .zoomimg:before { content: ""; display: block; padding-bottom: 79.45205%; } .related-swiper ul li a .zoomimg img { position: absolute; top: 0; left: 0; width: 100%; } .related-swiper ul li h3 { font-size: 16px; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; height: 36px; line-height: 36px; margin: 14px 0 8px; } .related-swiper ul li .courses-dec { color: #666666; display: -webkit-box; height: 52px; line-height: 26px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .m-btn { position: absolute; cursor: pointer; } .m-btn { position: absolute; top: 42%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 50px; height: 50px; left: -70px; cursor: pointer; z-index: 2; } .m-btn:after { content: ""; position: absolute; width: 30px; height: 30px; border-left: 2px solid #bf0000; border-bottom: 2px solid #bf0000; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 10px; left: 18px; } .m-btn.m-right { right: -70px; left: auto; } .m-btn.m-right:after { left: 3px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .inner-dot { text-align: center; } .inner-dot span { background: #f6f6f6; margin: 0 4px; width: 10px; height: 10px; opacity: 1; } .inner-dot span.swiper-pagination-bullet-active { background: #bf0000; } .return-btn { text-align: center; } .return-btn a { display: inline-block; color: #ffffff; font-size: 16px; background: #bf0000; padding: 8px 40px; -webkit-border-radius: 8px; border-radius: 8px; } .pc-hidden { display: block; } .mob-hidden { display: none; } .taboverflow { overflow:hidden;} @media (min-width: 1024px) { .pc-hidden { display: none; } .mob-hidden { display: block; } .wqp-tabnav{margin-bottom:55px;} .wqp-tabnav ul li { padding: 0 5px; } .wqp-tabnav ul li a { font-size: 18px; line-height: 24px; padding: 17px 30px; } .video-wrap { margin: 57px 0 75px; overflow: hidden; } .video-wrap:hover img { -webkit-transform: scale(1.03, 1.03); -moz-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); -o-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); } .video-wrap img { -webkit-transition: transform ease 0.7s; -moz-transition: transform ease 0.7s; -o-transition: transform ease 0.7s; -webkit-transition: -webkit-transform ease 0.7s; transition: -webkit-transform ease 0.7s; -o-transition: -o-transform ease 0.7s; -moz-transition: transform ease 0.7s, -moz-transform ease 0.7s; transition: transform ease 0.7s; transition: transform ease 0.7s, -webkit-transform ease 0.7s, -moz-transform ease 0.7s, -o-transform ease 0.7s; } .wqp-videobtn { width: 115px; height: 115px; } .Improvement { padding: 78px 0 135px; font-size: 16px; line-height: 36px; } .Improvement img { max-width: 100%; } .improve-title { font-size: 30px; margin-bottom: 20px; } .improve-title:after { margin: 20px auto 0; } .pt40 { padding-top: 40px; } .related-courses { padding-top: 70px; padding-bottom: 20px; } .related-swiper ul li { margin-right: 43px; } .related-swiper ul li a { overflow: hidden; } .related-swiper ul li a:hover img { -webkit-transform: scale(1.03, 1.03); -moz-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); -o-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); } .related-swiper ul li a img { -webkit-transition: transform ease 0.7s; -moz-transition: transform ease 0.7s; -o-transition: transform ease 0.7s; -webkit-transition: -webkit-transform ease 0.7s; transition: -webkit-transform ease 0.7s; -o-transition: -o-transform ease 0.7s; -moz-transition: transform ease 0.7s, -moz-transform ease 0.7s; transition: transform ease 0.7s; transition: transform ease 0.7s, -webkit-transform ease 0.7s, -moz-transform ease 0.7s, -o-transform ease 0.7s; } .related-swiper ul li a:hover h3 { color: #bf0000; } .related-swiper ul li h3 { margin-top: 20px; font-size: 20px; } .related-swiper ul li .courses-dec { font-size: 16px; height: 72px; line-height: 36px; } .m-btn { left: -40px; } .m-btn.m-right { right: -40px; } .return-btn a { font-size: 22px; padding: 13px 55px; } } @media (min-width: 1280px) { .m-btn { left: -70px; } .m-btn.m-right { right: -70px; } .wqp-tabnav ul li a { padding: 17px 50px; min-width: 212px; } } /*视频播放*/ .recruitmentfloat { display: none; z-index: 110; width: 100%; position: fixed; height: 100%; background: rgba(0, 0, 0, 0.6); left: 0px; top: 0px; } .tianjiatvwrap { width: 95%; margin: 0 auto; position: absolute; top: 50%; left: 2.5%; margin-top: -125px; } .tianjiatvwrap .videobox { height: 250px; position: relative; z-index: 1; } .recclosebtn { display: block; width: 25px; height: 25px; position: absolute; right: 15px; top: -5px; cursor: pointer; z-index: 100; margin: -20px -20px 0 0; z-index: 9; } .recclosebtn:before { content: ""; position: absolute; top: 10px; width: 20px; height: 2px; background-color: #fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .recclosebtn:after { content: ""; position: absolute; top: 10px; width: 20px; height: 2px; background-color: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } @media (min-width: 768px) { .tianjiatvwrap { width: 660px; left: 50%; margin-left: -330px; margin-top: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tianjiatvwrap .videobox { height: 400px; } } @media (min-width: 1024px) { .tianjiatvwrap { width: 700px; margin-left: -350px; } .tianjiatvwrap .videobox { height: 400px; } } @media (min-width: 1260px) { .tianjiatvwrap { width: 1000px; margin-left: -500px; } .tianjiatvwrap .videobox { height: 600px; } } @media (max-width: 48.0625rem){ .foot-nav li.ewm{ float:left; width:50%; text-align:center;border-bottom:none; margin-top:20px;} .foot-nav li.ewm .box{ width:70%;} .foot-nav li.ewm .box img{ width:100%;} .foot-nav h1{ font-size: 1.1rem; color:#fff; text-align:center;} }