@charset "utf-8";

/* reset */
*,:after,:before { box-sizing: border-box }
html { box-sizing: border-box }
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, main, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea { margin: 0; padding: 0; }
body { font-family: 'Pretendard', 'Noto Sans KR', -apple-system, 'Roboto', sans-serif; font-weight:400; }
a { text-decoration:none; background-color: transparent; -webkit-text-decoration-skip: objects; -webkit-tap-highlight-color: transparent; }
a:active, a:hover { outline-width: 0; }
h1, h2, h3 { font-size:100%; font-weight:700; }
h4, h5, h6 { font-weight:500; }
strong { font-weight:700; }
ol, ul { list-style:none }
button, input, select, textarea { margin:0; padding:0; outline:none; border:0; background-color:transparent; font-family: 'Pretendard','Noto Sans KR', -apple-system, 'Roboto',sans-serif; }
img, video { height:auto; max-width:100% }
img { display: block; outline:0;; }
iframe { border:0 }
table { border-collapse:collapse; border-spacing:0 }
td, th { padding:0 }


/* *********************************************************************************************** */
/* component */
/* *********************************************************************************************** */
/* button */
button { cursor:pointer; }
.disabled { pointer-events:none; cursor:not-allowed !important; }
.r-btn { display:flex; align-items:center; justify-content:center; width:100%; border:none; outline:none; font-family: 'Pretendard','Noto Sans KR', -apple-system, 'Roboto', sans-serif; font-size: clamp(18px, calc(18px + (37 - 18) * ((100vw - 375px) / (770 - 375))), 37px) !important; transition:all .3s ease; cursor:pointer;}

