/********** loading ********/
.loading {
    animation: loading .3s ease-in-out 3.5s forwards;
}
.loading:before {
    animation: leftback .6s ease-in-out 2.5s forwards;
}
.loading:after {
    animation: rightback .6s ease-in-out 2.5s forwards;
}
.loading .logo{
    animation: loading3 0.3s ease-in-out 2.8s forwards;
}
.loading .logo img{opacity: 0;}
.loading .logo img:nth-of-type(1){
    animation: loading-logo01 2.4s cubic-bezier(0.905, 0.000, 0.250, 0.995) 0.4s forwards;
}
.loading .logo img:nth-of-type(2){
    animation: loading-logo02 2.4s cubic-bezier(0.905, 0.000, 0.250, 0.995) 0.4s forwards;
}
.loading .logo img:nth-of-type(3){
    animation: loading-logo03 2.4s cubic-bezier(0.905, 0.000, 0.250, 0.995) 0.4s forwards;
}
@keyframes loading {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        z-index: -9;
    }
}
@keyframes leftback {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-50vw);
    }
}
@keyframes rightback {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateX(50vw);
    }
}
@keyframes loading3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
@keyframes loading-logo01 {
    0% {
        opacity: 0;
        transform: translateY(-60px);
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    90% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-60px);
        opacity: 0;
    }
}
@keyframes loading-logo02 {
    0% {
        opacity: 0;
        transform: translate(-60px,60px);
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translate(0px,0px);
        opacity: 1;
    }
    90% {
        transform: translate(0px,0px);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-60px,60px);
    }
}
@keyframes loading-logo03 {
    0% {
        opacity: 0;
        transform: translate(60px,60px);
    }
    20% {
        opacity: 1;
    }
    50% {
        transform: translate(0px,0px);
        opacity: 1;
    }
    90% {
        transform: translate(0px,0px);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(60px,60px);
    }
}
















@keyframes bounceFromTop {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: translate3d(0, 0, 0);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -80px, 0) scale3d(1.2, 1, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -20px, 0);
    }
    90% { transform: translate3d(0, -4px, 0) }
}
@keyframes appearance{
  0%{opacity:0; transform:translate(0,200px);}
  10%{opacity:1; transform:translate(0,-50px);}
  15%{opacity:1; transform:translate(0,0px);}
  20%{opacity:1; transform:translate(0,-20px);}
  25%{opacity:1; transform:translate(0,0px);}
  100%{opacity:1; transform:translate(0,0px);}
}

@keyframes fadeBUp {
    0% {
        -webkit-filter: brightness(2.5);
        -webkit-transform: translate(0, 30px);
        transform: translate(0, 30px);
        filter: brightness(2.5);
        opacity: 0;
    }

    100% {
        -webkit-filter: brightness(1);
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
        filter: brightness(1);
        opacity: 1;
    }
}
@keyframes fade-in {
  0% {
    opacity: 0;
	  
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in-foot {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(1.0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.0);
  }
}
@keyframes fade-in2 {
  0% {
    opacity: 0;
    transform:scale(1.0) translateY(30px) translateX(-50%);
	  
  }
  100% {
    opacity: 1;
    transform:scale(1) translateY(0px) translateX(-50%);
  }
}
@keyframes fade-in3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0px, 0) scale(1.0);
	  
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}

/*************** button setting *********/
.zoomIn {
    opacity: 0;
}
/* zoomIn */
.zoomIn.active {
    animation-name: zoomInAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
/*************** button setting END *********/