/**
* Filename :fairytown.css
* Description :fairytown pick styles
**/
/* ================================== base styles & helper ================================== */
@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:'HakgyoansimAllimjangTTF-R';
	src:url('https://wwwrod.everland.com/font/HakgyoansimAllimjangTTF-R.woff2') format('woff2');
	font-weight:400;
	font-style:normal;
}
@font-face {
	font-family:'HakgyoansimAllimjangTTF-B';
	src:url('https://wwwrod.everland.com/font/HakgyoansimAllimjangTTF-B.woff2') format('woff2');
	font-weight:700;
	font-style:normal;
}
@font-face {
	font-family:'LeeSeoyun';
	src:url('https://wwwrod.everland.com/font/LeeSeoyun.woff') format('woff');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'Pretendard';
	src:url('https://wwwrod.everland.com/font/Pretendard/Pretendard-Regular.woff2') format('woff2');
	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:'HakgyoansimWoojuR', 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:'HakgyoansimWoojuR', 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; }
.wrapper > .logo { position:absolute; top:3rem; left:2.4rem; z-index:4; width:13rem; height:2.9rem; }
.btn-nav { display:block; position:fixed; top:2.2rem; right:1rem; z-index:9; width:5.8rem; height:6.1rem; background:url('../img/btn-nav.png') no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; animation:updown 1.8s ease-in-out 0s infinite forwards; }
.sec { position:relative; }
.sec h2 { margin:0 auto; }
.sec .con p { font-size:1.7rem; line-height:2.3rem; letter-spacing:-.51px; }
.sec .num { font-family:'Pretendard'; }
.sec em { display:block; font-style:normal; padding-left:1rem; text-indent:-1rem; word-break:keep-all; }
.sec em::before { content:'* '; }
.list-info { display:flex; justify-content:center; }
.list-info > ul { margin:0 auto; text-align:left; }
.list-info > ul li { position:relative; font-family:'Pretendard'; font-size:1.5rem; font-weight:400; line-height:2.3rem; letter-spacing:-.75px; }
.list-info > ul li::before { content:''; position:absolute; top:.3rem; left:0; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.list-info > ul li > a { display:block; }
.list-info > ul li > a + a { margin-top:.7rem; }
.list-info > ul li .box { display:flex; justify-content:flex-start; align-items:center; }
.list-info > ul li .box > span { display:inline-flex; justify-content:center; align-items:center; height:2.2rem; padding:0 .8rem 0 .7rem; margin-left:.5rem; border-radius:1.1rem; font-size:1.3rem; line-height:1; letter-spacing:-.65px; }
.list-info > ul li .box > span::after { content:'>'; margin-left:.4rem; }
.list-info > ul li + li { margin-top:.1rem; }
.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:.7rem; font-family:'Pretendard'; font-size:1.3rem; font-weight:400; line-height:1.8rem; letter-spacing:-.52px; }
.list-caution > ul li::before { content:'·'; position:absolute; left:0; top:0; }
.list-caution > ul li + li { margin-top:.3rem; }
.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:.2rem; -webkit-text-stroke-color:#fff; }
.btn { display:inline-flex; justify-content:center; align-items:center; }
.copy-wrap { display:flex; justify-content:space-between; align-items:flex-end; padding:0 1.5rem; }
.copy-wrap .left { width:16.3rem; }
.copy-wrap .right { width:7.9rem; }  
.coach-mark { position:absolute; top:127.78vw; left:50%; z-index:2; width:8rem; height:8rem; background:url('../img/obj-coach-mark.png') no-repeat center / 100% auto; font-size:0; transform:translateX(-50%); }

