@charset "utf-8";
/* CSS Document */
/******************************************************************************************************* 
페이지 로딩 - 수평 열기
********************************************************************************************************/
.loadoutbox { display:flex;height:100vh;background:none;overflow:hidden;
	justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.loadgroup {position:absolute;display:inline-block;z-index:9999;text-align:center;margin-top:-2em;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading_logo {position:relative;z-index:9999;}
.loading {position:relative;z-index:9999;}
.loading span {display:inline-block;vertical-align:middle;width:10px;height:10px;background:#fff;border-radius:50%;text-indent:-99999px;margin:0 1px;
	animation:loading 1s ease infinite;
}
.loading span:nth-child(2) {animation-delay: .2s;}
.loading span:nth-child(3) {animation-delay: .4s;}
.loading span:nth-child(4) {animation-delay: .6s;}
@keyframes loading {
	0% {transform:translateY(0);}
	50% {transform:translateY(10px);}
}
.loadoutbox {position:fixed;height:100%;top:0;right:0; bottom:0;left:0;z-index:9980}
.loadoutbox::before,
.loadoutbox::after {
	content:"";
	position:absolute; z-index:9990;
	background:rgba(51,51,51,1);
	width:100%;
	height:50%;
	transition: all 1s ease;
}
.loadoutbox::before {top:0;left:0;}
.loadoutbox::after {bottom:0;left:0;}
.loadoutbox.active::before {top:-50%;left:0;}
.loadoutbox.active::after {bottom:-50%;left:0;}