/**
* Filename :rorotea.css
* Description :rorotea pick styles
**/
/* ================================== base styles & helper ================================== */
@font-face {
    font-family: 'KimJeongcheolMyoungjo';
    src: url('https://wwwrod.everland.com/font/kimjungchulMyungjo/KimjungchulMyungjo-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'KimJeongcheolMyoungjo';
    src: url('https://wwwrod.everland.com/font/kimjungchulMyungjo/KimjungchulMyungjo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'KimJeongcheolMyoungjo';
    src: url('https://wwwrod.everland.com/font/kimjungchulMyungjo/KimjungchulMyungjo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'HakgyoansimBadasseugi';
    src: url('https://wwwrod.everland.com/font/HakgyoansimBadasseugi-L.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'HakgyoansimBadasseugi';
    src: url('https://wwwrod.everland.com/font/HakgyoansimBadasseugi-B.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%; 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:'HakgyoansimBadasseugi', 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:'HakgyoansimBadasseugi', 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.jpg') repeat-y center top; background-size:cover; }
.btn-nav { position:fixed; top:2.5rem; right:1.4rem; z-index:9; width:5.6rem; height:4.6rem; background:url('../img/btn-nav.png') no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; }
.sec { position:relative; }
.sec h2 { position:relative; z-index:2; font-family:'KimJeongcheolMyoungjo'; font-size:3.5rem; line-height:normal; letter-spacing:-.35px; }
.sec h2::after { content:''; display:block; width:7rem; height:1.1rem; margin:1.2rem auto 0; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.sec h2 span { display:block; }
.content h3 { display:flex; justify-content:center; align-items:center; font-size:2.3rem; font-weight:400; line-height:normal; letter-spacing:-1.725px; -webkit-text-stroke:.05rem currentColor; }
.content h3::before,
.content h3::after { content:''; width:2rem; height:1.2rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.content h3::before { margin-right:.5rem; }
.content h3::after { margin-left:.5rem; }
.content h4 { font-size:1.8rem; font-weight:400; line-height:normal; letter-spacing:-.9px; -webkit-text-stroke:.05rem currentColor; }
.content p { font-size:1.5rem; font-weight:400; line-height:2rem; letter-spacing:-1.12px; -webkit-text-stroke:.02rem currentColor; word-break:keep-all; }
.content .txt::before { content:''; display:block; width:4.8rem; height:.8rem; margin:0 auto; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.content .txt p + p { margin-top:.8rem; }
.info-wrap { display:flex; justify-content:center; }
.info-wrap > ul { margin:0 auto; text-align:left; }
.info-wrap > ul li { display:flex; justify-content:center; align-items:flex-start; position:relative; font-size:1.5rem; font-weight:400; line-height:normal; letter-spacing:-1.12px; -webkit-text-stroke:.02rem currentColor; }
.info-wrap > ul li::before { content:''; width:1.7rem; height:1.7rem; margin-right:.1rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.notice-wrap { display:flex; justify-content:center; }
.notice-wrap > ul { margin:0 auto; text-align:left; word-wrap:break-word; word-break:keep-all; }
.notice-wrap > ul li { display:flex; position:relative; font-size:1.1rem; line-height:1.5rem; letter-spacing:-.83px; }
.notice-wrap > ul li::before { content:'*'; margin-right:.2rem; }
.notice-wrap > ul li + li { margin-top:.4rem; }
.obj { position:absolute; }
.coach-mark { display:block; position:fixed; top:calc(100% - 7.5rem - 1rem); right:0; left:0; z-index:3; width:7.5rem; height:7.5rem; margin:0 auto; background:url('../img/ico-scroll.png') no-repeat center; background-size:100% auto; text-indent:-9999px; }
em { display:flex; justify-content:center; font-style:normal; word-break:keep-all; }
em::before { content:'*'; margin-right:.2rem; }
em.none { padding-left:0; text-indent:0; }
em.none::before { display:none; }
em.caution::before { content:'※'; }

/* swiper button */
.swiper-control-wrap { display:flex; justify-content:center; align-items:center; position:relative; }
.swiper-button-prev,
.swiper-button-next { position:relative; top:auto; right:auto; left:auto; z-index:1; width:2.1rem; height:1rem; 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 { background-image:url('../img/btn-prev.png'); }
.swiper-button-next { background-image:url('../img/btn-next.png'); }
.swiper-button-prev::after,
.swiper-button-next::after { display:none; }
.swiper-pagination-bullets.swiper-pagination-horizontal { 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; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width:1rem; height:1rem; margin:0 .4rem; border-radius:50%; border-width:.2rem; border-style:solid; background-color:transparent; opacity:1; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { border-color:#ff4f68; background-color:#ff4f68; opacity:1; }

/* nav */
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; font-family:'KimJeongcheolMyoungjo'; }
nav .nav-wrap { overflow-y:auto; display:flex; flex-wrap:wrap; align-content:space-between; position:relative; width:100%; height:100%; padding-top:2.4rem; background:url('../img/bg-nav.jpg') no-repeat center top; background-size:cover; }
nav .nav-wrap::-webkit-scrollbar { display:none; }
nav .nav-wrap::before { content:''; position:absolute; top:0; left:0; z-index:1; width:10.5rem; height:9rem; background:url('../img/obj-nav-rose.png') no-repeat left top; background-size:100% auto; }
nav .nav-wrap .bottom { overflow:hidden; position:relative; z-index:1; width:100%; margin-top:-10.3rem; background:url('../img/obj-nav-bottom.png') no-repeat center bottom; background-size:100% auto; aspect-ratio:360 / 189; }
nav .nav-wrap .obj.flowers { bottom:-4.9rem; left:-9.5rem; z-index:2; width:28.1rem; height:19.4rem; transform-origin:center bottom; animation:flowers 1.4s ease-in-out 0s infinite alternate; }
nav .nav-wrap .nav-wrap-inner { overflow:hidden; position:relative; width:100%; }
nav .nav-wrap .nav-wrap-inner::before { content:''; position:absolute; top:8.2rem; right:0; z-index:1; width:11.4rem; height:15.1rem; background:url('../img/obj-nav-teapot.png') no-repeat right center; background-size:100% auto; animation:teapot 1.4s ease-in-out 0s infinite alternate; }
nav .logo { position:relative; padding:3.8rem 0 0; margin:0 2.3rem; background:url('../img/bg-nav-top.png') no-repeat center top; background-size:100% auto; aspect-ratio:313 / 193; }
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; margin:0 auto; }
nav .logo > em { margin-top:.5rem; color:#9e8d6e; font-size:.9rem; font-weight:400; line-height:2rem; }
nav .btn-close { position:absolute; top:2.5rem; right:1.4rem; width:5.6rem; height:4.6rem; 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 2.3rem; }
nav .depth1::before { content:''; position:absolute; right:.5rem; bottom:12.9rem; z-index:1; width:5.9rem; height:10.2rem; background:url('../img/obj-nav-right.png') no-repeat right center; background-size:100% auto; }
nav .depth1::after { content:''; display:block; background:url('../img/bg-nav-bottom.png') no-repeat center bottom; background-size:100% auto; aspect-ratio:313 / 63; }
nav .depth1 > ul { /* min-height:calc(100vh - 33.7rem); */ padding:0 6.3rem; background:url('../img/bg-nav-center.png') repeat-y center top; background-size:100% auto; }
nav .depth1 > ul > li { position:relative; z-index:13; background:url('../img/bg-nav-item.png') repeat-x left bottom; }
nav .depth1 > ul > li:last-child { background: none; }
nav .depth1 > ul > li > a { display:flex; justify-content:space-between; align-items:center; padding:1.4rem 1.2rem 1.4rem 0; font-size:2.2rem; font-weight:700; letter-spacing:-.6px; }
nav .depth1 > ul > li > a::after { content:''; width:.9rem; height:.9rem; margin-left:1.2rem; background:url('../img/ico-nav-arrow.png') no-repeat center; background-size:100% auto; }
nav .depth1 > ul > li.item2 > a::after { transform:rotateZ(90deg); transition:.3s; } 
nav .depth1 > ul > li > a > span { display:flex; justify-content:flex-start; align-items:center; background:linear-gradient(134deg, #3d2900, #6d4900); -webkit-background-clip:text; background-clip:text; color:transparent; text-align:left; }
nav .depth1 > ul > li > a > span::before { content:''; width:3rem; height:3rem; margin-right:.2rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
nav .depth1 > ul > li.item1 > a > span::before { background-image:url('../img/ico-nav-item1.png'); }
nav .depth1 > ul > li.item2 > a > span::before { background-image:url('../img/ico-nav-item2.png'); }
nav .depth1 > ul > li.item3 > a > span::before { background-image:url('../img/ico-nav-item3.png'); }
nav .depth1 > ul > li.item4 > a > span::before { background-image:url('../img/ico-nav-item4.png'); }
nav .depth1 > ul > li.item5 > a > span::before { background-image:url('../img/ico-nav-item5.png'); }
nav .depth1 > ul > li.item6 > a > span::before { background-image:url('../img/ico-nav-item6.png'); }
nav .depth2 { display:none; padding:0 0 1.1rem 3rem; margin-top:-.2rem; }
nav .depth2 > ul > li { margin-bottom:2rem; }
nav .depth2 > ul > li:last-child { margin-bottom:1.1rem; }
nav .depth2 > ul > li > a { display:flex; justify-content:flex-start; align-items:flex-start; color:#6d2400; font-size:1.5rem; font-weight:300; line-height:2rem; letter-spacing:-.37px; text-align:left; word-break:keep-all; }
nav .depth2 > ul > li > a::before { content:'·'; margin-right:.5rem; }
nav .depth1 > ul > li.item2.on > a::after { transform:rotateZ(-90deg); } 
@keyframes teapot {
	0% { transform:translateY(0); }
	100% { transform:translateY(1rem); }
}
@keyframes flowers {
	0% { transform:rotateZ(0); }
	100% { transform:rotateZ(2deg); }
}

/* main */
#main { position:relative; z-index:3; padding-top:3.6rem; background:url('../img/bg-main.jpg') no-repeat center top; background-size:100% auto; font-family:'KimJeongcheolMyoungjo'; aspect-ratio:360 / 630; }
#main .title { position:relative; opacity:0; animation:title 1.8s ease-in-out 3.2s 1 forwards; }
#main .title::before { content:''; position:absolute; top:41.39vw; right:calc(50% - 50vw - 9.17vw); width:3.9rem; height:3.8rem; background:url('../img/obj-main-tit-butterfly.png') no-repeat center; background-size:100% auto; transform:scale(1.6); animation:butterfly 1.8s ease-out 3.4s 1 forwards; }
#main .title::after { content:''; position:absolute; top:0; right:0; left:0; width:100%; height:100%; background:url('../img/tit-main-on.png') no-repeat center; background-size:100% auto; opacity:0; animation:title-on .3s ease-in-out 5.4s 1 forwards, title-on .3s ease-in-out 7.8s 1 forwards; }
#main .obj-wrap::before { content:''; position:absolute; top:0; right:0; left:0; width:100%; height:100%; margin:0 auto; background-image:linear-gradient(0deg, transparent, rgba(31, 46, 90, 1)); animation:dark 1.8s ease-in-out 3.4s 1 forwards; }
#main .obj-wrap::after { content:''; position:absolute; top:0; right:0; left:0; width:100%; height:100%; margin:0 auto; background-color:rgba(0, 0, 0, .7); animation:dark 1.2s ease-in-out 1.4s 1 forwards; }
#main .hotel { top:63.89vw; right:0; left:0; margin:0 auto; aspect-ratio:360 / 250; }
#main .table { top:0; right:0; left:0; width:100%; margin:0 auto; }
#main .flowers { top:0; right:0; left:0; width:100%; margin:0 auto; }
#main .firecracker1 { top:5vw; left:calc(50% - 50vw + 3.61vw); width:7.7rem; height:7.8rem; transform:scale(0); opacity:0; animation:firecracker1 2.4s cubic-bezier(0, 0.25, 0.5, 1.0) 3.6s 1 forwards, firecracker3 1.6s cubic-bezier(0, 0.5, 0.25, 1.0) 6s 1 forwards; }
#main .firecracker2 { top:38.06vw; right:calc(50% - 50vw + 6.39vw); width:6.2rem; height:6.8rem; transform:scale(0); opacity:0; animation:firecracker2 3s cubic-bezier(0, 0.25, 0.5, 1.0) 4s 1 forwards, firecracker4 2s cubic-bezier(0, 0.5, 0.25, 1.0) 7s 1 forwards; }
#main .balloon1 { top:28.89vw; left:calc(50% - 50vw + 2.22vw); width:6.7rem; height:10.4rem; animation:balloon1 1.8s ease 0s infinite alternate; }
#main .balloon2 { top:46.39vw; right:calc(50% - 50vw + 4.72vw); width:4.6rem; height:7.9rem; animation:balloon2 2s ease-in-out 0s infinite alternate; }
#main .balloon3 { top:4.44vw; left:calc(50% - 50vw + 14.44vw); width:2.8rem; height:4.5rem; }
#main .rose1 { top:82.50vw; left:-30.83vw; z-index:1; width:17rem; height:13.6rem; transform:rotateZ(-4deg); animation:rose1 2.4s ease-in-out 0s infinite alternate; }
#main .rose2 { top:137.50vw; left:-19.72vw; z-index:1; width:13.4rem; height:16.9rem; transform:rotateZ(2deg); animation:rose2 2.4s ease-in-out 0s infinite alternate; }
#main .rose3 { top:153.33vw; left:-22.22vw; z-index:1; width:14.2rem; height:16.6rem; }
#main .rose4 { top:156.67vw; left:calc(50% - 50vw + 26.67vw); z-index:1; width:14.1rem; height:9.2rem; }
#main .rose5 { top:156.39vw; right:calc(50% - 50vw + 20.56vw); z-index:1; width:11.3rem; height:9.4rem; }
#main .rose6 { top:161.39vw; left:calc(50% - 50vw + 3.89vw); z-index:1; width:13.3rem; height:10.1rem; transform-origin:center bottom; transform:rotateZ(-2deg); animation:rose3 2.4s ease-in-out 0s infinite alternate; }
#main .rose7 { top:159.72vw; right:calc(50% - 50vw + 8.33vw); z-index:1; width:10.7rem; height:8.1rem; }
#main .rose8 { top:143.89vw; right:calc(50% - 50vw + 10.83vw); z-index:1; width:8.4rem; height:9.8rem; transform-origin:center bottom; transform:rotateZ(2deg); animation:rose2 2.4s ease-in-out 0s infinite alternate; }
#main .rose9 { top:161.94vw; right:calc(50% - 50vw - 21.11vw); z-index:1; width:14.2rem; height:16.6rem; transform:rotateZ(-4deg); animation:rose1 2.4s ease-in-out 0s infinite alternate; }
#main .rose10 { top:171.94vw; left:calc(50% - 50vw - 9.72vw); z-index:1; width:11.4rem; height:13.8rem; }
#main .rose11 { top:115.69vw; left:-5vw; z-index:1; width:9.3rem; height:12.4rem; }
#main .rose12 { top:114.44vw; right:-9.72vw; z-index:1; width:8.9rem; height:10.5rem; }
#main .butterfly1 { top:82.22vw; left:calc(50% - 50vw + 17.78vw); width:4.7rem; height:3.9rem; transform:translate(-14rem, 14rem) scale(1.6); animation:butterfly1 2s ease-in-out 4s 1 forwards; }
#main .gate { top:26.94vw; width:50vw; z-index:1; }
#main .gate.left { left:0; transform-origin:left center; animation:gate-left 3s ease-in-out .6s 1 forwards; }
#main .gate.right { right:0; transform-origin:right center; animation:gate-right 3s ease-in-out .6s 1 forwards; }
@keyframes title {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes title-on {
	0% { opacity:0; }
	50% { opacity:1; }
	100% { opacity:0; }
}
@keyframes butterfly {
	0% { top:41.39vw; right:calc(50% - 50vw - 9.17vw); transform:scale(1.6); }
	50% { right:calc(50% - 50vw + 7.83vw); }
	100% { top:21.39vw; right:calc(50% - 50vw + 10.83vw); transform:scale(1); }
}
@keyframes dark {
	0% { opacity:1; }
	100% { opacity:0; }
}
@keyframes firecracker1 {
	0% { transform:scale(0); opacity:0; }
	30% { opacity:1; }
	70% { transform:scale(1); opacity:1; }
	90% { transform:scale(1); opacity:0; }
	100% { transform:scale(0); opacity:0; }
}
@keyframes firecracker2 {
	0% { transform:scale(0); opacity:0; }
	20% { opacity:1; }
	50% { transform:scale(1); opacity:1; }
	80% { transform:scale(1); opacity:0; }
	100% { transform:scale(0); opacity:0; }
}
@keyframes firecracker3 {
	0% { transform:scale(0); opacity:0; }
	45% { opacity:1; }
	100% { transform:scale(1); opacity:1; }
}
@keyframes firecracker4 {
	0% { transform:scale(0); opacity:0; }
	45% { opacity:1; }
	100% { transform:scale(1); opacity:1; }
}
@keyframes balloon1 {
	0% { transform:translateY(0rem); }
	100% { transform:translateY(.7rem); }
}
@keyframes balloon2 {
	0% { transform:translateY(0rem); }
	100% { transform:translateY(-1rem); }
}
@keyframes rose1 {
	0% { transform:rotateZ(-4deg); }
	100% { transform:rotateZ(4deg); }
}
@keyframes rose2 {
	0% { transform:rotateZ(2deg); }
	100% { transform:rotateZ(-2deg); }
}
@keyframes rose3 {
	0% { transform:rotateZ(-2deg); }
	100% { transform:rotateZ(2deg); }
}
@keyframes butterfly1 {
	0% { transform:translate(-14rem, 14rem) scale(1.6); }
	100% { transform:translate(0, 0) scale(1); }
}
@keyframes gate-left {
	0% { transform:perspective(50rem) rotateY(0); }
	100% { transform:perspective(50rem) rotateY(90deg); opacity:0; }
}
@keyframes gate-right {
	0% { transform:perspective(50rem) rotateY(0); }
	100% { transform:perspective(50rem) rotateY(-90deg); opacity:0; }
}

/* story */
#story { padding:6rem 0 4rem; background:url('../img/bg-story.jpg') repeat-y center top; background-size:100% auto; }
#story::before { content:''; position:absolute; top:3.3rem; right:0; left:0; width:calc(100% - 2.2rem); height:calc(100% - 3.3rem - 13.7rem); margin:0 auto; border:1px solid #e0d6c1; box-sizing:border-box; opacity:0; }
#story h2 { color:#320000; text-shadow:.2rem .2rem 0 #e4d7be; }
#story h2::before { content:''; position:absolute; top:-.7rem; right:calc(50% - 18rem + 12rem); width:2.8rem; height:2.7rem; background:url('../img/obj-story-tit-butterfly.png') no-repeat center; background-size:100% auto; }
#story h2::after { background-image:url('../img/obj-tit-brown.png'); }
#story .img-wrap { position:relative; visibility:visible; width:100%; height:auto; margin-top:.5rem; opacity:1; }
#story .img-wrap::before { content:''; position:absolute; bottom:-4.9rem; left:0; z-index:1; width:10.3rem; height:25rem; background:url('../img/obj-story-left.png') no-repeat center; background-size:100% auto; transform-origin:left bottom; }
#story .img-wrap::after { content:''; position:absolute; right:0; bottom:-5.5rem; width:8.5rem; height:9.5rem; background:url('../img/obj-story-right.png') no-repeat center; background-size:100% auto; transform-origin:right bottom; }
#story .img-wrap .key { bottom:-2.4rem; right:calc(50% - 18rem + 2.9rem); width:9.5rem; height:8.3rem; }
#story .img-wrap .img { display:block; position:relative; max-width:36rem; margin:0 auto; }
#story .img-wrap .img::before { content:''; position:absolute; top:-3.3rem; right:calc(50% - 18rem - .8rem); width:9.1rem; height:12.2rem; background:url('../img/obj-story-flower.png') no-repeat center; background-size:100% auto; }
#story .img-wrap .img::after { content:''; position:absolute; top:.1rem; left:calc(50% - 18rem + 6rem); width:3.2rem; height:3.1rem; background:url('../img/obj-story-butterfly.png') no-repeat center; background-size:100% auto; }
#story .img-wrap .img img { transform:rotateZ(-2deg); animation:letter 1.2s ease-in-out 0s infinite alternate; }
#story .txt-wrap { position:relative; visibility:hidden; height:0; opacity:0; }
#story .txt-wrap::before { content:''; position:absolute; bottom:-1rem; left:0; z-index:1; width:4.3rem; height:9.9rem; background:url('../img/obj-story-rose1.png') no-repeat center; background-size:100% auto; }
#story .txt-wrap::after { content:''; position:absolute; bottom:-2.7rem; right:2.1rem; width:7.8rem; height:5.9rem; background:url('../img/obj-story-rose2.png') no-repeat center; background-size:100% auto; }
#story .txt-wrap .txt { position:relative; }
#story .txt-wrap .txt::before { content:''; position:absolute; top:-4.1rem; right:0; width:7.7rem; height:8.5rem; background:url('../img/obj-story-porcupine.png') no-repeat center; background-size:100% auto; }
#story .txt-wrap .txt::after { content:''; position:absolute; top:16rem; left:calc(50% - 18rem + 4rem); width:3.2rem; height:3.1rem; background:url('../img/obj-story-butterfly.png') no-repeat center; background-size:100% auto; }
#story .txt-wrap p { color:#631e00; font-size:1.4rem; font-weight:400; line-height:2rem; letter-spacing:-1.05px; -webkit-text-stroke:.03rem currentColor; }
#story .txt-wrap .letter { bottom:0; }
#story.on { padding-bottom:0; }
#story.on::before { animation:story 2s ease 1s 1 forwards; }
#story.on .img-wrap { margin-top:0; animation:checkin 1.2s ease-in-out .2s 1 forwards; }
#story.on .img-wrap::before { animation:letter-left 1s ease-in-out 0s 1 forwards; }
#story.on .img-wrap::after { animation:letter-right 1s ease-in-out 0s 1 forwards; }
#story.on .img-wrap .key { animation:letter-right 1s ease-in-out .2s 1 forwards; }
#story.on .img-wrap .img::before { animation:letter-right 1s ease-in-out .2s 1 forwards; }
#story.on .img-wrap .img::after { animation:letter-butterfly 1s ease-in-out .2s 1 forwards; }
#story.on .txt-wrap { animation:txt 2s ease-in-out .2s 1 forwards; }
#story.on .txt-wrap p + p { margin-top:2rem; }
@keyframes story {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes letter {
	0% { transform:rotateZ(-2deg); }
	100% { transform:rotateZ(0); }
}
@keyframes checkin {
	0% { visibility:visible; height:22.5rem; transform:translateY(0); opacity:1; }
	100% { visibility:hidden; height:0; transform: translateY(38rem); opacity:0; }
}
@keyframes letter-left {
	0% { left:0; transform:rotateZ(0); opacity:1; }
	100% { left:-100%; transform:rotateZ(-60deg); opacity:0; }
}
@keyframes letter-right {
	0% { right:0; transform:rotateZ(0); opacity:1; }
	100% { right:-100%; transform:rotateZ(60deg); opacity:0; }
}
@keyframes letter-butterfly {
	0% { top:.1rem; transform:translateX(0); opacity:1; }
	100% { top:-40rem; transform:translateX(30rem); opacity:0; }
}
@keyframes txt {
	0% { visibility:hidden; height:0; opacity:0; }
	50% { visibility:hidden; height:55.2rem; padding-bottom:17.2rem; opacity:0; }
	100% { visibility:visible; height:auto; padding-bottom:17.2rem; opacity:1; }
}

/* map */
#map { padding:3rem 0 3.1rem; background-color:#fff; }
#map h2 { color:#320000; text-shadow:.2rem .2rem 0 #e4d7be; }
#map h2::after { background-image:url('../img/obj-tit-brown.png'); }
#map .obj { z-index:1; }
#map .rose1 { top:-2rem; right:0; width:9.6rem; height:15rem; }
#map .rose2 { top:22rem; left:0; width:2.7rem; height:9.1rem; }
#map .rose3 { top:19.4rem; right:0; width:4.5rem; height:9.8rem; }
#map .rose4 { right:0; bottom:-4.6rem; width:6.3rem; height:8.2rem; }
#map .flower { top:5.2rem; left:0; width:4.4rem; height:6.5rem; }
#map .carpet { top:8.7rem; left:calc(50% - 18rem + 3.4rem); width:6rem; height:5.2rem; }
#map .teapot { top:17.4rem; right:calc(50% - 18rem - 2.2rem); z-index:2; width:17.1rem; height:12rem; animation:teapot2 1.4s ease-in-out 0s infinite alternate; }
#map .porcupine { top:15rem; left:calc(50% - 18rem + 7.3rem); z-index:2; width:5.4rem; height:4.7rem; }
#map .map-wrap { position:relative; margin-top:5.5rem; }
#map .map-wrap::before { content:''; position:absolute; top:-13.5rem; left:calc(50% - 18rem - 1.9rem); width:34.8rem; height:19.9rem; background:url('../img/obj-map-sky.png') no-repeat center; background-size:100% auto; }
#map .map-wrap .map { max-width:36rem; margin:0 auto; }
#map .map-wrap .water { top:4.9rem; left:calc(50% - 18rem + 13.6rem); width:8.7rem; height:15.7rem; }
#map .map-wrap .restaurants { top:27.1rem; left:calc(50% - 18rem + 3.6rem); width:11.1rem; height:7.4rem; }
#map .map-wrap .restaurants::before { content:''; position:absolute; top:-4.3rem; left:-2.1rem; width:5.8rem; height:8.6rem; background:url('../img/obj-map-restaurants2.png') no-repeat center; background-size:100% auto; }
#map .map-wrap .restaurants img { position:relative; }
#map .map-wrap .obj { z-index:2; }
#map .map-wrap .item1 { top:15.9rem; left:calc(50% - 18rem + 10rem); width:13.1rem; height:11.9rem; }
#map .map-wrap .item2 { top:7.2rem; left:calc(50% - 18rem + 9.9rem); width:14.1rem; height:7.6rem; }
#map .map-wrap .item3 { top:-4.1rem; left:calc(50% - 18rem + 11rem); z-index:1; width:14.4rem; height:9.5rem; }
#map .map-wrap .item4 { top:2.5rem; left:calc(50% - 18rem + 4.1rem); width:9.3rem; height:9rem; }
#map .map-wrap .item5 { top:15rem; left:calc(50% - 18rem + 5rem); width:6.7rem; height:7.9rem; }
#map .map-wrap .item6 { top:21.1rem; right:calc(50% - 18rem - .4rem); width:13.7rem; height:9.2rem; }
@keyframes teapot2 {
	0% { transform:translateY(0); }
	100% { transform:translateY(.6rem); }
}

/* concert */
#concert { padding:1.5rem 0; background:url('../img/bg-concert.jpg') repeat-y center top; background-size:100% auto; }
#concert::before,
#concert::after { content:''; display:block; width:100%; background-repeat:no-repeat; background-size:100% auto; aspect-ratio:360 / 7; }
#concert::before { background-image:url('../img/obj-concert-top.png'); background-position:center top; }
#concert::after { background-image:url('../img/obj-concert-bottom.png'); background-position:center bottom; }
#concert .inner-wrap { padding:2.4rem 0 3.4rem; background:url('../img/obj-concert-center.png') repeat-y center top; background-size:100% auto; }
#concert .inner-wrap::before { content:''; position:absolute; top:-2.6rem; left:calc(50% - 18rem - 9.1rem); z-index:1; width:18.1rem; height:21.4rem; background:url('../img/obj-concert-rose1.png') no-repeat left center; background-size:100% auto; transform-origin:8.9rem 13.5rem; transform:rotateZ(-2deg); animation:rose4 2s ease-in-out 0s infinite alternate; }
#concert .inner-wrap::after { content:''; position:absolute; bottom:-12.4rem; right:0; z-index:1; width:11.3rem; height:17.9rem; background:url('../img/obj-concert-rose2.png') no-repeat left center; background-size:100% auto; }
#concert h2 { color:#fff; text-shadow:.2rem .2rem 0 #a516bf; }
#concert h2::after { background-image:url('../img/obj-tit-white.png'); }
#concert .img { position:relative; max-width:36rem; margin:2rem auto 0; }
#concert .img::before { content:''; position:absolute; top:-4.3rem; right:calc(50% - 18rem + 2.2rem); width:14.6rem; height:14rem; background:url('../img/obj-concert-flower.png') no-repeat center; background-size:100% auto; mix-blend-mode:luminosity; }
#concert .img::after { content:''; position:absolute; right:calc(50% - 18rem + 2.4rem); bottom:3.1rem; width:6.8rem; height:4.9rem; background:url('../img/obj-concert-rose3.png') no-repeat center; background-size:100% auto; transform:rotateZ(4deg); animation:rose5 1.6s ease-in-out 0s infinite alternate; }
#concert .content h3 { margin-top:1.8rem; color:#fff; }
#concert .content h3::before { background-image:url('../img/obj-tit-left-white.png'); }
#concert .content h3::after { background-image:url('../img/obj-tit-right-white.png'); }
#concert .content .info-wrap { margin-top:.6rem; }
#concert .content .info-wrap li { color:#f9d3ff; }
#concert .content .info-wrap li.place::before { background-image:url('../img/obj-place-lightpurple.png'); }
#concert .content .txt { margin-top:1.8rem; }
#concert .content .txt::before { margin-bottom:1.4rem; background-image:url('../img/obj-txt-lightpurple.png'); }
#concert .content p { color:#f9d3ff; }
@keyframes rose4 {
	0% { transform:rotateZ(-1deg); }
	100% { transform:rotateZ(2deg); }
}
@keyframes rose5 {
	0% { transform:rotateZ(4deg); }
	100% { transform:rotateZ(-2deg); }
}

/* md */
#md { padding:3rem 0 4.1rem; background:url('../img/bg-md.jpg') repeat-y center top; background-size:100% auto; }
#md .obj:not(.rose5) { mix-blend-mode:luminosity; }
#md .rose1 { top:0; right:0; width:12.2rem; }
#md .rose2 { top:70.2rem; left:0; width:10.7rem; }
#md .rose3 { top:136.5rem; right:0; width:10rem; }
#md .rose4 { bottom:0; left:calc(50% - 18rem + 2.4rem); width:16.4rem; }
#md .rose5 { top:145rem; right:calc(50% - 18rem - 4.9rem); width:12.7rem; transform-origin:10.7rem 9.6rem; animation:rose7 1.8s ease-in-out 0s infinite alternate; }
#md h2 { margin-bottom:1.3rem; color:#320000; text-shadow:.2rem .2rem 0 #ffdbdb; }
#md h2::after { margin-top:.8rem; background-image:url('../img/obj-tit-brown.png'); }
#md h4 { color:#390000; }
#md .item1 { position:relative; margin:2.3rem auto 5rem; }
#md .item1::before { content:''; position:absolute; top:-8rem; left:calc(50% - 18rem + .4rem); width:6.9rem; height:17.7rem; background:url('../img/obj-md-item1.png') no-repeat center; background-size:100% auto; }
#md .item1 .inner-wrap { position:relative; max-width:36rem; margin:0 auto 2.3rem; }
/* #md .item1 .inner-wrap::before { content:''; position:absolute; top:12.1rem; right:calc(50% - 18rem + 2.2rem); z-index:2; width:10.5rem; height:9.6rem; background:url('../img/obj-md-item1-teapot.png') no-repeat center; background-size:100% auto; } */
#md .item1 .inner-wrap::after { content:''; position:absolute; top:14rem; right:calc(50% - 18rem + 4rem); z-index:2; width:9.8rem; height:8.2rem; background:url('../img/obj-md-item1-rose.png') no-repeat center; background-size:100% auto; transform-origin:4.3rem 6.4rem; animation:rose6 2.2s ease-in-out 0s infinite alternate; }
#md .item1 .inner-wrap .swiper { margin-bottom:1.4rem; }
#md .item1 .info-wrap { margin:1.6rem auto 1.8rem; }
#md .item1 .info-wrap li { color:#390000; }
#md .item1 .info-wrap li.place::before { background-image:url('../img/obj-place-pink.png'); }
#md .item1 .txt::before { margin-bottom:1.4rem; background-image:url('../img/obj-txt-brown.png'); }
#md .item1 .txt p { color:#5a2000; }
#md .item2 { display:flex; justify-content:center; align-items:center; margin:5rem auto 5.8rem; }
#md .item2 .img { flex-shrink:0; position:relative; max-width:16.5rem; margin-right:1.4rem; }
#md .item2 .img::before { content:''; position:absolute; top:-4.4rem; left:1.8rem; width:6.7rem; height:5.4rem; background:url('../img/obj-md-item2-rose.png') no-repeat center; background-size:100% auto; }
#md .item2 .img::after { content:''; position:absolute; right:-.8rem; bottom:-1.8rem; width:10.6rem; height:9.3rem; background:url('../img/obj-md-item2-bottom.png') no-repeat center; background-size:100% auto; }
#md .item2 .info-wrap li { color:#510097; }
#md .item2 .info-wrap li.place::before { background-image:url('../img/obj-place-purple.png'); }
#md .item2 .txt { margin:1.7rem auto 0; }
#md .item2 .txt::before { margin-bottom:1.7rem; background-image:url('../img/obj-txt-purple.png'); }
#md .item2 .txt p { color:#510097; }
#md .item3 { margin:5.8rem auto 3.6rem; }
#md .item3 h3 { margin-bottom:1.7rem; color:#390000; }
#md .item3 h3::before { background-image:url('../img/obj-tit-left-brown.png'); opacity:.5; }
#md .item3 h3::after { background-image:url('../img/obj-tit-right-brown.png'); opacity:.5; }
#md .item3 .txt { margin:1.7rem auto .8rem; color:#5a2000; }
#md .item3 .txt::before { margin-bottom:1.6rem; background-image:url('../img/obj-txt-brown.png'); }
#md .item3 .img { max-width:36rem; margin:.8rem auto 0; }
#md .item3 .img::after { content:''; display:block; width:13.2rem; height:1.9rem; margin:1.2rem auto 0; background:url('../img/obj-md-item3.png') no-repeat center; background-size:100% auto; }
#md .item3 .list-wrap { display:flex; justify-content:center; align-items:center; margin:1.7rem auto 1.9rem; }
#md .item3 .list-wrap ul { counter-reset:number 0; text-align:left; }
#md .item3 .list-wrap ul li { display:flex; margin-bottom:1.4rem; }
#md .item3 .list-wrap ul li::before { counter-increment:number 1; content:counter(number)"."; margin-right:.3rem; color:#c0273d; font-size:1.5rem; font-weight:400; line-height:2rem; -webkit-text-stroke:.05rem currentColor; }
#md .item3 .list-wrap ul li:last-child { margin-bottom:0; }
#md .item3 .list-wrap ul li h5 { color:#c0273d; font-size:1.5rem; font-weight:400; line-height:2rem; -webkit-text-stroke:.05rem currentColor; }
#md .item3 .list-wrap ul li p { margin-top:.4rem; color:#2e0000; font-size:1.3rem; font-weight:400; line-height:1.8rem; -webkit-text-stroke:0; }
#md .item3 .notice-wrap li { color:#ba0101; }
#md .item3 .notice-wrap li + li { margin-top:.2rem; }
#md .item4 { max-width:36rem; margin:0 auto; }
#md .item4::before { content:''; display:block; max-width:36rem; height:1.3rem; background:url('../img/obj-md-item4-top.png') no-repeat center top; background-size:100% auto; }
#md .item4::after { content:''; display:block; max-width:36rem; height:1.3rem; background:url('../img/obj-md-item4-bottom.png') no-repeat center bottom; background-size:100% auto; }
#md .item4 .inner-wrap { padding:1.8rem 0 1.6rem; background:url('../img/obj-md-item4-center.png') repeat-y center; background-size:100% auto; }
#md .item4 h4 { margin-bottom:1rem; font-size:2rem; color:#510097; letter-spacing:-1.5px; }
#md .item4 h4::before { content:''; display:block; width:9.5rem; height:1.1rem; margin:0 auto 1.2rem; background:url('../img/obj-md-item4.png') no-repeat center; background-size:100% auto; }
#md .item4 p { margin:1rem auto 2.3rem; color:#510097; font-size:1.5rem; line-height:2rem; }
#md .item4 .img { max-width:36rem; margin:2.3rem auto 2.1rem; }
#md .item4 .notice-wrap { margin-top:2.1rem; }
#md .item4 .notice-wrap li { display:block; color:#2e0000; line-height:1.6rem; text-align:center; }
#md .item4 .notice-wrap li > strong { color:#8a00ff; font-weight:400; }
@keyframes rose6 {
	0% { transform:rotateZ(-2deg); }
	100% { transform:rotateZ(3deg); }
}
@keyframes rose7 {
	0% { transform:rotateZ(0deg); }
	100% { transform:rotateZ(-4deg); }
}

/* F&B */
#food  { padding:1.5rem 0; background:url('../img/bg-food.jpg') repeat-y center top; background-size:100% auto; }
#food::before,
#food::after { content:''; display:block; width:100%; background-repeat:no-repeat; background-size:100% auto; aspect-ratio:360 / 7; }
#food::before { background-image:url('../img/obj-food-top.png'); background-position:center top; }
#food::after { background-image:url('../img/obj-food-bottom.png'); background-position:center bottom; }
#food .inner-wrap { padding:2.3rem 0 4rem; background:url('../img/obj-concert-center.png') repeat-y center top; background-size:100% auto; }
#food .obj:not(.rose4, .rose5) { mix-blend-mode:luminosity; }
#food .rose1 { top:0; left:0; width:8.7rem; }
#food .rose2 { top:36.1rem; right:0; width:10rem; }
#food .rose3 { bottom:31.4rem; left:0; width:7.3rem; }
#food .rose4 { top:-12.7rem; left:calc(50% - 18rem - 8.1rem); width:16.4rem; transform:rotateZ(3deg); transform-origin:4.4rem 11.2rem; animation:rose8 1.8s ease-in-out 0s infinite alternate; }
#food .rose5 { top:-10.4rem; right:0; width:11.5rem; }
#food h2 { margin-bottom:.4rem; color:#fff; text-shadow:.2rem .2rem 0 #38b109; }
#food h2::after { margin-top:.8rem; background-image:url('../img/obj-tit-white.png'); }
#food h3 { color:#fff; }
#food h3::before { background-image:url('../img/obj-tit-left-white.png'); opacity:.5; }
#food h3::after { background-image:url('../img/obj-tit-right-white.png'); opacity:.5; }
#food .info-wrap { margin:.6rem auto 1.8rem; }
#food .info-wrap li { color:#d8ffd3 }
#food .info-wrap li.place::before { background-image:url('../img/obj-place-lightgreen.png'); }
#food .txt { margin:1.8rem auto 0; }
#food .txt::before { margin-bottom:1.6rem; background-image:url('../img/obj-txt-lightgreen.png'); }
#food .txt p { color:#d8ffd3; }
#food .item { display:flex; justify-content:center; align-items:center; }
#food .item .img { position:relative; }
#food .item h4 { margin-bottom:1.2rem; color:#fff; }
#food .item .txt { margin-top:1.2rem; }
#food .item .txt::before { margin-bottom:1.2rem; background-image:url('../img/obj-txt-lightyellow.png'); }
#food .item .txt p { color:#fdffcf; font-size:1.4rem; line-height:1.9rem; letter-spacing:-1.05px; }
#food .food > .img,
#food .snack > .img { max-width:36rem; margin:0 auto; }
#food .food h3 { margin:1.4rem auto .6rem; }
#food .food > .img { position:relative; margin-top:.4rem; }
#food .food > .img::before { content:''; position:absolute; right:calc(50% - 18rem + 2rem); bottom:2rem; width:8.9rem; height:9.1rem; background:url('../img/obj-food-rose6.png') no-repeat center; background-size:100% auto; transform-origin:center bottom 1.3rem; animation:rose9 1.4s ease-in-out 0s infinite alternate; }
#food .food > .img::after { content:''; position:absolute; right:calc(50% - 18rem + 2.8rem); bottom:0; width:10.6rem; height:5.2rem; background:url('../img/obj-food-cake.png') no-repeat center; background-size:100% auto; }
#food .food .item1 { padding-left:4.6rem; margin-top:3.1rem; }
#food .food .item1 .img { width:18.7rem; margin-left:1.5rem; }
#food .food .item1 .img::after { content:''; position:absolute; bottom:-2.5rem; left:4.8rem; width:9rem; height:7.3rem; background:url('../img/obj-food-item1.png') no-repeat center; background-size:100% auto; }
#food .food .item2 { margin-top:2.3rem; }
#food .food .item2 .img { width:9.4rem; margin-right:2rem; }
#food .food .item2 .img::after { content:''; position:absolute; bottom:-2.3rem; left:-2.6rem; width:11.6rem; height:10.5rem; background:url('../img/obj-food-item2.png') no-repeat center; background-size:100% auto; }
#food .snack { position:relative; margin-top:5.5rem; }
#food .snack::before { content:''; position:absolute; top:-9.1rem; right:calc(50% - 18rem - 6.7rem); width:19.2rem; height:16.4rem; background:url('../img/obj-snack-rose1.png') no-repeat center; background-size:100% auto; transform-origin:12.5rem center; animation:rose10 2.4s ease-in-out 0s infinite alternate; }
#food .snack h3 { margin:.7rem auto .6rem; }
#food .snack .item1 { align-items:flex-start; padding-right:2rem; margin-top:3.3rem; }
#food .snack .item1 .img { width:15.3rem; margin-right:2rem; }
#food .snack .item1 .img::after { content:''; position:absolute; bottom:-3.5rem; left:-4.5rem; width:13.4rem; height:7.7rem; background:url('../img/obj-snack-item1.png') no-repeat center; background-size:100% auto; }
#food .snack .item2 { align-items:flex-end; margin-top:.4rem; }
#food .snack .item2 .txt { margin-bottom:.3rem; }
#food .snack .item2 .img { width:9.5rem; margin-left:2.8rem; }
#food .snack .item2 .img::before { content:''; position:absolute; top:5.9rem; left:-2.2rem; width:5.5rem; height:5.5rem; background:url('../img/obj-snack-item2-left.png') no-repeat center; background-size:100% auto; }
#food .snack .item2 .img::after { content:''; position:absolute; right:-2.8rem; bottom:-2.1rem; width:13rem; height:7rem; background:url('../img/obj-snack-item2-bottom.png') no-repeat center; background-size:100% auto; }
@keyframes rose8 {
	0% { transform:rotateZ(1deg); }
	100% { transform:rotateZ(5deg); }
}
@keyframes rose9 {
	0% { transform:rotateZ(3deg); }
	100% { transform:rotateZ(-1deg); }
}
@keyframes rose10 {
	0% { transform:rotateZ(2deg); }
	100% { transform:rotateZ(-2deg); }
}

/* market */
#market { padding:2.9rem 0 4.6rem; background:url('../img/bg-market.jpg') repeat-y center top; background-size:100% auto; }
#market::before { content:''; position:absolute; top:0; left:0; width:9rem; height:12.1rem; background:url('../img/obj-market-rose1.png') no-repeat center; background-size:100% auto; mix-blend-mode:luminosity; }
#market::after { content:''; position:absolute; top:23.7rem; left:calc(50% - 18rem - 6.6rem); z-index:2; width:16.3rem; height:19rem; background:url('../img/obj-market-rose2.png') no-repeat center; background-size:100% auto; transform-origin:6.6rem 10.9rem; animation:rose11 2s ease-in-out 0s infinite alternate; }
#market h2 { margin-bottom:1.2rem; color:#320000; text-shadow:.2rem .2rem 0 #ffdbdb; }
#market h2::after { margin-top:.8rem; background-image:url('../img/obj-tit-brown.png'); }
#market h4 { margin:1.2rem auto 2.3rem; color:#390000; }
#market .content .inner-wrap { position:relative; max-width:36rem; margin:2.3rem auto 2.4rem; }
#market .content .inner-wrap .flower { top:-7.1rem; right:calc(50% - 18rem + 1.4rem); width:6.9rem; }
#market .content .inner-wrap .rose { top:13.4rem; right:calc(50% - 18rem + 2.4rem); z-index:2; width:10.2rem; }
#market .content .inner-wrap .butterfly { top:-.6rem; left:calc(50% - 18rem + 3.1rem); width:3.9rem; }
#market .content .inner-wrap .swiper { margin-bottom:1.5rem; }
#market .info-wrap { margin:2.4rem auto 1.8rem; }
#market .info-wrap li { color:#390000; }
#market .info-wrap li.place::before { background-image:url('../img/obj-place-pink.png'); }
#market .txt { margin:1.8rem auto 0; }
#market .txt::before { margin-bottom:1.7rem; background-image:url('../img/obj-txt-brown.png'); }
#market .txt p { color:#5a2000; }
#market .banner { display:block; position:relative; padding:.3rem; margin:3.6rem 2.3rem 0; border-radius:1rem; background-color:#fff; font-family:'KimJeongcheolMyoungjo'; text-align:left; }
#market .banner::before { content:''; position:absolute; top:-.6rem; left:-3rem; z-index:1; width:7rem; height:8.7rem; background:url('../img/obj-banner-fox.png') no-repeat center; background-size:100% auto; }
#market .banner::after { content:''; position:absolute; right:-2rem; bottom:-1.2rem; z-index:1; width:5.9rem; height:5.3rem; background:url('../img/obj-banner-rose.png') no-repeat center; background-size:100% auto; }
#market .banner .inner-wrap { position:relative; padding:1.4rem 4.5rem; border:1px dashed #460000; border-radius:1rem; color:#460000; font-size:1.5rem; font-weight:400; line-height:normal; letter-spacing:-.75px; }
#market .banner .inner-wrap::after { content:''; position:absolute; top:1.2rem; right:.8rem; width:7.7rem; height:5rem; background:url('../img/obj-banner-teapot.png') no-repeat center; background-size:100% auto; }
#market .banner .inner-wrap > span { display:flex; align-items:center; margin-top:.1rem; margin-left:-.2rem; font-size:1.8rem; letter-spacing:-1.35px; }
#market .banner .inner-wrap > span::after { content:'>'; margin-left:.4rem; font-size:1rem; }
@keyframes rose11 {
	0% { transform:rotateZ(-2deg); }
	100% { transform:rotateZ(0deg); }
}

/* popup - common */
.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 { overflow-y:auto; position:relative; width:100%; height:100%; }
.popup .content-wrap::-webkit-scrollbar { display:none; }
.popup .content-wrap > div { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; min-height:100%; padding:4rem 0; box-sizing:border-box; }
.popup .swiper { overflow:hidden; width:100%; height:auto; }
.popup .swiper-wrapper { align-items:flex-start; }
.popup .swiper-slide { width:100%; }
.popup .swiper-control-wrap { margin-top:1.5rem; }
.popup .swiper-control-wrap .swiper-button-prev { background-image:url('../img/btn-popup-map-prev.png'); }
.popup .swiper-control-wrap .swiper-button-next { background-image:url('../img/btn-popup-map-next.png'); }
.popup .swiper-control-wrap .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { border-color:#fff; }
.popup .swiper-control-wrap .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { border-color:#ffd97d; background-color:#ffd97d; }
.popup .btn.close { width:3.9rem; height:3.9rem; margin-bottom:1.3rem; background:url('../img/btn-popup-close.png') no-repeat center; background-size:100% auto; color:transparent; font-size:1px; text-indent:-999rem; }
.popup.on { display:flex; }
/* popup - content */
.popup .map .box { position:relative; max-width:31.2rem; padding:.5rem 0; margin:0 auto; border-radius:2.7rem; background:url('../img/bg-popup-map.jpg') repeat-y center top; background-size:100% auto; }
.popup .map .box::before,
.popup .map .box::after { content:''; display:block; width:100%; background-repeat:no-repeat; background-size: 100% auto; aspect-ratio:312 / 26; }
.popup .map .box::before { background-image:url('../img/obj-popup-map-top.png'); background-position:center top; }
.popup .map .box::after { background-image:url('../img/obj-popup-map-bottom.png'); background-position:center bottom; }
.popup .map .box .inner-wrap { padding:.3rem 0 1.7rem; background:url('../img/obj-popup-map-center.png') repeat-y center top; background-size:100% auto; }
.popup .map .box .inner-wrap::before,
.popup .map .box .inner-wrap::after { content:''; position:absolute; right:0; left:0; width:13.1rem; height:1.4rem; margin:0 auto; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup .map .box .inner-wrap::before { top:1.5rem; background-image:url('../img/obj-popup-map-deco-top.png'); }
.popup .map .box .inner-wrap::after { bottom:1.5rem; background-image:url('../img/obj-popup-map-deco-bottom.png'); }
.popup .map .box .img { position:relative; }
.popup .map .box .img::before,
.popup .map .box .img::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup .map .box .content { margin:2rem 0 0; }
.popup .map .box .content h3 { position:relative; color:#390000; }
.popup .map .box .content h3::before { background-image:url('../img/obj-tit-left-brown.png'); }
.popup .map .box .content h3::after { background-image:url('../img/obj-tit-right-brown.png'); }
.popup .map .box .content h3 .tag { position:absolute; top:-2.2rem; width:5.6rem; height:2.4rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:transparent; font-size:1px; text-indent:-999rem; }
.popup .map .box .content h3 .tag.pink { background-image:url('../img/obj-popup-map-tag-pink.png'); }
.popup .map .box .content h3 .tag.purple { background-image:url('../img/obj-popup-map-tag-purple.png'); }
.popup .map .box .content .info-wrap { margin-top:.6rem; }
.popup .map .box .content .info-wrap li { color:#390000; }
.popup .map .box .content .txt { margin-top:1.8rem; }
.popup .map .box .content .txt::before { margin-bottom:1.5rem; background-image:url('../img/obj-popup-txt-brown.png'); }
.popup .map .box .content .txt p { color:#5a2000; }
.popup .map .box .content .txt p + p { margin-top:1rem; }
.popup .map .box .content .guide-wrap { max-width:27rem; margin:2rem auto 1.1rem; }
.popup .map .box .content .guide-wrap::before { content:''; display:block; background:url('../img/bg-popup-map-item5-guide-top.png') no-repeat center top; background-size:100% auto; aspect-ratio:270 / 47; }
.popup .map .box .content .guide-wrap::after { content:''; display:block; background:url('../img/bg-popup-map-item5-guide-bottom.png') no-repeat center bottom; background-size:100% auto; aspect-ratio:270 / 47; }
.popup .map .box .content .guide-wrap > div { display:flex; justify-content:flex-start; align-items:center; padding:0 0 0 3rem; background:url('../img/bg-popup-map-item5-guide-center.png') repeat-y center top; background-size:100% auto; }
.popup .map .box .content .guide-wrap ul { counter-reset:number 0; }
.popup .map .box .content .guide-wrap ul li { display:flex; color:#5a2000; font-size:1.3rem; font-weight:400; line-height:1.7rem; letter-spacing:-.98px; text-align:left; word-break:keep-all; -webkit-text-stroke:.02rem currentColor; }
.popup .map .box .content .guide-wrap ul li::before { counter-increment:number 1; content:counter(number); display:flex; justify-content:center; align-items:center; flex-shrink:0; width:1.6rem; height:1.6rem; margin-right:.5rem; border-radius:50%; background-color:#ff4f68; color:#fff; font-size:1.3rem; font-weight:400; line-height:1; -webkit-text-stroke:.02rem currentColor; }
.popup .map .box .content .guide-wrap ul li + li { margin-top:1.1rem; }
.popup .map .box .content .guide-wrap ul li em { justify-content:flex-start; color:#ff1f3f; font-size:1.1rem; line-height:1.5rem; -webkit-text-stroke:0; }
.popup .map .box .content .notice-wrap { margin:1.1rem auto 0; }
.popup .map .box .content .notice-wrap li { color:#5a2000; }
.popup .map .item1 .box .content h3 .tag { left:calc(50% - 18rem + 7.8rem); }
.popup .map .item2 .box .content h3 .tag { left:calc(50% - 18rem + 6.3rem); }
.popup .map .item3 .box .content h3 .tag { top:-1.8rem; left:calc(50% - 18rem + 8.2rem); }
.popup .map .item4 .box .content h3 .tag { top:-1.8rem; left:calc(50% - 18rem + 8.8rem); }
.popup .map .item1 .box .img::before { top:-.6rem; left:calc(50% - 18rem + 3.5rem); width:9rem; height:8.3rem; background-image:url('../img/obj-popup-map-item1-rose1.png'); }
.popup .map .item1 .box .img::after { right:calc(50% - 18rem + .1rem); bottom:-.7rem; width:10.8rem; height:13.1rem; background-image:url('../img/obj-popup-map-item1-rose2.png'); }
.popup .map .item2 .box .img::before { bottom:.7rem; left:calc(50% - 18rem - .2rem); width:10.3rem; height:12.5rem; background-image:url('../img/obj-popup-map-item2-rose1.png'); }
.popup .map .item2 .box .img::after { right:calc(50% - 18rem + 2.8rem); bottom:-1.5rem; width:14.7rem; height:8.7rem; background-image:url('../img/obj-popup-map-item2-rose2.png'); }
.popup .map .item3 .box .img::before { top:.7rem; left:calc(50% - 18rem + 5.8rem); width:7.7rem; height:7.6rem; background-image:url('../img/obj-popup-map-item3-rose1.png'); }
.popup .map .item3 .box .img::after { right:calc(50% - 18rem + 2.5rem); bottom:-2rem; width:11.3rem; height:10.1rem; background-image:url('../img/obj-popup-map-item3-rose2.png'); }
.popup .map .item3 .box .img .fox { bottom:-1rem; left:calc(50% - 18rem + 4.3rem); width:9.8rem; height:12.2rem; }
.popup .map .item4 .box .img::before { top:-.1rem; left:calc(50% - 18rem - .7rem); width:13.2rem; height:18.1rem; background-image:url('../img/obj-popup-map-item4-left.png'); }
.popup .map .item4 .box .img::after { right:calc(50% - 18rem - .2rem); bottom:-.8rem; width:13.3rem; height:12.7rem; background-image:url('../img/obj-popup-map-item4-right.png'); }
.popup .map .item5 .box .img::before { bottom:1.2rem; left:calc(50% - 18rem - 1.5rem); width:10.7rem; height:14.9rem; background-image:url('../img/obj-popup-map-item5-rose.png'); }
.popup .map .item5 .box .img::after { right:calc(50% - 18rem + 5.2rem); bottom:-1.2rem; width:8.1rem; height:7.8rem; background-image:url('../img/obj-popup-map-item5-right.png'); }
.popup .map .item6 .box .img::before { top:0rem; left:calc(50% - 18rem + 5.1rem); width:7.4rem; height:7.3rem; background-image:url('../img/obj-popup-map-item6-rose1.png'); }
.popup .map .item6 .box .img::after { right:calc(50% - 18rem + 1.6rem); bottom:-.2rem; width:10.4rem; height:18rem; background-image:url('../img/obj-popup-map-item6-rose2.png'); }
.popup .map .item1 .box .content .info-wrap li.place::before,
.popup .map .item3 .box .content .info-wrap li.place::before,
.popup .map .item5 .box .content .info-wrap li.place::before { background-image:url('../img/obj-popup-map-place-pink.png'); }
.popup .map .item2 .box .content .info-wrap li.place::before,
.popup .map .item4 .box .content .info-wrap li.place::before,
.popup .map .item6 .box .content .info-wrap li.place::before { background-image:url('../img/obj-popup-map-place-purple.png'); }
.popup .map .item5 .box .content .guide-wrap .underline { position:relative; background:url('../img/obj-popup-map-item5-underline.png') repeat-x left bottom; background-size:.1rem auto; }
.popup .map .item5 .box .content .guide-wrap .underline::after { content:''; position:absolute; right:-6rem; bottom:-7.4rem; width:8.6rem; height:9rem; background:url('../img/obj-popup-map-item5-robot.png') no-repeat center; background-size:100% auto; }

.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:320px) {
	nav .depth2 > ul > li > a { font-size:1.3rem; }
}

@media(max-width:400px) {
	nav .depth1 > ul > li > a { font-size:1.8rem; }
}

@media(max-width:400px) {
	nav .depth1 > ul > li > a { font-size:2rem; }
}

@media(min-width:720px) { 
	html { font-size:13px; }
	body { width:100%; background:url('../img/bg-day.jpg') no-repeat center; background-size:cover; }
	body::before { content:''; position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; margin:0 auto; 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 { width:720px; margin:0 auto; box-shadow:0 0 20px rgba(0, 0, 0, .15); }
	.btn-nav { right:calc(50% - 360px + 3rem); }
	.coach-mark { top:calc(100% - 7.5rem - 20px); }

	nav .logo,
	nav .depth1,
	nav .depth1::after { max-width:626px; margin:0 auto; }
	nav .nav-wrap::before { width:210px; height:180px; }
	nav .nav-wrap .nav-wrap-inner::before { width:228px; height:302px; }
	nav .logo { display:flex; justify-content:center; align-items:center; flex-direction:column; }
	nav .btn-close { top:50px; right:28px; width:112px; height:92px; }
	nav .depth1::before { width:118px; height:204px; right:10px; bottom:202px; }
	
	#main .title::before { top:298px; right:calc(50% - 360px - 66px); width:78px; height:76px; transform:scale(1.6); animation:butterfly 1.8s ease-out 2.4s 1 forwards; }
	#main .hotel { top:460px; }
	#main .firecracker1 { top:36px; left:calc(50% - 360px + 26px); width:154px; height:156px; }
	#main .firecracker2 { top:274px; right:calc(50% - 360px + 46px); width:124px; height:136px; }
	#main .balloon1 { top:208px; left:calc(50% - 360px + 16px); width:134px; height:208px; }
	#main .balloon2 { top:334px; right:calc(50% - 360px + 34px); width:92px; height:158px; }
	#main .balloon3 { top:32px; left:calc(50% - 360px + 104px); width:56px; height:90px; }
	#main .rose1 { top:594px; left:-222px; width:340px; height:272px; }
	#main .rose2 { top:990px; left:-142px; width:268px; height:338px; }
	#main .rose3 { top:1104px; left:-160px; width:284px; height:332px; }
	#main .rose4 { top:1128px; left:calc(50% - 360px + 192px); width:282px; height:184px; }
	#main .rose5 { top:1126px; right:calc(50% - 360px + 148px); width:226px; height:188px; }
	#main .rose6 { top:1162px; left:calc(50% - 360px + 28px); width:266px; height:202px; }
	#main .rose7 { top:1150px; right:calc(50% - 360px + 60px); width:214px; height:162px; }
	#main .rose8 { top:1036px; right:calc(50% - 360px + 78px); width:168px; height:196px; }
	#main .rose9 { top:1166px; right:calc(50% - 360px - 152px); width:284px; height:332px; }
	#main .rose10 { top:1238px; left:calc(50% - 360px - 70px); width:228px; height:276px; }
	#main .rose11 { top:833px; left:-36px; width:186px; height:248px; }
	#main .rose12 { top:824px; right:-70px; width:178px; height:210px; }
	#main .butterfly1 { top:592px; left:calc(50% - 360px + 128px); width:94px; height:78px; }
	#main .gate { top:194px; width:360px; }
	@keyframes butterfly {
		0% { top:298px; right:calc(50% - 360px - 66px); transform:scale(1.6); }
		45% { right:calc(50% - 360px + 56px); }
		100% { top:154px; right:calc(50% - 360px + 78px); transform:scale(1); }
	}

	#story::before { height:calc(100% - 3.3rem - 274px); }
	#story .img-wrap::before { bottom:-188px; width:206px; height:500px; }
	#story .img-wrap::after { bottom:-110px; width:170px; height:190px; }
	#story .img-wrap .key { right:calc(50% - 360px + 104px); }
	#story .txt-wrap::before { bottom:-20px; width:86px; height:198px; }
	#story .txt-wrap::after { bottom:-54px; right:42px; width:156px; height:118px; }
	#story .txt-wrap .txt::after { left:calc(50% - 360px + 4rem); }
	#story.on .txt-wrap { animation:txt 2s ease-in-out 0s 1 forwards; }
	@keyframes txt {
		0% { visibility:hidden; height:0; opacity:0; }
		50% { visibility:hidden; height:952px; padding-bottom:344px; opacity:0; }
		100% { visibility:visible; height:auto; padding-bottom:344px; opacity:1; }
	}

	#map .rose1 { top:-40px; width:192px; height:300px; }
	#map .rose2 { top:440px; width:54px; height:182px; }
	#map .rose3 { width:90px; height:196px; }
	#map .rose4 { bottom:-92px; width:126px; height:164px; }
	#map .flower { top:104px; width:88px; height:130px; }

	#concert .inner-wrap::before { left:calc(50% - 360px - 9.1rem); }

	#md .rose5 { right:calc(50% - 360px - 4.9rem); }

	#food .rose4 { left:calc(50% - 360px - 8.1rem); }
	#food .snack::before { right:calc(50% - 360px - 6.7rem); }

	#market::after { left:calc(50% - 360px - 6.6rem); }

	.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:18px; }
}