@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, select, input, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: EliceDxNeolli;
    letter-spacing: 0px;
    box-sizing: border-box;
}

.desktop {background:pink;padding:60px 0;}
.desktop #wrap {
    transform:translateZ(0);
    max-width:430px;
    margin:0 auto;
    background:#fff;
    overflow: hidden;
}
.desktop #container {
    height: calc(100vh - (60px * 2) - 56px - 100px);
    overflow-y: auto;
    margin: 56px 0 100px;
}

.desktop #container .contents {padding:0 24px calc(env(safe-area-inset-bottom) + 24px);}

.desktop .popWrap {
    transform: translate(100%);
    transition: transform .3s;
}

.desktop .popWrap.on {
	transform: translate(0);
}