/*//////////////////////////
loading
//////////////////////////*/

#wrap {
	opacity: 0;
}

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 103px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

.spriteArea{
    position: fixed;
    top: 50%;
    left: 50%;
    margin: auto;
    width: 108px;
    height: 110px;
    margin-top: -55px;
    margin-left: -54px;
}
.spriteArea .sprite{
    width: 108px;
    height: 110px;
    margin: 0 auto 15px;
    background: url(/images/loading/maru.png) no-repeat 0 0;
	background-size: 1294px 110px;
}
.loading{
    width: 114px;
    height: 11px;
    margin: 0 auto;
    background: url(/images/loading/loading.png) no-repeat 0 0;
	background-size: 114px 11px;
}
.switch {
 -webkit-animation: switchtext 1s infinite alternate;
 animation: switchtext 1s infinite alternate;
}
@-webkit-keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
@keyframes switchtext {
 from { opacity: 1.0; }
 to { opacity: 0; }
}
.spriteLogo.active{
    background: url(/images/loading/spriteLogo.png)no-repeat center center;
	background-size: 64px auto;
    width: 108px;
    height: 110px;
    transform: scale(1.0);
    animation: logo 0.5s linear 1;
    animation-fill-mode: both;
    -webkit-transform: scale(1.0);
    -webkit-animation: logo 0.5s linear 1;
    -webkit-animation-fill-mode: both;
}
@keyframes logo {
    0% {
        transform: scale(0);
    }
    15% {
        transform: scale(1.3);
    }
    30% {
        transform: scale(0.8);
    }
    35% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.0);
    }
}
@-webkit-keyframes logo {
    0% {
        -webkit-transform: scale(0);
    }
    15% {
        -webkit-transform: scale(1.3);
    }
    30% {
        -webkit-transform: scale(0.8);
    }
    35% {
        -webkit-transform: scale(1.1);
    }
    40% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(1.0);
    }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.spriteLogo.active:not(:target){
		transform: scale(1.1);
    	animation: logo_ie 0.5s linear 1;
	}
}
@keyframes logo_ie {
    0% {
        transform: scale(0);
    }
    15% {
        transform: scale(1.3);
    }
    30% {
        transform: scale(0.8);
    }
    35% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}

.spriteArea .frame,
.spriteArea .frame1{
	background: url(/images/loading/maru.png) no-repeat 0 0;
	background-size: 1294px 110px;
}
.spriteArea .frame2{
	background: url(/images/loading/maru.png) no-repeat -110px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame3{
	background: url(/images/loading/maru.png) no-repeat -245px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame4{
	background: url(/images/loading/maru.png) no-repeat -380px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame5{
	background: url(/images/loading/maru.png) no-repeat -514px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame6{
	background: url(/images/loading/maru.png) no-repeat -649px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame7{
	background: url(/images/loading/maru.png) no-repeat -783px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame8{
	background: url(/images/loading/maru.png) no-repeat -918px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame9{
	background: url(/images/loading/maru.png) no-repeat -1052px 0;
	background-size: 1294px 110px;
}
.spriteArea .frame10{
	background: url(/images/loading/maru.png) no-repeat -1187px 0;
	background-size: 1294px 110px;
}