@charset "UTF-8"; 

/* 이벤트 공통 템플릿
 * 2023.07.24 ~
 */

/* reset */
html, body {-webkit-text-size-adjust:none}
body {color:#121212; font-family:-apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; font-size:14px; line-height:1.45}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, select, p, button, figure, figcaption {margin:0; padding:0}
img, iframe {max-width:100%; border:none; vertical-align:top}
table {width:100%}
table, thead, tbody, tfoot, tr, th, td {border-collapse:collapse; table-layout:fixed}
caption {overflow:hidden; width:0; height:0; font-size:0; line-height:0}
h1, h2, h3, h4, h5, h6 {font-size:100%}
ul, ol, li {list-style:none}
em, address {font-style:normal}
button, label {cursor:pointer}
input, textarea {border-radius:0; border:none; -webkit-appearance:none; -webkit-border-radius:0}
input, textarea, select, button {color:inherit; font-size:inherit; font-family:inherit}
textarea {width:100%; resize:none; vertical-align:top}
legend, .blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
a {text-decoration:none; color:#121212}
a:hover {text-decoration:underline}

/* 갓머리 */
.hk__event-top {position:relative; z-index:99999; padding:0 10px; border-bottom:1px solid #e1e1e1; font-family:-apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif}
.hk__event-top .inner-top {display:flex; align-items:center; justify-content:space-between; margin:0 auto}
.hk__event-top .logo-area {flex:0 0 auto}
.hk__event-top .logo-hk {display:block; padding:8px 10px; line-height:0}
.hk__event-top .logo-hk img {height:14px}
.hk__event-top .login-area {flex:0 0 auto; display:flex; align-items:center}
.hk__event-top .login-area [class^="btn-"] {display:block; padding:0 10px; font-weight:bold; font-size:13px; line-height:30px}

/* footer */
.hk__event-footer {background-color: #2d3453; padding:10px 20px; color:#fff; font-size:12px; line-height:1.45; font-family:-apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif}
.hk__event-footer * {font-size:inherit}
.hk__event-footer .inner-footer {padding:10px 0}
.hk__event-footer .footer-group {display: flex; flex-direction: row; gap: 3px; justify-content: space-between; flex-wrap: nowrap; max-width: 1280px; margin: 0 auto; align-items: center;}

.hk__event-footer .footer-group > .logo {font-size:0.9rem; font-weight:bold; line-height:1.1rem}
/* modal */
.hk-modal {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999999; align-items:center; justify-content:center; background-color:rgba(0,0,0,.5); animation:fade-out .3s forwards; font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif}
.hk-modal:not(.modal-photoviewer) {touch-action:none; height:100vh}
.hk-modal .hk-modal-inner {position:fixed; left:0; bottom:0; right:0; padding:20px 0; border-radius:10px 10px 0 0; background:#fff; animation:modalScaleDown .3s cubic-bezier(.6, 0, .4, 1) forwards; touch-action:auto}
.hk-modal .hk-modal-header {padding:0 20px 15px; text-align:center}
.hk-modal .hk-modal-tit {font-weight:bold; font-size:20px; line-height:1.2}
.hk-modal .hk-modal-body {padding:15px 20px 0}
.hk-modal .hk-modal-header + .hk-modal-body {padding-top:0}
.hk-modal .hk-modal-footer {display:flex; align-items:center; justify-content:space-between; padding:20px 20px 0; text-align:center}
.hk-modal .hk-modal-footer [class^="modal-btn-"] {flex:0 0 auto; width:calc(50% - 5px); display:inline-flex; align-items:center; box-sizing:border-box; justify-content:center; height:40px; border-radius:8px; font-size:16px}
.hk-modal .hk-modal-footer [class^="modal-btn-"]:only-child {width:100%}
.hk-modal .modal-btn-close {position:absolute; top:9px; right:9px; padding:10px}
.modal-btn-close {position:absolute; top:20px; right:20px}
.modal-btn-confirm {background-color:#ff761b; color:#fff}
.modal-btn-cancel {background-color:#666; color:#fff}

.modal-btn-outline {display:inline-flex; align-items:center; box-sizing:border-box; justify-content:center; min-width:70px; padding:0 10px; margin:0 3px; border:1px solid #ddd; border-radius:5px; line-height:30px; font-size:14px}
.modal-btn-outline.color-primary {color:#ff761b}

.hk-modal .msg {font-size:18px; text-align:center}
.hk-modal .scroll-area {overflow-x:hidden; overflow-y:auto}
.hk-modal.show {display:flex; animation:fade-in .3s forwards}
.hk-modal.show .hk-modal-inner {animation:modalScaleUp .3s cubic-bezier(.6, 0, .4, 1) forwards}
.hk-modal.hide {animation:fade-out .3s forwards}
.hk-modal.hide .hk-modal-inner {animation:modalScaleDown .3s cubic-bezier(.6, 0, .4, 1) forwards}
@keyframes fade-in {
  from {opacity:0}
  to {opacity:1}
}
@keyframes fade-out {
  from {opacity:1}
  to {opacity:0; z-index:-1; height:0; overflow:hidden}
}
@keyframes modalScaleUp {
	0% {-webkit-transform:translateY(100%); transform:translateY(100%)}
	to {-webkit-transform:translateY(0); transform:translateY(0)}
}
@keyframes modalScaleDown {
    0% {-webkit-transform:translateY(0); transform:translateY(0); opacity:1}
	to {-webkit-transform:translateY(200%); transform:translateY(200%); opacity:0}
}

@media all and (min-width:768px) {
    .hk-modal {font-family:-apple-system,"Malgun Gothic","맑은 고딕",BlinkMacSystemFont,helvetica,"Apple SD Gothic Neo",sans-serif}
    .hk-modal,
    .hk-modal.show,
    .hk-modal.show .hk-modal-inner {animation:none}
    .hk-modal .hk-modal-inner {position:relative; padding:40px 30px 30px; border-radius:10px; box-shadow:3px 3px 7px rgba(0,0,0,.05); box-sizing:border-box}
    .hk-modal .hk-modal-body {padding:0}
    .hk-modal .hk-modal-footer {padding-top:25px}
    .hk-modal .hk-modal-footer [class^="modal-btn-"] {text-decoration:none}
    .modal-alert .hk-modal-inner {width:380px}
    .modal-alert .msg {font-size:18px; line-height:28px; text-align:center}
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    .hk-modal .hk-modal-inner {background:#1c1c1e}
}