@charset "utf-8";
*{ margin: 0; padding: 0; box-sizing:border-box; }
a, a:hover, a:focus { text-decoration: none; }
ul,ol { list-style: none; margin: 0; }
h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1; font-size: inherit; }
img { max-width: 100%; }

@keyframes intro_ani1 {
	0%{ left: 0; top: -80%; opacity: 0; }
	50% { opacity: 0; }
	100%{ left: 0; top: 0; opacity: 1; }
}
@keyframes intro_ani2 {
	0%{ left: -15%; bottom: 0; opacity: 0; }
	50% { opacity: 0; }
	100%{ left: 0; bottom: 0; opacity: 1; }
}
@keyframes intro_ani3 {
	0%{ right: -15%; bottom: 0; opacity: 0; }
	50% { opacity: 0; }
	100%{ right: 0; bottom: 0; opacity: 1; }
}
@keyframes intro_ani4 {
	0%{ opacity: 0; top: 50%; }
	100%{ opacity: 1; top: 58%; visibility:visible; }
}

.introWrap { position: relative; height: 100vh; overflow: hidden; }
.introWrap .logoWrap { position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); width: 605px; height: 103px; }
.introWrap .logoWrap > li { position: absolute; }
.introWrap .logoWrap > li:nth-child(1) { animation:intro_ani1 1.5s linear; animation-fill-mode:forwards;  }
.introWrap .logoWrap > li:nth-child(2) { animation:intro_ani2 1.5s linear; animation-fill-mode:forwards;  }
.introWrap .logoWrap > li:nth-child(3) { animation:intro_ani3 1.5s linear; animation-fill-mode:forwards;  }

.introWrap .enter-button {
position: absolute; left: 50%; transform:translateX(-50%); animation:intro_ani4 0.5s linear; animation-fill-mode:forwards; animation-delay:1.5s; 
color: #000; opacity: 0; visibility:hidden;
}

@media (max-width:768px) {
	@keyframes intro_ani4 {
		0%{ opacity: 0; top: 50%; }
		100%{ opacity: 1; top: 55%; visibility:visible; }
	}

	.introWrap .logoWrap { width: 300px; height: 56px; }
	.introWrap .logoWrap > li:nth-child(1) { width: 32px; }
	.introWrap .logoWrap > li:nth-child(2) { width: 168px; }
	.introWrap .logoWrap > li:nth-child(3) { width: 126px; }
}