/* bourbon framework */
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */
.animated { -webkit-animation-duration: 1s; 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; }

.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; }

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

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse { from { -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); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes pulse { from { -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); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
.pulse { -webkit-animation-name: pulse; animation-name: pulse; }

@-webkit-keyframes rubberBand { from { -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); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes rubberBand { from { -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); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; }

@-webkit-keyframes shake { from, to { -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 { from, to { -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); } }
.shake { -webkit-animation-name: shake; animation-name: shake; }

@-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); }
  18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); }
  31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); }
  43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); }
  50% { -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); }
  18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); }
  31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); }
  43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); }
  50% { -webkit-transform: translateX(0); transform: translateX(0); } }
.headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; }

@-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); }
  to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); }
  to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } }
.swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; }

@-webkit-keyframes tada { from { -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); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
@keyframes tada { from { -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); }
  to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }
.tada { -webkit-animation-name: tada; animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble { from { -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); }
  to { -webkit-transform: none; transform: none; } }
@keyframes wobble { from { -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); }
  to { -webkit-transform: none; transform: none; } }
.wobble { -webkit-animation-name: wobble; animation-name: wobble; }

@-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; }
  22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } }
@keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; }
  22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } }
.jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; }

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

@-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
  75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
  to { -webkit-transform: none; transform: none; } }
@keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
  75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
  to { -webkit-transform: none; transform: none; } }
.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); }
  75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
  90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); }
  to { -webkit-transform: none; transform: none; } }
@keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); }
  75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }
  90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); }
  to { -webkit-transform: none; transform: none; } }
.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); }
  75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); }
  90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); }
  to { -webkit-transform: none; transform: none; } }
@keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); }
  75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); }
  90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); }
  to { -webkit-transform: none; transform: none; } }
.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); }
  60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); }
  to { -webkit-transform: 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); }
  to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } }
@keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } }
.bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } }
@keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }
  40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } }
.bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); }
  to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } }
@keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); }
  to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } }
.bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); }
  to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } }
@keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); }
  to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } }
.bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } }
@keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
  40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }
  to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } }
.bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

@-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut { from { opacity: 1; }
  to { opacity: 0; } }
@keyframes fadeOut { from { opacity: 1; }
  to { opacity: 0; } }
.fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }
@keyframes fadeOutDown { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }
.fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } }
@keyframes fadeOutDownBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } }
.fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }
@keyframes fadeOutLeft { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }
.fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } }
@keyframes fadeOutLeftBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } }
.fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } }
@keyframes fadeOutRight { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } }
.fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } }
@keyframes fadeOutRightBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } }
.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutUp { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } }
.fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } }
@keyframes fadeOutUpBig { from { opacity: 1; }
  to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } }
.fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; }

@-webkit-keyframes flip { from { -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; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } }
@keyframes flip { from { -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; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } }
.animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; }

@-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); } }
@keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); } }
.flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; }

@-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); } }
@keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); } }
.flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; }

@-webkit-keyframes flipOutX { from { -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; }
  to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } }
@keyframes flipOutX { from { -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; }
  to { -webkit-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-backface-visibility: visible !important; backface-visibility: visible !important; }

@-webkit-keyframes flipOutY { from { -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; }
  to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } }
@keyframes flipOutY { from { -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; }
  to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } }
.flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; }
  80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; }
  to { -webkit-transform: none; transform: none; opacity: 1; } }
@keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; }
  80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; }
  to { -webkit-transform: 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 { from { opacity: 1; }
  to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } }
@keyframes lightSpeedOut { from { opacity: 1; }
  to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } }
.lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } }
@keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; }
  to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } }
.rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } }
@keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } }
.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } }
@keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } }
.rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } }
@keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } }
.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } }
@keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } }
.rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; }
  to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } }
@keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; }
  to { -webkit-transform-origin: center; transform-origin: center; -webkit-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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; }
  to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; }
  to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; }
  to { -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 { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; }
  to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; }
  to { -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 { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; }
  to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-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; }
  to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } }
@keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -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; }
  to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } }
.hinge { -webkit-animation-name: hinge; animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to { opacity: 1; -webkit-transform: none; transform: none; } }
.rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut { from { opacity: 1; }
  to { 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 { from { opacity: 1; }
  to { opacity: 0; -webkit-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 { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }
.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }

@-webkit-keyframes zoomInDown { from { 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 { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; }

@-webkit-keyframes zoomInLeft { from { 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 { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; }

@-webkit-keyframes zoomInRight { from { 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 { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
.zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; }

@-webkit-keyframes zoomInUp { from { 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 { from { 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); } }
.zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; }

@-webkit-keyframes zoomOut { from { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  to { opacity: 0; } }
@keyframes zoomOut { from { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); }
  to { opacity: 0; } }
.zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; }

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

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

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

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

@-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; }

@-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; }

@-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; }

@-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
@keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
.slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; }

@-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }
@keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } }
.slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; }

@-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }
@keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }
.slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } }
@keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } }
.slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } }
@keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } }
.slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; }

/** BxSlider v4.1.2 - Fully loaded, responsive content slider http://bxslider.com  Written by: Steven Wanderski, 2014 http://stevenwanderski.com (while drinking Belgian ales and listening to jazz)  CEO and founder of bxCreative, LTD http://bxcreative.com */
/** RESET AND LAYOUT
===================================*/
.bx-wrapper { position: relative; margin: 0 auto 60px; padding: 0; *zoom: 1; }

.bx-wrapper img { max-width: 100%; display: block; }

/** THEME
===================================*/
.bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: 5px solid #fff; left: -5px; background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); }

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; }

/* LOADER */
.bx-wrapper .bx-loading { min-height: 50px; /* background: url(images/bx_loader.gif) center center no-repeat #fff; */ height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; }

/* PAGER */
.bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; }

.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; }

.bx-wrapper .bx-pager.bx-default-pager a { background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #000; }

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev { left: 10px; /* background: url(images/controls.png) no-repeat 0 -32px; */ }

.bx-wrapper .bx-next { right: 10px; /* background: url(images/controls.png) no-repeat -43px -32px; */ }

.bx-wrapper .bx-prev:hover { background-position: 0 0; }

.bx-wrapper .bx-next:hover { background-position: -43px 0; }

.bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999; }

.bx-wrapper .bx-controls-direction a.disabled { display: none; }

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto { text-align: center; }

.bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; /* background: url(images/controls.png) -86px -11px no-repeat; */ margin: 0 3px; }

.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; }

.bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; /* background: url(images/controls.png) -86px -44px no-repeat; */ margin: 0 3px; }

.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; }

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; }

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; }

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666 \9; background: rgba(80, 80, 80, 0.75); width: 100%; }

.bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; }

.container, .page-header-inner { width: 960px; margin: 0 auto; padding: 0 10px; }
.container::after, .page-header-inner::after { content: ''; display: table; clear: both; }

.ico_board_search { background-image: url(../images/common/icon_sprite.png); background-repeat: no-repeat; background-position: 0px 0px; height: 22px; width: 22px; display: inline-block; }

.ico_board_arrow { background-image: url(../images/common/icon_sprite.png); background-repeat: no-repeat; background-position: -22px 0px; height: 20px; width: 12px; display: inline-block; }

.ico_download-white { background-image: url(../images/common/icon_sprite.png); background-repeat: no-repeat; background-position: -34px 0px; height: 17px; width: 16px; display: inline-block; }

.ico_download-blue { background-image: url(../images/common/icon_sprite.png); background-repeat: no-repeat; background-position: 0px -22px; height: 17px; width: 16px; display: inline-block; vertical-align: middle; margin-left: 6px; }

.ico_link { background-image: url(../images/common/icon_sprite.png); background-repeat: no-repeat; background-position: -16px -22px; height: 16px; width: 16px; display: inline-block; }

.ico_arrow-small { background-image: url(../images/common/icon_sprite.png); background-repeat: no-repeat; background-position: -32px -22px; height: 13px; width: 8px; display: inline-block; vertical-align: middle; margin-left: 6px; }

