@charset "UTF-8";

/**
* Filename :style.css
* Description : Blood City Zero pick styles
**/

/* font */
@font-face {
    font-family:'MaruBuri'; /* 마루 부리 */
    src:url('https://wwwrod.everland.com/font/MaruBuri/MaruBuri-Regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}
@font-face {
    font-family:'MaruBuri';
    src:url('https://wwwrod.everland.com/font/MaruBuri/MaruBuri-SemiBold.woff2') format('woff2');
    font-weight:600;
    font-display:swap;
}
@font-face {
    font-family:'MaruBuri';
    src:url('https://wwwrod.everland.com/font/MaruBuri/MaruBuri-Bold.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
}
@font-face {
	font-family:'Pretendard'; /* 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%; scroll-behavior:smooth; }
html { font-size:10px; }
body { font-family:'MaruBuri', sans-serif; color:#333; text-align:center; word-wrap:break-word; word-break:keep-all; }
ul, ol { list-style-type:none; }
a { box-sizing:border-box; color:#333; text-decoration:none; cursor:pointer; }
a:hover, a:active { text-decoration:none; }
em, i { font-style:normal; }
button { margin:0; padding:0; box-sizing:border-box; border:0 none; background-color:transparent; vertical-align:middle; color:#333; font-family:'MaruBuri', sans-serif; cursor:pointer; outline:none; }
figcaption { display:none; }
img { width:100%; vertical-align:top; }
area { cursor:pointer; }
.hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; }
.body-stop { overflow:hidden; }


/* layout - common */
body { background-color:#000; }
.wrapper { position:relative; overflow:hidden; }
.wrapper .title > img { max-width:36rem; }
.btn-share { position:fixed; top:6.7rem; right:1rem; z-index:9; width:5.1rem; height:5.1rem; background:url('../img/btn-share.png') no-repeat center; background-size:100% auto; font-size:0; }
.btn-menu { position:fixed; top:1.7rem; right:1rem; z-index:9; width:5.1rem; height:5.1rem; background:url('../img/btn-menu.png') no-repeat center; background-size:100% auto; font-size:0; }
.btn-top { display:none; position:fixed; z-index:8; right:1.5rem; bottom:3.9rem; width:4.1rem; height:4.1rem; background:url('../img/btn-top.png') no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; }
.sec { position:relative; }
.sec h4 { width:100%; max-width:36rem; margin:0 auto; }
.sec h4 > img { max-width:36rem; }
.sec p { position:relative; font-family:'MaruBuri'; font-size:1.8rem; font-weight:600; line-height:2.3rem; letter-spacing:-.9px; }
.sec em { display:flex; justify-content:center; font-style:normal; word-break:keep-all; }
.sec em::before { content:'*'; margin-right:.2rem; }
.sec em.none { padding-left:0; text-indent:0; }
.sec em.none::before { display:none; }
.sec em.caution::before { content:'※'; }
.info-wrap { display:flex; justify-content:center; }
.info-wrap > ul { margin:0 auto; text-align:left; }
.info-wrap > ul li { display:flex; justify-content:flex-start; align-items:flex-start; position:relative; color:#fff; font-family:'MaruBuri'; font-size:1.5rem; font-weight:500; line-height:2rem; letter-spacing:-.75px; }
.info-wrap > ul li::before { content:''; width:1.9rem; height:1.9rem; margin-right:.5rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.info-wrap > ul li.place::before { background-image:url('../img/ico-place.png'); }
.info-wrap > ul li.date::before { background-image:url('../img/ico-date.png'); }
.info-wrap > ul li.time::before { background-image:url('../img/ico-time.png'); }
.info-wrap > ul li + li { margin-top:.5rem; }
.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.3rem; font-weight:400; line-height:2.1rem; letter-spacing:-.52px; }
.notice-wrap > ul li::before { content:'*'; margin-right:.3rem; }
.notice-wrap > ul li + li { margin-top:.4rem; }
.obj-wrap { position:relative; width:100%; height:100%; }
.obj { position:absolute; z-index:1; }
.obj.json { top:0; }
.blend-overlay { mix-blend-mode:overlay; }
.blend-lighten { mix-blend-mode:lighten; }
.blend-multiply { mix-blend-mode:multiply; }
.blend-color-burn { mix-blend-mode:color-burn; }
@keyframes blood1 {
    0% { opacity:0; transform:scale(0); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes blood2 {
    0% { opacity:0; }
    100% { opacity:1; }
}

/* nav */
nav { overflow:hidden; display:none; position:fixed; left:0; top:0; right:0; bottom:0; z-index:9; width:100%; max-width:720px; height:100%; margin:auto; }
nav .menu { overflow-x:hidden; overflow-y:auto; position:absolute; top:0; right:0; bottom:0; width:100%; height:100%; background-color:#000; }
nav .menu::-webkit-scrollbar { display:none; }
nav .menu-inner { display:flex; flex-direction:column; justify-content:space-between; flex:1; width:100%; min-height:100%; background:url('../img/bg-menu.jpg') no-repeat top center; background-size:100% auto; }
nav .menu .obj-menu { display:flex; justify-content:flex-end; align-items:center; position:relative; width:100%; margin-top:-13.6rem; background:url('../img/obj-menu-bottom.png') no-repeat center bottom; background-size:100% auto; aspect-ratio:360 / 325; }
nav .menu .logo { max-width:720px; margin:5.4rem auto 2rem; }
nav .menu .logo::after { content:''; position:absolute; top:8.8rem; left:0; width:7.3rem; height:7.5rem; background:url('../img/obj-menu-hand.png') no-repeat center left; background-size:100% auto; }
nav .menu .logo > a { display:block; }
nav .menu .btn-close { position:absolute; top:1.7rem; right:1rem; z-index:13; width:5.1rem; height:5.1rem; background:url('../img/btn-close.png') no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; }
nav .menu .depth { margin:0 1.9rem; }
nav .menu .depth > li { position:relative; z-index:13; margin-bottom:1rem; }
nav .menu .depth > li:last-child { margin-bottom:0; }
nav .menu .depth > li > a { display:flex; justify-content:space-between; align-items:center; position:relative; padding:1rem 3.5rem 1rem 3.7rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; aspect-ratio:322 / 62; transition:background .3s; }
nav .menu .depth > li[data-txt="map"] > a { background-image:url('../img/bg-menu-item1-off.png'); aspect-ratio:322 / 96; }
nav .menu .depth > li[data-txt="retail"] > a { background-image:url('../img/bg-menu-item2-off.png'); }
nav .menu .depth > li[data-txt="map"].on > a { background-image:url('../img/bg-menu-item1-on.png'); }
nav .menu .depth > li > a img { width:auto; height:3.5rem; }
nav .menu .depth > li[data-txt="map"] > a img { height:6rem; }
nav .menu .depth > li[data-txt="map"] > a::before { content:''; position:absolute; top:-1.1rem; left:2.9rem; width:10.1rem; height:2.7rem; background:url('../img/obj-menu-item1-tag.png') no-repeat center; background-size:100% auto; }
nav .menu .depth > li > a::after { content:''; width:1.8rem; height:1.8rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; transition:.3s; }
nav .menu .depth > li[data-txt="map"] > a::after { background-image:url('../img/ico-menu-item1-arrow-off.png'); }
nav .menu .depth > li[data-txt="retail"] > a::after { background-image:url('../img/ico-menu-item2-arrow-off.png'); }
nav .menu .depth > li.on > a::after { transform:rotateZ(360deg); }
nav .menu .depth > li[data-txt="map"].on > a::after { background-image:url('../img/ico-menu-item1-arrow-on.png'); }
nav .menu .sub-depth { display:none; position:relative; padding:2.3rem 2.5rem 1.5rem; }
nav .menu .sub-depth ul > li > a { display:block; text-align:left; }
nav .menu .sub-depth ul > li > a > img { width:auto; height:3.4rem; }
nav .menu .sub-depth ul > li:nth-child(3) { margin-top:2.3rem; }
nav .menu .sub-depth ul > li:nth-child(4),
nav .menu .sub-depth ul > li:nth-child(5) { margin-top:2.6rem; }
nav .menu .third-depth ul { position:relative; padding:1.5rem 2.6rem 1.8rem; }
nav .menu .third-depth ul > li { position:relative; padding-left:1.8rem; margin-bottom:2.3rem; }
nav .menu .third-depth ul > li:last-child { margin-bottom:0; }
nav .menu .third-depth ul > li::before { content:''; position:absolute; top:.8rem; left:0; width:1rem; height:1rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
nav .menu .third-depth ul > li:nth-child(1)::before { background-image:url('../img/ico-menu-2depth-item1.png'); }
nav .menu .third-depth ul > li:nth-child(2)::before { background-image:url('../img/ico-menu-2depth-item2.png'); }
nav .menu .third-depth ul > li:nth-child(3)::before { background-image:url('../img/ico-menu-2depth-item3.png'); }
nav .menu .third-depth ul > li:nth-child(4)::before { background-image:url('../img/ico-menu-2depth-item4.png'); }
nav .menu .third-depth ul > li:nth-child(5)::before { background-image:url('../img/ico-menu-2depth-item5.png'); }
nav .menu .third-depth ul > li:nth-child(6)::before { background-image:url('../img/ico-menu-2depth-item6.png'); }
nav .menu .third-depth ul > li > a { display:block; position:relative; z-index:1; background-image:url('../img/bg-menu-3depth.jpg'); background-position-x:2.2rem; background-clip:text; -webkit-background-clip:text; color:transparent; font-family:'MaruBuri'; font-weight:600; font-size:2rem; line-height:normal; letter-spacing:-.5px; text-align:left; filter:drop-shadow(.1rem .1rem 0 rgba(0, 0, 0, 1)); }
nav .menu .third-depth ul > li:nth-child(1) > a { background-position-y:0; }
nav .menu .third-depth ul > li:nth-child(2) > a { background-position-y:20%; }
nav .menu .third-depth ul > li:nth-child(3) > a { background-position-y:40%; }
nav .menu .third-depth ul > li:nth-child(4) > a { background-position-y:60%; }
nav .menu .third-depth ul > li:nth-child(5) > a { background-position-y:80%; }
nav .menu .third-depth ul > li:nth-child(6) > a { background-position-y:100%; }


/* footer */
footer { display:flex; justify-content:space-between; align-items:flex-end; position:absolute; bottom:1.5rem; width:100%; padding:0 1.5rem; }
footer .item.logo { width:4rem; height:3.7rem; }
footer .item.copy { width:6.5rem; height:1rem; }


/* swiper */
.swiper-control-wrap { display:flex; justify-content:center; align-items:center; }
.swiper-pagination-bullets.swiper-pagination-horizontal { display:flex; justify-content:center; align-items:center; position:relative; right:auto; bottom:auto; left:auto; width:auto; z-index:0; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width:1.2rem; height:1.2rem; margin:0 .5rem; background:url('../img/ico-slide-off.png') no-repeat center; background-size:100% auto; opacity:1; }
.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { background-image:url('../img/ico-slide-on.png'); }
.swiper-button-prev,
.swiper-button-next { top:50%; right:auto; left:auto; width:2rem; height:2rem; margin:0; background-repeat:no-repeat; background-position:center; background-size:100% auto; color:transparent; font-size:0; transform:translateY(-50%); }
.swiper-button-prev { background-image:url('../img/btn-slide-prev.png'); }
.swiper-button-next { background-image:url('../img/btn-slide-next.png'); }
.swiper-button-prev:after, 
.swiper-button-next:after { display:none; }


/* 인트로 */
#intro { display:flex; justify-content:center; align-items:center; width:100%; height:100dvh; }
#intro video { width:100%; }


/* 스토리 */
#story { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100dvh; background:#560e00 url('../img/bg-story.jpg') no-repeat top center; background-size:100% auto; }
#story .obj { top:0; left:0; }
#story .bottom { top:auto; bottom:0; }
#story .fire { animation:fire 1.8s ease 0s infinite; }
#story .hand { top:16.1rem; right:1.6rem; left:auto; width:8.4rem; height:16.3rem; }
#story .title { position:relative; z-index:1; max-width:36rem; padding-top:10.5rem; margin:0 auto; }
#story .title a { display:block; }
#story .title a > img { position:relative; z-index:2; }
#story .title .obj { position:absolute; top:2.5rem; right:0; left:0; z-index:1; width:36rem; height:17.9rem; opacity:0; transform:translateY(10rem); animation:master-come-out 1.2s ease-in-out .3s 1 forwards, master-fly 1s ease-in-out 1.5s infinite alternate; }
#story .title .obj > img { position:absolute; top:0; left:0; }
#story .txt { position:relative; z-index:1; width:32.2rem; height:24.2rem; padding:.4rem; margin:2.2rem auto 4rem calc(50% - 18rem + 1.6rem); background:url('../img/bg-story-box.png') no-repeat center; background-size:100% auto; }
#story .txt p { overflow-y:auto; width:100%; height:100%; padding:3.3rem 1rem 2.4rem; color:#fff; font-size:1.5rem; line-height:2.5rem; letter-spacing:-.75px; text-shadow:.1rem .2rem 0 rgba(0, 0, 0, 1); -webkit-overflow-scrolling:touch; }
#story .txt p::-webkit-scrollbar { width:.4rem; height:.4rem; }
#story .txt p::-webkit-scrollbar-thumb { border-radius:5rem; background:#dd0200; }
#story > a { display:block; position:relative; z-index:1; margin-bottom:5rem; transform:translateX(.5rem); animation:story-txt 2.6s ease-in 0s infinite; }
#story .btn-close { position:absolute; top:1.7rem; right:1rem; z-index:13; width:5.1rem; height:5.1rem; background:url('../img/btn-close.png') no-repeat center; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; }
@keyframes master-come-out {
    0% { opacity:0; transform:translateY(10rem); }
    100% { opacity:1; transform:translateY(0rem); }
}
@keyframes master-fly {
    0% { transform:translateY(0rem); }
    100% { transform:translateY(1rem); }
}
@keyframes fire {
    0% { opacity:1; }
    20% { opacity:0; }
    40% { opacity:.5; }
    60% { opacity:0; }
    80% { opacity:.8; }
    100% { opacity:0; }
}
@keyframes story-txt {
    0% { opacity:1; }
    8% { opacity:1; }
    12% { opacity:.5; }
    16% { opacity:.8; }
    32% { opacity:.8; }
    36% { opacity:.3; }
    40% { opacity:1; }
    56% { opacity:1; }
    60% { opacity:.5; }
    64% { opacity:1; }
    94% { opacity:1; }
    98% { opacity:.8; }
    100% { opacity:.8; }
}


/* 메인 - 비주얼 */
#main { /*padding-bottom:4.3rem;*/ background:url('../img/bg-main.jpg') no-repeat bottom center; background-size:100% auto; }
#main .visual { position:relative; height:154.17vw; }
#main .visual > .obj-wrap::after { content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; background-image:linear-gradient(to bottom, rgba(255, 255, 255, .3), transparent); opacity:0; animation:light 2.2s ease 0s infinite; }
#main .visual .obj { top:0; left:0; }
#main .visual .gate { top:-6.11vw; }
#main .visual .alpine { animation:alpine 4s ease 0s infinite; }
#main .visual .spiral1 { top:-12.22vw; left:50%; width:158.33vw; border-radius:50%; transform:translateX(-50%); animation:spiral1 20s linear 0s infinite; }
#main .visual .spiral2 { top:-13.33vw; left:50%; width:108.33vw; border-radius:50%; transform:translateX(-50%); animation:spiral2 30s linear 0s infinite; }
#main .visual .spiral3 { top:-20.83vw; width:120.83vw; left:50%; border-radius:50%; transform:translateX(-50%) rotateZ(-10deg); animation:spiral3 7s ease-in-out 0s infinite; }
#main .visual .clown { top:64.44vw; right:-14.17vw; left:auto; width:47.78vw; height:48.61vw; /*animation:clown 4s ease-out 1s infinite;*/ }
#main .visual .thunder1 { width:65.28vw; mix-blend-mode:screen; animation:thunder 2.2s linear 0s infinite; }
#main .visual .thunder2 { top:10.28vw; left:auto; right:0; width:47.78vw; mix-blend-mode:screen; animation:thunder 1.9s linear 0s infinite; }
#main .visual .master { top:22.78vw; left:-14.17vw; width:32.50vw; height:49.44vw; /*transform-origin:bottom center; transform:rotateZ(-10deg); animation:master 8s ease 0s infinite;*/ }
#main .visual .eyes1 { top:60.56vw; left:20.83vw; width:5.56vw; opacity:0; animation:eyes 3s ease 1s infinite; }
#main .visual .eyes2 { top:44.72vw; right:6.94vw; left:auto; width:3.89vw; opacity:0; animation:eyes 3s ease 0s infinite; }
#main .visual h1 { position:absolute; z-index:1; top:88.61vw; left:50%; width:100%; transform:translateX(-50%); }
#main .visual h1 .obj-wrap { position:relative; height:69.44vw; }
#main .visual h1 .obj-wrap .tit { position:relative; z-index:1; }
#main .visual h1 .obj-wrap .obj { opacity:0; }
#main .visual h1 .obj-wrap .cloud1 { animation:cloud 2s ease-in-out 0s 1 forwards; }
#main .visual h1 .obj-wrap .cloud2 { animation:cloud 2s ease-in-out .5s 1 forwards; }
#main .visual h1 .obj-wrap .cloud3 { animation:cloud 2s ease-in-out .8s 1 forwards; }
#main .visual h1 .obj-wrap .cloud4 { animation:cloud 2s ease-in-out 1.2s 1 forwards; }
#main .visual h1 .obj-wrap .cloud5 { animation:cloud 2s ease-in-out 1.5s 1 forwards; }
#main .visual h1 .obj-wrap .cloud6 { animation:cloud 2s ease-in-out 1.7s 1 forwards; }
#main .visual h1 .obj-wrap .cloud7 { animation:cloud 2s ease-in-out 2s 1 forwards; }
#main .list { margin-top:-3.89vw; }
#main .list li { display:flex; }
#main .list li:nth-child(odd) { justify-content:flex-end; }
#main .list .item2 { margin-top:-3.06vw; }
#main .list .item3 { margin-top:-6.11vw; }
#main .list li > a { display:block; width:100.00vw; }
#main .list li .aos-animate .obj-wrap .shadow { opacity:0; animation:shadow .5s linear 1.5s 1 forwards; }
#main .list .item1 > a { height:78.89vw; }
#main .list .item2 > a { height:65.28vw; }
#main .list .item1 .obj-wrap .obj { top:0; right:0; }
#main .list .item2 .obj-wrap .obj { top:0; left:0; }
#main .list .item2 .obj-wrap .castle::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-image:none; background-repeat:no-repeat; background-position:top left; background-size:100% auto; animation:castle 4.2s ease-in-out 0s infinite }
@keyframes spiral1 {
    0% { transform:translateX(-50%) rotateZ(0deg); }
    100% { transform:translateX(-50%) rotateZ(360deg); }
}
@keyframes spiral2 {
    0% { transform:translateX(-50%) rotateZ(0deg); }
    100% { transform:translateX(-50%) rotateZ(-360deg); }
}
@keyframes spiral3 {
    0% { transform:translateX(-50%) rotateZ(-10deg); }
    50% { transform:translateX(-50%) rotateZ(10deg); }
    100% { transform:translateX(-50%) rotateZ(-10deg); }
}
@keyframes thunder {
    0% { opacity:1; }
    5% { opacity:0; }
    10% { opacity:.5; }
    30% { opacity:.5; }
    33% { opacity:0; }
    36% { opacity:1; }
    55% { opacity:1; }
    58% { opacity:.3; }
    61% { opacity:.8; }
    75% { opacity:.8; }
    78% { opacity:0; }
    81% { opacity:1; }
    100% { opacity:1; }
}
@keyframes clown {
    0% { transform:translateX(0rem); }
    20% { transform:translateX(-1rem); }
    30% { transform:translateX(0rem); }
    40% { transform:translateX(-1rem); }
    45% { transform:translateX(0rem); }
    48% { transform:translateX(-1rem); }
    51% { transform:translateX(0rem); }
    53% { transform:translateX(-1rem); }
    55% { transform:translateX(0rem); }
    57% { transform:translateX(-1rem); }
    59% { transform:translateX(0rem); }
    100% { transform:translateX(0rem); }
}
@keyframes master {
    0% { transform:rotateZ(-10deg); }
    40% { transform:rotateZ(0deg); }
    50% { transform:rotateZ(-10deg); }
    100% { transform:rotateZ(-10deg); }
}
@keyframes eyes {
    0% { opacity:0; }
    12% { opacity:0; }
    15% { opacity:.8; }
    37% { opacity:.8; }
    40% { opacity:0; }
    43% { opacity:.5; }
    64% { opacity:.5; }
    67% { opacity:0; }
    70% { opacity:1; }
    87% { opacity:1; }
    90% { opacity:0; }
    100% { opacity:0; }
}
@keyframes alpine {
    0% { opacity:1; }
    5% { opacity:.5; }
    13% { opacity:1; }
    30% { opacity:1; }
    33% { opacity:0; }
    36% { opacity:.8; }
    54% { opacity:.8; }
    57% { opacity:0; }
    60% { opacity:1; }
    80% { opacity:1; }
    83% { opacity:.3; }
    86% { opacity:1; }
    100% { opacity:1; }
}
@keyframes cloud {
    0% { opacity:0; }
    100% { opacity:1; }
}
@keyframes castle {
    0% { background-image:none; }
    6% { background-image:none; }
    10% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:1; }
    18% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:1; }
    22% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.3; }
    26% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.8; }
    38% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.8; }
    42% { background-image:none; }
    46% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:1; }
    50% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.5; }
    54% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:1; }
    70% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:1; }
    74% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.5; }
    78% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.8; }
    70% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.8; }
    74% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.3; }
    78% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:1; }
    92% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:1; }
    94% { background-image:url('../img/obj-main-item2-castle-on.png'); opacity:.5; }
    98% { background-image:none; }
    100% { background-image:none; }
}
@keyframes shadow {
    0% { opacity:0; }
    100% { opacity:1; }
}
@keyframes light {
    0% { opacity:0; }
    10% { opacity:0; }
    12% { opacity:.3; }
    14% { opacity:0; }
    36% { opacity:0; }
    38% { opacity:.8; }
    40% { opacity:0; }
    81% { opacity:0; }
    83% { opacity:.5; }
    85% { opacity:0; }
    100% { opacity:0; }
}


