/*!
 * animsition v4.0.2
 * A simple and easy jQuery plugin for CSS animated page transitions.
 * http://blivesta.github.io/animsition
 * License : MIT
 * Author : blivesta (http://blivesta.com/)
 */
.animsition, .animsition-overlay {
  position: relative;
  opacity: 0;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/**
  * overlay option
  */
.animsition-overlay-slide {
  position: fixed;
  z-index: 9998;
  width: 100%;
  height: 100%;
}
/* loading option */
/*
 .animsition-loading,
 .animsition-loading:after {
     width: 32px;
     height: 32px;
     position: fixed;
     top: 50%;
     left: 50%;
     margin-top: -16px;
     margin-left: -16px;
     border-radius: 50%;
     z-index: 9999;
 }

 .animsition-loading {
     background-color: transparent;
     border-top: 5px solid rgba(0, 0, 0, 0.2);
     border-right: 5px solid rgba(0, 0, 0, 0.2);
     border-bottom: 5px solid rgba(0, 0, 0, 0.2);
     border-left: 5px solid #eee;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
     animation-timing-function: linear;
     -webkit-animation-duration: .8s;
     animation-duration: .8s;
     -webkit-animation-name: animsition-loading;
     animation-name: animsition-loading;
 }
 */
/*
 .animsition-loading {
     z-index: 9999;
     position: fixed;
     top: 50%;
     left: 50%;
     width: 50px;
     height: 50px;
     transform: translate(-50%, -50%);
     padding: 5px 12px;
     text-align: center;
     line-height: 1;
     background: #000 url(/js/pcPofile/indicator_lite.gif) no-repeat 50% 50%;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     -ms-border-radius: 6px;
     -o-border-radius: 6px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
     border-radius: 6px;
 }
 */
.animsition-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
}
.loading-text span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
  animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
  animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
  animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
  animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
  animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
  animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
  animation: blur-text 1.5s 1.2s infinite linear alternate;
}
@-webkit-keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}
@keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

/*
 .animsition-loading {
     background-image: url(/pc/img/footer_logo.svg);
     width: 200px;
     height: 51px;

 }
 */
@-webkit-keyframes animsition-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes animsition-loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-in {
  -webkit-animation-name: fade-in;
  animation-name: fade-in;
  animation-duration: 0.3s;
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fade-out {
  -webkit-animation-name: fade-out;
  animation-name: fade-out;
  animation-duration: 0.3s;
}