/**
* Filename :fairytown.css
* Description :fairytown pick styles
**/
/* ================================== base styles & helper ================================== */
@font-face {
  font-family: 'Diphylleia-Regular';
	src: url('https://wwwrod.everland.com/font/Diphylleia-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
  font-family: 'HakgyoansimGeurimilgiR';
	src: url('https://wwwrod.everland.com/font/HakgyoansimGeurimilgiTTF-R.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
  font-family: 'HakgyoansimWoojuR';
	src: url('https://wwwrod.everland.com/font/HakgyoansimWoojuR.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
  font-family: 'NanumBarunGothic';
	src: url('https://wwwrod.everland.com/font/nanumbarungothic/NanumBarunGothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* 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%; height:100%; scroll-behavior:smooth; font-synthesis:none;
	-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
	-moz-text-size-adjust: none; /*Firefox*/
	-ms-text-size-adjust: none;  /*Ie*/
	-o-text-size-adjust: none; /*old versions of Opera*/
}
html { font-size:10px; }
body { font-family:'NanumBarunGothic', sans-serif; color:#333; text-align:center; }
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; }
button { margin:0; padding:0; box-sizing:border-box; border:0 none; background-color:transparent; vertical-align:middle; color:#333; font-family:'NanumBarunGothic', sans-serif; cursor:pointer; outline:none; }
figcaption { display:none; }
img { width:100%; vertical-align:top; }
.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; }

/* layout */
.wrapper { overflow-x:hidden; overflow-y:hidden; position:relative; scroll-behavior:smooth; background:url('../img/bg-main.jpg') repeat-y center top; background-size:cover; }
.wrapper.green { background-image:url('../img/bg-green.jpg'); }
.wrapper > .logo { position:absolute; top:3rem; left:2.4rem; z-index:4; width:13rem; height:2.9rem; }
.btn-nav { position:fixed; top:2.5rem; right:3rem; z-index:9; width:3.6rem; height:3.7rem; background:url('../img/btn-nav.png') no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; }
.sec .inner-wrap { overflow:hidden; }
.sec h2 { position:relative; z-index:2; font-size:2.8rem; line-height:1.2; letter-spacing:-1.12px; }
.sec h2 span { display:block; }
.sec p { font-weight:500; line-height:1.4; }
.sec em { display:block; font-style:normal; padding-left:1rem; text-indent:-1rem; word-break:keep-all; }
.sec em::before { content:'* '; }
.sec em.none { padding-left:0; text-indent:0; }
.sec em.none::before { display:none; }
.sec em.caution { padding-left:1.5rem; text-indent:-1.5rem; }
.sec em.caution::before { content:'※ '; }
.list-info { display:flex; justify-content:center; }
.list-info > ul { margin:0 auto; text-align:left; }
.list-info > ul li { position:relative; padding-left:1.7rem; font-size:1.4rem; line-height:2.2rem; letter-spacing:-.7px; }
.list-info > ul li::before { content:''; position:absolute; top:.4rem; left:0; width:1rem; height:1.4rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.list-caution { display:flex; justify-content:center; background:url('../img/bg-bar.png') no-repeat center top; background-size:100% auto; }
.list-caution > ul { margin:0 auto; text-align:left; word-wrap:break-word; word-break:keep-all; }
.list-caution > ul li { position:relative; padding-left:1rem; font-size:1.3rem; line-height:1.8rem; letter-spacing:-.65px; }
.list-caution > ul li::before { content:'*'; position:absolute; left:0; top:0; }
.list-caution > ul li + li { margin-top:.4rem; }
.list-dot > li { position:relative; padding-left:.7rem; font-size:1.4rem; line-height:1.4; letter-spacing:-.56px; text-align:left; word-break:keep-all; }
.list-dot > li::before { content:'·'; position:absolute; top:0rem; left:0; }
.stroke { position:relative; z-index:1; text-align:left; }
.stroke::before { position:absolute; z-index:-1; top:0; left:0; content:attr(data-text); -webkit-text-stroke-width:.3rem; -webkit-text-stroke-color:#fff; }
.btn { display:inline-flex; justify-content:center; align-items:center; }

nav { overflow:hidden; display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:999; width:100%; max-width:720px; height:100%; margin:auto; }
nav .nav-wrap { overflow-y:auto; display:flex; flex-wrap:wrap; align-content:space-between; position:relative; width:100%; height:100%; background:url('../img/bg-nav.jpg') repeat-y center top; background-size:100% auto; }
nav .nav-wrap::-webkit-scrollbar { display:none; }
nav .nav-wrap::before { content:''; width:100%; position:absolute; top:0; left:0; width:16.3rem; height:7.4rem; background:url("../img/obj-nav-top.png") no-repeat left top; background-size:100% auto; }
nav .nav-wrap::after { content:''; width:100%; margin-top:-17rem; background:url("../img/obj-nav-bottom.png") no-repeat center bottom; background-size:100% auto; aspect-ratio:360 / 377; }
nav .nav-wrap .nav-wrap-inner { overflow:hidden; position:relative; width:100%; padding-bottom:1rem; }
nav .logo { position:relative; width:20.8rem; margin:5.3rem auto 1.2rem; }
nav .logo::before { content:''; position:absolute; top:-1.1rem; right:calc(50% - 18rem + 8.3rem); width:3.9rem; height:3.5rem; background:url("../img/obj-nav-butterfly1.png") no-repeat center; background-size:100% auto; }
nav .logo::after { content:''; position:absolute; top:8.5rem; left:calc(50% - 18rem + 3.6rem); width:4.9rem; height:5rem; background:url("../img/obj-nav-butterfly2.png") no-repeat center; background-size:100% auto; }
nav .logo > a { display:block; }
nav .btn-close { position:absolute; top:2.5rem; right:3rem; width:3.5rem; height:3.5rem; background:url('../img/btn-nav-close.png') no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; z-index:13; }
nav .depth1 { position:relative; margin:0 3rem; }
nav .depth1 > li { position:relative; z-index:13; margin-bottom:2rem; border:1px solid #532f10; border-radius:2.8rem; background:url("../img/bg-nav-content.jpg") repeat center; background-size:30rem auto; box-shadow:0 .2rem .2rem rgba(117, 86, 36, .15); }
nav .depth1 > li:last-child { margin-bottom:0; }
nav .depth1 > li.map::after { content:''; position:absolute; top:-1.1rem; right:calc(50% - 18rem + 1rem); width:4.6rem; height:4.6rem; background:url("../img/obj-nav-butterfly3.png") no-repeat center; background-size:100% auto; }
nav .depth1 > li > a { display:flex; justify-content:space-between; align-items:center; padding:1rem 3.2rem 1rem 3rem; color:#fff; }
nav .depth1 > li > a::after { content:''; width:1rem; height:1.2rem; margin-left:.6rem; background:url("../img/ico-nav-arrow.png") no-repeat center; background-size:100% auto; }
nav .depth1 > li.map > a { cursor:default; }
nav .depth1 > li.map > a::after { display:none; }
nav .depth1 > li > a > span { display:flex; justify-content:flex-start; align-items:center; }
nav .depth1 > li > a > span::before { content:''; width:3.5rem; height:2.5rem; margin-right:1.2rem; background:url("../img/ico-nav-rose.png") no-repeat center; background-size:100% auto; }
nav .depth1 > li > a > span > img { width:auto; height:3.2rem; }
nav .depth2 { display:block; padding:0 3.5rem 1rem; margin-top:-.3rem; }
nav .depth2 > ul { display:flex; align-items:center; }
nav .depth2 > ul > li { width:50%; }
nav .depth2 > ul > li > a { display:flex; justify-content:flex-start; align-items:center; color:#854e1c; font-family:'HakgyoansimWoojuR'; font-size:1.8rem; line-height:2.8rem; letter-spacing:-.9px; }
nav .depth2 > ul > li > a::before { content:''; width:.3rem; height:.3rem; margin-right:.5rem; border-radius:50%; background-color:#854e1c; }
nav .depth2 > ul > li > a::after { content:''; width:1rem; height:1.2rem; margin-left:1.5rem; background:url("../img/ico-nav-arrow.png") no-repeat center; background-size:100% auto; }

/* tab */
.tab { position:relative; }
.tab .nav { display:flex; justify-content:center; align-items:center; }
.tab .nav li > a { display:block; color:rgba(0, 0, 0, .5); }
.tab .nav li.on > a { color:#000; }
.tab .content > li { display:none; }
.tab .content > li.on { display:block; }

/* swiper */
.swiper-button-prev,
.swiper-button-next { top:auto; }
.swiper-button-prev::after,
.swiper-button-next::after { display:none; }
.swiper-button-prev { left:0; } 
.swiper-button-next { right:0; }
.swiper-pagination-bullets.swiper-pagination-horizontal { display:flex; justify-content:center; align-items:center; bottom:0; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width:auto; height:auto; margin:0; border-radius:0; background:transparent; opacity:1; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { opacity:1; }

#intro { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; height:100dvh; min-height:60rem; background:url("../img/bg-intro.jpg") no-repeat center; background-size:cover; }
#intro h1 { font-family:'Diphylleia-Regular'; font-size:2rem; line-height:2.6rem; letter-spacing:-.5px; }
#intro .content { position:relative; z-index:2; margin:1.9rem auto 3.8rem; padding-bottom:.8rem; }
#intro .drop { background:url("../img/bg-intro-visual-off.png") no-repeat center; background-size:100% auto; aspect-ratio:324 / 325; }
#intro .drop.ui-droppable-active,
#intro .drop.on { background-image:url("../img/bg-intro-visual-on.png"); }
#intro .drag { display:flex; justify-content:center; align-items:center; margin-top:.8rem; }
#intro .drag::before,
#intro .drag::after { content:''; width:4.4rem; height:.5rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#intro .drag::before { margin-right:1.2rem; background-image:url("../img/obj-intro-left.png"); }
#intro .drag::after { margin-left:1.2rem; background-image:url("../img/obj-intro-right.png"); }
#intro .drag .key { display:inline-block; animation:key 1.2s ease-out 0s infinite forwards, updown 1.5s ease-in-out 0s infinite forwards; }
#intro .drag .key img { width:16.8rem; }
#intro .drag .ui-draggable-handle img { transition:.3s; }
#intro .drag .ui-draggable-dragging img { transform:scale(1.2); }
#intro .logo { position:absolute; right:0; bottom:3.8rem; left:0; z-index:1; margin:0 auto; }
#intro .logo img { width:auto; height:4.2rem; }
#intro .animation { display:block; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; }
#intro .animation.on { background-image:url("../img/img-intro-light1.png"); transform:scale(0); animation:light 1.5s ease 0s 1 forwards; }
@keyframes key {
	0% { opacity:1; }
	50% { opacity:.75; }
	100% { opacity:1; }
}
@keyframes updown {
	0% { transform:translateY(0rem); }
	50% { transform:translateY(.5rem) }
	100% { transform:translateY(0rem) }
}
@keyframes light {
	0% { opacity:0; transform:scale(0); }
	100% { opacity:1; transform:scale(5); }
}

#main { position:relative; width:100%; height:60rem; background:url("../img/bg-main-visual1.jpg") no-repeat center top; background-size:cover; opacity:.3; animation:main 3s ease-out 0s 1 forwards; }
#main .obj { position:absolute; }
#main .obj.garden { right:0; bottom:0; left:0; margin:0 auto; }
#main .obj.balloon1 { top:1.8rem; left:calc(50% - 18rem + 1rem); width:7.1rem; opacity:0; animation:balloon1 2s ease .6s 1 forwards, updown1 4s linear 0s infinite forwards; }
#main .obj.balloon2 { top:16.7rem; right:calc(50% - 18rem + 1rem); width:5.1rem; opacity:0; animation:balloon2 1.8s ease-out 1.2s 1 forwards, updown2 3.5s ease-in-out 0s infinite forwards; }
#main .obj.balloon3 { top:1rem; left:calc(50% - 18rem + 9rem); width:3.6rem; opacity:0; animation:balloon3 2s ease-out 1.5s 1 forwards, updown3 4s linear 0s infinite forwards; }
#main .obj.butterfly1 { top:40.6rem; left:calc(50% - 18rem - 12.8rem); width:4.9rem; transform:scale(1.8) rotateZ(-20deg); animation:butterfly1 2s ease-in-out 2.4s 1 forwards; }
/* #main .obj.butterfly2 { right:calc(50% - 18rem + 14.2rem); bottom:12.3rem; width:2.8rem; } */
#main .obj.butterfly3 { right:calc(50% - 18rem - 5rem); bottom:7.7rem; width:5.4rem; animation:butterfly3 1.6s ease-in-out 1s 1 forwards; }
#main .title { position:absolute; top:5.2rem; right:0; left:0; margin:0 auto; opacity:0; transform:translateY(-1rem); animation:title 1.8s ease-out 0s 1 forwards; }
#main .title img { width:26.4rem; }
#main .title .date { position:absolute; bottom:2.6rem; left:50%; color:#4b2707; font-size:1.2rem; line-height:1.2rem; letter-spacing:-1.2px; transform:translateX(-50%); }
@keyframes main {
	0% { opacity:.1; }
	100% { opacity:1; }
}
@keyframes title {
	0% { transform:translateY(4rem); opacity:0; }
	100% { transform:translateY(0rem); opacity:1; }
}
@keyframes balloon1 {
	0% { top:-10rem; opacity:0; }
	100% { top:1.8rem; opacity:1; }
}
@keyframes updown1 {
	0% { transform:translateY(.5rem); }
	50% { transform:translateY(0); }
	100% { transform:translateY(.5rem); }
}
@keyframes balloon2 {
	0% { top:26.7rem; opacity:0; }
	100% { top:16.7rem; opacity:1; }
}
@keyframes updown2 {
	0% { transform:translateY(-.3rem); }
	50% { transform:translateY(0); }
	100% { transform:translateY(-.3rem); }
}
@keyframes balloon3 {
	0% { top:-6rem; opacity:0; }
	100% { top:1rem; opacity:1; }
}
@keyframes updown3 {
	0% { transform:translateY(-.4rem); }
	50% { transform:translateY(0); }
	100% { transform:translateY(-.4rem); }
}
@keyframes butterfly1 {
	0% { top:37.4rem; left:calc(50% - 18rem - 7.8rem); transform:scale(1.6) rotateZ(-40deg); }
	50% { left:calc(50% - 18rem + 5rem); }
	100% { top:27.4rem; left:calc(50% - 18rem + 6.2rem); transform:scale(1) rotateZ(0deg); }
}
@keyframes butterfly3 {
	0% { right:calc(50% - 18rem - 5rem); bottom:7.7rem; transform:scale(.5) rotateZ(-30deg); }
	100% { right:calc(50% - 18rem + 2.6rem); bottom:1.2rem; transform:scale(1) rotateZ(0deg); }
}

#story { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; position:relative; z-index:2; padding-top:5rem; background:url("../img/bg-story.jpg") no-repeat center top; background-size:cover; aspect-ratio:360 / 708; }
#story::before { content:""; position:absolute; top:3.4rem; left:calc(50% - 18rem + 5.8rem); width:4.4rem; height:4.3rem; background:url("../img/obj-story-butterfly1.png") no-repeat center; background-size:100% auto; }
#story::after { content:""; position:absolute; top:48rem; right:calc(50% - 18rem + 3.1rem); width:6.2rem; height:6rem; background:url("../img/obj-story-butterfly2.png") no-repeat center; background-size:100% auto; }
#story .obj { position:absolute; z-index:3; }
#story .obj.rose1 { top:3.5rem; right:0; width:9rem; }
#story .obj.rose2 { top:21.8rem; left:0; width:7.3rem; }
#story .obj.rose3 { bottom:-4.2rem; left:0; width:10.3rem; }
#story h2 img { width:14.1rem; }
#story .img { position:relative; width:100%; max-width:29rem; margin-top:3rem; }
#story .img::before { content:""; position:absolute; top:-2.7rem; left:-1.5rem; z-index:1; width:8.6rem; height:5.8rem; background:url("../img/obj-story-img1.png") no-repeat center; background-size:100% auto; }
#story .img::after { content:""; position:absolute; right:-1.5rem; bottom:-2rem; z-index:1; width:8.4rem; height:5.8rem; background:url("../img/obj-story-img2.png") no-repeat center; background-size:100% auto; }
#story .img .con { overflow:hidden; position:relative; z-index:2; width:100%; margin:0 auto; border-radius:1rem; box-shadow:0 0 .5rem 0 rgba(0, 0, 0, .05); }
#story .img .con iframe { width:100%; height:100%; aspect-ratio:16 / 9; }
#story .txt { margin-top:2rem; opacity:0; }
#story .txt p { color:#3c3934; font-size:1.5em; line-height:2.1rem; letter-spacing:-.75px; }
#story .txt p + p { margin-top:2rem; }
#story .txt.on { animation:opacity 1s linear 0s 1 forwards; }
@keyframes opacity {
	0% { opacity:0; }
	100% { opacity:1; }
}

#map { position:relative; padding-top:9rem; padding-bottom:2rem; background:url("../img/bg-map.jpg") no-repeat center top; background-size:cover; aspect-ratio:360 / 780; }
#map::before { content:''; position:absolute; top:5.5rem; right:0; z-index:2; width:8.4rem; height:14rem; background:url("../img/obj-map-top.png") no-repeat center left; background-size:100% auto; }
#map::after { content:''; position:absolute; right:0; bottom:0; width:19.1rem; height:8.6rem; background:url("../img/obj-map-bottom.png") no-repeat bottom right; background-size:100% auto; }
#map h2 { position:relative; }
#map h2 img { width:13.5rem; }
#map h2::before { content:''; position:absolute; top:-1.4rem; left:calc(50% - 18rem + 5.8rem); width:4.2rem; height:4.2rem; background:url("../img/obj-map-butterfly.png") no-repeat center; background-size:100% auto; }
#map .tab { margin:3.6rem auto 0; }
#map .tab .nav { gap:1.1rem; }
#map .tab .nav li { position:relative; width:12rem; height:4.7rem; }
#map .tab .nav li::before,
#map .tab .nav li::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#map .tab .nav li a { display:flex; justify-content:center; align-items:center; position:relative; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:100% auto; font-family:'HakgyoansimWoojuR'; font-size:1.9rem; line-height:1; letter-spacing:-.95px; }
#map .tab .nav li.all a { background-image:url("../img/bg-tab-nav-all-off.png"); color:#cca2a2; }
#map .tab .nav li.rose a { background-image:url("../img/bg-tab-nav-rose-off.png"); color:#e0a3b4; }
#map .tab .nav li.on a { color:#FFF; }
#map .tab .nav li.all.on::before { top:-1.3rem; right:.5rem; width:3rem; height:3.6rem; background-image:url("../img/obj-map-btn-all-leaf.png"); }
#map .tab .nav li.all.on::after { bottom:-.6rem; left:-.5rem; width:2.7rem; height:2.6rem; background-image:url("../img/obj-map-btn-all-rose.png"); }
#map .tab .nav li.rose.on::before { top:0rem; left:-.5rem; z-index:2; width:2.9rem; height:3.4rem; background-image:url("../img/obj-map-btn-rose-rose1.png"); }
#map .tab .nav li.rose.on::after { right:-.6rem; bottom:-1rem; width:3.1rem; height:3.4rem; background-image:url("../img/obj-map-btn-rose-rose2.png"); }
#map .tab .nav li.all.on a { background-image:url("../img/bg-tab-nav-all-on.png"); }
#map .tab .nav li.rose.on a { background-image:url("../img/bg-tab-nav-rose-on.png"); }
#map .tab .content { margin-top:2.7rem; }
#map .tab .content li > .img { position:relative; max-width:28.1rem; margin:0 auto; }
#map .tab .content li > .img .obj-wrap .obj { position:absolute; }
#map .tab .content li > .img .btn-wrap > a { position:absolute; }
#map .tab .content li > .img .btn-wrap > a::before { content:''; position:absolute; top:-1.4rem; left:50%; width:1.3rem; height:1.4rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; transform:translateX(-50%); }
#map .tab .content li.all > .img .obj-wrap .dona { top:18.9rem; left:calc(50% - 14rem + 6rem); width:5.9rem; }
#map .tab .content li.all > .img .btn-wrap > a { display:flex; justify-content:center; align-items:center; padding:.5rem 1rem; border:1px solid #a42f2e; border-radius:1.5rem; background:url("../img/bg-map-btn-all.png") repeat center; background-size:auto 2.7rem; color:#911d1d; font-family:'HakgyoansimWoojuR'; font-size:1.5rem; letter-spacing:-.75px; box-shadow:0 2px 1px rgba(0, 0, 0, .2); }
#map .tab .content li.all > .img .btn-wrap > a::before { background-image:url("../img/obj-map-btn-all-pin.png"); }
#map .tab .content li.all > .img .btn-wrap > a::after { content:'>'; display:flex; justify-content:center; align-items:center; width:1.7rem; height:1.7rem; margin-left:.5rem; border-radius:50%; background-color:#cf5352; color:#fff7f7; font-family:'HakgyoansimGeurimilgiR'; font-size:1.2rem; }
#map .tab .content li.all > .img .btn-wrap .item1 { top:37.3rem; left:calc(50% - 14rem + 14.5rem); }
#map .tab .content li.all > .img .btn-wrap .item2 { top:24.9rem; left:calc(50% - 14rem + 6rem); }
#map .tab .content li.all > .img .btn-wrap .item3 { top:32.4rem; left:calc(50% - 14rem + 7.8rem); }
#map .tab .content li.all > .img .btn-wrap .item4 { top:14.4rem; left:calc(50% - 14rem + 7.6rem); }
#map .tab .content li.all > .img .btn-wrap .item5 { top:8.7rem; left:calc(50% - 14rem + 7.4rem); }
#map .tab .content li.all > .img .btn-wrap .item6 { top:7.3rem; left:calc(50% - 14rem + 8.3rem); }
#map .tab .content li.all > .img .btn-wrap .item1 .leaf1 { top:-1.2rem; left:-2.4rem; width:3.7rem; }
#map .tab .content li.all > .img .btn-wrap .item1 .leaf2 { right:-2.9rem; bottom:-1.4rem; width:3.8rem; }
#map .tab .content li.all > .img .btn-wrap .item3 .flamingo { top:-5.6rem; right:-1.2rem; z-index:1; width:4.9rem; }
#map .tab .content li.all > .img .btn-wrap .item4 .leaf { top:-1.1rem; left:.8rem; width:1.4rem; }
#map .tab .content li.all > .img .btn-wrap .item6 .leaf1 { top:-1rem; left:-1.1rem; width:2.8rem; }
#map .tab .content li.all > .img .btn-wrap .item6 .leaf2 { right:-.3rem; bottom:-.5rem; width:1.3rem; }
#map .tab .content li.rose > .img .btn-wrap > a:not(.item5) { width:12.5rem; height:3.8rem; background:url("../img/bg-map-btn-rose.png") no-repeat center; background-size:100% auto; }
#map .tab .content li.rose > .img .btn-wrap > a::before { background-image:url("../img/obj-map-btn-rose-pin.png"); }
#map .tab .content li.rose > .img .btn-wrap > a.item5::before { top:-.2rem; background-image:url("../img/obj-map-btn-rose-pin-blue.png"); }
#map .tab .content li.rose > .img .btn-wrap > a > span { display:flex; justify-content:center; align-items:center; width:100%; height:3.5rem; color:#b7264d; font-size:1.5rem; font-family:'HakgyoansimWoojuR'; letter-spacing:-.75px; }
#map .tab .content li.rose > .img .btn-wrap > a.item5 > span { color:#45a7e6; }
#map .tab .content li.rose > .img .btn-wrap > a:not(.item5) > span::after { content:'>'; display:flex; justify-content:center; align-items:center; width:1.7rem; height:1.7rem; margin-left:.9rem; border-radius:50%; background-color:#e36184; color:#fff7f7; font-family:'HakgyoansimGeurimilgiR'; font-size:1.2rem; }
#map .tab .content li.rose > .img .btn-wrap .item1 { top:19.2rem; left:calc(50% - 14rem + .6rem); }
#map .tab .content li.rose > .img .btn-wrap .item2 { top:34.7rem; left:calc(50% - 14rem + .6rem); }
#map .tab .content li.rose > .img .btn-wrap .item3 { top:19.2rem; right:calc(50% - 14rem + .7rem); }
#map .tab .content li.rose > .img .btn-wrap .item4 { top:34.7rem; right:calc(50% - 14rem + .7rem); }
#map .tab .content li.rose > .img .btn-wrap .item5 { top:25.1rem; left:50%; transform:translateX(-50%); }
#map .tab .content li.rose > .img .btn-wrap .item6 { top:7.3rem; left:50%; transform:translateX(-50%); }
#map .tab .content li.rose > .img .btn-wrap > .item6::after { content:''; position:absolute; top:-.2rem; right:-1.8rem; width:4.7rem; height:4.8rem; background:url("../img/obj-map-rose-item1-key.png") no-repeat center; background-size:100% auto; }
#map .tab .content li.rose > .img .btn-wrap > .item6 > span::before { content:''; position:absolute; top:1.4rem; left:-1.2rem; width:3.8rem; height:3.1rem; background:url("../img/obj-map-rose-item1-rose.png") no-repeat center; background-size:100% auto; }

#product { position:relative; background:url("../img/bg-product.jpg") no-repeat center top; background-size:cover; }
#product::before { content:''; position:absolute; top:calc(50% + 1.4rem); left:calc(50% - 18rem + 1.7rem); width:6.8rem; height:8.9rem; background:url("../img/obj-product.png") no-repeat center; background-size:100% auto; }
#md { position:relative; padding:8rem 0 4rem; }
#md::before { content:''; position:absolute; top:0; left:0; width:16.4rem; height:4.9rem; background:url("../img/obj-md-rose1.png") left top; background-size:100% auto; }
#md::after { content:''; position:absolute; top:3.6rem; right:0; width:6.4rem; height:10.7rem; background:url("../img/obj-md-rose2.png") right center; background-size:100% auto; }
#md h2 img { width:14.4rem; }
#md .content { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; max-width:32rem; margin:3.6rem auto 0; background:url("../img/bg-md-content.jpg") no-repeat center; background-size:cover; aspect-ratio:320 / 512; box-shadow:0 .1rem .5rem rgba(130, 140, 88, .4); }
#md .content h3 { color:#828c58; font-family:'HakgyoansimWoojuR'; font-size:1.9rem; line-height:2.4rem; letter-spacing:-.95px; }
#md .content .img { margin-top:.5rem; }
#md .content p { margin-top:.8rem; color:#828c58; font-family:'HakgyoansimWoojuR'; font-size:1.5rem; line-height:2.1rem; letter-spacing:-.35px; }
#md .content p > strong { display:flex; justify-content:center; align-items:center; width:9.7rem; height:2.2rem; margin:0 auto; background:url("../img/bg-md-coming-soon.png") no-repeat center; background-size:100% auto; font-weight:normal; }
#md .content .btn-wrap { margin-top:1.3rem; }
#md .content .btn-wrap > a { display:flex; justify-content:center; align-items:center; width:22.7rem; height:4.4rem; border-radius:2.2rem; background-color:#828c58; color:#fff; font-size:1.5rem; letter-spacing:-1.5px; }
#md .content .btn-wrap > a::after { content:''; width:1.2rem; height:1.3rem; margin-left:2rem; background:url("../img/ico-md-btn-arrow.png") no-repeat center; background-size:100% auto; }
#md .content .btn-wrap > em { margin-top:.7rem; color:#828c58; font-size:1.3rem; letter-spacing:-.65px; }
#food { position:relative; padding:4rem 0 8rem; }
#food::before { content:''; position:absolute; bottom:0; left:0; z-index:2; width:22.7rem; height:11.4rem; background:url("../img/obj-food-rose1.png") no-repeat left bottom; background-size:100% auto;}
#food::after { content:''; position:absolute; right:0; bottom:4.8rem; width:6.2rem; height:10.6rem; background:url("../img/obj-food-rose2.png") no-repeat right center; background-size:100% auto;}
#food h2::after { content:''; position:absolute; top:-3.5rem; right:calc(50% - 18rem + 5.9rem); width:3.3rem; height:2.3rem; background:url("../img/obj-food-leaf.png") no-repeat center; background-size:100% auto; }
#food h2 img { width:14.9rem; }
#food .obj-wrap .obj { position:absolute; }
#food .obj-wrap .rose { top:10.2rem; left:calc(50% - 18rem + 3.9rem); z-index:2; width:9.9rem; }
#food .obj-wrap .macaron { top:7.6rem; right:calc(50% - 18rem + 1.3rem); width:9.9rem; }
#food .content { overflow:hidden; position:relative; width:100%; max-width:32rem; height:44.1rem; margin:3.9rem auto 0; border:1px solid rgba(87, 65, 33, .8); border-radius:16rem 16rem 0 0; background:url("../img/bg-food-content1.jpg") no-repeat center; background-size:cover; box-shadow:0 .1rem .5rem rgba(129, 87, 26, .3); }
#food .content::before { content:''; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; max-width:31rem; height:43.1rem; margin:auto; border-radius:16rem 16rem 0 0; background:url("../img/bg-food-content2.jpg") no-repeat center; background-size:cover; }
#food .content::after { content:''; position:absolute; bottom:9.5rem; left:calc(50% - 18rem + 2.5rem); width:6.1rem; height:5.2rem; background:url("../img/obj-food-content-dona.png") no-repeat center; background-size:100% auto; }
#food .content .inner-wrap { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width:100%; height:100%; }
#food .content .inner-wrap p { margin-top:.8rem; color:#81571a; font-family:'HakgyoansimWoojuR'; font-size:1.9rem; line-height:2.4rem; letter-spacing:-.95px; }
#food .content .inner-wrap .list-info { margin-top:1.8rem; }
#food .content .inner-wrap .list-info ul li { color:#81571a; }
#food .content .inner-wrap .list-info ul li.place::before { background-image:url("../img/ico-food-place.png"); }
#food .content .inner-wrap .list-caution { margin-top:.4rem; }
#food .content .inner-wrap .list-caution ul li { color:#81571a; }
#food .content .inner-wrap .list-caution ul li .tit { position:relative; padding-right:.9rem; }
#food .content .inner-wrap .list-caution ul li .tit::after { content:''; position:absolute; top:50%; right:.2rem; width:.1rem; height:.6rem; background-color:rgba(129, 87, 26, .5); transform:translateY(-50%); }

#store { position:relative; padding-top:2.5rem; padding-bottom:3rem; background:url("../img/bg-store.jpg") repeat-y center top; background-size:100% auto; }
#store::before { content:''; position:absolute; top:-2rem; right:0; width:9.8rem; height:13.3rem; background:url("../img/obj-store-rose1.png") no-repeat right center; background-size:100% auto; }
#store::after { content:''; position:absolute; bottom:0; left:0; width:17.8rem; height:7.4rem; background:url("../img/obj-store-rose2.png") no-repeat left bottom; background-size:100% auto; }
#store .content { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; max-width:32rem; margin:0 auto; background:url("../img/bg-store-content.png") no-repeat center; background-size:100% auto; box-shadow:0 .1rem .5rem rgba(129, 87, 26, .3); aspect-ratio:320 / 330; }
#store .content h2 img { width:16.9rem; }
#store .content p { margin-top:2.5rem; color:#5d682c; font-family:'HakgyoansimWoojuR'; font-size:2rem; line-height:2.5rem; letter-spacing:-1px; }
#store .content .list-info { margin-top:2.4rem; }
#store .content .list-info ul li { color:#5d682c; letter-spacing:-1.4px; }
#store .content .list-info ul li.date::before { background-image:url("../img/ico-store-date.png"); }
#store .content .list-info ul li.place::before { background-image:url("../img/ico-store-place.png"); }
#store .content .list-caution { margin-top:1.2rem; }
#store .content .list-caution ul li { color:#7d8a44; }

#ecubeschool { position:relative; padding:2.4rem 0 2.2rem; background:url("../img/bg-ecubeshool.jpg") no-repeat center top; background-size:100% auto; }
#ecubeschool::before { content:''; position:absolute; top:0; right:0; width:8.5rem; height:11.4rem; background:url("../img/obj-ecubeschool-rose1.png") no-repeat center; background-size:100% auto; }
#ecubeschool::after { content:''; position:absolute; bottom:0; left:0; width:8.7rem; height:4.5rem; background:url("../img/obj-ecubeschool-rose2.png") no-repeat center; background-size:100% auto; }
#ecubeschool .obj { position:absolute; z-index:3; }
#ecubeschool .obj.leaf1 { right:0; bottom:0; width:9.9rem; }
#ecubeschool .obj.leaf2 { bottom:6.2rem; left:0; width:2.5rem; }
#ecubeschool .obj.leaf3 { top:2.7rem; left:calc(50% - 18rem + 8.5rem); width:3.1rem; }
#ecubeschool .obj.leaf4 { top:11.6rem; right:calc(50% - 18rem + 7.6rem); width:1.8rem; }
#ecubeschool .content { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; z-index:2; width:100%; max-width:36rem; margin:0 auto; background:url("../img/bg-ecubeschool-content.png") no-repeat center; background-size:100% auto; aspect-ratio:360 / 340; }
#ecubeschool .content h2 img { width:14rem; }
#ecubeschool .content p { margin-top:2.4rem; color:#b12d2d; font-family:'HakgyoansimWoojuR'; font-size:2.5rem; line-height:3rem; letter-spacing:-1.25px; }
#ecubeschool .content p small { display:block; margin-top:1rem; font-family:'NanumBarunGothic'; font-size:1.4rem; line-height:2.2rem; letter-spacing:-.7px; }
#ecubeschool .content .btn-wrap { margin-top:2.5rem; }
#ecubeschool .content .btn-wrap .btn { display:flex; justify-content:center; align-items:center; width:18.1rem; height:4.3rem; border-radius:2.2rem; background:url("../img/bg-ecubeschool-btn.jpg") repeat left top; background-size:100% auto; color:#fff; font-size:1.5rem; letter-spacing:-.75px; }
#ecubeschool .content .btn-wrap .btn::after { content:''; width:1.2rem; height:1.3rem; margin-left:2rem; background:url("../img/ico-ecubeshool-btn-arrow.png") no-repeat center; background-size:100% auto; }

/* 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, .6); transition:.3s; }
.popup .content-wrap { position:relative; width:100%; max-width:36rem; }
.popup .content-wrap .swiper-slide { width:100%; }
.popup .content-wrap .swiper .swiper-slide .box { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; padding:0 2rem; margin:0 auto; }
.popup .content-wrap .swiper .swiper-slide .con { position:relative; width:100%; background-repeat:no-repeat; background-position:bottom center; background-size:100% auto; }
.popup .content-wrap .swiper .swiper-slide .con::before,
.popup .content-wrap .swiper .swiper-slide .con::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup .content-wrap .swiper .swiper-slide .con h2 { position:relative; font-family:'HakgyoansimWoojuR'; font-size:3rem; letter-spacing:-1.5px; }
.popup .content-wrap .swiper .swiper-slide .con p { margin-top:1.5rem; font-size:1.4rem; line-height:2.1rem; letter-spacing:-.7px; }
.popup .content-wrap .swiper .swiper-slide .con .list-caution { margin:1rem auto 0; }
.popup .content-wrap .swiper .swiper-slide .con .list-caution > ul li { font-size:1.3rem; line-height:2.4rem; letter-spacing:-1.3px; }
.popup .content-wrap .swiper-button-prev,
.popup .content-wrap .swiper-button-next { bottom:-2.6rem; width:2.4rem; height:.6rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup .content-wrap .swiper-button-prev { left:calc(50% - 18rem + 4rem); background-image:url("../img/btn-popup-prev.png"); }
.popup .content-wrap .swiper-button-next { right:calc(50% - 18rem + 4rem); background-image:url("../img/btn-popup-next.png"); }
.popup .content-wrap .swiper-pagination-bullets.swiper-pagination-horizontal { bottom:-3rem; }
.popup .content-wrap .swiper-pagination-bullet { display:flex; justify-content:center; align-items:center; width:auto; height:auto; }
.popup .content-wrap .swiper-pagination-bullet::before { content:''; width:1.3rem; height:1.1rem; background:url("../img/btn-popup-bullet-off.png") no-repeat center; background-size:100% auto; }
.popup .content-wrap .swiper-pagination-bullet::after { content:''; width:.7rem; height:.1rem; margin:0; background-color:rgba(238, 238, 238, .4); }
.popup .content-wrap .swiper-pagination-bullet-active::before { width:1.9rem; height:1.5rem; background-image:url("../img/btn-popup-bullet-on.png"); }
.popup .content-wrap .swiper-pagination-bullet:last-of-type::after { display:none; }
.popup .content-wrap .btn.close { position:absolute; top:-4.9rem; right:calc(50% - 18rem + 2rem); z-index:2; width:3.5rem; height:3.5rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:transparent; font-size:0; text-indent:-999rem; }
.popup.on { display:flex; }
/* 전체 지도 */
#mapAll .content-wrap .swiper .swiper-slide .con { padding:2.4rem 0 4rem; }
#mapAll .content-wrap .swiper .swiper-slide .con h2 { color:#9d1d1d; }
#mapAll .content-wrap .swiper .swiper-slide .con p { color:#cb5151; }
#mapAll .content-wrap .swiper .swiper-slide .con .list-caution > ul li { color:#e47f7f; }
#mapAll .content-wrap .swiper .item1 .con { background-image:url("../img/bg-map-all-item1.png"); }
#mapAll .content-wrap .swiper .item2 .con { background-image:url("../img/bg-map-all-item2.png"); }
#mapAll .content-wrap .swiper .item3 .con { background-image:url("../img/bg-map-all-item3.png"); }
#mapAll .content-wrap .swiper .item4 .con { background-image:url("../img/bg-map-all-item4.png"); }
#mapAll .content-wrap .swiper .item5 .con { padding-bottom:5.4rem; background-image:url("../img/bg-map-all-item5.png"); background-position:bottom 1.4rem center; }
#mapAll .content-wrap .swiper .item6 .con { background-image:url("../img/bg-map-all-item6.png"); }
#mapAll .content-wrap .swiper .item1 .con::before { top:.9rem; left:calc(50% - 18rem + 4.2rem); width:6.7rem; height:5.3rem; background-image:url("../img/obj-popup-map-all-item1-coffee.png"); }
#mapAll .content-wrap .swiper .item1 .con::after { top:10rem; right:calc(50% - 18rem + 3.8rem); width:3.5rem; height:6.4rem; background-image:url("../img/obj-popup-map-all-item1-icecream.png"); }
#mapAll .content-wrap .swiper .item1 .con h2::after { content:''; position:absolute; right:calc(50% - 18rem + 11.6rem); bottom:0; width:1.8rem; height:1.7rem; background:url("../img/obj-popup-map-all-item1-leaf.png") no-repeat center; background-size:100% auto; }
#mapAll .content-wrap .swiper .item2 .con::before { top:3.6rem; left:calc(50% - 18rem + 4rem); width:2.3rem; height:2.4rem; background-image:url("../img/obj-popup-map-all-item2-leaf.png"); }
#mapAll .content-wrap .swiper .item2 .con::after { top:-5.2rem; right:calc(50% - 18rem + 1.2rem); width:8.1rem; height:7.8rem; background-image:url("../img/obj-popup-map-all-item2-butterfly.png"); }
#mapAll .content-wrap .swiper .item3 .con::before { top:1.5rem; right:calc(50% - 18rem + 4.7rem); width:2.6rem; height:2.4rem; background-image:url("../img/obj-popup-map-all-item3-leaf.png"); }
#mapAll .content-wrap .swiper .item4 .con::before { top:-2.8rem; left:0; width:4.6rem; height:8.4rem; background-image:url("../img/obj-popup-map-all-item4-rose.png"); }
#mapAll .content-wrap .swiper .item4 .con::after { top:2.1rem; right:calc(50% - 18rem + 6.1rem); width:1.7rem; height:1.1rem; background-image:url("../img/obj-popup-map-all-item4-leaf.png"); }
#mapAll .content-wrap .swiper .item5 .con::before { top:1.7rem; right:calc(50% - 18rem + 4rem); width:6.4rem; height:5.8rem; background-image:url("../img/obj-popup-map-all-item5-gift.png"); }
#mapAll .content-wrap .swiper .item5 .con::after { right:calc(50% - 18rem + .9rem); bottom:0; width:11.1rem; height:11.4rem; background-image:url("../img/obj-popup-map-all-item5-rose.png"); }
#mapAll .content-wrap .swiper .item5 .con h2::before { content:''; position:absolute; top:-1.2rem; left:calc(50% - 18rem + 7.7rem); width:2.3rem; height:2.4rem; background:url("../img/obj-popup-map-all-item5-leaf.png") no-repeat center; background-size:100% auto; }
#mapAll .content-wrap .swiper .item6 .con::before { top:.9rem; left:calc(50% - 18rem + 7.2rem); width:2.3rem; height:2.2rem; background-image:url("../img/obj-popup-map-all-item6-leaf1.png"); }
#mapAll .content-wrap .swiper .item6 .con::after { top:16.1rem; right:calc(50% - 18rem + 6.5rem); width:1.5rem; height:1.5rem; background-image:url("../img/obj-popup-map-all-item6-leaf2.png"); }
#mapAll .content-wrap .btn.close { background-image:url("../img/btn-popup-map-all-close.png"); }
/* 장미원 */
#mapRose .content-wrap .map-rose { overflow:initial; }
#mapRose .content-wrap .swiper .swiper-slide .con { padding:0 0 4.2rem; }
#mapRose .content-wrap .swiper .swiper-slide .con .sub { display:block; margin:0 auto 1.2rem; }
#mapRose .content-wrap .swiper .swiper-slide .con h2 { color:#a73454; }
#mapRose .content-wrap .swiper .swiper-slide .con p { margin-top:1.2rem; color:#cb5173; }
#mapRose .content-wrap .swiper .swiper-slide .con .list-caution > ul li { color:#ea7d9b; }
#mapRose .content-wrap .swiper .item6 .img { position:relative; }
#mapRose .content-wrap .swiper .item6 .img::before { content:''; position:absolute; top:-5.7rem; left:calc(50% - 18rem + 11.6rem); width:3.8rem; height:5.7rem; background:url("../img/obj-popup-map-rose-item6-balloon.png") no-repeat center; background-size:100% auto; }
#mapRose .content-wrap .swiper .item1 .con { background-image:url("../img/bg-map-rose-item1.png"); }
#mapRose .content-wrap .swiper .item2 .con { background-image:url("../img/bg-map-rose-item2.png"); }
#mapRose .content-wrap .swiper .item3 .con { background-image:url("../img/bg-map-rose-item3.png"); }
#mapRose .content-wrap .swiper .item4 .con { background-image:url("../img/bg-map-rose-item4.png"); }
#mapRose .content-wrap .swiper .item5 .con { background-image:url("../img/bg-map-rose-item5.png"); }
#mapRose .content-wrap .swiper .item6 .con { background-image:url("../img/bg-map-rose-item6.png"); }
#mapRose .content-wrap .swiper .item1 .con::before { top:4.7rem; left:0; width:5.5rem; height:6.3rem; background-image:url("../img/obj-popup-map-rose-item1-rose1.png"); }
#mapRose .content-wrap .swiper .item1 .con::after { top:-2.2rem; right:calc(50% - 18rem + 1.6rem); width:8.9rem; height:5.5rem; background-image:url("../img/obj-popup-map-rose-item1-rose2.png"); }
#mapRose .content-wrap .swiper .item2 .con::after { top:2.5rem; right:calc(50% - 18rem + 7.5rem); width:6rem; height:5.2rem; background-image:url("../img/obj-popup-map-rose-item2-rose.png"); }
#mapRose .content-wrap .swiper .item3 .con::before { top:5.5rem; left:calc(50% - 18rem + 8rem); width:2.6rem; height:2.2rem; background-image:url("../img/obj-popup-map-rose-item3-leaf1.png"); }
#mapRose .content-wrap .swiper .item3 .con::after { top:14.4rem; right:calc(50% - 18rem + 7.3rem); width:1.3rem; height:1.1rem; background-image:url("../img/obj-popup-map-rose-item3-leaf2.png"); }
#mapRose .content-wrap .swiper .item4 .con::after { top:2rem; right:0; width:6.5rem; height:9.9rem; background-image:url("../img/obj-popup-map-rose-item4-rose.png"); }
#mapRose .content-wrap .swiper .item5 .con::before { top:2.9rem; left:calc(50% - 18rem + 5.2rem); width:5.7rem; height:5.5rem; background-image:url("../img/obj-popup-map-rose-item5-star1.png"); }
#mapRose .content-wrap .swiper .item5 .con::after { top:12rem; right:calc(50% - 18rem + 5rem); width:2.2rem; height:2.5rem; background-image:url("../img/obj-popup-map-rose-item5-star2.png"); }
#mapRose .content-wrap .swiper .item6 .con::before { top:-5.2rem; left:0; width:4.6rem; height:7.7rem; background-image:url("../img/obj-popup-map-rose-item6-flower.png"); }
#mapRose .content-wrap .swiper .item6 .con::after { top:17rem; right:calc(50% - 18rem + 1rem); width:5.4rem; height:5.6rem; background-image:url("../img/obj-popup-map-rose-item6-butterfly2.png"); }
#mapRose .content-wrap .swiper .item1 .con .sub { width:13.2rem; }
#mapRose .content-wrap .swiper .item2 .con .sub { width:12.1rem; }
#mapRose .content-wrap .swiper .item3 .con .sub { width:10rem; margin-top:.4rem; }
#mapRose .content-wrap .swiper .item4 .con .sub { width:10rem; margin-top:.4rem; }
#mapRose .content-wrap .swiper .item5 .con .sub { position:relative; width:10rem; margin-top:.4rem; }
#mapRose .content-wrap .swiper .item5 .con .sub::before { content:''; position:absolute; right:calc(50% - 18rem + 11.1rem); bottom:-.2rem; width:3.3rem; height:3.6rem; background:url("../img/obj-popup-map-rose-item5-moon.png") no-repeat center; background-size:100% auto; }
#mapRose .content-wrap .swiper .item6 .con .sub { position:relative; width:12.4rem; margin-top:.7rem; }
#mapRose .content-wrap .swiper .item6 .con .sub::before { content:''; position:absolute; right:calc(50% - 18rem + 9.6rem); bottom:-1rem; width:5.3rem; height:4.1rem; background:url("../img/obj-popup-map-rose-item6-key.png") no-repeat center; background-size:100% auto; }
#mapRose .content-wrap .swiper .item6 .con h2::before { content:''; position:absolute; top:-5.2rem; left:calc(50% - 18rem + 3.7rem); width:4.7rem; height:4.8rem; background:url("../img/obj-popup-map-rose-item6-butterfly1.png") no-repeat center; background-size:100% auto; }
#mapRose .content-wrap .btn.close { background-image:url("../img/btn-popup-map-all-close.png"); }

.btn-top { display:none; position:fixed; z-index:8; right:2rem; bottom:2rem; width:4.8rem; height:4.8rem; background:url("../img/btn-top.png") no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; }

footer { padding:.7rem 0; background:#fff; font-size:0; text-align:center; }
footer img { width:auto; height:1rem; }

@media(max-width:359px) {
	.sec { padding-left:2rem; padding-right:2rem; }

	#story::after { top:44rem; }
	#story .img { margin-top:1.5rem; }
	#story .txt p + p { margin-top:1.1rem; }

	#map { padding-top:7.5rem; }
	#map .tab { margin-top:1.8rem; }
	#map .tab .content { margin-top:1.7rem; }

	#product { padding-left:0; padding-right:0; }
	#md,
	#food { padding-left:2rem; padding-right:2rem; }

	#store .content p { margin-top:1.5rem; }
	#store .content .list-info { margin-top:1.4rem; }

	.popup .content-wrap .swiper .swiper-slide .box { padding:0 1rem; }
	.popup .content-wrap .swiper .swiper-slide .con .list-caution { margin:.8rem auto 0; }
	.popup .content-wrap .swiper-button-prev { left:2rem; }
	.popup .content-wrap .swiper-button-next { right:2rem; }
	.popup .content-wrap .btn.close { right:1rem; }

	#mapAll .content-wrap .swiper .swiper-slide .con { padding:1.4rem 0 3rem; }

	#mapRose .content-wrap .swiper .swiper-slide .con { padding:0 0 3.4rem; }
	#mapRose .content-wrap .swiper .swiper-slide .con p { margin-top:.8rem; }
}

@media(min-width:390px) {
	#story .txt p + p { margin-top:1.8rem; }
	#mapAll .content-wrap .swiper .swiper-slide .con { padding:2rem 0 3.6rem; }
	#mapAll .content-wrap .swiper .swiper-slide .con p { margin-top:1.2rem; }
	#mapAll .content-wrap .swiper .item5 .con { padding-bottom:5rem; }
	#mapRose .content-wrap .swiper .swiper-slide .con { padding:0 0 3.8rem; }
}

@media(min-width:720px) { 
	html { font-size:13px; }
	body { width:100%; background:url('../img/bg-day.jpg') no-repeat center; background-size:cover; }
	/* body.night { background-image:url('../img/bg-night.jpg'); } */
	body::-webkit-scrollbar { display:none; }

	/* layout */
	.wrapper { overflow-y:scroll; width:720px; height:100dvh; margin:0 auto; -ms-overflow-style:none; scrollbar-width:none; box-shadow:0 0 20px rgba(0, 0, 0, .15); }
	.wrapper::-webkit-scrollbar { display:none; }
	.btn-nav { right:calc(50% - 360px + 3rem); }

	nav .logo { width:333px; }
	nav .logo::after { top:153px; }
	nav .nav-wrap::after { margin-top:-310px; }
	nav .depth1 > li.map::after { right:calc(50% - 360px + 1rem); }
	nav .depth2 > li > a { font-weight:300; }
	nav .btn-close { right:calc(50% - 360px + 3rem); }

	#main { height:1200px; }
	#main .obj.balloon1 { top:36px; left:calc(50% - 360px + 20px); width:142px; }
	#main .obj.balloon2 { top:334px; right:calc(50% - 360px + 20px); width:102px; }
	#main .obj.balloon3 { top:152px; left:calc(50% - 360px + 180px); width:72px; }
	#main .obj.butterfly1 { top:748px; left:calc(50% - 360px - 156px); width:98px; }
	/* #main .obj.butterfly2 { right:calc(50% - 360px + 284px); bottom:246px; width:56px; } */
	#main .obj.butterfly3 { right:calc(50% - 360px - 100px); bottom:154px; width:108px; }
	#main .title { position:absolute; top:102px; right:0; left:0; margin:0 auto; }
	#main .title img { width:528px; }
	#main .title .date { bottom:54px; font-size:24px; }

	@keyframes balloon1 {
		0% { top:-200px; opacity:0; }
		100% { top:36px; opacity:1; }
	}
	@keyframes balloon2 {
		0% { top:534px; opacity:0; }
		100% { top:334px; opacity:1; }
	}
	@keyframes balloon3 {
		0% { top:-120px; opacity:0; }
		100% { top:20px; opacity:1; }
	}
	@keyframes butterfly1 {
		0% { top:748px; left:calc(50% - 360px - 156px); transform:scale(1.6) rotateZ(-40deg); }
		50% { left:calc(50% - 360px + 100px); }
		100% { top:512px; left:calc(50% - 360px + 124px); transform:scale(1) rotateZ(0deg); }
	}
	@keyframes butterfly3 {
		0% { right:calc(50% - 360px - 100px); bottom:154px; transform:scale(.5) rotateZ(-30deg); }
		100% { right:calc(50% - 360px + 53px); bottom:24px; transform:scale(1) rotateZ(0deg); }
	}

	#story { padding-top:100px; padding-bottom:156px; background-image:url("../img/bg-story-bottom.jpg"), url("../img/bg-story-top.jpg"), url("../img/bg-story.jpg"); background-repeat:no-repeat; background-position:center bottom, center top, center top -227px; background-size:auto 104px, auto 100px, cover; aspect-ratio: auto; }
	#story::before { top:80px; }
	#story::after { top:785px; }
	#story .obj.rose1 { top:56px; width:144px; }
	#story .obj.rose2 { top:410px; width:117px; }
	#story .obj.rose3 { width:165px; }
	#story .img { max-width:580px; }
	#story .txt { margin-top:30px; }

	#map { padding-top:150px; padding-bottom:190px; background-image:url("../img/bg-map-bottom.jpg"), url("../img/bg-map.jpg"); background-repeat:no-repeat; background-position:center bottom, center top; background-size:auto 152px, cover; aspect-ratio: auto; }
	#map::before { top:88px; width:135px; height:224px; }
	#map::after { width:306px; height:138px; }
	#map .tab .nav li { width:192px; height:76px; }
	#map .tab .content li > .img { max-width:562px; }
	#map .tab .content li.all > .img .obj-wrap .dona { top:414px; left:calc(50% - 280px + 150px); }
	#map .tab .content li.all > .img .btn-wrap .item1 { top:736px; left:calc(50% - 280px + 314px); }
	#map .tab .content li.all > .img .btn-wrap .item2 { top:492px; left:calc(50% - 280px + 160px); }
	#map .tab .content li.all > .img .btn-wrap .item3 { top:645px; left:calc(50% - 280px + 193px); }
	#map .tab .content li.all > .img .btn-wrap .item4 { top:280px; left:calc(50% - 280px + 186px); }
	#map .tab .content li.all > .img .btn-wrap .item5 { top:168px; left:calc(50% - 280px + 176px); }
	#map .tab .content li.all > .img .btn-wrap .item6 { top:146px; left:calc(50% - 280px + 196px); }
	#map .tab .content li.rose > .img .btn-wrap .item1 { top:384px; left:calc(50% - 280px + 50px); }
	#map .tab .content li.rose > .img .btn-wrap .item2 { top:694px; left:calc(50% - 280px + 50px); }
	#map .tab .content li.rose > .img .btn-wrap .item3 { top:384px; right:calc(50% - 280px + 50px); }
	#map .tab .content li.rose > .img .btn-wrap .item4 { top:694px; right:calc(50% - 280px + 50px); }
	#map .tab .content li.rose > .img .btn-wrap .item5 { top:502px; }
	#map .tab .content li.rose > .img .btn-wrap .item6 { top:146px; }

	#product::before { top:calc(50% + 68px); left:calc(50% - 360px + 1.7rem); width:109px; height:143px; }
	#md::before { width:263px; height:79px; }
	#md::after { top:58px; width:103px; height:172px; }
	#md .content { max-width:580px; }
	#food::before { width:364px; height:183px; }
	#food::after { bottom:77px; width:100px; height:170px; }
	#food h2::after { top:-56px; right:calc(50% - 360px + 175px); width:53px; height:37px; }
	#food .obj-wrap .rose { top:164px; left:calc(50% - 360px + 103px); z-index:2; width:159px; }
	#food .obj-wrap .macaron { top:122px; right:calc(50% - 360px + 53px); width:159px; }
	#food .content { max-width:580px; height:725px; border-radius:290px 290px 0 0; }
	#food .content::before { max-width:570px; height:713px; border-radius:290px 290px 0 0; }
	#food .content::after { bottom:98px; left:4px; width:98px; height:84px; }

	#store { padding-top:50px; padding-bottom:60px; }
	#store::before { top:-36px; right:0; width:157px; height:213px; }
	#store::after { width:285px; height:119px; }
	#store .content { max-width:580px; }
	
	#ecubeschool .content { max-width:650px; }
	#ecubeschool .obj.leaf4 { top:232px; }

	.popup .content-wrap { max-width:640px; }
	.popup .content-wrap .swiper .swiper-slide .box { padding:0 40px; }
	.popup .content-wrap .btn.close { right:calc(50% - 320px + 40px); }
	
	#mapAll .content-wrap .swiper .item2 .con::after { right:calc(50% - 320px + 1.2rem); }
	#mapAll .content-wrap .swiper .item5 .con::before { right:calc(50% - 320px + 72px); }
	#mapAll .content-wrap .swiper .item5 .con::after { right:calc(50% - 320px + .9rem); }

	#mapRose .content-wrap .swiper .item6 .img::before { left:calc(50% - 320px + 208px); }
	#mapRose .content-wrap .swiper .item1 .con::after { right:calc(50% - 320px + 29px); }
	#mapRose .content-wrap .swiper .item6 .con::after { right:calc(50% - 320px + 18px); }
	#mapRose .content-wrap .swiper .item6 .con h2::before { left:calc(50% - 280px + 3.7rem); }

	.btn-top { right:calc(50% - 360px - 85px); bottom:20px; }

	footer { padding:15px 0; }
	footer img { height:20px; }
}

@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:14px; }
}