@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/* ------ common ------ */
ul,ol,li {list-style: none;}
select,a {color: #000;text-decoration: none;outline: none;/* 기본 포커스 테두리 제거 */-webkit-tap-highlight-color: transparent; /* 모바일 터치 시 파란 하이라이트 제거 */}
a:focus,a:active {outline: none;box-shadow: none;}
a[href^=tel] {text-decoration: inherit;color: inherit;}
img{width: 100%;}
.hidden {display: none;}
* {margin: 0;padding: 0;list-style: none;border: 0;box-sizing: border-box;letter-spacing: -0.02em;}
html, body {font-family: "Pretendard", "Noto Sans KR", sans-serif; accent-color: var(--main-color);}
:root{
    --main-color: #48C777;
}


/* ------ layout ------ */

#landing_container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto; 
    box-sizing: border-box;
    background-color: #fff;
}
#gnb_wrap {
    max-width: 800px !important;
}
.user_info_wrap{
    background-color: #F5F5F5;
    padding: 100px 60px;
}
.question {
    margin-bottom: 55px;
}
.question_title{
    font-size:35px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.04em;
}
.question_option_wrap{
    display: inline-flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 28px;
}
.question_option_wrap label{
    font-size: 32px;
    cursor: pointer;
}
.notice{
    font-size: 28px;
    margin-top: 28px;
}
.input_wrap label{
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 18px;
    display: block;
}
.btn_submit{
    width: 100%;
    height: 133px;
    background-color:#051A0D;
    border-radius: 20px;
    color: #DBFF78;
    font-size: 50px;
    font-weight: 700;
    line-height: 133px;
    text-align: center;
}

.btn_fixed{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left:50%;
    bottom: 15px;
    transform: translateX(-50%); 
    width: 95%;
    max-width: 750px;
    background:#051A0D;
    color: #DBFF78;
    font-size: 58px;
    font-weight: bold;
    border-radius: 20px;
    transition: all 0.3s ease;
    opacity: 0;
    visibility:hidden;
    height:0;
}

.btn_fixed.visible{
    opacity: 1;
    visibility:visible;
    height: 140px;
}
.btn_submit:before, .btn_submit:after,.btn_fixed:before, .btn_fixed:after{
    content:'';
    display: inline-block;
    width: 44px;
    height: 33px;
    margin: 0 12px;
    background: url(./images/icon_arrow.png) no-repeat center;
}
.bounce01 {
    animation: bounce01 1.2s infinite ease-in-out;
}
@keyframes bounce01 {
    0% {
        transform: translate(-50%, 0); 
    }
    50% {
        transform: translate(-50%, -5px);
    }
    100% {
        transform: translate(-50%, 0);
    }
}
.bounce02 {
    animation: bounce02 1.2s infinite ease-in-out;
}
@keyframes bounce02 {
    0% {
        transform: translateY(0); 
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}
/* ------ input ------ */
input[type='text'], input[type='number']{
    margin-bottom: 28px;
}
input[type='text']:focus, input[type='number']:focus {
    border: 2px solid var(--main-color) !important;
    outline: transparent;
}
.question input[type="radio"],
.question input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 44px;
    height: 44px;
    border: 2px solid #888;
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    margin-right:  12px;
}

/* 체크 상태 */
.question input[type="radio"]:checked,
input[type="checkbox"]:checked {
    background-color: var(--main-color) !important;
    border-color:var(--main-color);
}

.question input[type="radio"]:checked::after,
.question input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left:12px;
    top:2px;
    width: 13px;
    height: 24px;
    border-right: 4px solid white;
    border-bottom: 4px solid white;
    transform: rotate(45deg);
}
/* ------ landing_foot_lt 커스텀 ------ */

.landing_foot_lt {
    max-width: 800px !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

.top_count{width: 100%;height: 60px; display: flex; justify-content: center; align-items: center; background: #f6f6f6;}
.top_count p{font-size:20px; font-weight:500;text-align: center;color: #333;}
.top_count p span{color: #ff0000;}