/* MAP, Mission */
#map { padding-top:5rem; background:url('../img/bg-map.jpg') no-repeat top center; background-size:cover; }
#map .intro h2,
#map .intro p { max-width:36rem; margin:0 auto; }
#map .intro h2 { position:relative; }
#map .intro h2 > img:not(.obj) { position:relative; z-index:1; }
#map .intro h2 > .back { top:.2rem; left:calc(50% - 18rem + 4rem); width:28.1rem; }
#map .intro p { margin:1.5rem auto 1.2rem; }
#map .intro em { margin:1.2rem auto 1.5rem; color:#fff; font-size:1.2rem; font-weight:600; line-height:normal; letter-spacing:-.6px; text-shadow:.1rem .1rem .1rem rgba(0, 0, 0, 1); }
#map .pin-wrap { position:relative; padding:4.3rem 0 6rem; background:url('../img/bg-map-area.png') no-repeat top center; background-size:100% auto; }
#map .pin-wrap h3 { max-width:36rem; margin:0 auto 2.3rem; }
#map .pin-wrap::before { content:''; position:absolute; top:23.4rem; left:0; width:14.1rem; height:11.8rem; background:url('../img/obj-map-pin-photo.png') no-repeat center; background-size:100% auto; }
#map .pin-wrap > ul { position:relative; width:100%; max-width:36rem; height:43rem; margin:0 auto; background:url('../img/bg-map-pin.png') no-repeat top center; background-size:100% auto; }
#map .pin-wrap .pin { position:absolute; }
#map .pin-wrap .pin > .btn { display:block; position:relative; }
#map .pin-wrap .pin > .btn .hash { top:0; left:0; }
#map .pin-wrap .item1 { top:1.1rem; left:calc(50% - 18rem + 4.7rem); width:11.9rem; height:5.5rem; }
#map .pin-wrap .item2 { top:2.8rem; right:calc(50% - 18rem + 3.3rem); width:13.8rem; height:6.8rem; }
#map .pin-wrap .item3 { top:11.3rem; right:calc(50% - 18rem + 4.1rem); width:14.8rem; height:6.3rem; }
#map .pin-wrap .item4 { top:26.1rem; right:calc(50% - 18rem + 2.5rem); width:11.8rem; height:6.2rem; }
#map .pin-wrap .item5 { top:19.9rem; left:calc(50% - 18rem + 2rem); width:14.8rem; height:5.8rem; }
#map .pin-wrap .item6 { top:30.7rem; left:calc(50% - 18rem + 9.6rem); width:12.6rem; height:4.9rem; }
#map .pin-wrap .item7 { top:18.4rem; right:calc(50% - 18rem + 4rem); width:12.3rem; height:5.6rem; }
#map .pin-wrap .item8 { top:38.4rem; left:calc(50% - 18rem + 9.8rem); width:14.5rem; height:4.5rem; }
#map .pin-wrap .item9 { top:26.6rem; left:calc(50% - 18rem + 2rem); width:10.1rem; height:4.7rem; }
#map .pin-wrap .item1 > .btn .hash { animation:hash 3s ease 0s infinite; }
#map .pin-wrap .item2 > .btn .hash { animation:hash 3s ease .5s infinite; }
#map .pin-wrap .item3 > .btn .hash { animation:hash 3s ease .9s infinite; }
#map .pin-wrap .item4 > .btn .hash { animation:hash 3s ease -.3s infinite; }
#map .pin-wrap .item5 > .btn .hash { animation:hash 3s ease -.7s infinite; }
#map .pin-wrap .notice { max-width:36rem; margin:2.6rem auto 0; }
#map .mission-wrap { position:relative; padding-top:6.5rem; margin-top:-3.8rem; background:url('../img/bg-map-mission.png') no-repeat top center; background-size:100% auto; }
#map .mission-wrap::after { content:''; display:block; width:100%; background:url('../img/obj-map-mission-bottom.png') no-repeat bottom center; background-size:100% auto; aspect-ratio:360 / 70; }
#map .mission-wrap h3 { max-width:36rem; margin:0 auto 2.9rem; }
#map .mission-wrap .slide-mission { overflow:initial; max-width:36rem; }
#map .mission-wrap .swiper-slide { padding:0 5.5rem; background-repeat:no-repeat; background-position:top center; background-size:100% auto; aspect-ratio:360 / 275; }
#map .mission-wrap .swiper-slide h4 { height:3.5rem; margin-bottom:1.6rem; text-align:left; }
#map .mission-wrap .swiper-slide h4 > img { width:auto; height:100%; }
#map .mission-wrap .swiper-slide h4 .num { position:absolute; }
#map .mission-wrap .swiper-slide p { color:#5f0000; font-size:1.7rem; letter-spacing:-.85px; }
#map .mission-wrap .swiper-button-prev { left:calc(50% - 18rem + 1.5rem); }
#map .mission-wrap .swiper-button-next { right:calc(50% - 18rem + 1.5rem); }
#map .mission-wrap .swiper-pagination-bullets.swiper-pagination-horizontal { margin-top:1.2rem; }
#map .mission-wrap .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { background-image:url('../img/ico-slide-off-white.png'); }
#map .mission-wrap .item1 { padding-top:7.5rem; background-image:url('../img/bg-map-mission-item1.png'); }
#map .mission-wrap .item2 { padding-top:4.7rem; background-image:url('../img/bg-map-mission-item2.png'); }
#map .mission-wrap .item3 { padding-top:6.2rem; background-image:url('../img/bg-map-mission-item3.png'); }
#map .mission-wrap .item1::before { content:''; position:absolute; top:-.7rem; left:calc(50% - 18rem + 17.2rem); width:2.6rem; height:4.5rem; background:url('../img/obj-map-mission-item1-tape.png') no-repeat center; background-size:100% auto; }
#map .mission-wrap .item1::after { content:''; position:absolute; top:11.2rem; right:calc(50% - 18rem + 4.5rem); width:11.3rem; height:12.7rem; background:url('../img/obj-map-mission-item1-photo.png') no-repeat center; background-size:100% auto; }
#map .mission-wrap .item2::before { content:''; position:absolute; top:-2.3rem; left:calc(50% - 18rem + .9rem); width:9.7rem; height:5.9rem; background:url('../img/obj-map-mission-item2-tape.png') no-repeat center; background-size:100% auto; }
#map .mission-wrap .item2::after { content:''; position:absolute; top:9.8rem; left:calc(50% - 18rem + 4.1rem); width:9.1rem; height:11.4rem; background:url('../img/obj-map-mission-item2-photo.png') no-repeat center; background-size:100% auto; }
#map .mission-wrap .item3::before { content:''; position:absolute; top:1.1rem; right:calc(50% - 18rem + .8rem); width:10rem; height:14.9rem; background:url('../img/obj-map-mission-item3-photo.png') no-repeat center; background-size:100% auto; }
#map .mission-wrap .item2 h4 { height:8rem; text-align:right; }
#map .mission-wrap .item1 h4 .num { top:1.5rem; left:calc(50% - 18rem + 4.1rem); width:9.4rem; height:4.7rem; }
#map .mission-wrap .item2 h4 .num { top:-.5rem; right:calc(50% - 18rem + 4.9rem); width:9.4rem; height:4.8rem; }
#map .mission-wrap .item3 h4 .num { top:1rem; left:calc(50% - 18rem + 5.1rem); width:9.3rem; height:4.1rem; }
#map .mission-wrap .item1 p,
#map .mission-wrap .item3 p { text-align:left; }
#map .mission-wrap .item2 p { text-align:right; transform:rotateZ(3deg); } 
#map .mission-wrap .item3 em { margin-top:1.2rem; width:17.9rem; text-align:left; }
@keyframes hash {
    0% { opacity:1; }
    18% { opacity:1; }
    20% { opacity:.5; }
    22% { opacity:.8; }
    38% { opacity:.8; }
    40% { opacity:.3; }
    42% { opacity:1; }
    64% { opacity:1; }
    66% { opacity:.5; }
    68% { opacity:1; }
    90% { opacity:1; }
    92% { opacity:.3; }
    94% { opacity:.8; }
    100% { opacity:.8; }
}


