@charset "utf-8";

/*팝업 공통*/
.modal_dimmed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 40;
    display: none;
}

.modal_inner {
    background-color: #fff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    max-height: 70%;
    overflow-y: scroll;
    position: fixed;
    width: calc(100% - 40px);
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: none;
    text-align: center;
}

.modal_wrap .modal_inner .modal_text {
    width: 100%;
    padding: 35px 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: #4d4d4d;
}

.modal_wrap .modal_inner .modal_text .bold_txt {
    font-size: 18px;
    color: #6230CF;
    font-weight: 500;
}

.modal_wrap .modal_inner .modal_text .sub_txt, .modal_wrap .modal_inner .modal_text .sub_txtbox {
    padding-top: 20px;
}

.modal_wrap .modal_inner .modal_text .color {
    color: #6230CF;
}

.modal_wrap .modal_inner .modal_text .strong_txt {
    font-size: 15px;
    font-weight: 500;
}

.modal_wrap .modal_inner .modal_button button, .modal_wrap .modal_inner .modal_button a {
    font-size: 18px;
}

.modal_wrap .modal_inner .modal_button button {
    width: 100%;
    line-height: 45px;
    height: 45px;
    box-sizing: border-box;
    border: none;
}

.modal_wrap .modal_inner .modal_button a {
    display: block;
    width: 100% px;
    margin: 0 auto;
    text-align: center;
    line-height: 45px;
    height: 45px;
    box-sizing: border-box;
}

.modal_wrap .modal_inner .modal_button .btn_confirm {
    background-color: #8264E8;
    color: #fff;
}

/*취소불가안내 팝업 - 카카오톡/전화 버튼 세로배치*/
.modal_wrap .modal_inner.cancelblock .cancelblock_actions {
    padding: 0 20px;
}

.modal_wrap .modal_inner.cancelblock .cancelblock_actions .cb_btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.modal_wrap .modal_inner.cancelblock .cancelblock_actions .cb_btn_primary {
    background-color: #8264E8;
    color: #fff;
}

.modal_wrap .modal_inner.cancelblock .cancelblock_actions .cb_btn_outline {
    margin-top: 8px;
    background-color: transparent;
    border: 1px solid #8264E8;
    color: #8264E8;
}

.modal_wrap .modal_inner.cancelblock .cancelblock_actions .cb_hours {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.modal_inner.cancelblock {
    padding-bottom: 20px;
}

.modal_inner.cancelblock .cb_x_close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}


/*가로 640이상 태블릿 환경*/
@media screen and (min-width: 640px) {
    .modal_wrap .modal_inner {
        width: 400px;
    }
}


/*cleaner_main.html*/
/*메인 사이드메뉴*/
.sidemenu {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    transition: .5s ease;
    z-index: 50;
}

.sidemenu .sidemenu_top {
    padding: 57px 20px 20px;
}

.sidemenu .sidemenu_top .btn_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 16px;
    height: 16px;
    border: none;
    background: url(../images-v4/btn_close.png) no-repeat center/ 16px auto;
}

.sidemenu .sidemenu_top .logo img {
    height: 27px;
}

.sidemenu .gnb ul {
    border-top: 1px solid #e6e6e6;
}

.sidemenu .gnb ul li a {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 15px;
    color: #4d4d4d;
}

.sidemenu .gnb ul li.category a {
    padding: 19px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #6230cf;
    background: url(../images-v4/sidemenu_arrow.png) no-repeat right 20px center/10px auto;
}


/*cleaner_landing.html*/
/*클린벨 파트너 가입신청서*/
.modal-partner {
    position: fixed;
    background-color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: scroll;
    padding: 11px 20px 0;
    top: 0;
    left: 0;
    z-index: 50;
    display: none;
}

