﻿@charset "UTF-8";

/* 추석이벤트 */

.chuseokEvent { width:100%; overflow:hidden; text-align:center; }
.chuseokEvent .topImg { width:100%; position:relative; height:1779px; background:url(images/topBg.jpg) no-repeat center; overflow:hidden; background-size:cover; }
.chuseokEvent .content { position:relative; width:1200px; height:100%; margin:0 auto; }
.chuseokEvent .topTxt li,.chuseokEvent .topImg span,.chuseokEvent .topImg a,.chuseokEvent .topImg p { position:absolute; }
.chuseokEvent .topTxt li:first-child { top:78px; left:528px; animation:rotateX .3s .3s both cubic-bezier(0.25, 0.45, 0.45, 0.95),brightness .8s .8s infinite ease; }
.chuseokEvent .topTxt li:nth-child(2) { top:251px; left:392px; animation:aniUp .3s .6s both cubic-bezier(0.25, 0.45, 0.45, 0.95); }
.chuseokEvent .topTxt li:nth-child(3) { top:336px; left:90px; animation:fadeIn .6s .9s both cubic-bezier(0.25, 0.45, 0.45, 0.95); }
.chuseokEvent .topTxt li:nth-child(4) { top:765px; left:421px; animation:aniUp .5s 1.3s both cubic-bezier(0.25, 0.45, 0.45, 0.95); }
.chuseokEvent .topImg span { top:173px; left:40px; animation:height .6s 1.5s both ease-in-out; overflow:hidden;}
.chuseokEvent .topImg p { bottom:105px; left:158px; }
.chuseokEvent .topImg a { bottom:868px; left:350px; animation:aniUp .5s 1.5s both cubic-bezier(0.25, 0.45, 0.45, 0.95); }
.chuseokEvent .btn_apply { display:block; width:500px; height:75px; background:#062e60; border-radius:10px; transition:all .2s; overflow:hidden; }
.chuseokEvent .btn_apply:hover { background:#004fb2; }
.chuseokEvent .btn_apply:before { position:absolute; content:''; display:inline-block; top:-180px; left:0; width:30px; height:100%; background:#fff; animation:shiny-btn1 3s ease-in-out infinite; }
.chuseokEvent h2 { padding:120px 0 50px; }
.chuseokEvent .section_01 { background:#062a5a; padding-bottom:120px; }
.chuseokEvent .section_02 { background:#f3e9db; padding-bottom:120px; }
.chuseokEvent .section_02 a { margin:50px auto 0; position:relative; }
.chuseokEvent .section_02 .content div p { position:absolute; left:45px; bottom:-146px; }
.chuseokEvent .section_02 .content div span { position:absolute; left:185px; bottom:-55px; animation:upDown 1s infinite ease-in-out; z-index:10; }
.chuseokEvent .section_03 { background:url(images/section03_pattern.png) repeat; }


@keyframes shiny-btn1 {
	0% { transform:scale(0) rotate(45deg); opacity: 0; }
	80% { transform:scale(0) rotate(45deg); opacity: 0.5; }
	82% { transform:scale(4) rotate(45deg); opacity: 1; }
	100% { transform:scale(50) rotate(45deg); opacity: 0; }
}

@keyframes height { 
	0% {
		height:0;
	}
	100% {
		height:490px;
	}
} 



@keyframes aniUp {
	0% {
		transform: translateY(25%);
		opacity:0;
	}
	100% {
		transform: translateY(0%);
		opacity:1;
	}
}
@keyframes rotateX {
	0% {
		transform:rotateY(0deg);
		opacity:0;
	}
	100% {
		transform:rotateY(360deg);
		opacity:1;
	}
}

@keyframes brightness {
	0% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1);
	}
	55% {
		filter: brightness(0) invert(1);
	}
	65% {
		filter: brightness(0) invert(1);
	}
	70% {
		filter: brightness(1);
	}
	100% {
		filter: brightness(1);
	}
}

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}


@keyframes upDown {
	0% {
		transform: translateY(0%);
	}
	50%{
		transform: translateY(12%);
	}
	100% {
        transform: translateY(0%);
	}
}


