@charset "UTF-8";

/**
* Filename :tulip_festival.css
* Description :tulip_festival pick styles
**/

/* Caveat Brush */
@font-face {
	font-family:'Caveat Brush';
	font-style:normal;
	font-display:swap;
	font-weight:400;
	src:url('https://wwwrod.everland.com/font/CaveatBrush-Regular.woff2') format('woff2');
}

/* 학교안심 둥근미소 */
@font-face {
	font-family:'SchoolSafetyRoundedSmile';
	src:url('https://wwwrod.everland.com/font/HakgyoansimDunggeunmisoTTF-R.woff2') format('woff2');
	font-weight:400;
	font-display:swap;
}
@font-face {
	font-family:'SchoolSafetyRoundedSmile';
	src:url('https://wwwrod.everland.com/font/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
	font-weight:700;
	font-display:swap;
}

/* 에스코어드림 */
@font-face {
	font-family:'Escoredream';
	src:url('https://wwwrod.everland.com/font/S-CoreDream-4Regular.woff') format('woff');
	font-weight:normal;
	font-display:swap;
}
@font-face {
	font-family:'Spoqa Han Sans Neo';
	font-weight:500;
	src:local('Spoqa Han Sans Neo Medium'),
	url('https://wwwrod.everland.com/font/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
}


/* 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; }
body { font-family:'Escoredream', sans-serif; color:#333; text-align:center; word-wrap:break-word; word-break:keep-all; }
ul, ol { list-style-type:none; }
a { box-sizing:border-box; color:#333; 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:#333; font-family:'GmarketSans', sans-serif; cursor:pointer; outline:none; }
figcaption { display:none; }
img { width:100%; vertical-align:top; }
map { cursor:pointer; }
.hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; }
.body-stop { overflow:hidden; }
::-webkit-scrollbar { width:1px; background-color:transparent; -webkit-appearance:none; }
::-webkit-scrollbar:vertical { width:1px; background-color:transparent; }
::-webkit-scrollbar-button { width:0; height:15px; }
::-webkit-scrollbar-button:end:increment { height:50px; }
::-webkit-scrollbar-track { background-color:transparent; }
::-webkit-scrollbar-thumb { background-color:#9da0a1; border-radius:1rem; opacity:.5; }


/* layout */
.wrapper { position:relative; overflow:hidden; }
.wrapper h3 { max-width:36rem; margin:0 auto; }
.wrapper h3 + p { font-size:1.5rem; line-height:1.6; letter-spacing:-.06em; }

.btn-menu { position:fixed; right:1.7rem; top:1.8rem; width:4.6rem; height:4rem; font-size:0; background:url('../img/btn-menu.png') no-repeat center / 100% auto; z-index:6; }
.btn-top { display:none; position:fixed; z-index:8; right:1.8rem; bottom:1.4rem; width:5.5rem; height:5.5rem; background:url('../img/btn-top.png') no-repeat center / 100% auto; color:transparent; font-size:0; text-indent:-9999px; }

#wrapMenu { overflow:hidden; display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:7; width:100%; max-width:720px; height:100%; margin:auto; }
#wrapMenu .menu { position:absolute; top:0; right:0; bottom:0; width:100%; height:100%; background:url('../img/bg-menu.jpg') no-repeat left top / 100% auto; overflow-x:hidden; overflow-y:auto; }
#wrapMenu .menu .logo { width:18.9rem; margin:6.8rem auto 4.5rem; }
#wrapMenu .menu .logo > a { display:block; }
#wrapMenu .menu .btn-menu-close { position:absolute; right:1.7rem; top:1.8rem; width:4.6rem; height:4rem; background:url('../img/btn-menu-close.png') no-repeat center / 100% auto; color:transparent; font-size:0; text-indent:-9999px; z-index:13; }
#wrapMenu .menu .depth { margin:0 2.8rem; padding-bottom:6.4rem; }
#wrapMenu .menu .depth > li { position:relative; z-index:13; background-color:#FFF; border-width:2px; border-style:solid; border-radius:3.4rem; }
#wrapMenu .menu .depth > li ~ li { margin-top:1rem; }
#wrapMenu .menu .depth > li > a { display:flex; align-items:center; justify-content:flex-start; font-family:'SchoolSafetyRoundedSmile'; font-size:2rem; font-weight:700; letter-spacing:-.04em; text-align:left; padding:2.1rem 0 2.1rem 6.6rem; }
#wrapMenu .menu .depth > li > a::before,
#wrapMenu .menu .depth > li > a::after { content:''; position:absolute; background-repeat:no-repeat; background-size:100% auto; }
#wrapMenu .menu .depth > li > a::before { left:1.5rem; width:5.2rem; height:5.2rem; }
#wrapMenu .menu .depth > li > a::after { right:3rem; width:1.4rem; height:0.9rem; transition:.3s; }
#wrapMenu .menu .depth > li:nth-child(1) { border-color:#ff2045; border-radius:4.4rem; }
#wrapMenu .menu .depth > li:nth-child(1) > a { color:#ff2045; }
#wrapMenu .menu .depth > li:nth-child(1) > a::before { background-image:url('../img/icon-menu1.png'); }
#wrapMenu .menu .depth > li:nth-child(1) > a::after { background-image:url('../img/icon-menu1-arrow.png'); }
#wrapMenu .menu .depth > li:nth-child(2) { border-color:#ff5420; }
#wrapMenu .menu .depth > li:nth-child(2) > a { color:#ff3c00; }
#wrapMenu .menu .depth > li:nth-child(2) > a::before { background-image:url('../img/icon-menu2.png'); }
#wrapMenu .menu .depth > li:nth-child(2) > a::after { background-image:url('../img/icon-menu2-arrow.png'); }
#wrapMenu .menu .depth > li:nth-child(3) { border-color:#00ba53; }
#wrapMenu .menu .depth > li:nth-child(3)::before { content:''; position:absolute; left:-1.6rem; top:-.5rem; width:5rem; height:3.5rem; background:url('../img/ico-menu3-new.png') no-repeat center / 100% auto; }
#wrapMenu .menu .depth > li:nth-child(3) > a { color:#009241; }
#wrapMenu .menu .depth > li:nth-child(3) > a::before { background-image:url('../img/icon-menu3.png'); }
#wrapMenu .menu .depth > li:nth-child(3) > a::after { background-image:url('../img/icon-menu3-arrow.png'); }
#wrapMenu .menu .depth > li:nth-child(4) { border-color:#ff1eed; }
#wrapMenu .menu .depth > li:nth-child(4) > a { color:#e500bd; }
#wrapMenu .menu .depth > li:nth-child(4) > a::before { background-image:url('../img/icon-menu4.png'); }
#wrapMenu .menu .depth > li:nth-child(4) > a::after { background-image:url('../img/icon-menu4-arrow.png'); }
#wrapMenu .menu .depth > li.on { border:0; border-radius:3rem; 	background-repeat:no-repeat, no-repeat; background-position:center top, center bottom; background-size:100% auto, 100% auto; }
#wrapMenu .menu .depth > li.on > a { color:#fff; padding-top:2.3rem; padding-left:6.8rem; margin-bottom:-0.4rem; }
#wrapMenu .menu .depth > li.on > a::before { left:1.7rem; }
#wrapMenu .menu .depth > li.on > a::after { background-image:url('../img/icon-menu-arrow-on.png'); }
#wrapMenu .menu .depth > li:nth-child(1).on { background-color:#ff2045; background-image:url('../img/bg-menu1-top.jpg'), url('../img/bg-menu1-btm.jpg'); padding-bottom:6.8rem; }
#wrapMenu .menu .depth > li:nth-child(1).on > a::before { background-image:url('../img/icon-menu1.gif'); }
#wrapMenu .menu .depth > li:nth-child(2).on { background-color:#ff5420; background-image:url('../img/bg-menu2-top.jpg'), url('../img/bg-menu2-btm.jpg'); padding-bottom:9.5rem; }
#wrapMenu .menu .depth > li:nth-child(2).on > a::before { animation:spin 6s linear infinite; }
#wrapMenu .menu .depth > li:nth-child(3).on { background-color:#00ba53; background-image:url('../img/bg-menu3-top.jpg'), url('../img/bg-menu3-btm.jpg'); padding-bottom:9.2rem; }
#wrapMenu .menu .depth > li:nth-child(3).on::before { left:-1.4rem; top:-.3rem; }
#wrapMenu .menu .depth > li:nth-child(3).on > a::before { background-image:url('../img/icon-menu3.gif'); }
#wrapMenu .menu .depth > li:nth-child(4).on { background-color:#ff1eed; background-image:url('../img/bg-menu4-top.jpg'), url('../img/bg-menu4-btm.jpg'); padding-bottom:6.5rem; }
#wrapMenu .menu .depth > li:nth-child(4).on > a::before { background-image:url('../img/icon-menu4.gif'); }
#wrapMenu .menu .sub-depth { display:none; position:relative; background-repeat:repeat; background-size:100% auto; padding-left:6.8rem; }
#wrapMenu .menu .sub-depth li ~ li { margin-top:1.6rem; }
#wrapMenu .menu .sub-depth li > a { position:relative; display:block; font-size:1.6rem; line-height:1.625; text-align:left; letter-spacing:-.02em; color:#fff; padding-left:1rem; text-shadow:0.1rem 0 0.2rem rgba(0, 0, 0, 0.2); z-index:1; }
#wrapMenu .menu .sub-depth li > a::before { content:'·'; position:absolute; left:0; top:0; }


/* main */
#main { position:relative; height:183.334vw; background:url('../img/bg-main.jpg') no-repeat center top / 100% auto; }
#main .title { position:absolute; top:19.17vw; left:0; right:0; z-index:1; opacity:0; animation:title .6s cubic-bezier(.215,.61,.355,1) forwards; }
#main .village { position:relative; height:100%; }
#main .village > img,
#main .village .char img { position:absolute; }
#main .sight { bottom:0; left:0; }
#main .firecracker { top:4.3334vw; left:-4.1667vw; width:69.445vw; height:83.334vw; z-index:1; }
#main .particle { top:89.445vw; left:0; height:55.556vw; z-index:4; }
#main .balloon1 { top:58.334vw; left:2.778vw; width:15.834vw; height:58.056vw; animation:balloon 3.8s ease-in-out infinite alternate; }
#main .balloon2 { top:76.667vw; right:28.889vw; width:6.112vw; height:8.889vw; animation:balloon 4.2s ease-in-out infinite alternate-reverse -1.5s; }
#main .balloon3 { top:55.834vw; right:-1.667vw; width:10.278vw; height:29.445vw; animation:balloon 3.4s ease-in-out infinite alternate -2.3s; }
#main .char .lenny-lara { bottom:22.5vw; left:calc(50% - 50vw + 15.417vw); width:69.445vw; height:46.389vw; z-index:4; opacity:0; transform:translateY(2vw); animation:charFadeUp .75s ease-out .3s forwards; }
#main .char .bagel { bottom:30.833vw; right:calc(50% - 50vw - 3.194vw); width:19.445vw; height:27.223vw; z-index:3; opacity:0; transform:translate(2vw,2vw); animation:charFadeUp .75s ease-out .9s forwards; }
#main .char .jack { bottom:43.611vw; left:calc(50% - 50vw + 4.445vw); width:20vw; height:23.889vw; z-index:3; opacity:0; transform:translate(-2vw,2vw); animation:charFadeUp .75s ease-out 1.5s forwards; }
#main .char .donna { bottom:49.722vw; right:calc(50% - 50vw + 6.667vw); width:17.223vw; height:18.612vw; z-index:2; opacity:0; transform:translateY(2vw); animation:charFadeUp .75s ease-out 2.1s forwards; }
#main .glitter1 { bottom:44.444vw; left:0; width:12.778vw; height:12.778vw; z-index:6; animation:glitter 1.5s infinite; animation-delay:-1.2s; }
#main .glitter2 { bottom:25vw; left:17.222vw; width:9.444vw; height:9.444vw; z-index:6; animation:glitter 1.5s infinite; animation-delay:-1.5s; }
#main .glitter3 { bottom:32.778vw; right:8.889vw; width:16.667vw; height:16.667vw; z-index:6; animation:glitter 1.5s infinite; animation-delay:-2.4s; }
#main .tulips { left:0; bottom:0; z-index:5; }
#main .coach-mark { display:block; position:absolute; bottom:3.8rem; left:50%; transform:translateX(-50%); width:8.3rem; height:8.7rem; background:url('../img/ico-scroll.png') no-repeat center / 100% auto; z-index:5; font-size:0; }


/* links */
#links { position:relative; background:url('../img/bg-links.png') no-repeat center top / 100% auto; margin-top:-6.389vw; padding:12.5vw 0 0; aspect-ratio:360 / 984; z-index:5; }
#links::before, 
#links::after { content:''; position:absolute; right:0; background-repeat:no-repeat; background-size:100% auto; }
#links::before { top:-27.5vw; width:28.056vw; height:51.667vw; background-image:url('../img/obj-links-tulips-top.png'); transform-origin:50% 100%; animation:tulipWind 4.5s ease-in-out infinite; }
#links::after { bottom:-1.945vw; width:100%; height:26.389vw; background-image:url('../img/obj-links-grass.png'); z-index:1; }
#links h2 + p { font-size:1.6rem; line-height:1.56; letter-spacing:-.06em; color:#711f42; margin-top:1.3rem; margin-bottom:-.5rem; }
#links h2 + p > strong { color:#cc0056; }
#links .list { position:relative; margin-top:1.9445vw; }
#links .list li { position:absolute; z-index:2; }
#links .list li a { display:block; position:relative; width:100%; height:100%; }
#links .list li img { position:absolute; right:0; }
#links .list .garden { top:-6.9445vw; left:0; width:100vw; height:65.5556vw; }
#links .list .garden .tulips { animation:tulipWind 4.5s ease-in-out infinite; animation-delay:-1.5s; }
#links .list .garden .pinwheel { top:31.1112vw; right:calc(50% - 50vw + 25vw); width:7.778vw; height:7.778vw; animation:spin 6s linear infinite; }
#links .list .garden .balloons { animation:balloon 3.8s ease-in-out infinite alternate; }
#links .list .entertainment { top:59.4445vw; right:3.6111vw; width:54.4445vw; height:54.7223vw; }
#links .list .entertainment .balloons { animation:balloon 2.8s ease-in-out infinite alternate; }
#links .list .entertainment .tulip { animation:tulipWind 4.5s ease-in-out infinite; animation-delay:-3s; }
#links .list .zootopia { top:62.5vw; left:0; width:47.778vw; height:86.6667vw; }
#links .list .zootopia .giraffe { top:-1.3889vw; opacity:0; transform:translate(-2vw, 5vw); }
#links .list .zootopia.aos-animate .giraffe { animation:zooFadeUp .8s ease-out .3s forwards; }
#links .list .zootopia .tiger { opacity:0; transform:translateY(6vw); }
#links .list .zootopia.aos-animate .tiger { animation:zooFadeUp .8s ease-out .8s forwards; }
#links .list .zootopia .bao { top:9.4445vw; right:0.5556vw; }
#links .list .fnbmd { top:123.3333vw; right:6.1111vw; width:50.556vw; height:51.389vw; }
#links .list .fnbmd .churros { right:2.5vw; width:9.722vw; height:10.556vw; animation:shake 1.6s infinite ease-in-out; }
#links .deco-tulips { position:absolute; bottom:0; left:-11.667vw; width:70vw; height:41.667vw; animation:tulipWind 4.5s ease-in-out infinite; animation-delay:-3s; }


/* content */
.sec { position:relative; width:100%; }
.sec .img-box { position:relative; }
.sec .info-box { position:relative; }
.sec .info-box h4 { position:relative; font-family:'SchoolSafetyRoundedSmile'; font-size:2.9rem; line-height:1.31; letter-spacing:-.04em; }
.sec .info-box h4.new::after { content:''; position:absolute; width:10rem; height:7rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.sec .info-box h4 > .eng { font-family:'Caveat Brush'; font-size:4rem; line-height:1; font-weight:400; letter-spacing:-.04em; }
.sec .info-box h4 > small { font-size:2.5rem; }
.sec .info-box p { position:relative; font-size:1.5rem; font-weight:500; line-height:1.6; letter-spacing:-.04em; margin-top:1.8rem; }
.sec .info-box p + p { margin-top:1rem; }
.sec .list-info { position:relative; display:flex; justify-content:center; font-family:'Spoqa Han Sans Neo'; margin-top:.8rem; padding-top:1.4rem; }
.sec .list-info::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:16.8rem; height:.1rem; background-size:100% auto; }
.sec .list-info > ul li { display:flex; gap:0 1rem; position:relative; padding-left:2.2rem; font-size:1.5rem; line-height:1.4; letter-spacing:-.04em; }
.sec .list-info > ul li::before { content:''; position:absolute; top:.2rem; left:0; width:1.8rem; height:1.8rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.sec .list-info > ul li ~ li { margin-top:.3rem; }
.sec .list-caution { display:flex; justify-content:center; }
.sec .list-caution > ul { margin-top:2.5rem; text-align:left; }
.sec .list-caution > ul li { position:relative; padding-left:.8rem; margin-bottom:.4rem; font-size:1.2rem; letter-spacing:-.36px; line-height:1.4; }
.sec .list-caution > ul li:last-child { margin-bottom:0; }
.sec .list-caution > ul li::before { content:'*'; position:absolute; top:0; left:0; }
.sec .obj-btm { position:absolute; bottom:0; left:0; z-index:2; }


/* 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, .75); transition:.3s; }
.popup.active { display:block; }
.popup .cont { display:flex; flex-direction:column; justify-content:center; gap:1.5rem; align-items:center; width:100%; height:100%; padding-top:8rem; overflow:hidden; }
.popup .cont ul { width:36rem; }
.popup .cont .btn-close { display:block; width:5.2rem; height:5.3rem; margin:0 auto; background:url('../img/btn-popup-close.png') no-repeat center / 100% auto; color:transparent; text-indent:-9999px; }
.popup .item { position:relative; background-repeat:no-repeat; background-size:100% auto; aspect-ratio:360 / 424; padding-top:4rem; }
.popup .item::before, 
.popup .item::after { content:''; position:absolute; background-repeat:no-repeat; background-size:100% auto; }
.popup .item h4 { font-family:'SchoolSafetyRoundedSmile'; font-size:3rem; line-height:1.2; letter-spacing:-0.06em; margin-bottom:1.3rem; }
.popup .item h4 > p { font-family:'Escoredream', sans-serif; display:flex; align-items:center; justify-content:center; color:#ae1b10; font-weight:400; column-gap:.7rem; margin-top:.6rem; }
.popup .item h4 > p::before { content:''; width:1.4rem; height:1.7rem; background:url('../img/ico-mapPop-item3-place.png') no-repeat center / 100% auto; }
.popup .item p { position:relative; font-size:1.7rem; line-height:1.52; letter-spacing:-0.06em; color:#20090d; }
.popup .item .note { position:absolute; bottom:1.9rem; left:50%; transform:translateX(-50%); width:100%;font-size:1.1rem; color:#81656a; letter-spacing:-0.06em; line-height:1.8;text-shadow:0 0 0.4rem rgba(255, 255, 255, 0.8), 0 0 0.8rem rgba(255, 255, 255, 0.8), 0 0 1.2rem rgba(255, 255, 255, 0.8); }
.popup .item1 { background-image:url('../img/bg-mapPop-item1.png'); }
.popup .item1::before { left:calc(50% - 18rem + 1rem); top:-6.8rem; width:6.8rem; height:12.5rem; background-image:url('../img/obj-mapPop-item1-stick.png'); z-index:-1; }
.popup .item1::after { left:calc(50% - 18rem + 1rem); top:-9.2rem; width:6.8rem; height:7.1rem; background-image:url('../img/obj-mapPop-item1-pinwheel.png'); z-index:1; animation:spin 6s linear infinite; }
.popup .item1 h4 { color:#f21a75; }
.popup .item2 { background-image:url('../img/bg-mapPop-item2.png'); }
.popup .item2::before { right:calc(50% - 18rem - .2rem); top:-7.8rem; width:6rem; height:17.3rem; background-image:url('../img/obj-mapPop-item2-top.png'); z-index:1; animation:balloon 3.8s ease-in-out infinite alternate; }
.popup .item2::after { content:none; }
.popup .item2 h4 { color:#f21a3d; }
.popup .item3 { background-image:url('../img/bg-mapPop-item3.png'); }
.popup .item3::before { left:calc(50% - 18rem - 1.5rem); top:-10.2rem; width:18.5rem; height:22rem; background-image:url('../img/obj-mapPop-item3-top.png'); z-index:-1; animation:tulipWind 4.5s ease-in-out infinite; }
.popup .item3::after { content:none; }
.popup .item3 h4 { color:#f2291a; }
.popup .item4 { background-image:url('../img/bg-mapPop-item4.png'); }
.popup .item4::before { left:-.5rem; top:-7.5rem; width:16.7rem; height:11.5rem; background-image:url('../img/obj-mapPop-item4-top.png'); z-index:-1; }
.popup .item4::after { right:calc(50% - 18rem - 6.5rem); top:11rem; width:11.8rem; height:12.1rem; background-image:url('../img/obj-mapPop-item4-btm.png'); animation:tulipWind 4.5s ease-in-out infinite; animation-delay:-3s; }
.popup .item4 h4 { color:#f21ab2; }


/* garden */
#garden { background:url('../img/bg-garden.jpg') no-repeat center top / 100% auto; padding-top:6rem; }
#garden h3 + p { color:#711f2c; margin-top:.8rem; }
#map .cont { position:relative; padding-bottom:18.8rem; }
#map .cont ul { width:100%; max-width:36rem; margin:2.5rem auto 0; background:url('../img/img-garden-map.png') no-repeat center / 100% auto; aspect-ratio:360 / 462; }
#map .cont ul::before { content:''; position:absolute; top:33.4rem;right:calc(50% - 18rem - 3rem); background:url('../img/obj-map-paint.png') no-repeat center / 100% auto; width:7.8rem; height:7.3rem; z-index:2; } 
#map .cont .item { position:absolute; z-index:3; }
#map .cont .item > a { display:block; }
#map .cont .item1 { top:8.7rem; right:calc(50% - 18rem + 11.5rem); width:10.9rem; height:5.8rem; }
#map .cont .item2 { top:23.8rem; right:calc(50% - 18rem + 3.4rem); width:11.5rem; height:5.8rem; }
#map .cont .item3 { top:27.9rem; right:calc(50% - 18rem + 9.6rem); width:14.8rem; height:7.3rem; }
#map .cont .item4 { top:42.7rem; right:calc(50% - 18rem + 12.5rem); width:9.2rem; height:5.7rem; }


/* entertainment */
#entertainment { position:relative; background-size:100% auto, 100% 100%; background-position:center top, center; background-repeat:no-repeat, no-repeat; padding-top:4rem; padding-bottom:2.6rem; transition:background-image .8s ease-out; }
#entertainment h3 { position:relative; z-index:2; }
#entertainment .swiper { max-width:36rem; overflow:visible; margin-top:.7rem; }
#entertainment .control { display:flex; justify-content:center; align-items:center; gap:0 1.7rem; height:1.1rem; margin-top:.3rem; }
#entertainment .swiper-obj { position:absolute; width:100%; background-repeat:no-repeat; background-position:center top; background-size:100% auto; z-index:1; 	opacity:0; visibility:hidden; }
#entertainment .swiper-obj.top { transition:opacity 0.5s ease; }
#entertainment .swiper-obj.btm { transition:opacity 0.5s ease; }
#entertainment .swiper-slide-active .swiper-obj { opacity:1; visibility:visible; transition-delay:0.3s; }
#entertainment .swiper-pagination { position:relative; bottom:auto; top:auto; left:auto; right:auto; width:auto; height:100%; z-index:6; }
#entertainment .swiper-pagination-bullet { width:1.1rem; height:1.1rem; border:2px solid rgba(0, 0, 0, 0.6); background:transparent; margin:0 .4rem; vertical-align:top; opacity:1; }
#entertainment .swiper-pagination-bullet-active { background-color:rgba(0, 0, 0, .6); border-color:transparent; }
#entertainment .swiper-button-prev,
#entertainment .swiper-button-next { position:relative; top:auto; right:auto; left:auto; width:2.4rem; height:0.6rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; margin-top:0; z-index:6; }
#entertainment .swiper-button-prev:after, 
#entertainment .swiper-button-next:after { display:none; }
#entertainment .swiper-button-prev { background-image:url('../img/ico-enter-prev.png'); } 
#entertainment .swiper-button-next { background-image:url('../img/ico-enter-next.png'); }
#entertainment .cont { width:100%; aspect-ratio:360 / 586; padding-top:26.5rem; background-repeat:no-repeat; background-position:top center; background-size:100% auto; }
#entertainment .img-box { position:relative; width:26rem; margin:0 auto; aspect-ratio:260 / 160; }
#entertainment .info-box h4.new::after { top:-6.2rem; left:calc(50% - 18rem + 2rem); }
#entertainment .info-box p { font-size:1.4rem; line-height:1.57; color:#222; }
#entertainment .list-info > ul li::before { background-image:url('../img/ico-enter-list-info.png'); }

#entertainment .item1 .cont { background-image:url('../img/frame-enter-item1.png'); }
#entertainment .item1 .info-box h4 { color:#ba0000; }
#entertainment .item1 .info-box h4.new::after { background-image:url('../img/obj-enter-item1-new.png'); }
#entertainment .item1 .list-info::before { background-image:url('../img/line-enter-item1.png'); }
#entertainment .item1 .list-info > ul li { color:#ed0f0d; }
#entertainment .item1 .list-info > ul li span { color:#ba0000; }
#entertainment .item1 .swiper-obj.top { left:calc(50% - 18rem - 1.2rem); top:-14.4rem; width:6.4rem; height:25.7rem; z-index:-1; }
#entertainment .item1 .swiper-obj.btm { left:calc(50% - 18rem - 3rem); bottom:12rem; width:11.4rem; height:13.8rem; }

#entertainment .item2 .cont { background-image:url('../img/frame-enter-item2.png'); }
#entertainment .item2 .cont::before { content:''; position:absolute; top:.4rem; left:50%; margin-left:-19.1rem; width:38.2rem; height:10.8rem; background:url('../img/frame-enter-item2-curtain.png') no-repeat center / 100% auto; }
#entertainment .item2 .info-box h4 { color:#f6f057; }
#entertainment .item2 .info-box h4.new::after { background-image:url('../img/obj-enter-item2-new.png'); }
#entertainment .item2 .info-box p { color:#fff; }
#entertainment .item2 .list-info::before { background-image:url('../img/line-enter-item2.png'); }
#entertainment .item2 .list-info > ul li { color:#f6f057; }
#entertainment .item2 .list-info > ul li span { color:#d2c793; }
#entertainment .item2 .swiper-obj.top { left:calc(50% - 18rem - 1.3rem); top:-18.3rem; width:8rem; height:16.5rem; }
#entertainment .item2 .swiper-obj.btm { right:calc(50% - 18rem - 3.6rem); bottom:-6.9rem; width:15.6rem; height:17.3rem; }

#entertainment .item3 .cont { background-image:url('../img/frame-enter-item3.png'); }
#entertainment .item3 .info-box h4 { color:#f24a00; }
#entertainment .item3 .list-info::before { background-image:url('../img/line-enter-item3.png'); }
#entertainment .item3 .list-info > ul li { color:#f24a00; }
#entertainment .item3 .list-info > ul li span { color:#d64100; }
#entertainment .item3 .swiper-obj.top { left:calc(50% - 18rem + 1.6rem); top:-15.5rem; width:3.7rem; height:11.6rem; }
#entertainment .item3 .swiper-obj.btm { right:calc(50% - 18rem - 4.2rem); bottom:-2.6rem; width:15.2rem; height:17.3rem; }

#entertainment .item4 .cont { background-image:url('../img/frame-enter-item4.png'); }
#entertainment .item4 .info-box h4 { color:#6d0088; }
#entertainment .item4 .list-info::before { background-image:url('../img/line-enter-item4.png'); }
#entertainment .item4 .list-info > ul li { color:#b700df; }
#entertainment .item4 .list-info > ul li span { color:#6d0088; }
#entertainment .item4 .swiper-obj.top { left:calc(50% - 18rem - 2.4rem); top:-15.1rem; width:12.6rem; height:6.1rem; }
#entertainment .item4 .swiper-obj.btm { right:calc(50% - 18rem - 1.2rem); bottom:-4rem; width:11.4rem; height:15.8rem; }

#entertainment .item5 .cont { background-image:url('../img/frame-enter-item5.png'); }
#entertainment .item5 .info-box h4 { color:#fff; }
#entertainment .item5 .info-box p { color:#fff; }
#entertainment .item5 .list-info::before { background-image:url('../img/line-enter-item5.png'); }
#entertainment .item5 .list-info > ul li { color:#fff7ca; }
#entertainment .item5 .list-info > ul li span { color:#d2c8a0; }
#entertainment .item5 .swiper-obj.top { right:calc(50% - 18rem - .1rem); top:-.8rem; width:9.8rem; height:13.7rem; z-index:-1; }
#entertainment .item5 .swiper-obj.btm { left:calc(50% - 18rem - .8rem); bottom:-5.6rem; width:11.1rem; height:20.8rem; }



/* zootopia */
#zootopia { background:url('../img/bg-zootopia.jpg') no-repeat center top / 100% auto; padding-top:7.5rem; }
#zootopia h3 { padding-bottom:9.6rem; }
#zootopia .cont { max-width:36rem; margin:0 auto; }
#zootopia .info-box { padding-top:2.2rem; }
#zootopia .info-box::before { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#zootopia .info-box h4.new::after { top:-7.5rem; left:calc(50% - 18rem + 2.5rem); }
#zootopia .list-info > ul li::before { background-image:url('../img/ico-zootopia-list-info.png'); }
#wings { background:url('../img/bg-zootopia-wings.png') no-repeat center top / 100% auto; margin-top:-6.2rem; padding-top:14.3rem; padding-bottom:6.7rem; }
#wings .info-box::before { top:-14.4rem; right:calc(50% - 18rem - 3.6rem); background-image:url('../img/obj-zootopia-wings.png'); width:43.4rem; height:21.7rem; }
#wings .info-box h4.new::after { background-image:url('../img/obj-zootopia-wings-new.png'); }
#wings .info-box h4,
#wings .info-box p, 
#wings .list-info > ul li,
#wings .list-info > ul li span { color:#fff; }
#wings .list-info::before { background-image:url('../img/line-zootopia-wings.png'); }
#safari { background-image:url('../img/bg-zootopia-safari-paint.png'), url('../img/bg-zootopia-safari.png'); background-repeat:no-repeat, no-repeat; background-position:center bottom, center top; background-size:100% auto, 100% auto; margin-top:-5.7rem; padding-top:10.2rem; padding-bottom:9rem; }
#safari .info-box::before { top:-12rem; right:calc(50% - 18rem - .6rem); background-image:url('../img/obj-zootopia-safari.png'); width:8.7rem; height:13.2rem; }
#safari .info-box h4 { color:#008e2e; line-height:1.2; }
#safari .info-box h4 > .eng { color:#00650a; }
#safari .info-box h4.new::after { background-image:url('../img/obj-zootopia-safari-new.png'); }
#safari .info-box p { color:#222; margin-top:2.2rem; }
#safari .list-info::before { background-image:url('../img/line-zootopia-safari.png'); }
#safari .list-info > ul li { color:#007c28; }
#safari .list-info > ul li span { color:#004918; }


/* fnbmd */
#fnbmd .sec::before { content:''; position:absolute; background-position:center; background-size:100% auto; background-repeat:no-repeat; }
#fnbmd h4 { font-family:'SchoolSafetyRoundedSmile'; font-size:2rem; }
#fnb { background:url('../img/bg-fnb.jpg') no-repeat center top / 100% auto; padding-top:4rem; padding-bottom:5.7rem; }
#fnb::before { top:11.6rem; right:.4rem; width:6rem; height:5.6rem; background-image:url('../img/obj-fnb-tulip.png'); opacity:0; animation:fadeIn 1s ease 0.8s forwards; }
#fnb .item { position:relative; }
#fnb .list .item1 .menu-box { top:6.6rem; right:calc(50% - 18rem + 11.2rem); }
#fnb .list .item2 { margin-top:-17.8rem; }
#fnb .list .item2 .menu-box { top:6.3rem; right:calc(50% - 18rem + 4.8rem); }
#fnb .list .item3 { margin-top:-7.2rem; }
#fnb .list .item3 .menu-box { top:10.4rem; right:calc(50% - 18rem + 5.2rem); }
#fnb .menu-box { position:absolute; text-align:left; }
#fnb .menu-box h4 { color:#880063; line-height:1.3; letter-spacing:-0.06em; }
#fnb .menu-box p { display:flex; align-items:center; color:#5d1457; column-gap:.5rem; font-size:1.4rem; line-height:1.42; letter-spacing:-.05em; margin-top:.2rem; }
#fnb .menu-box p::before { content:''; width:1.3rem; height:1.5rem; background:url('../img/ico-fnb-place.png') no-repeat center / 100% auto; }
#md { background:url('../img/bg-md.png') no-repeat center top / 100% auto; margin-top:-1.9rem; padding-top:6rem; padding-bottom:15.7rem; z-index:3; }
#md::before { top:10.6rem; right:-6.8rem; width:13.5rem; height:13.7rem; background-image:url('../img/obj-md-tulip.png'); animation:tulipWind 4.5s ease-in-out infinite; }
#md .list { display:flex; flex-wrap:wrap; width:36rem; margin:3rem auto 0; }
#md .list li { width:50%; margin-top:-.1rem; }
#md .list li:nth-child(odd) h4 { padding-left:1.2rem; }
#md .list li:nth-child(even) h4 { padding-right:1.2rem; }
#md .list li h4 { color:#210830; font-weight:400; line-height:1.1; letter-spacing:-.02em; margin-top:.5rem; }
#gift { background:url('../img/bg-gift.jpg') no-repeat center top / 100% auto; padding-top:1.4rem; padding-bottom:16.8rem; }
#gift::before { top:10.6rem; right:-11.1rem; width:17.3rem; height:12.5rem; background-image:url('../img/obj-gift-rose.png'); animation:tulipWind 4.5s ease-in-out infinite; }
#gift h3 > span { display:block; font-family:'SchoolSafetyRoundedSmile'; font-size:2rem; font-weight:400; color:#ffeafc; letter-spacing:-.02em; padding-top:.8rem; }
#gift p { font-size:1.4rem; color:#fff; margin-top:1.8rem; }


@keyframes title {
    0% { opacity:0; transform:scale(0.5); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes balloon {
	0%,100% { transform:translateY(0); }
	50% { transform:translateY(-6px); }
}
@keyframes charFadeUp {
	to { opacity:1; transform:none; }
}
@keyframes zooFadeUp {
	to { opacity:1; transform:translate(0,0); }
}
@keyframes tulipWind {
	0% { transform:translateX(0) rotate(0deg); }
	30% { transform:translateX(4px) rotate(1deg); }
	60% { transform:translateX(7px) rotate(2deg); }
	100% { transform:translateX(0) rotate(0deg); }
}
@keyframes shake {
	0%   { transform:rotate(0deg); }
	50%  { transform:rotate(10deg); }
	100% { transform:rotate(0deg); }
  }
@keyframes spin {
	0% { transform:rotate(0deg); }
	100% { transform:rotate(360deg); }
}
@keyframes fadeIn {
	from { opacity:0; }
	to { opacity:1; }
}
@keyframes glitter {
	0%,
	100% { opacity:1; }
	50% { opacity:.4; }
}


@media (min-width:720px) { 
	html { height:100%; font-size:13px; }
	body::before { content:''; position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background:url('../img/bg-day.jpg') no-repeat center bottom / cover; z-index:-1; }
	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-menu,
	.btn-top { right:calc(50% - 360px + 1.7rem); }

	#wrapMenu .menu .depth > li:nth-child(1).on,
	#wrapMenu .menu .depth > li:nth-child(2).on,
	#wrapMenu .menu .depth > li:nth-child(3).on,
	#wrapMenu .menu .depth > li:nth-child(4).on { padding-bottom:200px; }


	/* main */
	#main { height:1320px; }
	#main .title { top:138px; }
	#main .firecracker { top:30px; left:-30px; width:500px; height:600px; }
	#main .particle { top:644px; height:400px; }
	#main .balloon1 { top:420px; left:20px; width:114px; height:418px; }
	#main .balloon2 { top:552px; right:208px; width:44px; height:64px; }
	#main .balloon3 { top:402px; right:-12px; width:74px; height:212px; }
	#main .char .lenny-lara { bottom:170px; left:calc(50% - 360px + 111px); width:500px; height:334px; }
	#main .char .bagel { bottom:222px; right:calc(50% - 360px - 23px); width:140px; height:196px; }
	#main .char .jack { bottom:314px; left:calc(50% - 360px + 32px); width:144px; height:172px; }
	#main .char .donna { bottom:358px; right:calc(50% - 360px + 48px); width:124px; height:134px; }
	#main .glitter1 { bottom:320px; left:0; width:92px; height:92px; }
	#main .glitter2 { bottom:180px; left:62px; width:68px; height:68px; }
	#main .glitter3 { bottom:236px; right:64px; width:120px; height:120px; }


	/* links */
	#links { margin-top:-46px; padding:90px 0 0; }
	#links::before { top:-198px; width:202px; height:372px }
	#links::after { bottom:-10px; height:190px; }
	#links .list { margin-top:14px; }
	#links .list .garden { top:-50px; width:720px; height:472px; }
	#links .list .garden .pinwheel { top:224px; right:180px; width:56px; height:56px; }
	#links .list .entertainment { top:428px; right:26px; width:392px; height:394px; }
	#links .list .zootopia { top:500px; width:344px; height:624px; }
	#links .list .zootopia .giraffe { top:-10px; }
	#links .list .zootopia .bao { top:68px; right:4px; }
	#links .list .fnbmd { top:888px; right:44px; width:364px; height:370px; }
	#links .list .fnbmd .churros { right:18px; width:70px; height:76px; }
	#links .deco-tulips { left:-84px; width:504px; height:300px; }


	/* content */
	.popup .item1::after { top:-122px; }
	.popup .item4::after { right:-174px; }

	#entertainment { height:100vh; }
	#entertainment .item4 .swiper-obj.top { left:-80px; top:-244px; }

	#zootopia { padding-top:150px; }
	#zootopia h3 { padding-bottom:192px; }
	#wings { margin-top:-62px; padding-top:286px; padding-bottom:134px; }
	#safari { margin-top:-114px; padding-top:204px; padding-bottom:180px; }

	#fnb .list .item1 .menu-box { top:132px; right:260px; }
	#fnb .list .item2 { margin-top:-356px; }
	#fnb .list .item2 .menu-box { top:126px; right:96px; }
	#fnb .list .item3 { margin-top:-144px; }
	#fnb .list .item3 .menu-box { top:208px; right:142px; }

	#md { padding-bottom:314px; }

	#gift { padding-top:28px; padding-bottom:336px; }
}

@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; }
}