@charset "utf-8";

/* Reset */
* {margin: 0;padding: 0;box-sizing: border-box;}
html, body {height: 100%;}
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}
button, input, textarea {font: inherit;border: none;background: none;}
table {border-collapse: collapse;border-spacing: 0;}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: 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);}
.hidden{display: none;}
@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;max-width: var(--layout-max-width);position: fixed;z-index: 9999;margin: 0 auto;
    display: block;left: 50%;transform: translateX(-50%);  display: flex;justify-content: space-between;align-items: center;}
#gnb_wrap .clear{display: none;}
#gnb_wrap .gnb_logo {margin: 1rem 0;}
#gnb_wrap .gnb_logo_bu {margin: .4rem 0;}
#gnb_wrap .gnb_menu {margin: .5rem 0;}
#gnb_wrap .gnb_menu div {display: block;}
#gnb_wrap .gnb_menu div .top_tell {margin-left: 2.1rem;}
#gnb_wrap .gnb_menu_seo {margin: 1.4rem 0;}
#gnb_wrap .gnb_menu_seo div {display: flex;align-items: center;align-content: center;}
#gnb_wrap .gnb_menu_seo div .top_tell {margin-left: 2.1rem;}
#top_null {height: 11rem;}
#gnb_wrap .gnb_ka_reservation {display: flex; gap: 1rem;justify-content: space-between; align-items: center; position: relative;}
#gnb_wrap .logo_height {width:auto;height:7rem;}
#gnb_wrap .map_height {width:auto;height:5.6rem;}
#gnb_wrap .contact_height {width:auto;height:6.5rem;}

/************************** 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}
.progress-container{position: relative;margin: 3.5rem 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: 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: 10rem 4rem;border-top-left-radius: 5rem;border-top-right-radius: 5rem;}
.form_wrap{padding:0 5% 10rem;}
.notice {color:red;font-size: clamp(14px,1.6rem,16px); text-align: center;margin-bottom: 2rem;}

.request{background: #E2F2FF;}



/************************** 입력 폼 ************************/
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;
}
input[type='text']:focus, input[type='number']:focus {
    border: .2rem 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 {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 #E9E9E9; 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;}
/************************** 입력 폼 END ************************/

/********************** 하단정보 ********************/
.common_info_text {background: #e9e9e9;padding: 4rem 4rem 3.5rem;font-style: normal;font-weight: 400;font-size: 2rem;color:#3C4141;line-height: 1.7;display: block;letter-spacing: -0.08em;text-align: left;}
.common_info_text::before {font-size: 2.5rem;font-weight: 700;color: #000;clear: both;display: block;line-height: 2.5rem;margin-bottom: 1rem;font-family: "Noto Sans KR";}
.common_info_text .bottom_info li {position: relative;padding-left: 1.5rem;word-break: keep-all;}
.common_info_text .bottom_info li:before {content: "*";position: absolute;top: .4rem;left: 0;}


.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: -1.5px;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: 15px;word-break: break-all;font-size: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}
.common_info_text .landing_foot_lt {width: 100% !important;}
/********************** 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)}}