틀:ZC/대문/styles.css

/*    퍼스트 컨테이너    */

.ZC2024-Main-FC-1 {
	position:relative;
	width:100%;
	display:inline-block;
	overflow: hidden;
	z-index:1;
}

.ZC2024-Main-FC-2 {
	position:absolute;
	width:100%;
	display:inline-block;
	justify-content: center;
	overflow: hidden;
	z-index:2;
	transform: translate(0%, 0%); /* 요소의 중심을 맞추는 예시 */
	top: 0%;
	left: 0%;
}

.ZC2024-Main-FC-3 {
	position:absolute;
	width:100%;
	display:inline-block;
	justify-content: center;
	overflow: hidden;
	z-index:3;
	transform: translate(0%, 0%); /* 요소의 중심을 맞추는 예시 */
	top: 0%;
	left: 0%;
}

.ZC2024-Main-FC-4 {
	position:absolute;
	width:100%;
	display:inline-block;
	justify-content: center;
	overflow: hidden;
	z-index:4;
	transform: translate(0%, 0%); /* 요소의 중심을 맞추는 예시 */
	top: 0%;
	left: 0%;
}

.ZC2024-Main-FC-5 {
	position:absolute;
	width:100%;
	display:inline-block;
	justify-content: center;
	overflow: hidden;
	z-index:5;
	transform: translate(0%, 0%); /* 요소의 중심을 맞추는 예시 */
	top: 0%;
	left: 0%;
}

/*    세컨드 컨테이너    */

.ZC2024-Main-SC {
	position: absolute;
	margin:0px auto;
	width: 100%;
	justify-content: center;
	z-index: 6;
	display:inline-block;
	overflow: hidden;
	transform: translate(0%, -0%);
}

.ZC2024-Main-SC-A {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 6;
	display:inline-block;
	transform: translate(0%, 0%); /* 요소의 중심을 맞추는 예시 */
	top: 0%;
	left: 0%;
	justify-content: center;
}

.ZC2024-Main-SC-B {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 6;
	display:inline-block;
	transform: translate(0%, 0%); /* 요소의 중심을 맞추는 예시 */
	top: 0%;
	left: 0%;
	justify-content: center;
}

.ZC2024-SC-IB {
	position: absolute;
	margin:0px auto;
	width: 100%;
	justify-content: center;
	z-index: 10;
	display:inline-block;
	overflow: hidden;
	top: 0%;
	left: 0%;
}

.ZC2024-IB-I {
	position: relative;
	width: 20%;
	overflow: hidden;
	z-index: 10;
	display:inline-block;
	justify-content: center;
}

/*    # 대문 애니메이션    */

/*    # 대문 애니메이션 - 배경   */
.ZCM-IMG-BG-ANI {
 display:inline-block;
 opacity: 0;
 animation: ZCM-IMG-BG-ANI;
 animation-iteration-count: 1;
 animation-duration: 1.5s;
 animation-delay: 2.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes ZCM-IMG-BG-ANI {
  from {opacity: 0;}
  to {opacity: 1;}
}
/*    # 대문 애니메이션 - 메인 프레임    */
.ZCM-IMG-FR-ANI {
 display:inline-block;
 opacity: 0;
 animation: ZCM-IMG-FR-ANI;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 3s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes ZCM-IMG-FR-ANI {
  from {opacity: 0; transform: translateY(2%);}
  to {opacity: 1; transform: translateY(0%);}
}
/*    # 대문 애니메이션 - 로고    */
.ZCM-IMG-LG-ANI {
 display:inline-block;
 opacity: 0;
 animation: ZCM-IMG-LG-ANI;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 3.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes ZCM-IMG-LG-ANI {
  from {opacity: 0; transform: translateY(-2%);}
  to {opacity: 1; transform: translateY(0%);}
}

/*    # 대문 애니메이션 - 인물이미지    */
.ZCM-IMG-C-ANI {
 display:inline-block;
 opacity: 0;
 animation: ZCM-IMG-C-ANI;
 animation-iteration-count: 1;
 animation-duration: 1s;
 animation-delay: 4s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes ZCM-IMG-C-ANI {
  from {opacity: 0; transform: translateX(-4%);}
  to {opacity: 1; transform: translateX(0%);}
}

/*    # 대문 애니메이션 - 최종 프레임    */
.ZCM-IMG-LFR-ANI {
 display:inline-block;
 opacity: 0;
 animation: ZCM-IMG-LFR-ANI;
 animation-iteration-count: 1;
 animation-duration: 0.8s;
 animation-delay: 4.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes ZCM-IMG-LFR-ANI {
  from {opacity: 0; transform: translateX(20%);}
  to {opacity: 1; transform: translateX(0%);}
}

/*    # 대문 애니메이션 - 소식박스    */
.ZCM-IMG-NOB-ANI {
 opacity: 0;
 animation: ZCM-IMG-NOB-ANI;
 animation-iteration-count: 1;
 animation-duration: 0.8s;
 animation-delay: 5.5s;
 animation-fill-mode: forwards;
 transition: .2s ease;
}

@keyframes ZCM-IMG-NOB-ANI {
  from {opacity: 0;}
  to {opacity: 1;}
}

/*    # 모바일 반응성    */

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