@charset "UTF-8";
/* @import url('https://static.hankyung.com/resource/common/font/GmarketSans/GmarketSans.css'); */

:root {
    --color-esg-primary: #015825;
    --color-esg-secondary: #109848;

    --color-gray-121212: #121212;
    --color-gray-777: #777;
    --color-gray-888: #888;
    --color-gray-eee: #eee;
    --color-gray-ddd: #ddd;
    --color-gray-c3c3c3: #c3c3c3;
    --color-gray-fafafa: #fafafa;
    --color-white: #fff;
    --color-red: #ee4c4c;
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Noto Sans KR'),
         url(https://hkstatic.hankyung.com/resource/common/font/NotoSans/NotoSansKR-Regular.woff2) format("woff2"),
         url(https://hkstatic.hankyung.com/resource/common/font/NotoSans/NotoSansKR-Regular.woff) format("woff");
}
/* @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Noto Sans KR Medium'),
         url(https://hkstatic.hankyung.com/resource/common/font/NotoSans/NotoSansKR-Medium.woff2) format("woff2"),
         url(https://hkstatic.hankyung.com/resource/common/font/NotoSans/NotoSansKR-Medium.woff) format("woff");
} */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Noto Sans KR Bold'),
         url(https://hkstatic.hankyung.com/resource/common/font/NotoSans/NotoSansKR-Bold.woff2) format("woff2"),
         url(https://hkstatic.hankyung.com/resource/common/font/NotoSans/NotoSansKR-Bold.woff) format("woff");
}

/* reset */
html {background:var(--color-white)}
html, body {-webkit-text-size-adjust:none}
body {color:var(--color-gray-121212); font-weight:500; font-family:-apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Apple SD 산돌고딕 Neo', 'Malgun Gothic', '맑은 고딕', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size:14px; line-height:1.4}
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, fieldset, iframe {border:0 none; vertical-align:middle}
table {width:100%}
table, thead, tbody, tfoot, tr, th, td {border:0 none;border-collapse:collapse;table-layout:fixed}
h1, h2, h3, h4, h5, h6 {font-size:100%}
ul, ol, dl, li, dt, dd {list-style:none}
a {text-decoration:none;color:var(--color-gray-121212)}
em {font-style:normal}
button {border:0 none;border-radius:0;cursor:pointer; background:none}
input, textarea {border-radius:0; border:0 none;  -webkit-appearance:none; -webkit-border-radius:0}
input[type="checkbox"] {-webkit-appearance:checkbox}
input[type="radio"] {-webkit-appearance:radio; -webkit-border-radius:10px}
caption {overflow:hidden;width:0;height:0;font-size:0;line-height:0}
legend, .blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
input, textarea, select, button {color:inherit;font-size:inherit;font-family:inherit}
input[type="submit"] {-webkit-appearance:none;-webkit-border-radius:0px;padding:0;border:0;margin:0}
textarea {width:100%;resize:none;vertical-align:middle}
textarea::-webkit-input-placeholder, textarea::-moz-placeholder, textarea:-ms-input-placeholder, textarea:-moz-placeholder {color:var(--color-gray-888)}
input::-webkit-input-placeholder, input::-moz-placeholder, input:-ms-input-placeholder, input:-moz-placeholder {color:var(--color-gray-888)}
img, iframe {max-width:100%}

/* common */
.hk__event-top .inner-top,
.hk__event-footer .inner-footer,
.inner-layout {max-width:800px; margin:0 auto}

.color-primary {color:var(--color-esg-primary)}
.color-secondary {color:var(--color-esg-secondary)}
/* .form-wrap ~ .hk__event-footer .inner-footer {justify-content:flex-start} */

/* main */
.event-main img {max-width:100%}
.event-main .main-block {text-align:center}


/* apply */
.check-style label {display:inline-block; position:relative; padding-left:30px; font-size:17px; cursor:pointer}
.check-style label::before {content:''; display:inline-block; position:absolute; top:2px; left:0; width:20px; height:20px; border:1px solid var(--color-gray-777); border-radius:3px; box-sizing:border-box}
.check-style .inp-chk {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
.check-style .inp-chk:checked + label::before {border-color:var(--color-gray-121212); background:var(--color-gray-121212) url('https://static.hankyung.com/img/www/w/common/form/icon-check-fff.svg') no-repeat center center/10px 9px}
.check-style .inp-chk[type="radio"] + label::before {border-radius:50%}
.check-style .inp-chk[type="radio"]:checked + label::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg transform='translate(-253 -551)'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff' data-name='타원 4' transform='translate(253 551)'/%3E%3Ccircle cx='6' cy='6' r='6' data-name='타원 5' transform='translate(257 555)'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%/contain}

.form-wrap {max-width:780px; margin:0 auto; padding:0 15px 50px; font-weight:500}
.form-wrap .header {height:min(max(60px, 12vw), 80px); margin-bottom:min(max(15px, 3vw), 20px); border-bottom:1px solid var(--color-gray-121212)}
.form-wrap .logo {width:min(max(160px, 34vw), 215px); height:min(max(32px, 7vw), 43px)}
.form-wrap .form-tit {margin:30px 0 15px; font-size:min(max(21px, 3vw), 22px); text-align:center; word-break:keep-all;}
.form-wrap .essential-txt {font-size:15px; text-align:right}
.form-wrap .essential {margin:0 2px; color:var(--color-red); font-weight:300; vertical-align:-3px}
.form-cont + .form-cont {margin-top:min(max(30px, 8vw), 50px)}
.form-conts-tit {display:block;padding-bottom:10px; border-bottom:1px solid var(--color-gray-121212); font-size:19px}

.privacy-box {height:min(max(200px, 34vw), 220px); margin:10px 0; border:1px solid var(--color-gray-ddd); border-radius:10px; overflow:hidden; box-sizing:border-box}
.privacy-box .scroll {overflow-y:auto; height:100%; padding:20px; font-size:15px; line-height:1.6; box-sizing:border-box}
.privacy-box .scroll::-webkit-scrollbar {width:5px; -webkit-appearance:none}
.privacy-box .scroll::-webkit-scrollbar-thumb {height:17%; background-color:var(--color-gray-ddd)}
.privacy-box p + p {margin-top:10px}
.agree-area {font-size:min(max(16px, 3vw), 17px)}
.agree-area + .agree-area {margin-top:5px}

.inp-txt {outline:none; width:100%; padding:0 15px; border-radius:10px; border:1px solid var(--color-gray-ddd); font-size:17px; line-height:48px; box-sizing:border-box}
.inp-txt:disabled {background-color:#f5f5f5}
.inp-txt::placeholder {color:var(--color-gray-888); font-weight:300}
.inp-txt:-ms-input-placeholder {color:var(--color-gray-888)}
.inp-txt::-ms-input-placeholder {color:var(--color-gray-888)}
.inp-txt:disabled::placeholder {color:#787878}

input[type=number] {position: relative; padding-right:25px}
input[type="number"] {-webkit-appearance:textfield; -moz-appearance:textfield; appearance:textfield}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none}
.inp-number-wrap {display:flex; justify-content:space-between; align-items:center; gap:8px; flex:1 1 auto; font-size:16px}

.inp-number-area {display:flex; align-items:center; gap:8px; flex:0 0 auto}
.inp-number-area .inp-number {display:flex; align-items:center; flex:0 0 auto}
.inp-number-area .inp-number .inp-txt {width:50px; padding:0; text-align:center; border-radius:0}
.inp-number-area .inp-number .btn-num-down,
.inp-number-area .inp-number .btn-num-up {display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border:1px solid #ddd; color:#909090; font-weight:300; font-size:19px}
.inp-number-area .inp-number .btn-num-down {border-right:none; border-radius:10px 0 0 10px}
.inp-number-area .inp-number .btn-num-up {border-left:none; border-radius:0 10px 10px 0}
/* .inp-number-area .inp-number .btn-num-up::after,
.inp-number-area .inp-number .btn-num-down::after {content:''; display:inline-block; width:14px; height:14px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain; vertical-align:top}
.inp-number-area .inp-number .btn-num-up::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9S19 320.1 32 320.1h256c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E%0A")}
.inp-number-area .inp-number .btn-num-down::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301 191.9 288 191.9L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E")} */
.inp-number-area .unit {flex:0 0 auto}

.inp-error .inp-txt {border-color:var(--color-red)}
.error-txt {margin-top:5px; padding-left:15px; color:var(--color-red); font-size:12px}
.error-txt + .bul-dash {margin-top:5px}

.form-list {display:flex; flex-direction:column; gap:20px; padding-top:20px}
.form-list > dl > dt {margin-bottom:5px; font-size:17px}
.form-list.type-row {flex-direction:row; flex-wrap:wrap; gap:10px 30px}
.form-item {display:flex; gap:4px; align-items:center}
.form-item > .inp-txt {flex:1 1 auto}
.form-item > .bar {flex:0 0 auto; font-weight:300; font-size:17px; text-align:center}
.form-item .btn-default {flex:0 0 auto; margin-left:6px; padding:0 15px; border:1px solid var(--color-gray-121212); border-radius:10px; background:var(--color-white); font-size:15px; line-height:48px; white-space:nowrap}
.form-item.item-col2 {width:48%}
.form-item.item-col2 .bar {width:8px}
.form-msg {margin:20px 0; font-size:min(max(17px, 3vw), 18px); text-align:center}

.select-style.inp-txt {position:relative; padding:0;}
.select-style select {overflow:none; position:relative; width:100%; height:50px; padding:0 35px 0 15px; border-radius:10px; appearance:none; border:none}
.select-style::after {content:''; position:absolute; top:calc(50% - 4px); right:19px; width:8px; height:8px; border-right:1px solid #888; border-bottom:1px solid #888; transform:rotate(45deg) translateY(-50%)}

.btn-secondary {display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:50px; border-radius:10px; background-color:var(--color-esg-secondary); color:var(--color-white); font-weight:500; font-size:17px; text-align:center}
.btn-secondary.btn-cancel {background-color:#333}
.form-action {display:flex; align-items:center; justify-content:center; gap:10px; margin-top:min(max(20px, 5vw), 30px); text-align:center}

.form-tit + .info-msg-box {margin:0 0 30px}
.info-msg-box {margin-top:min(max(30px, 6vw), 40px); padding:20px; border:1px solid var(--color-gray-ddd); border-radius:10px; background:var(--color-gray-fafafa); word-break:keep-all}
.info-msg-tit {display:block; font-weight:500; font-size:17px}
.info-msg-tit + .info-msg-tit {margin-top:7px}
.info-msg-box p {font-weight:300; line-height:1.6}

.info-list {margin-top:20px}
.info-list li {padding-left:10px; line-height:1.5; font-size:16px; text-indent:-10px; }
.info-txt {margin-top:20px; font-size:16px}

.form-item + .bul-txt,
.form-item + .bul-dash {margin-top:10px}
.bul-dash p {padding-left:18px; text-indent:-18px; color:#888; font-weight:400; font-size:14px}
.bul-dash p a {color:#888}

.bul-txt-wrap {display:flex; flex-direction:column; gap:3px; margin-top:15px}
.bul-txt {display:flex; gap:4px; color:#888; font-weight:400; font-size:15px}
.bul-txt.bul-star::before {content:'*'; position:relative; top:2px}

.bul-txt.type-sm {font-size:12px}

.contactus {padding:20px; border-top:1px solid var(--color-gray-121212); font-size:19px}
.contact-tel {display:flex; gap:10px}

.accompany-wrap .error-txt {padding:0}
.accompany-wrap .form-list + .bul-txt {margin-top:8px}
.total-pay {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:10px 0; text-align:center; font-size:16px}
.total-pay .price {margin-left:24px; font-size:24px}
.total-pay .unit {color:#999}

.form-txt {margin-top:25px; font-weight:700; font-size:16px}
.form-txt + .form-list {padding-top:10px}

@media screen and (max-width:719px) {
    .form-action {flex-direction:column; flex-wrap:wrap}
}
@media screen and (min-width:720px) {
    .form-wrap .essential-txt {font-size:14px}
    .privacy-box .scroll {padding:25px 30px}
    .agree-area label {font-size:16px}

    .form-list {gap:10px}
    .form-list > dl {display:flex; align-items:flex-start}
    .form-list > dl > dt {flex:0 0 auto; width:130px; padding-top:15px; font-size:16px} 
    .form-list > dl > dd {flex:1 1 auto; width:calc(100% - 100px)}
    .form-list > dl > dd > .form-list:first-child {padding-top:15px}
    .form-item {gap:10px}
    .form-item .btn-default {margin:0; padding:0 24px}
    .form-msg {margin:30px 0}

    .form-action {gap:20px}
    .form-action .btn-secondary {max-width:200px}
    .info-msg-tit {font-size:16px}
    .info-msg-box {padding:20px 30px}
}