/**
* Filename :summer-party.css
* Description :summer-party pick styles
**/


/* Pretendard */
@font-face {
	font-family:'Pretendard';
	font-style:normal;
	font-weight:500;
	src:local('Pretendard Medium'), local('Pretendard-Medium'), url('https://wwwrod.everland.com/font/Pretendard/Pretendard-Medium.woff2') format('woff2');
}

/* Luckiest Guy */
@font-face {
	font-family:'Luckiest Guy';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('https://wwwrod.everland.com/font/Luckiest-Guy.woff2') format('woff2');
	unicode-range:U+0000-00FF;
}

/* Laundry Gothic */
@font-face {
	font-family:'LaundryGothic';
	src:url('https://wwwrod.everland.com/font/LaundryGothicB.woff2') format('woff2');
	font-weight:700;
	font-display:swap;
}


/* base */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, main, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; box-sizing:border-box; background:transparent; }
html, body { width:100%; scroll-behavior:smooth; }
html { font-size:10px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { font-family:'LaundryGothic', sans-serif; color:#001C5D; overflow-wrap:break-word; word-break:keep-all; }
ul, ol { list-style-type:none; }
a { box-sizing:border-box; color:#001C5D; text-decoration:none; cursor:pointer; }
a:hover, a:active { text-decoration:none; }
em, i { font-style:normal; }
button { margin:0; padding:0; box-sizing:border-box; border:0 none; background-color:transparent; vertical-align:middle; color:#001C5D; font-family:'LaundryGothic', sans-serif; cursor:pointer; outline:none; }
figcaption { display:none; }
img { width:100%; vertical-align:top; }
map { cursor:pointer; }
table { table-layout:fixed; border-collapse:separate; border-spacing:0; }
.hide-txt {overflow:hidden; position:absolute; width:1px; height:1px; font-size:1px; line-height:0; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0; }
::-webkit-scrollbar-thumb { cursor:pointer; }

/* layout */
.wrapper { position:relative; overflow:hidden; }
.btn-nav { position:fixed; right:2rem; top:2rem; z-index:6; width:4.8rem; height:5.2rem; font-size:0; background:url('../img/btn-nav.png') no-repeat center / 100% auto; }
.btn-home { position:fixed; right:2rem; top:2rem; z-index:6; width:4.8rem; height:5.2rem; font-size:0; background:url('../img/btn-home.png') no-repeat center / 100% auto; }
.btn-top { display:none; position:fixed; right:1.8rem; bottom:1.4rem; z-index:8; width:5.5rem; height:5.5rem; font-size:0; color:transparent; text-indent:-9999px; background:url('../img/btn-top.png') no-repeat center / 100% auto; }
.sec { position:relative; }
.sec h3 { position:relative; max-width:36rem; margin:0 auto; }
.sec h3 img { position:relative; }
.sec h3::before, 
.sec h3::after { content:''; position:absolute; z-index:1; background-repeat:no-repeat; background-size:100% auto; }
.img-wrap, .info-wrap { position:relative; }
.info-wrap p, .meta-wrap { padding:2rem; border:.2rem solid #001C5D; border-radius:1rem; }
.info-wrap p { font-size:1.6rem; line-height:1.4; letter-spacing:-.32px; text-align:center; color:#FFF; }
.info-wrap p > em { position:relative; display:block; } 
.meta-wrap { position:relative; display:flex; justify-content:center; background-color:#FFF; }
.meta-wrap li { position:relative; display:flex; padding-left:2.6rem; font-size:1.6rem; letter-spacing:-.32px; }
.meta-wrap li::before { content:''; position:absolute; top:50%; transform:translateY(-50%); left:0; width:2rem; height:2rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.meta-wrap li ~ li { margin-top:.8rem; }
.notice-wrap { display:flex; flex-direction:column; }
.notice-wrap h4 { margin-bottom:1.2rem; font-size:1.4rem; letter-spacing:-.28px; } 
.notice-wrap li { position:relative; font-family:'Pretendard', sans-serif; font-size:1.4rem; font-weight:500; line-height:1.4; letter-spacing:-.28px; }
.notice-wrap li ~ li { margin-top:.4rem; }
.notice-wrap li::before { position:absolute; left:0; }
.notice-wrap .list-note li { padding-left:1.2rem; }
.notice-wrap .list-note li ~ li { margin-top:1.2rem; }
.notice-wrap .list-note li::before { content:'※'; }
.notice-wrap .list-dot li { padding-left:.6rem; }
.notice-wrap .list-dot li::before { content:'·'; }
.btn-wrap { position:relative; padding:.4rem 0 .6rem; }
.btn-wrap::after { content:''; position:absolute; background-repeat:no-repeat; background-size:100% auto; background-position:center center; }
.btn-wrap .btn { padding:1.2rem 0; margin:0 auto; position:relative; display:flex; align-items:center; justify-content:center ; width:23.6rem; height:5.6rem; }
.btn-wrap .btn::before, .btn-wrap .btn::after { content:''; position:absolute; left:0; width:100%; height:100%; border-radius:5rem; border:.2rem solid #001C5D; }
.btn-wrap .btn::before { bottom:-.6rem; background:#FFF; }
.btn-wrap .btn::after { bottom:0; background:#FFF; background-size:200% 200%; animation:gradientMove 4s ease infinite; }
.btn-link { position:relative; padding-right:1.2rem; }
.btn-link::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:.6rem; height:1rem; background:url('../img/ico-arrow.png') no-repeat center top / 100% auto; }
.stroke { position:relative; z-index:1; font-size:2rem; letter-spacing:-.7px; color:#FFF; }
.stroke::before { position:absolute; z-index:-1; top:0; left:0; content:attr(data-text); -webkit-text-stroke-width:.4rem; -webkit-text-stroke-color:#001C5D; }
.marquee-wrap { position:relative; }
.marquee-wrap .btn { position:absolute; right:2rem; bottom:0; z-index:1; display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; background-color:#FFF; border:.2rem solid #001C5D; border-radius:50%; }
.marquee-wrap .btn .btn-icon { width:.8rem; height:.9rem; }
.marquee-wrap .marquee { overflow:hidden; width:100%; touch-action:pan-y; }
.marquee-wrap .marquee-track { display:flex; width:max-content; will-change:transform; transform:translate3d(0,0,0); }
.marquee-wrap .marquee-track.is-paused .item { animation-play-state:paused !important; }
.marquee-wrap .marquee-track .item { flex:0 0 auto; }
.line-up { padding:0 2rem; }
.line-up .line-up-group { position:relative; margin-left:-2rem; margin-right:-2rem; padding:0 2rem; }
.line-up .line-up-group .swiper { overflow:visible; }

.obj { position:absolute; }
.obj-btm { position:relative; }
.obj-btm::before,
.obj-btm::after { content:''; position:absolute; background-repeat:no-repeat; background-size:100% auto; }

@keyframes gradientMove {
	0% { background-position:0% 50%; }
	50% { background-position:100% 50%; }
	100% { background-position:0% 50%; }
}


/* swiper */
.swiper-control-wrap { margin-top:.4rem; display:flex; justify-content:center; align-items:center; }
.swiper-button-prev,
.swiper-button-next { position:absolute; top:50%; transform:translateY(-50%); right:auto; left:auto; z-index:1; width:4.8rem; height:4.8rem; margin-top:0; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:transparent; font-size:1px; text-indent:-999rem; }
.swiper-button-prev { left:.8rem; background-image:url('../img/btn-prev.png'); } 
.swiper-button-next { right:.8rem; background-image:url('../img/btn-next.png'); }
.swiper-button-prev::after,
.swiper-button-next::after { display:none; }
.swiper-pagination-horizontal.swiper-pagination-bullets { display:flex; justify-content:center; align-items:center; position:relative; top:auto; right:auto; bottom:auto; left:auto; z-index:1; width:auto; margin:0 .6rem; transform:translateZ(0); -webkit-transform:translateZ(0); }
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin:0 .2rem; }
.swiper-pagination-bullet { width:1.2rem; height:1.2rem; background:#FFF; background-image:none; background-repeat:no-repeat; background-position:center; background-size:100% auto; border-radius:50%; border:.2rem solid #001C5D; opacity:1; overflow:hidden; -webkit-appearance:none; appearance:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0); -webkit-transform:translateZ(0); flex-shrink:0; }
.swiper-pagination-bullet.swiper-pagination-bullet-active { width:1.9rem; height:1.9rem; background-color:transparent; background-image:url('../img/ico-bullet.png'); background-repeat:no-repeat; background-position:center; background-size:100% auto; border:0; }




/* popup */
.popup { display:none; justify-content:center; align-items:center; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9; max-width:720px; margin:auto; background-color:rgba(0, 0, 0, .68); transition:.3s; }
.popup.is-open { display:block; }
.popup .content { display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; overflow:hidden; }
.popup .content .btn-close { display:block; width:4.8rem; height:4.8rem; margin:0 auto; background-image:url('../img/btn-pop-close.png'); background-repeat:no-repeat; background-size:100% auto; color:transparent; text-indent:-9999px; }
.popup .content h4 { max-width:36rem; margin:0 auto; }
.popup .pop-wrap { position:relative; text-align:center; }
.popup .pop-wrap .price { position:relative; margin-top:1.2rem; padding-top:1.2rem; font-size:1.4rem; letter-spacing:-.28px; }
.popup .pop-wrap .price::before { content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:4.2rem; height:.2rem; background:url('../img/line-pop.png') no-repeat center top / 100% auto; }
.popup .pop-wrap .store { position:relative; display:inline-block; padding:.4rem .6rem .4rem 2rem; margin-top:1.2rem; font-size:1.2rem; letter-spacing:-.24px; border-radius:5rem; }
.popup .pop-wrap .store::before { content:''; position:absolute; left:.6rem; width:1.2rem; height:1.2rem; background:url('../img/ico-pop-store.png') no-repeat center top / 100% auto; }
.popup .swiper { max-width:36rem; }

.tab-wrap { margin-bottom:2rem; }
.tab-menu { display:flex; flex-wrap:nowrap; gap:.8rem; overflow-x:auto; overflow-y:hidden; padding:0 2rem 1rem; margin-bottom:1.2rem; white-space:nowrap; -webkit-overflow-scrolling:touch; }
.tab-menu::-webkit-scrollbar { height:.4rem; }
.tab-menu::-webkit-scrollbar-track { background:#FFF; margin:0 2rem; }
.tab-menu::-webkit-scrollbar-thumb { background:#7B5ADD; cursor:pointer; }
.tab-menu button { flex:0 0 auto; min-width:10rem; padding:.8rem; font-size:1.4rem; letter-spacing:-.28px; color:#FFF; background:#001C5D; border:.2rem solid #072C83; border-radius:2rem; white-space:nowrap; }
.tab-menu button.is-active { color:#001C5D; background:#FFF; }
.tab-content { display:none; min-height:38rem; margin:0 2rem; padding:3rem 1.8rem; font-family:'LaundryGothic', sans-serif; font-size:1.2rem; letter-spacing:-.24px; color:#FFF; background:#4D2DAE; border:.2rem solid #001C5D; }
.tab-content.is-active { display:block; }


.schedule-wrap { display:flex; gap:1rem; }
.schedule-guide { margin:.8rem 0 0 5.4rem; text-align:right; }
.time-title { height:2.2rem; line-height:2.2rem; }
.time-list { display:flex; flex-direction:column; }
.time-list li { height:3rem; line-height:3rem; }
.schedule-scroll { flex:1; overflow-x:auto; overflow-y:hidden; padding-bottom:1.5rem; }
.schedule-scroll::-webkit-scrollbar { height:.4rem; }
.schedule-scroll::-webkit-scrollbar-thumb { background:#7B5ADD; border-radius:5rem; }
.schedule-head { display:flex; gap:.8rem; min-width:max-content; margin-bottom:1.3rem; }
.schedule-head > div { display:flex; align-items:center; justify-content:center; min-width:8rem; height:2.2rem; background:#36198D; border-radius:2rem; }
.schedule-grid { display:flex; gap:.8rem; min-width:max-content; height:24rem; }
.schedule-col { display:flex; flex-direction:column; justify-content:flex-end; gap:0; min-width:8rem; }
.schedule-col > div { height:3rem; }
.schedule-col .card { display:flex; flex-direction:column; align-items:center; justify-content:center; height:6rem; background:#FFF; color:#001C5D; border:.2rem solid #001C5D; }
.schedule-col .card + .card { border-top:0; }
.schedule-col .card.pink { height:3rem; color:#FFF; background:#FF4D9A; }
.schedule-col .card.empty { gap:.6rem; height:100%; background:#36198D; border:0; color:#FFF; }
.schedule-col .card.empty .icon { width:3.4rem; height:3.5rem; }
.not-scroll .schedule-head > div,
.not-scroll .schedule-col { flex:1; }

#popMd .content { align-items:flex-end; }
#popMd .content .swiper { padding:6rem 0 2rem; margin-bottom:-.6rem; }
#popMd .content .swiper-control-wrap { margin-top:-1.6rem; }
#popMd .swiper-button-prev, 
#popMd .swiper-button-next { top:60%; }
#popMd .content .btn-close { position:absolute; top:calc(50% - 18rem); right:4.2rem; width:3rem; height:3rem; background-image:url('../img/btn-pop-fnb-close.png'); z-index:2; }
#popMd .pop-wrap { aspect-ratio:360 / 320; background:url('../img/bg-pop-md.png') no-repeat center /100% auto; }
#popMd .pop-wrap .info { position:relative; top:-6.4rem; }
#popMd .pop-wrap .info h5 { font-size:2.6rem; letter-spacing:-.52px; padding-top:.6rem; }
#popMd .pop-wrap .info h5.small { font-size:2.4rem; letter-spacing:-.48px; }
#popMd .pop-wrap .info h5 > span { display:block; color:#0270CA; }
#popMd .pop-wrap .brand { margin-top:-1.6rem; }
#popMd .pop-wrap .brand > span { margin-bottom:.2rem; font-size:1.4rem; letter-spacing:-.28px; }
#popMd .pop-wrap .variant { margin-top:-1.2rem; }
#popMd .pop-wrap .variant > span { font-size:1.2rem; line-height:1.2; letter-spacing:-.24px; }
#popMd .pop-wrap .store { background-color:#FFF; }

#popFnb .content { align-items:flex-end; }
#popFnb .content .swiper { padding:3.2rem 0 2rem; }
#popFnb .content .swiper-control-wrap { margin-top:0; }
#popFnb .content .btn-close { margin:0 4.2rem .8rem 0; width:3rem; height:3rem; background-image:url('../img/btn-pop-fnb-close.png'); }
#popFnb .pop-wrap { min-height:41.7rem; padding:3rem 0; margin:0 3rem; background-color:#FFF; border:.2rem solid #001C5D; border-radius:1.4rem; }
#popFnb .pop-wrap::before { content:''; position:absolute; top:-3.5rem; left:50%; transform:translateX(-50%); width:32.1rem; height:6.9rem; background:url('../img/obj-pop-fnb.png') no-repeat center /100% auto; }
#popFnb .pop-wrap .info h5 { font-size:2.6rem; letter-spacing:-.52px; margin-bottom:-.3rem; }
#popFnb .pop-wrap .store { background-color:#E3F6FF; }



/* nav */
nav { position:fixed; top:0; left:0; right:0; bottom:0; z-index:7; display:none; overflow:hidden; width:100%; max-width:720px; height:100%; margin:auto; }
nav .nav-drawer { position:relative; display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; background:#55C3F1 url('../img/obj-nav-top.png') no-repeat center top / 100% auto; }
nav .nav-drawer::-webkit-scrollbar { display:none; }
nav .nav-drawer .btn-nav-close { position:absolute; right:2rem; top:2rem; z-index:13; width:4.8rem; height:5.2rem; background:url('../img/btn-nav-close.png') no-repeat center / 100% auto; color:transparent; font-size:0; text-indent:-9999px; }
nav .nav-drawer .logo { padding-top:8rem; margin:0 auto; width:26rem; animation:bounceIn .8s ease; }
nav .nav-drawer .logo > a { display:block; }
nav .nav-drawer .nav-list { flex:1; margin:0 3rem; padding-top:3rem; }
nav .nav-drawer .nav-item { position:relative; z-index:13; background-color:#FFF; border-width:3px; border-style:solid; border-radius:3rem; }
nav .nav-drawer .nav-item + .nav-item { margin-top:1.2rem; }
nav .nav-drawer .nav-action { display:flex; align-items:center; column-gap:.8rem; width:100%; padding:1.5rem 2rem; }
nav .nav-drawer .nav-action > span { display:block; font-family:'Luckiest Guy'; font-size:2rem; line-height:1.1; }
nav .nav-drawer .nav-action::before { content:''; width:2.4rem; height:2.4rem; background-repeat:no-repeat; background-size:100% auto; }
nav .nav-drawer .nav-action::after { content:''; position:absolute; right:2rem; width:1.2rem; height:.8rem; background-repeat:no-repeat; background-size:100% auto; transition:.3s; }
nav .nav-drawer .nav-item1 { border-color:#4D2DAE; border-radius:5rem; }
nav .nav-drawer .nav-item1 .nav-action { color:#4D2DAE; }
nav .nav-drawer .nav-item1 .nav-action::before { background-image:url('../img/ico-nav-item1.png'); }
nav .nav-drawer .nav-item1 .nav-action::after { height:1.6rem; background-image:url('../img/ico-nav-arrow1.png'); }
nav .nav-drawer .nav-item2 { border-color:#E95464; }
nav .nav-drawer .nav-item2 .nav-action { color:#E95464; }
nav .nav-drawer .nav-item2 .nav-action::before { background-image:url('../img/ico-nav-item2.png'); }
nav .nav-drawer .nav-item2 .nav-action::after { background-image:url('../img/ico-nav-arrow2.png'); }
nav .nav-drawer .nav-item3 { border-color:#0097E0; }
nav .nav-drawer .nav-item3 .nav-action { color:#0097E0; }
nav .nav-drawer .nav-item3 .nav-action::before { background-image:url('../img/ico-nav-item3.png'); }
nav .nav-drawer .nav-item3 .nav-action::after { background-image:url('../img/ico-nav-arrow3.png'); }
nav .nav-drawer .nav-sub-list { display:none; padding:.6rem 2.7rem 1.5rem; }
nav .nav-drawer .nav-sub-list li ~ li { margin-top:2rem; }
nav .nav-drawer .nav-sub-list li > a { display:flex; align-items:center; column-gap:1.2rem; font-family:'LaundryGothic', sans-serif; font-size:1.5rem; letter-spacing:-.3px; color:#FFF; }
nav .nav-drawer .nav-sub-list li > a::before { content:''; width:1rem; height:1rem; background:url('../img/ico-nav-sub.png') no-repeat center / 100% auto; }
nav .nav-drawer .nav-bottom { background-image:url('../img/obj-nav-bottom.png'); background-repeat:no-repeat; background-size:100% auto; background-position:center; aspect-ratio:360 / 300; }
nav .nav-drawer.pool { background:#B08EFF url('../img/obj-nav-top1.png') no-repeat center top / 100% auto; }
nav .nav-drawer.pool .nav-bottom { background-image:url('../img/obj-nav-bottom1.png'); }
nav .nav-drawer.photo { background:#62D9DD url('../img/obj-nav-top2.png') no-repeat center top / 100% auto; }
nav .nav-drawer.photo .nav-bottom { background-image:url('../img/obj-nav-bottom2.png'); aspect-ratio:360 / 270; }
nav .nav-drawer.sanrio { background:#FFF3C3 url('../img/obj-nav-top3.png') no-repeat center top / 100% auto; }
nav .nav-drawer.sanrio .nav-bottom { background-image:url('../img/obj-nav-bottom3.png'); aspect-ratio:360 / 270; }
nav .nav-drawer .nav-item.is-open .nav-action { color:#FFF; }
nav .nav-drawer .nav-item.is-open a.nav-action::after { background-image:url('../img/ico-nav-arrow1-on.png'); }
nav .nav-drawer .nav-item.is-open button.nav-action::after { background-image:url('../img/ico-nav-arrow-on.png'); }
nav .nav-drawer .nav-item1.is-open { background-color:#4D2DAE; border-color:#331394; }
nav .nav-drawer .nav-item1.is-open .nav-action::before { background-image:url('../img/ico-nav-item1.png'); }
nav .nav-drawer .nav-item2.is-open { background-color:#E95464; border-color:#D02134; }
nav .nav-drawer .nav-item2.is-open .nav-action::before { background-image:url('../img/ico-nav-item2.png'); }
nav .nav-drawer .nav-item3.is-open { background-color:#0097E0; border-color:#007CB8; }
nav .nav-drawer .nav-item3.is-open .nav-action::before { animation:rubberBand 1s ease-in-out; }

@media (hover:none) and (pointer:coarse) {
	nav .nav-drawer .nav-action>span { transform:translateY(.3rem); }
}

@keyframes rubberBand {
	0% { transform:scale3d(1, 1, 1); }
	30% { transform:scale3d(1.25, 0.75, 1); }
	40% { transform:scale3d(0.75, 1.25, 1); }
	50% { transform:scale3d(1.15, 0.85, 1); }
	65% { transform:scale3d(0.95, 1.05, 1); }
	75% { transform:scale3d(1.05, 0.95, 1); }
	100% { transform:scale3d(1, 1, 1); }
}



/* footer */
footer { padding:1.4rem 0; text-align:center; background-color:#FFF; }
footer p { display:inline-block; width:7.2rem; height:1.2rem; }


/* main */
#main { background:#55c3f1 url('../img/bg-main.jpg') no-repeat top center / 100% auto; padding-top:90.5556vw; aspect-ratio:360 / 1218; }
#main .title { animation:bounceIn .8s ease; }
#main .title + p { width:24rem; height:.9rem; margin:-.1rem auto 0; opacity:0; animation:fadeIn .5s ease .8s forwards;	}
#main .bob { animation:bob 3.5s ease-in-out infinite; transform-origin:center center; backface-visibility:hidden; }
#main .bob img { display:block; backface-visibility:hidden; transform:translateZ(0); }
#main .shake { animation:shake 1s infinite ease-in-out; }
#main .obj-wrap .wave { animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
#main .obj-wrap .wave.left { animation-name:main-wave-left; animation-duration:8s; }
#main .obj-wrap .wave.right { animation-name:main-wave-right; animation-duration:9s; }
#main .obj-wrap .wave1 { top:57.5vw; left:calc(50% - 50vw); width:6.6667vw; height:17.5vw; animation-delay:-2.3s; } 
#main .obj-wrap .wave2 { top:61.7vw; left:calc(50% - 50vw); width:6.9445vw; height:14.4445vw; animation-delay:-1.7s; } 
#main .obj-wrap .wave3 { top:44.4445vw; right:calc(50% - 50vw); width:25.8334vw; height:35.5556vw; animation-delay:-1.4s; } 
#main .obj-wrap .wave4 { top:59.4444vw; right:calc(50% - 50vw - 0.5556vw); width:42.2223vw; height:28.3334vw; animation-delay:-2s; } 
#main .obj-wrap .wave5 { top:78.1vw; left:calc(50% - 50vw + 18.6vw); width:13.9vw; height:12.8vw; } 
#main .obj-wrap .char1 { top:24.1667vw; left:calc(50% - 50vw + 21.1111vw); width:55vw; height:42.2222vw; } /* 키티&시나모롤 */
#main .obj-wrap .char2 { top:6.3889vw; left:calc(50% - 50vw); width:36.1112vw; height:24.4445vw; animation-delay:-0.8s; } /* 포차코 */
#main .obj-wrap .char3 { top:48.3333vw; right:calc(50% - 50vw + 8.3334vw); width:28.0556vw; height:22.2223vw; } /* 배드바츠마루 */
#main .obj-wrap .char4 { top:70vw; left:calc(50% - 50vw + 30vw); width:17.7778vw; height:20vw; animation-delay:-1.1s; } /* 한교동 */
#main .obj-wrap .char5 { top:51.6667vw; left:calc(50% - 50vw + 6.9445vw); width:23.8889vw; height:32.5vw; animation-delay:-1.3s; } /* 쿠로미 */
#main .obj-wrap .char6 { top:75vw; left:calc(50% - 50vw + 1.9445vw); width:18.8889vw; height:18.6112vw; animation-delay:-0.2s; } /* 바쿠 */
#main .list { position:relative; }
#main .list li { position:absolute; left:0; width:100vw; height:58.3vw; z-index:2; }
#main .list li::before { content:''; position:absolute; z-index:1; background-repeat:no-repeat; background-size:100% auto; }
#main .list li a { display:block; position:relative; width:100%; height:100%; }
#main .list li img { position:absolute; right:0; }
#main .list .pool { top:12.5vw; }
#main .list .pool .palm { top:-11.1111vw; left:calc(50% - 50vw); width:24.4vw; height:37.2vw; }
#main .list .pool .mirrorball { position:absolute; top:6.1111vw; left:calc(50% - 50vw + 34.2vw); width:11.112vw; height:15vw; background-image:url('../img/obj-main-pool-mirror-ball.png'); background-size:auto 15vw; animation:main-mirrorball 3s steps(31) infinite; } 
#main .list .pool .char { top:-6.6667vw; right:calc(50% - 50vw + 16.1112vw); width:23.3334vw; height:28.3334vw; }
#main .list .pool .note1 { top:3.8889vw; left:calc(50% - 50vw + 41.4vw); width:3.9vw; height:4.4vw; }
#main .list .pool .note2 { top:0; right:calc(50% - 50vw + 11.7vw); width:5vw; height:5.8vw; }
#main .list .pool .note3 { top:23.8889vw; right:calc(50% - 50vw + 39.2vw); width:3.9vw; height:3.3vw; }
#main .list .pool .wave1 { top:10vw; left:calc(50% - 50vw + 17.7778vw); width:22.7778vw; height:19.4445vw; animation-delay:-0.5s; }
#main .list .pool .wave2 { bottom:6.6667vw; right:calc(50% - 50vw + 1.7vw); width:24.4vw; height:16.4vw; }
#main .list .photo { top:78.8889vw; }
#main .list .photo .leaf { bottom:7.7778vw; right:calc(50% - 50vw); width:17.2vw; height:18.9vw; }
#main .list .photo .surfing { top:-19.8611vw; left:calc(50% - 50vw); width:42.7778vw; height:39.4445vw; z-index:-1; }
#main .list .photo .char { top:-5.2778vw; right:calc(50% - 50vw + 35.8334vw); width:30.5556vw; height:28.8889vw; }
#main .list .photo .heart { top:11.9445vw; left:calc(50% - 50vw + 23.0556vw); width:5.8334vw; height:5.8334vw; }
#main .list .photo .chum { top:7.2222vw; right:calc(50% - 50vw + 3.0556vw); width:28.3334vw; height:17.2223vw; animation-delay:-1.1s; }
#main .list .photo .water { opacity:0; width:13.8889vw; height:11.3889vw; }
#main .list .sanrio { top:138.3333vw; }
#main .list .sanrio .leaf { top:-6vw; left:calc(50% - 50vw); width:20vw; height:33.3vw; }
#main .list .sanrio .char { top:-10.5556vw; right:calc(50% - 50vw + 16.9445vw); width:33.8889vw; height:32.2223vw; }
#main .list .sanrio .burger { top:9.7222vw; left:calc(50% - 50vw + 37.0833vw); width:15.2778vw; height:15.2778vw; }
#main .list .sanrio .parasol { top:-9.4444vw; left:calc(50% - 50vw + 18.3333vw); width:42.8vw; height:42.8vw; animation-duration:2.5s; animation-delay:-1.5s; } 
#main .list .sanrio .water1 { opacity:0; width:5.8334vw; height:4.4445vw; }
#main .list .sanrio .water2 { opacity:0; width:7.7778vw; height:5.2778vw; }
#main .list .sanrio .wave { bottom:5.2778vw; left:calc(50% - 50vw + 22.9vw); width:31.9445vw; height:19.7223vw; }
#main [data-aos].aos-animate .water { animation:main-drop .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:0.8s }
#main [data-aos].aos-animate .water1 { animation:main-drop-left .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:0.6s; }
#main [data-aos].aos-animate .water2 { animation:main-drop-right .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:0.9s; }



@keyframes bounceIn {
	0% { opacity:0; transform:scale(0.3); }
	20% { transform:scale(1.1); }
	40% { transform:scale(0.9); }
	60% { opacity:1; transform:scale(1.03); }
	80% { transform:scale(0.97); }
	100% { opacity:1; transform:scale(1); }
}

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


@keyframes shake {
	0% { transform:rotate(0deg); }
	50% { transform:rotate(10deg); }
	100% { transform:rotate(0deg); }
}

@keyframes main-wave-left {
	0% { transform:translateX(0px) translateY(0px); }
	25% { transform:translateX(-2px) translateY(1px); }
	50% { transform:translateX(-4px) translateY(0px); }
	75% { transform:translateX(-2px) translateY(-1px); }
	100% { transform:translateX(0px) translateY(0px); }
}

@keyframes main-wave-right {
	0% { transform:translateX(0px) translateY(0px); }
	25% { transform:translateX(2px) translateY(-3px); }
	50% { transform:translateX(4px) translateY(0px); }
	75% { transform:translateX(2px) translateY(4px); }
	100% { transform:translateX(0px) translateY(0px); }
}

@keyframes main-mirrorball {
	from { background-position:0 0; }
	to { background-position:-344.444vw 0; } 
}

@keyframes main-drop {
	0% { opacity:0; bottom:18vw; left:calc(50% - 50vw + 18.2vw); }
	100% { opacity:1; bottom:22.7778vw; left:calc(50% - 50vw + 9.4445vw); }
}

@keyframes main-drop-left {
	0% { opacity:0; top:19vw; left:calc(50% - 50vw + 33.3vw); }
	100% { opacity:1; top:15vw; left:calc(50% - 50vw + 28.3vw); }
}

@keyframes main-drop-right {
	0% { opacity:0; top:20.2vw; right:calc(50% - 50vw + 16vw); }
	100% { opacity:1; top:16.2vw; right:calc(50% - 50vw + 11vw); }
}



#party { background:#4D2DAE; }
#party .video-wrap { height:66.67vw; }
#party .video-wrap video { width:100%; height:100%; object-fit:cover; object-position:center; }
#party .video-wrap + .info-wrap { position:relative; z-index:1; margin-top:-8.8889vw; padding-top:29.4445vw; padding-bottom:20vw; background:url('../img/bg-pool-green.png') no-repeat center top / 100% auto; }
#party .info-wrap .inner { position: relative; max-width:36rem; margin:0 auto;}
#party .info-wrap .inner::before,
#party .info-wrap .inner::after { content:''; position:absolute; background-repeat:no-repeat; background-size:100% auto; }
#party .info-wrap .inner::before { z-index:-1; left:calc(50% - 50vw + 5vw); bottom:6.3889vw; width:45.8334vw; height:27.7778vw; background-image:url('../img/obj-pool-leaf.png'); animation:shake 2s infinite ease-in-out; }
#party .info-wrap .inner::after { right:calc(50% - 18rem + 2.5rem); top:8.1rem; width:4.8rem; height:3.8rem; background-image:url('../img/obj-pool-cool.png'); animation:shake 1.2s infinite ease-in-out; }
#party .info-wrap h3 { position:absolute; left:50%; top:-1.2rem; transform:translateX(-50%); width:100%; }
#party .info-wrap h3 img { animation:resonate .8s ease-in-out infinite; }
#party .info-wrap h3::before,
#party .info-wrap h3::after { content:none; } 
#party .meta-wrap .period::before { background-image:url('../img/ico-period-pink.png'); }
#party .meta-wrap .place::before { background-image:url('../img/ico-place-pink.png'); }

#party .line-up { position:relative; z-index:1; padding:18.61vw 2rem 31.94vw; margin-top:-8.89vw; background:url('../img/bg-pool-pink.png') no-repeat center top / 100% auto; }
#party .line-up::before { content:''; position:absolute; right:calc(50% - 18rem + 5.8rem); top:6rem; width:9.9rem; height:3.7rem; background:url('../img/obj-pool-summer.png') no-repeat center top / 100% auto; animation:shake 1.5s infinite ease-in-out; animation-delay:-1.3s; }
#party .line-up .line { left:0; top:-7.78vw; width:100%; height:25vw; }
#party .line-up .leaf { z-index:-1; top:-.5rem; left:0; width:9.6rem; height:12rem; }
#party .line-up .line-up-group { margin-top:15.83vw; text-align:center; }
#party .artist::after { content:''; position:absolute; left:0; top:-6.6667vw; width:100%; height:92.2223vw; background:url('../img/bg-pool-artist.png') no-repeat center / 100% auto; }
#party .artist .img-wrap { border:.2rem solid #001C5D; overflow:hidden; }
#party .artist .coming-soon > img { transform:scale(1.04); filter:blur(3px); }
#party .artist .coming-soon::before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:2.6rem; height:3.9rem; background:url('../img/obj-pool-question.png') no-repeat center / 100% auto; z-index:1; }
#party .artist .clear::before { content:''; position: absolute; inset: 0; background:rgba(0, 0, 0, .58); }
#party .artist .clear::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:10.6rem; height:3.9rem; background:url('../img/obj-pool-clear.png') no-repeat center / 100% auto; z-index:1; }
#party .line-up .info-wrap { position:relative; top:-2.5rem; display:inline-block; padding:.8rem 1.3rem; text-align:center; background-color:#FFF; border:.2rem solid #001C5D; }
#party .line-up .info-wrap .date { position:absolute; bottom:3rem; left:-1.5rem; width:5.8rem; height:3.4rem; }
#party .line-up .info-wrap .name > img { height:2.5rem; }
#party .btn-wrap { margin-top:1.6rem; }
#party .btn-wrap::after { content:none; }
#party .btn-wrap .btn::after { background-image:linear-gradient(90deg, #58FF77 0%, #FBFF80 100%); }
#party .btn-wrap .btn .txt { z-index:1; width:18.6rem; height:2.1rem; }
#party .notice-wrap .leaf { top:-6.2rem; right:0; width:11rem; height:17rem; }
#party .notice-wrap { position:relative; z-index:1; padding:6.6rem 2rem 5rem; margin-top:-7rem; color:#FFF; background:url('../img/bg-pool-purple.png') no-repeat center top / 100% auto; } 
#party .notice-wrap h4 { width:7rem; height:2.5rem; }
#party .notice-wrap .list-dot { padding:1.8rem; margin-top:.8rem; margin-left:-1.2rem; background:#36198D; border:.2rem solid #331689; border-radius:1rem; }
#party .notice-wrap .list-dot li { font-size:1.3rem; line-height:1.5; letter-spacing:-.26px; }
#party .notice-wrap .list-dot li ~ li { margin-top:0; }

@keyframes resonate {
	0%, 100% { transform:scale(1); text-shadow:0 0 0 rgba(255,255,255,0); }
	50% { transform:scale(1.05); text-shadow:0 0 10px rgba(255,255,255,0.5),0 0 20px rgba(255,255,255,0.3); } 
}


/* play */
#play { background-color:#00b9f2; }
#photo-spot .swiper-button-prev, 
#photo-spot .swiper-button-next { top:47%; }
#photo-spot { padding-top:3.6rem; background:#62D9DD; }
#photo-spot::before { content:''; position:absolute; left:0; top:7.2rem; width:12.8rem; height:16.5rem; background:url('../img/obj-photo-bokeh.png') no-repeat center / 100% auto; }

#photo-spot h3::before { opacity:0; z-index:2; width:5.2rem; height:4.9rem; background-image:url('../img/obj-tit-photo-water1.png'); } 
#photo-spot h3::after { opacity:0; width:1.8rem; height:1.5rem; background-image:url('../img/obj-tit-photo-water2.png'); } 
#photo-spot h3 > img { z-index:1; }
#photo-spot .meta-wrap { margin-top:-1.5rem; margin-bottom:2.6rem; padding:0; background:transparent; border:0; }
#photo-spot .meta-wrap .place::before { background-image:url('../img/ico-place-navy.png'); }
#photo-spot .swiper { max-width:36rem; }
#photo-spot .swiper-control-wrap { margin-top:1.1rem; }
#photo-spot .obj.wave { right:calc(50% - 18rem + 7.2rem); top:-2.4rem; width:11rem; height:11rem; }
#photo-spot .obj.palm { left:0; top:0; width:13rem; height:16rem; }
#photo-spot .obj.leaf { right:0; top:12.8rem; width:6.6rem; height:12rem; }
#photo-spot .obj-btm { margin-top:-1.3rem; }
#photo-spot .obj-btm::before,
#photo-spot .obj-btm::after { animation:bob 4s ease-in-out infinite; }
#photo-spot .obj-btm::before { left:calc(50% - 18rem); bottom:3.5rem; width:13.9rem; height:12rem; background-image:url('../img/obj-photo-maruttang.png'); animation-delay:-1.1s; }
#photo-spot .obj-btm::after { right:calc(50% - 18rem + 1.8rem); bottom:5.8rem; width:22.1rem; height:16.2rem; background-image:url('../img/obj-photo-badtz-maru.png'); animation-delay:-0.7s; }
#photo-spot [data-aos].aos-animate h3::before { animation:photo-drop-left .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:1.2s; }
#photo-spot [data-aos].aos-animate h3::after { animation:photo-drop-right .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:.7s; }
@keyframes photo-drop-left {
	0% { opacity:0; bottom:.2rem; left:calc(50% - 18rem + 9.5rem); }
	100% { opacity:1; bottom:2.2rem; left:calc(50% - 18rem + 8.5rem); }
}
@keyframes photo-drop-right {
	0% { opacity:0; top:8.6rem; right:calc(50% - 18rem + 7.2rem); }
	100% { opacity:1; top:6.6rem; right:calc(50% - 18rem + 5.2rem); }
}

#village { position:relative; padding-top:2.8rem; padding-bottom:5rem; margin-top:-5rem; background:url('../img/bg-village.png') no-repeat center top / cover; } 
#village h3 { margin-bottom:-.5rem; }
#village h3::before { left:calc(50% - 18rem + 1.8rem); top:5.8rem; width:18.3rem; height:8.9rem; background-image:url('../img/obj-tit-village-txt1.png'); } 
#village h3::after { right:calc(50% - 18rem + .3rem); top:6.4rem; width:17.3rem; height:10.9rem; background-image:url('../img/obj-tit-village-txt2.png'); } 
#village .swiper1 { max-width:36rem; margin-bottom:3rem; }
#village .swiper-button-prev, 
#village .swiper-button-next { top:45%; }
#village .swiper1 .img-wrap::before { content:''; position:absolute; right:calc(50% - 18rem + .8rem); bottom:-1.6rem; width:10.9rem; height:8.2rem; background:url('../img/obj-village-cinnamoroll.png') no-repeat center / 100% auto; }
#village .info-wrap::before { content:''; position:absolute; left:calc(50% - 18rem + 2.8rem); top:-4.8rem; width:7.6rem; height:5.8rem; background:url('../img/obj-village-coco.png') no-repeat center / 100% auto; }
#village .info-wrap p, #village .meta-wrap { margin:0 auto; max-width:30rem; }
#village .info-wrap p { background-color:#E95464; }
#village .meta-wrap { margin-top:1rem; }
#village .meta-wrap::before { content:''; position:absolute; right:calc(50% - 18rem + 3.5rem); bottom:-1.6rem; width:7.9rem; height:3.8rem; background:url('../img/obj-village-baby-cinnamoroll.png') no-repeat center / 100% auto; }
#village .meta-wrap .period::before { background-image:url('../img/ico-period-scarlet.png'); }
#village .meta-wrap .place::before { background-image:url('../img/ico-place-scarlet.png'); }
#village .meta-wrap .time::before { background-image:url('../img/ico-time-scarlet.png'); }
#village table { position:relative; max-width:32rem; margin:-.3rem auto 0; border:.2rem solid #001C5D; border-radius:1rem; box-shadow:0 .6rem 0 0 #EDDA90; overflow:hidden; z-index:1; }
#village th, #village td { padding:1rem 1.2rem; font-size:1.4rem; line-height:1.4; letter-spacing:-.28px; text-align:center; color:#001C5D; background-color:#FFF; border-width:0 .2rem .2rem 0; border-style:solid; border-color:#001C5D; }
#village th { color:#FFF; }
#village th:nth-child(1) { color:#001C5D; }
#village th:nth-child(2) { background-color:#BD5427; }
#village th:nth-child(3) { background-color:#189794; }
#village th:nth-child(4) { background-color:#0097E0; }
#village tr:last-child td { border-bottom:none; }
#village th:last-child, #village td:last-child { border-right:none; }
#village table .period { display:block; font-size:1.1rem; letter-spacing:-.28px; }
#village table .high .period { color:#0097E0; }
#village table .gold1 .period { color:#FF3401; }
#village table .gold2 .period { color:#BD5427; }
#village .btn-wrap { margin-top:3rem; }
#village .btn-wrap::after { bottom:1.3rem; right:calc(50% - 18rem + 4rem); width:4.2rem; height:3rem; background-image:url('../img/obj-btn-village-water.png'); }
#village .btn-wrap .btn::after { background-image:linear-gradient(97deg, #43F3A6 -2.33%, #0286F3 82.87%); }
#village .notice-wrap { padding:0 3rem; margin-top:5rem; }
#village .line-up { margin:4.8rem auto 3.2rem; text-align:center; }
#village .line-up h4 { position:relative; display:inline-block; font-size:3.2rem; letter-spacing:-.64px; }
#village .line-up h4::before { content:''; position:absolute; right:-2.1rem; top:-.5rem; width:1.9rem; height:1.5rem; background:url('../img/obj-village-water.png') no-repeat center / 100% auto; }
#village .line-up .line-up-group { margin-top:1rem; }
#village .obj.palm { left:0; bottom:39rem; width:10.8rem; height:16rem; }
#village .obj.leaf1 { left:0; top:4.2rem; width:5.2rem; height:10.4rem; }
#village .obj.leaf2 { right:0; top:64rem; width:6.6rem; height:10rem; z-index:1; }
#village .obj.leaf3 { right:0; bottom:15rem; width:6.6rem; height:9.4rem; }
#village h3[data-aos].aos-animate::before { animation:wiggle2 .9s infinite ease-in-out; }
#village h3[data-aos].aos-animate::after { animation:wiggle3 .9s infinite ease-in-out; animation-delay:0.05s}
@keyframes wiggle2 {
	0% { transform:rotate(-2deg); }
	50% { transform:rotate(2deg); }
	100% { transform:rotate(-2deg); }
}
@keyframes wiggle3 {
	0% { transform:rotate(2deg); }
	50% { transform:rotate(-2deg); }
	100% { transform:rotate(2deg); }
}


/* delights */
#delights h3 + p { font-size:1.8rem; letter-spacing:-.36px; text-align:center; }

#md { padding-top:4.8rem; padding-bottom:6.4rem; background:#1A61CD url('../img/bg-md.png') no-repeat center top / 100% auto; }
#md::before { content:''; position:absolute; left:0; top:.6rem; width:12.3rem; height:12.7rem; background:url('../img/obj-md-wave.png') no-repeat center top / 100% auto; }
#md::after { content:''; position:absolute; left:1.6rem; bottom:3rem; z-index:1; width:5.6rem; height:6rem; background:url('../img/obj-md-sayuri.png') no-repeat center top / 100% auto; }
#md h3::before { opacity:0; width:2.4rem; height:2rem; background-image:url('../img/obj-tit-md-water1.png'); }
#md h3::after { opacity:0; width:5.8rem; height:5.3rem; background-image:url('../img/obj-tit-md-water2.png'); }
#md h3 + p { margin-top:-1.6rem; color:#FFF; }
#md .marquee-wrap::before { content:''; position:absolute; right:calc(50% - 18rem + 1.3rem); top:-2.9rem; width:9.8rem; height:10.4rem; background:url('../img/obj-md-hangyodon.png') no-repeat center top / 100% auto; }
#md .marquee-wrap .marquee-track .item { margin-right:1rem; }
#md .marquee { padding:2.7rem 0 4rem; }
#md .marquee .item { height:15.4rem; }
#md .marquee .item1 { width:15.5rem; animation:updown 1.2s ease-in-out -.6s infinite forwards; }
#md .marquee .item2 { width:13rem; animation:updown 1.2s ease-in-out -.45s infinite forwards; }
#md .marquee .item3 { width:14rem; animation:updown 1.2s ease-in-out -.3s infinite forwards; }
#md .marquee .item4 { width:13.6rem; animation:updown 1.2s ease-in-out -.15s infinite forwards; }
#md .marquee .item5 { width:14.7rem; animation:updown 1.2s ease-in-out 0s infinite forwards; }
#md .marquee .item6 { width:13rem; animation:updown 1.2s ease-in-out .15s infinite forwards; }
#md .marquee .item7 { width:15.5rem; animation:updown 1.2s ease-in-out .3s infinite forwards; }
#md .marquee .item8 { width:14rem; animation:updown 1.2s ease-in-out .45s infinite forwards; }
#md [data-aos].aos-animate h3::before { animation:md-drop-left .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:1.2s; }
#md [data-aos].aos-animate h3::after { animation:md-drop-right .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:1.5s; }
@keyframes md-drop-left {
	0% { opacity:0; bottom:0; left:calc(50% - 18rem + 6.8rem); }
	100% { opacity:1; bottom:2rem; left:calc(50% - 18rem + 4.9rem); }
}
@keyframes md-drop-right {
	0% { opacity:0; top:4.3rem; right:calc(50% - 18rem + 10rem); }
	100% { opacity:1; top:2.3rem; right:calc(50% - 18rem + 6rem); }
}

#fnb { padding-top:10rem; margin-top:-8.4rem; background:url('../img/bg-fnb.png') no-repeat center top / 100% auto; }
#fnb h3::before { left:calc(50% - 18rem + 3.4rem); top:5.7rem; width:7.9rem; height:5rem; background-image:url('../img/obj-tit-fnb-flower.png'); }
#fnb h3::after { right:calc(50% - 18rem + 5.8rem); bottom:1rem; width:5rem; height:5rem; background-image:url('../img/obj-tit-fnb-juice.png'); }
#fnb h3 + p { margin-top:-.8rem; }
#fnb .marquee { padding:.3rem 0 4.8rem; }
#fnb .marquee .item { height:18.2rem; }
#fnb .marquee .item1 { width:16rem; animation:updown 1.2s ease-in-out -.48s infinite forwards; }
#fnb .marquee .item2 { width:14.6rem; animation:updown 1.2s ease-in-out -.36s infinite forwards; }
#fnb .marquee .item3 { width:15.2rem; animation:updown 1.2s ease-in-out -.24s infinite forwards; }
#fnb .marquee .item4 { width:15.4rem; animation:updown 1.2s ease-in-out -.12s infinite forwards; }
#fnb .marquee .item5 { width:14.4rem; animation:updown 1.2s ease-in-out 0s infinite forwards; }
#fnb .marquee .item6 { width:15.8rem; animation:updown 1.2s ease-in-out .12s infinite forwards; }
#fnb .marquee .item7 { width:15.8rem; animation:updown 1.2s ease-in-out .24s infinite forwards; }
#fnb .marquee .item8 { width:15rem; animation:updown 1.2s ease-in-out .36s infinite forwards; }
#fnb .marquee .item9 { width:14.8rem; animation:updown 1.2s ease-in-out .48s infinite forwards; }
#fnb .marquee .item10 { width:15.6rem; animation:updown 1.2s ease-in-out .6s infinite forwards; }
#fnb .obj-btm { margin-top:-5.8rem; }
#fnb .obj-btm::before { left:calc(50% - 50vw); bottom:0; width:59.1667vw; height:75.5556vw; background-image:url('../img/obj-fnb-tube.png'); animation:bob 4s ease-in-out infinite; }
#fnb .obj-btm::after { content:none; }
#fnb [data-aos].aos-animate h3::before { animation:shake 2s infinite ease-in-out; animation-delay:-2.2s; }
#fnb [data-aos].aos-animate h3::after { animation:shake 2s infinite ease-in-out; }

/* 애니메이션 딜레이 시간 맞춰서 듀레이션 값 수정 필요. ex) duration 속도가 1.2이고 슬라이드 개수가 8개일 때 (1200/8) delay 속도는 .15씩 증가 */
@keyframes updown {
	0% { transform:translateY(0); }
	50% { transform:translateY(1.5rem); } 
	100% { transform:translateY(0); }
}

#menu { padding-top:10rem; padding-bottom:6rem; margin-top:-18.8889vw; background:url('../img/bg-menu.png') no-repeat center top / cover; }
#menu::before { content:''; position:absolute; right:calc(50% - 18rem + 1.6rem); top:9.2rem; width:7.5rem; height:5.8rem; background:url('../img/obj-menu-baby-cinnamoroll.png') no-repeat center top / 100% auto; }
#menu h3 { height:15.4rem; margin-bottom:-1.6rem; }
#menu h3::before { content:none; }
#menu h3::after { left:0; top:0; width:100%; height:100%; background-image:url('../img/tit-menu.png'); }
#menu .menu-wrap .img { position:relative; }
#menu .menu-wrap .img::before,
#menu .menu-wrap .img::after { opacity:0; content:''; position:absolute; background-repeat:no-repeat; background-size:100% auto; }
#menu .menu-wrap .img::before { width:2.3rem; height:1.7rem; background-image:url('../img/obj-menu-water1.png'); }
#menu .menu-wrap .img::after { width:2.9rem; height:2.3rem; background-image:url('../img/obj-menu-water2.png'); }
#menu .menu-wrap .img { display:block; max-width:36rem; margin:0 auto; }
#menu .menu-wrap ol { position:relative; width:30rem; padding:2rem 1.8rem; margin:1.2rem auto 0; background-color:#FFF; border:.2rem solid #001C5D; border-radius:1rem; }
#menu .menu-wrap ol::after { content:''; position:absolute; bottom:-3.2rem; right:calc(50% - 18rem + 2rem); width:5.5rem; height:6.9rem; background:url('../img/obj-menu-combo.png') no-repeat center / 100% auto; }
#menu .menu-wrap ol li > p { display:flex; align-items:center; justify-content:space-between; font-size:1.4rem; letter-spacing:-.28px; }
#menu .menu-wrap ol li .place { position:relative; display:inline-block; margin:.4rem 0 0 1.4rem; padding:.4rem .6rem .4rem 2rem; font-size:1.2rem; letter-spacing:-.24px; color:#401800; background:#FFF8E8; border-radius:5rem; }
#menu .menu-wrap ol li .place::before { content:''; position:absolute; left:.6rem; width:1.2rem; height:1.2rem; background:url('../img/ico-place-menu.png') no-repeat center top / 100% auto; }
#menu .menu-wrap ol li ~ li { margin-top:1.4rem; }
#menu .menu-wrap .dot { flex:1; margin:0 .8rem; border-top:.2rem dotted #001C5D; }
#menu .img[data-aos].aos-animate::before { animation:menu-drop-left .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:1.2s; }
#menu .img[data-aos].aos-animate::after { animation:menu-drop-right .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay:1.5s; }


@keyframes bob {
	0% { transform:translateY(0px) rotate(-1deg); }
	25% { transform:translateY(-3px) rotate(1deg); }
	50% { transform:translateY(-6px) rotate(-0.5deg); }
	75% { transform:translateY(-.2px) rotate(1.2deg); }
	100% { transform:translateY(0) rotate(-1deg); }
}

@keyframes menu-drop-left {
	0% { opacity:0; top:16.4rem; left:calc(50% - 18rem + 3.5rem); }
	100% { opacity:1; top:15.8rem; left:calc(50% - 18rem + 1.6rem); }
}
@keyframes menu-drop-right {
	0% { opacity:0; top:7.4rem; right:calc(50% - 18rem + 4.2rem); }
	100% { opacity:1; top:5.8rem; right:calc(50% - 18rem + 2.1rem); }
}





@media (min-width:720px) { 
	html { height:100%; font-size:13px; }
	body::before { content:''; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1; width:100%; height:100%; background:url('../img/bg-day.jpg') no-repeat center bottom / cover; }
	body::-webkit-scrollbar { display:none; }

	/* layout */
	.wrapper { overflow-y:scroll; scroll-behavior:smooth; width:720px; height:auto; margin:0 auto; -ms-overflow-style:none; scrollbar-width:none; box-shadow:0px 4px 30px 0px rgba(0, 0, 0, 0.10); }
	.wrapper::-webkit-scrollbar { display:none; }
	.btn-nav,
	.btn-home,
	.btn-top { right:calc(50% - 360px + 2rem); }


	/* main */
	#main { padding-top:652px; padding-bottom:50px; }
	#main .title + p { width:480px; height:18px; }
	#main .obj-wrap .wave1 { top:414px; left:calc(50% - 360px); width:48px; height:126px; } 
	#main .obj-wrap .wave2 { top:444px; left:calc(50% - 360px); width:50px; height:104px; } 
	#main .obj-wrap .wave3 { top:322px; right:calc(50% - 360px); width:186px; height:256px; } 
	#main .obj-wrap .wave4 { top:428px; right:calc(50% - 360px - 4px); width:304px; height:204px; } 
	#main .obj-wrap .wave5 { top:562px; left:calc(50% - 360px + 134px); width:100px; height:92px; } 
	#main .obj-wrap .char1 { top:174px; left:calc(50% - 360px + 152px); width:396px; height:304px; } /* 키티&시나모롤 */
	#main .obj-wrap .char2 { top:46px; left:calc(50% - 360px); width:260px; height:176px; } /* 포차코 */
	#main .obj-wrap .char3 { top:348px; right:calc(50% - 360px + 60px); width:202px; height:160px; } /* 배드바츠마루 */
	#main .obj-wrap .char4 { top:504px; left:calc(50% - 360px + 216px); width:128px; height:144px; } /* 한교동 */
	#main .obj-wrap .char5 { top:372px; left:calc(50% - 360px + 51px); width:172px; height:234px; } /* 쿠로미 */
	#main .obj-wrap .char6 { top:540px; left:calc(50% - 360px + 14px); width:136px; height:134px; } /* 바쿠 */
	#main .list li { width:720px; height:420px; }
	#main .list .pool { top:94px; }
	#main .list .pool .palm { top:-80px; left:calc(50% - 360px); width:176px; height:268px; }
	#main .list .pool .mirrorball { top:44px; left:calc(50% - 360px + 245px); width:80px; height:108px; background-size:auto 100%; }
	#main .list .pool .char { top:-48px; right:calc(50% - 360px + 116px); width:168px; height:204px; }
	#main .list .pool .note1 { top:28px; left:calc(50% - 360px + 298px); width:28px; height:32px; }
	#main .list .pool .note2 { top:4px; right:calc(50% - 360px + 84px); width:36px; height:42px; }
	#main .list .pool .note3 { top:171px; right:calc(50% - 360px + 282px); width:28px; height:24px; }
	#main .list .pool .wave1 { top:72px; left:calc(50% - 360px + 128px); width:164px; height:140px; }
	#main .list .pool .wave2 { bottom:48px; right:calc(50% - 360px + 11px); width:176px; height:118px; }
	#main .list .photo { top:574px; }
	#main .list .photo .leaf { bottom:54px; right:calc(50% - 360px); width:124px; height:136px; }
	#main .list .photo .surfing { top:-143px; left:calc(50% - 360px); width:308px; height:284px; }
	#main .list .photo .char { top:-38px; right:calc(50% - 360px + 258px); width:220px; height:208px; }
	#main .list .photo .heart { top:86px; left:calc(50% - 360px + 166px); width:42px; height:42px; }
	#main .list .photo .chum { top:55px; right:calc(50% - 360px + 21px); width:204px; height:124px; }
	#main .list .photo .water { width:100px; height:82px; }
	#main .list .sanrio { top:1000px; }
	#main .list .sanrio .leaf { top:-38px; left:calc(50% - 360px); width:144px; height:240px; }
	#main .list .sanrio .char { top:-76px; right:calc(50% - 360px + 122px); width:244px; height:232px; }
	#main .list .sanrio .burger { top:70px; left:calc(50% - 360px + 267px); width:110px; height:110px; }
	#main .list .sanrio .parasol { top:-67px; left:calc(50% - 360px + 133px); width:308px; height:308px; }
	#main .list .sanrio .water1 { width:42px; height:32px; }
	#main .list .sanrio .water2 { width:56px; height:38px; }
	#main .list .sanrio .wave { bottom:39px; left:calc(50% - 360px + 164px); width:230px; height:142px; }

	@keyframes main-mirrorball {
		from { background-position:0 0; }
		to { background-position:-2480px 0; } 
	}
	@keyframes main-drop {
		0% { opacity:0; bottom:112px; left:calc(50% - 360px + 136px); }
		100% { opacity:1; bottom:167px; left:calc(50% - 360px + 72px); }
	}
	@keyframes main-drop-left {
		0% { opacity:0; top:126px; left:calc(50% - 360px + 224px); }
		100% { opacity:1; top:106px; left:calc(50% - 360px + 204px); }
	}
	@keyframes main-drop-right {
		0% { opacity:0; top:134px; right:calc(50% - 360px + 99px); }
		100% { opacity:1; top:114px; right:calc(50% - 360px + 79px); }
	}

	/* party */
	#party .video-wrap { height:480px; }
	#party .video-wrap + .info-wrap { margin-top:-70px; padding-top:220px; padding-bottom:144px; }
	#party .info-wrap .inner::before { left:32px; bottom:46px; width:264px; height:160px; }
	#party .line-up { padding:134px 40px 230px; margin-top:-64px; }
	#party .line-up .line { top:-56px; height:180px; }
	#party .line-up .line-up-group { margin-top:114px; margin-left:-40px; margin-right:-40px; padding:0 40px; }
	#party .line-up .line-up-group.artist::after { top:-48px; height:664px; }
	#party .line-up .line-up-group.artist .swiper-slide { width:440px !important; }
	#party .line-up .line-up-group.dj .swiper-slide { width:260px !important; }

	#village .line-up .line-up-group .swiper-slide { width:396px !important;}

	.days-of-week { width:280px; }

	#popTimeTable .content .btn-close { position:absolute; top:2rem; right: calc(50% - 360px + 2rem); }

	/* delights */
	#md::after { bottom:10px; }
	#md .marquee-wrap::before { right:calc(50% - 360px + 26px); }

	#fnb .obj-btm::before { left:calc(50% - 360px); bottom:0; width:426px; height:544px; }

	#menu { margin-top:-136px; }

}


@media(max-width:359px) {
	html { font-size:calc(4px + 1.66667vw); }
}

@media(min-width:360px)and (max-width:500px) {
	html { font-size:calc(-4.4px + 4vw); }
}

@media(min-width:390px) {
	html { font-size:11px; }
}

@media(min-width:501px) {
	html { font-size:12px; }
}

@media(min-width:720px)and (hover:hover)and (pointer:fine) {
	html { font-size:16px; }
}