틀:ZC/Loading/styles.css

/* Z축 */
.ZCLo-z5  {
 z-index:5;
}

.ZCLo-z6  {
 z-index:6;
}

/* 로딩 화면 애니메이션 */

.ZCLoading-LDP {
 display:inherit;
 z-index:6;
 animation: ZCLoading-LDP;
 animation-delay: 2s;
 animation-iteration-count: 1;
 animation-duration: 0.4s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
 overflow:hidden;
 height:100vh;
 opacity:1;
}

@keyframes ZCLoading-LDP {
  from {height:100vh;opacity:1; z-index:5;display:inherit;}
  to {height:0px;opacity:0; z-index:-1;display:none;}
}

/* 로딩 화면 배경 */

.ZCLoading-bg  {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #1a1a1f;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  overflow: hidden;
  
  z-index:-3;
}


/*    # 모바일 반응성    */

@media screen and (min-width: 700px) {
	.ZCLoading-WebDisplay {
    	display:inherit;
	}
}
@media screen and (min-width: 700px) {
	.ZCLoading-MobileDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.ZCLoading-WebDisplay {
    	display:none;
	}
}
@media screen and (max-width: 700px) {
	.ZCLoading-MobileDisplay {
    	display:inherit;
	}
}

/*    로고 애니메이션    */

	.ZCL-container1 {
		position: absolute;
		transform: translate(0%, -50%);
		opacity:.6;
		top:250px;
		width:100%;
		margin:0px auto;
		transform-origin: center center;
	}

	.ZCL-container2 {
		position: absolute;
		transform: translate(0%, -50%);
		opacity:0;
		top:250px;
		width:100%;
		margin:0px auto;
	}

	.ZCL-Animation1 {
		animation-name: ZCL-Animation1;
		animation-duration: 0.4s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		transform:rotate(0);
	}
	@keyframes ZCL-Animation1 {
		0% {
			transform:scale(1.5);
			
		}
		80% {
			transform:scale(0.9);
		}
		100% {
			transform:scale(1);
		}
	}

		.ZCL-Animation2 {
		animation-name: ZCL-Animation2;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-delay: 0.4s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		transform:rotate(0);
	}
	@keyframes ZCL-Animation2 {
		0% {
			transform:translateY(-25%);;
			opacity:0;
			
		}
		80% {
			transform:translateY(2%);
			opacity:0.6;
		}
		100% {
			transform:translateY(0%);
			opacity:0.6;
		}
	}

		.ZCL-Animation3 {
		animation-name: ZCL-Animation3;
		animation-duration: 0.5s;
		animation-timing-function: ease;
		animation-delay: 0.8s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		transform:rotate(0);
	}
	@keyframes ZCL-Animation3 {
		0% {
			transform: translateY(25%);
			opacity:0;
			
		}
		80% {
			transform: translateY(-2%);
			
		}
		100% {
			transform: translateY(0%);
			opacity:0.6;
		}
	}