/* check radio button style */
.r-btn-check { position:absolute; clip:rect(0,0,0,0); pointer-events:none; }
.r-btn-label { transition:all .3s ease; }
.r-btn-check:checked + .r-btn-label { border-color:#000; }

/* form */
input.r-form__control,
.r-btn--form { display:flex; align-items:center; width:100%; height:clamp(36px, 10vw, 72px); padding:0 1.5%; background:#fff; border-radius:.5rem; border:2px solid; font-size:clamp(1rem, 4vw, 2rem); transition:all .3s ease; }
input.r-form__control { border:2px solid #CED4DA; }
.r-btn--form { justify-content:center; background:#000; color:#fff; font-weight:700; }

input.r-form__control:focus { border-color:#1e2f46; }
input.r-form__control:focus::placeholder { color:transparent !important }

@media screen and (max-width: 600px) {
    input.r-form__control, .r-btn--form { border-radius:.25rem; }
    input.r-form__control { border-width:1px; }
}

/* list */
ul, li, li > * { user-select:text; }
.common-list { padding-top: 7%; }
.common-list__item { position: relative; padding-left: 5.2%; line-height: 1.3; letter-spacing: -0.05em; word-break: keep-all; font-size: clamp(13px, 3.766vw, 29px); color: var(--text); }
.common-list__item:before { content: ''; position: absolute; top: clamp(6px, calc(6px + (12 - 6) * ((100vw - 320px) / (770 - 320))), 12px); left: 2%; width: clamp(4px, 1.2vw, 10px); height: clamp(4px, 1.2vw, 10px); background: var(--text); }
.common-list__item + .common-list__item { margin-top: 2%; }

/* icon */
.r-icon { width: clamp(1.25rem, 4.8vw, 2.5rem); height: clamp(1.25rem, 4.8vw, 2.5rem); }
.r-icon-bg { background-position: center; background-repeat: no-repeat; }

/* img */
.fit-img { width: auto; height: 100%; margin: auto; }
.fit-w-img { width: 100%; height: auto; }


/* *********************************************************************************************** */
/* utill */
/* *********************************************************************************************** */
:root {
    --text: black;
    --primary: black;
    --red: red;
}

/* 260120 지마켓 산스 추가 */
.font-family-gmarket { font-family: 'Gmarket Sans', sans-serif !important; }

/* position */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

/* display */
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }

/* flex */
.flex-center-center { display: flex; align-items: center; justify-content: center; }
.align-center { align-items: center; }

/* grid */
.d-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:.5rem; }
.g-col-1 { grid-column: span 1; }
.g-col-2 { grid-column: span 2; }
.g-col-3 { grid-column: span 3; }
.g-col-4 { grid-column: span 4; }
.g-col-5 { grid-column: span 5; }
.g-col-6 { grid-column: span 6; }
.g-col-7 { grid-column: span 7; }
.g-col-8 { grid-column: span 8; }
.g-col-9 { grid-column: span 9; }
.g-col-10 { grid-column: span 10 ;}
.g-col-11 { grid-column: span 11 ;}
.g-col-12 { grid-column: span 12 ;}

/* text align */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* color */
.text-primary { color: var(--primary); }
.text-red { color: var(--red); }
.text-white { color: white !important; }
.text-black { color: var(--text) !important; }

/* bg */
.bg-white { background: white !important; }

/* font weight */
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

.visually-hidden { display: block; width: 1px; height: 1px; margin: -1px; padding: 0; border:0; clip: rect(0,0,0,0); white-space: nowrap; overflow: hidden; }

/* line hegiht */
.lh-12 { line-height: 1.2 !important; }
.lh-13 { line-height: 1.3 !important; }
.lh-14 { line-height: 1.4 !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-16 { line-height: 1.6 !important; }

/* letter spacing */
.ls-tight { letter-spacing: -0.03em !important; }
.ls-tighter { letter-spacing: -0.05em !important; }

/* font-size */
.e-fs-12 { font-size: clamp(12px, calc(12px + (27 - 12) * ((100vw - 375px) / (770 - 375))), 27px) !important; }
.e-fs-13 { font-size: clamp(13px, calc(13px + (29 - 13) * ((100vw - 375px) / (770 - 375))), 29px) !important; }
.e-fs-14 { font-size: clamp(14px, calc(14px + (33 - 14) * ((100vw - 375px) / (770 - 375))), 33px) !important; }
.e-fs-15 { font-size: clamp(15px, calc(15px + (35 - 15) * ((100vw - 375px) / (770 - 375))), 35px) !important; }
.e-fs-16 { font-size: clamp(16px, calc(16px + (37 - 16) * ((100vw - 375px) / (770 - 375))), 37px) !important; }
.e-fs-18 { font-size: clamp(18px, calc(18px + (37 - 18) * ((100vw - 375px) / (770 - 375))), 37px) !important; }
.e-fs-20 { font-size: clamp(20px, calc(20px + (42 - 20) * ((100vw - 375px) / (770 - 375))), 42px) !important; }
.e-fs-22 { font-size: clamp(22px, calc(22px + (49 - 22) * ((100vw - 375px) / (770 - 375))), 49px) !important; }
.e-fs-24 { font-size: clamp(24px, calc(24px + (52 - 24) * ((100vw - 375px) / (770 - 375))), 52px) !important; }
.e-fs-26 { font-size: clamp(26px, calc(26px + (58 - 26) * ((100vw - 375px) / (770 - 375))), 58px) !important; }

/* padding */
.p-4 { padding: 4% !important;}

/* padding x */
.px-14 { padding-left: 14% !important; padding-right: 14% !important; }
.px-24 { padding-left: 24% !important; padding-right: 24% !important; }

/* padding y */
.py-3 { padding-top: 3% !important; padding-bottom: 3% !important; }
.py-6 { padding-top: 6% !important; padding-bottom: 6% !important; }

/* padding bottom */
.pb-14 { padding-bottom: 14% !important;  }
.pb-16 { padding-bottom: 16% !important;  }

/* margin left */
.ms-2 { margin-left: 2% !important; }
.ms-3 { margin-left: 3% !important; }

/* margin right */
.me-2 { margin-right: 2% !important; }
.me-3 { margin-right: 3% !important; }

/* margin y */
.my-4 { margin-top: 4% !important; margin-bottom: 4% !important; }
.my-6 { margin-top: 6% !important; margin-bottom: 6% !important; }
.my-8 { margin-top: 8% !important; margin-bottom: 8% !important; }

/* margin-top */
.mt-2 { margin-top: 2% !important; }
.mt-3 { margin-top: 3% !important; }
.mt-4 { margin-top: 4% !important; }
.mt-5 { margin-top: 5% !important; }
.mt-6 { margin-top: 6% !important; }
.mt-8 { margin-top: 8% !important; }
.mt-10 { margin-top: 10% !important; }
.mt-12 { margin-top: 12% !important; }
.mt-14 { margin-top: 14% !important; }
.mt-16 { margin-top: 16% !important; }

/* margin-bottom */
.mb-2 { margin-bottom: 2% !important; }
.mb-4 { margin-bottom: 4% !important; }
.mb-6 { margin-bottom: 6% !important; }
.mb-8 { margin-bottom: 8% !important; }
.mb-10 { margin-bottom: 10% !important; }
.mb-12 { margin-bottom: 12% !important; }


/* *********************************************************************************************** */
/* event page common */
.event-wrap { padding-top: 50px; }
.event-page { margin:0 auto; min-width: 320px; max-width: 770px; }
.event-content { background:#fff; }
.event-title { padding: 13px 15px; height: auto; line-height: 1.5; font-size: 16px; border-bottom: 1px solid #e8e8e8; background: #fff; word-break: keep-all; }
.event-title span { display: block; margin-top: 3px; font-size: 12px; color: #999; }
.event-img { position: relative; }

/* event lounge */
.tl-lounge { padding:7% 6.4%; background: #202C42; text-align:center; letter-spacing:-0.04em; line-height:1.33; font-size:clamp(14px, 4.156vw, 2rem); color:#fff; }
.tl-lounge--sm { font-size:clamp(14px, 4.156vw, 1.25rem); }

/* event footer */
.footer { position: relative; background-color: #222f44; }
.footer .bottom { position: relative; }
.footer .btns { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: center; }
.footer .btns .btn { flex: 0 0 30%; margin: 0 1%; }

/* mobile touch */
.touch {position:relative; overflow:hidden;}
.touch:active::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-blend-mode: lighten; background-color:rgba(255,255,255,.1); z-index:10; pointer-events: none; transition:.2s linear; }

/* add touch animation */
.animation { position:relative; overflow:hidden;}
.animation:active::after { content:''; position:absolute; padding:100%; animation:move .2s ease-in-out; transform:rotate(15deg) translate(0, 0); background:-moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background:-webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); background:linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); opacity:.3;}

@keyframes move {
    from {transform:rotate(15deg) translate(-100%, 0px);}
    to{transform:rotate(15deg) translate(0px, 0px);}
}

.motion-scale:active { -webkit-transform: scale(.96); transform: scale(.96); transition: all .2s cubic-bezier(0.075, 0.82, 0.165, 1); }


/* *********************************************************************************************** */
/* event popup */
.modal-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 950; }
.modal-wrap > div { position: absolute; top: 50%; left: 50%; padding: 20px 20px 70px; width: 100%; max-width: 340px; min-width: 280px; color: #1e2f46; text-align: center; border-radius: 8px; background-color: #fff; word-break: keep-all; transform: translate(-50%, -60%); overflow: hidden; }
.modal-wrap h1 { font-size: 20px; font-weight: bold; text-align: center; letter-spacing: -1px; line-height: 1.2; }
.modal-wrap p { margin: 5px 0; font-size: 17px; }
.modal-wrap p.notice { padding: 0 10px; text-align: left; letter-spacing: -1.3px; }
.modal-wrap small { font-size: 13px; }
.modal-wrap input { margin-top: 10px; width: 100%; height: 50px; font-size: 20px; color: #000; text-align: center; border: 1px solid #b1b1b1; border-radius: 0; outline: none; -webkit-touch-callout: default !important; -webkit-user-select: text !important; -webkit-appearance: none; appearance: none; }
.modal-wrap .btns { position: absolute; bottom: 0; left: 0; padding: 1px; width: 100%; height: 50px; overflow: hidden; }
.modal-wrap .btns button { display: block; width: 100%; height: 100%; font-size: 18px; color: #fff; background: #1e2f46; border: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.modal-wrap .btns.col-2 button { float: left; width: 50%; }
.modal-wrap .btns.col-2 button:first-child { border-right: 1px solid #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 0; }
.modal-wrap .btns.col-2 button:last-child { border-bottom-right-radius: 8px; border-bottom-left-radius: 0; }
body.opened-modal { height: 100vh; overflow: hidden; }

/* sr-only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }