@charset "utf-8";

@import url("../../fonts/Pretendard/Pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Noto+Color+Emoji&display=swap');

:root{
    --layout-max-width: 800px;

    --main-color: #db856f;
    --accent-color: var(--main-color);
    --point-color: #d2963f;
    --font-color: #161616;

    /* input */
    --input-height: 9rem;
    --input-font-size: 3.2rem;
    --input-border-radius: 0.8rem;
    --input-border-color: #d8dade;
    --input-bg-color: #eff1f6;
    --input-color: #333;
    --focus-border-color: var(--main-color);

    /* result button */
    --result-btn-height: 18.7rem;
    --result-btn-font-size: 5.5rem;
    --result-btn-border-radius: 0;
    --result-btn-color: #fff;
    --result-btn-bg-color:#000;
}
html, body {font-size: 30%;min-width: 375px; accent-color: var(--main-color);}
@media (min-width: 480px) {
    html,  body {
        font-size: 40%;
    }  
}
@media (min-width: 750px) {
    html,  body {
        font-size: 62.5%;
    }
}
body {letter-spacing: -0.2rem; font-family: 'Noto Sans KR';  color: var(--font-color); }
.p_color{color: var(--point-color);}
.mark{background: rgba(246,219,173, .37)}

/* layout */
.landing_container {width: 100%;}
.container_wrap {width: 100%;margin: auto;font-size: 1rem;}
.container {position: relative}
.content {position: relative}

.iframe-item {position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); width: 85%; aspect-ratio: 16 / 9; border: 1rem solid #33bcc3; border-radius: 0.8rem; display: block; animation: blink-border 1s step-end infinite; -webkit-animation: blink-border 1s step-end infinite;}
/* 깜빡이는 애니메이션 - border */
@keyframes blink-border {
    50% { border-color: #cef2f3; }
}


/* 설문 */
.question_wrap {display: grid; gap: 3em; padding: 8.3rem 6.8rem; background: linear-gradient(to bottom, #fff, #c7e7ed);}
.question_wrap input[type="radio"], .question_wrap input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: none; cursor: pointer;}
.question_wrap input[type="radio"]::before, .question_wrap input[type="checkbox"]::before {content: '✓'; color: #fff; font-family: 'Pretendard'; font-size: 1.8rem; width: 2rem; height: 2rem; border-radius: .4rem; vertical-align: middle; background: #cfd5e2; display: flex; justify-content: center;align-items: center; box-sizing: border-box; transition: all .2s ease;cursor:pointer;}
.question_wrap input[type="radio"]:checked::before, .question_wrap input[type="checkbox"]:checked::before {background: var(--main-color); color: #fff;}
.question_wrap .title {margin: 0 auto; padding: 0 2rem; width: 100%; height: auto;}
.question_wrap .title img {width: 100%;}
.question_wrap .select_item {height: 17.9rem; border: 0.3rem solid #1c4956; border-radius: 0.9rem; background-color: #fff;}
.question_wrap .select_item .select_label {padding-left: 2.2rem; padding-right: 3.8rem; height: 100%; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.question_wrap .select_item .select_label .select_left {display: flex; align-items: flex-start; gap: 2rem;}
.question_wrap .select_item .select_label .select_left .select_text_wrap {display: grid; gap: 0;}
.question_wrap .select_item .select_label .select_left .select_text_wrap .select_badge .marking {display: inline; padding: 0 0.7rem; line-height: 1; font-size: 2.64rem; font-weight: 500; color: #fff; background-color: #ff5f7a;}
.question_wrap .select_item .select_label .select_left .select_text_wrap .select_name {font-size: 3.75rem; font-weight: 700; color: #303130;}
.question_wrap .select_item .select_label .select_right {font-size: 4.56rem; font-weight: 800; color: #3ecbbb; animation: blink-text 1s step-end infinite; -webkit-animation: blink-text 1s step-end infinite;}
/* 깜빡이는 애니메이션 - color */
@keyframes blink-text {
    50% { color: #ff6c61; }
}

.register_wrap {padding: 8rem 9% 5rem; background-color: #eff1f6;}
.register_wrap .title {font-size: 7rem;margin-bottom: 2.5rem;letter-spacing: -0.04em;text-align: center;text-underline-position: from-font;text-decoration-skip-ink: none;}
.result_btn {margin: 0; animation: blink-btn 1s step-end infinite; -webkit-animation: blink-btn 1s step-end infinite;}
/* 깜빡이는 애니메이션 - bgc */
@keyframes blink-btn {
    50% { background-color: #184250; }
}
.input_wrap ul {display: grid; gap: 3.5rem;}
.input_wrap li {display: grid; gap: 2rem;}
.input_wrap label {position: relative; display: block; font-size: 3.5rem; font-weight: bold; color: #161616;box-sizing: border-box;}
.input_wrap label[for="user-tel"] {display: flex; align-items: flex-end; justify-content: space-between;}
.input_wrap label[for="user-tel"]::after {content: '*상담 외 어떠한목적으로도 사용하지 않습니다 '; font-size: 2.1rem; font-weight: 600; color: var(--main-color);}
.input_wrap input {font-size: 3.2rem; border-width: 0.3rem;}
.input_wrap input::placeholder {font-size: 3.2rem; color: #b4b6ba;}

/* 개인정보, 마케팅 커스텀 */
.privacy_wrap, .privacy_wrap_single {margin-bottom: 4.5rem; border: 0.3rem solid #d8dade; background-color: #eff1f6;}
.privacy_wrap a.more_info, .privacy_wrap_single a.more_info {border-color: #161616;}
.privacy_wrap .privacy_allchk input[type='checkbox']+label {color: #161616;}
.privacy_wrap input[type='checkbox']+label, .privacy_wrap_single input[type='checkbox']+label, .privacy_wrap_single input[type='checkbox']+span.label {color: var(--main-color);}

.form-msg {text-align: center; font-size: 2.3rem; font-weight: 700; color: var(--main-color);}