@charset "utf-8";
@import url(../../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo.css);
/* Reset */
* {margin: 0;padding: 0;box-sizing: border-box;}
img {max-width: 100%;height: auto;border: 0;display: block;}
ul, ol {list-style: none;}
a {color: inherit;text-decoration: none;}
button, select {cursor:pointer;-webkit-tap-highlight-color: transparent;}
button, input, textarea {font: inherit;border: none;background: none;}
label {-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;outline: none;}
input[type="radio"]:focus {outline: none;box-shadow: none;   -webkit-tap-highlight-color: transparent;}
table {border-collapse: collapse;border-spacing: 0;}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; }
.hidden{display: none;}
html {-webkit-text-size-adjust: 100%;text-size-adjust: 100%;scroll-behavior: auto;}
html, body {font-size: 34%;min-width: 375px; accent-color: var(--accent-color);color: var(--font-color);}
@media (min-width: 480px) {
    html, body{font-size: 40%;}
}
@media (min-width: 750px) {
    html, body {font-size: 62.5%;}
}

/************************** GNB ************************/
#gnb_wrap {background-color: #fff;width: 100%;padding: 2rem !important;max-width: var(--layout-max-width) !important;position: fixed;z-index: 9999;margin: 0 auto;
    left: 50%;transform: translateX(-50%);  display: flex;justify-content: space-between;align-items: center;}