.modal-partner .popup_header {
    padding: 11px 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.modal-partner .popup_header h3 {
    font-size: 25px;
    color: #808080;
    float: left;
    width: 85%;
}

.modal-partner .popup_header h3 span {
    color: #6131CE;
}

.modal-partner .popup_header .btn_close {
    color: transparent;
    border: none;
    width: 37px;
    height: 37px;
    background: url(../images-v4/btn_close.png) no-repeat right center/16px auto;
    float: right;
}

.modal-partner .input_list > ul > li {
    padding-bottom: 30px;
}

.modal-partner .input_list > ul > li label, .modal-partner .input_list h4 {
    font-size: 16px;
    color: #666;
    font-weight: 500;
    display: block;
    text-align: left;
}

.modal-partner .input_list > ul > li input {
    height: 40px;
    line-height: 40px;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    color: #555;
}

.modal-partner .input_list > ul > li select {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #d9d9d9;
    background: url(../images-v4/partner_select_arrow.png) no-repeat right 10px center;
    color: #D9D9D9;
}

.modal-partner .input_list > ul > li .sigungu {
    margin-top: 10px;
}

.modal-partner .input_list > ul > li .workyear {
    margin-top: 30px;
}

/*개인정보취급방침*/
.modal-partner .partner_privacy {
    overflow: hidden;
}

.modal-partner .partner_privacy label {
    font-size: 15px;
    color: #999;
    float: left;
    display: inline;
    width: calc(100% - 35px);
    text-align: left;
}

/*체크박스*/
.modal-partner .partner_privacy input[type="checkbox"] {
    float: right;
    position: relative;
    appearance: none;
}

.modal-partner .partner_privacy input[type="checkbox"]::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #ededed;
    border-radius: 3px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
}

.modal-partner .partner_privacy input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: url(../images-v4/checkbox_uncheck.png) no-repeat center center/12px auto;
}

.modal-partner .partner_privacy input[type="checkbox"]:checked::before {
    background-color: #AE96FF;
    border: none;
}

.modal-partner .partner_privacy input[type="checkbox"]:checked::after {
    background: url(../images-v4/checkbox_bg.png) no-repeat center center/12px auto;
}

/*제출하기 버튼*/
.modal-partner .btn_submit button {
    width: 100%;
    height: 45px;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    border: none;
    background-color: #8264E8;
    border-radius: 4px;
    margin: 30px 0 50px;
}

/* 파트너 가입신청서 - 760이상 태블릿 환경*/
@media screen and (min-width: 760px) {
    .modal-partner .input_list > ul > li > ul > li {
        display: inline-block;
        width: calc(50% - 10px);
        margin-right: 10px;
    }

    .modal-partner .input_list > ul > li > ul > li:nth-child(2) {
        margin-right: 0;
    }

    .modal-partner .input_list > ul > li .sigungu {
        margin-top: 0;
    }

    .modal-partner .input_list > ul > li .workyear {
        margin-top: 0px;
    }

    .modal-partner .input_list .available ul li, .modal-partner .input_list .partner_product ul li {
        width: calc(33.3% - 10px);
        margin-left: 10px;
    }

    .modal-partner .input_list .available ul li:first-child, .modal-partner .input_list .partner_product ul li:first-child {
        margin-left: 0;
    }

}


/*mypage.html*/
/*mydetails_modal*/
/*신청내역 자세히 사이드슬라이드모달*/
.mydetails_modal {
    position: fixed;
    top: 0;
    right: -270px;
    width: 270px;
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    transition: .5s ease;
    z-index: 50;
}

.mydetails_modal .details .details_head {
    padding: 14px 20px;
    border-bottom: 1px solid #e6e6e6;
}

.mydetails_modal .details .details_head h3 {
    font-size: 18px;
    font-weight: 400;
    color: #666;
}

.mydetails_modal .details .details_head h3 span {
    font-weight: 700;
}

.mydetails_modal .details .details_head .btn_close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: url(../images-v4/btn_close.png) no-repeat center / 16px auto;
    display: inline-block;
}

.mydetails_modal .details .list_wrap {
    padding: 10px 20px 0px 20px;
}

.mydetails_modal .details .list_wrap ul li {
    padding: 10px 0;
    border-bottom: 1px solid #e6e6e6;
}

.mydetails_modal .details .list_wrap ul li dl dt {
    font-size: 13px;
    color: #808080;
    padding-bottom: 3px;
    font-weight: 300;
}

.mydetails_modal .details .list_wrap ul li dl dd {
    font-size: 15px;
    color: #666;
    font-weight: 500;
}

/*applyDetail.html*/
/* 피해사례 안내 */
.modal_text .sub_txtbox .damagecase {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    padding: 12px 0;
    margin: 20px 0;
}

.modal_text .sub_txtbox .damagecase .color {
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 6px;
}

/*예아니오 버튼 공통*/
.modal_button2col {
    font-size: 0px;
}

.modal_button2col button {
    width: 50%;
    font-size: 18px;
    height: 45px;
    border: none;
    vertical-align: bottom;
}

.modal_button2col a {
    display: inline-block;
    width: 50%;
    font-size: 18px;
    height: 45px;
    padding: 9px 0;
    box-sizing: border-box;
}

.modal_button2col form {
    display: inline-block;
    width: 50%;
}

.modal_button2col button.modal_close {
    color: #999;
}