@keyframes updown {
	0% { transform:translateY(0); }
	50% { transform:translateY(.5rem); }
	100% { transform:translateY(0); }
}

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::after { content:''; width:100%; background:url("../img/obj-nav-bottom.png") no-repeat center bottom; background-size:100% auto; aspect-ratio:360 / 164; }
nav .nav-wrap .nav-wrap-inner { overflow:hidden; position:relative; width:100%; padding-bottom:1rem; }
nav .logo { position:relative; width:20.3rem; margin:4.1rem auto 1.4rem; }
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:2.3rem; width:4.4rem; height:4.4rem; 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.4rem; }
nav .depth1 > li { position:relative; z-index:13; margin-bottom:2rem; background-repeat:no-repeat; background-position:center top; background-size:100% auto; }
nav .depth1 > li.water { background-image:url("../img/bg-nav-water-bottom.png"), url("../img/bg-nav-water.png"); background-position:center bottom, center top; background-size:100% auto, 100% auto; }
nav .depth1 > li.dry { background-image:url("../img/bg-nav-dry-bottom.png"), url("../img/bg-nav-dry.png"); background-position:center bottom, center top; background-size:100% auto, 100% auto; }
nav .depth1 > li.product { background-image:url("../img/bg-nav-product-bottom.png"), url("../img/bg-nav-product.png"); background-position:center bottom, center top; background-size:100% auto, 100% auto; }
nav .depth1 > li:last-child { margin-bottom:0; }
nav .depth1 > li > a { display:flex; justify-content:space-between; align-items:center; position:relative; padding:1.2rem 1.8rem .8rem; color:#3d1b00; font-size:2.3rem; line-height:1; letter-spacing:-.46px; } 
nav .depth1 > li > a::before { content:''; width:3.7rem; height:3.7rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
nav .depth1 > li.water > a::before { background-image:url("../img/ico-nav-water.png"); }
nav .depth1 > li.dry > a::before { background-image:url("../img/ico-nav-dry.png"); }
nav .depth1 > li.product > a::before { background-image:url("../img/ico-nav-product.png"); }
nav .depth1 > li > a::after { content:''; width:.9rem; height:.9rem; margin-left:.6rem; background-image:url("../img/ico-nav-arrow-off.png"); background-repeat:no-repeat; background-position:center; background-size:100% auto; transition:.3s; }
nav .depth1 > li.product > a::after { background-image:url("../img/ico-nav-arrow-product-off.png"); }
nav .depth1 > li > a > span { flex:1 0 0; padding-left:.7rem; text-align:left; }
nav .depth2 { display:none; padding:0 0 .8rem 5.8rem; margin-top:-1rem; }
nav .depth2 > ul > li > a { display:flex; justify-content:flex-start; align-items:center; font-size:1.8rem; line-height:4rem; letter-spacing:-.9px; }
nav .depth2 > ul > li > a::before { content:'· '; margin-right:.5rem; }
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; }
nav .depth1 > li.water .depth2 > ul > li > a { color:#00105f; }
nav .depth1 > li.water.on > a { color:#005299; }
nav .depth1 > li.water.on > a::after { background-image:url("../img/ico-nav-arrow-water-on.png"); }
nav .depth1 > li.dry .depth2 > ul > li > a { color:#004313; }
nav .depth1 > li.dry.on > a { color:#008225; }
nav .depth1 > li.dry.on > a::after { background-image:url("../img/ico-nav-arrow-dry-on.png"); }

/* 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; }

/* slick */
.slick-dots { position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); }
.slick-dots li { display:inline-block; width:.8rem; height:.8rem; margin:0 .4rem; border-radius:50%; background:#FFF; text-indent:-9999px; cursor:pointer; }
.slick-dots li.slick-active { background:#005aac; box-shadow:0 1px 2px rgba(0, 60, 143, 1) inset; }

/* swiper */
.swiper-button-prev,
.swiper-button-next { margin-top:0; background-repeat:no-repeat; background-position:center; background-size:100% 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; position:relative; right:auto; bottom:auto; left:auto; width:auto; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width:.7rem; height:.7rem; margin:0 .4rem; border-radius:50%; background:transparent; opacity:1; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { border-radius:0; background-color:transparent; background-repeat:no-repeat; background-position:center; background-size:100% auto; opacity:1; }

/* 메인 */
#main { overflow:hidden; position:relative; width:100%; height:138.89vw; padding-top:3rem; }
#main::before { content:''; position:absolute; top:0; right:0; left:0; width:100%; height:100%; background:url("../img/bg-main.jpg") no-repeat center top; background-size:cover; opacity:.3; animation:main 2s ease-out 0s 1 forwards; }
#main .title { width:71.94vw; margin:0 auto; transform:scale(2.5); animation:title .3s ease-in 0s 1 forwards, swing 2s linear .3s infinite forwards; }
#main .img { position:absolute; bottom:-4.9rem; left:50%; width:83.89vw; transform:translateX(-50%) scale(0); transform-origin:center bottom; animation:scale .5s ease-out .4s 1 forwards; }
#main .coach-mark { position:absolute; bottom:-5rem; left:50%; z-index:2; width:8rem; height:8rem; background:url('../img/obj-coach-mark.png') no-repeat center / 100% auto; font-size:0; transform:translateX(-50%); }
@keyframes main {
	0% { opacity:.1; }
	100% { opacity:1; }
}
@keyframes title {
	0% { transform:scale(2.5); }
	100% { transform:scale(1); }
}
@keyframes swing {
	0% { transform:rotateZ(0deg); }
	50% { transform:rotateZ(2deg); }
	100% { transform:scale(0deg); }
}
@keyframes scale {
	0% { transform:translateX(-50%) scale(0); }
	94% { transform:translateX(-50%) scale(1.1); }
	100% { transform:translateX(-50%) scale(1); }
}

/* map */
#map { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:20.56vw 0 2rem; margin-top:-10.28vw; background:url("../img/bg-map.png") no-repeat center bottom; background-size:100% auto; aspect-ratio:360 / 602; }
#map::before { content:''; position:absolute; top:-4.9rem; left:0; width:12.8rem; height:17rem; background:url("../img/obj-map-water1.png") no-repeat left center; background-size:100% auto; }
#map::after { content:''; position:absolute; top:-7.3rem; right:0; width:7.5rem; height:15.3rem; background:url("../img/obj-map-water2.png") no-repeat right center; background-size:100% auto; }
#map .content-wrap::before { content:''; position:absolute; top:9.7rem; right:0; width:7.9rem; height:8rem; background:url("../img/obj-map-telescope.png") no-repeat center; background-size:100% auto; }
#map h2 { width:9.4rem; margin:0 auto; }
#map .content::before { content:''; position:absolute; bottom:calc(50% - 5.5rem); left:0; width:5.6rem; height:6.6rem; background:url("../img/obj-map-coin.png") no-repeat center; background-size:100% auto; }
#map .content::after { content:''; position:absolute; bottom:5.5rem; right:4.5rem; width:7.2rem; height:8.2rem; background:url("../img/obj-map-treasure.png") no-repeat center; background-size:100% auto; }
#map .content .item { position:absolute; filter:drop-shadow(0 .7rem .7rem rgba(0, 0, 0, .4)); }
#map .content .item > a { display:block; }
#map .content .water { top:calc(50% - 15rem); left:calc(50% - 17rem); width:18.8rem; }
#map .content .water > a { animation:updown 2s ease-in-out 0s infinite forwards; }
#map .content .dry { top:calc(50% + 6rem); left:calc(50% - 18rem + 3rem); width:16.6rem; }
#map .content .dry > a { animation:updown 2s ease-in-out .8s infinite forwards; }
#map .content .product { top:calc(50% - 4.8rem); right:calc(50% - 17rem); width:17.6rem; }
#map .content .product > a { animation:updown 2s ease-in-out .4s infinite forwards; }
#map .content .notice-box { display:inline-block; position:relative; padding:.9rem 1.5rem; margin-top:.5rem; border-radius:1rem; background-color:rgba(255, 255, 255, .5); color:#333; font-size:1.1rem; font-family:'Pretendard'; font-weight:400; letter-spacing:-.55px; box-shadow:0 .4rem .5rem rgba(0, 0, 0, .1); animation:updown 2s ease-in-out .8s infinite forwards; }
#map .content .notice-box::before { content:''; overflow:hidden; position:absolute; top:-.8rem; left:50%; width:.9rem; height:.8rem; background:url("../img/ico-map-notice-arrow.png") no-repeat center bottom; background-size:100% auto; transform:translateX(-50%); }

/* water zone - 공통 */
#water { padding:3.2rem 0 0; background:url("../img/bg-water.jpg") no-repeat center top; background-size:100% auto; }
#water h2 { width:22.5rem; }
#water .item { position:relative; padding:2.2rem 0; }
#water .item h3 { position:relative; max-width:36rem; margin:0 auto; }
#water .item h3 > img { position:relative; z-index:1; }
#water .item > .list-info { position:relative; margin:1.7rem 0 .6rem; }
#water .item > .list-info::before { content:''; position:absolute; top:50%; left:50%; width:100%; background:url("../img/bg-water-info.png") no-repeat center; background-size:100% auto; aspect-ratio:360 / 325; transform:translateX(-50%) translateY(-50%); }
#water .item > .list-info li { padding-left:2.8rem; font-size:1.5rem; font-weight:500; line-height:2.3rem; letter-spacing:-.75px; }
#water .item > .list-info li::before { top:-.1rem; width:2.3rem; height:2.3rem; }
#water .item .swiper .swiper-pagination-bullets.swiper-pagination-horizontal { margin-top:.5rem; }
#water .item .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { width:2rem; height:2rem; background-image:url("../img/ico-water-bullet-active.png"); }
#water .item .swiper .swiper-button-prev,
#water .item .swiper .swiper-button-next { width:1.7rem; height:3.2rem; }
#water .item .swiper .swiper-button-prev { left:calc(50% - 18rem + 3.5rem); background-image:url("../img/ico-water-item-prev.png"); }
#water .item .swiper .swiper-button-next { right:calc(50% - 18rem + 3.5rem); background-image:url("../img/ico-water-item-next.png"); }
#water .item .swiper .img { max-width:36rem; margin:0 auto; }
#water .item .swiper .con { position:relative; max-width:36rem; padding-top:2.7rem; margin:0 auto; background-repeat:no-repeat; background-position:center top; background-size:100% auto; }
#water .item .swiper .con::before,
#water .item .swiper .con::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#water .item .swiper .con h4 { position:relative; }
#water .item .swiper .con h4::before { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#water .item .swiper .con p { margin-top:1.7rem; color:#fff; }
#water .item .swiper .con p + p { margin-top:.6rem; }
#water .item .swiper .con .list-info { margin-top:1.2rem; }
#water .item .swiper .con .list-info > ul li { padding-left:2.5rem; }
#water .item .swiper .con .list-info > ul li::before { top:0; width:2.3rem; height:2.3rem; }
#water .item .swiper .con .list-info > ul li.date::before { background-image:url("../img/ico-water-item-slide-date.png"); }
#water .item .swiper .con .list-info > ul li.time::before { background-image:url("../img/ico-water-item-slide-time.png"); }
#water .item .swiper .con .btn-wrap { position:relative; margin-top:2rem; }
#water .item .swiper .con .btn-wrap .btn { overflow:hidden; display:flex; justify-content:center; align-items:center; position:relative; width:20.8rem; height:4.7rem; padding-right:.8rem; margin:0 auto; border-radius:2.4rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:#fff; font-family:'HakgyoansimAllimjangTTF-R'; font-size:2rem; letter-spacing:-.6px; }
#water .item .swiper .con .btn-wrap .btn::after { content:'>'; position:absolute; right:2.9rem; font-size:1.3rem; letter-spacing:-.39px; }
/* water zone - 워터 플레이 가든 */
#water .item1::before { content:''; position:absolute; top:11.4rem; left:calc(50% - 18rem - 1.7rem); z-index:2; width:15.6rem; height:14.9rem; background:url("../img/obj-water-item1-tip.png") no-repeat center; background-size:100% auto; }
#water .item1 h3::before { content:''; position:absolute; top:-6.2rem; right:calc(50% - 18rem + 4.6rem); width:7rem; height:8.8rem; background:url("../img/obj-water-item1-flag.png") no-repeat center; background-size:100% auto; }
#water .item1 > .list-info li { color:#00586e; text-shadow:0 .1rem .1rem rgba(255, 255, 255, .4); }
#water .item1 > .list-info li.place::before { background-image:url("../img/ico-water-item1-place.png"); }
#water .item1 > .list-info li.date::before { background-image:url("../img/ico-water-item1-date.png"); }
#water .item1 > .list-info li.time::before { background-image:url("../img/ico-water-item1-time.png"); }
#water .item1 > .list-info li .box { color:#00586e; }
#water .item1 > .list-info li .box > span { background-color:#e5fffa; }
#water .item1 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { background-color:#004888; box-shadow:0 1px .1rem rgba(0, 36, 93, 1) inset, 0 .1rem .2rem rgba(0, 0, 0, .2); }
#water .item1 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { background-color:transparent; box-shadow:none; }
#water .item1 .swiper .swiper-button-prev,
#water .item1 .swiper .swiper-button-next { top:3rem; }
#water .item1 .swiper .swiper-slide4 .swiper-button-prev,
#water .item1 .swiper .swiper-slide4 .swiper-button-next,
#water .item1 .swiper .swiper-slide5 .swiper-button-prev,
#water .item1 .swiper .swiper-slide5 .swiper-button-next,
#water .item1 .swiper .swiper-slide6 .swiper-button-prev,
#water .item1 .swiper .swiper-slide6 .swiper-button-next,
#water .item1 .swiper .swiper-slide7 .swiper-button-prev,
#water .item1 .swiper .swiper-slide7 .swiper-button-next { top:5rem; }
#water .item1 .swiper .con .img { max-width:36rem; }
#water .item1 .swiper .con p { text-shadow:0 .1rem .1rem rgba(0, 57, 255, 1); }
#water .item1 .swiper .con .list-info > ul li { color:#cffff9; text-shadow:0 .1rem .1rem rgba(0, 46, 244, 1); }
#water .item1 .swiper .con .list-caution { position:relative; padding-top:2rem; margin:2rem 0 0; }
#water .item1 .swiper .con .list-caution::before { content:''; position:absolute; top:0; right:0; left:0; width:25rem; height:1px; margin:0 auto; background-color:rgba(255, 255, 255, .3); }
#water .item1 .swiper .con .list-caution > ul li { color:#d0f4ff; }
#water .item1 .swiper .swiper-slide1 .con { background-image:url("../img/bg-water-item1.png"); aspect-ratio:360 / 481; }
#water .item1 .swiper .swiper-slide4 .con { background-image:url("../img/bg-water-item4.png"); aspect-ratio:360 / 441; }
#water .item1 .swiper .swiper-slide5 .con { background-image:url("../img/bg-water-item5.png"); aspect-ratio:360 / 444; }
#water .item1 .swiper .swiper-slide6 .con { background-image:url("../img/bg-water-item6.png"); aspect-ratio:360 / 448; }
#water .item1 .swiper .swiper-slide7 .con { background-image:url("../img/bg-water-item7.png"); aspect-ratio:360 / 467; }
#water .item1 .swiper .swiper-slide4 .con::after { bottom:12.4rem; left:calc(50% - 18rem + .9rem); width:9.8rem; height:12.1rem; background-image:url("../img/obj-water-item1-slide4-wanted.png"); }
#water .item1 .swiper .swiper-slide5 .con::before { top:-13.9rem; right:calc(50% - 18rem - .5rem); width:9.3rem; height:19.9rem; background-image:url("../img/obj-water-item1-slide5-robin.png"); }
#water .item1 .swiper .swiper-slide6 .con::before { top:7.9rem; left:calc(50% - 18rem - .3rem); width:6.2rem; height:5.8rem; background-image:url("../img/obj-water-item1-slide6-coin1.png"); }
#water .item1 .swiper .swiper-slide6 .con::after { top:-5.5rem; right:calc(50% - 18rem + 2rem); width:4rem; height:3.7rem; background-image:url("../img/obj-water-item1-slide6-coin2.png"); }
#water .item1 .swiper .swiper-slide7 .con::after { bottom:0rem; left:calc(50% - 18rem + 2.9rem); width:14.9rem; height:18.3rem; background-image:url("../img/obj-water-item1-slide7-chopper.png"); }
#water .item1 .swiper .swiper-slide1 .con h4::before { top:-9.4rem; left:calc(50% - 18rem + 2.6rem); width:10.1rem; height:10.8rem; background-image:url("../img/obj-water-item1-slide-txt1.png"); }
#water .item1 .swiper .swiper-slide4 .con h4::before,
#water .item1 .swiper .swiper-slide5 .con h4::before,
#water .item1 .swiper .swiper-slide7 .con h4::before { width:11.2rem; height:8.2rem; background-image:url("../img/obj-water-item1-slide-txt2.png"); }
#water .item1 .swiper .swiper-slide4 .con h4::before { top:-8.4rem;  left:calc(50% - 18rem + 1.5rem); }
#water .item1 .swiper .swiper-slide5 .con h4::before { top:-6.3rem;  left:calc(50% - 18rem + 5.7rem); }
#water .item1 .swiper .swiper-slide7 .con h4::before { top:-6.9rem; left:calc(50% - 18rem + 5.5rem); }
#water .item1 .swiper .swiper-slide1 .con .btn-wrap::after { content:''; position:absolute; top:-1.8rem; left:calc(50% - 18rem + 6rem); width:6.9rem; height:3.6rem; background:url("../img/obj-water-item1-slide1-hat.png") no-repeat center; background-size:100% auto; }
#water .item1 .swiper .swiper-slide7 .con .list-caution::after { content:''; position:absolute; top:-3.6rem; right:calc(50% - 18rem - .1rem); width:7.6rem; height:6.2rem; background:url("../img/obj-water-item1-slide7-camera.png") no-repeat center; background-size:100% auto; }
#water .item1 .swiper .swiper-slide1 .con .btn-wrap .btn { background-image:url("../img/bg-water-item1-btn.png"); text-shadow:0 .1rem .1rem rgba(10, 137, 187, 1); box-shadow:0 .2rem .5rem rgba(4, 77, 219, 1); }
#water .item1 .swiper .swiper-slide4 .con .btn-wrap .btn { background-image:url("../img/bg-water-item4-btn.png"); text-shadow:0 .1rem .1rem rgba(12, 142, 193, 1); box-shadow:0 .2rem .5rem rgba(0, 44, 255, 1); }
/* water zone - 꼬마 해적단의 놀이터 */
#water .item2 { padding-top:0; margin-bottom:2rem; }
#water .item2::before { content:''; position:absolute; top:5.3rem; right:0; width:6.8rem; height:13.3rem; background:url("../img/obj-water-item2-anchor.png") no-repeat center; background-size:100% auto; }
#water .item2 > .list-info { margin-bottom:1.7rem; }
#water .item2 > .list-info li { color:#003980; }
#water .item2 > .list-info li.place::before { background-image:url("../img/ico-water-item2-place.png"); }
#water .item2 > .list-info li.date::before { background-image:url("../img/ico-water-item2-date.png"); }
#water .item2 > .list-info li.time::before { background-image:url("../img/ico-water-item2-time.png"); }
#water .item2 > .list-info li .box { color:#003980; }
#water .item2 > .list-info li .box > span { background-color:#daf5ff; }
#water .item2 .swiper { overflow:inherit; }
#water .item2 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { background-color:#004888; box-shadow:0 1px .1rem rgba(0, 36, 93, 1) inset, 0 .1rem .2rem rgba(0, 0, 0, .2); }
#water .item2 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { background-color:transparent; box-shadow:none; }
#water .item2 .swiper .swiper-button-prev,
#water .item2 .swiper .swiper-button-next { top:3rem; }
#water .item2 .swiper .con p { text-shadow:0 .1rem .1rem rgba(4, 157, 174, 1); }
#water .item2 .swiper .con .list-info > ul li { color:#fff9e9; text-shadow:0 .1rem .1rem rgba(3, 136, 176, 1); }
#water .item2 .swiper .con .btn-wrap .btn { background-image:url("../img/bg-playground-item1-btn.png"); text-shadow:0 .1rem .1rem rgba(0, 166, 169, 1); box-shadow:0 .2rem .5rem rgba(7, 121, 204, 1); }
#water .item2 .swiper .con .list-caution { position:relative; padding-top:2rem; margin:2rem 0 0; }
#water .item2 .swiper .con .list-caution::before { content:''; position:absolute; top:0; right:0; left:0; width:25rem; height:1px; margin:0 auto; background-color:rgba(255, 255, 255, .3); }
#water .item2 .swiper .con .list-caution > ul li { padding-left:1rem; color:#d0fff6; }
#water .item2 .swiper .con .list-caution > ul li::before { content:'※'; }
#water .item2 .swiper .swiper-slide1 .con { background-image:url("../img/bg-playground-item1.png"); aspect-ratio:360 / 296; }
#water .item2 .swiper .swiper-slide2 .con { background-image:url("../img/bg-playground-item2.png"); aspect-ratio:360 / 316; }
#water .item2 .swiper .swiper-slide3 .con { background-image:url("../img/bg-playground-item3.png"); aspect-ratio:360 / 297; }
#water .item2 .swiper .swiper-slide4 .con { background-image:url("../img/bg-playground-item4.png"); aspect-ratio:360 / 296; }
#water .item2 .swiper .swiper-slide5 .con { background-image:url("../img/bg-playground-item5.png"); aspect-ratio:360 / 326; }
#water .item2 .swiper .swiper-slide2 .con::after { bottom:-5rem; left:calc(50% - 18rem + 1rem); width:10.4rem; height:15.2rem; background-image:url("../img/obj-water-item2-slide2-franky.png"); }
#water .item2 .swiper .swiper-slide3 .con::after { bottom:1.5rem; left:calc(50% - 18rem + 1.3rem); width:19.7rem; height:14.1rem; background-image:url("../img/obj-water-item2-slide3-nami.png"); }
#water .item2 .swiper .swiper-slide4 .con::after { top:10.7rem; right:calc(50% - 18rem + .1rem); width:9.1rem; height:5.7rem; background-image:url("../img/obj-water-item2-slide4-hat.png"); }
#water .item2 .swiper .swiper-slide5 .con::before { top:-4rem; left:calc(50% - 18rem + 3rem); width:9.6rem; height:7.7rem; background-image:url("../img/obj-water-item2-slide5-turtle.png"); }
#water .item2 .swiper .swiper-slide1 .con h4::before { top:-9.5rem; left:calc(50% - 18rem + 2.5rem); width:9.6rem; height:10.5rem; background-image:url("../img/obj-water-item2-slide-txt1.png"); }
#water .item2 .swiper .swiper-slide5 .con .btn-wrap .btn { box-shadow:0 .2rem .5rem rgba(5, 158, 209, 1); }
/* water zone - 워터 공연 */
#water .item3 { padding:7.2rem 0 3rem; margin-top:1rem; background:url("../img/bg-waterfun.png") no-repeat center top; background-size:100% auto; }
#water .item3::before { content:''; position:absolute; top:22.2rem; right:calc(50% - 18rem - .4rem); z-index:2; width:15.6rem; height:15.5rem; background:url("../img/obj-water-item3-tip.png") no-repeat center; background-size:100% auto; }
#water .item3 > .list-info { margin:.4rem auto 2.2rem; }
#water .item3 > .list-info::before { display:none; }
#water .item3 > .list-info li { color:#e7ceff; }
#water .item3 > .list-info li.place::before { background-image:url("../img/ico-water-item3-place.png"); }
#water .item3 > .list-info li.date { margin-top:.4rem; }
#water .item3 > .list-info li.date::before { background-image:url("../img/ico-water-item3-date.png"); }
#water .item3 > .list-info li.time::before { background-image:url("../img/ico-water-item3-time.png"); }
#water .item3 > .list-info li .box { color:#e7ceff; }
#water .item3 > .list-info li .box > span { background-color:#001a7b; }
#water .item3 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { background-color:#7c89db; box-shadow:0 1px .1rem rgba(80, 94, 198, 1) inset, 0 .1rem .2rem rgba(0, 0, 0, .2); }
#water .item3 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { background-color:transparent; box-shadow:none; }
#water .item3 .swiper .swiper-button-prev,
#water .item3 .swiper .swiper-button-next { top:3rem; }
#water .item3 .swiper .swiper-slide1 .swiper-button-prev,
#water .item3 .swiper .swiper-slide1 .swiper-button-next,
#water .item3 .swiper .swiper-slide2 .swiper-button-prev,
#water .item3 .swiper .swiper-slide2 .swiper-button-next,
#water .item3 .swiper .swiper-slide3 .swiper-button-prev,
#water .item3 .swiper .swiper-slide3 .swiper-button-next,
#water .item3 .swiper .swiper-slide4 .swiper-button-prev,
#water .item3 .swiper .swiper-slide4 .swiper-button-next { top:5rem; }
#water .item3 .swiper .con p { text-shadow:0 .1rem .1rem rgba(48, 23, 252, 1); }
#water .item3 .swiper .con .list-info > ul li { color:#fff9e9; text-shadow:0 .1rem .1rem rgba(34, 7, 248, 1); }
#water .item3 .swiper .con .list-caution { position:relative; padding-top:2rem; margin:2rem 0 0; }
#water .item3 .swiper .con .list-caution::before { content:''; position:absolute; top:0; right:0; left:0; width:25rem; height:1px; margin:0 auto; background-color:rgba(255, 255, 255, .3); }
#water .item3 .swiper .con .list-caution > ul li { color:#d0f4ff; }
#water .item3 .swiper .swiper-slide1 .con { background-image:url("../img/bg-waterfun-item1.png"); aspect-ratio:360 / 558; }
#water .item3 .swiper .swiper-slide2 .con { background-image:url("../img/bg-waterfun-item2.png"); aspect-ratio:360 / 326; }
#water .item3 .swiper .swiper-slide3 .con { background-image:url("../img/bg-waterfun-item3.png"); aspect-ratio:360 / 537; }
#water .item3 .swiper .swiper-slide4 .con { background-image:url("../img/bg-waterfun-item4.png"); aspect-ratio:360 / 451; }
#water .item3 .swiper .swiper-slide5 .con { background-image:url("../img/bg-waterfun-item5.png"); aspect-ratio:360 / 382; }
#water .item3 .swiper .swiper-slide1 .con::after { top:10rem; left:calc(50% - 18rem + .2rem); width:5.4rem; height:7.1rem; background-image:url("../img/obj-water-item3-slide1-water.png"); }
#water .item3 .swiper .swiper-slide2 .con::after { top:10rem; left:calc(50% - 18rem + 4.6rem); width:3.5rem; height:4.6rem; background-image:url("../img/obj-water-item3-slide2-note.png"); }
#water .item3 .swiper .swiper-slide1 .con h4::before,
#water .item3 .swiper .swiper-slide2 .con h4::before,
#water .item3 .swiper .swiper-slide3 .con h4::before,
#water .item3 .swiper .swiper-slide4 .con h4::before,
#water .item3 .swiper .swiper-slide5 .con h4::before { width:10.1rem; height:10.8rem; background-image:url("../img/obj-water-item3-slide-txt1.png"); }
#water .item3 .swiper .swiper-slide1 .con h4::before { top:-9.4rem; left:calc(50% - 18rem + .9rem); }
#water .item3 .swiper .swiper-slide2 .con h4::before { top:-9.5rem; left:calc(50% - 18rem + 2.5rem); }
#water .item3 .swiper .swiper-slide3 .con h4::before { top:-9.2rem; left:calc(50% - 18rem + 1.3rem); }
#water .item3 .swiper .swiper-slide4 .con h4::before { top:-9.2rem; left:calc(50% - 18rem + 4rem); }
#water .item3 .swiper .swiper-slide5 .con h4::before { top:-9rem; left:calc(50% - 18rem + 4.2rem); }
#water .item3 .swiper .con .btn-wrap .btn { width:23.2rem; }
#water .item3 .swiper .con .btn-wrap .btn::after { right:2.3rem; }
#water .item3 .swiper .swiper-slide1 .con .btn-wrap .btn { background-image:url("../img/bg-waterfun-item1-btn.png"); text-shadow:0 .1rem .1rem rgba(110, 22, 255, 1); box-shadow:0 .2rem .5rem rgba(53, 23, 210, 1); }
#water .item3 .swiper .swiper-slide3 .con .btn-wrap .btn { background-image:url("../img/bg-waterfun-item3-btn.png"); text-shadow:0 .1rem .1rem rgba(107, 19, 255, 1); box-shadow:0 .2rem .5rem rgba(51, 21, 214, 1); }
#water .item3 .info-wrap { position:relative; padding:2rem; margin:2.5rem 3rem 0; border-radius:2rem; background-color:rgba(20, 8, 60, .4); }
#water .item3 .info-wrap::after { content:''; position:absolute; top:-2rem; left:.1rem; width:4.1rem; height:4.1rem; background:url("../img/obj-water-info.png") no-repeat center; background-size:100% auto; } 
#water .item3 .info-wrap > ul > li { color:#d0f4ff; font-size:1.3rem; font-family:'Pretendard'; line-height:1.8rem; letter-spacing:-.52px; text-align:left; word-break:keep-all; }
#water .item3 .notice-box { margin:2.5rem auto 0; color:#a6a3d0; font-size:1.2rem; font-family:'Pretendard'; letter-spacing:-.6px; }
#water .item3 .notice-box::before { content:'※'; }

/* dry zone */
#dry { padding:0 0 2rem; background:url("../img/bg-dry.jpg") no-repeat center top; background-size:100% auto; } 
#dry::before { content:''; position:absolute; top:1rem; left:0; z-index:2; width:4.8rem; height:10.4rem; background:url("../img/obj-dry-leaf1.png") no-repeat left center; background-size:100% auto; }
#dry::after { content:''; position:absolute; top:17rem; right:0; bottom:1rem; width:4.3rem; height:4.9rem; background:url("../img/obj-dry-leaf2.png") no-repeat right center; background-size:100% auto; }
#dry h2 { display:flex; flex-direction:column; justify-content:end; align-items:center; padding-bottom:2.2rem; aspect-ratio:360 / 226; }
#dry h2 img { width:19.5rem; margin-left:-.7rem; }
#dry .item-wrap { margin-top:1.2rem; }
#dry .item { padding:2.8rem 0; margin:0 1.5rem; }
#dry .item .img { position:relative; max-width:33rem; margin:0 auto; }
#dry .item .img::before,
#dry .item .img::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#dry .item .img img { position:relative; }
#dry .item h3 { position:relative; max-width:36rem; margin:0 auto; }
#dry .item .con { position:relative; margin-top:1.6rem; }
#dry .item .con p { margin:1.4rem auto 1.2rem; color:#2b1400; }
#dry .item .list-info > ul li { padding-left:2.2rem; color:#5b2200; }
#dry .item .list-info > ul li + li { margin-top:.2rem; }
#dry .item .list-info > ul li .box { color:#5b2200; }
#dry .item .list-info > ul li .box > span { background-color:#fbf1e3;}
#dry .item .list-info > ul li::before { width:1.5rem; height:1.5rem; }
#dry .item .list-info > ul li.date::before { background-image:url("../img/ico-dry-item-date.png"); }
#dry .item .list-info > ul li.place::before { background-image:url("../img/ico-dry-item-place.png"); }
#dry .item .btn { width:22rem; height:4.9rem; margin-top:2.1rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:#fff; font-family:'HakgyoansimAllimjangTTF-R'; font-size:2rem; letter-spacing:-.6px; box-shadow:0 .1rem .2rem rgba(0, 0, 0, .2); }
#dry .item .btn::after { content:'>'; margin-left:3.7rem; margin-right:-2.5rem; font-size:1.3rem; }
#dry .item.end { position:relative; }
#dry .item.end > * { opacity:.5; }
#dry .item.end::after { content:''; position:absolute; top:calc(50% - 4.5rem); left:50%; width:15.8rem; height:15.8rem; background:url("../img/img-dry-end.png") no-repeat center; background-size:100% auto; transform:translateX(-50%) translateY(-50%); }
#dry .copy-wrap { justify-content:flex-end; }
/* dry zone - 방탈출 */
#dry .item1 .img::after { bottom:-5.8rem; right:calc(50% - 16.5rem - .1rem); width:8.6rem; height:11.8rem; background-image:url("../img/obj-dry-item1-key.png"); } 
#dry .item1 .con p { margin-bottom:0; }
/* dry zone - 바오패밀리 생일 */
#dry .item2 .img::before { top:-2.3rem; right:-1.5rem; z-index:1; width:6.1rem; height:13.9rem; background-image:url("../img/obj-dry-item2-bamboo.png"); } 
#dry .item2 .img::after { bottom:1.1rem; left:-1.5rem; width:3.8rem; height:3.5rem; background-image:url("../img/obj-dry-item2-leaf.png"); }
#dry .item2 .btn { background-image:url("../img/bg-dry-item2-btn.png"); text-shadow:0 .1rem .1rem rgba(14, 36, 5, 1); }
/* dry zone - 한 여름 밤의 반딧불이 */
#dry .item3 .img::before { top:-2.7rem; right:calc(50% - 16.5rem - .2rem); width:4rem; height:3.3rem; background-image:url("../img/obj-dry-item3-leaf.png"); } 
#dry .item3 .img .slider::after { content:''; position:absolute; top:0; left:50%; width:28.7rem; height:24.9rem; background:url("../img/obj-dry-item3-sparkle.png") no-repeat center; background-size:100% auto; transform:translateX(-50%); }
#dry .item3 .btn { background-image:url("../img/bg-dry-item3-btn.png"); text-shadow:0 .1rem .1rem rgba(34, 36, 2, 1); }
#dry .item3 .list-info > ul li .box > span { margin-left:0; }
/* dry zone - EVER WISH 콜라보 */
#dry .item4 .con::after { content:''; position:absolute; right:calc(50% - 16.5rem + 2.6rem); bottom:3.9rem; width:2.6rem; height:3.9rem; background:url("../img/obj-dry-item4-star2.png") no-repeat center; background-size:100% auto; }
#dry .item4 .con h3 { position:relative; }
#dry .item4 .con h3::before { content:''; position:absolute; top:-4.4rem; left:calc(50% - 16.5rem + 1.5rem); width:3.8rem; height:5.9rem; background:url("../img/obj-dry-item4-star1.png") no-repeat center; background-size:100% auto; }
#dry .item4 .btn { background-image:url("../img/bg-dry-item4-btn.png"); text-shadow:0 .1rem .1rem rgba(47, 25, 4, 1); }

/* MD / F&B zone */
#product { padding:5.1rem 0 0; background:url("../img/bg-product.jpg") no-repeat center top; background-size:100% auto; }
#product h2 { padding-left:4.1rem; }
#product h2::before { content:''; position:absolute; top:4.1rem; left:calc(50% - 18rem - .6rem); width:10.4rem; height:5.7rem; background:url("../img/obj-product-treasure.png") no-repeat center; background-size:100% auto; }
#product h2 img { width:23.1rem; }
#product .item h3 { position:relative; max-width:36rem; margin:0 auto; }
#product .item > p { font-size:1.6rem; line-height:2rem; letter-spacing:-0.16px; }
#product .item .img { position:relative; margin:0 auto; }
#product .item .list-info > ul li { padding-left:1.8rem; }
#product .item .list-info > ul li::before { top:0; width:1.5rem; height:2.3rem; }
/* md */
#product .md { padding:2rem 0 8.4rem; }
#product .md .item > p { margin-top:1.5rem; }
#product .md .item .img { width:31.1rem; }
#product .md .item:not(.item2) .img::before,
#product .md .item:not(.item2) .img::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#product .md .item .swiper { overflow:initial; }
#product .md .item .swiper .swiper-control { display:none; justify-content:center; align-items:center; margin-top:1.4rem; }
#product .md .item .swiper .swiper-control.on { display:flex; }
#product .md .item .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { background-color:#a53abc; box-shadow:0 1px .1rem rgba(125, 27, 154, 1) inset, 0 .1rem .2rem rgba(0, 0, 0, .2); }
#product .md .item .swiper .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { width:2.1rem; height:1.9rem; background-color:transparent; background-image:url("../img/ico-md-bullet-active.png"); box-shadow:none; }
#product .md .item .swiper .swiper-button-prev,
#product .md .item .swiper .swiper-button-next { position:relative; top:auto; width:2rem; height:1.9rem; margin:0 .9rem; }
#product .md .item .swiper .swiper-button-prev { left:auto; background-image:url("../img/ico-md-item-prev.png"); }
#product .md .item .swiper .swiper-button-next { right:auto; background-image:url("../img/ico-md-item-next.png"); }
#product .md .item .list-info { margin:.8rem auto 2.5rem; }
#product .md .item .list-info > ul li .box { color:#570051; }
#product .md .item .list-info > ul li .box > span { background-color:#fdf1ff; }
/* md - 원피스 MD */
#product .md .item1 { padding:1.1rem 0 3rem; }
#product .md .item1 > p { color:#250042; }
#product .md .item1 .list-info > ul li { color:#570051; }
#product .md .item1 .swiper::before { content:''; position:absolute; top:-3.7rem; right:calc(50% - 18rem - 1rem); z-index:2; width:5.2rem; height:5.4rem; background:url("../img/obj-md-item1-treasure.png") no-repeat center; background-size:100% auto; }
#product .md .item1 .swiper .swiper-slide1 .img::after { right:-1.6rem; bottom:-2.2rem; width:17.3rem; height:15.3rem; background-image:url("../img/obj-md-item1-slide1-robin.png"); }
#product .md .item1 .list-info > ul li::before { background-image:url("../img/ico-md-item1-place.png"); }
/* md - 원피스 포토이즘 */
#product .md .item2 { padding:3rem 0; }
#product .md .item2 > p { color:#4d001b; }
#product .md .item2 .list-info > ul li { color:#570017; }
#product .md .item2 .list-info > ul li::before { background-image:url("../img/ico-md-item2-place.png"); }
#product .md .item2 .list-info > ul li.date::before { background-image:url("../img/ico-md-item2-date.png"); }
/* md - 레시 x KBO 팝업 */
#product .kbo { position:relative; padding:7.4rem 0 5.6rem; background:url("../img/bg-kbo.jpg") no-repeat center top; background-size:100% auto; }
#product .kbo::before { content:''; position:absolute; top:-11.1rem; right:0; left:0; background:url("../img/obj-food-wave.png") no-repeat center; background-size:100% auto; aspect-ratio:360 / 205; }
#product .md .item3 { padding:1rem 0 0; }
#product .md .item3 > p { color:#001b42; }
#product .md .item3 .list-info > ul li { color:#00407c; }
#product .md .item3 .list-info > ul li.place::before { background-image:url("../img/ico-md-item3-place.png"); }
#product .md .item3 .list-info > ul li.date::before { background-image:url("../img/ico-md-item3-date.png"); }
#product .md .item3 .list-info > ul li .box { color:#00407c; }
#product .md .item3 .list-info > ul li .box > span { background-color:#f5fdff; }
/* food */
#product .food .item > p { margin:1rem auto; color:#1b2731; }
/* food - 원피스 F&B */
#product .food .item1 { position:relative; padding:1rem 0 3.2rem; }
#product .food .item1::after { content:''; position:absolute; top:4.3rem; left:1.5rem; width:4.9rem; height:5.4rem; background:url("../img/obj-food-item1-chicken.png") no-repeat center; background-size:100% auto; }
#product .food .item1 .img { margin-top:.3rem; }
#product .food .item1 .list-food { display:flex; justify-content:center; margin-top:.5rem; }
#product .food .item1 .list-food ul { counter-reset:number 0; display:flex; flex-wrap:wrap; row-gap:1.5rem; max-width:31rem; }
#product .food .item1 .list-food ul li { position:relative; width:50%; padding-left:2.2rem; text-align:left; }
#product .food .item1 .list-food ul li::before { counter-increment:number 1; content:counter(number); display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; width:1.9rem; height:1.9rem; border-radius:50%; color:#8ef6ff; font-family:'HakgyoansimAllimjangTTF-B'; font-size:1.2rem; letter-spacing:-.36px; }
#product .food .item1 .list-food ul li:nth-child(1)::before { background-color:#006537; }
#product .food .item1 .list-food ul li:nth-child(2)::before { background-color:#cb171e; }
#product .food .item1 .list-food ul li:nth-child(3)::before { background-color:#e46010; }
#product .food .item1 .list-food ul li:nth-child(4)::before { background-color:#96720f; }
#product .food .item1 .list-food ul li:nth-child(2n) { padding-left:3.2rem; }
#product .food .item1 .list-food ul li:nth-child(2n)::before { left:1rem; }
#product .food .item1 .list-food ul li h4 { font-family:'HakgyoansimAllimjangTTF-R'; font-size:1.7rem; line-height:2.1rem; letter-spacing:-.17px; word-break:keep-all; }
#product .food .item1 .list-food ul li:nth-child(1) h4 { color:#006537; }
#product .food .item1 .list-food ul li:nth-child(2) h4 { color:#cb171e; }
#product .food .item1 .list-food ul li:nth-child(3) h4 { color:#e46010; }
#product .food .item1 .list-food ul li:nth-child(4) h4 { color:#96720f; }
#product .food .item1 .list-info .place::before { top:0; left:-.2rem; width:1.5rem; height:2.3rem; background-image:url("../img/ico-food-item1-place.png"); }
#product .food .item1 .list-info > ul li .box > span { background-color:#e2fdff; }
/* food - 알프스 쿠체 & 위대한 스낵 항로 */
#product .food .item2 { padding:3.1rem 0 1.6rem; }
#product .food .item2 .list-info { margin-top:1rem; }
#product .food .item2 .list-info > ul li { color:#572500; }
#product .food .item2 .list-info > ul li.place::before { background-image:url("../img/ico-food-item2-place.png"); }
/* food - 악마의 열매 아이스크림 */
#product .food .item3 { padding:1.6rem 0 1.3rem; }
#product .food .item3 h3::before { content:''; position:absolute; top:6rem; left:-1rem; width:6.8rem; height:8.4rem; background:url("../img/obj-food-item3-fruit.png") no-repeat center; background-size:100% auto; }
#product .food .item3 .img::before { content:''; position:absolute; top:-4.2rem; right:0; left:0; width:100%; margin:0 auto; background:url("../img/obj-food-item3-island.png") no-repeat center; background-size:100% auto; aspect-ratio:360 / 216;}
#product .food .item3 .img img { position:relative; margin-top:2rem; }

/* 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, .85); transition:.3s; }
.popup .content-wrap { display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; width:100%; height:100dvh; }
/* .popup .content-wrap::-webkit-scrollbar { display:none; } */
/* popup - 지도 */
.popup .content-wrap .top { position:relative; z-index:2; }
.popup .content-wrap .top h3 { transform:scale(0); }
.popup .content-wrap .top .img { position:relative; transform:scale(0); }
.popup .content-wrap .top .btn-wrap .item { position:absolute; }
.popup .content-wrap .top .btn-wrap .item > a { display:block; position:relative; z-index:1; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:transparent; font-size:0; text-indent:-999rem; }
.popup .content-wrap .top .btn-wrap .item::before,
.popup .content-wrap .top .btn-wrap .item::after { content:''; position:absolute; z-index:1; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup .content-wrap .top .notice-box { position:absolute; color:#fff; font-size:1.2rem; font-family:'Pretendard'; letter-spacing:-.6px; }
.popup .content-wrap .top .notice-box::before { content:'※'; }
.popup .content-wrap .bottom { position:absolute; z-index:1; right:0; bottom:0; left:0; margin:0 auto; }
.popup .content-wrap .btn.close { position:absolute; top:2.5rem; right:2.3rem; z-index:2; width:4.4rem; height:4.4rem; background:url("../img/btn-popup-close.png") no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-999rem; }
.popup.on { display:flex; }
.popup.on .content-wrap .top h3 { animation:title .3s ease-in 0s 1 forwards; }
.popup.on .content-wrap .top .img { animation:scale2 .5s ease-out .4s 1 forwards; }
@keyframes scale2 {
	0% { transform:scale(0); }
	94% { transform:scale(1.1); }
	100% { transform:scale(1); }
}
/* popup - 흠뻑흠뻑존 */
.popup.water .content-wrap { padding-bottom:8.8rem; }
.popup.water .content-wrap .img { margin-top:-1.4rem; }
.popup.water .content-wrap .top .btn-wrap .item1 { top:7.5rem; left:calc(50% - 18rem + 2.7rem); }
.popup.water .content-wrap .top .btn-wrap .item2 { top:4.7rem; right:calc(50% - 18rem + 2.3rem); }
.popup.water .content-wrap .top .btn-wrap .item3 { right:calc(50% - 18rem + 7.9rem); bottom:7.2rem; }
.popup.water .content-wrap .top .btn-wrap .item1 > a { width:13.2rem; height:4.9rem; background-image:url("../img/btn-popup-water-item1.png"); }
.popup.water .content-wrap .top .btn-wrap .item2 > a { width:14.2rem; height:3rem; background-image:url("../img/btn-popup-water-item2.png"); }
.popup.water .content-wrap .top .btn-wrap .item3 > a {  width:10.1rem; height:3rem; background-image:url("../img/btn-popup-water-item3.png"); }
.popup.water .content-wrap .top .btn-wrap .item1::after { top:-.5rem; left:-.5rem; width:3rem; height:6.2rem; background-image:url("../img/obj-popup-water-btn-item1.png"); }
.popup.water .content-wrap .top .btn-wrap .item2::before { top:-4.4rem; right:-.3rem; width:5.2rem; height:6.5rem; background-image:url("../img/obj-popup-water-btn-item2.png"); }
.popup.water .content-wrap .top .btn-wrap .item3::after { top:-1.8rem; right:-1.2rem; width:2.2rem; height:2.7rem; background-image:url("../img/obj-popup-water-btn-item3.png"); }
/* popup - 뽀송뽀송존 */
.popup.dry .content-wrap { padding-bottom:10.4rem; }
.popup.dry .content-wrap .top > h3 { position:relative; }
.popup.dry .content-wrap .img { margin-top:-.4rem; }
.popup.dry .content-wrap .top .btn-wrap .item1 { bottom:14.7rem; left:calc(50% - 18rem + 11.1rem); }
.popup.dry .content-wrap .top .btn-wrap .item2 { top:11.2rem; right:calc(50% - 18rem + 11rem); }
.popup.dry .content-wrap .top .btn-wrap .item3 { bottom:3.4rem; left:calc(50% - 18rem + 8.6rem); }
.popup.dry .content-wrap .top .btn-wrap .item4 { top:8.4rem; right:calc(50% - 18rem + 4.5rem); }
.popup.dry .content-wrap .top .btn-wrap .item1 > a { width:8.3rem; height:3rem; background-image:url("../img/btn-popup-dry-item1.png"); }
.popup.dry .content-wrap .top .btn-wrap .item2 > a { width:11.4rem; height:4.9rem; background-image:url("../img/btn-popup-dry-item2.png"); }
.popup.dry .content-wrap .top .btn-wrap .item3 > a {  width:12.9rem; height:3rem; background-image:url("../img/btn-popup-dry-item3.png"); }
.popup.dry .content-wrap .top .btn-wrap .item4 > a {  width:12.9rem; height:4rem; background-image:url("../img/btn-popup-dry-item4.png"); }
.popup.dry .content-wrap .top .btn-wrap .item1::after { top:-1.9rem; left:-.6rem; width:2.6rem; height:3.8rem; background-image:url("../img/obj-popup-dry-btn-item1.png"); }
.popup.dry .content-wrap .top .btn-wrap .item2::before { top:-2rem; left:-1rem; z-index:2; width:2.7rem; height:3.2rem; background-image:url("../img/obj-popup-dry-btn-item2-hat.png"); }
.popup.dry .content-wrap .top .btn-wrap .item2::after { right:2.7rem; bottom:-1.3rem; width:1.9rem; height:2.6rem; background-image:url("../img/obj-popup-dry-btn-item2-leaf.png"); }
.popup.dry .content-wrap .top .btn-wrap .item3::before { bottom:-2.9rem; left:-.2rem; width:13.1rem; height:13rem; background-image:url("../img/obj-popup-dry-btn-item3.png"); }
.popup.dry .content-wrap .top .btn-wrap .item4::after { top:-1rem; left:-.1rem; width:1.8rem; height:1.8rem; background-image:url("../img/obj-popup-dry-btn-item4.png"); }
.popup.dry .content-wrap .top .notice-box { right:0; bottom:-1.5rem; left:0; margin:0 auto; }
/* popup - F&B / MD */
.popup.product .content-wrap { padding-bottom:17.9rem; }
.popup.product .content-wrap .img { margin-top:-6.4rem; }
.popup.product .content-wrap .top .btn-wrap .item1 { top:6.3rem; right:calc(50% - 18rem + 3.5rem); }
.popup.product .content-wrap .top .btn-wrap .item2 { top:10rem; left:calc(50% - 18rem + 3.5rem); }
.popup.product .content-wrap .top .btn-wrap .item3 { right:calc(50% - 18rem + 2.2rem); bottom:10.4rem; }
.popup.product .content-wrap .top .btn-wrap .item1 > a { width:12.6rem; height:3rem; background-image:url("../img/btn-popup-product-item1.png"); }
.popup.product .content-wrap .top .btn-wrap .item2 > a { width:12.6rem; height:3rem; background-image:url("../img/btn-popup-product-item2.png"); }
.popup.product .content-wrap .top .btn-wrap .item3 > a {  width:13.1rem; height:4.9rem; background-image:url("../img/btn-popup-product-item3.png"); }
.popup.product .content-wrap .top .btn-wrap .item1::after { top:-2.2rem; right:-1.1rem; width:4.5rem; height:3.6rem; background-image:url("../img/obj-popup-product-btn-item1.png"); }
.popup.product .content-wrap .top .btn-wrap .item2::after { top:-1.8rem; left:-1.1rem; width:2.4rem; height:2.9rem; background-image:url("../img/obj-popup-product-btn-item2.png"); }
.popup.product .content-wrap .top .btn-wrap .item3::after { top:-1.3rem; left:-1.4rem; width:3.2rem; height:2.2rem; background-image:url("../img/obj-popup-product-btn-item3.png"); }
.popup.product .content-wrap .top .notice-box { right:calc(50% - 18rem + 4.2rem); bottom:-.4rem; }
/* popup - 현상수배 인증샷 참여 방법 */
.popup.event { background-color:rgba(0, 0, 0, .7); }
.popup.event .content-wrap { justify-content:center; }
.popup.event .content-wrap .content { position:relative; width:100%; margin-top:6.5rem; }
.popup.event .content-wrap .content::before { content:''; position:absolute; top:-20.2rem; left:calc(50% - 18rem + 4.1rem); width:27.2rem; height:22.4rem; background:url("../img/obj-popup-event-wanted1.png") no-repeat center; background-size:100% auto; }
.popup.event .content-wrap .content::after { content:''; position:absolute; bottom:-7.7rem; right:calc(50% - 18rem - .4rem); width:12.2rem; height:15.3rem; background:url("../img/obj-popup-event-wanted2.png") no-repeat center; background-size:100% auto; }
.popup.event .content-wrap .content .img { position:relative; z-index:2; }
.popup.event .content-wrap .content .con { display:flex; justify-content:center; align-items:center; flex-direction:column; width:calc(100% - 3rem); max-width:33rem; margin:0 auto; border:1px solid #53413e; background:url("../img/bg-popup-event.png") no-repeat center; background-size:100% auto; aspect-ratio:330 / 245; }
.popup.event .content-wrap .content .con h4 { margin-bottom:1.3rem; color:#53413e; font-size:2.2rem; font-family:'HakgyoansimAllimjangTTF-B'; letter-spacing:-1.1px; } 
.popup.event .content-wrap .content .con h4.stroke::before { -webkit-text-stroke-color:#fff6ed; }
.popup.event .content-wrap .content .con .list-num { display:flex; justify-content:center; }
.popup.event .content-wrap .content .con .list-num ul { counter-reset:number 0; display:flex; flex-wrap:wrap; row-gap:1rem; max-width:27rem; }
.popup.event .content-wrap .content .con .list-num ul li { position:relative; padding-left:2.1rem; font-size:1.5rem; font-family:'HakgyoansimAllimjangTTF-R'; line-height:2rem; letter-spacing:-.75px; text-align:left; word-break:keep-all; }
.popup.event .content-wrap .content .con .list-num ul li::before { counter-increment:number 1; content:counter(number); display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; width:1.6rem; height:1.6rem; border-radius:50%; background-color:#fff6ed; color:#53413e; font-family:'HakgyoansimAllimjangTTF-B'; font-size:1.2rem; letter-spacing:-.36px; }
.popup.event .content-wrap .content .con .list-num ul li > strong { color:#5b327d; }
.popup.event .content-wrap .content .con .list-num ul li .hashtag { display:block; color:#8b3b1f; font-size:1.8rem; font-family:'LeeSeoyun'; line-height:2rem; word-break:keep-all; }
/* popup - 공연 스토리 */
.popup.story .content-wrap { justify-content:center; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup.story .content { position:relative; }
.popup.story .content::before,
.popup.story .content::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; } 
.popup.story .content h4 { position:relative; }
.popup.story .content h4::before { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup.story .content .txt { margin-top:2rem; }
.popup.story .content .txt p { color:#0a1f6a; font-size:1.5rem; line-height:2.1rem; }
.popup.story .content .txt p + p { margin-top:1rem; }
/* popup - 슈팅 워터펀 시즌2 */
.popup.waterfun .content-wrap { background-image:url("../img/bg-popup-waterfun.png"); aspect-ratio:360 / 592; }
.popup.waterfun .content::before { top:2rem; right:calc(50% - 18rem + .8rem); width:8.2rem; height:5.5rem; background-image:url("../img/obj-popup-waterfun-missile1.png"); }
.popup.waterfun .content::after { bottom:14rem; left:calc(50% - 18rem + .5rem); width:7.2rem; height:2.7rem; background-image:url("../img/obj-popup-waterfun-missile2.png"); }
.popup.waterfun .content h4::before { top:-7.5rem; right:calc(50% - 18rem + 4.2rem); width:4.3rem; height:7.1rem; background-image:url("../img/obj-popup-waterfun-bomb.png"); }
.popup.waterfun .content h4::after { content:''; position:absolute; top:-8.3rem; left:calc(50% - 18rem + 1.7rem); width:9.3rem; height:10.3rem; background:url("../img/obj-popup-waterfun-txt.png") no-repeat center; background-size:100% auto; }
/* popup - 스컬스 해적단의 모험 */
.popup.pirate .content-wrap { background-image:url("../img/bg-popup-pirate.png"); aspect-ratio:360 / 512; }
.popup.pirate .content::before { top:-12.7rem; left:calc(50% - 18rem + 4rem); width:12.3rem; height:10.1rem; background-image:url("../img/obj-popup-pirate-ship.png"); }
.popup.pirate .content::after { top:12.1rem; right:calc(50% - 18rem + .7rem); width:4.2rem; height:5.3rem; background-image:url("../img/obj-popup-pirate-compass.png"); }
.popup.pirate .content h4::before { top:-2.2rem; left:calc(50% - 18rem + 3.7rem); width:5.3rem; height:2.4rem; background-image:url("../img/obj-popup-pirate-tit.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; border-top:.1rem solid #000; background:#fff; font-size:0; text-align:center; }
footer img { width:auto; height:1rem; }

@media screen and (max-width:500px) and (max-height:739px) { 
	.popup .content-wrap { overflow-y:auto; justify-content:space-between; }
	.popup .content-wrap::-webkit-scrollbar { display:none; }
	.popup .content-wrap .bottom { position:relative; right:auto; bottom:auto; left:auto; }
	.popup.water .content-wrap,
	.popup.dry .content-wrap,
	.popup.product .content-wrap { padding-top:3rem; padding-bottom:0; }
	.popup.water .content-wrap .bottom { margin-top:-6rem; }
	.popup.dry .content-wrap .bottom { margin-top:-11rem; }
	.popup.product .content-wrap .bottom { margin-top:2rem; }
}

@media(min-width:501px) and (max-width:719px) {
	#product .kbo::before { top:-16.1rem; }
}

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

	/* layout */
	.wrapper { width:720px; margin:0 auto; box-shadow:0px 4px 30px 0px rgba(0, 0, 0, 0.10); }
	.btn-nav { right:calc(50% - 360px + 1rem); }

	nav .logo { width:333px; }
	nav .logo::after { top:153px; }
	nav .depth1 { margin:0 48px; }
	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:1000px; }
	#main .logo.onepiece { top:30px; right:30px; width:156px; }
	#main .title { width:518px; }
	#main .img { width:604px; }

	#map { padding-top:148px; margin-top:-74px; }
	#map h2 { width:188px; }
	#map .content .water { top:calc(50% - 300px); left:calc(50% - 320px + 34px); }
	#map .content .dry { top:calc(50% + 120px); left:calc(50% - 320px + 60px); }
	#map .content .product { top:calc(50% - 96px); right:calc(50% - 320px + 20px); }

	#water { padding-top:64px; }
	#water .item .swiper .img { max-width:640px; }
	#water .item .swiper .con { max-width:640px; padding-top:54px; }
	#water .item .swiper .swiper-button-prev { left:calc(50% - 320px + 70px); }
	#water .item .swiper .swiper-button-next { right:calc(50% - 320px + 70px); }
	#water .item1::before { left:calc(50% - 320px - 1.7rem); }
	#water .item1 .swiper .swiper-button-prev,
	#water .item1 .swiper .swiper-button-next { top:64px; }
	#water .item1 .swiper .swiper-slide5 .swiper-button-prev,
	#water .item1 .swiper .swiper-slide5 .swiper-button-next,
	#water .item1 .swiper .swiper-slide6 .swiper-button-prev,
	#water .item1 .swiper .swiper-slide6 .swiper-button-next,
	#water .item1 .swiper .swiper-slide7 .swiper-button-prev,
	#water .item1 .swiper .swiper-slide7 .swiper-button-next { top:95px; }
	#water .item1 .swiper .swiper-slide4 .con::after { left:calc(50% - 360px + .9rem); }
	#water .item1 .swiper .swiper-slide5 .con::before { right:calc(50% - 320px - .5rem); }
	#water .item1 .swiper .swiper-slide6 .con::before { left:calc(50% - 320px + .3rem); }
	#water .item1 .swiper .swiper-slide6 .con::after { right:calc(50% - 320px + 2rem); }
	#water .item3 .swiper .swiper-slide3 .con h4::before { left:calc(50% - 320px + 5.4rem); }
	#water .item3 .swiper .swiper-slide4 .con h4::before { left:calc(50% - 320px + 4.8rem); }
	#water .item3 .swiper .swiper-slide5 .con h4::before { left:calc(50% - 320px + 4.2rem); }
	#water .item2 .swiper .swiper-button-prev,
	#water .item2 .swiper .swiper-button-next { top:62px; }
	#water .item3::before { right:calc(50% - 320px - .4rem); }
	#water .item3 .swiper .swiper-button-prev,
	#water .item3 .swiper .swiper-button-next { top:62px; }

	#dry { background-position:center top -56px; }
	#dry::before { top:20px; }
	#dry::after { top:305px; }
	#dry .content-wrap::before { top:340px; left:95px; }
	#dry h2 { padding-bottom:58px; background-position:center bottom; aspect-ratio:360 / 199; }
	#dry h2 img { margin-left:-11px; }
	#dry .item { margin:0 40px; }
	#dry .item .img { max-width:640px; }
	#dry .item1 .img::after { right:calc(50% - 320px - .1rem); }
	#dry .item2 .img::before { right:-40px; } 
	#dry .item2 .img::after { left:-40px; }
	#dry .item3 .img::before { right:calc(50% - 320px - .2rem); }
	#dry .item3 .img::after { width:556px; height:483px; }
	#dry .item4 .con h3::before { left:calc(50% - 320px + 1.5rem); }

	#product .kbo::before { top:-222px; }

	.popup .content-wrap { overflow-y:auto; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
	.popup .content-wrap::-webkit-scrollbar { display:none; }
	/* popup - 지도 */
	.popup .content-wrap .top { width:580px; }
	.popup .content-wrap .bottom { position:relative; right:auto; bottom:auto; left:auto; }
	.popup.water .content-wrap,
	.popup.dry .content-wrap,
	.popup.product .content-wrap { padding-top:3rem; padding-bottom:0; }
	.popup.dry .content-wrap .top > h3::after { right:calc(50% - 290px + 5.1rem); }
	.popup.water .content-wrap .bottom { margin-top:-8rem; }
	.popup.dry .content-wrap .bottom { margin-top:-11rem; }
	.popup.product .content-wrap .bottom { margin-top:2rem; }
	/* popup - 현상수배 인증샷 참여 방법 */
	.popup.event .content-wrap .content { margin-top:215px; }  
	/* popup - 공연 스토리 */
	.popup.story .content-wrap { overflow:initial; max-width:560px; }
	.popup.story .content-wrap .btn.close { right:calc(50% - 360px + 2.3rem); }

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