#gnb_wrap .clear{display: none;}
#gnb_wrap:after{content: none !important;}
/* #gnb_wrap .gnb_logo {margin: 1rem 0 !important;} */
#gnb_wrap .gnb_logo_bu {margin: .4rem 0 !important;}
/* #gnb_wrap .gnb_menu {margin: .5rem 0;} */
#gnb_wrap .gnb_menu div .top_tell{margin-left: 0 !important;}
#gnb_wrap .gnb_menu > div{display: flex;align-items: center;justify-content: space-between; gap: 1rem;}
#gnb_wrap .gnb_menu_seo {margin: 1.4rem 0 !important;}
#gnb_wrap .gnb_menu_seo div {display: flex;align-items: center;align-content: center;}
#top_null {height: 12rem !important;}
#gnb_wrap .gnb_ka_reservation {display: flex; gap: 1rem !important;justify-content: space-beween; align-items: center; position: relative;}
#gnb_wrap .gnb_logo img {width:auto !important;height:7rem !important;}
#gnb_wrap .gnb_menu img{width:auto !important;height:5.6rem !important;}
#gnb_wrap .gnb_menu_icon {display: flex;justify-content: center;align-items: center;}
#gnb_wrap .gnb_menu_icon img{width:auto !important;height:6.5rem !important;}
/************************** LAYOUT ************************/
#landing_container{inline-size: min(100%, var(--layout-max-width));margin-inline: auto;}
.container_wrap {width: 100%;margin: auto;background: var(--container-bg-color, #fff);font-size: 3.8rem;}
.container,.section {position: relative}
.help-text {text-align: center;font-size: 2.5rem;padding: 2rem 0}

.form_wrap{padding:0 5% 10rem;}
.notice {color:red;font-size: clamp(12px,1.4vw,1.6rem);text-align: center;margin: -5rem 0 5rem 10rem;text-align: left;}

.request{background: #E2F2FF;}
.input_row{margin-bottom: 1.5rem;}

.apply_form_onepage .input_wrap{margin-bottom: 2rem;}
.apply_form_onepage .input_wrap:last-of-type{margin-bottom: 0;}
/************************** Progressive Form Landing ************************/
.landing-header{padding: 7rem  0 5rem;}
.landing-header-slogun {	font-family: 'SpoqaHanSansNeo';font-style: normal;font-weight: 300;font-size: var(--slogun-font-size ,5.4rem);line-height: 1.4;text-align: center;color: var(--slogun-color, #000)}
.landing-header-slogun .sub_text{font-size: 2.4rem;color: #444;margin-top: 1rem;}

.progress-container{position: relative;margin: 3rem 4rem 0}
.progress-bar{width: 100%;height: 6.8rem;background: #fff;border-radius: 100px;padding: .6rem .7rem;box-sizing: border-box;}
.progress-fill {height: 100%;background: var(--progress-fill-bg, linear-gradient(180deg, #FCFB00 0%, #FFA800 100%));border-radius: 100px;transition: width 0.5s ease;}
.progress-text{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 2.8rem;font-weight:500;color: #000;}

.puple_bg {width: 100%;background-color: #fff;position: relative;padding: 6.6rem 5rem;border-top-left-radius: 5rem;border-top-right-radius: 5rem;}
.form_wrap{padding:0 5% 10rem;}
/************************** 입력 폼 ************************/
input[type='text'], input[type='number']  {
    background-color: var(--input-bg-color, #fff);
    border-radius:var(--input-border-radius, 1.2rem);
    color: var(--input-color, #333);
    vertical-align: top;
    width: 100%;
    height: var(--input-height, 12rem);
    border:1px solid var(--input-border-color, #a6a6a6);
    box-sizing: border-box;
    font-size: var(--input-font-size, 3.4rem);
    padding-left: 3.2rem;
    box-shadow: var(--input-box-shadow, none);
}
input[type='text']:focus, input[type='number']:focus {
    border: 2px solid var(--focus-border-color);
    outline: transparent;
}
input[type='text']::placeholder, input[type='number']::placeholder {
    outline:none;
    color:#C1C1C1
}
select{
    padding-left:2rem;
    border-radius:var(--input-border-radius, 1.2rem);
    font-size: var(--input-font-size, 3.4rem);
    height: var(--input-height, 12rem);
    appearance: none;
    background-color: var(--input-bg-color, #fff);
    background-size:2rem;
    background-image:url('../img/dropdown.png');
    background-repeat: no-repeat;
    background-position:  right 20px top 50%;
    width: 100%;
    border: 1px solid var(--input-border-color, #a6a6a6);
}
select:focus {
    border: 2px solid var(--focus-border-color);
    outline: transparent;
}
/* radio */
.check_list input[type=radio] {width: 3rem;height: 3rem; cursor: pointer;}
.check_list input[type=radio]+label {cursor: pointer;}

.input_hidden{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}


/*성별*/
.input_wrap input[type='radio']{
    width:3rem;
    height:3rem;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    background-image: url(../img/check.png);
    border:1px solid #333;
    border-radius:2rem;
    padding:1rem;
    background-position: center;
    background-repeat: no-repeat;
}

.input_wrap input[type='radio']:checked{
    background:#1A20DC;
    background-image: url(../img/check_on.png);
    background-repeat: no-repeat;
    background-position: center;
}


.sex_ul{width: 100%;height: 100px;margin-bottom: 1.5rem;display: flex;gap: 1rem;}
.sex_ul > li{width: 100%;height:100%;display:inline-block;}
.sex_ul > li:first-child{float:left;}
.sex_ul > li:last-child{float:right;}
.sex_ul > li > label{width:100%;height:100%;display: block;padding: 3.1rem 0 .1rem 3rem;box-sizing: border-box;border: 1px solid #a6a6a6;
    border-radius: 1rem;text-align: left;background: #fff;position: relative;line-height: 100%;cursor:pointer;}
.sex_ul > li > label{font-size: 3.8rem;color: #000;position: relative;margin-right: .9rem;vertical-align: middle;}
.sex_ul > li > label input[type='radio']:checked::after {content: "";border: .2rem solid #1A20DC;width: calc(100% - .2rem);height: calc(100% - .2rem);display: block;
    position: absolute;left: -1px;top: -1px;border-radius: 1rem;}
.sex_ul > li > label > span{margin-left:1rem;}

/* 연령대 */
.select_wrap{width: 25.6rem; display:inline-block;position: relative;z-index: 2;}

.result_btn {display: flex;justify-content:center; align-items:center; width: 100%;height: var(--result-btn-height, 12rem);background: var(--result-btn-bg-color, #333);border-radius: var(--result-btn-border-radius);
    color: var(--result-btn-color, #fff);font-size: var(--result-btn-font-size, 3.4rem);margin: var(--result-btn-margin, 6rem 0);font-weight: bold;text-align:center;}

/******************개인정보처리방침*******************/
.privacy_wrap, .privacy_wrap_single {padding: 2rem 3rem;border: 1px solid var(--input-border-color); border-radius:var(--input-border-radius, 1.2rem);font-weight: 400;font-size: 2.2rem;margin:3.6rem 0 6rem;text-align: left;background: #fff;color: #000;}
.privacy_wrap > div {margin-bottom: 1.5rem;position: relative;}
.privacy_allchk{border-bottom: 1px solid #e2e2e2;padding-bottom:1.2rem;margin-bottom:15px;font-size:3.2rem}
.privacy_wrap input[type='checkbox'],.privacy_wrap_single input[type='checkbox']{width:3.5rem;height:3.5rem;appearance:none;border:2px solid #C6C6C6;position:relative;
    background:transparent;border-radius:5px;vertical-align: middle;cursor:pointer;background:#EEEEEE;}
.privacy_wrap input[type='checkbox']:before,.privacy_wrap_single input[type='checkbox']:before{content:"";width:1.8rem;height:1.4rem;
    position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);background: url(../img/chk_off.png) no-repeat 0 0;background-size: contain;}
.privacy_wrap input[type='checkbox']:checked,.privacy_wrap_single input[type='checkbox']:checked{ background-color:var(--main-color);}
.privacy_wrap input[type='checkbox']:checked:before,.privacy_wrap_single input[type='checkbox']:checked:before{background-image:url(../img/chk_on_w.png);}
.privacy_wrap input[type='checkbox']+label,.privacy_wrap_single input[type='checkbox']+label, 
.privacy_wrap_single input[type='checkbox']+span.label{line-height: 3.1rem;display: inline-block;background-size: 3.1rem;padding:.5rem 0 .5rem .5rem;cursor:pointer;vertical-align: middle;}
.privacy_wrap .label {cursor: pointer;}
.privacy_wrap .privacy_allchk input[type='checkbox'] {width:3.8rem;height:3.8rem;}
.privacy_wrap .privacy_allchk input[type='checkbox']+label {background-size: 3.8rem; height:3.8rem; padding-left:.5rem; cursor: pointer}
.privacy_wrap .privacy_allchk input[type='checkbox']:checked +label {background-size: 3.8rem; height:3.8rem;}
.privacy_wrap a.more_info, .privacy_wrap_single a.more_info  {margin: 0;border: 1px solid #E9E9E9;border-radius: 5rem;padding: .4rem 2rem;box-sizing: border-box;font-size: 2rem;position: absolute;right: 0;top: 0;
    color: #000;text-decoration: none;}
.privacy_content {box-sizing: border-box;padding: 1.6rem 1.6rem 4rem;margin: 1.5rem 0 3rem;height: 25.4rem;background: #FFFFFF;border: 1px solid #E9E9E9;border-radius: .8rem;overflow-y: scroll;font-size: 2rem;clear: both;display: block;color: #666;}
.box_hidden {height: 0;padding: 0;border: 0;margin: 0}
.privacy_wrap_single{position: relative;}
.privacy_wrap_single > div {margin-bottom: 0;}
.privacy_wrap_single input[type='checkbox']+label{background-position: 0 22px;height: auto;padding-left: 2rem !important}
.privacy_wrap_single input[type='checkbox']:checked+label{background-position: 0 2.2rem;}
.privacy_wrap_single a {right: 3rem;top: 4.5rem;}
#privacy_tail_info {font-size: clamp(12px,1.3vw,1.3rem) !important;}
/************************** 입력 폼 END ************************/

/********************** 하단정보 ********************/
.info_text {background: #e9e9e9;padding: 4rem 5rem 3.5rem;box-sizing: border-box;font-style: normal;font-weight: 400;font-size: 2rem;color:#3C4141;line-height: 170%;display: block;letter-spacing: -0.08em;text-align: left;}
.info_text::before {content:"유의사항";font-size: 2.5rem;font-weight: 700;color: #000;clear: both;display: block;line-height: 3.5rem;margin-bottom: 1rem;font-family: "Noto Sans KR";}
.info_text ul li{position: relative;padding-left: 1.5rem;word-break: break-all;font-size:clamp(12px, 2vw, 2rem) !important;}
.info_text ul li:before{content:"*";position:absolute;top:4px; left: 0;}

.landing_foot_lt {width: 100% !important;max-width: 75rem !important;background: #3D3D3D;margin: 3.5rem auto !important;text-align: center;border-radius: 1rem !important;display: block}
.landing_foot_lt>p {padding: 2rem 1rem !important;color: #fff;font-size:clamp(12px, 1.4vw, 1.6rem) !important;line-height: 1.4 !important;letter-spacing: -1px;text-wrap: balance;word-break: keep-all}

/********************** loader ********************/
.loader_wrap{position: absolute; top: 20%; left: 50%; transform: translate(-50%, 0);}
.loader {width: 10rem;aspect-ratio: 1;display:grid;-webkit-mask: conic-gradient(from 15deg,#0000,#000);animation: l26 1s infinite steps(12);}
.loader,
.loader:before,
.loader:after{background:radial-gradient(closest-side at 50% 12.5%,
var(--main-color)96%,#0000) 50% 0/20% 80% repeat-y,radial-gradient(closest-side at 12.5% 50%,
var(--main-color)96%,#0000) 0 50%/80% 20% repeat-x;
}
.loader:before,.loader:after {content: "";grid-area: 1/1;transform: rotate(30deg);}
.loader:after {transform: rotate(60deg);}
@keyframes l26 { 100% {transform:rotate(1turn)}}



/********************** 위치정보 ********************/
.location_button{position: fixed;right: 4rem; bottom: 4rem; width: 15.4rem; height: 23.2rem; z-index: 99;}
.location_desc_text{font-size: 3.4rem; color: #303030; text-align: center; line-height: 1.2;margin-bottom: 4rem;}
/* 모달 컨테이너 */
.overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 9999;display: none; }
#location_popup .modal {position:absolute;top: 43%;left: 50%;transform: translate(-50%, -50%);border-radius: 1.5rem;width: 100%;max-width: 68rem;box-shadow: 0 0 2.4rem rgba(0, 0, 0, 0.48);overflow: hidden;}
#location_popup .location_text{text-align: center; background: #000C26;color: #FFF719; font-family: 'Gmarket Sans';
font-size: 4.5rem; font-weight: 600; letter-spacing: -0.02em;padding: 2rem 0; }
#location_popup .modal_close_button {position: absolute;top: 2rem;right: 2rem;width: 4rem;height: 4rem;border: none;background: none;cursor: pointer;padding: 0;display: flex;align-items: center;justify-content: center;transition: all 0.2s ease;}
#location_popup .modal_close_button::before,
#location_popup .modal_close_button::after {content: '';position: absolute;width: 3.8rem;height: .6rem;background: #333;transition: all 0.2s ease;}
#location_popup .modal_close_button::before {transform: rotate(45deg);}
#location_popup .modal_close_button::after {transform: rotate(-45deg);}

.location_box{width: calc(100% + 10rem);margin:0 -5rem 6rem;}

@media (min-width: 480px) {
    .location_button{ right: 50%; transform: translateX(calc(var(--layout-max-width) / 2 - 4rem));}
}