@charset "UTF-8";

@keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@-moz-keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@-webkit-keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@-o-keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@-moz-keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@-webkit-keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@-o-keyframes rotate-loading {
    0% { transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg); }
    100% { transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
}

@keyframes loading-text-opacity {
    0% { opacity: 0; }
    20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes loading-text-opacity {
    0% { opacity: 0; }
    20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@-webkit-keyframes loading-text-opacity {
    0% { opacity: 0; }
    20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@-o-keyframes loading-text-opacity {
    0% { opacity: 0; }
    20% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.loader-mask { position: fixed; top: 0; left: 0; z-index: 10000; width: 100vw; height: 100vh; display: none; background: rgba(0,0,0, .5); }
.loader-mask.active { display: block; }
.loader-mask .loader-container { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); user-select: none; }

.loader-mask .loader-effect { position: relative; width: 100%; height: 100%;  border-radius: 100%; border: 3px solid transparent; border-color: transparent #fff transparent #fff; -moz-animation: rotate-loading 1.5s linear 0s infinite normal; -moz-transform-origin: 50% 50%; -o-animation: rotate-loading 1.5s linear 0s infinite normal; -o-transform-origin: 50% 50%; -webkit-animation: rotate-loading 1.5s linear 0s infinite normal; -webkit-transform-origin: 50% 50%; animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%; }

.loader-mask .loader-container .loader-text { position: absolute; top: 50%; width: 100%; text-align: center; color: #ffffff; font-weight: 500; letter-spacing: 1px; opacity: 0; text-transform: uppercase; transform: translateY(-50%); -moz-animation: loading-text-opacity 2s linear 0s infinite normal; -o-animation: loading-text-opacity 2s linear 0s infinite normal; -webkit-animation: loading-text-opacity 2s linear 0s infinite normal; animation: loading-text-opacity 2s linear 0s infinite normal; }

.loader-mask .loader-container:hover .loader-effect,
.loader-mask .loader-container .loader-effect { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

/* 모바일 */
@media screen and (max-width: 1024px) {
    .loader-mask .loader-container { width: 150px; height: 150px; }
    .loader-mask .loader-container:active .loader-effect { border-color: transparent #4e9caa transparent #4e9caa; }
    .loader-mask .loader-container .loader-text { font-size: 3.5vw; }
}
/* PC */
@media screen and (min-width: 1025px) {
    .loader-mask .loader-container { width: 150px; height: 150px; }
    .loader-mask .loader-container:hover .loader-effect { border-color: transparent #4e9caa transparent #4e9caa; }
    .loader-mask .loader-container .loader-text { font-size: clamp(0.9rem, 0.8vw, 1rem); }
}