@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;display:flex;align-items: center;justify-content: center;z-index:9999;}

.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(255,255,255,1);
	width:100%;
	height:100%;
	transition: all 1s ease;
	backdrop-filter: blur(5px);
}
.loadoutbox::before {top:0;left:0;opacity:1;}
.loadoutbox::after {bottom:0;left:0;opacity:1;}
.loadoutbox.active::before {top:0;left:0;opacity:0;}
.loadoutbox.active::after {bottom:0;left:0;opacity:0;}


/* 애니 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.custom-loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,var(--loading-main-color) 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,var(--loading-main-color));
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation:s3 1s infinite linear;
}

@keyframes s3{ 
  100%{transform: rotate(1turn)}
}