.wrap{
    width:480px;
    margin:0 auto;
}
.getSession{
    width: 90%; 
    margin: auto;

    
}
.wrap{
    text-align: center;
    margin-top:50%;
}


/*애니메이션*/
@keyframes logo_img {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

/* rotateInDownLeft */
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  animation-iteration-count: infinite;
}

/* rotateIn */
@-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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

/* fadeIn */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
     -webkit-transform-origin: left;
    transform-origin: left;
     -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50%{
       -webkit-transform-origin: center;
    transform-origin: center;
     -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
      opacity: 0.5;

  }
  to {
       -webkit-transform-origin: right;
    transform-origin: right;
     -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
     -webkit-transform-origin: left;
    transform-origin: left;
  }
  50%{
       -webkit-transform-origin: center;
    transform-origin: center;
      opacity: 0.5;

  }
  to {
       -webkit-transform-origin: right;
    transform-origin: right;
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-iteration-count: infinite;
}

/* fadeOutleft */
@-webkit-keyframes fadeOutleft {
  from {
    opacity: 0;
       -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: rotate3d(0, 0, 2, -180deg);
    transform: rotate3d(0, 0, 2, -180deg);
  }
  50%{
      opacity:1;
  }
  to {
    opacity: 0;
     -webkit-transform-origin: right;
    transform-origin: right;    
   -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0,1, 180deg);
  }
  
}

  from {
    opacity: 0;
       -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: rotate3d(0, 0, 2, -180deg);
    transform: rotate3d(0, 0, 2, -180deg);
  }


  to {
    opacity: 0;
         -webkit-transform-origin: right;
    transform-origin: right;
 -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg); 
}

.fadeOutleft {
  -webkit-animation-name: fadeOutleft;
  animation-name: fadeOutleft;
   animation-iteration-count: infinite;
}

/* 애니메이션  */
.animated {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-direction: normal;  
  animation-direction:  normal;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}


@media (max-width:480px) {
    .wrap{
        width: 100%;
    }

}