@charset "utf-8";

/*open_shutter*/
.load_logo {
	width: 302.5px;
	height: auto;
	margin: 0 auto;
	position: relative;
	top: 43%;
	animation: load_logo 8.0s forwards;
}
@media screen and ( max-width:375px) { .load_logo { top: 42%; } }

.load_logo img{
	width: 100%;
}
@keyframes load_logo {
  0%{
    opacity:0;
  }
  30%{
    opacity:1;
    z-index:999999;
  }
  60%{
    opacity:1;
    z-index:999999;
  }
  100%{
    opacity:0;
    z-index:-19999;
    display:none;
  }
}

.load_anime {
	width: 100px;
	margin: 30px auto 0;
	position: relative;
	top: 18vh;	
}

#load{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff;
	z-index:19999;
	animation: byeShutter 9.0s forwards;
}

#container{
	animation: contentScale 9.5s forwards;
}
@keyframes byeShutter{
  70%{
    opacity:1;
  }
  99%{
    opacity:0;
    z-index:999999;
  }
  100%{
    opacity:0;
    z-index:-19999;
    display:none;
  }
}
@keyframes contentScale{
  70%{
    transform:perspective(800px) scale(0.6) rotateX(15deg);
  }
  100%{
    transform:perspective(800px) scale(1) rotateX(0);
  }
}
.fulfilling-bouncing-circle-spinner, .fulfilling-bouncing-circle-spinner * {
      box-sizing: border-box;
    }

    .fulfilling-bouncing-circle-spinner {
      height: 100px;
      width: 100px;
      position: relative;
      animation: fulfilling-bouncing-circle-spinner-animation infinite 4000ms ease;
    }

    .fulfilling-bouncing-circle-spinner .orbit {
      height: 100px;
      width: 100px;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      border: calc(100px * 0.03) solid #00a99d;
      animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite 4000ms ease;
    }

    .fulfilling-bouncing-circle-spinner .circle {
      height: 100px;
      width: 100px;
      color: #00a99d;
      display: block;
      border-radius: 50%;
      position: relative;
      border: calc(100px * 0.1) solid #00a99d;
      animation: fulfilling-bouncing-circle-spinner-circle-animation infinite 4000ms ease;
      transform: rotate(0deg) scale(1);
    }

    @keyframes fulfilling-bouncing-circle-spinner-animation {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes fulfilling-bouncing-circle-spinner-orbit-animation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1);
      }
      62.5% {
        transform: scale(0.8);
      }
      75% {
        transform: scale(1);
      }
      87.5% {
        transform: scale(0.8);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes fulfilling-bouncing-circle-spinner-circle-animation {
      0% {
        transform: scale(1);
        border-color: transparent;
        border-top-color: inherit;
      }
      16.7% {
        border-color: transparent;
        border-top-color: initial;
        border-right-color: initial;
      }
      33.4% {
        border-color: transparent;
        border-top-color: inherit;
        border-right-color: inherit;
        border-bottom-color: inherit;
      }
      50% {
        border-color: inherit;
        transform: scale(1);
      }
      62.5% {
        border-color: inherit;
        transform: scale(1.4);
      }
      75% {
        border-color: inherit;
        transform: scale(1);
        opacity: 1;
      }
      87.5% {
        border-color: inherit;
        transform: scale(1.4);
      }
      100% {
        border-color: transparent;
        border-top-color: inherit;
        transform: scale(1);
      }
    }