/* 좀비 분장 살롱, 좀비 의상실, 네컷사진 */
#booth { position:relative; padding:8.4rem 0 0; background:url('../img/bg-booth.jpg') no-repeat top center; background-size:100% auto; }
#booth::before { content:''; position:absolute; top:11rem; right:1rem; width:6.3rem; height:12.9rem; background:url('../img/obj-booth-hand.png') no-repeat center; background-size:100% auto; animation:hand-up-down 1.2s ease-out -.2s infinite alternate; }
#booth > div h3 { max-width:36rem; margin:0 auto 1.2rem; }
#booth > div h3 .sub { margin-top:.9rem; }
#booth > div .img { position:relative; max-width:36rem; margin:0 auto; }
#booth > div .img::before,
#booth > div .img::after { content:''; position:absolute; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
#booth > div .txt { color:#470068; font-size:1.8rem; line-height:2.3rem; letter-spacing:-.9px; }
#booth > div .txt em { display:block; max-width:36rem; }
#booth .intro { margin-bottom:3rem; }
#booth .intro p { position:relative; max-width:36rem; margin:0 auto; }
#booth .intro p img:not(.obj) { position:relative; z-index:1; }
#booth .intro p .obj { top:-2.8rem; left:50%; transform:translateX(-50%); }
#booth .salon-wrap { position:relative; padding:5.4rem 0 8.4rem; background:url('../img/bg-salon.png') no-repeat top center; background-size:100% auto; }
#booth .salon-wrap::before { content:''; position:absolute; top:12.2rem; left:0; width:4.6rem; height:8.8rem; background:url('../img/obj-salon-blood1.png') no-repeat center left; background-size:100% auto; }
#booth .salon-wrap h3 .sub { animation:booth-txt-blink 1.4s ease-in 0s infinite; }
#booth .salon-wrap .obj-wrap { position:absolute; top:0; left:0; }
#booth .salon-wrap .img .blood1 { top:-8rem; left:calc(50% - 18rem + .5rem); width:2.2rem; mix-blend-mode:hard-light; opacity:0; transform:scale(0); }
#booth .salon-wrap .img .blood2 { top:-.5rem; left:calc(50% - 18rem + 5.9rem); width:1.6rem; mix-blend-mode:hard-light; opacity:0; transform:scale(0); }
#booth .salon-wrap .img .blood3 { top:2.5rem; right:calc(50% - 18rem + 8.8rem); width:1.6rem; mix-blend-mode:hard-light; opacity:0; transform:scale(0); }
#booth .salon-wrap .img .blood4 { top:9.9rem; right:calc(50% - 18rem + 3.4rem); width:2.2rem; mix-blend-mode:hard-light; opacity:0; transform:scale(0); }
#booth .salon-wrap .img .blood5 { bottom:-1.8rem; right:calc(50% - 18rem + .7rem); width:5rem; mix-blend-mode:hard-light; opacity:0; transform:scale(0); }
#booth .salon-wrap .txt { margin:3.4rem auto 0; }
#booth .salon-wrap .txt em { margin:1.7rem auto 0; }
#booth .salon-wrap > div.aos-animate .img .blood1 { animation:blood1 .07s ease-in-out .5s 1 forwards; }
#booth .salon-wrap > div.aos-animate .img .blood2 { animation:blood1 .07s ease-in-out .6s 1 forwards; }
#booth .salon-wrap > div.aos-animate .img .blood3 { animation:blood1 .07s ease-in-out .9s 1 forwards; }
#booth .salon-wrap > div.aos-animate .img .blood4 { animation:blood1 .07s ease-in-out 1s 1 forwards; }
#booth .salon-wrap > div.aos-animate .img .blood5 { animation:blood1 .07s ease-in-out .7s 1 forwards; }
#booth .clothes-wrap { position:relative; padding:4.8rem 0 0; margin-top:-5.4rem; background:url('../img/bg-clothes.png') no-repeat top center; background-size:100% auto; }
#booth .clothes-wrap::after { content:''; position:absolute; bottom:-40rem; right:0; left:0; width:100%; height:40rem; background-color:#000; }
#booth .clothes-wrap h3 { margin:0 auto 2.5rem; }
#booth .clothes-wrap h3 .sub { animation:booth-txt-blink 1.4s ease-in -.2s infinite; }
#booth .clothes-wrap .img::before { top:-1.2rem; left:calc(50% - 18rem + 2.7rem); width:4.7rem; height:3.3rem; background-image:url('../img/obj-clothes-tape.png'); }
#booth .clothes-wrap .img::after { bottom:-5.2rem; right:calc(50% - 18rem + 2.1rem); width:9.2rem; height:8.3rem; background-image:url('../img/obj-clothes-paper.png'); }
#booth .clothes-wrap .txt { margin:2.2rem auto .5rem; color:#fff; }
#booth .clothes-wrap .txt em { margin:1.9rem auto 0; }
#booth .clothes-wrap .obj-wrap { position:relative; }
#booth .clothes-wrap .obj-wrap .hand { position:absolute; right:0; bottom:0; width:23.89vw; animation:hand-up-down 1.5s ease-out 0s infinite alternate; }
#booth .photo-wrap { position:relative; z-index:1; padding:3.5rem 0 5.3rem; margin-top:-2.9rem; background:url('../img/bg-photo.png') no-repeat top center; }
#booth .photo-wrap .info-wrap > ul li::before { display:none; }
#booth .photo-wrap .info-wrap li.place img { width:auto; height:3.1rem; }
#booth .photo-wrap .img { margin:1.6rem auto 2rem; }
#booth .photo-wrap .img .obj-wrap { position:absolute; top:0; left:0; }
#booth .photo-wrap .img::before { top:-1.1rem; left:calc(50% - 18rem + 1.1rem); width:12rem; height:11.8rem; background-image:url('../img/obj-photo-blood1.png'); opacity:0; }
#booth .photo-wrap .img .blood1 { top:4.9rem; right:calc(50% - 18rem + 13.1rem); width:1.6rem; mix-blend-mode:hard-light; opacity:0; }
#booth .photo-wrap .img .blood2 { bottom:12rem; right:calc(50% - 18rem + 7.7rem); width:2.2rem; mix-blend-mode:hard-light; opacity:0; }
#booth .photo-wrap .img .blood3 { bottom:3.1rem; right:calc(50% - 18rem + 5.1rem); width:5rem; mix-blend-mode:hard-light; opacity:0; }
#booth .photo-wrap > div.aos-animate .img::before { animation:blood2 3s ease-in-out .8s 1 forwards; }
#booth .photo-wrap > div.aos-animate .img .blood1 { animation:blood1 .07s ease-in-out .6s 1 forwards; }
#booth .photo-wrap > div.aos-animate .img .blood2 { animation:blood1 .07s ease-in-out .7s 1 forwards; }
#booth .photo-wrap > div.aos-animate .img .blood3 { animation:blood1 .1s ease-in-out .9s 1 forwards; }
@keyframes hand-up-down {
    0% { transform:translateY(0); }
    100% { transform:translateY(1rem); }
}
@keyframes booth-txt-blink {
    0% { opacity:1; }
    20% { opacity:1; }
    28% { opacity:0; }
    36% { opacity:1; }
    60% { opacity:1; }
    64% { opacity:.3; }
    68% { opacity:1; }
    100% { opacity:1; }
}


