@import url(amazeui.min.css); .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px) } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100% } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out } .owl-carousel .owl-item { float: left } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent } .grabbing { cursor: url(/i/owlcarousel/grabbing.png) 8 8, move } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0) } .owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -moz-perspective: 1200px; -moz-perspective-origin-x: 50%; -moz-perspective-origin-y: 50%; perspective: 1200px } .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease } .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease } .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both } .owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both } .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both } @-webkit-keyframes empty { 0% { opacity:1 } } @-moz-keyframes empty { 0% { opacity:1 } } @keyframes empty { 0% { opacity:1 } } @-webkit-keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } } @-moz-keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } } @keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } } @-webkit-keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } @-moz-keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } @keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } @-webkit-keyframes backSlideOut { 25% { opacity:.5; -webkit-transform:translateZ(-500px) } 75% { opacity:.5; -webkit-transform:translateZ(-500px) translateX(-200%) } 100% { opacity:.5; -webkit-transform:translateZ(-500px) translateX(-200%) } } @-moz-keyframes backSlideOut { 25% { opacity:.5; -moz-transform:translateZ(-500px) } 75% { opacity:.5; -moz-transform:translateZ(-500px) translateX(-200%) } 100% { opacity:.5; -moz-transform:translateZ(-500px) translateX(-200%) } } @keyframes backSlideOut { 25% { opacity:.5; transform:translateZ(-500px) } 75% { opacity:.5; transform:translateZ(-500px) translateX(-200%) } 100% { opacity:.5; transform:translateZ(-500px) translateX(-200%) } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity:.5; -webkit-transform:translateZ(-500px) translateX(200%) } 75% { opacity:.5; -webkit-transform:translateZ(-500px) } 100% { opacity:1; -webkit-transform:translateZ(0) translateX(0) } } @-moz-keyframes backSlideIn { 0%, 25% { opacity:.5; -moz-transform:translateZ(-500px) translateX(200%) } 75% { opacity:.5; -moz-transform:translateZ(-500px) } 100% { opacity:1; -moz-transform:translateZ(0) translateX(0) } } @keyframes backSlideIn { 0%, 25% { opacity:.5; transform:translateZ(-500px) translateX(200%) } 75% { opacity:.5; transform:translateZ(-500px) } 100% { opacity:1; transform:translateZ(0) translateX(0) } } @-webkit-keyframes scaleToFade { to { opacity:0; -webkit-transform:scale(0.8) } } @-moz-keyframes scaleToFade { to { opacity:0; -moz-transform:scale(0.8) } } @keyframes scaleToFade { to { opacity:0; transform:scale(0.8) } } @-webkit-keyframes goDown { from { -webkit-transform:translateY(-100%) } } @-moz-keyframes goDown { from { -moz-transform:translateY(-100%) } } @keyframes goDown { from { transform:translateY(-100%) } } @-webkit-keyframes scaleUpFrom { from { opacity:0; -webkit-transform:scale(1.5) } } @-moz-keyframes scaleUpFrom { from { opacity:0; -moz-transform:scale(1.5) } } @keyframes scaleUpFrom { from { opacity:0; transform:scale(1.5) } } @-webkit-keyframes scaleUpTo { to { opacity:0; -webkit-transform:scale(1.5) } } @-moz-keyframes scaleUpTo { to { opacity:0; -moz-transform:scale(1.5) } } @keyframes scaleUpTo { to { opacity:0; transform:scale(1.5) } }/*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } @-webkit-keyframes bounce { 0%, 100%, 20%, 53%, 80% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -30px, 0); transform:translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0) } 90% { -webkit-transform:translate3d(0, -4px, 0); transform:translate3d(0, -4px, 0) } } @keyframes bounce { 0%, 100%, 20%, 53%, 80% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -30px, 0); -ms-transform:translate3d(0, -30px, 0); transform:translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -15px, 0); -ms-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0) } 90% { -webkit-transform:translate3d(0, -4px, 0); -ms-transform:translate3d(0, -4px, 0); transform:translate3d(0, -4px, 0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%, 100%, 50% { opacity:1 } 25%, 75% { opacity:0 } } @keyframes flash { 0%, 100%, 50% { opacity:1 } 25%, 75% { opacity:0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } @keyframes pulse { 0% { -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05); -ms-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 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) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } @keyframes rubberBand { 0% { -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 30% { -webkit-transform:scale3d(1.25, 0.75, 1); -ms-transform:scale3d(1.25, 0.75, 1); transform:scale3d(1.25, 0.75, 1) } 40% { -webkit-transform:scale3d(0.75, 1.25, 1); -ms-transform:scale3d(0.75, 1.25, 1); transform:scale3d(0.75, 1.25, 1) } 50% { -webkit-transform:scale3d(1.15, 0.85, 1); -ms-transform:scale3d(1.15, 0.85, 1); transform:scale3d(1.15, 0.85, 1) } 65% { -webkit-transform:scale3d(0.95, 1.05, 1); -ms-transform:scale3d(0.95, 1.05, 1); transform:scale3d(0.95, 1.05, 1) } 75% { -webkit-transform:scale3d(1.05, 0.95, 1); -ms-transform:scale3d(1.05, 0.95, 1); transform:scale3d(1.05, 0.95, 1) } 100% { -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%, 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 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%, 100% { -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform:translate3d(-10px, 0, 0); -ms-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform:translate3d(10px, 0, 0); -ms-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes swing { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg) } } @keyframes swing { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg); -ms-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg); -ms-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg); -ms-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform:rotate3d(0, 0, 1, -5deg); -ms-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform:rotate3d(0, 0, 1, 0deg); -ms-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg) } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 10%, 20% { -webkit-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } @keyframes tada { 0% { -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 10%, 20% { -webkit-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); -ms-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); -ms-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); -ms-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } 100% { -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform:none; transform:none } 15% { -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform:none; transform:none } } @keyframes wobble { 0% { -webkit-transform:none; -ms-transform:none; transform:none } 15% { -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); -ms-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); -ms-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); -ms-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); -ms-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); -ms-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform:none; -ms-transform:none; transform:none } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-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) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } @keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); -ms-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); -ms-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); -ms-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); -ms-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); -ms-transform:scale3d(0.97, 0.97, 0.97); transform:scale3d(0.97, 0.97, 0.97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); -ms-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-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) } 100% { -webkit-transform:none; transform:none } } @keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, -3000px, 0); -ms-transform:translate3d(0, -3000px, 0); transform:translate3d(0, -3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, 25px, 0); -ms-transform:translate3d(0, 25px, 0); transform:translate3d(0, 25px, 0) } 75% { -webkit-transform:translate3d(0, -10px, 0); -ms-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 90% { -webkit-transform:translate3d(0, 5px, 0); -ms-transform:translate3d(0, 5px, 0); transform:translate3d(0, 5px, 0) } 100% { -webkit-transform:none; -ms-transform:none; transform:none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-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) } 100% { -webkit-transform:none; transform:none } } @keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(-3000px, 0, 0); -ms-transform:translate3d(-3000px, 0, 0); transform:translate3d(-3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(25px, 0, 0); -ms-transform:translate3d(25px, 0, 0); transform:translate3d(25px, 0, 0) } 75% { -webkit-transform:translate3d(-10px, 0, 0); -ms-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 90% { -webkit-transform:translate3d(5px, 0, 0); -ms-transform:translate3d(5px, 0, 0); transform:translate3d(5px, 0, 0) } 100% { -webkit-transform:none; -ms-transform:none; transform:none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-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) } 100% { -webkit-transform:none; transform:none } } @keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(3000px, 0, 0); -ms-transform:translate3d(3000px, 0, 0); transform:translate3d(3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(-25px, 0, 0); -ms-transform:translate3d(-25px, 0, 0); transform:translate3d(-25px, 0, 0) } 75% { -webkit-transform:translate3d(10px, 0, 0); -ms-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } 90% { -webkit-transform:translate3d(-5px, 0, 0); -ms-transform:translate3d(-5px, 0, 0); transform:translate3d(-5px, 0, 0) } 100% { -webkit-transform:none; -ms-transform:none; transform:none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-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) } 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } } @keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, 3000px, 0); -ms-transform:translate3d(0, 3000px, 0); transform:translate3d(0, 3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); -ms-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 75% { -webkit-transform:translate3d(0, 10px, 0); -ms-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 90% { -webkit-transform:translate3d(0, -5px, 0); -ms-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0) } 100% { -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform:scale3d(0.9, 0.9, 0.9); transform:scale3d(0.9, 0.9, 0.9) } 50%, 55% { opacity:1; -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 100% { 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); -ms-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); -ms-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 100% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); -ms-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s } @-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) } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } @keyframes bounceOutDown { 20% { -webkit-transform:translate3d(0, 10px, 0); -ms-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 40%, 45% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); -ms-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); -ms-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity:1; -webkit-transform:translate3d(20px, 0, 0); transform:translate3d(20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } @keyframes bounceOutLeft { 20% { opacity:1; -webkit-transform:translate3d(20px, 0, 0); -ms-transform:translate3d(20px, 0, 0); transform:translate3d(20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); -ms-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } @keyframes bounceOutRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); -ms-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); -ms-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 40%, 45% { opacity:1; -webkit-transform:translate3d(0, 20px, 0); transform:translate3d(0, 20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } @keyframes bounceOutUp { 20% { -webkit-transform:translate3d(0, -10px, 0); -ms-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 40%, 45% { opacity:1; -webkit-transform:translate3d(0, 20px, 0); -ms-transform:translate3d(0, 20px, 0); transform:translate3d(0, 20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); -ms-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } } @keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInDown { 0% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); -ms-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInDownBig { 0% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); -ms-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInLeft { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); -ms-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInLeftBig { 0% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); -ms-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInRight { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); -ms-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInRightBig { 0% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); -ms-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInUp { 0% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); -ms-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes fadeInUpBig { 0% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); -ms-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } @keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } } @keyframes fadeOutDown { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); -ms-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } @keyframes fadeOutDownBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); -ms-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } } @keyframes fadeOutLeft { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); -ms-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } @keyframes fadeOutLeftBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); -ms-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } } @keyframes fadeOutRight { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); -ms-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } @keyframes fadeOutRightBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); -ms-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } } @keyframes fadeOutUp { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); -ms-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } @keyframes fadeOutUpBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); -ms-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg); transform:perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 40% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 50% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -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); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 100% { -webkit-transform:perspective(400px); transform:perspective(400px); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } } @keyframes flip { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg); -ms-transform:perspective(400px) rotate3d(0, 1, 0, -360deg); transform:perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 40% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -ms-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 50% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -ms-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 80% { -webkit-transform:perspective(400px) scale3d(0.95, 0.95, 0.95); -ms-transform:perspective(400px) scale3d(0.95, 0.95, 0.95); transform:perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 100% { -webkit-transform:perspective(400px); -ms-transform:perspective(400px); transform:perspective(400px); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg); transform:perspective(400px) rotate3d(1, 0, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg); transform:perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg); -ms-transform:perspective(400px) rotate3d(1, 0, 0, 10deg); transform:perspective(400px) rotate3d(1, 0, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg); -ms-transform:perspective(400px) rotate3d(1, 0, 0, -5deg); transform:perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform:perspective(400px); -ms-transform:perspective(400px); transform:perspective(400px) } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transform:perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg); transform:perspective(400px) rotate3d(0, 1, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); transform:perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); -ms-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg); -ms-transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transform:perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function:ease-in; transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg); -ms-transform:perspective(400px) rotate3d(0, 1, 0, 10deg); transform:perspective(400px) rotate3d(0, 1, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); -ms-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); transform:perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform:perspective(400px); -ms-transform:perspective(400px); transform:perspective(400px) } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); opacity:0 } } @keyframes flipOutX { 0% { -webkit-transform:perspective(400px); -ms-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); opacity:0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important } @-webkit-keyframes flipOutY { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg); transform:perspective(400px) rotate3d(0, 1, 0, -15deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); opacity:0 } } @keyframes flipOutY { 0% { -webkit-transform:perspective(400px); -ms-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg); -ms-transform:perspective(400px) rotate3d(0, 1, 0, -15deg); transform:perspective(400px) rotate3d(0, 1, 0, -15deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); -ms-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); opacity:0 } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s } @-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); opacity:1 } 80% { -webkit-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1 } 100% { -webkit-transform:none; transform:none; opacity:1 } } @keyframes lightSpeedIn { 0% { -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg); -ms-transform:translate3d(100%, 0, 0) skewX(-30deg); transform:translate3d(100%, 0, 0) skewX(-30deg); opacity:0 } 60% { -webkit-transform:skewX(20deg); -ms-transform:skewX(20deg); transform:skewX(20deg); opacity:1 } 80% { -webkit-transform:skewX(-5deg); -ms-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1 } 100% { -webkit-transform:none; -ms-transform:none; transform:none; opacity:1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { 0% { opacity:1 } 100% { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg); transform:translate3d(100%, 0, 0) skewX(30deg); opacity:0 } } @keyframes lightSpeedOut { 0% { opacity:1 } 100% { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg); -ms-transform:translate3d(100%, 0, 0) skewX(30deg); transform:translate3d(100%, 0, 0) skewX(30deg); opacity:0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, -200deg); transform:rotate3d(0, 0, 1, -200deg); opacity:0 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateIn { 0% { -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, -200deg); -ms-transform:rotate3d(0, 0, 1, -200deg); transform:rotate3d(0, 0, 1, -200deg); opacity:0 } 100% { -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; -webkit-transform:none; -ms-transform:none; transform:none; opacity:1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); -ms-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; -ms-transform:none; transform:none; opacity:1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); -ms-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; -ms-transform:none; transform:none; opacity:1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); -ms-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; -ms-transform:none; transform:none; opacity:1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -90deg); transform:rotate3d(0, 0, 1, -90deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -90deg); -ms-transform:rotate3d(0, 0, 1, -90deg); transform:rotate3d(0, 0, 1, -90deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; -ms-transform:none; transform:none; opacity:1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin:center; transform-origin:center; opacity:1 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, 200deg); transform:rotate3d(0, 0, 1, 200deg); opacity:0 } } @keyframes rotateOut { 0% { -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; opacity:1 } 100% { -webkit-transform-origin:center; -ms-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, 200deg); -ms-transform:rotate3d(0, 0, 1, 200deg); transform:rotate3d(0, 0, 1, 200deg); opacity:0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); -ms-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); -ms-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; -ms-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); -ms-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 90deg); transform:rotate3d(0, 0, 1, 90deg); opacity:0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; -ms-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 90deg); -ms-transform:rotate3d(0, 0, 1, 90deg); transform:rotate3d(0, 0, 1, 90deg); opacity:0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 20%, 60% { -webkit-transform:rotate3d(0, 0, 1, 80deg); transform:rotate3d(0, 0, 1, 80deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 40%, 80% { -webkit-transform:rotate3d(0, 0, 1, 60deg); transform:rotate3d(0, 0, 1, 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 } 100% { -webkit-transform:translate3d(0, 700px, 0); transform:translate3d(0, 700px, 0); opacity:0 } } @keyframes hinge { 0% { -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 20%, 60% { -webkit-transform:rotate3d(0, 0, 1, 80deg); -ms-transform:rotate3d(0, 0, 1, 80deg); transform:rotate3d(0, 0, 1, 80deg); -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 40%, 80% { -webkit-transform:rotate3d(0, 0, 1, 60deg); -ms-transform:rotate3d(0, 0, 1, 60deg); transform:rotate3d(0, 0, 1, 60deg); -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; opacity:1 } 100% { -webkit-transform:translate3d(0, 700px, 0); -ms-transform:translate3d(0, 700px, 0); transform:translate3d(0, 700px, 0); opacity:0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity:1; -webkit-transform:none; transform:none } } @keyframes rollIn { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); -ms-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity:1; -webkit-transform:none; -ms-transform:none; transform:none } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } @keyframes rollOut { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); -ms-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 50% { opacity:1 } } @keyframes zoomIn { 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); -ms-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 50% { opacity:1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInDown { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-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); -ms-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInLeft { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-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); -ms-transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInRight { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-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); -ms-transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInUp { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-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); -ms-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) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity:1 } 50% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 100% { opacity:0 } } @keyframes zoomOut { 0% { opacity:1 } 50% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); -ms-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 100% { opacity:0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutDown { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-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) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-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; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(-2000px, 0, 0); transform:scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin:left center; transform-origin:left center } } @keyframes zoomOutLeft { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(-2000px, 0, 0); -ms-transform:scale(0.1) translate3d(-2000px, 0, 0); transform:scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin:left center; -ms-transform-origin:left center; transform-origin:left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(2000px, 0, 0); transform:scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin:right center; transform-origin:right center } } @keyframes zoomOutRight { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(2000px, 0, 0); -ms-transform:scale(0.1) translate3d(2000px, 0, 0); transform:scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin:right center; -ms-transform-origin:right center; transform-origin:right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutUp { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-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) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-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; -ms-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { 0% { -webkit-transform:translateY(-100%); transform:translateY(-100%); visibility:visible } 100% { -webkit-transform:translateY(0); transform:translateY(0) } } @keyframes slideInDown { 0% { -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%); visibility:visible } 100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { -webkit-transform:translateX(-100%); transform:translateX(-100%); visibility:visible } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes slideInLeft { 0% { -webkit-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%); visibility:visible } 100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { -webkit-transform:translateX(100%); transform:translateX(100%); visibility:visible } 100% { -webkit-transform:translateX(0); transform:translateX(0) } } @keyframes slideInRight { 0% { -webkit-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%); visibility:visible } 100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { 0% { -webkit-transform:translateY(100%); transform:translateY(100%); visibility:visible } 100% { -webkit-transform:translateY(0); transform:translateY(0) } } @keyframes slideInUp { 0% { -webkit-transform:translateY(100%); -ms-transform:translateY(100%); transform:translateY(100%); visibility:visible } 100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0) } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { 0% { -webkit-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(100%); transform:translateY(100%) } } @keyframes slideOutDown { 0% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(100%); -ms-transform:translateY(100%); transform:translateY(100%) } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(-100%); transform:translateX(-100%) } } @keyframes slideOutLeft { 0% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(100%); transform:translateX(100%) } } @keyframes slideOutRight { 0% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0) } 100% { visibility:hidden; -webkit-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(-100%); transform:translateY(-100%) } } @keyframes slideOutUp { 0% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0) } 100% { visibility:hidden; -webkit-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } a { color: #000 } a:hover, a:focus { color: #e60012; text-decoration: none } a:focus { outline: thin dotted; outline: 1px auto -webkit-focus-ring-color; outline-offset: -2px; text-decoration: none } .w { width: 1200px; margin: 0 auto } #toTop { display: none; text-decoration: none; position: fixed; bottom: 30px; right: 30px; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url(../images/backtotop.png) no-repeat 0px 0px } #toTopHover { width: 40px; height: 40px; display: block; overflow: hidden; float: left; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); background: url(../images/backtotop.png) no-repeat 0px -40px } #toTop:active, #toTop:focus { outline: none } .no_padding { margin: 0; padding: 0 } .no_padding [class*="am-"] { margin: 0; padding: 0 } .target-fix { position: relative; top: 0px; display: block; height: 1px; overflow: hidden } .pages { text-align: center } .pages a { display: block; width: 36px; height: 34px; background-image: url(../images/page_arrow.png); background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .pages .pre-page { display: inline-block; margin-right: 60px } .pages .pre-page a { background-position: 0 0 } .pages .pre-page a:hover { background-position: -36px 0 } .pages .next-page { display: inline-block } .pages .next-page a { background-position: -36px -34px } .pages .next-page a:hover { background-position: 0 -34px } .text-center { text-align: center } .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 0px } .pagination>li { display: inline } .pagination>li>a, .pagination>li>span { position: relative; float: left; padding: 6px 16px; margin-left: 0px; line-height: 1.42857143; color: #fff; text-decoration: none; background-color: #414141; border: none; font-size: 14px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin-right: 15px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .pagination>li:first-child>a, .pagination>li:first-child>span { margin-left: 0 } .pagination>li:last-child>a, .pagination>li:last-child>span { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { z-index: 3; color: #fff; background: #151515 } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { z-index: 2; color: #fff; cursor: default; background-color: #151515; border-color: #151515 } .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { color: #777; cursor: not-allowed; background-color: #fff; border-color: #ddd } @font-face { font-family: 'bt'; src: url("../fonts/BrandonText-Regular.eot"); src: url("../fonts/brandontext-regular.eot") format("embedded-opentype"), url("../fonts/brandontext-regular.ttf") format("truetype"), url("../fonts/brandontext-regular.svg#yourwebfontname") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: 'btb'; src: url("../fonts/brandontext-bold.eot"); src: url("../fonts/brandontext-bold.eot") format("embedded-opentype"), url("../fonts/brandontext-bold.ttf") format("truetype"), url("../fonts/brandontext-bold.svg#yourwebfontname") format("svg"); font-weight: bold; font-style: normal } body { color: #000; font-family: 'bt', "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif } header { position: relative } header a.logo { margin: 0; padding: 0; position: absolute; left: 2rem; top: 2rem; z-index: 200 } header .nav { width: 50%; position: absolute; right: 0; top: 4rem; z-index: 200 } header .nav ul { margin: 0; padding: 0 } header .nav ul li { display: block; float: left; width: 14.2%; text-align: center; height: 50px } header .nav ul li a { display: inline-block; margin: 0 auto; text-align: center; font-size: 16px; height: 50px; line-height: 50px; position: relative } header .nav ul li a::after { content: ''; width: 0px; height: 3px; position: absolute; left: 50%; bottom: 0px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } header .nav ul li a:hover, header .nav ul li a.cur { color: #e60012 } header .nav ul li a:hover::after, header .nav ul li a.cur::after { width: 100%; background: #e60012; left: 0px } header .iconav { position: absolute; right: 2rem; top: 2rem; z-index: 200 } header .iconav i { font-size: 3rem } #iconav .am-offcanvas-bar { color: #fff; background: #292929 } #iconav .am-offcanvas-bar .leftnav_line { border-color: #585858 } #iconav .am-offcanvas-bar .am-accordion-basic .am-accordion-item { margin-bottom: 15px } #iconav .am-offcanvas-bar .am-accordion-basic .am-accordion-item .am-accordion-title { color: #fff } #iconav .am-offcanvas-bar .am-accordion-basic .am-accordion-item .am-accordion-title:before { float: right; transform: rotate(90deg); margin-top: 0.5rem } #iconav .am-offcanvas-bar .am-accordion-basic .am-accordion-item .am-accordion-title a { color: #fff } #iconav .am-offcanvas-bar .am-accordion-basic .am-accordion-item .noico:before { display: none } #iconav .am-offcanvas-bar .am-accordion-basic .am-accordion-item .am-accordion-bd a { display: block; color: #aaaaaa; line-height: 30px; font-size: 1.6rem } #iconav .am-offcanvas-bar .am-accordion-basic .am-active .am-accordion-title { color: #fff } #iconav .am-offcanvas-bar .am-accordion-basic .am-active .am-accordion-title a { color: #fff } #iconav .am-offcanvas-bar .side_menu { padding-top: 40px } #iconav .am-offcanvas-bar .side_menu li { display: block; margin-bottom: 10px } #iconav .am-offcanvas-bar .side_menu li a { display: block; text-align: center; color: #fff; font-size: 1.4rem } #iconav .am-offcanvas-bar .side_menu li a i { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; margin: 0 auto 5px; background: #fff; color: #333; font-size: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px } .banner_w { position: absolute; left: 0; top: 0; z-index: 100 } #banner { overflow: hidden } #banner .owl-controls { margin: 0; height: 17px; position: absolute; left: 3%; bottom: 8% } #banner .owl-controls .owl-page { display: inline-block; padding: 7px 0 } #banner .owl-controls .owl-page span { display: block; margin: 0 10px; width: 60px; height: 3px; background: none; background: #fff; opacity: .4; filter: alpha(opacity=40) } #banner .owl-controls .active span { background: #fff; opacity: 1; filter: alpha(opacity=100) } .viewmore { display: block; width: 120px; height: 30px; line-height: 28px; font-size: 1.2rem; padding: 0 1rem; border: 1px solid #151515; position: relative; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .viewmore::after { content: ''; display: block; width: 30px; height: 8px; background: url(../images/arrow_long.png) -40px 0 no-repeat; position: absolute; right: 1rem; top: 50%; margin-top: -4px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .viewmore:hover { background: #e60012; border-color: #e60012; color: #fff } .viewmore:hover::after { background: url(../images/arrow_long.png) 0 0 no-repeat } .viewmore_w { border-color: #fff; color: #fff } .viewmore_w::after { background: url(../images/arrow_long.png) -40px -8px no-repeat } .viewmore_w:hover::after { background: url(../images/arrow_long.png) 0 -8px no-repeat } .viewmore_casemore { margin: 0 auto; width: 170px; height: 40px; line-height: 38px } @media (min-width: 1000px) { .viewmore { width: 120px; height: 40px; line-height: 38px } .viewmore_casemore { margin: 0 auto; width: 170px; height: 40px; line-height: 38px } } @media (min-width: 1200px) { .viewmore { width: 140px; font-size: 1.4rem } .viewmore_casemore { margin: 0 auto; width: 190px; height: 50px; line-height: 48px } } @media (min-width: 1600px) { .viewmore { width: 180px; height: 55px; line-height: 53px; padding: 0 2.6rem } .viewmore::after { right: 2.6rem } .viewmore_casemore { margin: 0 auto; width: 220px; height: 60px; line-height: 58px } } .in_about { margin: 0; padding: 0; background: #f8f8f8 } .in_about .txt { padding: 2rem 2rem 0; position: relative } .in_about .txt h6.t2 { } .in_about .txt h3.t { margin: 0; padding: 0; margin-top: 2rem; padding-left: 30px; font-size: 1.6rem; position: relative } .in_about .txt h3.t::before { content: ' '; width: 26px; height: 2px; line-height: 2px; background: #000; position: absolute; left: 0; top: 10px } .in_about .txt .des { font-size: 1.2rem; color: #666; padding: 10px 0 0 } .in_about .txt .viewmore { margin: 5px 0 0 } @media (min-width: 1000px) { .in_about .txt h6.t2 { font-size: 3rem; line-height: 2.4rem } .in_about .txt h3.t { font-size: 2rem } .in_about .txt h3.t::before { top: 15px } .in_about .txt .des { font-size: 1.4rem } .in_about .txt .viewmore { margin: 15px 0 0 } } @media (min-width: 1200px) { .in_about .txt h6.t2 { font-size: 14rem; line-height: 3rem; top: -20px } .in_about .txt h3.t { font-size: 3rem; padding-left: 75px } .in_about .txt h3.t::before { width: 60px; top: 24px } .in_about .txt .des { font-size: 1.4rem; line-height: 2.6rem } .in_about .txt .viewmore { margin: 15px 0 0 } } @media (min-width: 1400px) { .in_about .txt { padding: 4rem 4rem 0 7rem } .in_about .txt h6.t2 { font-size: 4.5rem; line-height: 5rem; top: -35px } .in_about .txt h3.t { margin-top: 6rem; font-size: 3rem; padding-left: 0px } .in_about .txt h3.t::before { width: 60px; left: -80px; top: 24px } .in_about .txt .des { font-size: 1.4rem; line-height: 2.6rem; padding: 30px 80px 0 0 } .in_about .txt .viewmore { margin: 20px 0 0 } } @media (min-width: 1800px) { .in_about .txt { padding: 4rem 4rem 0 12rem } .in_about .txt h6.t2 { font-size: 6rem; line-height: 6rem; top: -40px } .in_about .txt h3.t::before { width: 58px } .in_about .txt .des { padding: 50px 120px 20px 0 } .in_about .txt .viewmore { margin: 30px 0 0 } } .in_case { padding: 2rem 0 0 2rem } .in_case .list { padding: 0 2rem 2rem 0; overflow: hidden } .in_case .list:last-child { float: left } .in_case .list a.listmore { display: block; width: 100%; height: 100%; position: relative } .in_case .list a.listmore span { display: block } .in_case .list a.listmore span.txt { display: none } .in_case .list .cate { position: relative } .in_case .list .cate .blank_txt { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px } .in_case .list .cate .blank_txt h3.t { font-size: 2rem } .in_case .list .cate .blank_txt h3.t span { display: block; font-size: 2.4rem } .in_case .list .cate .blank_txt a.link { font-size: 1.2rem; margin-right:.5rem } .in_case .list .cate .blank_txt a.viewmore { margin-top: 2rem } @media (min-width: 1200px) { .in_case .list a.listmore span { display: block } .in_case .list a.listmore span.txt { display: block; width: 100%; height: 100%; padding: 20px; background: rgba(230,0,18,0.8); position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_case .list a.listmore span.txt span.des { width: 100%; height: 100%; color: #fff; font-size: 1.6rem; position: relative } .in_case .list a.listmore span.txt span.des::before { content: ''; display: block; width: 100%; height: 1px; border-left: 1px solid #fff; border-right: 1px solid #fff; position: absolute; left: 0px; top: 50%; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_case .list a.listmore span.txt span.des::after { content: ''; display: block; width: 1px; height: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; position: absolute; left: 50%; top: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_case .list a.listmore span.txt span.des .site { height: 90px; font-size: 1.6rem; position: absolute; left: 0px; bottom: 0px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_case .list a.listmore span.txt span.des .site::after { content: ''; display: block; width: 30px; height: 8px; margin-top: 10px; background: url(../images/arrow_long.png) 0 0 no-repeat } .in_case .list a.listmore span.txt span.des em { display: block; font-size: 1.8rem; font-style: normal; overflow: hidden } .in_case .list a.listmore span.txt span.des i { display: block } .in_case .list a.listmore span.thumb { width: 100%; height: 100%; overflow: hidden } .in_case .list a.listmore span.thumb img { width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s } .in_case .list a.listmore:hover span.txt { opacity: 1; filter: alpha(opacity=100) } .in_case .list a.listmore:hover span.txt span.des::before { height: 100%; top: 0 } .in_case .list a.listmore:hover span.txt span.des::after { width: 100%; left: 0 } .in_case .list a.listmore:hover span.txt span.des .site { left: 20px } .in_case .list a.listmore:hover span.thumb img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } .in_case .list .cate .blank_txt h3.t { font-size: 2.4rem } .in_case .list .cate .blank_txt h3.t span { display: block; font-size: 1.8rem } .in_case .list .cate .blank_txt a.link { display: inline-block; font-size: 1.4rem; margin-right:.8rem; height: 30px; line-height: 30px; padding-left: 20px; position: relative; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_case .list .cate .blank_txt a.link:before { content: ''; width: 17px; height: 2px; line-height: 2px; background: #000; position: absolute; left: 0; top: 13px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_case .list .cate .blank_txt a.link:hover { color: #e60012 } .in_case .list .cate .blank_txt a.link:hover:before { background: #e60012 } .in_case .list .cate .blank_txt a.viewmore { margin-top: 2rem } } @media (min-width: 1400px) { .in_case { padding: 7rem 5rem 0 7rem } .in_case .list { padding: 0 2rem 2rem 0 } .in_case .list a.listmore span.txt { padding: 30px } .in_case .list .cate .blank_txt { padding-top: 2rem } .in_case .list .cate .blank_txt h3.t { margin: 0 0 3rem 0 } .in_case .list .cate .blank_txt a.link { font-size: 1.6rem; font-weight: bold } .in_case .list .cate .blank_txt a.link:before { content: ''; top: 15px } .in_case .list .cate .blank_txt a.viewmore { margin-top: 3rem } } @media (min-width: 1800px) { .in_case { padding: 12rem 8rem 0 12rem } .in_case .list { padding: 0 4rem 4rem 0 } .in_case .list a.listmore span.txt { padding: 40px } .in_case .list .cate .blank_txt { padding: 2rem 0 0 3rem } .in_case .list .cate .blank_txt h3.t { margin: 0 0 4rem 0 } .in_case .list .cate .blank_txt a.link { margin-right: 2rem; padding-left: 2rem } .in_case .list .cate .blank_txt a.viewmore { margin-top: 4rem } } .in_choose { background: #000; color: #fff } .in_choose .txt { padding: 2rem 1rem 2rem 2rem } .in_choose .txt h6.t2 { margin: 0; padding: 0; font-family: 'btb'; font-size: 2rem } .in_choose .txt h3.t { margin: 0; padding: 0; padding-left: 3rem; font-size: 1.6rem; position: relative } .in_choose .txt h3.t:before { content: ' '; width: 26px; height: 2px; line-height: 2px; background: #fff; position: absolute; left: 0; top: 11px } .in_choose .txt .des { font-size: 1.4rem; margin: 3rem 0; opacity: .7; filter: alpha(opacity=70) } .in_choose .right { padding: 2rem 0 0 2rem; background: #111 } .in_choose .right .list { padding: 0 2rem 2rem 0; color: #fff } .in_choose .right .list span { display: block; text-align: center } .in_choose .right .list span.title { font-size: 1.4rem; font-weight: bold; line-height: 2rem } .in_choose .right .list span.des { font-size: 1.2rem; opacity: .7; filter: alpha(opacity=70) } @media (min-width: 1200px) { .in_choose .txt { padding: 11rem 2rem 2rem 2rem; position: relative } .in_choose .txt h6.t2 { font-size: 4.2rem; width: 120%; position: absolute; left: 2rem; top: 5rem; z-index: 2 } .in_choose .txt h3.t { padding-left: 3rem; font-size: 2rem } .in_choose .txt h3.t:before { width: 26px; height: 2px; line-height: 2px; left: 0; top: 15px } .in_choose .txt .des { font-size: 1.4rem; margin: 3rem 0; padding-left: 3rem } .in_choose .txt .viewmore { margin-left: 3rem } .in_choose .right { padding: 5.5rem 0 0 5.5rem } .in_choose .right .list { padding: 0 5.5rem 5.5rem 0 } .in_choose .right .list span.title { font-size: 1.4rem; line-height: 2rem } .in_choose .right .list span.des { font-size: 1.2rem } } @media (min-width: 1400px) { .in_choose .txt { padding: 11rem 4rem 2rem 7rem; position: relative } .in_choose .txt h6.t2 { font-size: 4.2rem; width: 120%; position: absolute; left: 7rem; top: 5rem; z-index: 2 } .in_choose .txt h3.t { padding-left: 3rem; font-size: 2rem } .in_choose .txt h3.t:before { width: 26px; height: 2px; line-height: 2px; left: 0; top: 15px } .in_choose .txt .des { font-size: 1.4rem; margin: 5rem 0; padding-left: 3rem } .in_choose .txt .viewmore { margin-left: 3rem } .in_choose .right { padding: 7rem 0 0 7rem } .in_choose .right .list { padding: 0 7rem 7rem 0 } .in_choose .right .list span.title { font-size: 1.4rem; line-height: 2rem } .in_choose .right .list span.des { font-size: 1.2rem } } @media (min-width: 1800px) { .in_choose .txt { padding: 22rem 8rem 2rem 4.5rem; position: relative } .in_choose .txt h6.t2 { font-size: 6rem; width: 120%; position: absolute; left: 4.5rem; top: 11rem; z-index: 2 } .in_choose .txt h3.t { padding-left: 8rem; font-size: 2.4rem } .in_choose .txt h3.t:before { width: 58px; height: 2px; line-height: 2px; left: 0; top: 18px } .in_choose .txt .des { font-size: 1.4rem; margin: 5rem 0; padding-left: 8rem; line-height: 3rem } .in_choose .txt .viewmore { margin-left: 8rem } .in_choose .right { padding: 11rem 0 0 11rem } .in_choose .right .list { padding: 0 11rem 11rem 0 } .in_choose .right .list span.title { font-size: 1.6rem; line-height: 3rem } .in_choose .right .list span.des { font-size: 1.4rem } } .in_project { padding-top: 2; padding-right: rem; padding-bottom: 0; padding-left: rem; } .in_project .list { padding: 0 } .in_project .list a { display: block; position: relative } .in_project .list a span { display: block } .in_project .list a span.txt { color: #fff; padding: 1rem 0 0 1rem; background: rgba(0,0,0,0.7); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2 } .in_project .list a span.txt .des { height: 100%; position: relative } .in_project .list a span.txt .des h3 { margin: 0; padding: 0; font-size: 2rem } .in_project .list a span.txt .des h3 span { text-transform: uppercase; font-size: 1.2rem } .in_project .list a span.txt .des h3::after { content: ''; display: block; margin-top: 1rem; width: 4rem; height: 2px; line-height: 2px; background: #fff } .in_project .list a span.txt .des p { display: none } .in_project .list a span.txt .des span.more { position: absolute; left: 0; bottom: 1rem; z-index: 2 } .in_project .list a span.txt .des span.more i { display: block; width: 60px; height: 40px; border: 1px solid #fff; position: relative } .in_project .list a span.txt .des span.more i span { display: none } .in_project .list a span.txt .des span.more i::after { content: ''; display: block; width: 30px; height: 8px; background: url(../images/arrow_long.png) 0 0 no-repeat; position: absolute; left: 50%; top: 50%; margin-left: -15px; margin-top: -4px } @media (min-width: 1200px) { .in_project { padding: 2rem } .in_project .list { padding: 0 } .in_project .list a span.txt { padding: 2rem 0 0 2rem; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s } .in_project .list a span.txt .des h3 { font-size: 2.4rem } .in_project .list a span.txt .des h3 span { font-size: 1.6rem } .in_project .list a span.txt .des h3::after { margin-top: 1rem; width: 4rem; height: 2px; line-height: 2px } .in_project .list a span.txt .des p { display: block; font-size: 12px; padding-right: 2rem; opacity: .7; filter: alpha(opacity=70) } .in_project .list a span.txt .des span.more { bottom: 2rem } .in_project .list a span.txt .des span.more i { width: 60px; height: 40px; position: relative; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_project .list a span.txt .des span.more i span { display: block; float: left; font-size: 1.2rem; font-style: normal; text-align: center; width: 90px; height: 38px; line-height: 38px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_project .list a span.thumb { width: 100%; height: 100%; overflow: hidden } .in_project .list a span.thumb img { width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s } .in_project .list a:hover span.txt { background: transparent } .in_project .list a:hover span.txt .des span.more i { width: 140px; height: 40px; position: relative; border-color: #151515; background: #151515 } .in_project .list a:hover span.txt .des span.more i span { display: block; opacity: 1; filter: alpha(opacity=100) } .in_project .list a:hover span.txt .des span.more i::after { position: absolute; left: auto; right: 2rem; top: 50%; margin-top: -4px } .in_project .list a:hover span.thumb img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } } @media (min-width: 1400px) { .in_project { padding: 7rem } .in_project .list { padding: 0 } .in_project .list a span.txt { padding: 3rem 0 0 3rem } .in_project .list a span.txt .des h3::after { margin-top: 1rem } .in_project .list a span.txt .des p { padding-right: 3rem } .in_project .list a span.txt .des span.more { bottom: 3rem } .in_project .list a span.txt .des span.more i { width: 60px; height: 40px } .in_project .list a span.txt .des span.more i span { width: 90px; height: 38px; line-height: 38px } .in_project .list a:hover span.txt .des span.more i { width: 140px; height: 40px } } @media (min-width: 1800px) { .in_project { padding: 12rem } .in_project .list { padding: 0 } .in_project .list a span.txt { padding: 4rem 0 0 4rem } .in_project .list a span.txt .des h3::after { margin-top: 3rem } .in_project .list a span.txt .des p { padding-right: 4rem; font-size: 1.4rem; line-height: 2.6rem } .in_project .list a span.txt .des span.more { bottom: 4rem } .in_project .list a span.txt .des span.more i { width: 80px; height: 50px } .in_project .list a span.txt .des span.more i span { width: 90px; height: 48px; line-height: 48px } .in_project .list a:hover span.txt .des span.more i { width: 140px; height: 50px } } .in_customer { background: #eee; padding: 2rem } .in_customer h3.t { margin: 0; padding: 0; text-align: center; color: #000; font-size: 2rem } .in_customer h3.t span { display: block; text-transform: uppercase; font-size: 1.2rem } .list_customer { padding-top: 40px } .list_customer div { padding: 0 2px 2px 0 } .list_customer div[class*=am-u-]+[class*=am-u-]:last-child { float: left } .list_customer div a { display: block; position: relative; z-index: 2; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .list_customer div a:hover { -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1); z-index: 3 } @media (min-width: 1200px) { .in_customer h3.t { font-size: 2.4rem } .in_customer h3.t span { font-size: 1.6rem } } @media (min-width: 1400px) { .in_customer { padding: 7rem } .in_customer h3.t { font-size: 2.4rem } .in_customer h3.t span { font-size: 1.6rem } } @media (min-width: 1800px) { .in_customer { padding: 7rem 12rem } .in_customer h3.t { font-size: 2.4rem } .in_customer h3.t span { font-size: 1.6rem } } .in_news .title { padding: 2rem } .in_news .title .am-fl h3.t { margin: 0; padding: 0; font-size: 2rem; color: #000 } .in_news .title .am-fl h3.t span { display: block; font-size: 1.2rem; text-transform: uppercase } .in_news .title .am-fl a { display: inline-block; font-size: 1.4rem; padding-left: 22px; margin-right: 1rem; position: relative } .in_news .title .am-fl a::before { content: ''; display: block; width: 17px; height: 2px; line-height: 2px; background: #000; position: absolute; left: 0; top: 11px } .in_news .title .am-fr { margin-top: 40px } .in_news_w { padding: 0 0 2rem 2rem } .in_news_w .list { padding: 0 2rem 2rem 0 } .in_news_w .list a { display: block } .in_news_w .list a span { display: block } .in_news_w .list a span.txt { padding-top: 1rem } .in_news_w .list a span.txt em { display: block; font-style: normal; font-size: 1.2rem; font-family: 'btb' } .in_news_w .list a span.txt b { display: block; font-size: 1.2rem; height: 4rem; line-height: 2rem } @media (min-width: 1000px) { .in_news .title .am-fr { margin-top: 30px } } @media (min-width: 1200px) { .in_news .title { padding: 2rem } .in_news .title .am-fl h3.t { font-size: 2.4rem; padding-bottom: 1rem } .in_news .title .am-fl h3.t span { font-size: 1.6rem } .in_news .title .am-fl a { font-weight: bold; margin-right: 1.5rem } .in_news .title .am-fr { margin-top: 56px } .in_news_w { padding: 0 0 2rem 2rem } .in_news_w .list { padding: 0 2rem 2rem 0 } .in_news_w .list a span.thumb { width: 100%; height: 100%; overflow: hidden } .in_news_w .list a span.thumb img { width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s } .in_news_w .list a span.txt { padding-top: 1rem } .in_news_w .list a span.txt em { font-size: 1.4rem; padding-left: 22px; margin-right: 1rem; position: relative; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_news_w .list a span.txt em::before { content: ''; display: block; width: 17px; height: 2px; line-height: 2px; background: #000; position: absolute; left: 0; top: 10px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_news_w .list a span.txt b { font-size: 1.4rem; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_news_w .list a:hover span.thumb img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } .in_news_w .list a:hover span.txt em::before { background: #e60012 } } @media (min-width: 1400px) { .in_news .title { padding: 7rem 7rem 3rem 7rem } .in_news .title .am-fr { margin-top: 56px } .in_news_w { padding: 0 5rem 7rem 7rem } .in_news_w .list { padding: 0 2rem 2rem 0 } } @media (min-width: 1800px) { .in_news .title { padding: 12rem 12rem 3rem 12rem } .in_news .title .am-fr { margin-top: 40px } .in_news_w { padding: 0 10rem 12rem 12rem } .in_news_w .list { padding: 0 2rem 2rem 0 } } footer { background: #000; text-align: center; overflow: hidden } .foot_copy { padding: 2rem 0; color: #fff; font-size: 1.2rem } .foot_copy .logo { width: 150px; margin: 0 auto } .foot_copy a { color: #fff } .foot_contact { padding: 1rem 0 } .foot_contact span { display: inline-block; padding-left: 22px; margin-right: 10px } .foot_contact span:last-child { margin-right: 0 } .foot_contact span.phone { background: url(../images/icon_phone.png) left center no-repeat } .foot_contact span.address { background: url(../images/icon_house.png) left center no-repeat } @media (min-width: 1200px) { .foot_copy { padding: 4rem 0; font-size: 1.4rem } .foot_copy .logo { width: 210px } } @media (min-width: 1400px) { .foot_copy { padding: 6rem 0 } } .in_price { padding: 2rem 0 2rem 2rem; overflow: hidden; background: url(../images/in_price_bg.png) repeat } .in_price .title h3 { font-size: 2rem; text-align: left } .in_price .page_form input { margin-bottom: 2rem; color: #6e6e6e; font-size: 14px; padding: 1.5rem 1rem; border: 1px solid #fff } .in_price .page_form input:focus { border: 1px solid #fff } .in_price .page_form .text1, .in_price .page_form .text2 { display: block; width: 50%; float: left; padding-right: 2rem } .in_price .page_form .text3 { clear: both; width: 70%; float: left; padding-right: 2rem } .in_price .page_form .submit { width: 30%; float: left; padding-right: 2rem } .in_price .page_form .submit input { width: 100%; background: #040404; color: #fff; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .in_price .page_form .submit input:hover { background: #e60012; color: #fff } .in_price .page_form i { display: block; color: #8f8f8f; font-size: 12px; text-align: left; font-style: normal } @media (min-width: 1400px) { .in_price { padding: 5rem 0 5rem 7rem } .in_price .title h3 { font-size: 2.4rem } .in_price .page_form .text1, .in_price .page_form .text2 { width: 25%; padding-right: 2rem } .in_price .page_form .text3 { clear: none; width: 30%; padding-right: 2rem } .in_price .page_form .submit { width: 20%; padding-right: 7rem } } @media (min-width: 1800px) { .in_price { padding: 7rem 0 7rem 12rem } .in_price .page_form .text1, .in_price .page_form .text2 { width: 25%; padding-right: 2rem } .in_price .page_form .text3 { clear: none; width: 30%; padding-right: 2rem } .in_price .page_form .submit { width: 20%; padding-right: 12rem } } .sub_nav { padding: 0 2rem; background: #f1f1f1; height: 6rem; position: absolute; left: 2rem; right: 2rem; bottom: -3rem } .sub_nav h3.title { margin: 0; padding: 0; margin-top:.7rem; font-size: 2rem } .sub_nav h3.title span { display: block; font-size: 1.4rem; text-transform: uppercase } .sub_nav .list { text-align: right } .sub_nav .list ul { margin: 0; padding: 0 } .sub_nav .list ul li { display: inline-block; line-height: 3rem; margin-top: 1.5rem; font-size: 1.6rem } .sub_nav .list ul li:last-child { margin-right: 0 } .sub_nav .list ul li a { display: block; font-size: 1.4rem; font-weight: bold; padding:0 .5rem 0 3rem; color: #333; position: relative; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .sub_nav .list ul li a::before { content: ' '; width: 16px; height: 2px; line-height: 2px; background: #000; position: absolute; left:.5rem; top: 50%; margin-top: -1px; z-index: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .sub_nav .list ul li a span { position: relative; z-index: 2 } .sub_nav .list ul li a::after { content: ' '; width: 0; height: 3rem; position: absolute; left: 0; top: 0; z-index: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .sub_nav .list ul li a:hover, .sub_nav .list ul li a.cur { color: #fff } .sub_nav .list ul li a:hover::before, .sub_nav .list ul li a.cur::before { background: #fff } .sub_nav .list ul li a:hover::after, .sub_nav .list ul li a.cur::after { width: 100%; background: #e60012 } @media (min-width: 1000px) { .sub_nav { padding: 0 4rem; height: 8rem; position: absolute; left: 2rem; right: 2rem; bottom: -4rem } .sub_nav h3.title { margin-top: 1.5rem; font-size: 2rem } .sub_nav h3.title span { font-size: 1.4rem } .sub_nav .list ul li { line-height: 3rem; margin-top: 2.5rem; margin-right: 1rem; font-size: 1.4rem } .sub_nav .list ul li a { font-size: 1.4rem } } @media (min-width: 1400px) { .sub_nav { padding: 0 4rem; height: 8rem; position: absolute; left: 7rem; right: 7rem; bottom: -4rem } .sub_nav h3.title { margin-top: 1.2rem; font-size: 2.4rem } .sub_nav h3.title span { font-size: 1.8rem } .sub_nav .list ul li { line-height: 3rem; margin-top: 2.5rem; margin-right: 1rem; font-size: 1.4rem } .sub_nav .list ul li a { font-size: 1.4rem; padding:0 .5rem 0 3rem } .sub_nav .list ul li a::after { height: 3rem } } @media (min-width: 1800px) { .sub_nav { padding: 0 5rem; height: 10rem; position: absolute; left: 12rem; right: 12rem; bottom: -5rem } .sub_nav h3.title { margin-top: 2.4rem; font-size: 2.4rem } .sub_nav h3.title span { font-size: 1.8rem } .sub_nav .list ul li { line-height: 4rem; margin-top: 3rem; margin-right: 2rem; font-size: 1.6rem } .sub_nav .list ul li a { font-size: 1.6rem; padding: 0 2rem 0 4rem } .sub_nav .list ul li a::before { left: 1.5rem } .sub_nav .list ul li a::after { height: 4rem } } .title01 { margin: 0; padding: 0; font-size: 2rem } .title01 span { display: block; text-transform: uppercase; font-size: 1.6rem; font-family: 'btb' } .title01 b { position: relative; padding-left: 2rem } .title01 b::before { content: ' '; width: 16px; height: 2px; line-height: 2px; background: #000; position: absolute; left: 0; top: 50%; margin-top: -1px; z-index: 1 } @media (min-width: 1000px) { .title01 b { padding-left: 3rem } .title01 b::before { content: ' '; width: 2rem } } @media (min-width: 1200px) { .title01 { font-size: 2.4rem } .title01 span { font-size: 2.2rem } .title01 b { padding-left: 6rem } .title01 b::before { content: ' '; width: 4rem } } @media (min-width: 1800px) { .title01 span { margin-bottom: 2rem } } .intro_about { padding: 5rem 2rem 2rem } .intro_profile { background: #f5f5f5 } .intro_profile .thumb { width: 50% } .intro_profile .txt { width: 50%; padding: 2rem } .intro_profile .txt .des { font-size: 1.3rem; line-height: 2rem; margin: 1rem 0; color: #333 } .intro_profile .txt .des b { display: block } .intro_choosegood { background: #090708 } .intro_choosegood .thumb { width: 50% } .intro_choosegood .txt { background: #fff; width: 50%; padding: 2rem 2rem 2rem 0 } .intro_choosegood .txt .des { font-size: 1.3rem; line-height: 2rem; margin: 1rem 0; color: #333 } @media (min-width: 1000px) { .intro_about { padding: 6rem 2rem 2rem } .intro_profile { background: #f5f5f5 } .intro_profile .thumb { width: 40% } .intro_profile .txt { width: 60%; padding: 4rem } .intro_profile .txt .des { font-size: 1.3rem; line-height: 2rem; margin: 2rem 0; padding-left: 30px } .intro_profile .txt a.viewmore { margin-left: 30px } .intro_choosegood { background: #fff } .intro_choosegood .thumb { width: 60% } .intro_choosegood .txt { background: #fff; width: 40%; padding: 2rem 4rem 2rem 0 } .intro_choosegood .txt .des { font-size: 1.3rem; line-height: 2rem; margin: 2rem 0; padding-left: 30px } .intro_choosegood .txt a.viewmore { margin-left: 30px } } @media (min-width: 1200px) { .intro_profile .thumb { width: 40% } .intro_profile .txt { width: 60%; padding: 4rem } .intro_profile .txt .des { font-size: 1.4rem; line-height: 2.4rem; margin: 4rem 0; padding-left: 6rem } .intro_profile .txt .des b { margin-bottom: 1rem; font-size: 1.5rem } .intro_profile .txt a.viewmore { margin-left: 6rem } .intro_choosegood { background: #fff } .intro_choosegood .thumb { width: 60% } .intro_choosegood .txt { background: #fff; width: 40%; padding: 2rem 4rem 2rem 0 } .intro_choosegood .txt .des { font-size: 1.4rem; line-height: 2.4rem; margin: 4rem 0; padding-left: 6rem } .intro_choosegood .txt a.viewmore { margin-left: 6rem } } @media (min-width: 1400px) { .intro_about { padding: 8rem 7rem 4rem } } @media (min-width: 1800px) { .intro_about { padding: 10rem 12rem 5rem } .intro_profile .thumb { width: 35% } .intro_profile .txt { width: 65%; padding: 7rem } .intro_profile .txt .des { font-size: 1.4rem; line-height: 2.4rem; margin: 4rem 0; padding: 0 5rem 0 6rem } .intro_profile .txt .des b { margin-bottom: 2rem; font-size: 1.8rem } .intro_profile .txt a.viewmore { margin-left: 6rem } .intro_choosegood { background: #fff } .intro_choosegood .thumb { width: 65% } .intro_choosegood .txt { background: #fff; width: 35%; padding: 10rem 0rem 4rem 0 } .intro_choosegood .txt .des { font-size: 1.4rem; line-height: 2.4rem; margin: 4rem 0; padding: 0 7rem 0 6rem } .intro_choosegood .txt a.viewmore { margin-left: 6rem } } .doc_content { padding: 5rem 2rem 2rem } .doc_w { background: #f5f5f5; padding: 2rem } .page_w .photo1 { float:left; width: 38%; padding-top: 30px; } .page_w .des { float:right; font-size: 1.3rem; line-height: 2rem; color: #333; width: 62%; margin-top: 1px; margin-right: rem; margin-bottom: 0; margin-left: 0; } @media (min-width: 1000px) { .doc_content { padding: 6rem 2rem 2rem } .doc_w { padding: 4rem } .page_w .des { } } @media (min-width: 1400px) { .doc_content { padding: 8rem 7rem 4rem } .doc_w { padding: 4rem } .page_w .des { font-size: 1.4rem; line-height: 2.4rem } } @media (min-width: 1800px) { .doc_content { padding: 10rem 12rem 5rem } .doc_w { padding: 5rem } .page_w .des { margin: 5rem 0 0; font-size: 1.4rem; line-height: 2.4rem } } .list_case { padding-top: 5rem } @media (min-width: 1000px) { .list_case { padding-top: 6rem } } @media (min-width: 1400px) { .list_case { padding-top: 8rem; padding-bottom: 4rem } } @media (min-width: 1800px) { .list_case { padding-top: 10rem; padding-bottom: 4rem } } .content_case { background: #f1f1f1 } .content_case .txt { padding: 6rem 2rem 2rem 2rem; position: relative; z-index: 100 } .content_case .txt h1.title { margin:.5rem 0; font-size: 2rem; position: relative; padding-left: 2rem } .content_case .txt h1.title::before { content: ' '; width: 16px; height: 2px; line-height: 2px; background: #000; position: absolute; left: 0; top: 50%; margin-top: -1px; z-index: 1 } .content_case .txt .des { font-size: 1.2rem; line-height: 1.8rem; color: #333 } .content_case .txt .case_link { margin: 1rem 0 0 } .content_case .txt .case_link a { display: inline-block; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; margin-right: 2rem; border: 1px solid #000; -moz-border-radius: 1.5rem; -webkit-border-radius: 1.5rem; border-radius: 1.5rem; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .content_case .txt .case_link a:hover { border-color: #e60012; color: #e60012 } .case_pagenav a { font-size: 1.4rem; font-family: 'btb' } .case_pagenav a i { display: inline-block; width: 14px; height: 10px; background-image: url("../images/case_arrow.png"); background-repeat: no-repeat; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .case_pagenav a.prev i { margin-right:.5rem; background-position: 0 0 } .case_pagenav a.next i { margin-left:.5rem; background-position: -14px -10px } .case_pagenav a:hover.prev i { background-position: -14px 0 } .case_pagenav a:hover.next i { background-position: 0 -10px } @media (min-width: 1000px) { .content_case .txt { padding: 8rem 2rem 2rem 2rem } .content_case .txt h1.title { margin: 1rem 0; font-size: 2.4rem; padding-left: 3rem } .content_case .txt h1.title::before { width: 28px } .content_case .txt .des { font-size: 1.4rem; line-height: 2rem } .content_case .txt .case_link { margin: 3rem 0 0 } .content_case .txt .case_link a { width: 4rem; height: 4rem; line-height: 4rem; margin-right: 2rem; -moz-border-radius: 2rem; -webkit-border-radius: 2rem; border-radius: 2rem } .case_pagenav a { font-size: 1.6rem } } @media (min-width: 1200px) { .content_case .txt { padding: 12rem 2rem 2rem 2rem } .content_case .txt h1.title { margin: 2rem 0; font-size: 2.4rem; padding-left: 4rem } .content_case .txt h1.title::before { width: 28px } .content_case .txt .des { font-size: 1.4rem; line-height: 2rem; padding: 0 0 0 4rem } .content_case .txt .case_link { margin: 3rem 0 0 4rem } .content_case .txt .case_link a { width: 4rem; height: 4rem; line-height: 4rem; margin-right: 2rem; -moz-border-radius: 2rem; -webkit-border-radius: 2rem; border-radius: 2rem } .case_pagenav a { font-size: 1.6rem; margin-right: 2rem } } @media (min-width: 1400px) { .content_case .txt { padding: 14rem 6rem 2rem 2rem } .content_case .txt h1.title { margin: 2rem 0; font-size: 2.4rem; padding-left: 4rem } .content_case .txt h1.title::before { width: 28px } .content_case .txt .des { font-size: 1.4rem; line-height: 2rem; padding: 0 0 0 4rem } .content_case .txt .case_link { margin: 3rem 0 0 4rem } .content_case .txt .case_link a { width: 4rem; height: 4rem; line-height: 4rem; margin-right: 2rem; -moz-border-radius: 2rem; -webkit-border-radius: 2rem; border-radius: 2rem } .case_pagenav a { font-size: 1.6rem; margin-right: 2rem } } @media (min-width: 1800px) { .content_case .txt { padding: 20rem 6rem 2rem 5rem } .content_case .txt h1.title { margin: 5rem 0; font-size: 2.4rem; padding-left: 7rem } .content_case .txt h1.title::before { width: 58px } .content_case .txt .des { font-size: 1.6rem; line-height: 2.4rem; padding: 0 8rem 0 7rem } .content_case .txt .case_link { margin: 6rem 0 0 7rem } .content_case .txt .case_link a { width: 4rem; height: 4rem; line-height: 4rem; margin-right: 2rem; -moz-border-radius: 2rem; -webkit-border-radius: 2rem; border-radius: 2rem } .case_pagenav a { font-size: 2rem; margin-right: 2rem } } .content_case_detail { margin-top: 1rem } .content_case_detail .des { padding: 2rem; background: #f1f1f1 } @media (min-width: 1200px) { .content_case_detail { margin: 0rem; padding: 2rem } .content_case_detail .des { padding: 2rem; background: #f1f1f1 } } @media (min-width: 1400px) { .content_case_detail { margin: 0rem; padding: 7rem } .content_case_detail .des { padding: 4rem; background: #f1f1f1 } } @media (min-width: 1800px) { .content_case_detail { margin: 0rem; padding: 12rem } .content_case_detail .des { padding: 10rem; background: #f1f1f1 } } .index_business { padding: 5rem 2rem 2rem } .index_business .list { margin-bottom: 2rem } .index_business .list .thumb { width: 50%; float: left } .index_business .list .txt { width: 50%; float: right; position: relative; padding: 2rem 6rem 0 2rem } .index_business .list .txt .des { font-size: 1rem; line-height: 1.8rem; padding: 1rem 0 } .index_business .list .txt i { position: absolute; right: 0; top: 0rem } .index_business .list .txt i em { font-style: normal; position: relative; font-size: 6rem; font-family: 'btb' } .index_business .list .txt i em::after { content: ''; display: block; width: 3rem; height: 3rem; background: #fff; position: absolute; left: 0; bottom:.3rem } .index_business .list.sec .thumb { float: right } .index_business .list.sec .txt { float: left; padding: 2rem 6rem 0 0 } .index_business .list.sec .txt i { right: 2rem } @media (min-width: 1000px) { .index_business { padding: 5rem 2rem 2rem } .index_business .list .txt { padding: 2rem 6rem 0 2rem } .index_business .list .txt .des { font-size: 1.4rem; line-height: 1.8rem; padding: 2rem 0 } .index_business .list .txt i { top: 0rem } .index_business .list .txt i em { font-size: 8rem } .index_business .list .txt i em::after { width: 4rem; height: 3.2rem; left: 0; bottom: 1rem } .index_business .list.sec .txt { padding: 2rem 6rem 0 0 } .index_business .list.sec .txt i { right: 2rem } } @media (min-width: 1200px) { .index_business { padding: 6rem 2rem 2rem } .index_business .list .txt { padding: 4rem 6rem 0 6rem } .index_business .list .txt .des { font-size: 1.4rem; line-height: 1.8rem; padding: 3rem 0 } .index_business .list .txt i { top: 0rem } .index_business .list .txt i em { font-size: 12rem } .index_business .list .txt i em::after { width: 6rem; height: 3rem; left: 0; bottom: 3rem } .index_business .list.sec .txt { padding: 4rem 10rem 0 0 } .index_business .list.sec .txt i { right: 2rem } } @media (min-width: 1400px) { .index_business { padding: 8rem 7rem 4rem } .index_business .list .txt { padding: 4rem 6rem 0 6rem } .index_business .list .txt .des { font-size: 1.4rem; line-height: 1.8rem; padding: 3rem 0 3rem 6rem } .index_business .list .txt a.viewmore { margin-left: 6rem } .index_business .list .txt i { right: -1rem; top: 0rem } .index_business .list .txt i em { font-size: 12rem } .index_business .list .txt i em::after { width: 6rem; height: 3.5rem; left: 0; bottom: 3rem } .index_business .list.sec .txt { padding: 4rem 10rem 0 0 } .index_business .list.sec .txt i { right: 4rem } } @media (min-width: 1800px) { .index_business { padding: 10rem 12rem 5rem } .index_business .list { margin-bottom: 4rem } .index_business .list .txt { padding: 6rem 20rem 0 6rem } .index_business .list .txt .des { font-size: 1.4rem; line-height: 2.4rem; padding: 3rem 0 3rem 6rem } .index_business .list .txt a.viewmore { margin-left: 6rem } .index_business .list .txt i { right: -1rem; top: 0rem } .index_business .list .txt i em { font-size: 12rem } .index_business .list .txt i em::after { width: 6rem; height: 3.5rem; left: 0; bottom: 3rem } .index_business .list.sec .txt { padding: 6rem 26rem 0 0 } .index_business .list.sec .txt i { right: 4rem } } .business_list_title { background-repeat: no-repeat; background-size: 100% 100%; background-image: url(../images/index_business_list_title_bg.png); text-align: center; width: 25.5rem; margin: 0 auto; padding: 1rem 0; position: relative; transition: all 1s 1s; -webkit-transition: all 1s 1s } .business_list_title span { display: block; font-family: "impact"; font-size: 2rem; color: rgba(0,0,0,0.2) } .business_list_title h3 { margin: 0; padding: 0; font-size: 2.5rem; color: #333; font-weight: bold } .business_list_title p { margin: 0; padding: 0; font-size: 1.125rem; color: #333; text-align: center } .index_business_list { background: #f8f8f8; padding: 2rem 0 } .index_business_list .am-tabs { padding-top: 2rem } .index_business_list .am-tabs .am-nav-tabs { border: none; padding: 0 2rem; text-align: center } .index_business_list .am-tabs .am-nav-tabs>li { display: inline-block; float: none; margin: 0 1rem } .index_business_list .am-tabs .am-nav-tabs>li>a { font-size: 1.4rem; margin: 0; padding:.5rem 0; border: none; position: relative } .index_business_list .am-tabs .am-nav-tabs>li>a::after { content: ''; display: block; width: 0px; height: 1px; background: #e60012; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; position: absolute; left: 50%; bottom: 0 } .index_business_list .am-tabs .am-nav-tabs>li>a:hover { background: none; border: none } .index_business_list .am-tabs .am-nav-tabs>li>a:hover::after { width: 100%; left: 0 } .index_business_list .am-tabs .am-nav-tabs>li.am-active>a { border: none; background: none; color: #e60012 } .index_business_list .am-tabs .am-nav-tabs>li.am-active>a::after { width: 100%; left: 0 } .index_business_list .am-tabs .am-tabs-bd { border: none } .index_business_list .am-tabs .am-tabs-bd .am-tab-panel { padding: 0 } .index_business_list .am-tabs .am-tabs-bd .am-tab-panel .list_case { padding-top: 2rem } @media (min-width: 1200px) { .business_list_title { width: 28rem; padding: 1rem 0 } .business_list_title span { font-size: 3rem } .business_list_title h3 { font-size: 3.5rem } .index_business_list { padding: 5rem 0 } .index_business_list .am-tabs { padding-top: 2rem } .index_business_list .am-tabs .am-nav-tabs { padding: 0 2rem } .index_business_list .am-tabs .am-nav-tabs>li { margin: 0 1rem } .index_business_list .am-tabs .am-nav-tabs>li>a { font-size: 1.6rem } .index_business_list .am-tabs .am-tabs-bd .am-tab-panel .list_case { padding-top: 2rem } } .index_business_flow { background: #fff; padding: 2rem } .index_business_flow .list { margin-top: 2rem } .index_business_flow .list ul { margin: 0; padding: 0; width: 100%; overflow: hidden } .index_business_flow .list ul li { display: block; float: left; width: 14.3%; height: 10rem; position: relative; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li:nth-child(odd) .bg { background: #f8f8f8 } .index_business_flow .list ul li:nth-child(even) .bg { background: #f0f0f0 } .index_business_flow .list ul li .box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; text-align: center; color: #333 } .index_business_flow .list ul li .box h3 { margin: 0; padding: 0; height: 5rem; line-height: 5rem; font-size: 3rem; font-family: 'btb' } .index_business_flow .list ul li .box h4, .index_business_flow .list ul li .box i, .index_business_flow .list ul li .box p { display: none } .index_business_flow .list ul li .box h6 { margin: 0; padding: 0; margin: 0 0 1rem; height: 4rem; line-height: 2rem; font-size: 1.4rem } .index_business_flow .list ul li .bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2 } .index_business_flow .list ul li .thumb { width: 100%; height: 100% } .index_business_flow .list ul li .thumb img { width: 100%; height: 100% } .index_business_flow .list ul li.active { width: 28.5% } .index_business_flow .list ul li.active .box { color: #fff } .index_business_flow .list ul li.active .bg { background-color: rgba(192,25,42,0.7) } @media (min-width: 1000px) { .index_business_flow { padding: 2rem } .index_business_flow .list { margin-top: 2rem } .index_business_flow .list ul li { height: 20rem; cursor: pointer } .index_business_flow .list ul li .box h3 { margin: 0; padding: 0; height: 5rem; line-height: 5rem; font-size: 3rem; font-family: 'btb' } .index_business_flow .list ul li .box h4 { display: block; margin: 0; padding: 0; font-size: 1.2rem } .index_business_flow .list ul li .box i { display: block; font-style: normal; color: #e60012 } .index_business_flow .list ul li .box p { margin: 0; padding: 0; display: block; font-size: 1.2rem; margin-top: 300px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li .box h6 { margin: 0; padding: 0; margin: 0; height: 4rem; line-height: 2rem; font-size: 1.4rem; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li.active { width: 28.5% } .index_business_flow .list ul li.active .box i { display: block; font-style: normal; color: #fff } .index_business_flow .list ul li.active .box p { margin-top: 0 } .index_business_flow .list ul li.active .box h6 { margin: 0; font-size: 1.8rem; line-height: 4rem } .index_business_flow .list ul li.active .box h6 br { display: none } } @media (min-width: 1200px) { .index_business_flow { padding: 2rem } .index_business_flow .list { margin-top: 2rem } .index_business_flow .list ul li { height: 30rem; cursor: pointer } .index_business_flow .list ul li .box h3 { margin: 0; padding: 0; height: 10rem; line-height: 10rem; font-size: 6rem; font-family: 'btb' } .index_business_flow .list ul li .box h4 { display: block; margin: 0; padding: 0; font-size: 1.2rem } .index_business_flow .list ul li .box i { display: block; font-style: normal; color: #e60012; margin: 2rem 0 } .index_business_flow .list ul li .box p { margin: 0; padding: 0; display: block; font-size: 1.2rem; margin-top: 300px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li .box h6 { margin: 0; padding: 0; margin: 0; height: 4rem; line-height: 2rem; font-size: 1.4rem; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li.active { width: 28.5% } .index_business_flow .list ul li.active .box i { display: block; font-style: normal; color: #fff } .index_business_flow .list ul li.active .box p { margin-top: 0 } .index_business_flow .list ul li.active .box h6 { margin: 0; font-size: 1.8rem; line-height: 4rem } .index_business_flow .list ul li.active .box h6 br { display: none } } @media (min-width: 1400px) { .index_business_flow { padding: 7rem } .index_business_flow .list { margin-top: 7rem } .index_business_flow .list ul li { height: 30rem; cursor: pointer } .index_business_flow .list ul li .box h3 { margin: 0; padding: 0; height: 10rem; line-height: 10rem; font-size: 6rem; font-family: 'btb' } .index_business_flow .list ul li .box h4 { display: block; margin: 0; padding: 0; font-size: 1.2rem } .index_business_flow .list ul li .box i { display: block; font-style: normal; color: #e60012; margin: 2rem 0 } .index_business_flow .list ul li .box p { margin: 0; padding: 0; display: block; font-size: 1.2rem; margin-top: 300px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li .box h6 { margin: 0; padding: 0; margin: 0; height: 4rem; line-height: 2rem; font-size: 1.4rem; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li.active { width: 28.5% } .index_business_flow .list ul li.active .box i { display: block; font-style: normal; color: #fff } .index_business_flow .list ul li.active .box p { margin-top: 0 } .index_business_flow .list ul li.active .box h6 { margin: 0; font-size: 2.4rem; line-height: 4rem } .index_business_flow .list ul li.active .box h6 br { display: none } } @media (min-width: 1800px) { .index_business_flow { padding: 12rem } .index_business_flow .list { margin-top: 12rem } .index_business_flow .list ul li { height: 40rem; cursor: pointer } .index_business_flow .list ul li .box h3 { margin: 0; padding: 0; height: 14rem; line-height: 14rem; font-size: 8rem; font-family: 'btb' } .index_business_flow .list ul li .box h4 { display: block; margin: 0; padding: 0; font-size: 1.2rem } .index_business_flow .list ul li .box i { display: block; font-style: normal; color: #e60012; margin: 2rem 0; font-size: 2rem } .index_business_flow .list ul li .box p { margin: 0; padding: 0; display: block; font-size: 1.4rem; line-height: 2rem; margin-top: 300px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li .box h6 { margin: 0; padding: 0; margin: 4rem 0 0; height: 6rem; line-height: 3rem; font-size: 2rem; font-family: "微软雅黑 light"; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .index_business_flow .list ul li.active { width: 28.5% } .index_business_flow .list ul li.active .box i { display: block; font-style: normal; color: #fff } .index_business_flow .list ul li.active .box p { margin-top: 0 } .index_business_flow .list ul li.active .box h6 { margin: 0; font-size: 2.4rem; line-height: 4rem } .index_business_flow .list ul li.active .box h6 br { display: none } } .index_business_about { background: url(../images/index_business_about.jpg) center top no-repeat; padding: 2rem 0 } .index_business_about .business_list_title span { color: rgba(255,255,255,0.2) } .index_business_about .business_list_title h3 { color: #fff } .index_business_about .business_list_title p { color: #fff } .index_business_about .list_txt { padding: 2rem } .index_business_about .list_txt ul { margin: 0; padding: 0; width: 100%; overflow: hidden } .index_business_about .list_txt ul li { display: block; width: 33.333%; float: left; text-align: center; color: #fff } .index_business_about .list_txt ul li h4 { margin: 0; padding: 0; font-family: "impact"; font-size: 4rem } .index_business_about .list_txt ul li em { display: block; font-size: 1.2rem; font-style: normal; padding-bottom: 1rem } .index_business_about .list_txt ul li p { margin: 0; padding: 0; font-size: 1.2rem } .index_business_about .list_img { padding: 2rem 2rem 0 } .index_business_about .viewmore { margin: 2rem auto 0 } @media (min-width: 1200px) { .index_business_about { padding: 2rem 0 } .index_business_about .list_txt { padding: 2rem } .index_business_about .list_txt ul li h4 { font-size: 6rem } .index_business_about .list_txt ul li em { display: block; font-size: 1.2rem; font-style: normal; padding-bottom: 1rem } .index_business_about .list_txt ul li p { margin: 0; padding: 0; font-size: 1.2rem } .index_business_about .list_img { padding: 2rem 2rem 0 } .index_business_about .list_img .thumb { display: block; width: 100%; height: 100%; overflow: hidden } .index_business_about .list_img .thumb img { width: 100%; height: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s } .index_business_about .list_img .thumb:hover img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) } } @media (min-width: 1400px) { .index_business_about { padding: 7rem 0 } .index_business_about .list_txt { padding: 7rem 7rem 2rem } .index_business_about .list_txt ul li h4 { font-size: 6rem } .index_business_about .list_txt ul li em { display: block; font-size: 1.2rem; font-style: normal; padding-bottom: 1rem } .index_business_about .list_txt ul li p { margin: 0; padding: 0; font-size: 1.2rem } .index_business_about .list_img { padding: 2rem 7rem 0 } .index_business_about .viewmore { margin: 4rem auto 0 } } @media (min-width: 1800px) { .index_business_about { padding: 12rem 0 } .index_business_about .list_txt { padding: 6rem 12rem 4rem } .index_business_about .list_txt ul li h4 { font-size: 6rem; padding: 1rem 0 } .index_business_about .list_txt ul li em { display: block; font-size: 1.4rem; font-style: normal; padding-bottom: 1rem } .index_business_about .list_txt ul li p { margin: 0; padding: 0; font-size: 1.4rem } .index_business_about .list_img { padding: 2rem 12rem 0 } .index_business_about .viewmore { margin: 6rem auto 0 } } .list_news { padding-top: 5rem } @media (min-width: 1000px) { .list_news { padding-top: 6rem } } @media (min-width: 1400px) { .list_news { padding-top: 8rem } } @media (min-width: 1800px) { .list_news { padding-top: 10rem } } .news_d { padding: 5rem 2rem 2rem } .news_d .news_d_t { border-bottom: 1px solid #999 } .news_d .news_d_t .title h1 { margin: 0; padding: 0; font-size: 2rem } .news_d .news_d_t .title span { display: block; font-size: 1.2rem; padding: 1rem 0 2rem; color: #999 } .news_d .news_d_t .link { font-size: 1.2rem; padding-top: 3.5rem } .news_d .news_d_t .link a { display: inline-block; margin-left: 2rem; color: #999; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s } .news_d .news_d_t .link a:hover { color: #e60012 } .news_d .news_d_w { padding: 2rem 0; font-size: 1.4rem; line-height: 2.4rem } @media (min-width: 1000px) { .news_d { padding: 6rem 2rem 2rem } } @media (min-width: 1400px) { .news_d { padding: 8rem 7rem 2rem } } @media (min-width: 1800px) { .news_d { padding: 10rem 12rem 2rem } } .page_contact { padding: 5rem 2rem 2rem } .page_contact .list { text-align: center } .page_contact .list ul { margin: 0; padding: 0; width: 100%; overflow: hidden } .page_contact .list ul li { display: block; width: 20%; float: left; font-size: 1.4rem; color: #333; font-weight: lighter } .page_contact .list ul li img { margin: 0 auto; padding-bottom: 1rem } .page_contact .list ul li b { display: block; font-size: 1.6rem; font-weight: normal; color: #000 } .page_contact .col { padding: 4rem 0 2rem; font-size: 1.2rem } .page_contact .col .sub_company { padding-right: 2rem } .page_contact .col .sub_company b { display: block } #map01 { width: 100%; height: 410px; font-size: 1.4rem } @media (min-width: 1000px) { .page_contact { padding: 6rem 2rem 2rem } .page_contact .col { font-size: 1.4rem } #map01 { width: 100%; height: 540px } } @media (min-width: 1400px) { .page_contact { padding: 8rem 7rem 2rem } .page_contact .col { padding: 8rem 0 6rem } #map01 { width: 100%; height: 520px } } @media (min-width: 1800px) { .page_contact { padding: 10rem 12rem 2rem } .page_contact .col { padding: 12rem 0 10rem; font-size: 1.6rem } #map01 { width: 100%; height: 560px } } @media screen and (max-width:1024px) { .page_w .photo1 { width: 100%; padding-bottom:20px; } .page_w .photo1 img { width: 100%; height:auto; } .page_w .des { width: 100%; } } @media screen and (max-width:1600px) { .page_w .photo1 img { width: 100%; height:auto; } .page_w .des { width: 68%; margin: 4rem 0 0; } } @media screen and (max-width:1440px) { .page_w .photo1 img { width: 100%; height:auto; } .page_w .des { width: 68%; margin: 4rem 0 0; } } /* 浮动工具 */ #common-tool { margin-top: 278px; position: absolute; top: 78px; right: 0; z-index: 9999 } #common-tool ul { list-style: none } #common-tool ul li { background: #da0c0c; margin: 3px 0 0 0; _margin: 0; *margin:0; width: 40px; height: 40px; overflow: hidden; } #common-tool ul li a { display: block; padding: 5px } #common-tool ul li a:hover { background: #ffd401; } #common-top-ico { display: none } .common-tel { display: none; position: absolute; right: 50px; top: 3px; padding: 5px; background: #FFF; border: 1px solid #EEE } .common-sweep-box { display: none; position: absolute; right: 50px; top: 3px; padding: 5px; background: #FFF; border: 1px solid #EEE } .common-sweep-box img { width: 196px; height: 196px; }