/*----------------------------------------------------------
animation common
----------------------------------------------------------*/
.fadeinUp {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
  -webkit-transition: all .7s;
  -o-transition: all .7s;
  transition: all .7s; }

.fadeinUp.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinDown {
  opacity: 0;
  -webkit-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  transform: translate(0, -50px);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  @media screen and (max-width: 750px) {
    .fadeinDown {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0); } }

.fadeinDown.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinLeft {
  opacity: 0;
  -webkit-transform: translate(-40px, 0);
  -ms-transform: translate(-40px, 0);
  transform: translate(-40px, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.fadeinLeft.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

.fadeinRight {
  opacity: 0;
  -webkit-transform: translate(40px, 0);
  -ms-transform: translate(40px, 0);
  transform: translate(40px, 0);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }

.fadeinRight.scrollin {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

/*----------------------------------------------------------
loading
----------------------------------------------------------*/
.loading {
  -webkit-animation: loading .4s linear 2.5s forwards;
  animation: loading .4s linear 2.5s forwards; }
  .loading_icon {
    opacity: 0;
    -webkit-animation: icon 0.8s cubic-bezier(0.32, 0.95, 0.6, 1) 0.3s forwards;
    animation: icon 0.8s cubic-bezier(0.32, 0.95, 0.6, 1) 0.3s forwards; }
  .loading_logo_text {
    opacity: 0;
    -webkit-animation: opacity .4s linear 1.5s forwards;
    animation: opacity .4s linear 1.5s forwards; }

/*----------------------------------------------------------
keyframes
----------------------------------------------------------*/
@-webkit-keyframes loading {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -99; } }
@keyframes loading {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -99; } }

@-webkit-keyframes icon {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150px) rotate(-90deg);
    transform: translateX(-150px) rotate(-90deg); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px); } }

@keyframes icon {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150px) rotate(-90deg);
    transform: translateX(-150px) rotate(-90deg); }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px); } }

@-webkit-keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }