/*
==============================================
main
==============================================
*/

.kv_slogan1 { animation: fadeIn 0.8s linear, lightning 2s ease-in-out 0.8s infinite alternate; }
/*.kv_fly { animation: flyItemfadeIn 0.4s linear .8s backwards,upDown_animation 1s linear 1s infinite alternate;}
*/.bg_fly.animated{ display: block;animation: flyItemfadeIn 0.3s linear backwards,upDown_animation 1.2s linear .3s infinite alternate; }
.tit_01.animated,.tit_02.animated,.tit_03.animated,.tit_04.animated,.tit_05.animated{animation: flipInX 0.8s linear}

/*
==============================================
upDown
==============================================
*/
.upDown_animation { -webkit-animation: upDown_animation 1s ease-in-out infinite alternate; animation: upDown_animation 1s ease-in-out infinite alternate; }
@-webkit-keyframes upDown_animation {
 0% {
-webkit-transform: translate(0, -10px);
}
 100% {
-webkit-transform: translate(0, 0);
}
}
@keyframes upDown_animation {
 0% {
transform: translate(0, -10px);
}
 100% {
transform: translate(0, 0);
}
}
/*
==============================================
flash
==============================================
*/
.flash_animation { -webkit-animation: flash_animation 2s ease-in-out infinite alternate; animation: flash_animation 2s ease-in-out infinite alternate; }
@-webkit-keyframes flash_animation {
 0%, 100%, 50% {
filter: brightness(100%);
}
25%, 75% {
filter: brightness(130%);
}
}
@keyframes flash_animation {
0%, 100%, 50% {
filter: brightness(100%);
}
25%, 75% {
filter: brightness(130%);
}
}
/*
==============================================
flash2
==============================================
*/
.lightning { -webkit-animation: lightning 2s ease-in-out infinite alternate; animation: lightning 2s ease-in-out infinite alternate; }
@-webkit-keyframes lightning {
 0%, 52%,56%,60%, 100% {
filter: brightness(100%);
}
54%,58%,62% {
filter: brightness(120%);
}
}
@keyframes lightning {
 0%, 52%,56%,60%, 100%   {
filter: brightness(100%);
}
54%,58%,62%   {
filter: brightness(120%);
}
}

/*
==============================================
wobble-vertical
==============================================
*/
@-webkit-keyframes wobble-vertical {
 16.65% {
 -webkit-transform: translateY(6px);
 transform: translateY(6px);
}
 33.3% {
 -webkit-transform: translateY(-5px);
 transform: translateY(-5px);
}
 49.95% {
 -webkit-transform: translateY(4px);
 transform: translateY(4px);
}
 66.6% {
 -webkit-transform: translateY(-2px);
 transform: translateY(-2px);
}
 83.25% {
 -webkit-transform: translateY(1px);
 transform: translateY(1px);
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@keyframes wobble-vertical {
 16.65% {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
}
 33.3% {
 -webkit-transform: translateY(-4px);
 transform: translateY(-4px);
}
 49.95% {
 -webkit-transform: translateY(3px);
 transform: translateY(3px);
}
 66.6% {
 -webkit-transform: translateY(-2px);
 transform: translateY(-2px);
}
 83.25% {
 -webkit-transform: translateY(1px);
 transform: translateY(1px);
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
/*
==============================================
slideDown
==============================================
*/
.slideDown { animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; }
 @keyframes slideDown {
 0% {
 transform: translateY(-50%);
}
 50% {
 transform: translateY(-10%);
}
 100% {
 transform: translateY(0%);
}
}
 @-webkit-keyframes slideDown {
 0% {
 -webkit-transform: translateY(-50%);
}
 50% {
 -webkit-transform: translateY(-10%);
}
 100% {
 -webkit-transform: translateY(0%);
}
}
/*
==============================================
leftFadeIn
==============================================
*/
 @keyframes leftFadeIn {
 0% {
 transform: translateX(10%) translateY(10%);
 filter: opacity(0);
}
 50% {
 
 transform: translateX(5%) translateY(5%);
}
 100% {
 transform: translateX(0%) translateY(0%);
 filter: opacity(1);
}
}
 @-webkit-keyframes leftFadeIn {
 0% {
 -webkit-transform:translateX(10%)  translateY(10%);
 -webkit-filter: opacity(0);
}
 50% {
 -webkit-transform:translateX(5%)  translateY(5%);
}
 100% {
 -webkit-transform:translateX(0%)  translateY(0%);
 -webkit-filter: opacity(1);
}
}
/*
==============================================
rightFadeIn
==============================================
*/
 @keyframes rightFadeIn {
 0% {
 transform: translateX(-10%) translateY(10%);
 filter: opacity(0);
}
 50% {
 
 transform: translateX(-5%) translateY(5%);
}
 100% {
 transform: translateX(0%) translateY(0%);
 filter: opacity(1);
}
}
 @-webkit-keyframes rightFadeIn {
 0% {
 -webkit-transform:translateX(-10%)  translateY(10%);
 -webkit-filter: opacity(0);
}
 50% {
 -webkit-transform:translateX(-5%)  translateY(5%);
}
 100% {
 -webkit-transform:translateX(0%)  translateY(0%);
 -webkit-filter: opacity(1);
}
}
/*
==============================================
fadeIn
==============================================
*/
 @keyframes fadeIn {
 0% {
 opacity: 0;
 filter: blur(10px) brightness(150%);
 transform: scale(1);
}
40% {
 opacity: 0;
 filter: blur(10px) brightness(150%);
 transform: scale(1);
}
60% {
 opacity: 1;
 filter: blur(6px) brightness(120%);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 filter: blur(0px) brightness(100%);
 transform: scale(1);
}
}
 @-webkit-keyframes fadeIn {
 0% {
 opacity: 0;
 -webkit-filter: blur(10px) brightness(150%);
 -webkit-transform: scale(1);
}
40% {
 opacity: 0;
 -webkit-filter: blur(10px) brightness(150%);
 -webkit-transform: scale(1);
}
60% {
 opacity: 1;
 -webkit-filter: blur(6px) brightness(120%);
 -webkit-transform: scale(1.1);
}
100% {
 opacity: 1;
 -webkit-filter: blur(0px) brightness(100%);
 -webkit-transform: scale(1);
}
}
@keyframes flyItemfadeIn {
 0% {
 opacity: 0;
 filter: blur(10px) ;
 transform: scale(.5);
}
40% {
 opacity: .5;
 filter: blur(10px);
 transform: scale(.9);
}
60% {
 opacity: .8;
 filter: blur(6px);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 filter: blur(0px);
 transform: scale(1);
}
}
 @-webkit-keyframes flyItemfadeIn {
 0% {
 opacity: 0;
 -webkit-filter: blur(10px);
 -webkit-transform: scale(.5);
}
40% {
 opacity: .5;
 -webkit-filter: blur(10px);
 -webkit-transform: scale(.9);
}
60% {
 opacity: .8;
 -webkit-filter: blur(6px);
 -webkit-transform: scale(1.1);
}
100% {
 opacity: 1;
 -webkit-filter: blur(0px);
 -webkit-transform: scale(1);
}
}
/*==============================================
flipInX
==============================================*/
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg)
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg)
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX
}
@media screen and (max-width:767px) {
    .flipInX {
        animation: none;
}
}