.modal_button2col a.reserve_go {
    color: #fff;
    background-color: #8264E8;
}

.modal_button2col form button.reserve_go {
    width: 100%;
    color: #fff;
    background-color: #8264E8;
}

/*예약취소 확인완료 팝업*/
.modal_wrap .resCancel .modal_button2col button.cancel_go {
    color: #fff;
    background-color: #8264E8;
}

/*url복사안내팝업*/
.modal_urlcopy {
    background-color: #fff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    overflow-y: scroll;
    position: fixed;
    width: calc(100% - 40px);
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: none;
    text-align: center;
}

.modal_urlcopy .inner {
    padding: 50px 0;
    font-size: 16px;
    color: #4d4d4d;
}

.modal_urlcopy .popup_bottom button {
    width: 100%;
    padding: 9px 0;
    border: none;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background-color: #8264E8;
}

/* 예약요청완료 안내팝업 */
.reserveComplete .modal_text .waitingTime {
    font-size: 13px;
    margin: 10px 0;
}

.reserveComplete .modal_text .waitingTime > span {
    font-weight: 500;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress {
    overflow: hidden;
    width: 100%;
    max-width: 294px;
    margin: 0 auto 30px;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress li {
    position: relative;
    width: 33.3%;
    text-align: cetner;
    float: left;
    padding-top: 35px;
    font-size: 12px;
    color: #6230cf;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress li.prevstep {
    background: url(../images-v4/prevstep.png) no-repeat center 3px / 24px auto;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress li.nowstep {
    background: url(../images-v4/nowstep.png) no-repeat center top / 30px auto;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress li.nextstep {
    color: #B3B3B3;
    background: url(../images-v4/nextstep.png) no-repeat center 3px / 24px auto;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress li:first-child::after {
    content: none;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress li::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    left: -50%;
    height: 2px;
    width: 100%;
    background-color: #8264E8;
    z-index: -1;
}

.reserveComplete .modal_text .sub_txtbox .reserveProgress li.nowstep + li::after {
    background-color: #e6e6e6;
}

.reserveComplete .modal_text .sub_txtbox .reservePrecautions {
    border-top: 1px solid #e6e6e6;
    padding-top: 15px;
    margin-top: 20px;
}

.reserveComplete .modal_text .sub_txtbox .reservePrecautions li {
    display: flex;
    margin-top: 5px;
    font-size: 12px;
    text-align: left;
}

.reserveComplete .modal_text .sub_txtbox .reservePrecautions li span {
    margin-right: 5px;
}

/* price.html */
/* 시세알아보기 검색필터 모달 */
.modalBtmfix {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 50;
    padding: 30px 20px calc(constant(safe-area-inset-bottom) + 20px);
    padding: 30px 20px calc(env(safe-area-inset-bottom) + 20px);
    box-sizing: border-box;
    background-color: #fff;
    display: none;
}

.modalBtmfix h5 {
    font-size: 18px;
    font-weight: 500;
    color: #4d4d4d;
    padding-bottom: 30px;
}

.modalBtmfix ul li {
    position: relative;
}

.modalBtmfix ul li input {
    position: absolute;
}

.modalBtmfix .bottombtn button {
    width: 100%;
    padding: 9px 0;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    background-color: #8264E8;
    border: none;
    border-radius: 4px;
    margin-top: 30px;
}

.selectMonth .monthList li {
    border-bottom: 1px solid #E6E6E6;
}

.selectMonth .monthList li:first-child {
    border-top: 1px solid #E6E6E6;

}

.selectMonth .monthList li input + label {
    display: block;
    padding: 13px 0 13px 10px;
    font-size: 16px;
    color: #808080;
    font-weight: 400;
}

.selectMonth .monthList li input:checked + label {
    background: url(../images-v4/listcheck.png) no-repeat right 15px center / 12px auto #F5F2FF;
    color: #6230CF;
    font-weight: 500;
}

/* .selectMonth .monthList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 8px;
    column-gap: 8px;

}
.selectMonth .monthList li input+label{
    display: inline-block;
    width: 100%;
    border: 1px solid #ededed;
    border-radius: 3px;
    padding: 13px 0;
    text-align: center;
    font-size: 16px;
    color: #808080;
    font-weight: 400;
}
.selectMonth .monthList li input:checked+label{
    border-color: #8264E8;
    background-color: #F5F2FF;
    color: #6230CF;
    font-weight: 500;
}
.selectMonth .monthList li input:disabled+label{
    background-color: #EDEDED;
    color: #CCCCCC;
} */