/* MD&FOOD */
#retail { padding:6.3rem 0 0; background:url('../img/bg-retail.png') no-repeat top center; background-size:100% auto; }
#retail > div h3 { max-width:36rem; margin:0 auto 1.2rem; }
#retail > div h3 .sub { margin-bottom:.9rem; }
#retail > div .txt { color:#790000; font-size:1.8rem; line-height:2.3rem; letter-spacing:-.9px; }
#retail > div em { display:block; max-width:36rem; margin:0 auto; }
#retail .intro { position:relative; z-index:1; }
#retail .intro h2 { position:relative; max-width:36rem; margin:0 auto 8.3rem; }
#retail .intro h2 img:not(.obj) { position:relative; z-index:1; }
#retail .intro h2 .obj { top:-2.7rem; left:50%; transform:translateX(-50%); }
#retail .intro .obj-wrap .clown1 { top:0; left:-3.9rem; z-index:2; width:16.4rem; animation:clown1 3s ease-out 0s infinite; }
#retail .intro .obj-wrap .clown2 { top:3.5rem; right:-2.8rem; width:12.8rem; height:13rem; }
#retail .md { position:relative; z-index:1; }
#retail .horror-wrap { padding:5.1rem 0 6.6rem; margin-top:-3rem; background:url('../img/bg-horror.png') no-repeat top center; background-size:100% auto; }
#retail .horror-wrap h3 { margin:0 auto 1rem; }
#retail .horror-wrap h3 .tit { animation:retail-txt-blink 1.4s ease 0s infinite; }
#retail .horror-wrap .txt { margin:1rem auto 1.3rem; }
#retail .horror-wrap .info-wrap > ul li::before { display:none; }
#retail .horror-wrap .info-wrap li.place img { width:auto; height:5.2rem; }
#retail .horror-wrap .list-wrap { max-width:36rem; margin:2.2rem auto 3.8rem; }
#retail .horror-wrap .list-wrap .item1 { width:13.3rem; margin:0 3.4rem 0 auto; }
#retail .horror-wrap .list-wrap .item2 { width:20.6rem; margin:-10.3rem auto 0 1.2rem; }
#retail .horror-wrap .list-wrap .item3 { width:15rem; margin:-4.9rem 4.2rem 0 auto; }
#retail .horror-wrap .list-wrap .item4 { width:22.2rem; margin:-1.6rem auto 0 6.5rem; }
#retail .horror-wrap .list-wrap .item5 { width:31.5rem; margin:3rem auto 0 2.2rem; }
#retail .horror-wrap .list-wrap .item6 { width:20.3rem; margin:1rem 6.3rem 0 auto; }
#retail .costume-wrap { padding:5.1rem 0 6.2rem; margin-top:-3.8rem; background:url('../img/bg-costume.png') no-repeat top center; background-size:100% auto; } 
#retail .costume-wrap h3 { margin:0 auto 1.4rem; }
#retail .costume-wrap h3 .tit { animation:retail-txt-blink 1.4s ease -.3s infinite; }
#retail .costume-wrap .info-wrap > ul li::before { display:none; }
#retail .costume-wrap .info-wrap li.place img { width:auto; height:5.2rem; }
#retail .costume-wrap .list-wrap { max-width:36rem; margin:3.3rem auto 3.4rem; }
#retail .costume-wrap .list-wrap .item1 { width:23.1rem; margin:0 auto 0 7.6rem; }
#retail .costume-wrap .list-wrap .item2 { width:36rem; margin:.3rem auto 0; }
#retail .costume-wrap .list-wrap .item3 { width:36rem; margin:2.7rem auto 2.4rem; }
#retail .costume-wrap .list-wrap .item4 { width:36rem; margin:2.4rem auto 0; }
#retail .costume-wrap .list-wrap .item5 { width:36rem; margin:1.7rem auto 0; }
#retail .costume-wrap .list-wrap .item6 { width:24.2rem; margin:1.9rem 3.4rem 0 auto; }
#retail .costume-wrap .list-wrap p { max-width:36rem; padding-top:2.6rem; margin:2.4rem auto; color:#fff; background:url('../img/bg-costume-txt.png') no-repeat top center; background-size:100% auto; aspect-ratio:360 / 89; }
#retail .food { position:relative; z-index:1; margin-top:-2.2rem; background:url('../img/bg-food.png') no-repeat top center; background-size:100% auto; }
#retail .lab-wrap { padding-top:6.2rem; }
#retail .lab-wrap .slide-lab { max-width:36rem; margin:3.7rem auto 0; }
#retail .lab-wrap .slide-lab .swiper-button-prev { top:7.3rem; left:calc(50% - 18rem + 2.4rem); background-image:url('../img/btn-slide-prev-white.png'); }
#retail .lab-wrap .slide-lab .swiper-button-next { top:7.3rem; right:calc(50% - 18rem + 2.4rem); background-image:url('../img/btn-slide-next-white.png'); }
#retail .lab-wrap .slide-lab .swiper-pagination-bullets.swiper-pagination-horizontal { margin-top:.9rem; }
#retail .lab-wrap .slide-lab .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { background-image:url('../img/ico-slide-off-white.png'); }
#retail .lab-wrap .slide-lab .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active { background-image:url('../img/ico-slide-on-orange.png'); }
#retail .lab-wrap .slide-lab .img { position:relative; z-index:2; }
#retail .lab-wrap .slide-lab .con { position:relative; z-index:1; padding-top:6rem; margin-top:-3.1rem; background-repeat:no-repeat; background-position:top center; background-size:100% auto; aspect-ratio:360 / 235; }
#retail .lab-wrap .slide-lab .con > p { margin:2rem auto 0; color:#2f0000; font-size:1.4rem; height:2rem; letter-spacing:-.7px; }
#retail .lab-wrap .slide-lab .item4 .img::after { content:''; position:absolute; top:11rem; right:calc(50% - 18rem + 1.2rem); z-index:2; width:17.3rem; height:8.7rem; background:url('../img/obj-lab-item4-note.png') no-repeat center; background-size:100% auto; }
#retail .lab-wrap .slide-lab .item1 .con { background-image:url('../img/bg-lab-item1.png'); }
#retail .lab-wrap .slide-lab .item1 .con .note { position:absolute; top:2.5rem; left:calc(50% - 18rem + 1.3rem); z-index:2; width:8.1rem; }
#retail .lab-wrap .slide-lab .item1 .con .note-blood { position:absolute; top:2.2rem; left:calc(50% - 18rem + 1.5rem); z-index:2; width:9.2rem; mix-blend-mode:hard-light; }
#retail .lab-wrap .slide-lab .item1 .con .blood1 { position:absolute; top:4.7rem; left:calc(50% - 18rem); width:13.2rem; opacity:0; }
#retail .lab-wrap .slide-lab .item1 .con .blood2 { position:absolute; top:0; right:calc(50% - 18rem); width:13.9rem; opacity:0; }
#retail .lab-wrap .slide-lab .item2 .con { padding-top:7.2rem; margin-top:-4.2rem; background-image:url('../img/bg-lab-item2.png'); aspect-ratio:360 / 246; }
#retail .lab-wrap .slide-lab .item2 .con .blood { position:absolute; bottom:.6rem; left:calc(50% - 18rem); width:14.1rem; opacity:0; }
#retail .lab-wrap .slide-lab .item3 .con { background-image:url('../img/bg-lab-item3.png'); }
#retail .lab-wrap .slide-lab .item3 .con .note { position:absolute; bottom:2.3rem; right:calc(50% - 18rem + 2.4rem); z-index:2; width:8rem; }
#retail .lab-wrap .slide-lab .item3 .con .note-blood { position:absolute; bottom:2.7rem; right:calc(50% - 18rem + .7rem); z-index:2; width:9.9rem; mix-blend-mode:hard-light; }
#retail .lab-wrap .slide-lab .item3 .con .blood1 { position:absolute; top:0; left:calc(50% - 18rem); width:13.2rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap .slide-lab .item3 .con .blood2 { position:absolute; bottom:5.2rem; right:calc(50% - 18rem); width:13.9rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap .slide-lab .item4 .con { margin-top:-2.7rem; background-image:url('../img/bg-lab-item4.png'); }
#retail .lab-wrap .slide-lab .item4 .con .blood1 { position:absolute; top:.8rem; left:calc(50% - 18rem + 6.2rem); width:.8rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap .slide-lab .item4 .con .blood2 { position:absolute; top:5.3rem; left:calc(50% - 18rem + 6.6rem); width:1rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap .slide-lab .item4 .con .blood3 { position:absolute; top:8.2rem; left:calc(50% - 18rem + 4.6rem); width:2.7rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap .slide-lab .item4 .con .blood4 { position:absolute; bottom:3rem; left:calc(50% - 18rem + 2.2rem); width:2.6rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap .slide-lab .item4 .con .blood5 { position:absolute; bottom:2.8rem; left:calc(50% - 18rem + 6.6rem); width:1rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap .slide-lab .item4 .con .blood6 { position:absolute; bottom:3.3rem; left:calc(50% - 18rem + 11.5rem); width:.7rem; mix-blend-mode:hard-light; opacity:0; }
#retail .lab-wrap.on .slide-lab .item1.swiper-slide-active .con .blood1 { animation:blood2 3s ease-in-out .3s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item1.swiper-slide-active .con .blood2 { animation:blood2 3s ease-in-out .5s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item2.swiper-slide-active .con .blood { animation:blood2 3s ease-in-out .2s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item3.swiper-slide-active .con .blood1 { animation:blood2 3s ease-in-out .4s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item3.swiper-slide-active .con .blood2 { animation:blood2 3s ease-in-out .3s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item4.swiper-slide-active .con .blood1 { animation:blood1 .07s ease-in-out .2s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item4.swiper-slide-active .con .blood2 { animation:blood1 .07s ease-in-out .4s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item4.swiper-slide-active .con .blood3 { animation:blood1 .07s ease-in-out .6s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item4.swiper-slide-active .con .blood4 { animation:blood1 .07s ease-in-out .8s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item4.swiper-slide-active .con .blood5 { animation:blood1 .07s ease-in-out 1s 1 forwards; }
#retail .lab-wrap.on .slide-lab .item4.swiper-slide-active .con .blood6 { animation:blood1 .07s ease-in-out 1.2s 1 forwards; }
#retail .chef-wrap { padding-bottom:7.5rem; margin-top:4.5rem; }
#retail .chef-wrap .list-wrap { margin:5.7rem auto 2.7rem; }
#retail .chef-wrap li { display:flex; justify-content:flex-start; width:100%; }
#retail .chef-wrap li:nth-child(even) { flex-direction:row-reverse; }
#retail .chef-wrap li:nth-child(odd) .con { text-align:left; }
#retail .chef-wrap li:nth-child(even) .con { text-align:right; }
#retail .chef-wrap .con h4 { position:relative; color:#fff; font-size:2rem; line-height:normal; }
#retail .chef-wrap .con h4 > .place { position:absolute; }
#retail .chef-wrap .con p { color:#ffe0c4; font-size:1.3rem; line-height:1.8rem; letter-spacing:-1px; }
#retail .chef-wrap .item2 { margin-top:7.8rem; }
#retail .chef-wrap .item3 { margin-top:6.6rem; }
#retail .chef-wrap .item4 { margin-top:5.1rem; }
#retail .chef-wrap .item5 { padding-left:5.8rem; margin-top:6rem; }
#retail .chef-wrap .item6 { padding-right:4.7rem; margin-top:6.3rem; }
#retail .chef-wrap .item1 .img { margin-top:.4rem; margin-right:.5rem; width:17.1rem; }
#retail .chef-wrap .item2 .img { margin-top:-2.5rem; margin-left:1.1rem; width:16.5rem; }
#retail .chef-wrap .item3 .img { margin-top:-5.1rem; margin-right:1rem; width:16.6rem; }
#retail .chef-wrap .item4 .img { margin-left:.8rem; width:16.8rem; }
#retail .chef-wrap .item5 .img { margin-top:-5.6rem; width:9.6rem; }
#retail .chef-wrap .item6 .img { margin-top:-4.5rem; width:9.5rem; }
#retail .chef-wrap .item1 .place { top:-3.8rem; right:-1.1rem; width:7.4rem; }
#retail .chef-wrap .item2 .place { top:-4.4rem; right:-.5rem; width:10.3rem; }
#retail .chef-wrap .item3 .place { top:-3.5rem; right:-3.2rem; width:7.4rem; }
#retail .chef-wrap .item4 .place { top:-4rem; left:-4rem; width:8.1rem; }
#retail .chef-wrap .item5 .place { top:-3.6rem; right:-4.8rem; width:8.9rem; }
#retail .chef-wrap .item6 .place { top:-4.2rem; right:-.7rem; width:10.2rem; }
@keyframes retail-txt-blink {
    0% { opacity:1; }
    15% { opacity:1; }
    21% { opacity:0; }
    27% { opacity:1; }
    60% { opacity:1; }
    66% { opacity:.3; }
    72% { opacity:1; }
    100% { opacity:1; }
}
@keyframes clown1 {
    0% { transform:translateX(0rem); }
    20% { transform:translateX(-1rem); }
    30% { transform:translateX(0rem); }
    40% { transform:translateX(-1rem); }
    45% { transform:translateX(0rem); }
    48% { transform:translateX(-1rem); }
    51% { transform:translateX(0rem); }
    53% { transform:translateX(-1rem); }
    55% { transform:translateX(0rem); }
    57% { transform:translateX(-1rem); }
    59% { transform:translateX(0rem); }
    100% { transform:translateX(0rem); }
}


