@charset "utf-8";

/* animation style */

.fade-in {
	animation-name: fade-in;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
    animation-duration: 1s;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-in-scale {
	animation-name: fade-in-scale;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
    animation-duration: 1s;
}


@keyframes fade-in-scale  {
	0% {
		transform: scale(.5);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.fade-in-bottom {
	animation-name: fade-in-bottom;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
	animation-duration: 1s;
	animation-delay: .75s;
}

@keyframes fade-in-bottom {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

.scale-bg {
	animation-name: scale-bg;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 4s;
}

@keyframes scale-bg {
	0% {
		transform: scale(.75);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(.75);
	}
}

.blur-motion {
	animation-name: blur-motion;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 5s;
}

@keyframes blur-motion {
	0% {
		filter: blur(100px);
	}
	50% {
		filter: blur(140px);
	}
	100% {
		filter: blur(100px);
	}
}

.top-bottom-5 {
	animation-name: top-bottom-5;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 2s;
}

@keyframes top-bottom-5 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0);
	}
}

.top-bottom-10 {
	animation-name: top-bottom-10;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 3s;
}

@keyframes top-bottom-10 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0);
	}
}


/* 메인 */

.main-line {
	animation-name: main-line;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
	animation-duration: 1s;
	animation-delay: .65s;
}

@keyframes main-line {
	0% {
		width: 0px;
	}
	100% {
		width: 36px;
	}
}

.main-firecracker1 {
    transform-origin: right top;
	animation-name: main-firecracker1;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1.25s;
}

@keyframes main-firecracker1 {
	0% {
		transform: rotate(0deg);
		opacity: 0;
	}
    50% {
        transform: rotate(5deg);
        opacity: 1;
    }
	100% {
        transform: rotate(10deg);
        opacity: 0;
	}
}

.main-firecracker2 {
    transform-origin: left top;
	animation-name: main-firecracker2;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: .75s;
}

@keyframes main-firecracker2 {
	0% {
		transform: rotate(0deg);
		opacity: 0;
	}
    50% {
        transform: rotate(5deg);
        opacity: 1;
    }
	100% {
        transform: rotate(10deg);
        opacity: 0;
	}
}

.main-firecracker3 {
    transform-origin: right top;
	animation-name: main-firecracker3;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1s;
}

@keyframes main-firecracker3 {
	0% {
		transform: rotate(0deg);
		opacity: 0;
	}
    50% {
        transform: rotate(5deg);
        opacity: 1;
    }
	100% {
        transform: rotate(10deg);
        opacity: 0;
	}
}

.main-firecracker4 {
	animation-name: main-firecracker4;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1.15s;
}

@keyframes main-firecracker4 {
	0% {
		transform: translate(5px, 5px);
		opacity: 0;
	}
    50% {
        transform: translate(2.5px, 2.5px);
        opacity: 1;
    }
	100% {
        transform: translate(0px, 0px);
        opacity: 0;
	}
}

.main-arrow {
	animation-name: main-arrow;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1.5s;
}

@keyframes main-arrow {
	0% {
		transform: translateY(-2px);
		opacity: 0;
	}
    50% {
        transform: translateY(0px);
        opacity: 1;
    }
	100% {
        transform: translateY(2px);
        opacity: 0;
	}
}

/* 로고 애니메이션 */
.logo-shadow {
	animation-name: logo-shadow;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s;
}

@keyframes logo-shadow {
	0% {
		filter: drop-shadow(0px 0px 5px rgba(244, 243, 155, 0.56));
	}
    50% {
        filter: drop-shadow(0px 0px 14px rgba(244, 243, 155, 0.56));
        opacity: 1;
    }
	100% {
		filter: drop-shadow(0px 0px 5px rgba(244, 243, 155, 0.56));
	}
}

.contents#greeting .logo-20th img {
	animation-name: logo-20th;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 5s;
}

@keyframes logo-20th {
	0% {
		filter: drop-shadow(0 0 0px rgba(255, 246, 195, 0.1))
		drop-shadow(0 0 2px rgba(201, 184, 129, 0.1))
		drop-shadow(0 0 5px rgba(245, 222, 192, 0.1));
	}
    50% {
		filter: drop-shadow(0 0 2px rgba(255, 246, 195, 0.15))
		drop-shadow(0 0 5px rgba(201, 184, 129, 0.2))
		drop-shadow(0 0 15px rgba(245, 222, 192, 0.18));
    }
	100% {
		filter: drop-shadow(0 0 1px rgba(255, 246, 195, 0.1))
		drop-shadow(0 0 2px rgba(201, 184, 129, 0.1))
		drop-shadow(0 0 5px rgba(245, 222, 192, 0.1));
	}
}

/* 글자 */
.infinite-x-20th {
	animation-name: infinite-x-20th;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 20s;
}

@keyframes infinite-x-20th {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -946px 0;
	} 
}

@media screen and (max-width: 1179px) {
	@keyframes infinite-x-20th {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: -602px 0;
		} 
	}
}

/* event */
@keyframes event-blur {
	0% {
		transform: translateX(-50%) scale(.9);
		opacity: .6;
		filter: blur(50px);
	}
	50% {
		transform: translateX(-50%) scale(1);
		opacity: .8;
		filter: blur(75px);
	}
	100% {
		transform: translateX(-50%) scale(.9);
		opacity: .6;
		filter: blur(50px);
	} 
}

@keyframes event-particle {
	0% {
		opacity: .4;
		transform: translateX(-50%) translateY(30%);
	}
	50% {
		opacity: .8;
		transform: translateX(-50%) translateY(32%);
	}
	100% {
		opacity: .4;
		transform: translateX(-50%) translateY(30%);
	} 
}

/* 20주년 기념 로고 */

.particle01 {
	transform-origin: left top;
	animation-name: particle01;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1s;
}

@keyframes particle01 {
	0% {
		opacity: 0;

	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(-180deg);
	} 
}

.particle02 {
	transform-origin: right top;
	animation-name: particle02;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-delay: .5s;
}

@keyframes particle02 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(180deg);
	} 
}

.particle03 {
	transform-origin: left;
	animation-name: particle03;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: .75s;
	animation-delay: .5s;
}

@keyframes particle03 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(-20deg) translate(-20px, 0);
	} 
}

.particle04 {
	transform-origin: right;
	animation-name: particle04;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: .85s;
	animation-delay: .5s;
}

@keyframes particle04 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(30deg) translate(20px, 0);
	} 
}