@charset 'UTF-8';
/**
* Filename:Blood City6.css
* Description:Blood City6 pick styles
**/

/* base */
@font-face {
    font-family: 'GangwonState';
    src: url('https://wwwrod.everland.com/font/GangwonState.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Hahmlet';
    src: url('https://wwwrod.everland.com/font/Hahmlet.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
html, body { width:100%; height:100%; margin:0; padding:0; }
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; font-size:100%; }
body { position:relative; font-size:20px; color:#111; background-color:#000; font-family:'Noto Sans CJK KR', sans-serif; letter-spacing:-0.04em; }
ul, ol { list-style-type:none; }
a { box-sizing:border-box; color:#333; text-decoration:none; }
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:'Noto Sans CJK KR', sans-serif; cursor:pointer; outline:none; }
figcaption { display:none; }
img { width:100%; vertical-align:top; }
br.mob { display:block; }
br.web { display:none; }
.hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; }


/* ==========================================================================
	layout
========================================================================== */
.bx-controls-direction > a { position:absolute; top:83.5vw; width:14.444vw; height:14.444vw; background:url(../img/slider_arrow.png); background-size:28.889vw auto; text-indent:-9999px; z-index:52; }
.bx-controls-direction .bx-prev { left:4.722vw; }
.bx-controls-direction .bx-next { right:4.722vw; background-position:right top; }
.bx-controls-direction .bx-prev:before, 
.bx-controls-direction .bx-next:before { content:''; position:absolute; bottom:-11vw; left:0; width:15.278vw; height:10vw; }


.bx-pager { position:absolute; left:0; top: 0; text-align:center; z-index:52; }
.bx-pager > div {display:inline-block; }
.bx-pager > div a { width:4.02vw; height:1.38vw; background:url(../img/m_slider_dots.png); font-size:0; display:block;background-size:4.02vw auto; background-position:right bottom; margin-right: 0.83vw; }
.bx-pager > div a.active { background-position:left top; }


/* ==========================================================================
	content - 공통
========================================================================== */
.cont h1 { left:50%; transform:translateX(-50%); background:url(../img/logo2.png) left top no-repeat; background-size:auto 100%; }
.cont .btnMenu { background:url(../img/m_btn_menu.png) no-repeat; background-size:100% auto; }
.cont h3 { position:relative; }
.cont h3 .spark { position:absolute; left:0; top:-25%; display:block; width:100%; height:30.556vw; background:url(../img/sub_spark.png) no-repeat; background-size:100% auto; }
.cont h3 .spark2 { width:100%; height:42.5vw; background:url(../img/sub_spark2.png) no-repeat; background-size:100% auto; }
.cont p { font-size:4.445vw; font-weight:300; line-height:1.43; color:#fff; text-align:center; text-shadow:0px 1px 4.75px rgba(19, 8, 12, 0.58); margin-top:2.778vw; font-family: 'Hahmlet'; }
.cont p + p { margin-top:5.833vw; }
.cont b { font-weight:500; color:#ff3bcf; letter-spacing: -0.03em; }
.cont .caution { position:relative; text-align:center; }
.cont .caution:before { content:'';position:absolute; top:-6.66vw; left:50%; transform:translateX(-50%); width:100%; height:5.55vw; background:url(../img/m_caution_line.png) no-repeat center; background-size:100% auto; } 
.cont .caution li::before{ content:'·';position:absolute; top:0; left:0;   }
.cont .caution li { font-size:3.33vw; font-weight:300; line-height:1.5; color:#fff; position: relative; padding-left: 1.8vw; }
.cont .schedule { margin:0 21.80vw;}
.cont .schedule li {  color:#ff2d90; position:relative; font-size:3.88vw; letter-spacing:-0.045em; text-align:left; padding-left:6.66vw; margin-bottom:3.05vw; font-family:'Noto Sans CJK KR' } 
.cont .schedule li:last-child { margin-bottom:0; } 
.cont .schedule li span { display: inline; background-color: rgba(255, 45, 144, 0.28); font-size: 3.33vw; padding: 0 8px 2px; margin-left: 10px; border-radius: 22px; }
.cont .schedule li i:before { content:''; position:absolute; left:0; width:4.86vw; height:5.55vw; background:url(../img/m_icon.png); background-size:300%; }
.cont .schedule .map i:before { top:0.55vw}
.cont .schedule .term i:before { top:1.25vw; background-position:right top; }
.cont .schedule .time i:before { top:0.55vw; background-position:center top; }

.wrapTop { display: none; background: url(../img/m_menuBg.png); background-size: 100% 100%; height: 29.16vw; width: 100%; position: fixed; z-index: 1;}
.wrapTop h1 { left:50%; transform:translateX(-50%); background:url(../img/m_logo2.png) left top no-repeat; background-size:auto 100%; }
.wrapTop .btnMenu { background:url(../img/m_btn_menu.png) no-repeat; background-size:100% auto; }
.contSlider > .slick-arrow {display: none !important; position:absolute; top:19.72vw; width:3.05vw; height:3.88vw; background:url(../img/m_nav_arrow.png); background-size:6.667vw auto; text-indent:-9999px; z-index: 5;  }
.contSlider > .slick-prev { left:7.63vw; background-position:left top; }
.contSlider > .slick-next { right:7.63vw; background-position:right top; }
.contSlider > .slick-arrow.on { display:block !important; z-index:2; } 
.contSlider > .slick-arrow.fixed { position:fixed; }



/**** header ****/
.header { position:relative; height:29.16vw; display:block; overflow:hidden; }
.header h1 { position:absolute; top:1.94vw; width:41.66vw; height:18.19vw; z-index:1; }
.header h1 a { width:100%; height:100%; font-size:0; line-height:0; display:block; overflow:hidden; opacity:0; }
.header .btnMenu { position:absolute; z-index:90; top:0; right:0; width:19.445vw; height:100%; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; }

#btnTop { display:none; position:fixed; width:9.16vw; height:14.72vw; right:6.80vw; bottom:6.52vw; background:url(../img/btn_top.png) no-repeat; background-size:100% auto; text-indent:-9999px; z-index:4; }
#btnTop a { display:block; width:100%; height:100%; }

/**** pop up ****/
.body_stop { overflow:hidden; }
.layer_mask { position:fixed; z-index:1000; top:0; left:0; right:0; bottom:0; background:#000; opacity:.78; }
.layer_popup { display:block; visibility:hidden; position:fixed; left:50%; top: 30.27vw; width:100%;height:166.11vw;z-index:1001;transform:translateX(-50%) }
.layer_popup .close { position:absolute; top:-17.22vw; right:6.94vw; width:16.25vw; height:7.36vw; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; cursor:pointer; z-index:50; }
#pop_raon { background: url(../img/m_raonBg.png); background-size: 100% 100%;}
#pop_raon .close { background: url(../img/m_raon_close.png); background-size: 100% 100%;}
#pop_yk { background: url(../img/m_ykBg.png); background-size: 100% 100%;}
#pop_yk .close { background: url(../img/m_yk_close.png); background-size: 100% 100%;}
#pop_hetham { background: url(../img/m_hethamBg.png); background-size: 100% 100%;}
#pop_hetham .close { background: url(../img/m_hetham_close.png); background-size: 100% 100%;}
#pop_ejay { background: url(../img/m_ejayBg.png); background-size: 100% 100%;}
#pop_ejay .close { background: url(../img/m_ejay_close.png); background-size: 100% 100%;}
#pop_ru { background: url(../img/m_ruBg.png); background-size: 100% 100%;}
#pop_ru .close { background: url(../img/m_ru_close.png); background-size: 100% 100%;}


/**** spark Effect ****/
#sparkWrap { position:fixed; right:0; bottom:0; min-width:100%; min-height:100%; overflow:hidden; z-index:5; }
#sparkWrap .spark { background-color:#de4a00; visibility:hidden; position:absolute; width:6px; height:8px; border-radius:30%; box-shadow:0 0 16px #ab000b; }



/* ==========================================================================
	content - Navigation
========================================================================== */
#nav {text-align:center; }
#nav.fixed { position:fixed !important; top:0; left:0; height: 29.16vw; width: 100%; z-index:1; }
#nav span { background:url(../img/m_nav.png); width:100%; height:5.27vw; display:block; background-size:100% auto; font-size:0; position: absolute; left: 0; top: 19.03vw; }
#nav .blood7 { background-position:0 top; }
#nav .zstation { background-position:0 400%; }
#nav .enter { background-position:0 300%; }
#nav .att { background-position:0 200%; }
#nav .foodMd { background-position:0 100%; }


#gnb { display:none; position:fixed; top:0; left:0; width:100%; height:194.44vw; background:url(../img/m_bg_gnb.png); background-size:100% 100%; z-index:100; animation:userleftOpen 0.5s; -webkit-animation:userleftOpen 0.5s; }
#gnb > ul { height:80vh; text-align:center; overflow-x:hidden; overflow-y:auto; margin:29.16vw 0 0; } 
#gnb > ul li { position:relative; }
#gnb > ul > li::after { content:''; position:absolute; width:3.33vw;; height:3.33vw; right:18.47vw; background:url(../img/m_gnb_arrow.png) no-repeat; background-size:3.33vw auto; z-index:1; }
#gnb > ul > li:nth-child(1)::after{display: none;}
#gnb > ul > li:nth-child(2)::after{top: 5.41vw;}
#gnb > ul > li:nth-child(3)::after{top: 7.22vw;}
#gnb > ul > li:nth-child(4)::after{top: 5.41vw;}
#gnb > ul > li:nth-child(5)::after{top: 6.94vw;}
#gnb > ul > li:nth-child(6)::after{top: 5.41vw;}
#gnb > ul > li.on::after { background-position: bottom;}
#gnb > ul li > span { position:relative; z-index:1; }
#gnb > ul li a { display:block; margin:0 auto; font-size:5.556vw; color:#fff; }
#gnb > ul li.on .sub { display:block; }
#gnb .sub { display:none; margin:0; }
#gnb .sub li { padding-bottom:6.666vw; }
#gnb .sub li a { font-size:5.27vw; color:#e4d3ff; font-family: 'GangwonState';}
#gnb .close { display:none; position:absolute; top:0; right:0; width:19.445vw; height:17.778vw; background:url(../img/m_btn_close.png) no-repeat; background-size:100% auto; font-size:0; line-height:0; text-indent:-9999px; }
#gnb .btn_move { position:absolute; left:0; top:0; width:78.055vw; height:23.333vw; }
#gnb ul li .menu { display:block; width:100%;  }
#gnb ul li .menu0 { background:url(../img/m_nav_0.png) no-repeat; background-size:100% auto; height:28.33vw; }
#gnb ul li .menu1 { background:url(../img/m_nav_1.png) no-repeat; background-size:100% auto; height:14.16vw; }
#gnb ul li .menu2 { background:url(../img/m_nav_2.png) no-repeat; background-size:100% auto; height:17.5vw; }
#gnb ul li .menu3 { background:url(../img/m_nav_3.png) no-repeat; background-size:100% auto; height:14.16vw; }
#gnb ul li .menu4 { background:url(../img/m_nav_4.png) no-repeat; background-size:100% auto; height:17.22vw; }
#gnb ul li .menu5 { background:url(../img/m_nav_5.png) no-repeat; background-size:100% auto; height:14.44vw; }



/* ==========================================================================
	content - 개별
========================================================================== */
#main .logo { position:absolute; top:6.66vw; left:6.94vw; z-index:1; }
#main .logo a { display:inline-block; position:relative; width:38.47vw; height:5.83vw; background:url(../img/logo.png) no-repeat; background-size:100% 100%; text-indent:-9999px; }
#main .btnMenu { background:url(../img/m_btn_menu.png) no-repeat; background-size:100% auto; }
#main { background:url(../img/m_bg_main.jpg) no-repeat; background-size:cover; position:absolute; width:100%; height:194.44vw; z-index: 99;
    --glitch-width: 100vw;
    --glitch-height: 100vh;
    --gap-horizontal: 10px;
    --gap-vertical: 5px;
    --time-anim: 4s;
    --delay-anim: 1s;
    --blend-mode-1: none;
    --blend-mode-2: overlay;
    --blend-mode-3: none;
    --blend-mode-4: none;
    --blend-mode-5: overlay;
    --blend-color-1: transparent;
    --blend-color-2: #ff4cff;
    --blend-color-3: transparent;
    --blend-color-4: transparent;
    --blend-color-5: #38058d; }
#main .mainTitle { position:absolute;  background:url(../img/m_tit_main.png) no-repeat; width:100%; height:67.22vw; left:0; top:22.5vw; overflow:visible; z-index:15; background-size: 100% 100%; }
#main .mainTitle a { width:100%; height:100%; font-size:0; line-height:0; display:block; overflow:hidden; opacity:0; }
#main .txt {position:absolute; top:90vw; left:0; display:block; width:100%; height:18.88vw; background:url(../img/m_tit_mainSub.png) no-repeat; z-index:15; background-size: 100% 100%; }
#main .scroll {position:absolute; top:173.33vw; left:0; display:block; width:100%; height:7.22vw; background:url(../img/m_scroll.png) no-repeat; z-index:15; background-size: 100% 100%; }
.loading { position: fixed; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg);}
#main .btnMenu { position:absolute; z-index:90; top:0; right:0; width:19.445vw; height:17.77vw; font-size:0; line-height:0; text-indent:-9999px; display:block; overflow:hidden; }

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(1.5, 1.5, 1);
    }
}
.content { position: relative; margin: 0 auto;}
.contentFixed { top: 0; left: 0;}

.imgloaded .contentTitle,
.imgloaded .contentTimg { animation-name: glitch-text; animation-duration: var(--time-anim); animation-timing-function: linear; animation-iteration-count: infinite; text-align: center;}
.contentSection {position: relative;}
.contentTitle {animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.01); margin: 0;}

.contentText {animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.02);}
@media screen and (max-width: 55em) {
    .contentFixed { grid-template-columns: 1fr;}
    .contentTitle { text-align: center;}
    .contentText { text-align: center; }
}

/* Glitch styles */

.glitch {position: absolute; top: 0; left: 0;overflow: hidden;}
.glitchit { position: absolute; top: calc(-1 * var(--gap-vertical)); left: calc(-1 * var(--gap-horizontal)); width: calc(100% + var(--gap-horizontal) * 2); height: calc(100% + var(--gap-vertical) * 2); background: url(../img/m_bg_main.jpg) no-repeat 50% 0; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend-mode-1);}
.glitchit:nth-child(n+2) {opacity: 0;}
.imgloaded .glitchit:nth-child(n+2) { animation-duration: var(--time-anim); animation-delay: var(--delay-anim);animation-timing-function: linear; animation-iteration-count: infinite;}
.imgloaded .glitchit:nth-child(2) { background-color: var(--blend-color-2); background-blend-mode: var(--blend-mode-2); animation-name: glitch-1;}
.imgloaded .glitchit:nth-child(3) { background-color: var(--blend-color-3); background-blend-mode: var(--blend-mode-3); animation-name: glitch-2;}
.imgloaded .glitchit:nth-child(4) { background-color: var(--blend-color-4); background-blend-mode: var(--blend-mode-4); animation-name: glitch-3;}
.imgloaded .glitchit:nth-child(5) { background-color: var(--blend-color-5); background-blend-mode: var(--blend-mode-5); animation-name: glitch-flash;}

/* Animations */

@keyframes glitch-1 {
    0% {
        opacity: 1;
        transform: translate3d(var(--gap-horizontal), 0, 0);
        -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    2% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    4% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    6% {
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    8% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    10% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    12% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    14% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    16% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    18% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(var(--gap-horizontal), 0, 0);
    }
    22%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}
@keyframes glitch-2 {
    0% {
        opacity: 1;
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
        -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
        clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    }
    3% {
        -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
        clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    }
    5% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
        clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    }
    7% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    9% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
        clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    }
    11% {
        -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
        clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    }
    13% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    15% {
        -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
        clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    }
    17% {
        -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
        clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    }
    19% {
        -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
        clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    }
    20% {
        -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
        clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
    }
    22%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}