/* 팝업 - 공통 */
.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, .8); transition:.3s; }
.popup .content-wrap { position:relative; width:32rem; padding:2.3rem 2.4rem 2.9rem; border-radius:2rem; background-color:#fff; box-sizing:border-box; }
.popup .content-wrap h2 { margin-bottom:2.7rem; color:#B40003; font-family:'MaruBuri'; font-weight:600; font-size:2.2rem; letter-spacing:-.44px; }
.popup .btn.close { 
	position:absolute; top:2.3rem; right:2.4rem; z-index:2; width:2.4rem; height:2.4rem; background-repeat:no-repeat; background-position:center; background-size:100% auto; 
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 18L18 6' stroke='%23777777' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M18 18L6 6' stroke='%23777777' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	color:transparent; font-size:0; 
}
.popup.on { display:flex; }
/* 팝업 - 공유하기 */
.popup .share-wrap { display:flex; justify-content:center; align-items:center; gap:3rem; }
.popup .share-wrap li .btn { color:#333; font-size:1.3rem; font-weight:400; line-height:1.4; letter-spacing:-.26px; text-align:center; }
.popup .share-wrap li .btn::before { content:''; display:block; width:4.8rem; height:4.8rem; margin:0 auto .8rem; border-radius:50%; background-repeat:no-repeat; background-position:center; }
.popup .share-wrap li.url .btn::before { background-color:#940002; background-size:1.6rem 1.7rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'%3E%3Cpath d='M7 10.2949C8.38576 12.1757 11.0086 12.5582 12.8591 11.1535C13.0203 11.0324 13.171 10.8985 13.3134 10.754L15.8253 8.20378C17.4308 6.51427 17.3848 3.82381 15.7227 2.19381C14.1004 0.602063 11.5278 0.602063 9.90548 2.19381L8.4653 3.64742' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 8.70453C9.61424 6.82578 6.99136 6.4411 5.14089 7.84592C4.97971 7.96706 4.82899 8.10095 4.68665 8.24547L2.17471 10.7958C0.569155 12.4833 0.615207 15.176 2.27728 16.8061C3.89957 18.398 6.47222 18.398 8.09452 16.8061L9.52633 15.3524' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.popup .share-wrap li.kakao .btn::before { background-color:#FAE300; background-size:1.4rem 1.3rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none'%3E%3Cpath d='M6.89651 0C3.08758 0 0 2.40786 0 5.37821C0 7.31168 1.30835 9.00585 3.27158 9.95391C3.12724 10.4854 2.74924 11.8786 2.6735 12.1767C2.58025 12.5468 2.81105 12.5419 2.96218 12.4421C3.0808 12.3642 4.85217 11.1765 5.61639 10.6637C6.03119 10.7243 6.45885 10.7564 6.89651 10.7564C10.7054 10.7564 13.793 8.3482 13.793 5.37821C13.793 2.40821 10.7054 0 6.89651 0Z' fill='%23391B1B'/%3E%3C/svg%3E"); }
/* 팝업 - MAP */
.popup.map .content-wrap { overflow-y:auto; position:relative; width:100%; height:100%; padding:2rem 0; border-radius:0; background-color:transparent; }
.popup.map .content-wrap::-webkit-scrollbar { display:none; }
.popup.map .content-wrap > div { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; min-height:100%; padding:0; box-sizing:border-box; }
.popup.map .swiper { overflow:hidden; width:100%; height:auto; }
.popup.map .swiper-wrapper { align-items:flex-start; }
.popup.map .swiper-slide { width:100%; }
.popup.map .swiper-button-prev { left:calc(50% - 18rem + 1.4rem); }
.popup.map .swiper-button-next { right:calc(50% - 18rem + 1.4rem); }
.popup.map .box { position:relative; max-width:36rem; padding:5.2rem 0 0; margin:0 auto; background-repeat:no-repeat; background-position:top center; background-size:100% auto; }
.popup.map .content > h3 { animation:tit-map 3.4s ease-in-out 0s infinite; }
.popup.map .info-wrap { margin:.7rem auto 2.1rem; }
.popup.map .info-wrap > ul li::before { display:none; }
.popup.map .info-wrap > ul li > img { width:auto; height:3.3rem; }
.popup.map .img { position:relative; }
.popup.map .img::before,
.popup.map .img::after { content:''; position:absolute; z-index:2; background-repeat:no-repeat; background-position:center; background-size:100% auto; }
.popup.map .img .swiper-control-wrap { margin-top:.5rem; }
.popup.map .txt { margin-top:1.6rem; }
.popup.map .txt p { color:#4f0000; font-family:'MaruBuri'; font-size:1.8rem; font-weight:600; line-height:2.3rem; }
.popup.map .txt p + p { margin-top:1rem; }
.popup.map .txt .tip { margin-top:1.7rem; }
.popup.map .btn.close { position:relative; top:auto; right:auto; width:5.1rem; height:5.1rem; margin-bottom:-3.4rem; background:url('../img/btn-close.png') no-repeat center; background-size:100% auto; }
.popup.map .item1 .box { background-image:url('../img/bg-map-item1.png'); aspect-ratio:360 / 567; }
.popup.map .item2 .box { background-image:url('../img/bg-map-item2.png'); aspect-ratio:360 / 632; }
.popup.map .item3 .box { background-image:url('../img/bg-map-item3.png'); aspect-ratio:360 / 567; }
.popup.map .item4 .box { background-image:url('../img/bg-map-item4.png'); aspect-ratio:360 / 592; }
.popup.map .item5 .box { background-image:url('../img/bg-map-item5.png'); aspect-ratio:360 / 527; }
.popup.map .item6 .box { background-image:url('../img/bg-map-item6.png'); aspect-ratio:360 / 551; }
.popup.map .item4 .info-wrap { margin-bottom:.3rem; }
.popup.map .item1 .img::before { top:-.9rem; right:calc(50% - 18rem + 2.6rem); width:5.1rem; height:5.4rem; background-image:url('../img/obj-map-item1-tape1.png'); }
.popup.map .item1 .img::after { bottom:1.8rem; left:calc(50% - 18rem + 2.7rem); width:6.8rem; height:4.5rem; background-image:url('../img/obj-map-item1-tape2.png'); }
.popup.map .item2 .img::before { top:-.7rem; right:calc(50% - 18rem + 2.6rem); width:5.7rem; height:3.7rem; background-image:url('../img/obj-map-item2-tape.png'); }
.popup.map .item2 .img::after { top:2.8rem; left:calc(50% - 18rem + 2.6rem); width:14rem; height:17.4rem; background-image:url('../img/obj-map-item2-zombie.png'); }
.popup.map .item3 .img::before { top:-.7rem; left:calc(50% - 18rem + 3rem); width:5.1rem; height:4.9rem; background-image:url('../img/obj-map-item3-clip.png'); }
.popup.map .item3 .img::after { top:3.9rem; right:calc(50% - 18rem + 2.5rem); width:14rem; height:17.6rem; background-image:url('../img/obj-map-item3-zombie.png'); }
.popup.map .item4 .img::before { top:-7.2rem; right:calc(50% - 18rem); width:11.2rem; height:14.8rem; background-image:url('../img/obj-map-item4-blood.png'); }
.popup.map .item4 .img::after { top:5rem; left:calc(50% - 18rem + 2.6rem); width:13.1rem; height:16.2rem; background-image:url('../img/obj-map-item4-zombie.png'); }
.popup.map .item5 .img::after { top:2.4rem; right:calc(50% - 18rem + 3rem); width:14rem; height:17.6rem; background-image:url('../img/obj-map-item5-zombie.png'); }
.popup.map .item6 .img::before { top:-1.4rem; left:calc(50% - 18rem + 3.3rem); width:5.3rem; height:5.2rem; background-image:url('../img/obj-map-item6-x.png'); }
.popup.map .item6 .img::after { right:calc(50% - 18rem + 2.4rem); bottom:-.5rem; width:6.2rem; height:5.6rem; background-image:url('../img/obj-map-item6-tape.png'); }
.popup.map .item1 .img .obj { position:absolute; top:13rem; right:calc(50% - 18rem + 2.2rem); width:13.1rem; }
.popup.map .item4 .swiper-button-prev, 
.popup.map .item4 .swiper-button-next { top:calc(50% - 3rem); }
.popup.map .item6 .swiper-button-prev, 
.popup.map .item6 .swiper-button-next { top:calc(50% + 3rem); }
@keyframes tit-map {
    0% { opacity:1; }
    5% { opacity:1; }
    8% { opacity:.5; }
    11% { opacity:.8; }
    22% { opacity:.8; }
    25% { opacity:.3; }
    28% { opacity:1; }
    36% { opacity:1; }
    39% { opacity:.5; }
    42% { opacity:1; }
    54% { opacity:1; }
    57% { opacity:.5; }
    60% { opacity:.8; }
    72% { opacity:.8; }
    75% { opacity:.3; }
    78% { opacity:1; }
    90% { opacity:1; }
    93% { opacity:.5; }
    96% { opacity:.8; }
    100% { opacity:.8; }
}


@media (max-width:359px) {
    #map .pin-wrap { padding-top:3.3rem; }
    #map .pin-wrap .notice { margin-top:2rem; }

    .popup.map .item1 .txt,
    .popup.map .item6 .txt { margin-top:1rem; }
    .popup.map .item2 .txt,
    .popup.map .item3 .txt,
    .popup.map .item4 .txt,
    .popup.map .item5 .txt { margin-top:2.4rem; }
} 


@media (min-width:501px) {
    #booth .photo-wrap { padding-top:4.5rem; }
} 


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

	/* layout */
	.wrapper { width:720px; height:100%; margin:0 auto; -ms-overflow-style:none; scrollbar-width:none; box-shadow:0px 4px 30px 0px rgba(0, 0, 0, 0.10); }
	/* .wrapper::-webkit-scrollbar { display:none; } */
	.wrapper .title > img { max-width:648px; }
	.btn-menu,
	.btn-top,
	.btn-share { right:calc(50% - 360px + 1rem); }

	
	/* nav */
	nav .menu .logo { width:36rem; }
	nav .menu .logo::after { top:68px; left:calc(50% - 360px); width:146px; height:150px; }
	nav .menu .btn-close { right:calc(50% - 360px + 1rem); }
	nav .menu .depth { width:32.2rem; margin:0 auto; }

    /* 스토리 */
    /* #story .txt p ::-webkit-scrollbar { display:block; width:.4rem; height:.4rem; }
    #story .txt p ::-webkit-scrollbar-thumb { border-radius:5rem; background:#dd0200; } */


	/* main */
    #main .visual { height:1110px; }
    #main .visual .gate { top:-44px; }
    #main .visual .thunder1 { width:470px; }
    #main .visual .thunder2 { top:74px; width:344px; }
    #main .visual .spiral1 { top:-88px; width:1140px; }
    #main .visual .spiral2 { top:-96px; width:780px; }
    #main .visual .spiral3 { top:-150px; width:870px; }
    #main .visual .clown { top:464px; right:-102px; width:344px; height:350px; }
    #main .visual .thunder1 { width:470px; }
    #main .visual .thunder2 { top:74px; width:344px; }
    #main .visual .master { top:164px; left:-102px; width:234px; height:356px; }
    #main .visual .eyes1 { top:436px; left:150px; width:40px; }
    #main .visual .eyes2 { top:322px; right:50px; width:28px; }
    #main .visual h1 { top:638px; }
    #main .visual h1 .obj-wrap { height:500px; }
    #main .list { margin-top:-28px; }
    #main .list .item3 { margin-top:-44px; }
    #main .list .item2 { margin-top:-22px; }
    #main .list li > a { width:720px; }
    #main .list .item1 > a { height:568px; }
    #main .list .item2 > a { height:470px; }


    /* MAP */
    #map .pin-wrap { padding-top:126px; }
    #map .pin-wrap h3 { margin-bottom:66px; }
    #map .pin-wrap .notice { margin-top:72px; }


    /* 좀비 분장 살롱, 좀비 의상실, 네컷사진 */
    #booth::before { width:126px; height:258px; }
    #booth .clothes-wrap .obj-wrap .hand { width:172px; }


    /* MD&FOOD */
    #retail .intro .obj-wrap .clown1 { left:-78px; width:328px; }
    #retail .intro .obj-wrap .clown2 { top:70px; width:200px; }


	/* popup */
	.popup .content-wrap { max-width:none; }
	.popup .btn-close { margin-left:calc(576px - 3.4rem - 4rem); }
} 


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

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