@charset "UTF-8";

/* -----------------------------------------------
loarding
----------------------------------------------- */

#fade {
width: 300vw;
height: 300vw;
border-radius: 50%;
background-color: #0081cc;
position: fixed;
top: 0;
left: -100vw;
bottom: 0;
margin: auto;
z-index: 1001;
overflow: hidden;
}

.loader {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: inline-block;
margin: auto;
width: 30px;
height: 30px;
border: 2px solid #FFF;
border-radius: 50%;
animation: spin 0.75s infinite linear;
-webkit-animation: spin 0.75s infinite linear;
box-sizing: border-box;
}

.load-logo {
width: 365px;
height: 29px;
position: absolute;
left: 0;
top: 50%;
right: 0;
margin: -80px auto auto auto;
overflow: hidden;
background: url(../img/load_title.png) center top no-repeat;
background-size: contain;
}
@media only screen and (max-width: 767px) {
.load-logo {
width: 300px;
height: 22px;
}
}
.loader::before,
.loader::after {
left: -2px;
top: -2px;
display: none;
position: absolute;
content: '';
width: inherit;
height: inherit;
border: inherit;
border-radius: inherit;
box-sizing: border-box;
}

/*
 * LOADER 4
 */
.loader {
border-top-color: transparent;
}

.loader::after {
display: block;
border-color: transparent;
border-top-color: #FFF;
animation: spin 1.25s infinite linear reverse;
-webkit-animation: spin 1.25s infinite linear reverse;
}
 @keyframes spin {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(360deg);
}
}
 @-webkit-keyframes spin {
 from {
 -webkit-transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
}
}

.load .load-logo {
-webkit-animation: load-l 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 forwards;
animation: load-l 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s 1 forwards;
}

.load #fade {
-webkit-animation: load 0.8s cubic-bezier(0.77, 0, 0.175, 1) 1s 1 forwards;
animation: load 0.8s cubic-bezier(0.77, 0, 0.175, 1) 1s 1 forwards;
}
 @-webkit-keyframes load {
100% {
 border-radius: 50%;
 transform :scale(0, 0);
}
}
@keyframes load {
100% {
 border-radius: 50%;
 transform :scale(0, 0);
}
}
@-webkit-keyframes load-l {
 100% {
background-position: center 29px;
}
}
@keyframes load-l {
 100% {
background-position: center 29px;
}
}