*{box-sizing:border-box;}
#container{
    background:#F2F2F2;
    box-sizing:border-box;
    line-height:normal;
    
}
section.contents{
    max-width:800px;
    padding:38px 0 80px;
}
section.contents h3{
    height:auto;
    background:none;
    color:#5d5d5d;
    font-size:28px;
    font-weight:700;
    line-height:normal;
    text-align:center;
    margin-bottom:40px;
}
.contents .progress{
    width:100%;
    height:70px;
    background:url('/kor/src/images/step_01.png') no-repeat center/cover;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom:36px;
}




.contents .step{
    padding:72px 140px;
    border-radius:10px;
    background:#fff;
    box-shadow: 0px 3px 9px 0px rgba(109, 109, 109, 0.25);
    display:flex;
    flex-wrap:wrap;
    gap:36px 10px;
}

.contents .step h4{
    width:100%;
    background:none;
    border-bottom:1px solid #c8c8c8;
    padding:0 0 10px 0;
    margin-bottom:0;
    color:#da1f3d;
    font-size:24px;
    font-weight:700;
    line-height:normal;
}

.input_area{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
}

.input_area .label-title{
    width:100%;
    font-size:18px;
    font-weight:700;
    line-height:normal;
    color:#5d5d5d;

    .requried{
        color:#da1f3d;
    }
}

.input_area.age{
    width:200px;
}
.input_area.region{
    width:310px;
}
.input_area input[type="text"],.input_area input[type="password"],.contents select{
    height:52px;
    padding:9px 30px;
    border-radius:5px;
    border:1px solid #e0e0e0;
    background:#fafafa;
    outline:none;

    &::placeholder{
        color:#c7c7c7;
        font-size:18px;
        line-height:normal;
        font-weight:700;
    }
    &:focus{
        box-shadow:none;
        -webkit-box-shadow:none;
    }

}
.input_area .input50{
    width:255px;  
}
.input_area .input100{
    width:100%;  
}
.input_area:has(.custom-radio){
    gap:10px 36px;
}
.input_area p{
    color:#a9a9a9;
    font-size:14px;    
}
.radio_area{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 0;
}
input.custom-radio{
    display:none;
}

input.custom-radio+.btn-radio{
    display:block;
    width:18px;
    height:18px;
    border-radius:50%;
    border:1.5px solid #919191;
    background:#fff;
}
input.custom-radio:checked+.btn-radio{
    border:1px solid #DA1F3D;
    position: relative;
}

input.custom-radio:checked+.btn-radio:before{
    content: "";
    position:absolute;
    width: 6px;
    height: 6px;
    background: #da1f3d;
    border-radius: 50%;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);

}

input.custom-radio~.text{
    font-size: 18px;
    color:#919191;
    font-weight:700;
    line-height:20px;
}

input.custom-radio:checked~.text{
    color:#da1f3d;
}

.input_area .select-box{
    position:relative;    
    width:100%;

}
.input_area .select-box .select-input{
    cursor:pointer;
    height:54px;
    display:flex;
    align-items:center;
    height:52px;
    padding:9px 30px;
    border-radius:5px;
    border:1px solid #e0e0e0;    
    font-size:14px;
    font-weight:700;
    color:#c7c7c7;
    background:url('/kor/src/images/arrow_down.png') no-repeat #fafafa;
    background-size:24px 24px; 
    background-position: right 25px center;

}
.input_area.mobile .select-box .select-input{
    width:158px;
}
.input_area.mobile .select-box {
    width:auto;
}
.input_area.mobile .select-box ul{
    width:158px;
}
.input_area .select-box .select-input.active{
    background:url('/kor/src/images/arrow_up.svg') no-repeat #DA1F3D;
    background-size:24px 24px; 
    background-position: right 25px center;    
    
    color:#fff;
}

.input_area .select-box ul{
    width:100%;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    border-radius: 5px;
    border: 1px solid #E0E0E0;
    box-shadow: 0px 4px 12px 0px rgba(157, 157, 157, 0.25);    
    overflow:hidden;
    z-index:999;
}
.input_area .select-box ul.hide{
    display:none;
}

.input_area .select-box li{
    padding: 16px 0;
    height: 54px;
    font-size:18px;
    color:#b5b5b6;
    font-weight:700;
    line-height:20px;
    cursor:pointer;
    padding:0 10px 0 30px;
    background:#fafafa;
    display:flex;
    align-items:center;
    
}
.input_area .select-box li:hover{
    background:#DA1F3D;
    color:#fff;
}
.mobile input{
    width: calc((100% - 30px) / 4);
}

