@charset "utf-8";

body {display: flex;justify-content: center;align-items: center;}

/* main layout */
#wrap_main {position:relative;width: 100%;max-width: 768px;height: 100vh;}
#wrap_main #container{width: 100%;height: 100%;}
#wrap_main #header {position: absolute;top: 0;left: 0;width: 100%;text-align: right;z-index: 500;}
#wrap_main .header a.logo_sisul{display: inline-block;width: 16rem;height: 40px;margin: 0;padding: 0;font-size: 0;line-height: 0;text-indent: -9999px;
	background-image: url('/images/themepark/leaflet/logo_sisul.svg');
	background-position: 0 bottom;
	background-repeat: no-repeat;
	background-size: 14rem auto;
}
#wrap_main .container {position:relative;width:100%;height: 100vh;margin-bottom: 0;margin-top: 0;overflow:hidden;}
#wrap_main .container::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;top: 0;
	width: 100%;height: 100%;
	background-image: url('/images/themepark/leaflet/bg_cloud.svg');
	background-color: #2A43C0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: visual_bg 1s forwards;
	z-index: -1;
}
@keyframes visual_bg{
	0%{ transform: scale(1.2); filter: blur(2rem);}	
 	100%{transform:scale(1); filter: blur(0);}
}
#wrap_main .container #content {margin: 0 auto;padding: 0;font-size: 1.4rem;}
#wrap_main .hero{position: relative;min-height: 100vh;overflow: hidden;}
#wrap_main .char{position: absolute;pointer-events: none;z-index: 99;}
	.char_tl {top: 2rem;left: -4rem;} 
	.char_tr {top: 7rem;right: -2rem;} 
	.char_bl {left: -5.5rem;bottom: 25%;transform: translateY(25%);}
	.char_bc {right: 30%;bottom: 15%;transform: translateX(30%) translateY(15%);}
	.char_br {right: -4rem;bottom: 35%;transform: translateY(35%);}
	.star_tl {top: 10%;left: 34%;}
	.star_tr {top: 25%;right: 15%;}
	.star_br {right: 32%;bottom: 45%;transform: translateY(45%);}
	.star_bl {left: 12%;bottom: 50%;}
	
	.char img{ display:block;height:auto;max-width:none;}	
	.char_tl img{ width: 20rem; }
	.char_tr img{ width: 16rem; }
	.char_bl img{ width: 24rem; }
	.char_bc img{ width: 18rem; }
	.char_br img{ width: 20rem; }
	.star_tl img{ width: 4.5rem; }
	.star_tr img{ width: 3rem; }
	.star_br img{ width: 3.25rem; }
	.star_bl img{ width: 4rem; }
	.char_inner{
		display:block;
		transform: translate(var(--from-x,0), var(--from-y,0)) scale(0.9);
		filter: drop-shadow(0 2px 0 rgba(0,0,0,0.02));
		will-change: transform, opacity, filter;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		animation: pop_in 720ms cubic-bezier(0.2,0.9,0.2,1.1) both;
		animation-delay: var(--delay, 0s);
		animation-play-state: paused;
		opacity:0;
	}
	.hero.is_inview .char_inner{animation-play-state: running;/* 화면에 들어오면 재생 */}	
	@keyframes pop_in{
	  0%   { opacity:0; transform: translate(var(--from-x), var(--from-y)) scale(0.9); }
	  62%  { opacity:1; transform: translate(0,0) scale(1.1); } /* 살짝 튕김 */
	  100% { opacity:1; transform: translate(0,0) scale(1); }
	}
	.fade_rotate {
	  opacity: 0;
	  animation: fadeIn 3s ease-out forwards, rotate 2s linear infinite;
	}
	@keyframes fadeIn {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	@keyframes rotate {
		from {transform: rotate(0deg);}
		to {transform: rotate(360deg);}
	}
	#content .slogan {position: absolute;top: 30%;transform: translateY(-30%);width: 100%;display: flex;flex-direction: column;justify-content: center; align-items: center;gap: 0.5rem;z-index: 9;}
	#content .slogan p {margin: 0 auto; padding: 0;width: 60%;font-size: 2.4rem;font-weight: 600;color: #CCF7FF;text-align: center;overflow: hidden;}
	#content .slogan p span {
		display: block;
		transform: translate3d(0, 3rem, 0);
		animation: fadeUp 800ms cubic-bezier(.21,.98,.6,.99) both;
		will-change: transform, opacity;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		transform-origin: 50% 100%;
		opacity: 0;
	}
	#content .slogan p:nth-child(1) span { animation-delay: 0s; margin-bottom: 1rem;}
	#content .slogan p:nth-child(2) span { animation-delay: .2s; }
	#content .slogan p:nth-child(3) span { animation-delay: .4s; }
	#content .slogan p:nth-child(4) span { animation-delay: .6s; margin-top: 3rem;}
	@keyframes fadeUp {
	  from { opacity: 0; transform: translate3d(0, 3rem, 0); filter: blur(1px); }
	  to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
	}
	#content .slogan p img {
		margin: 0 auto;
		max-width: 100%;width: auto;
		height: auto;
	}
	.lang {
		display: flex;
		align-items: center;
		justify-content: center;gap: .5rem;
	}
	.lang a {
		display: flex;
		align-items: center;
		justify-content: center;gap: .75rem;
		min-width: 10rem;
		height: 50px;
		font-size: 1.5rem;
		-webkit-border-radius: 99rem;
		border-radius: 99rem;
	}
	.lang a i {
		display: block;
        width: 24px;height: 24px;
        background-position: 0 center;
        background-repeat: no-repeat;
		background-size: cover;
	}
	.lang a i.kor {background-image: url("/images/themepark/leaflet/flag_kor.svg");}
	.lang a i.eng {background-image: url("/images/themepark/leaflet/flag_eng.svg");}
	@media (prefers-reduced-motion: reduce) {
		#wrap_main .container #content .slogan p span {animation: none;transform: none;opacity: 1;}
	}

@media screen and (max-width:640px) {	
	.char_tl img{ width: 18rem; }
	.char_tr img{ width: 14rem; }
	.char_bl img{ width: 22rem; }
	.char_bc img{ width: 16rem; }
	.char_br img{ width: 18rem; }
	
	#wrap_main .container #content .slogan p {width: 80%;font-size: 1.9rem;}
	.lang a {height: 4rem;line-height: 4rem;}
	.lang a i {width: 20px;height: 20px;}
}
@media screen and (max-width:480px) {
	
	.char_tl img{ width: 16rem; }
	.char_tr img{ width: 12rem; }
	.char_bl img{ width: 20rem; }
	.char_bc img{ width: 15rem; }
	.char_br img{ width: 16rem; }
	.star_tl img{ width: 2.25rem; }
	.star_tr img{ width: 1.5rem; }
	.star_br img{ width: 1.75rem; }
	.star_bl img{ width: 2rem; }	
}
@media screen and (max-width:360px) {

	.char_tl img{ width: 13rem; }
	.char_tr img{ width: 10rem; }
	.char_bl img{ width: 17rem; }
	.char_bc img{ width: 12rem; }
	.char_br img{ width: 12rem; }
	.star_tl img{ width: 2.15rem; }
	.star_tr img{ width: 1.35rem; }
	.star_br img{ width: 1.5rem; }
	.star_bl img{ width: 1.75rem; }
}
@media screen and (max-width:320px) {

}