/*이미지 선명하게*/
img {image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;}

/*flip card START*/
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
  /*background-color: #bbb;*/
  color: black;
}
.flip-card-back {
  /*background-color: #2980b9;*/
  color: white;
  transform: rotateY(180deg);
}

.flipping1 {
  animation: flipping1 8s ease-in-out infinite;
}
@keyframes flipping1 {
  0% {
    transform: rotateY(0deg);
  }
  5% {
    transform: rotateY(180deg);
    transform-style: preserve-3d;
  }
  10% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
.flipping2 {
  animation: flipping2 8s ease-in-out infinite;
}
@keyframes flipping2 {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  55%{
    transform: rotateY(180deg);
    transform-style: preserve-3d;
  }
  60% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
/*flip card END*/

/*움찔 이미지*/
.twisticon{
      transform: translate3d(0, 0, 0);
      animation: twist 10s infinite linear alternate;
}
@keyframes twist{
  from{
    transform: rotate( 0deg );
  }
  to{
    transform: rotate( -15deg );
  }
}
.movingicon{
  text-align: center;
  animation: up-down 1.4s infinite ease-in-out alternate;
}
@keyframes up-down{
  from{
    transform: translatey(0px);
  }
  to{
    transform: translatey(-20px);
  }
}
.movingicon2{
  text-align: center;
  animation: left-right 1.4s infinite ease-in-out alternate;
}
@keyframes left-right{
  from{
    transform: translatex(0px);
  }
  to{
    transform: translatex(20px);
  }
}
.shk_this {
  transform: translate3d(0, 0, 0);
  animation-name: shakeMe;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes shakeMe {
  2%, 18% {
      transform: translate3d(-5px, 0, 0);
  }

  4%, 16% {
      transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
      transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
      transform: translate3d(5px, 0, 0);
  }
  
  18.1% {
      transform: translate3d(0px, 0, 0);
  }
}

/*floating START*/
.floating {
  animation: floating 4s ease-in-out infinite;
}
.floating2 {
  animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
  from, to {
    transform: translate(0,3%);
  }
  25% {
    transform: translate(-3%,0);
  }
  50% {
    transform: translate(0,-3%);
  }
  75% {
    transform: translate(3%,0);
  }
}
/*floating END*/