.input_area button{
    border-radius: 5px;
    background:#5d5d5d;
    width:122px;
    height:52px;
    display:inline-block;
    color:#fff;
    font-size:18px;
    font-weight:700;
}

.input_area button:hover, .input_area button:focus{
    background: #da1f3d;
}
.input_area.email input{
    width: 388px;
}

.radio_area:has(.visit-date){
    width:100%;
}

/* 체크박스 커스텀 */
.checkbox_area{
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkbox_area .custom-check{
    display: none;
}
.checkbox_area .btn-check{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1.5px solid #919191;
    vertical-align: middle;
}
.checkbox_area .custom-check:checked + .btn-check{
    background:url("/kor/src/images/custom_check.svg") no-repeat #da1f3d;
    background-position:center center;
    background-size: 12px 8px;
    border-color:#da1f3d;
}

.checkbox_area .text{
    font-size: 18px;
    line-height: 20px;
    color:#919191;
    font-weight: 700;
}



.checkbox_area .custom-check:checked ~ input[type="text"]{
    border:1px solid #da1f3d;
}
.input_area .etc-text:focus{
    border:1px solid #da1f3d;
}

.checkbox_area input[type="text"]{
    width:312px;
    height: 42px;
}

.input_area.purpose{
    display:flex;
    flex-wrap:wrap;
    gap:10px 36px;
    flex-direction:column;
}
.input_area.interest .select-box{
    width: 100%;
}
.input_area.interest .select-box .select-input{
    background:url('/kor/src/images/arrow_down-small.svg') no-repeat;
    
    background-position: right 25px center;        
    
}

.input_area.interest .select-box .select-input.active{
    background:url('/kor/src/images/arrow_up.svg') no-repeat #DA1F3D;    
    background-position: right 25px center;        
    color:#fff;
}

.interest-etc{width:100%;}

.line{
    width: 100%;
    height: 2px;
    background: #c8c8c8;
    border-top:1px solid #f2f2f2;
}
.btn_area{
    display: flex;
    justify-content: center;
    width: 100%;
    gap:10px;
}

.btn_area button{
    width: 186px;
    height: 62px;
    border-radius: 5px;

    color:#fff;
    font-size:24px;
    font-weight: 700;
    line-height: normal;
}

.btn_area .btn-next{
    background: #da1f3d;
}
.btn_area .btn-previous{
    background: #666;
}

.btn_area .btn-next:hover,.btn_area .btn-next:focus{
    background: #727171;
}
.step.hide{display: none;}

.contents .step h4.agree_all{
    justify-content: center;
    padding-bottom:18px;
}

.contents .policy{
    width:100%;
}
.contents .policy .policy-title{
    display: flex;
    justify-content: space-between;
}

.contents .policy .policy-title span{
    font-size:20px;
    line-height: normal;
    color: #da1f3d;
    font-weight: 700;
}

.contents .policy .policy-title a {
	padding:0 5px;
    height: 32px;
    background: #666;
    border-radius: 5px;
    color: #fff;    
    font-size:12px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contents .policy .policy-title a:hover,.contents .policy .policy-title a:active{
    background: #C8C8C8;
}
.policy-contents{
    padding: 20px 0;
}
.policy-contents .textarea{
    width: 100%;
    height: 150px;
    overflow-y:auto;
    padding:10px 20px;
    resize:none;
    border-radius: 10px;
    background: #fff;
    border:1px solid #e0e0e0;
    box-shadow: none;
}

.input_area.agreeArea:has(.custom-radio){
    gap:0 36px;
}

.agreeArea .label-title{
    color: #666;
    font-family: "Noto Sans KR";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.agreeArea input.custom-radio~.text{
    font-size:16px;
}

.in .checkbox_area{
    width:100%;
    padding:0;

}
.in .notice{
    border-top:1px solid #e0e0e0;
}
.pass-description{
    padding-left: 28px;
    margin-bottom: 10px;
}
.pass-description strong{
/*	color:#000; */
}

.in .notice{
    color:#da1f3d;
    font-size:14px;
    font-weight: 700;
    width: 100%;

}

.info-cont{
    width:100%;
    display: flex;
    flex-direction: column;
    gap: 36px;

}


.info-cont .title{
    color:#2d0007;
    font-size:24px;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid #c8c8c8;
}

.info-cont dt{
    color:#5d5d5d;
    font-size: 18px;
    font-weight: 700;
}

.info-cont dd{
    color:#999;
    font-size:18px;
    font-weight: 700;
    padding:15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.info-cont .notice-title{
    color: #DA1F3D;
    font-size:18px;
    font-weight: 700;
}

.info-cont ul{
    padding:18px 0;
}

.info-cont li{
    color:#A9A9A9;
    font-size:16px;
    font-weight: 400;
}

/* 체크박스 커스텀 */


.in .checkbox_area .btn-check{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border:1.5px solid #919191;
    background: #fff;
}
.in .checkbox_area .custom-check:checked + .btn-check{
    position: relative;
    background: #fff;
}
.in .checkbox_area .custom-check:checked + .btn-check::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background: #da1f3d;
}
.in .checkbox_area .custom-check:checked ~ .text{
    color:#DA1F3D;
}


.checkbox_area .text{
    font-size: 18px;
    line-height: 20px;
    color:#919191;
    font-weight: 700;
}


.modal-bg{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    left:0;
    top:0;
    right:0;
    bottom:0;
    display:flex;
    align-items: center;
    justify-content: center;
    z-index:9999999;
}

.modal-bg.hide{
    display: none;
}
.modal-bg .modal{
    width: 500px;
    
    padding: 36px 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
    display:flex;
    flex-direction: column;
    gap: 36px;
    align-items: center;
}
.modal>p{
    color: #DA1F3D;
    font-family: "Noto Sans KR";
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    }
.modal .line{
    width: 100%;
    height: 1px;
    background: #da1f3d;
    border-top: none;
}

.modal .modal-content{
    display: flex;
    flex-direction: column;
    gap: 18px;
    p{
        color:#666;
        font-size: 18px;
        line-height: normal;
        text-align: center;
    }

    .email-info{
        font-size: 14px;
    }

    .highlight{
        color:#da1f3d;
    }

    p.red{
        color: #DA1F3D;
        font-size: 14px;
        font-weight: 700;
    }
}

.modal .btn-confirm{
    width: 186px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #da1f3d;
    color:#fff;
    font-size:24px;
    font-weight: 700;

}



.contents .progress.buyer{
    background:url('/kor/src/images/buyer_step_01.png') no-repeat center;
    background-repeat: no-repeat;
    background-size: cover;

}

.contents .step .buyer-account-info{
    padding-bottom: 10px;
    border-bottom: 1px solid #c8c8c8;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contents .step .buyer-account-info h4{
    padding: 0;
    border-bottom:none;
}

.buyer-account-info p{
    color:#919191;
    font-size:14px;
    font-weight: 700;
}

.buyer-account-info .notice{
    color: #DA1F3D;
    font-weight: 400;
}

.step .input_area.id input{
    width: 388px;
}

.input_area.pw{width: 255px;}

.input_area.phase-idea{
    gap:0;
}

.input_area.phase-idea label{
    width: 100%;
}

.input_area.region-select .select-box{
    width: 100%;
}

.input_area.investment-amount{
    width: 310px;
}
.input_area.prepare-period{
    width: 200px;
}
.input_area.concept textarea{
    resize: none;
    width: 100%;
    padding:9px 30px;
    height: 146px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
}

.input_area.concept textarea:focus{
    box-shadow: none;
}

.mochaPort{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:36px;
    
}
.mochaPort img{
    width: 100%; max-width: 200px;
}
.mochaPort .mocha-desc{
    display: flex;
    flex-direction: column; gap: 10px;
}

.mochaPort .mocha-desc p{
    font-size:18px;
    line-height: normal;
    color: #888;
}

.mochaPort .mocha-desc .blue{
    font-size: 16px;
    color:#118CD0;
}

.buyer_progress{
    width: 100%;
    height: 40px;
    background: #f2f2f2;
    text-align: center;
    color:#da1f3d;
    font-size: 18px;
    font-weight: 700;
    line-height: 38px;
}

.buyer_progress-box{

    padding:20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid #E0E0E0;    
}

.buyer_progress-box li{
    font-size: 16px;
    color: #666;
}

.input_area .file_view{
    width: 388px;
    height: 52px;
    padding: 9px 30px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background: #fafafa;    
    display: flex;
    align-items: center;
}

.input_area .notice span{color: #DA1F3D;}

.input_area.authority{gap:10px 25px;}

.input_area.sector{gap:36px;}

.input_area.sector .etc-text{width: 260px;}
.sector .notice{width: 100%;color: #DA1F3D;}
.notice.red{color:#DA1F3D}

.input_area.situation{
    gap:36px;
}

.policy-contents{
    padding:10px 20px;
    border-radius: 10px;
    border: 1px solid #E0E0E0;
    background: #FFF;    
    margin:20px 0;
    height: 150px;
    overflow-y:auto ;
}


/* 반응형 */
@media (max-width:480px){
    section.contents{
        padding: 24px 0 48px 0;
    }
    section.contents h3{
        margin-bottom: 20px;
    }
    .contents .progress{
        margin-bottom: 18px;
        background-size:contain;
    }
    .contents .progress.buyer{
        background-size:contain;
    }
    .contents .step {
        padding: 40px 20px;
        gap:18px 5px;
    }    
    .contents .step h4{
        font-size: 20px;
    }    
    .input_area .label-title{
        font-size: 16px;
    }
    .step .input_area.id input{
        width: 100%;
        height: 36px;
        padding:6px 10px;
    }
    .input_area button{
        width: 100%;
        height: 36px;
        font-size:14px;
        font-weight: 400;
    }
    .input_area.pw{
        width: 100%;
    }
    .input_area .input50{
        width: 100%;
        height: 36px;
    }
    .input_area input[type="text"]{
        width: 100%;
        height: 36px;
    }

    .input_area.mobile .select-box .select-input{
        width: 100%;
        height: 36px;
    }
    .input_area.mobile .select-box{
        width: 100%;
    }
    #mobile-num{
        width: 100%;
    }
    .input_area.mobile .select-box ul{
        width: 100%;
    }
    .input_area .select-box li{
        height: 36px;
        font-size:14px;
    }
    .input_area.age{
        width: 100%;
    }
    .input_area .select-box .select-input{
        height: 36px;
    }

    input.custom-radio~.text{
        font-size: 14px;
    }
    .input_area:has(.custom-radio){
        flex-direction: column;
    }
    .radio_area{
        padding:0;
    }
    .input_area .file_view{
        width: 100%;
        height: 36px;
    }

    .input_area.sector{
        flex-direction: column;
        gap:10px;
    }
    .checkbox_area{
        flex-wrap: wrap;
    }
    .checkbox_area .text{
        font-size:14px;
    }


    .input_area.sector .etc-text{
        width: 100%;

    }
    .input_area{flex-direction: column;gap:10px;}
    .input_area.situation{
        gap:10px;
    }

    /* 버튼 */
    .btn_area{
        flex-direction: column;
    }
    .btn_area button{
        width: 100%;
        height: 36px;
        font-size:16px;
        font-weight: 400;
    }    
    .info-cont.active{
        height: 452px;
    }
    .input_area.phase-idea label{
        width: 100%;
    }
    .input_area.phase-idea{
        gap: 10px;
    }
    .input_area.region-select .select-box{
        width: 100%;
    }
    .input_area.prepare-period{
        width: 100%;
    }
    .input_area.interest .select-box{
        width: 100%;
    }
    .mochaPort .mocha-desc p{
        font-size:14px;
        font-weight: 400;
    }
    .input_area .select-box .select-input{
        font-size:14px;
        font-weight: 400;
    }
    .input_area input[type="text"]{
        &::placeholder{
            font-size:14px;
            font-weight:400;
        }

    }    
    .contents .policy .policy-title span{
        font-size:14px;
    }
    .policy-contents{
        padding:5px 10px;
    }
    .service_terms p.agre_tit{
        margin-top: 10px;
    }
    .info-cont{
        gap: 18px;
    }
    .info-cont .title{
        font-size:20px;

    }
    .info-cont dt,.info-cont dd{
        font-size:16px;
    }
    .info-cont dd{
        padding: 8px 0;
    }
    .info-cont .notice-title{
        font-size:16px;
        font-weight: 400;
    }
    .info-cont li{
        font-size:14px;
    }
    .modal-bg{
        height: auto;
        
    }
    .modal>p{
        font-size: 16px;
    }
    .modal-bg .modal{
        width: 100%;
        padding:0;
        gap:18px;
        height: 100%;
        border-radius: 0;
        justify-content: center;
    }
    .modal .btn-confirm{
        width: 100%;
        height: 36px;
        font-size: 16px;
        font-weight: 400;
    }
    .modal .modal-content{
        padding:0 10px;
        p{
            font-size: 16px;
        }
    }
    .buyer_progress{
        height: 28px;
        font-size:16px;
        line-height: 26px;
    }
    .buyer_progress-box{
        margin: 0 10px;
    }
    .buyer_progress-box li{font-size: 14px;}


}

.input_area.age{
	width:100%;
}