@keyframes glitch-3 {
    0% {
        opacity: 1;
        transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
        -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
        clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    }
    1.5% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
        clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    }
    2% {
        -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
        clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    }
    2.5% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
        clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    }
    3% {
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
        clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    }
    5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
        clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    }
    5.5% {
        -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
        clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    }
    7% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
        clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    }
    8% {
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }
    9% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
        clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    }
    10.5% {
        -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
        clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    }
    11% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
        clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    }
    13% {
        -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
        clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    }
    14% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
        clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    }
    14.5% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
        clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    }
    15% {
        -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
        clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    }
    16% {
        -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
        clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    }
    18% {
        -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
        clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    }
    20% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
        clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    }
    21.9% {
        opacity: 1;
        transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
    }
    22%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    }
}
@keyframes glitch-text {
    0% {
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
        -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
        clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }
    2% {
        -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    4% {
        -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    5% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    6% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    7% {
        -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    8% {
        -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    9% {
        -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
        clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    9.9% {
        transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
    }
    10%,
    100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

/* Flash */

@keyframes glitch-flash {
    0%,
    5% {
        opacity: 0.2;
        transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
    }
    5.5%,
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

#bloodCity { position:relative; height: auto;}



.synopsis { position:relative; width:100%; height:273.33vw; background:url(../img/m_bg_synopsis.jpg) no-repeat; background-size:100% 100%; padding-top: 41.66vw;}
.synopsis:after { content:''; position:absolute; top: 128.33vw; left:0; width:100%; height:100%; background:url(../img/m_prologe_shadow.png) no-repeat; background-size:100% auto;z-index:2 }
.synopsis .inner-bg { position:absolute; top: 108.61vw; left:0; width:100%; height:100%; }
.synopsis .inner-content { position:relative; top:0; margin:0 auto; width:100%; height:140vw; overflow:hidden; }
.synopsis .synopsis-slideup { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:207.33vw; }
.synopsis .synopsis-slideup .phrase-synopsis { position:relative; z-index:1; margin-top: 0; color: #ede1ff; line-height: 1.5; letter-spacing: -0.03em;     text-shadow: -1px 1px 1px rgba(255, 45, 228, 0.2); }
.synopsis .control { position:absolute; top:-9.72vw; right:9.44vw; z-index:9999; } 
.synopsis .control button { text-indent:-9999px; }
.synopsis .control .btn-control.stop {background:url(../img/m_history_stop.png) no-repeat;width:5.55vw; height:5vw; background-size: 100% 100%;}
.synopsis .control .btn-control.play {background:url(../img/m_history_play.png) no-repeat; width:5.13vw; height:5.416vw; background-size: 100% 100%;}

.preview { position:relative; width:100%; height:235vw; background:url(../img/m_bg_preview.png) no-repeat; background-size:100% 100%; z-index: 3; padding-top: 26.11vw; margin-top: -26.11vw; }
.preview p { padding: 6.38vw 0 13.05vw; margin-top: 0; color: #ede1ff;}
.preview .bx-controls-auto { position:absolute; top:86.11vw; right:9.72vw; z-index:9999;} 
.preview .bx-controls-auto-item a { text-indent:-9999px; display: block; }
.preview .bx-stop {background:url(../img/m_history_stop.png) no-repeat;width:5.55vw; height:5vw; background-size: 100% 100%;}
.preview .bx-start {background:url(../img/m_history_play.png) no-repeat; width:5.13vw; height:5.416vw; background-size: 100% 100%;}



.symbol { position:relative;  width:100%; height:277.22vw; background:url(../img/m_bg_symbol.png) no-repeat; background-size:100% 100%; margin-top: -43.22vw; padding-bottom: 31.66vw; }
.symbol p { position: relative; z-index: 3; margin-top: 6.92vw; margin-bottom: 9.44vw; color: #ede1ff; }

.zappearance {position:relative;  width:100%; height:330.27vw; background:url(../img/m_bg_appearance.jpg) no-repeat; background-size:100% 100%;padding-top:42.36vw; }
.zappearance p { margin-top: 6.66vw; color: #e1f1ff; text-shadow: 0px 0px 1px rgba(112, 250, 255, 0.5);}
.zappearance p.last { margin: 8.33vw 0 5.13vw;}
.zappearance ul li { float: left; width: 41.25vw; height: 46.80vw; margin-top: 7.5vw;}
.zappearance ul li:nth-child(1) { margin-right: 5.13vw; margin-left: 6.388vw;}
.zappearance ul li:nth-child(3) { margin-right: 5.13vw; margin-left: 6.388vw;}
.zappearance ul li:last-child { margin: 7.5vw 0 0 28.75vw;}
.zappearance a.btn{ display: block; width: 100%; height: 15.27vw;}
.zappearance a.btn > img{ padding-top: 5.55vw;}


.test {position:relative;  width:100%; height:329.44vw; background:url(../img/m_bg_test.jpg) no-repeat; background-size:100% 100%; margin-top: -3.88vw; padding-top: 18.33vw; }
.test .tab { width:95vw; margin:0 auto; overflow:hidden; cursor:pointer; margin-top: 10.41vw; }
.test .tab li { float:left; width:31.66vw; height:13.88vw; background:url(../img/m_tab_join.png) no-repeat; text-indent:-9999px; background-size: 300% auto; }
.test .tab .join1 { background-position:0 top; }
.test .tab .join2 { background-position:50% top; }
.test .tab .join3 { background-position:100% top; }
.test .tab .join1.on { background-position:0 bottom; }
.test .tab .join2.on { background-position:50% bottom; }
.test .tab .join3.on { background-position:100% bottom; }
.test p { margin-top: 6.38vw; color: #e1f1ff; text-shadow: 0px 0px 1px rgba(112, 250, 255, 0.5);} 
.test .joinTest { position: absolute; left: 0; top: 120.55vw; width: 100%; }
.test .joinTest .bx-pager { position:absolute; left:13.61vw; top:114.44vw; text-align:center;}
.test .joinTest .bx-controls-direction > a { position:absolute; top:90.83vw; width:9.58vw; height:9.72vw; background:url(../img/m_slider_arrow.png); background-size:19.16vw auto; text-indent:-9999px; z-index:52; }
.test .joinTest .bx-controls-direction .bx-prev { left:7.77vw; }
.test .joinTest .bx-controls-direction .bx-next { right:7.77vw; background-position:right top; }
.test .info { position:relative; text-align: center;}
.test .info .sub_txt { display:none; }
.test .info .sub_txt.on { display:block; }
.test .info .schedule { width: 30.96vw; margin: 0 0 0 38.05vw; }
.test .info .schedule li { color: #08ccff;}
.test .info .sub_info { position: absolute; left: 0; top: -17.08vw; color: #08ccff; font-size: 3.88vw; font-family: 'Hahmlet';}
.test .info .list { width: 100%;}
.test .info .list li{ position:absolute; left: 0; top: 57.63vw;  }
.test .info .join1 {background: url(../img/m_join1.png); background-size: 100% 100%; width: 100%; height: 154.16vw; padding-top: 58.33vw;}
.test .info .join1 .caution { position: absolute; left: 6.94vw; bottom: -23.88vw; width: 84.02vw;}
.test .info .join1 .caution li{ text-align: left; color: #6598a9;}
.test .info .join1 .box1 { background: url(../img/join1_box1.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join1 .box2 { background: url(../img/join1_box2.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join1 .box3 { background: url(../img/join1_box3.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join1 .box4 { background: url(../img/join1_box4.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join1 .box5 { background: url(../img/join1_box5.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join2 {background: url(../img/m_join2.png); background-size: 100% 100%; width: 100%; height: 168.33vw; padding-top: 58.33vw;}
.test .info .join2 .box1 { background: url(../img/join2_box1.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join2 .box2 { background: url(../img/join2_box2.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join2 .box3 { background: url(../img/join2_box3.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join2 .box4 { background: url(../img/join2_box4.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join2 .box5 { background: url(../img/join2_box5.png); width: 100%; height: 63.33vw; background-size: 100% 100%;}
.test .info .join1 .sub_info { width: 56.5vw; margin: 0 0 0 20.05vw;}
.test .info .join2 .sub_info { width: 44.5vw; margin: 0 0 0 29.05vw; }
.test .info .join3 .sub_info { top: -8.33vw;}
.test .info .join3 .ev1 {position: relative; background: url(../img/m_join3_ev1.png); width: 100%; height: 78.88vw; background-size: 100% 100%; margin-top: -8.75vw; }
.test .info .join3 .ev1 h3 { padding-top: 19.44vw;}
.test .info .join3 .ev1 p { margin: 4.86vw auto 1.94vw; color: #e1f1ff;}
.test .info .join3 .ev1 p span {color: #11ff8b;}
.test .info .join3 .ev1 p.col { margin: 0; color: #91d4ce; font-size: 3.33vw; line-height: 1.4;}
.test .info .join3 .ev2 { background: url(../img/m_join3_ev2.png); width: 100%; height: 83.61vw; background-size: 100% 100%; margin-top: 7.5vw; }
.test .info .join3 .ev2 h3 { padding-top: 18.05vw;}
.test .info .join3 .ev2 p { margin: 5vw auto 1.80vw; color: #e1f1ff;}
.test .info .join3 .ev2 p.col { margin: 0; color: #91c4d4; font-size: 3.33vw; line-height: 1.4;}
.test .info .join3 .ev_obj1 { position: absolute; left: 0; top: -3.33vw; background: url(../img/m_join3_obj1.png); width: 100%; height: 21.38vw; background-size: 100% 100%; }
.test .info .join3 .ev_obj2 { position: absolute; left: 0; top: 69.58vw; background: url(../img/m_join3_obj2.png); width: 100%; height: 25.83vw; background-size: 100% 100%; }
.test .info .join3 .ev_obj3 { position: absolute; left: 0; top: 145.41vw; background: url(../img/m_join3_obj3.png); width: 100%; height: 54.72vw; background-size: 100% 100%; }



.ticket {position:relative;  width:100%; height:255vw; background:url(../img/m_bg_ticket.jpg) no-repeat; background-size:100% 100%; }
.ticket p { margin-top: 6.11vw; color: #bbdbe7; text-shadow: 0px 0px 1px rgba(112, 250, 255, 0.5);}
.ticket .schedule { width: 62.91vw; margin-top: 6.25vw;}
.ticket .schedule li {  color:#08ccff; } 
.ticket .schedule li span { background-color: rgba(8, 204, 255, 0.28); }
.ticket .caution { text-align: left; margin-top: 10.13vw; margin-left: 5vw; margin-bottom: 7.77vw;}
.ticket .caution li { color: #6598a9; }


#enterTainment .caution { text-align: left; margin: 10.83vw auto 0; padding-left:11.66vw;  }
#enterTainment .caution:before { content:'·';position:absolute; top:-6.66vw; left:50%; transform:translateX(-50%); width:100%; height:5.55vw; background:url(../img/m_caution_line1.png) no-repeat center; background-size:100% auto; } 
#enterTainment .caution li { color: #c075b1}
#enterTainment .schedule .map i:before { top:0.55vw; background-position:left bottom;}
#enterTainment .schedule .time i:before { top:0.55vw; background-position:center bottom; }


.crazy {position:relative;  width:100%; height:265.55vw; background:url(../img/m_bg_crazy.jpg) no-repeat; background-size:100% 100%; padding-top: 36.66vw; }
.crazy p { margin-top: 1.38vw; margin-bottom: 6.11vw; color: #e1f1ff; text-shadow: 0px 0px 1px rgba(255, 112, 189, 0.5);}
.crazy .schedule  {margin: 0 21.36vw; width: 76.1vw;}
.crazy .hunter { margin-top: 10.27vw; position: relative;} 
.crazy .hunter .bx-pager { position:absolute; left:67.86vw; top:61.66vw; text-align:center;}
.crazy .hunter .bx-pager > div a { width:3.88vw; height:1.66vw; background:url(../img/m_slider_dots1.png); font-size:0; display:block;background-size:3.88vw auto; background-position:right bottom; margin-right: 0.83vw; }
.crazy .hunter .bx-pager > div a.active { background-position:left top; }
.crazy .hunter .bx-controls-direction > a { position:absolute; top:30.55vw; width:9.58vw; height:9.72vw; background:url(../img/m_slider_arrow1.png); background-size:19.16vw auto; text-indent:-9999px; z-index:52; }
.crazy .hunter .bx-controls-direction .bx-prev { left:2.08vw; }
.crazy .hunter .bx-controls-direction .bx-next { right:2.08vw; background-position:right top; }


.after {position:relative;  width:100%; height:230.55vw; background:url(../img/m_bg_after.jpg) no-repeat; background-size:100% 100%; padding-top: 4.16vw; }
.after p { margin-top: 6.11vw; margin-bottom: 6.11vw; color: #e1f1ff; text-shadow: 0px 0px 1px rgba(255, 112, 189, 0.5);}
.after .schedule  {margin: 0 20.83vw; width: 76.1vw;}
.after .schedule .term i:before { background-position: right bottom;}
.after .djparty { margin-top: 6.83vw; position: relative;} 
.after .djparty .bx-pager { position:absolute; left:67.86vw; top:61.66vw; text-align:center;}
.after .djparty .bx-pager > div a { width:3.88vw; height:1.66vw; background:url(../img/m_slider_dots1.png); font-size:0; display:block;background-size:3.88vw auto; background-position:right bottom; margin-right: 0.83vw; }
.after .djparty .bx-pager > div a.active { background-position:left top; }
.after .djparty .bx-controls-direction > a { position:absolute; top:30.55vw; width:9.58vw; height:9.72vw; background:url(../img/m_slider_arrow1.png); background-size:19.16vw auto; text-indent:-9999px; z-index:52; }
.after .djparty .bx-controls-direction .bx-prev { left:2.08vw; }
.after .djparty .bx-controls-direction .bx-next { right:2.08vw; background-position:right top; }
.after .schedule li span.djTimeinfo { margin-left:0; padding:0; background:none; display:block;  } 



.zombie {position:relative;  width:100%; height:221.38vw; background:url(../img/m_bg_zombie.jpg) no-repeat; background-size:100% 100%; padding-top: 17.77vw; z-index: 1; }
.zombie p { margin-top: 5.97vw; margin-bottom: 6.11vw; color: #e1f1ff; text-shadow: 0px 0px 1px rgba(255, 112, 189, 0.5);}
.zombie .schedule { margin: 0 34.02vw; width: 38.6vw; }
.zombie .zombie_obj { background: url(../img/m_zombie_obj.png); width: 100%; height: 123.61vw; background-size: 100% 100%; position: absolute; left: 0; bottom: -37.88vw;}

.photo {position:relative;  width:100%; height:289.72vw; background:url(../img/m_bg_photo.jpg) no-repeat; background-size:100% 100%; padding-top: 3.05vw; }
.photo h3 { z-index: 2;}
.photo p { color: #e1f1ff; margin-top: 6.38vw; text-shadow: 0px 0px 1px rgba(255, 112, 189, 0.5);}
.photo .schedule { margin-top: 5.55vw; margin-bottom: 6.11vw; width: 66.38vw; margin: 5.55vw 0 6.11vw 20.13vw;} 
.photo .photoEvent { width: 100%; height: 63.05vw; position: absolute; left: 0; top: 176.66vw; background: url(../img/m_photo_event.png); background-size: 100% 100%;}
.photo .photoEvent p { margin-top: 19.16vw; margin-bottom: 2.36vw;}
.photo .photoEvent p span { color: #ad82f1;}
.photo .photoEvent p.col { color: #5c0afa; font-size: 3.33vw; line-height: 1.41; letter-spacing: -0.03em; margin-top: 0;}
.photo .photo_obj { width: 100%; height: 40.83vw; position: absolute; left: 0; top: 226.38vw; background: url(../img/m_photo_obj.png); background-size: 100% 100%;}

.maze {position:relative;  width:100%; height:200vw; background:url(../img/m_bg_maze.jpg) no-repeat; background-size:100% 100%; padding-top: 42.77vw; }
.maze .btn { margin: 4.444vw auto 1.66vw; display: block; } 
.maze p { margin-top: 5.55vw; color: #e1f1ff; text-shadow: 0px 0px 1px rgba(255, 53, 53, 0.5);}
.maze p.last { color:#d94f58; font-size: 3.33vw; line-height: 1.8; margin-top: 0; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);}
.texpress {position:relative;  width:100%; height:187.5vw; background:url(../img/m_bg_texpress.jpg) no-repeat; background-size:100% 100%; padding-top: 5.55vw; }
.texpress p {margin-top: 6.25vw; margin-bottom: 8.88vw; color: #e1f1ff; text-shadow: 0px 0px 1px rgba(255, 53, 53, 0.5);}   
.texpress .caution:before { content:'·';position:absolute; top:-6.66vw; left:50%; transform:translateX(-50%); width:100%; height:5.55vw; background:url(../img/m_caution_line2.png) no-repeat center; background-size:100% auto; } 
.texpress .caution { text-align: left; margin-left: 11.52vw;}
.texpress .caution li { color: #d94f58; }


#food {  font-family: 'Hahmlet'; position:relative;  width:100%; height:424.58vw; background:url(../img/m_bg_food.jpg) no-repeat; background-size:100% 100%; padding-top: 43.05vw;}
#food .menuList > li { position: relative; padding-left: 6.25vw; font-size: 4.44vw; line-height: 1.78; letter-spacing: -0.03em;}
#food .menuList > li::before { line-height: 1.4; font-size: 3.33vw; text-align: center; content:''; position:absolute; top: 1.78vw; left: 0; width: 4.58vw; height: 4.58vw; border-radius: 50%; background-color: rgba(255, 45, 144, 0.3); }
#food .menuList li > .schedule { display: inline-block; margin: 0; width: auto;}
#food .menuList li > .schedule li { padding-left: 4.16vw; margin-left: 2.08vw;}
#food .menuList li > .schedule li i:before { content:''; position:absolute; left:0; width:3.47vw; height:4.30vw; background:url(../img/m_icon_food.png); background-size:100% auto; }
#food .menuList li > .schedule .map i:before { top:1.80vw; background-position: top;}
#food .bloodMenu { width: 100%; height: 168.33vw; background: url(../img/m_food_box1.png); background-size: 100% 100%; }
#food .bloodMenu h3 { margin-bottom: 9.86vw; padding-top: 16.11vw;}
#food .bloodMenu .menuList { margin-top: 4.44vw; margin-left: 12.91vw; }
#food .bloodMenu .menuList > li { color: #fff;  text-shadow: 1px 1px 3px rgba(20, 0, 49, 0.8);}
#food .bloodMenu .menuList > li::before { color: #ff2d90; }
#food .bloodMenu .menuList > li:nth-child(1)::before {content:'1';}
#food .bloodMenu .menuList > li:nth-child(2)::before {content:'2';}
#food .bloodMenu .menuList > li:nth-child(3)::before {content:'3';}
#food .bloodMenu .menuList > li:nth-child(4)::before {content:'4';}
#food .bloodMenu .menuList > li:nth-child(5)::before {content:'5';}
#food .happyMenu { width: 100%; height: 177.77vw; background: url(../img/m_food_box2.png); background-size: 100% 100%; margin-top: 3.47vw; }
#food .happyMenu h3 { margin-bottom: 2.36vw; padding-top: 14.16vw;}
#food .happyMenu .menuList { margin-top: 3.33vw; margin-left: 14.44vw;}
#food .happyMenu .menuList > li { color: #fff8e1; text-shadow: 1px 1px 3px rgba(20, 0, 49, 0.8);}
#food .happyMenu .menuList > li::before { color: #ff8720; background-color: rgba(255, 119, 28, 0.3);  }
#food .happyMenu .menuList > li:nth-child(1)::before {content:'1';}
#food .happyMenu .menuList > li:nth-child(2)::before {content:'2';}
#food .happyMenu .menuList > li:nth-child(3)::before {content:'3';}
#food .happyMenu .menuList > li:nth-child(4)::before {content:'4';}
#food .happyMenu .menuList > li:nth-child(5)::before {content:'5';}
#food .happyMenu .menuList li > .schedule li{ color: #ff8720;}
#food .happyMenu .menuList li > .schedule .map i:before{ background-position: bottom;}

#md {  font-family: 'Hahmlet'; position:relative;  width:100%; height:306.38vw; background:url(../img/m_bg_md.jpg) no-repeat; background-size:100% 100%; margin-top: -10.13vw; padding-top: 9.44vw;}
#md .bloodMd{ position: relative; height: 111.80vw;}
#md .bloodMd li { float: left; height: 56.38vw; }
#md .bloodMd li:nth-child(1) {width: 41.38vw; height:34.16vw; background: url(../img/m_tit_md1.png); background-size: 100% 100%; position: absolute; top: 14.027vw; left: 6.25vw;}
#md .bloodMd li:nth-child(2) {margin-left :50.83vw; width: 45.2777vw;}
#md .bloodMd li:nth-child(3) {width: 45.97vw; margin-left: 3.75vw; margin-top: -1.11vw;}
#md .bloodMd li:nth-child(4) {width: 45.27vw; margin-left: 1.11vw; margin-top: -1.11vw;}
#md .thanksMd{position: relative; margin-top: 8.88vw;}
#md .thanksMd li { float: left; height: 56.38vw;}
#md .thanksMd li:nth-child(1){margin-left: 3.75vw; width: 45.97vw;}
#md .thanksMd li:nth-child(2) {width: 45.27vw; margin-left: 1.11vw;}
#md .thanksMd li:nth-child(3){margin-left: 3.75vw; width: 45.97vw; margin-top: -1.11vw;} 
#md .thanksMd li:nth-child(4) {width: 40.55vw; height:45.55vw; background: url(../img/m_tit_md2.png); background-size: 100% 100%; position: absolute; top: 62.08vw; left: 52.91vw;}
#md .md_obj { width: 100%; height: 10.55vw; position: absolute; left: 0; top: 181.94vw; background: url(../img/m_md_obj1.png); background-size: 100% 100%; }
#md .btn { position: absolute; left: 0; top: 249.72vw; height: 13.88vw; width: 100%;}




/*==========================================================================
	animation styles
========================================================================== */

/* prologue */
.synopsis .inner-bg { display:none; }
.synopsis .inner-content { display:none; }
.synopsis .synopsis-slideup .phrase-synopsis { opacity:0; }

@media (min-width:768px) {
	.synopsis { height:100vh; }
	.synopsis:after { content:none; }
	.synopsis .inner-bg { width:720px; height:540px; left:50%; transform:translateX(-50%); }
	.synopsis .inner-content { top:500px; width:720px; height:400px; }
	.synopsis .synopsis-slideup { top:0; height:450px; }
	.synopsis .control { top:390px; right:0;  }
	.synopsis .control .btn_skip { width:124px; height:74px; }
}