.board-list-big li.new:after { content: 'N'; width: 30px; height: 30px; border-radius: 15px; line-height: 1; border: 2px solid #007eff; position: absolute; text-align: center; font-weight: bold; padding: 6px; }

.regular-paragraph { text-align: center; color: #000; font-size: 16px; line-height: 1.5em; }

.page-sub-title { font-family: eng-light; font-size: 60px; text-align: center; line-height: 1; color: #2b323f; }
.lang-kr.page-sub-title { font-family: kr-bold; }

.radio input[type="radio"] { display: none; }
.radio label { cursor: pointer; }
.radio input[type="radio"] + label span { display: inline-block; width: 27px; height: 26px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; }

.board-sort { text-align: center; margin-bottom: 35px; }
.board-sort li { margin-left: 5px; position: relative; display: inline-block; }
.board-sort li a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; width: 120px; height: 36px; text-align: center; font-size: 14px; display: inline-block; border-radius: 18px; background-color: transparent; padding: 8px 0; color: #fff; border: 3px solid #007eff; border: 3px solid #909db2; color: #909db2; }
.board-sort li.new:after { content: 'N'; position: absolute; width: 26px; line-height: 1; padding: 6px; top: -13px; left: 0; border-radius: 13px; background: #007eff; color: #fff; font-weight: bold; font-size: 14px; }
.board-sort li:first-child { margin-left: 0; }
.board-sort li:hover a, .board-sort li.active a { border-color: #007eff; color: #007eff; }

.board-search { width: 100%; position: relative; }
.board-search input { border: 0 none; outline: 0; width: 100%; text-align: center; padding: 5px; font-size: 22px; border-bottom: 3px solid #2b323f; }
.board-search input::-webkit-input-placeholder { font-size: 22px; color: #999; }
.board-search input:-moz-placeholder { font-size: 22px; color: #999; }
.board-search input::-moz-placeholder { font-size: 22px; color: #999; }
.board-search input:-ms-input-placeholder { font-size: 22px; color: #999; }
.board-search .board-search-btn { position: absolute; top: 5px; right: 10px; }

.board-list-big li * { -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.board-list-big li { display: table; width: 100%; height: 200px; border-bottom: 2px solid #2b323f; position: relative; }
.board-list-big li img { opacity: 0; position: absolute; top: 0; left: 0; z-index: 1; }
.board-list-big li:hover img { opacity: 1; }
.board-list-big li:hover span, .board-list-big li:hover h3, .board-list-big li:hover i { color: #fff; }
.board-list-big li:hover i { opacity: 1; margin: 10px auto 0; }
.board-list-big li:hover span { border-right: 3px solid #fff; }
.board-list-big li:hover.new:after { border: 2px solid #fff; color: #fff; }
.board-list-big li.new:after { top: 20px; left: 20px; color: #007eff; }
.board-list-big li span, .board-list-big li h3, .board-list-big li i { color: #2b323f; position: relative; z-index: 2; }
.board-list-big li span, .board-list-big li h3 { display: inline-block; }
.board-list-big li span { border-right: 3px solid #2b323f; font-size: 18px; padding-right: 10px; margin-right: 20px; }
.board-list-big li h3 { display: inline-block; max-width: 790px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; font-size: 45px; }
.board-list-big li a { display: table-cell; vertical-align: middle; text-align: center; }
.board-list-big li a::after { content: ''; display: table; clear: both; }
.board-list-big li i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; background: #007eff url(../images/common/icon_link.png) center center no-repeat; width: 48px; height: 48px; border-radius: 24px; margin: -58px auto 0; display: block; opacity: 0; }
.board-list-big li i.view { background: #007eff url(../images/common/icon_view.png) center center no-repeat; }

.board-list-small li * { -webkit-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.board-list-small li { -webkit-transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); border-bottom: 1px solid #909db2; display: table; width: 100%; position: relative; }
.board-list-small li.is-new:after { content: 'N'; width: 30px; height: 30px; border-radius: 15px; line-height: 1; border: 2px solid #007eff; position: absolute; text-align: center; font-weight: bold; padding: 6px; top: 25px; left: 80px; color: #007eff; }
.board-list-small li:hover { background: url(../images/common/icon_board_arrow.png) 910px center no-repeat; background-color: #007eff; }
.board-list-small li:hover.is-new:after { border: 2px solid #fff; color: #fff; }
.board-list-small li:hover .title, .board-list-small li:hover dt, .board-list-small li:hover dd { color: #fff; }
.board-list-small li:hover dt { border-right: 2px solid #fff; }
.board-list-small .notice-snap { background: #eef5ff; }
.board-list-small .notice-snap .title { color: #007eff; }
.board-list-small .notice-snap dt { border-right: 2px solid #007eff; color: #007eff; }
.board-list-small .notice-snap dd { color: #007eff; }
.board-list-small a { display: table-cell; vertical-align: middle; padding: 30px 0 30px 20px; }
.board-list-small a .title { float: left; font-size: 14px; margin-right: 75px; width: 25px; }
.board-list-small a dl::after { content: ''; display: table; clear: both; }
.board-list-small a dt, .board-list-small a dd { float: left; font-size: 18px; line-height: 1; }
.board-list-small a dt { padding-right: 15px; margin-right: 15px; border-right: 2px solid #2b323f; }
.board-list-small a dd { display: inline-block; max-width: 690px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }

.board-detail-header { border-top: 2px solid #2b323f; border-bottom: 1px solid #909db2; padding: 35px 0 30px 18px; position: relative; }
.board-detail-header .btn-group { position: absolute; top: 10px; right: 0; }
.board-detail-header .btn-group li { float: left; margin-left: 5px; }

.board-detail-top { margin-bottom: 30px; }
.board-detail-top::after { content: ''; display: table; clear: both; }
.board-detail-top span, .board-detail-top p { float: left; }
.board-detail-top span { margin-right: 10px; }

.board-detail-title { position: relative; }
.board-detail-title h2 { display: inline-block; max-width: 765px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; font-size: 35px; }
.board-detail-title .info { position: absolute; bottom: 0; right: 0; }
.board-detail-title .info span { color: #dfdfdf; font-size: 25px; font-family: eng-light; display: block; line-height: 1; }
.board-detail-title .info span:first-child { font-size: 16px; font-family: kr; text-align: right; color: #999; margin-bottom: 5px; }

.board-detail-body { padding: 50px 20px; line-height: 1.5em; border-bottom: 1px solid #909db2; }
.board-detail-body img { max-width: 100%; display: inline-block; }

.board-state { text-align: center; padding-top: 180px; }
.board-state h3 { color: #999; font-size: 35px; }
.board-state.blank { margin-top: 150px; background: url(../images/common/icon_board_blank.png) top center no-repeat; }
.board-state.blank h3 { font-size: 45px; }
.board-state.search-blank { margin-top: 50px; background: url(../images/common/icon_board_search_blank.png) top center no-repeat; }
.board-state.search-blank p { width: 485px; background: #29313e; color: #abafb6; margin: 20px auto 25px; font-size: 20px; padding: 5px 0; }
.board-state.search-blank ul { width: 485px; margin: 0 auto; }
.board-state.search-blank li { text-align: left; margin-top: 5px; }
.board-state.search-blank a { width: 210px; height: 50px; text-align: center; font-size: 18px; display: inline-block; border-radius: 25px; background-color: transparent; padding: 13px 0; color: #fff; border: 3px solid #007eff; margin-top: 30px; color: #007eff; font-family: kr-bold; }

.center-wrap .list-item { display: inline-block; }
.center-wrap .list-item h3 { vertical-align: middle; width: 165px; text-transform: capitalize; text-align: left; line-height: 1.5em; }
.center-wrap .list-item dl { width: inherit; }
.center-wrap .list-item > li { width: inherit; }
.center-wrap .list-item > li > ul { display: table-cell; vertical-align: middle; }
.center-wrap .list-item > li li { width: inherit; text-align: left; display: block; margin-top: 5px; line-height: 1.5em; font-size: 14px; }

.sp-list-item { margin: -50px 0 80px; background: #eef5ff; padding: 30px 0; }
.sp-list-item .list-item { width: 960px; padding: 0 10px; margin: 0 auto; }
.sp-list-item .list-item dt, .sp-list-item .list-item h3 { background: transparent; }
.sp-list-item li:hover h3, .sp-list-item li:hover dd { color: #007eff; }

.main-list li:hover h3, .main-list li:hover dd { color: #007eff; }

.list-item { text-align: left; }
.list-item li { display: table; width: 100%; margin-top: 30px; position: relative; }
.list-item li:first-child { margin-top: 0; }
.list-item .outter-link { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9; cursor: pointer; }
.list-item img, .list-item dl { display: table-cell; vertical-align: middle; }
.list-item img { margin-right: 30px; }
.list-item dl { width: 780px; }
.list-item dl::after { content: ''; display: table; clear: both; }
.list-item dt { margin-bottom: 15px; background: #fff; width: 100%; }
.list-item h3 { background: #fff; color: #333; font-size: 22px; font-family: kr-bold; z-index: 2; display: table-cell; position: relative; padding-right: 18px; text-transform: uppercase; white-space: nowrap; }
.list-item h3 span { color: #888; }
.list-item dd { font-size: 14px; color: #333; line-height: 1.7em; }

.list-item-util { background: url(../images/common/list_item_bg.gif) 0 center repeat-x; background-size: 2px; display: table-cell; width: 100%; position: relative; }
.list-item-util a { width: 25px; height: 25px; display: block; position: absolute; z-index: 10; top: 0; }
.list-item-util a:nth-child(1) { left: 0; }
.list-item-util a:nth-child(2) { left: 32px; }
.list-item-util a:nth-child(3) { left: 64px; }
.list-item-util .util-link { background: url(../images/common/icon_list_item_link.png) 0 0 no-repeat; }
.list-item-util .util-home { background: url(../images/common/icon_list_item_home.png) 0 0 no-repeat; }
.list-item-util .util-download { background: url(../images/common/icon_list_item_download.png) 0 0 no-repeat; }

.list-item-type2 { border-top: 1px solid #466379; margin-top: 45px; padding-top: 45px; text-align: left; }
.list-item-type2::after { content: ''; display: table; clear: both; }
.list-item-type2:first-child { border-top: 0 none; margin-top: 0; padding-top: 0; }
.list-item-type2 .left { float: left; width: 50%; }
.list-item-type2 .right { float: left; }
.list-item-type2 .number { width: 100%; color: #4f6e95; display: block; float: left; font-family: eng-light; font-size: 35px; margin-bottom: 10px; }
.list-item-type2 h2 { font-size: 35px; color: #fff; }
.list-item-type2 h2 em { color: #007eff; }
.list-item-type2 p { color: #a6abb6; line-height: 1.6em; }

.list-item-type2.tech { border-top: 1px solid #afc9d6; }
.list-item-type2.tech:first-child { border-top: 0 none; }
.list-item-type2.tech h2 { color: #111; }
.list-item-type2.tech h2 span { color: #999; }
.list-item-type2.tech p { color: rgba(17, 17, 17, 0.7); line-height: 1.6em; }
.list-item-type2.tech .left { width: 40%; }
.list-item-type2.tech .right { width: 60%; }

.list-item-type2.tech.float { float: left; width: 460px; height: 240px; }
.list-item-type2.tech.float:nth-child(1), .list-item-type2.tech.float:nth-child(3) { margin-right: 20px; }
.list-item-type2.tech.float:nth-child(1), .list-item-type2.tech.float:nth-child(2) { border-bottom: 1px solid #afc9d6; margin-bottom: 40px; }
.list-item-type2.tech.float:nth-child(3) { clear: left; }
.list-item-type2.tech.float h2 { padding-bottom: 0; margin-bottom: 40px; border-bottom: 0 none; }

.list-item-type2.float { float: left; width: 450px; border-top: 0 none; margin-top: 0; padding-top: 0; }
.list-item-type2.float:first-child { margin-right: 30px; }
.list-item-type2.float .left, .list-item-type2.float .right { float: none; width: inherit; }
.list-item-type2.float h2 { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #afc9d6; }

.list-item-grid { float: left; width: 235px; height: 500px; padding-top: 100px; border-right: 1px solid #afc9d6; }
.list-item-grid:first-child { border-left: 1px solid #afc9d6; }
.list-item-grid .number { color: #4f6e95; font-size: 35px; font-family: eng-light; margin-bottom: 20px; display: block; }
.list-item-grid img { display: inline-block; }
.list-item-grid h2 { font-size: 35px; margin-bottom: 45px; }
.list-item-grid p { margin-top: 25px; color: #616161; line-height: 1.5em; }

.marketing-onepage-nav::after { content: ''; display: table; clear: both; }
.marketing-onepage-nav .list-item-type2 { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; cursor: pointer; margin: 0; padding: 342px 0 150px 30px; float: left; width: 320px; border-top: 0 none; border-right: 1px solid #395272; }
.marketing-onepage-nav .list-item-type2:first-child { border-left: 1px solid #395272; }
.marketing-onepage-nav .list-item-type2:hover .number { color: #fff; }
.marketing-onepage-nav .list-item-type2:hover p { color: #fff; }
.marketing-onepage-nav .list-item-type2:nth-child(1) { background: url(../images/marketing/marketing2_nav1.png) 30px 150px no-repeat; }
.marketing-onepage-nav .list-item-type2:nth-child(1):hover { background: #007eff url(../images/marketing/marketing2_nav1_over.png) 30px 150px no-repeat; }
.marketing-onepage-nav .list-item-type2:nth-child(2) { background: url(../images/marketing/marketing2_nav2.png) 30px 150px no-repeat; }
.marketing-onepage-nav .list-item-type2:nth-child(2):hover { background: #44ded1 url(../images/marketing/marketing2_nav2_over.png) 30px 150px no-repeat; }
.marketing-onepage-nav .list-item-type2:nth-child(3) { background: url(../images/marketing/marketing2_nav3.png) 30px 150px no-repeat; }
.marketing-onepage-nav .list-item-type2:nth-child(3):hover { background: #33cafb url(../images/marketing/marketing2_nav3_over.png) 30px 150px no-repeat; }
.marketing-onepage-nav h2 { font-family: eng-light; height: 162px; }
.marketing-onepage-nav p { margin-top: 30px; font-size: 20px; }
.marketing-onepage-nav .number, .marketing-onepage-nav p { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; }
.marketing-onepage-nav .left { float: none; width: inherit; }
.marketing-onepage-nav .right { float: none; }
.marketing-onepage-nav a { width: 110px; height: 40px; text-align: center; font-size: 14px; display: inline-block; border-radius: 20px; background-color: transparent; padding: 10px 0; color: #fff; margin-top: 20px; border: 3px solid #fff; }
.marketing-onepage-nav a:hover { color: #fff; }

.list-item.img-type { display: inline-block; text-align: left; }
.list-item.img-type h3 { text-transform: capitalize; }
.list-item.img-type dl { width: inherit; }
.list-item.img-type dt { margin-top: 17px; }
.list-item.img-type dd img { margin-top: 15px; }

.selectbox { width: 100%; position: relative; text-align: center; }
.selectbox.single-page label { margin-top: 0; }
.selectbox.is-active label { color: #007eff; }
.selectbox.is-active a:hover, .selectbox.is-active a .on { color: #111; text-decoration: underline; }
.selectbox .selectbox-arrow { background: url(../images/common/icon_selectbox_arrow.png) 0 0 no-repeat; width: 19px; height: 12px; display: block; position: absolute; top: 20px; right: 20px; }
.selectbox label { border-radius: 5px; cursor: pointer; border: solid 2px #2b323f; width: 940px; height: 50px; background: transparent; background-size: 19px 12px; font-family: kr-bold; font-size: 20px; margin-top: 50px; display: block; line-height: 50px; }
.selectbox ul { display: none; overflow: 0; position: absolute; padding: 25px 0; top: 46px; left: 0; width: 100%; border-radius: 0 0 20px 20px; background-color: #fff; border-top: 3px solid #007eff; border-left: solid 1px #dfdfdf; border-right: solid 1px #dfdfdf; border-bottom: solid 1px #dfdfdf; z-index: 11; }
.selectbox li { margin-top: 20px; font-size: 20px; color: #999; cursor: pointer; }
.selectbox li:first-child { margin-top: 0; }
.selectbox li:hover { color: #111; text-decoration: underline; }

.overlay, #overlay-shade { display: none; }

#overlay-shade { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background-color: #000; }

.overlay { position: absolute; top: -300px; left: 0; width: 450px; min-height: 200px; z-index: 10000; background-color: #7D7D7D; border: 10px solid #CFCFCF; color: #fff; box-shadow: 0 0 16px #000; }

.ie7 .overlay { height: 200px; }

.overlay .wrapper { padding: 15px 30px 30px; }

.overlay .toolbar { padding: 8px; line-height: 1; text-align: right; overflow: hidden; }

.overlay .toolbar a.close { display: inline-block; *display: inline; zoom: 1; padding: 0 8px; font-size: 12px; text-decoration: none; font-weight: bold; line-height: 18px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; color: #999999; background-color: #515151; }

.overlay .toolbar a.close span { color: #818181; }

.overlay .toolbar a.close:hover, .overlay .toolbar a.close:hover span { background-color: #b90900; color: #fff; }

.openning-layer { visibility: hidden; position: absolute; width: 620px; height: 590px; z-index: 101; }
.openning-layer li img { border-radius: 10px; }
.openning-layer .openning-layer-util::after { content: ''; display: table; clear: both; }
.openning-layer .openning-layer-util fieldset { float: left; }
.openning-layer .openning-layer-util fieldset input { vertical-align: middle; }
.openning-layer .openning-layer-util fieldset label { color: #fff; font-size: 14px; }
.openning-layer .openning-close { float: right; margin-bottom: 10px; }
.openning-layer .bx-default-pager { position: absolute; top: 0; left: 10px; bottom: 0; width: inherit; }
.openning-layer .bx-wrapper .bx-pager.bx-default-pager a { width: 8px; height: 8px; margin: 0 3px; }
.openning-layer .bx-wrapper .bx-viewport { -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; border: 0 none; left: 0; background: transparent; }
.openning-layer .bx-wrapper .bx-prev { background: url(../images/common/icon_openning_left.png) 0 0 no-repeat; width: 24px; height: 44px; left: -44px; }
.openning-layer .bx-wrapper .bx-next { background: url(../images/common/icon_openning_right.png) 0 0 no-repeat; width: 24px; height: 44px; right: -44px; }

.bx-wrapper { margin: 0; padding: 0; }

.bx-wrapper .bx-viewport { box-shadow: 0 0 0; border: 0 none; left: 0; background: transparent; }

.cursor-direction { position: absolute; z-index: 50; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.cursor-direction.isVisible { visibility: visible; }
.cursor-direction.right .cursor-inner { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.cursor-direction .cursor-inner { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; background: url(../images/about/cursor_direction.png) 0 0 no-repeat; width: 24px; height: 44px; display: block; pointer-events: none; }

.about-slide { cursor: none !important; }
.about-slide .scale-up { -webkit-transform: scale(1.05) rotate(-0.02deg); -moz-transform: scale(1.05) rotate(-0.02deg); -ms-transform: scale(1.05) rotate(-0.02deg); -o-transform: scale(1.05) rotate(-0.02deg); transform: scale(1.05) rotate(-0.02deg); }
.about-slide .scale-down { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.about-slide .bx-wrapper .bx-viewport { left: 0; border: 0 none; box-shadow: none; }
.about-slide .bx-wrapper .bx-pager { padding: 0; }
.about-slide .bx-wrapper .bx-controls.bx-has-pager .bx-pager { text-align: center; width: 100%; position: absolute; bottom: 140px; left: 0; height: 15px; }
.about-slide .bx-wrapper .bx-pager .bx-pager-item, .about-slide .bx-wrapper .bx-controls-auto .bx-controls-auto-item { height: 13px; display: inline-block; vertical-align: middle; }
.about-slide .bx-wrapper .bx-pager.bx-default-pager a:hover, .about-slide .bx-wrapper .bx-pager.bx-default-pager a.active { background: #fff; width: 13px; height: 13px; }
.about-slide .bx-wrapper .bx-pager.bx-default-pager a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; width: 7px; height: 7px; border-radius: 13px; display: inline-block; vertical-align: middle; }

.about-slide { height: 800px !important; font-family: eng; }
.about-slide .auto-control { position: absolute; bottom: 139px; left: 50%; z-index: 1; margin-left: 40px; }
.about-slide .auto-control a { background: url(../images/common/btn_play_toggle.png); width: 9px; height: 11px; display: block; }
.about-slide .auto-control .stop { background-position: 0 -11px; }
.about-slide .auto-control .play { background-position: 0 0; }
.about-slide .about-slide1 { background: url(../images/about/about_visual1.jpg) center center no-repeat; }
.about-slide .about-slide2 { background: url(../images/about/about_visual2.jpg) center center no-repeat; }
.about-slide .about-slide3 { background: url(../images/about/about_visual3.jpg) center center no-repeat; }
.about-slide .about-slide4 { background: url(../images/about/about_visual4.jpg) center center no-repeat; }
.about-slide li { display: table; width: 100%; height: 800px; overflow: hidden; }

.about-slide-link { position: absolute; bottom: 60px; left: 0; width: 100%; text-align: center; z-index: 50; }
.about-slide-link li { width: 180px; height: 50px; font-size: 18px; display: inline-block; margin-left: 5px; }
.about-slide-link a { font-family: eng; color: #fff; width: 180px; height: 50px; display: block; border: 3px solid #fff; border-radius: 25px; line-height: 48px; }
.about-slide-link i { background: url(../images/about/icon_slider_link.png) 0 0 no-repeat; width: 8px; height: 13px; display: inline-block; margin-left: 11px; }

.tech-slide { margin-top: 40px; border-top: 5px solid #007eff; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; width: 940px; position: relative; }
.tech-slide .desc { position: absolute; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); width: 100%; height: 130px; padding: 20px; z-index: 10; color: #fff; }
.tech-slide h3 { color: #fff; font-size: 30px; float: left; width: 270px; }
.tech-slide h3 .link-active { background: url(../images/common/icon_portfolio_link_big.png) 0 0 no-repeat; width: 33px; height: 33px; display: inline-block; vertical-align: middle; margin-left: 10px; }
.tech-slide p { color: #fff; font-size: 14px; float: left; margin-left: 55px; width: 570px; overflow: auto; line-height: 1.5em; height: 90px; /* Let's get this party started */ /* Handle */ }
.tech-slide p::-webkit-scrollbar { width: 6px; }
.tech-slide p::-webkit-scrollbar-thumb { background: #1086ff; }

.tech-slide-content::after { content: ''; display: table; clear: both; }
.tech-slide-content li { position: relative; }

.tech-slide-pager { width: 120px; position: absolute; top: 10px; right: 10px; }
.tech-slide-pager .bx-viewport { height: initial !important; }
.tech-slide-pager li { height: 80px; position: relative; margin-top: 10px; float: none !important; }
.tech-slide-pager li:first-child { margin-top: 0; }
.tech-slide-pager li.is-active .pager-off { background: transparent; border: 3px solid #007eff; }
.tech-slide-pager li .pager-off { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; width: 100%; height: 80px; background: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; z-index: 5; display: block; }

/** YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) http://cssreset.com Copyright 2012 Yahoo! Inc. All rights reserved. http://yuilibrary.com/license/ */
/* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix, should I group by selector or property for weight savings?
*/
html { color: #2b323f; background: #FFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html *, html *::before, html *::after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

/* TODO remove settings on BODY since we can't namespace it.
*/
/* TODO test putting a class on HEAD. - Fails on FF.
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

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

fieldset, img { border: 0; }

/* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; font-variant: normal; }

/* to preserve line-height and selector appearance */
sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }

/*to enable resizing for IE*/
input, textarea, select { *font-size: 100%; }

/*because legend doesn't inherit in IE */
legend { color: #000; }

img { display: block; }

/*@font-face { font-family: kr-ul; font-style: normal; font-weight: 200; src: local("Nanum Barun Gothic UltraLight"), local("Nanum Barun Gothic-UltraLight"), local("NanumBarunGothic UltraLight"); src: url("//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicUltraLight.eot"); src: url(//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicUltraLight.eot?#iefix) format("embedded-opentype"), url(//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicUltraLight.woff) format("woff"), url(//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicUltraLight.ttf) format("truetype"); }*/
/*@font-face { font-family: kr-light; font-style: normal; font-weight: 300; src: local("Nanum Barun Gothic Light"), local("Nanum Barun Gothic-Light"), local("NanumBarunGothic Light"); src: url(//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicLight.eot); src: url(//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicLight.eot?#iefix) format("embedded-opentype"), url(//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicLight.woff) format("woff"), url(//cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/NanumBarunGothicLight.ttf) format("truetype"); }*/
/*@font-face { font-family: kr; font-style: normal; font-weight: 400; src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.eot"); src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.eot?#iefix") format("embedded-opentype"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.woff") format("woff"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.ttf") format("truetype"); }*/
/*@font-face { font-family: kr-bold; font-style: normal; src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.eot"); src: url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.eot?#iefix") format("embedded-opentype"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.woff") format("woff"), url("//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.ttf") format("truetype"); }*/
@font-face { font-family: kr-ul; font-style: normal; font-weight: 200; src: local("Nanum Barun Gothic UltraLight"), local("Nanum Barun Gothic-UltraLight"), local("NanumBarunGothic UltraLight"); src: url("../font/NanumBarunGothicUltraLight.eot"); src: url("../font/NanumBarunGothicUltraLight.eot") format("embedded-opentype"), url("../font/NanumBarunGothicUltraLight.woff") format("woff"), url("../font/NanumBarunGothicUltraLight.ttf") format("truetype"); }
@font-face { font-family: kr-light; font-style: normal; font-weight: 300; src: local("Nanum Barun Gothic Light"), local("Nanum Barun Gothic-Light"), local("NanumBarunGothic Light"); src: url("../font/NanumBarunGothicLight.eot"); src: url("../font/NanumBarunGothicLight.eot") format("embedded-opentype"), url("../font/NanumBarunGothicLight.woff") format("woff"), url("../font/NanumBarunGothicLight.ttf") format("truetype"); }
@font-face { font-family: kr; font-style: normal; font-weight: 400; src: url("../font/nanumbarungothicregular.eot"); src: url("../font/nanumbarungothicregular.eot") format("embedded-opentype"), url("../font/nanumbarungothicregular.woff") format("woff"), url("../font/nanumbarungothicregular.ttf") format("truetype"); }
@font-face { font-family: kr-bold; font-style: normal; src: url("../font/NanumBarunGothic-Bold.eot"); src: url("../font/NanumBarunGothic-Bold.eot?#iefix") format("embedded-opentype"), url("../font/NanumBarunGothic-Bold.woff") format("woff"), url("../font/NanumBarunGothic-Bold.ttf") format("truetype"); }
@font-face { font-family: eng; src: url("../font/itc_avant_garde_ce_gothic_book-webfont.eot"); src: url("../font/itc_avant_garde_ce_gothic_book-webfont.eot?#iefix") format("embedded-opentype"), url("../font/itc_avant_garde_ce_gothic_book-webfont.woff2") format("woff2"), url("../font/itc_avant_garde_ce_gothic_book-webfont.woff") format("woff"), url("../font/itc_avant_garde_ce_gothic_book-webfont.ttf") format("truetype"), url("../font/itc_avant_garde_ce_gothic_book-webfont.svg#avantgarde_ceregular") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: eng-light; src: url("../font/itc_avant_garde_ce_gothic_demi-webfont.eot"); src: url("../font/itc_avant_garde_ce_gothic_demi-webfont.eot?#iefix") format("embedded-opentype"), url("../font/itc_avant_garde_ce_gothic_demi-webfont.woff2") format("woff2"), url("../font/itc_avant_garde_ce_gothic_demi-webfont.woff") format("woff"), url("../font/itc_avant_garde_ce_gothic_demi-webfont.ttf") format("truetype"), url("../font/itc_avant_garde_ce_gothic_demi-webfont.svg#avantgarde_cebold") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: eng-exlight; src: url("../font/itc_avant_garde_gothic_lt_extra_light-webfont.eot"); src: url("../font/itc_avant_garde_gothic_lt_extra_light-webfont.eot?#iefix") format("embedded-opentype"), url("../font/itc_avant_garde_gothic_lt_extra_light-webfont.woff2") format("woff2"), url("../font/itc_avant_garde_gothic_lt_extra_light-webfont.woff") format("woff"), url("../font/itc_avant_garde_gothic_lt_extra_light-webfont.svg#avantgarde_lt_extralightRg") format("svg"); font-weight: normal; font-style: normal; }
html * { font-family: kr; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; }

html { background: #2b323f; }

body { background: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.slider-wrap { width: 100%; }
.slider-wrap li { width: 100%; height: 100%; }
.slider-wrap #player { height: 100%; }

.page-wrap { padding: 80px 10px; }

.board-more-btn { width: 160px; height: 50px; text-align: center; font-size: 20px; display: inline-block; border-radius: 25px; background-color: #909db2; padding: 13px 0; color: #fff; color: #fff !important; margin: 50px auto 0; display: block; }

::-moz-selection { background: #007eff; color: #fff; }

::selection { background: #007eff; color: #fff; }

.blur-effect { -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-filter: blur(5px); filter: blur(5px); }

.youtube-contents { width: 100%; }

a { color: #111; text-decoration: none; }
a:hover { color: #007eff; }
a:active { color: #111; }

.error404-page { height: 100%; background: #fff; }
.error404-page body { height: 100%; }
.error404-page .error404-wrap { display: table; text-align: center; height: 100%; width: 100%; }
.error404-page .error404-inner { display: table-cell; vertical-align: middle; text-align: center; }
.error404-page .error404-inner img { display: inline-block; }
.error404-page .error404-inner h2 { margin: 15px 0 5px 0; color: #007eff; line-height: 1; font-size: 80px; font-family: eng-light; }
.error404-page .error404-inner p { background: #29313e; padding: 3px 7px; display: inline-block; font-size: 24px; color: #abafb6; margin-bottom: 30px; }
.error404-page .error404-inner li { color: #666; margin-top: 5px; }
.error404-page .error404-inner li:first-child { margin-top: 0; }
.error404-page .error404-inner a { width: 190px; height: 50px; text-align: center; font-size: 18px; display: inline-block; border-radius: 25px; background-color: #fff; padding: 13px 0; color: #fff; border: 3px solid #007eff; margin-top: 40px; color: #007eff; font-family: eng-light; }

.page-top-btn { position: absolute; opacity: 0; }
.page-top-btn a { position: fixed; bottom: 167px; left: 50%; z-index: 91; margin-left: 510px; }

.page-corp-info { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: none; position: fixed; top: 50%; left: 50%; z-index: 99; border-radius: 10px; background-color: rgba(0, 0, 0, 0.9); -webkit-box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5); box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5); }
.page-corp-info .close { position: absolute; top: -35px; right: 0; }
.page-corp-info ul { padding: 55px; }
.page-corp-info li { text-align: center; margin-top: 20px; }
.page-corp-info li:first-child { margin-top: 0; }
.page-corp-info li a { -webkit-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); font-family: kr-bold; color: #fff; font-size: 18px; line-height: 50px; width: 150px; height: 50px; background-color: transparent; border: solid 3px #007eff; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; display: block; }
.page-corp-info li a:hover { background: #fff; color: #007eff; }

.visual-big { width: 100%; height: 800px; background: #304054; position: relative; overflow: hidden; }
.visual-big .light { position: absolute; top: 0; left: 0; }
.visual-big .visual-big-inner { width: 960px; margin: 0 auto; display: table-cell; vertical-align: middle; text-align: center; }
.visual-big .visual-small { background: none; position: absolute; z-index: 90; top: 0; }

.visual-small { background: url(../images/story/story_sub_visual.gif) center center no-repeat; width: 100%; height: 160px; text-align: center; padding-top: 80px; border-bottom: 5px solid #07c5ff; }
.visual-small h2 { font-size: 45px; color: #fff; margin-top: 14px; line-height: 1; font-family: eng-light; }
.visual-small.portfolio { background: url(../images/portfolio_top_bg.gif) center center no-repeat; }
.visual-small.empedia { background: url(../images/empedia_top_bg.gif) center center no-repeat; }
.visual-small.empedia h2 { font-family: kr; }

.visual-tech { background: url(../images/tech/tech_top_bg.gif) center center no-repeat; width: 100%; height: 155px; padding-top: 80px; }

.center-wrap { display: inline-block; text-align: center; width: 100%; }

.none-slide { position: absolute; top: 0; left: 50%; margin-left: -960px; }
.none-slide img { height: 800px; max-width: initial; }

.title-content { padding-bottom: 60px; margin-bottom: 60px; border-bottom: 2px solid #1b2944; text-align: center; }
.title-content p { font-size: 20px; line-height: 1.5em; }
.title-content h2 { font-size: 35px; color: #007eff; padding: 15px 0 50px; }
.title-content img { display: inline-block; }

.content-wrap-inner { padding: 80px 10px 80px; margin: 0 auto; background: #fff; width: 960px; }
.content-wrap-inner::after { content: ''; display: table; clear: both; }

.content-sub-inner { padding: 0 10px 0; margin: 0 auto; background: transparent; width: 960px; background: 0 none; position: relative; display: table-cell; vertical-align: middle; text-align: left; }
.content-sub-inner .left { position: relative; right: 50%; display: inline-block; text-align: left; float: right; }
.content-sub-inner .right { margin-left: 50%; display: inline-block; }
.content-sub-inner h3 { font-size: 60px; color: #fff; margin-bottom: 25px; font-family: eng-light; line-height: 1; }
.content-sub-inner h4 { font-size: 32px; line-height: 1.3em; color: #fff; }
.content-sub-inner h4 span { font-family: kr-bold; }
.content-sub-inner p { padding-top: 38px; margin-top: 38px; border-top: 1px solid rgba(255, 255, 255, 0.7); color: #d1e9fc; font-size: 18px; line-height: 1.5em; }

.content-wide { width: 100%; background: #eef5ff; text-align: center; }
.content-wide .content-wrap-inner { padding: 80px 10px 80px; margin: 0 auto; background: #eef5ff; }

.bg-type2 { background: #1b2944; }
.bg-type2 .content-wrap-inner { padding: 80px 10px 80px; margin: 0 auto; background: #1b2944; }

.bg-type3 { background: #23324f; }
.bg-type3 .content-wrap-inner { padding: 80px 10px 80px; margin: 0 auto; background: #23324f; }

.bg-type4 { background: #1b2944; }
.bg-type4 .content-wrap-inner { background: #1b2944; padding: 0; }

.markerting-creative { background: url(../images/marketing/marketing4_bg_line.gif) 0 0 repeat-x; position: relative; height: 625px; }
.markerting-creative img { position: absolute; top: 60px; left: 50%; margin-left: -307px; }

.bg-tech { background: #1a2a48 url(../images/tech/wonderbox_bg.png) center 0 no-repeat; }
.bg-tech .content-wrap-inner { padding: 100px 10px 20px; margin: 0 auto; background: transparent; text-align: left; position: relative; }
.bg-tech.neo { background: #1a2a48 url(../images/tech/neo_bg.png) center 0 no-repeat; }
.bg-tech.caos { background: #1a2a48 url(../images/tech/caos_bg.png) center 0 no-repeat; }
.bg-tech.bingo { background: #1a2a48 url(../images/tech/bingo_bg.png) center 0 no-repeat; }
.bg-tech.pickdata { background: #1a2a48 url(../images/tech/pickdata_bg.png) center 0 no-repeat; }
.bg-tech.pickdata .pickdata-facebook-partner-btn { position: absolute; top: 0; left: 10px; }
.bg-tech.shuttlerock { background: #1a2a48 url(../images/tech/shuttlerock_bg.png) center 0 no-repeat; }
.bg-tech h2 { font-size: 20px; color: #57637c; font-family: eng; font-weight: bold; margin-bottom: 20px; }
.bg-tech h2:after { content: ''; width: 36px; height: 5px; display: block; margin-top: 10px; }
.bg-tech h2 em { background: #0d1524; padding: 2px 4px; color: #999; font-size: 15px; font-family: inherit; display: inline-block; vertical-align: middle; margin-right: 10px; font-weight: inherit; letter-spacing: 1px; }
.bg-tech h3 { margin-bottom: 80px; color: #fff; font-size: 45px; }
.bg-tech h3 span { font-family: kr-bold; }
.bg-tech p { font-size: 20px; color: #fff; line-height: 1.5em; }
.bg-tech p span { background: #a94ff3; padding: 2px 3px; }
.bg-tech .tech-movie { width: 880px; margin: 55px auto 0; color: #fff; }
.bg-tech .tech-info { border-top: 1px solid #324870; margin-top: 50px; padding-top: 30px; }
.bg-tech .tech-info::after { content: ''; display: table; clear: both; }
.bg-tech .tech-info-contact { float: left; }
.bg-tech .tech-info-contact li { color: #fff; float: left; margin-left: 10px; }
.bg-tech .tech-info-contact li:first-child { margin-left: 0; }
.bg-tech .tech-info-util { float: right; margin-top: -10px; }
.bg-tech .tech-info-util::after { content: ''; display: table; clear: both; }
.bg-tech .tech-info-util li { float: left; margin-left: 5px; }
.bg-tech .tech-info-util a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff; display: inline-block; border: 2px solid #fff; font-size: 14px; }
.bg-tech .tech-info-util a:hover { background: #007eff; }
.bg-tech .tech-info-util i { vertical-align: -2px; }

.tech-type.wonderbox h2:after { background: #a94ff3; }
.tech-type.wonderbox p span { background: #a94ff3; }
.tech-type.neo h2:after { background: #15e2d6; }
.tech-type.neo p span { background: #15e2d6; }
.tech-type.caos h2:after { background: #07c5ff; }
.tech-type.caos p span { background: #07c5ff; }
.tech-type.bingo h2:after { background: #4958ee; }
.tech-type.bingo p span { background: #4958ee; }
.tech-type.pickdata h2:after { background: #007eff; }
.tech-type.pickdata p span { background: #007eff; }
.tech-type.social-hub h2:after { background: #d7515f; }
.tech-type.social-hub p span { background: #d7515f; }

.wonderbox-content1, .neo-content2, .neo-content3, .neo-content4 { background: url(../images/tech/wonderbox_bg2.png) right top no-repeat; text-align: left; }
.wonderbox-content1 h2, .neo-content2 h2, .neo-content3 h2, .neo-content4 h2 { font-size: 50px; padding-top: 30px; color: #1a2a48; }
.wonderbox-content1 h2:after, .neo-content2 h2:after, .neo-content3 h2:after, .neo-content4 h2:after { content: ''; display: block; width: 28px; height: 4px; background: #1a2a48; margin: 35px 0; }
.wonderbox-content1 h2 span, .neo-content2 h2 span, .neo-content3 h2 span, .neo-content4 h2 span { color: #a94ff3; font-weight: bold; }
.wonderbox-content1 h3, .neo-content2 h3, .neo-content3 h3, .neo-content4 h3 { font-size: 32px; }
.wonderbox-content1 h3 span, .neo-content2 h3 span, .neo-content3 h3 span, .neo-content4 h3 span { font-weight: bold; line-height: 1.3em; }
.wonderbox-content1 p, .neo-content2 p, .neo-content3 p, .neo-content4 p { line-height: 1.5em; margin-top: 30px; }
.wonderbox-content1 p span, .neo-content2 p span, .neo-content3 p span, .neo-content4 p span { background: #a94ff3; color: #fff; font-family: kr-bold; padding: 2px; }

.wonderbox-content2 { background: #fff; }
.wonderbox-content2 .content-wrap-inner { background: transparent url(../images/tech/wonderbox_content2_img.jpg) center top no-repeat; padding: 788px 10px 80px; }

.wonderbox-content2-service { margin-top: 0 !important; text-align: left; }
.wonderbox-content2-service h2 { font-family: kr-bold !important; }
.wonderbox-content2-service p { font-size: 16px; color: #666; line-height: 1.7em; }

.wonderbox-content3 h2, .bingo-content3 h2 { font-size: 58px; font-family: eng-light; }
.wonderbox-content3 h2 span, .bingo-content3 h2 span { font-size: 35px; display: block; font-family: inherit; margin-bottom: 5px; }

.wonderbox-content3-list { text-align: left; margin-top: 30px; }
.wonderbox-content3-list::after { content: ''; display: table; clear: both; }
.wonderbox-content3-list:first-child { margin-top: 0; }
.wonderbox-content3-list img, .wonderbox-content3-list .speech-bubble { float: left; }
.wonderbox-content3-list.list2 { text-align: right; }
.wonderbox-content3-list.list2 .speech-bubble { background: #be95e1; margin-left: 185px; margin-right: 45px; border-radius: 20px 0 20px 20px; }
.wonderbox-content3-list.list2 .speech-bubble:after { background: url(../images/tech/wonderbox_content3_arrow2.png) 0 0 no-repeat; left: inherit; right: -25px; }
.wonderbox-content3-list.list3 .speech-bubble { background: #95aee1; }
.wonderbox-content3-list.list3 .speech-bubble:after { background: url(../images/tech/wonderbox_content3_arrow3.png) 0 0 no-repeat; }
.wonderbox-content3-list.list4 { text-align: right; }
.wonderbox-content3-list.list4 .speech-bubble { background: #95cee1; margin-left: 185px; margin-right: 45px; border-radius: 20px 0 20px 20px; }
.wonderbox-content3-list.list4 .speech-bubble:after { background: url(../images/tech/wonderbox_content3_arrow4.png) 0 0 no-repeat; left: inherit; right: -25px; }
.wonderbox-content3-list .speech-bubble { width: 565px; color: #fff; padding: 30px  20px 30px 50px; background: #a2c8ed; border-radius: 0 20px 20px; position: relative; margin-left: 45px; }
.wonderbox-content3-list .speech-bubble:after { content: ''; background: url(../images/tech/wonderbox_content3_arrow1.png) 0 0 no-repeat; width: 25px; height: 26px; position: absolute; top: 0; left: -25px; }
.wonderbox-content3-list .speech-bubble p { line-height: 1.5em; font-size: 20px; }
.wonderbox-content3-list .speech-bubble span { font-size: 16px; margin-top: 5px; display: block; }

.neo-content1 { background: url(../images/tech/tech2_bg.jpg) center center no-repeat; height: 717px; }

.neo-content-list { margin-bottom: 80px; text-align: center; }
.neo-content-list li { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; display: inline-block; text-align: center; border-bottom: 5px solid #c2cdd9; margin-left: 5px; color: #c2cdd9; font-family: eng-light; font-size: 20px; padding-bottom: 5px; width: 185px; }
.neo-content-list li:first-child { margin-left: 0; }
.neo-content-list li.is-active { border-bottom: 5px solid #007eff; color: #007eff; }

.neo-content2, .neo-content3, .neo-content4 { background: url(../images/tech/neo_bg2.png) right bottom no-repeat; }
.neo-content2 h2, .neo-content3 h2, .neo-content4 h2 { font-size: 80px; font-family: eng-light; padding-top: 0; }
.neo-content2 h2:after, .neo-content3 h2:after, .neo-content4 h2:after { width: 40px; height: 7px; background: #007eff; margin: 35px 0; }
.neo-content2 h2 span, .neo-content3 h2 span, .neo-content4 h2 span { color: #666; font-weight: kr-bold; font-size: 22px; display: block; margin-bottom: 10px; }
.neo-content2 p, .neo-content3 p, .neo-content4 p { color: #666; font-size: 20px; font-family: kr; text-decoration: none; }
.neo-content2 p span, .neo-content3 p span, .neo-content4 p span { background: 0 none; color: #007eff; font-size: 25px; font-family: kr-bold; text-decoration: underline; display: block; padding: 0; }

.neo-content3 { background: url(../images/tech/neo_bg3.png) right bottom no-repeat; }
.neo-content3 h2:after { background: #41affd; }
.neo-content3 p span { color: #41affd; }

.neo-content4 { background: url(../images/tech/neo_bg4.png) right 130px no-repeat; }
.neo-content4 h2:after { background: #46d6a8; }
.neo-content4 h2 em { font-size: 45px; font-family: eng-light; display: block; }
.neo-content4 p span { color: #46d6a8; }

.neo-content6 { background: #73a1da; }
.neo-content6 .content-wrap-inner { background: transparent; text-align: center; }
.neo-content6 .img-spotlight img { display: inline-block; }
.neo-content6 a { width: 160px; height: 50px; text-align: center; font-size: 18px; display: inline-block; border-radius: 25px; background-color: transparent; padding: 13px 0; color: #fff; border: 3px solid #007eff; margin-top: 30px; border-color: #fff; }
.neo-content6 a i { background: url(../images/about/icon_slider_link.png) 0 0 no-repeat; width: 8px; height: 13px; display: inline-block; margin-left: 11px; }

.caos-content1 { background: url(../images/tech/tech3_bg.jpg) center center no-repeat; height: 800px; }

.bingo-content1 { text-align: center; padding: 80px 0; }
.bingo-content1 .img-spotlight { display: inline-block; }
.bingo-content1 ul { margin-top: 20px; }
.bingo-content1 ul:after { content: ''; display: block; width: 28px; height: 4px; margin: 25px auto; background: #1a2a48; }
.bingo-content1 li { margin-top: 5px; }
.bingo-content1 li:first-child { margin-top: 0; }
.bingo-content1 h2 { font-size: 50px; color: #1a2a48; }
.bingo-content1 h2 span { color: #4958ee; }

.bingo-content2 { background: url(../images/tech/bingo_bg3.jpg) left top no-repeat; }
.bingo-content2 ul { margin-left: 270px; }
.bingo-content2 li { border-bottom: 1px solid #c2cdd9; padding: 45px 60px 45px 50px; }
.bingo-content2 li:first-child { padding: 0 80px 45px 50px; }
.bingo-content2 li h3 { font-family: kr-bold; font-size: 35px; color: #4f6e95; margin-bottom: 20px; }
.bingo-content2 li h3 em { font-family: eng-light; font-size: 35px; display: block; margin-bottom: 10px; }
.bingo-content2 li p { line-height: 1.7em; }

.pickdata-content1 { background: #eef5ff url(../images/tech/pickdata_content1_bg.png) right center no-repeat; height: 690px; width: 960px; margin: 0 auto; padding: 80px 10px; }
.pickdata-content1 .pickdata-title-split { text-align: left; }
.pickdata-content1 .pickdata-title-split em { font-size: 40px; margin-bottom: 10px; display: block; }
.pickdata-content1 .pickdata-title-split h2 span { color: #375698; font-family: kr-bold; font-size: 55px; display: inline-block; border-bottom: 3px solid #375698; margin-top: 9px; }
.pickdata-content1 .pickdata-title-split h2 span.child2 { color: #007eff; border-bottom: 3px solid #007eff; }
.pickdata-content1 .pickdata-title-split h2 span.child3 { color: #002a98; border-bottom: 3px solid #002a98; }

.pickdata-content2 { background: #fff; }
.pickdata-content2 .content-wrap-inner { background: transparent; }

.pickdata-content2-section { margin-top: 50px; text-align: left; }
.pickdata-content2-section::after { content: ''; display: table; clear: both; }
.pickdata-content2-section .text-article { padding-top: 65px; }
.pickdata-content2-section .text-article.what { background: url(../images/tech/pickdata_content2_img1.gif) right top no-repeat; padding-bottom: 160px; }
.pickdata-content2-section .text-article.how { background: url(../images/tech/pickdata_content2_img2.gif) right center no-repeat; padding-bottom: 90px; }
.pickdata-content2-section .text-article.why { background: url(../images/tech/pickdata_content2_img3.gif) right center no-repeat; padding-bottom: 80px; }
.pickdata-content2-section .text-article.who { background: url(../images/tech/pickdata_content2_img4.gif) right center no-repeat; padding-bottom: 80px; }
.pickdata-content2-section em { width: 100%; border-top: 1px solid #4f6e95; display: block; text-align: left; }
.pickdata-content2-section em span { display: inline-block; font-size: 16px; color: #fff; background: #4f6e95; padding: 8px 10px; }
.pickdata-content2-section h3 { font-size: 50px; color: #007eff; font-family: eng-light; }
.pickdata-content2-section h3:after { content: ''; width: 30px; height: 5px; margin: 10px 0 15px; display: block; background: #007eff; }
.pickdata-content2-section p { font-size: 20px; line-height: 1.5em; }
.pickdata-content2-section p span { font-family: kr-bold; }
.pickdata-content2-section .sub-text { color: #666; margin-top: 35px; }

.pickdata-content3 { background: #3a5fab; }
.pickdata-content3 .content-wrap-inner { background: url(../images/tech/pickdata_content3_bg.png) center 80px no-repeat; padding: 378px 10px 80px; color: #fff; }
.pickdata-content3 h3 { font-family: kr-bold; font-size: 55px; line-height: 1; margin-bottom: 25px; }
.pickdata-content3 p { line-height: 1.5; }

.about-title { text-align: center; font-size: 65px; color: #111; position: relative; }
.about-title:before { content: ''; position: absolute; background: url(../images/about/icon_title_q.png) 0 0 no-repeat; width: 53px; height: 42px; top: 55px; left: 150px; }
.about-title:after { content: ''; position: absolute; background: url(../images/about/icon_title_q.png) -56px 0 no-repeat; width: 53px; height: 42px; top: 55px; right: 180px; }
.about-title em { font-weight: bold; color: #007eff; }

.regular-paragraph { margin-top: 20px; margin-bottom: 60px; }

.about-list { margin-top: 100px; }
.about-list::after { content: ''; display: table; clear: both; }
.about-list li { float: left; }
.about-list dt { font-size: 40px; margin-bottom: 35px; }
.about-list dt:before { content: ''; width: 75px; border-top: 5px solid #007eff; display: block; }
.about-list dt em { color: #999; padding-top: 27px; display: inline-block; }
.about-list dt span { font-weight: bold; }
.about-list dd { line-height: 1.7em; font-size: 16px; }
.about-list dd span { background: #000; color: #fff; display: inline-block; padding: 0 3px; line-height: 1.5em; }
.about-list .about-list1 { margin-right: 65px; }
.about-list .about-list2 { margin-right: 35px; }

.about-business { width: 720px; margin: 0 auto; }
.about-business::after { content: ''; display: table; clear: both; }
.about-business li { -webkit-transition: box-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: box-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: box-shadow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); display: table; margin: 10px; float: left; width: 220px; height: 220px; border-radius: 110px; background: #2b323f; text-align: center; position: relative; }
.about-business li a { -webkit-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); display: table-cell; vertical-align: middle; color: #fff; font-size: 25px; font-family: eng; line-height: 1.2em; position: relative; z-index: 10; }
.about-business li img { -webkit-transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); opacity: 0; position: absolute; top: 0; left: 0; z-index: 9; }
.about-business li:hover { -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.33); -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.33); box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.33); }
.about-business li:hover:after { content: ''; position: absolute; bottom: 28px; left: 50%; margin-left: -7px; width: 13px; height: 21px; z-index: 10; background: url(../images/about/icon_business_arrow.png) 0 0 no-repeat; }
.about-business li:hover a { text-shadow: 2px 2px 5px rgba(31, 6, 10, 0.35); }
.about-business li:hover img { opacity: 1; }

.facebook-partner { background: #3a5fab; }
.facebook-partner .content-wrap-inner { background: url(../images/about/facebook_partner_bg.png) center 100px no-repeat; padding: 212px 10px 80px; color: #fff; line-height: 1.3; }
.facebook-partner h3 { font-family: kr-bold; font-size: 58px; }
.facebook-partner p { line-height: 1.5; margin-top: 150px; }

.facebook-partner-link { text-align: center; margin-top: 60px; }
.facebook-partner-link::after { content: ''; display: table; clear: both; }
.facebook-partner-link li { display: inline-block; margin-left: 5px; }
.facebook-partner-link li:first-child { margin-left: 0; }
.facebook-partner-link a { color: #fff; padding: 0 30px; height: 50px; display: block; border: 3px solid #fff; border-radius: 25px; line-height: 48px; font-size: 18px; }
.facebook-partner-link i { background: url(../images/about/icon_slider_link.png) 0 0 no-repeat; width: 8px; height: 13px; display: inline-block; margin-left: 11px; }

.our-client-wrap { position: relative; }

.our-client { border-top: 2px solid #007eff; margin-top: 30px; padding: 30px 0; }
.our-client ul { width: 850px; height: 500px; margin: 0 auto; }
.our-client ul::after { content: ''; display: table; clear: both; }
.our-client li { width: 160px; height: 80px; margin: 10px 5px; float: left; display: table; text-align: center; }
.our-client li span { display: table-cell; vertical-align: middle; }
.our-client li span img { display: inline-block; max-height: 75px; }

.our-client-paging { position: absolute; bottom: 0; width: 100%; text-align: center; }
.our-client-paging a { width: 13px; height: 13px; background: #ccc; display: inline-block; border-radius: 13px; text-indent: -9999px; margin-left: 5px; }
.our-client-paging a:first-child { margin-left: 0; }
.our-client-paging a.jp-current { background: #007eff; }
.our-client-paging .jp-previous { margin-left: 0; border-radius: 0; position: absolute; cursor: pointer; width: 40px; height: 40px; top: -287px; left: 0; text-indent: -9999px; background: url(../images/about/paging_prev.gif) 0 0 no-repeat; }
.our-client-paging .jp-next { margin-left: 0; border-radius: 0; position: absolute; cursor: pointer; width: 40px; height: 40px; top: -287px; right: 0; text-indent: -9999px; background: url(../images/about/paging_next.gif) 0 0 no-repeat; }
.our-client-paging .jp-disabled { display: none; }

.about-identity { background: url(../images/about/about_identity_bg.png) center center no-repeat; height: 800px; }
.about-identity .content-wrap-inner { padding: 80px 10px 80px; margin: 0 auto; background: transparent; }
.about-identity .page-sub-title { color: #fff; }
.about-identity .regular-paragraph { color: #fff; }
.about-identity .symbol { position: relative; width: 940px; height: 201px; background: url(../images/about/about_identity_symbol.png) 0 0 no-repeat; }
.about-identity .symbol a { position: absolute; top: 81px; right: 110px; }
.about-identity .brand-color { width: 700px; margin: 60px auto 0; }
.about-identity .brand-color::after { content: ''; display: table; clear: both; }
.about-identity .brand-color li { float: left; width: 350px; }
.about-identity .brand-color li span { float: left; width: 60px; height: 60px; border: 2px solid #fff; border-radius: 30px; display: inline-block; margin-right: 10px; }
.about-identity .brand-color li dl, .about-identity .brand-color li dd { float: left; line-height: 1; }
.about-identity .brand-color li dl { margin-top: 11px; }
.about-identity .brand-color li dt { text-align: left; color: #fff; font-family: kr-bold; margin-bottom: 8px; }
.about-identity .brand-color li dd { color: #add4ff; font-size: 14px; margin-right: 9px; }
.about-identity .brand-color li dd.rgb { margin-left: 10px; padding-left: 20px; border-left: 1px solid #93b6de; }

.brand-color1 { margin-bottom: 20px; }
.brand-color1 span { background: #07c5ff; }

.brand-color2 { margin-bottom: 20px; }
.brand-color2 span { background: #007eff; }

.brand-color3 span { background: #2b323f; }

.brand-color4 span { background: #000; }

.map-wrap { width: 100%; position: relative; height: 880px; }

.map-contact { position: absolute; top: 50px; left: 50%; width: 480px; height: 780px; background: rgba(37, 41, 49, 0.95); z-index: 90; padding: 55px 26px; }
.map-contact h3, .map-contact .address-wrap { float: left; }
.map-contact h3 { width: 225px; color: #fff; font-size: 35px; position: relative; }
.map-contact h3:after { content: ''; width: 35px; height: 5px; background: #007eff; position: absolute; bottom: -10px; left: 0; }
.map-contact address { margin-top: 35px; }
.map-contact address h4 { color: #007eff; font-family: kr-bold; }
.map-contact address p, .map-contact address a { color: #fff; line-height: 1; margin-top: 8px; }
.map-contact address:first-child { margin-top: 0; }

.page-header { -webkit-transition: background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); -moz-transition: background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); transition: background 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); z-index: 99; background: rgba(0, 0, 0, 0.3); width: 100%; height: 80px; position: fixed; top: 0; left: 0; text-align: center; border-bottom: 0px solid #07c5ff; }
.page-header::after { content: ''; display: table; clear: both; }
.page-header:after { content: ''; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width 0.7s ease, background-color 0.7s ease; }
.page-header.header-change { background: black; }
.page-header.header-change:after { width: 100%; background: #07c5ff; }
.page-header .profile-download { width: 130px; height: 40px; text-align: center; font-size: 14px; display: inline-block; border-radius: 20px; background-color: transparent; padding: 10px 0; color: #fff; border: 3px solid #007eff; float: left; margin-top: 20px; }
.page-header h1 { display: inline-block; margin-top: 30px; position: absolute; top: 0; left: 50%; margin-left: -58px; }
.page-header-inner { height: 80px; display: table; position: relative; }
.page-header .local-toggle { cursor: pointer; position: absolute; right: 105px; top: 29px; color: #999; font-size: 16px; height: 23px; line-height: 23px; }
.page-header .local-toggle p { float: left; background: url(../images/local_toggle_icon.png) 0 0 no-repeat; font-family: eng-light; padding-left: 32px; }
.page-header .local-toggle.is-active span { background-position: 0 -7px; }
.page-header .local-toggle span { float: left; background: url(../images/local_toggle_btn.png) 0 0 no-repeat; width: 11px; height: 7px; display: block; margin-top: 7px; margin-left: 9px; }
.page-header .local-toggle .local-toggle-nav { display: none; position: absolute; top: 33px; left: 0; width: 100%; padding: 9px 0 0 0; background: #000; }
.page-header .local-toggle .local-toggle-nav li { margin-bottom: 10px; }
.page-header .local-toggle .local-toggle-nav a { font-family: eng-light; color: #fff; font-size: 16px; margin-left: 11px; }
.page-header .local-toggle .local-toggle-nav a:hover { color: #007eff; }
.page-header .page-nav-btn { float: right; margin-top: 29px; cursor: pointer; }
.page-header .page-nav-btn h2 { float: left; font-family: eng; font-weight: bold; font-size: 16px; margin-right: 6px; line-height: 23px; color: #fff; }
.page-header .page-nav-btn .page-nav-icon { float: left; }

@keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%); -o-transform: translateX(20%); transform: translateX(20%); }
  100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
.page-nav { -webkit-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); background: #007eff; width: 100%; height: 0; opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; z-index: 99; }
.page-nav .gnb li { text-align: left; margin-top: 30px; position: relative; height: 0; overflow: hidden; }
.page-nav .gnb li .light { font-family: kr-ul; }
.page-nav .gnb li .line { opacity: 0; background: url(../images/common/page_nav_line.png) 0 0 no-repeat; width: 37px; height: 37px; display: block; position: absolute; right: 0; top: 10px; }
.page-nav .gnb .emple { overflow: inherit; }
.page-nav .gnb .sns-list { margin-top: 30px; }
.page-nav .gnb .sns-list::after { content: ''; display: table; clear: both; }
.page-nav .gnb .sns-list span { -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; display: inline-block; float: left; width: 61px; height: 60px; margin-left: 10px; opacity: 0.7; }
.page-nav .gnb .sns-list span:first-child { margin-left: 0; }
.page-nav .gnb .sns-list span:hover { opacity: 1; }
.page-nav .gnb .sns-list a { transition: none; width: 61px; height: 60px; display: inline-block; }
.page-nav .gnb .sns-list a:hover:after { transition: none; width: 0; }
.page-nav .gnb .sns-list .facebook { background: url(../images/common/icon_gnb_sns.png) 0 0 no-repeat; }
.page-nav .gnb .sns-list .tw { background: url(../images/common/icon_gnb_sns.png) -61px 0 no-repeat; }
.page-nav .gnb .sns-list .youtube { background: url(../images/common/icon_gnb_sns.png) -122px 0 no-repeat; }
.page-nav .gnb .sns-list .blog { background: url(../images/common/icon_gnb_sns.png) -183px 0 no-repeat; }
.page-nav .gnb a { color: #7bbcff; font-family: eng-exlight; font-size: 53px; line-height: 1; display: block; transition: color 0.2s ease; width: 452px; }
.page-nav .gnb a:hover { color: #fff; }
.page-nav .gnb a:after { -webkit-transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); content: ''; display: block; height: 2px; width: 0; background: #7bbcff; margin-top: -20px; top: 0px; position: relative; }
.page-nav .gnb a:hover:after { width: 100%; background: #7bbcff; }
.page-nav.open { opacity: 1; visibility: visible; height: 100%; }
.page-nav.open .gnb li { -webkit-transform: translateX(90px); -moz-transform: translateX(90px); -ms-transform: translateX(90px); -o-transform: translateX(90px); transform: translateX(90px); opacity: 0; height: 53px; }
.page-nav.open .gnb li:first-child { margin-top: 0; }
.page-nav .page-nav-inner { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; position: absolute; top: 50%; left: 50%; }
.page-nav .gnb, .page-nav .sns-link { vertical-align: middle; }

.page-subnav { position: absolute; top: 80px; left: 0; z-index: 91; width: 100%; background: #07c5ff; height: 75px; }
.page-subnav.tech { background: #017eff; }
.page-subnav.tech h2 { background: url(../images/common/icon_subnav_tech.png) right center no-repeat; }
.page-subnav.tech .sub-nav-list { background: #07c5ff; }
.page-subnav.tech .sub-nav-list a { color: #a2e8ff; display: inline-block; width: 150px; }
.page-subnav.tech .sub-nav-list a:hover { color: #fff; }
.page-subnav.tech .history-back { background: #0069d6 url(../images/common/icon_history.png) center 16px no-repeat; }

.page-subnav-inner { width: 960px; padding: 0 10px; margin: 0 auto; text-align: center; position: relative; }
.page-subnav-inner h2 { font-size: 25px; color: #fff; line-height: 75px; background: url(../images/common/icon_subnav.png) right center no-repeat; padding-right: 35px; display: inline-block; cursor: pointer; }
.page-subnav-inner .history-back { width: 75px; height: 75px; position: absolute; right: 0; top: 0; background: #07b0ff url(../images/common/icon_history.png) center 16px no-repeat; text-align: center; font-family: eng-light; color: #fff; padding-top: 46px; }

.sub-nav-list { display: none; width: 100%; text-align: center; background: #007eff; padding: 30px 0; }
.sub-nav-list li { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); margin-top: 20px; opacity: 0; }
.sub-nav-list li:first-child { margin-top: 0; }
.sub-nav-list a { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; color: #85c0fc; font-size: 22px; border-bottom: 1px solid transparent; }
.sub-nav-list a:hover { color: #fff; border-bottom: 1px solid #fff; }

.hamburger { display: inline-block; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; }

.hamburger-box { width: 25px; height: 22px; display: inline-block; position: relative; z-index: 100; }

.hamburger-inner { display: block; top: 50%; margin-top: -2px; }

.hamburger-inner, .hamburger-inner:before, .hamburger-inner:after { width: 25px; height: 4px; background-color: #fff; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; }

.hamburger-inner:before, .hamburger-inner:after { content: ""; display: block; }

.hamburger-inner:before { top: -9px; }

.hamburger-inner:after { bottom: -9px; }

.hamburger--spin .hamburger-inner { transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin .hamburger-inner:before { transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in; }

.hamburger--spin .hamburger-inner:after { transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.hamburger--spin.is-active .hamburger-inner:before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; }

.hamburger--spin.is-active .hamburger-inner:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); bottom: 0; transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

.page-footer { background: #2b323f; }

.page-footer-inner { width: 940px; margin: 0 auto; text-align: left; }
.page-footer-inner::after { content: ''; display: table; clear: both; }
.page-footer-inner .facebook-partner-icon { float: right; margin-top: 35px; }

.privacy-popup-btn { width: 100%; background: #242a35; text-align: center; }
.privacy-popup-btn a { padding: 15px 0; display: block; color: #999; }
.privacy-popup-btn a:hover { color: #fff; }

.address-copyright { background: #2b323f; float: left; color: #999; padding: 35px 0; }
.address-copyright address { margin-bottom: 10px; }
.address-copyright li { display: inline-block; margin-left: 15px; }
.address-copyright li:first-child { margin-left: 0; }

.popup-wrap .agree-note { margin-top: 10px; line-height: 1.5em; font-size: 14px; display: block; }

.popup-agree-cont { padding: 30px; }

.popup-header { background: #007eff; height: 50px; padding: 15px 20px; position: relative; }
.popup-header h1 { font-size: 18px; color: #fff; }
.popup-header a { position: absolute; top: 13px; right: 15px; }

.popup-agree-cont strong, .popup-agree-cont dl, .popup-agree-cont dd { color: #333; line-height: 1.5em; font-size: 14px; }

.popup-body dl { margin-top: 30px; }

.popup-body dl dt { margin-bottom: 5px; font-weight: bold; }

.popup-body dl dd { margin-left: 8px; color: #8a8989; padding-left: 7px; }
.popup-body dl dd ul { margin: 10px; }

.popup-agree-table { margin-top: 10px; border-collapse: collapse; }
.popup-agree-table table { width: 100%; }

.popup-agree-table th { background: #e5e5e5; border: 1px solid #7f7f7f; padding: 0; font-size: 14px; }

.popup-agree-table th p { padding: 10px; display: block; border: 1px solid #ffffff; }

.popup-agree-table td { border: 1px solid #7f7f7f; padding: 5px; text-align: center; line-height: 1.5em; font-size: 14px; }

.popup-agree .popup-footnote { margin-top: 10px; display: block; text-align: right; }

.portfolio-wrap { margin-top: 35px; }
.portfolio-wrap::after { content: ''; display: table; clear: both; }
.portfolio-wrap .portfolio-logo { margin-bottom: 8px; display: block; position: relative; z-index: 10; }
.portfolio-wrap h4 { position: relative; z-index: 10; }
.portfolio-wrap .portfolio-type { position: absolute; z-index: 10; bottom: 20px; right: 20px; width: 35px; height: 32px; background: url(../images/common/icon_portfolio.png); }
.portfolio-wrap .portfolio-type.sa { background-position: 0 0; }
.portfolio-wrap .portfolio-type.da { background-position: -35px 0; }
.portfolio-wrap .portfolio-type.sns { background-position: -70px 0; }
.portfolio-wrap .portfolio-type.web { background-position: -105px 0; }
.portfolio-wrap .portfolio-type.video { background-position: -140px 0; }
.portfolio-wrap .portfolio-type.etc { background-position: -175px 0; }
.portfolio-wrap .portfolio-list::after { content: ''; display: table; clear: both; }
.portfolio-wrap .portfolio-box { position: relative; width: 300px; height: 260px; cursor: pointer; float: left; background-color: #2d3644; background-image: -webkit-repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.3) 3px); background-image: -moz-repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.3) 3px); background-image: -o-repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.3) 3px); background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 1px, transparent 2px, transparent 2px, rgba(0, 0, 0, 0.3) 3px); background-size: 4px 4px; color: #fff; text-align: left; font-size: 22px; padding: 30px; float: left; margin-bottom: 20px; }
.portfolio-wrap .portfolio-box:nth-child(3n-1) { margin: 0 20px; }
.portfolio-wrap .portfolio-box:hover, .portfolio-wrap .portfolio-box.is-open { border: 5px solid #007eff; padding: 25px; }
.portfolio-wrap .portfolio-box:hover .hover-img, .portfolio-wrap .portfolio-box.is-open .hover-img { opacity: 0.2; margin: -5px; }
.portfolio-wrap .portfolio-box:hover .portfolio-type, .portfolio-wrap .portfolio-box.is-open .portfolio-type { bottom: 15px; right: 15px; }
.portfolio-wrap .portfolio-box .hover-img { -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; transition: opacity 0.2s ease; opacity: 0; position: absolute; top: 0; left: 0; z-index: 9; }

.portfolio-content, .pedia-item-body { clear: both; display: none; cursor: auto; background: #fff; width: 940px; z-index: 10; margin: 10px 0 30px 0; border-top: 3px solid #007eff; border-bottom: 2px solid #2d3644; text-align: center; padding-bottom: 70px; position: relative; }
.portfolio-content .type, .pedia-item-body .type { margin: 0 auto; width: 430px; border-radius: 0 0 25px 25px; background: #007eff; text-align: center; font-size: 16px; padding: 5px 0; margin-bottom: 35px; color: #fff; }
.portfolio-content .close, .pedia-item-body .close { position: absolute; top: 20px; right: 20px; }
.portfolio-content h5, .pedia-item-body h5 { font-size: 30px; color: #111; text-align: center; margin-bottom: 10px; }
.portfolio-content h5 a, .pedia-item-body h5 a { display: inline-block; vertical-align: -7px; margin-left: 10px; }
.portfolio-content .info, .pedia-item-body .info { display: inline-block; }
.portfolio-content .info li, .pedia-item-body .info li { display: inline-block; color: #909db2; font-size: 16px; margin-left: 10px; padding-left: 10px; border-left: 1px solid #999; line-height: 1; }
.portfolio-content .info li:first-child, .pedia-item-body .info li:first-child { border-left: 0 none; padding-left: 0; border-left: 0; }
.portfolio-content .title, .pedia-item-body .title { margin-top: 30px; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; }
.portfolio-content .title::after, .pedia-item-body .title::after { content: ''; display: table; clear: both; }
.portfolio-content .title dt, .pedia-item-body .title dt, .portfolio-content .title dd, .pedia-item-body .title dd { float: left; padding: 10px 40px 10px 30px; font-size: 14px; }
.portfolio-content .title dt, .pedia-item-body .title dt { background: #f4f4f4; font-family: kr-bold; }
.portfolio-content .body, .pedia-item-body .body { padding: 30px 30px 0 30px; line-height: 1.7em; font-size: 14px; text-align: left; }
.portfolio-content .body img, .pedia-item-body .body img { max-width: 100%; }
.portfolio-content .body iframe[src*='www.youtube.com'], .pedia-item-body .body iframe[src*='www.youtube.com'] { width: 100%; }

.pedia-title { font-size: 30px; padding: 30px 0; }
.pedia-title h2 { font-family: kr-bold; }
.pedia-title h2 span { font-size: 16px; color: #909db2; margin-left: 25px; }

.pedia-sort { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 25px 0; margin-bottom: 20px; }
.pedia-sort::after { content: ''; display: table; clear: both; }
.pedia-sort button { background: 0 none; border: 0 none; outline: none; padding: 0; cursor: pointer; }

.pedia-sort-all { font-family: kr-bold; width: 60px; float: left; font-size: 18px; margin-right: 12px; height: 30px; }

.mixitup-control-active { color: #007eff !important; text-decoration: underline; }

.pedia-filter { float: left; }
.pedia-filter ul::after { content: ''; display: table; clear: both; }
.pedia-filter li { float: left; margin-left: 3px; }
.pedia-filter li:first-child { margin-left: 0; }
.pedia-filter li button { width: 30px; height: 30px; font-size: 16px; color: #111; }
.pedia-filter li button.disabled { color: #ccc; cursor: auto; }

.pedia-wrap { min-height: 400px; }

.pedia-content { padding-top: 20px; }
.pedia-content::after { content: ''; display: table; clear: both; }
.pedia-content.etc h2 { font-size: 25px; line-height: 64px; }
.pedia-content h2 { color: #fff; display: block; margin: 0 auto; background: #d1d6e0; width: 60px; height: 60px; line-height: 60px; border-radius: 30px; font-size: 32px; text-align: center; margin-bottom: 20px; }

.pedia-item { width: 300px; float: left; height: 60px; cursor: pointer; font-size: 18px; background: #f4f4f4; text-align: center; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; }
.pedia-item:hover, .pedia-item.is-open { border: 5px solid #007eff; background: #fff; }
.pedia-item:hover p, .pedia-item.is-open p { padding: 15px 20px; color: #007eff; }
.pedia-item:nth-of-type(1) { margin-top: 0; }
.pedia-item:nth-of-type(2) { margin-top: 0; }
.pedia-item:nth-of-type(3) { margin-top: 0; }
.pedia-item:nth-of-type(3n+1) { margin-left: 0; }
.pedia-item p { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; padding: 20px 25px; }

.pedia-item-body { padding-top: 50px; }
.pedia-item-body .title { color: 111; font-size: 14px; padding: 11px 0; }

.pedia-copyright { color: #666; border-top: 1px solid #ccc; margin-top: 15px; padding: 25px 0; }
.pedia-copyright p { margin: 10px 0; }

.mobile-marketing { background: url(../images/marketing/marketing2_sub_bg1.jpg) center center no-repeat; height: 800px; width: 100%; display: table; }

.display-marketing { background: url(../images/marketing/marketing2_sub_bg2.jpg) center center no-repeat; height: 800px; width: 100%; display: table; }

.search-marketing { background: url(../images/marketing/marketing2_sub_bg3.jpg) center center no-repeat; height: 800px; width: 100%; display: table; }

.display-marketing-content .performance-content { margin: 0 auto 60px; padding: 0 45px 95px 45px; border-bottom: 2px solid #1b2944; background: url(../images/marketing/marketing_obj_img2.gif) 594px 40px no-repeat; }
.display-marketing-content .performance-content li { background: url(../images/marketing/marketing_obj_img2_line.gif) 0 bottom no-repeat; }
.display-marketing-content .performance-content li:first-child dl { height: inherit; padding-bottom: 32px; }
.display-marketing-content .performance-content dl { display: table; width: 492px; height: 104px; }
.display-marketing-content .performance-content dt, .display-marketing-content .performance-content dd { display: table-cell; vertical-align: middle; text-align: left; }
.display-marketing-content .performance-content dt { font-family: eng-light; font-size: 28px; width: 250px; padding-left: 23px; }
.display-marketing-content .performance-content dd { color: #666; }

.search-marketing-content .title-content { padding: 82px 20px 45px 20px; margin-bottom: 60px; border-bottom: 2px solid #1b2944; background: url(../images/marketing/marketing_obj_img5.gif) right 0 no-repeat; text-align: left; }
.search-marketing-content .title-content h3 { font-size: 22px; line-height: 1.4em; }
.search-marketing-content .title-content h3 em { font-family: eng-light; font-size: 45px; line-height: 1.5em; }
.search-marketing-content .title-content h3 span { background: #1b2944; color: #daf6ff; padding: 2px; }
.search-marketing-content .title-content p { font-size: 18px; line-height: 1.5em; margin-top: 55px; }
.search-marketing-content .img-mix dd { display: table-cell; vertical-align: top; }
.search-marketing-content .img-mix dd img { padding-left: 50px; }

.recruit-button { position: absolute; bottom: 60px; left: 500px; }
.recruit-button::after { content: ''; display: table; clear: both; }
.recruit-button a { float: left; margin-left: 10px; }
.recruit-button a:first-child { margin-left: 0; }
.recruit-button img { width: auto; height: auto; }

.task-wrap { margin-top: 50px; }
.task-wrap::after { content: ''; display: table; clear: both; }
.task-wrap .task-box { -webkit-transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); -moz-transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); float: left; width: 300px; height: 210px; padding-top: 20px; position: relative; margin-bottom: 20px; }
.task-wrap .task-box:nth-child(3n-1) { margin: 0 20px; }
.task-wrap .task-box.is-open, .task-wrap .task-box:hover { background: #1086ff; }
.task-wrap .task-box.is-open .task-logo, .task-wrap .task-box:hover .task-logo { background: #fff; }
.task-wrap .task-box.is-open .task-title, .task-wrap .task-box:hover .task-title { color: #fff; }
.task-wrap .task-box.is-open .task-type, .task-wrap .task-box:hover .task-type { background-position: 0 0; color: #fff; }
.task-wrap .task-logo { width: 100px; height: 100px; margin: 0 auto; border-radius: 50px; background: #eef5ff; display: table; text-align: center; }
.task-wrap .task-logo span { display: table-cell; vertical-align: middle; }
.task-wrap .task-logo img { display: inline-block; }
.task-wrap .task-title { -webkit-transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); -moz-transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); margin-top: 20px; text-align: center; }
.task-wrap .task-title h3 { font-size: 26px; line-height: 1; margin-top: 8px; }
.task-wrap .task-type { background: url(../images/recruit/speech_bubble.png) no-repeat; text-align: center; width: 74px; height: 38px; display: block; line-height: 1; padding-top: 8px; font-size: 14px; position: absolute; top: 20px; left: 20px; }
.task-wrap .task-type.is-task-hover { background-position: 0 0; color: #fff; }
.task-wrap .task-type.is-task { background-position: 0 -38px; color: #1086ff; }
.task-wrap .task-type.is-task-expected { background-position: 0 -76px; color: #03e0b4; }
.task-wrap .task-type.is-task-end { background-position: 0 -114px; color: #d41f1f; }

.task-content { display: none; padding-bottom: 50px; border-top: 3px solid #1086ff; border-bottom: 2px solid #2d3644; clear: both; }

.task-content-header { padding: 0 20px; border-bottom: 1px solid #dfdfdf; height: 64px; }
.task-content-header::after { content: ''; display: table; clear: both; }
.task-content-header p { float: left; font-size: 18px; color: #909db2; line-height: 1; margin-top: 25px; }
.task-content-header a { float: right; margin-top: 20px; }

.task-content-body { padding: 30px 20px; }
.task-content-body::after { content: ''; display: table; clear: both; }
.task-content-body h4 { font-size: 30px; float: left; width: 280px; }
.task-content-body p { float: left; width: 600px; line-height: 1.7em; font-size: 14px; }

.task-content-link { margin: 35px 0 0 300px; }
.task-content-link::after { content: ''; display: table; clear: both; }
.task-content-link a { background: #272e3b; border-radius: 20px; padding: 11px 20px; font-size: 14px; float: left; margin-left: 5px; color: #fff; }
.task-content-link a:first-child { margin-left: 0; background: #1086ff; }

.recruit-content1 { background: url(../images/recruit/recruit_content1_bg.jpg) center center no-repeat; height: 669px; }

.recruit-benefit { background: #edfdff; }
.recruit-benefit .content-wrap-inner { background: transparent; padding: 80px 0; }

.benefit-list { margin-top: 50px; }
.benefit-list::after { content: ''; display: table; clear: both; }
.benefit-list h4 { font-size: 26px; font-family: eng-light; margin-bottom: 10px; margin-left: 10px; }
.benefit-list li { width: 460px; height: 130px; margin: 10px; display: table; padding-left: 37px; float: left; border: 3px solid #bbe9ff; }
.benefit-list li .icon { width: 60px; height: 60px; margin-right: 25px; }
.benefit-list li .desc { padding-left: 25px; }
.benefit-list li .icon, .benefit-list li .desc { display: table-cell; vertical-align: middle; }
.benefit-list li dt { font-size: 22px; color: #1086ff; margin-bottom: 5px; }

.benefit-icon { display: inline-block; vertical-align: middle; }

.recruit-content2 .content-wrap-inner { padding: 80px 0; }
.recruit-content2 ul { margin-top: 30px; }
.recruit-content2 ul::after { content: ''; display: table; clear: both; }
.recruit-content2 li { float: left; width: 300px; margin: 20px 10px; }
.recruit-content2 dl { margin-top: 20px; text-align: center; }
.recruit-content2 dt { color: #1086ff; font-size: 22px; margin-bottom: 5px; }
.recruit-content2 dd { line-height: 1.5em; }

.recruit-qna { background: #1086ff; }
.recruit-qna .content-wrap-inner { background: transparent; }
.recruit-qna .page-sub-title { color: #fff; }
.recruit-qna .board-more-btn { background: #272e3b; }

.fold-wrap { margin-top: 50px; border-top: 2px solid #272e3b; border-bottom: 1px solid #272e3b; font-size: 20px; }
.fold-wrap dl { border-bottom: 1px solid #43a0ff; padding: 25px 30px; }
.fold-wrap dt.is-open a { color: #fff; font-family: kr-bold; border-bottom: 1px solid #fff; }
.fold-wrap dt a { color: #bbe9ff; }
.fold-wrap dd { display: none; margin-top: 15px; background: #e3f1ff; padding: 17px 20px; line-height: 1.5em; font-size: 16px; }

.creative-wrap { position: relative; }
.creative-wrap .buttonBar { display: none; }

.creative-title { position: absolute; text-align: left; top: 80px; left: 0; color: #fff; }
.creative-title.black h2, .creative-title.black p { color: #2b323f; }
.creative-title h2 { font-family: eng-light; font-size: 60px; margin-bottom: 5px; }
.creative-title p { line-height: 1.5em; }

.creative-wrap-inner { position: absolute; top: 0; left: 50%; width: 960px; margin-left: -480px; }

.creative-movie1, .creative-movie2 { height: 900px; }

.creative-graphic { background: url(../images/marketing/creative_graphic_bg.jpg) center center no-repeat; height: 870px; width: 100%; }
.creative-graphic .content-wrap-inner { position: relative; }

.creative-graphic-slider { background: url(../images/marketing/creative_graphic_monitor.png) 0 0 no-repeat; width: 662px; height: 540px; position: absolute; top: 262px; left: 281px; }
.creative-graphic-slider .creative-graphic-slider-inner { position: absolute; top: 29px; left: 27px; width: 606px; }
.creative-graphic-slider li { width: 606px !important; overflow: hidden; }
.creative-graphic-slider .bx-prev { width: 14px; height: 22px; background: url(../images/marketing/creative_slider_prev.png) 0 0 no-repeat; }
.creative-graphic-slider .bx-prev:hover { background-position: 0 0; }
.creative-graphic-slider .bx-next { width: 14px; height: 22px; background: url(../images/marketing/creative_slider_next.png) right 0 no-repeat; }
.creative-graphic-slider .bx-next:hover { background-position: right 0; }

.creative-offline { background: url(../images/marketing/creative_offline_bg.jpg) center center no-repeat; height: 870px; }

.creative-concept { background: url(../images/marketing/creative_concept_bg.jpg) center center no-repeat; height: 870px; }

.creative-photo { background: url(../images/marketing/creative_photo_bg.jpg) center center no-repeat; height: 870px; }

.creative-copywriting { background: url(../images/marketing/creative_copywriting_bg.jpg) center center no-repeat; height: 870px; }

.creative-emlab { background: url(../images/marketing/creative_emlab_bg.jpg) center center no-repeat; height: 870px; }

.sr-sh-signin__link { display: none !important; }

#board-selector { border-radius: 5px; border: solid 2px #2b323f; font-size: 16px; padding: 0 5px; }

#sort-selector { border-radius: 5px; border: solid 2px #2b323f; font-size: 16px; padding: 0 5px; width: 200px; float: right; }

.sr-sh-theme-card__wrapper { box-shadow: 0 0 0 !important; border: 1px solid #dfdfdf; border-radius: 5px !important; margin: 10px; }

.shuttlerock-content1 { width: 100%; margin: 0 auto; background: #eef5ff; }
.shuttlerock-content1 h2 { text-align: center; font-size: 24px; font-family: kr-bold; line-height: 1.3em; position: absolute; bottom: 80px; width: 100%; }
.shuttlerock-content1 .content-wrap-inner { background: transparent url(../images/tech/sh_content_img1.png) center 85px no-repeat; position: relative; height: 640px; }

.key-benefit { position: absolute; width: 280px; }
.key-benefit dt { font-family: eng-light; text-align: right; font-size: 28px; padding-right: 40px; border-bottom: 1px solid #d7515f; margin-bottom: 10px; padding-bottom: 10px; }
.key-benefit dt span { color: #d7515f; font-family: inherit; }
.key-benefit dd { text-align: right; padding-right: 40px; line-height: 1.5em; }
.key-benefit li { font-size: 14px; color: #999; text-align: left; }
.key-benefit.right dt { padding-left: 40px; padding-right: 0; text-align: left; }
.key-benefit.right dd { text-align: left; padding-left: 40px; padding-right: 0; }

.key-benefit-1 { top: 98px; left: 30px; }

.key-benefit-2 { top: 98px; right: 30px; }

.key-benefit-3 { top: 329px; left: 30px; }

.key-benefit-4 { top: 329px; right: 30px; }

.shuttlerock-content2, .wonderbox-content2-service { margin-top: 50px; }
.shuttlerock-content2::after, .wonderbox-content2-service::after { content: ''; display: table; clear: both; }
.shuttlerock-content2 .feature, .wonderbox-content2-service .feature { border-top: 1px solid #afc9d6; padding: 50px 0; }
.shuttlerock-content2 .feature::after, .wonderbox-content2-service .feature::after { content: ''; display: table; clear: both; }
.shuttlerock-content2 .feature .left-wrap, .wonderbox-content2-service .feature .left-wrap { float: left; width: 50%; }
.shuttlerock-content2 .feature .right-wrap, .wonderbox-content2-service .feature .right-wrap { float: left; width: 50%; text-align: center; }
.shuttlerock-content2 .feature .right-wrap img, .wonderbox-content2-service .feature .right-wrap img { display: inline-block; }
.shuttlerock-content2 .feature h2, .wonderbox-content2-service .feature h2 { font-size: 35px; color: #4f6e95; font-family: eng-light; margin-bottom: 25px; }
.shuttlerock-content2 .feature dt, .wonderbox-content2-service .feature dt { font-size: 22px; line-height: 1.3em; margin-bottom: 20px; }
.shuttlerock-content2 .feature dd, .wonderbox-content2-service .feature dd { background: url(../images/common/bul_text_list.png) 0 10px no-repeat; padding-left: 14px; color: #616161; line-height: 1.5em; margin-top: 5px; }
.shuttlerock-content2 .feature dd:first-child, .wonderbox-content2-service .feature dd:first-child { margin-top: 0; }

.feature3 ul { margin-top: 30px; }
.feature3 ul::after { content: ''; display: table; clear: both; }
.feature3 li { width: 300px; float: left; text-align: center; margin-left: 20px; }
.feature3 li:first-child { margin-left: 0; }
.feature3 li .img-desc { height: 220px; margin-bottom: 20px; }
.feature3 li img { display: inline-block; vertical-align: middle; }
.feature3 li h3 { text-align: left; background: #4f6e95; font-family: eng-light; color: #fff; font-size: 20px; padding: 10px; }
.feature3 li p { margin-top: 17px; text-align: left; line-height: 1.5em; color: #616161; }

.feature4 img { margin-top: 30px; display: inline-block; }

.shuttlerock-content3 { width: 100%; margin: 0 auto; background: #eef5ff; }
.shuttlerock-content3 .content-wrap-inner { background: transparent; position: relative; }

.use-case { margin-top: 50px; }
.use-case::after { content: ''; display: table; clear: both; }
.use-case .title-wrap { background: url(../images/tech/usecase_bg_line.gif) 0 center repeat-x; text-align: center; margin-bottom: 30px; }
.use-case .title-wrap h1 { background: #d7515f; display: inline-block; color: #fff; font-size: 26px; padding: 5px 10px; }
.use-case .left-wrap { float: left; }
.use-case .right-wrap { float: right; }
.use-case h2 { font-size: 26px; color: #2b323f; margin-bottom: 20px; font-family: kr-bold; line-height: 1.5em; }
.use-case p { line-height: 1.5em; font-family: kr-bold; margin-bottom: 30px; }
.use-case li { background: url(../images/common/bul_text_list.png) 0 10px no-repeat; padding-left: 14px; line-height: 1.5em; color: #666; margin-top: 5px; }
.use-case li:first-child { margin-top: 0; }

.shuttlerock-award { background: #3a5fab; }
.shuttlerock-award .content-wrap-inner { background: transparent; position: relative; text-align: center; }
.shuttlerock-award .spotlight { margin-bottom: 50px; }
.shuttlerock-award .spotlight img { display: inline-block; }
.shuttlerock-award h2 { color: #fff; font-size: 58px; font-family: kr-bold; margin-bottom: 20px; }
.shuttlerock-award p { color: #fff; font-size: 16px; font-family: kr-bold; line-height: 1.5em; }
.shuttlerock-award a { width: 160px; height: 50px; text-align: center; font-size: 18px; display: inline-block; border-radius: 25px; background-color: transparent; padding: 13px 0; color: #fff; border: 3px solid #007eff; margin-top: 30px; border-color: #fff; }
.shuttlerock-award a i { background: url(../images/about/icon_slider_link.png) 0 0 no-repeat; width: 8px; height: 13px; display: inline-block; margin-left: 11px; }

/*# sourceMappingURL=main.css.map */