@font-face { 
    font-family: 'NEXON-Gothic'; 
    font-weight: normal;
    font-style: normal; 
    src: url(../font/NEXONLv1Gothic-OTF.eot);
    src: url(../font/NEXONLv1Gothic-OTF.woff) format('woff');
  }

/* --- CSS Reset --- */
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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
label,img,input,select,textarea,button {vertical-align:middle;}
a:link, a:visited, a:hover, a:active {text-decoration: none; color: inherit;}
table {border-collapse:collapse;border-spacing:0}

body {
    font-family: 'Apple SD Gothic Neo','맑은 고딕','Malgun Gothic', sans-serif;;
    font-size: 1.125rem;
    letter-spacing: -0.035em;
    font-weight: normal;
    -webkit-text-size-adjust: none;
    background-color: #000;
    min-height: 100vh;
    background: #000 url('../images/black-back2.jpg') no-repeat; 
    background-position: center;
    background-size: cover;  
}
.fix-wid {
    width: 100%;
    max-width: 744px;
    margin: auto;
}
.font-nexon {font-family: 'NEXON-Gothic';}
.txc-w {color: #fff;}
.txc-6 {color: #666;}

.txs-18 {font-size: 1.8em;}
.bgf-e {background-color: #f5f5f5;}

.gaps20 {display: block; height: 20px;}
.gaps30 {display: block; height: 30px;}
.gaps40 {display: block; height: 40px;}
.gaps420 {display: block; height: 40px;}

.rad5 {border-radius: 5px; box-sizing: border-box;}

.container-evm {
    min-height: 100vh;
    display: flex;
    flex-direction: column;   
    justify-content: flex-start;
}
@media screen and (max-width:768px) {
    body {font-size: 1rem;}
    .txs-18 {font-size: 1.28em;}
    .gaps420 {height: 23px;}
}

/* ==== Header ==== */
.head-evp {
    position: sticky;
    top: 0; left: 0;
    height: 91px;
    background: rgba(0,0,0,0.5) url('../images/line-topb.png') no-repeat center bottom;
    z-index: 9;
    flex-shrink: 0;
}
.head-inbx {
    position: relative;
    width: 100%; height: 100%;
}
/* -- Slide Side Menu -- */
.head-evp #menu-evh {display: none;}
.btn-evm {
    display: block;
    position: absolute;
    top: 25px;
    background: transparent url('../images/btn-evOpen.png') no-repeat center / cover;
    cursor: pointer;
    z-index: 10;
}
.btn-evm, .sideMBox .btn-evcm {
    width: 38px; height: 38px;
    left: 40px;
}
.sideMBox {
    position: fixed;
    top: 0; left: -75%;
    width: 75%; 
    height: 100%;
    background-color: #000;
    z-index: 10;
    padding: 140px 10px 30px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-transition: left 0.4s;
    transition: left 0.4s;
}
.sideMBox .btn-evcm {
    display: none;
    position: fixed;
    top: 25px;
    background: transparent url('../images/btn_evclose.png') no-repeat center /cover;
    cursor: pointer;
}
.nav-sideBox li {
    width: 100%;
    margin-bottom: 1.6em;
    text-align: center;
    color: #b2b2b2;
    font-size: 1.8em;
    font-weight: 600;
    transition: color 0.3s;
}
.nav-sideBox li:hover {color: #c29d4d;}
.slide-copys {
    text-align: center;
    margin: 50px auto 0;
    font-size: 16px;
    color: #888;
}

/* -- Slide Menu Background -- */
.slideBgc {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: 9;
}
.head-evp input#menu-evh:checked ~ .sideMBox {left: 0;}
.head-evp input#menu-evh:checked ~ .slideBgc {display: block;}
.head-evp input#menu-evh:checked ~ .sideMBox .btn-evcm {display: block;}

.top-midx {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-45%,-50%);
}
.top-midx > h1 {
    font-size: 1.5em;
    font-weight: 600;
}

@media screen and (max-width:768px) {
    .head-evp {height: 76px;}    
    .btn-evm, .sideMBox .btn-evcm {
        width: 30px; height: 30px;
        left: 13px;
    } 
    .nav-sideBox li {
        margin-bottom: 1.3em;
        font-size: 1.4em;
    }    
    .sideMBox {padding: 120px 10px 30px;}
    .top-midx > h1 {font-size: 1.3em;}

}
/* ==== End Header ==== */
.content-evp {
    flex: 1 0 auto;
    padding: 70px 0 10vw;
    position: relative;
    box-sizing: border-box;
}
.topArea-evp {
    text-align: center;
    padding: 0 0 25px;
}

/* - Home Page - */
.contents-eva {height: calc(100vh - 91px);}
.inbxw-eva {
    display: block;
    position: relative;
    height: 100%;
}
.inbxw-eva .incx-eva {
    display: block;
    width: 90%;
    text-align: center;
    position: absolute;
    top: 45%; left: 50%;
    transform: translate(-50%,-50%);
}
.incx-eva .intxbx1 h2 {
    font-size: 2.1em;
    margin: 20px auto 0;
    font-weight: 600;
}
.incx-eva .intxbx1 h3 {font-size: 1.5em; }
.incx-eva .inbtnbx1 {
    margin: 70px auto 0;
    width: 85%;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    border: 3px solid rgba(255,255,255,0.7);
    border-radius: 40px;
    box-sizing: border-box;
    transition: background-color 0.3s;
}
.inbtnbx1 .btncopn {
    font-size: 1.5em;
    display: block;
    padding: 15px 18px;
    font-weight: 500;
}
.incx-eva .inbtnbx1:hover {
    color: #000;
    background-color: rgba(255,255,255,1);
    font-weight: 600;
}
@media screen and (max-width:768px) {
    .contents-eva {height: calc(100vh - 76px);}
}
/* - Buy Coupon - */
.buytx1-evc {
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    color: #444;
}
.buycp-evc {
    padding: 30px 15px;
    box-sizing: border-box;
    text-align: center;
}
.buycp-evc .prc-ievc {font-size: 2em;}
.buycp-evc .prc-ievc > span::after {
    content: 'KRW';
    color: #777;
    font-size: 20px;
}
.buycp-evc .img-ievc {margin: 15px auto 0;}
.buycp-evc .img-ievc > img {
    display: block;
    width: 90%;
    margin: auto;
}
.buycp-evc .desc-ievc {
    margin: 20px auto 0;
    font-size: 1.25em;
}
.buycp-evc .desc-ievc > span::before, .buycp-evc .desc-ievc > span::after {
    color: #888;
    font-size: 0.7em;
    vertical-align: middle;
}
.buycp-evc .desc-ievc > span::before {content: '(';}
.buycp-evc .desc-ievc > span::after {content: ')';}
@media screen and (max-width:768px) {
    .buycp-evc {padding: 20px 15px;}
    .buycp-evc .desc-ievc {font-size: 1.15em;}
    .buycp-evc .img-ievc {margin: 13px auto 0;}
}

/* - Coupon Page - */
.contents-evw {
    flex: 1;
    /* background-color: #fff; */
}
.contents-bxw {padding: 0 0 40px;}
.copn-evn {
    width: 90%;
    margin: auto;
    padding: 20px 0;
    box-sizing: border-box;
}
.copn-evn .imgbx-evn {}
.copn-evn .imgbx-evn img {width: 100%;}
.cpnum-evn {
    padding: 23px 15px;
    box-sizing: border-box;
    text-align: center;
}
.cpnum-evn > ul {font-weight: 600;}
.cpnum-evn > ul li.numbi {
    margin: 15px 0 0;
}
.cpnum-evn > ul li::before, .cpnum-evn > ul li.numbi::after {
    font-size: 18px;
    vertical-align: middle;
    font-weight: 400;
    color: #777;
}
.cpnum-evn > ul li.numtx::before {content: '주문번호 : ';}
.cpnum-evn > ul li.numbi::before {content: '쿠폰개수 : ';}
.cpnum-evn > ul li.numbi::after {content: ' 개';}

/* - Counter Area - */
.countbx-evn {
    padding: 23px 15px;
    box-sizing: border-box;
}
.countbx-evn > ul {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
}
.countbx-evn > ul li.numctx-evn {
    flex: 1;
    text-align: center;
}
.countbx-evn > ul li.numctx-evn .numx1 {font-weight: 600;}

.countbx-evn > ul li > button {
    border: none;
    outline: none;
    background-color: transparent;
    display: block;
    width: 40px; height: 40px;
    cursor: pointer;
}
.countbx-evn > ul li > button.abtn1 {background: url('../images/arc1.svg') no-repeat center / cover;}
.countbx-evn > ul li > button.abtn2 {background: url('../images/arc2.svg') no-repeat center / cover;}

/* - BarCode Area - */
.barbx-evn {
    background: url('../images/ticketx.png') repeat-y center;
    background-size: 100%;
    padding: 15px 10px 15px;
    box-sizing: border-box;
}
.inbar-evn {
    width: 93%;
    margin: 15px auto;
    border: 2px solid rgba(100,100,100,0.2);
    padding: 15px 10px 20px;
    box-sizing: border-box;
}
.inbar-img > img {
    display: block;
    width: 93%;
    margin: auto;
}
.inbarCode {
    margin: 25px auto 0;
    font-weight: 600;
    text-align: center;
    word-break: break-all;
}
/* - Button Style - */
.btn-style15 {
    display: block;
    width: 95%;
    padding: 15px;
    margin: auto;
    box-sizing: border-box;
    outline: none; border: none; cursor: pointer;
    text-align: center;
    color: #fff;
    background-color: #48b1f5;
    border-radius: 45px;
}
@media screen and (max-width:768px) {
    .inbar-evn {
        margin: 5px auto;
    }
}
/* - Check Page - */
.chtxbx-evr {
    padding: 23px 15px;
    box-sizing: border-box;
    font-size: 1.3em;
}
.chtxbx-evr > ul {
    display: flex;
    align-items: center;
    color: #444;
}
.chtxbx-evr > ul li.img-vr {width: 25%; padding: 0 7px 0 0; box-sizing: border-box;}
.chtxbx-evr > ul li.tx-vr {flex: 1; line-height: 1.4; }
.chtxbx-evr > ul li > img {
    width: 90%;
    margin: auto;
}
.inputbx-evr {
    padding: 35px 15px 35px;
    box-sizing: border-box;
}
.deput-bx {display: flex; align-items: center;}
.deput-bx .label-bxr {
    width: 130px;
    font-size: 1.1em;
}
.deput-bx .input-bxr {flex: 1;}
.deput-bx .input-bxr > input {width: 100%;}
/* - Input Style - */
.input-sty3 {
    outline: none;
    font-size: 1em;
    border: 1px solid #aaa;
    height: 48px;
    padding: 2px 10px;
    border-radius: 3px;
    box-sizing: border-box;
}
.input-sty3::placeholder {
    font-size: 0.9em;
    color: #aaa;
}
.input-sty3:focus {
    border-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);            
}

@media screen and (max-width:768px) {
    .chtxbx-evr > ul {align-items:flex-start;}
    .deput-bx {flex-direction: column;}
    .deput-bx .label-bxr {
        display: block;
        width: 100%;
        font-size: 1em;
    }
    .deput-bx .input-bxr {
        padding: 5px 0 0;
        flex: none;
        width: 100%;
    }
    .inputbx-evr {padding: 25px 15px 30px;}
}
/* -  Result Area - */
.resu-evr {
    position: relative;
    min-height: 170px;
    padding: 30px 15px;
    box-sizing: border-box;
}
.resu-bx {}
.resu-bx li {
    font-weight: 600;
    vertical-align:middle;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}
.resu-bx li:not(:first-of-type) {
    margin: 12px 0 0 0;
}
.resu-bx li::before, .resu-bx li::after {
    font-size: 0.7em;
    color: #666;
    font-weight: 400;
    vertical-align: middle;
}
.resu-bx li::before {margin: 0 10px 0 0;}
.resu-bx li.price::after {margin: 0 0 0 6px;}

.resu-bx li.date::before {content: '• 주문일자 : ';}
.resu-bx li.price::before {content: '• 주문금액 : ';}
.resu-bx li.price::after {content: ' 원';}
.resu-bx li.number::before {content: '• 쿠폰수량 : ';}
.resu-bx li.date2::before {content: '• 발급일자 : ';}
.resu-bx li.reson::before {content: '• 발급현황 : ';}
.resu-bx li.coname::before {content: '• 쿠폰발행사 : ';}
.resu-bx li.comail::before {content: '• 고객센터 : ';}
.resu-bx li.cotell::before {content: '• 전화번호 : ';}

.non-res {
    color: #666;
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}