@charset "utf-8";

.modal_area .cont{position:relative;width:1000px;padding:40px 30px;border-radius:15px;background:#fff}
.modal_area .close{position:absolute;top:0;right:-43px;padding:5px 7px;border:none;border-radius:3px;background:#111}
.modal_area .close svg{color:#fff}

#modal_pick .cont{width:650px}
#modal_pick ul{display:flex;margin-top:40px;justify-content:center;gap:20px;flex-wrap:wrap}
#modal_pick ul li{flex:1 1 0}
#modal_pick ul li button{display:block;width:100%;padding:25px 10px;background:#fff;border:1px solid #e1e1e1;border-radius:20px;box-shadow:2px 2px 9px rgba(0,0,0,0.1)}

#modal_pick ul li button:hover{border-color:#0c78e8;background:#e4f2ff}
#modal_pick ul li img{width:120px}
#modal_pick ul li .name{margin:7px 0;font-weight:700;font-size:20px;color:#111}

.modal_area .back{position:absolute;top:20px;left:20px;border:none;background:none}
.modal_area .step .next_btn{margin-top:20px;text-align:right}
.modal_area .step .next_btn button{padding:12px 65px;border:none;border-radius:5px;background:var(--primary);font-size:15px;color:#fff}
.modal_area .step .next_btn .not_option{padding:12px 20px;border: 1px solid var(--primary);background: #fff;font-weight:700;color:var(--primary)}
.modal_area .step{display:none}
.modal_area .tit{font-weight:700;font-size:24px;color:#111;text-align:center}
.modal_area .step .label_ul{display:flex;gap:20px;flex-wrap:wrap;margin-top:50px}
.modal_area .step .label_ul li{flex:1 1 40%}
.modal_area .step input[type="radio"]{display:none}
.modal_area .step .label_ul li .label{display:block;position:relative;width:100%;padding:20px 20px 20px 50px;border:1px solid #e1e1e1;border-radius:10px;font-size:18px;color:#111;cursor:pointer}
.modal_area .step .label_ul li input:checked + .label{border-color:var(--primary)}
.modal_area .step .label_ul li .label:before{position:absolute;top:25px;left:20px;width:20px;height:20px;border-radius:100%;border:1px solid var(--primary);content:""}
.modal_area .step .label_ul li input:checked + .label:after{position:absolute;top:29px;left:24px;width:12px;height:12px;border-radius:100%;background:var(--primary);content:""}
.modal_area .step .label_ul li .label .label_txt{margin-top:-5px;font-size:14px;color:var(--primary)}
.modal_area .step .label_ul li .label .label_txt span{color:#f00}
.modal_area .step .cal_area{position:relative;margin-top:30px;}
.modal_area .step .cal_area .date_btn{position:absolute;top:0;border:none;background:none}
.modal_area .step .cal_area .prev{left:0}
.modal_area .step .cal_area .next{right:0}
.modal_area .step .cal_area .date_btn svg{color:#bbb}
.modal_area .step .cal_area_mo{display:none}
.modal_area .step .cal_area_pc>div{display:flex;gap:20px;flex-wrap:wrap}
.modal_area .step .cal_area_pc .cal{flex:1 1 0}
.modal_area .step .cal .date{font-weight:700;font-size:16px;color:#333;text-align:center}
.modal_area .step .cal table{width:100%}
.modal_area .step .cal table th{width:14.28%;color:#333}
.modal_area .step .cal table td{text-align:center;color:#dedede}
.modal_area .step .cal table td button{display:block;width:25px;height:25px;margin:0 auto;border:none;background:none;color:#333}
.modal_area .step .cal table td button.blue{color:#00f}
.modal_area .step .cal table td button.red{color:#f00}
.modal_area .step .cal table td button.lunar{border-radius:100%;background:var(--primary);color:#fff}
.modal_area .step .cal table td button.on{border-radius:100%;background:#f00;color:#fff}
.modal_area .step .info{margin-top:15px;padding-top:15px;border-top:1px solid #e1e1e1;color:#333;text-align:center;word-break:keep-all}
.modal_area .step .info span{font-weight:700;color:#f00}
#modal_form .step3{padding-bottom:50px}
.modal_area .step .area_pick{overflow:hidden;overflow-y:auto;width:80%;max-height:390px;margin:50px auto 0}
.modal_area .step .area_pick li{float:left;width:19.2%;margin-right:1%;margin-bottom:1%}
.modal_area .step .area_pick li:nth-child(5n){margin-right:0}
.modal_area .step .area_pick li label{display:block;width:100%;padding:12px 0;border:1px solid #e1e1e1;text-align:center;cursor:pointer}
.modal_area .step .area_pick li input:checked + label{border-color:var(--primary);color:var(--primary)}
.modal_area .step .area_pick .label_txt{color:var(--primary)}
.modal_area .step6{padding-bottom:50px}
.modal_area .adr{width:80%;margin:0 auto}
.modal_area .adr dl{margin-top:50px}
.modal_area .adr dt{font-weight:700;font-size:18px;color:var(--primary)}
.modal_area .adr dd input{display:block;width:100%;margin-bottom:10px;padding:15px;border:1px solid #e1e1e1!important;font-weight:700;font-size:17px;color:#333}
.modal_area .adr .adr_input{position:relative}
.modal_area .adr .adr_input svg{position:absolute;top:1px;right:7px;height:50px;background:#fff}
.modal_area .step .info2{padding:30px 0;color:var(--primary);font-weight:700;text-align:center}
.modal_area .step .info3{color:var(--primary);font-weight:700;text-align:center}
.modal_area .step .info3 button{margin-right:5px;border:none;background:none;font-weight:700;color:var(--primary);}
.modal_area .service_area input[type="checkbox"]{display:none}
.modal_area .service_area li{position:relative}
.modal_area .input_area .cont_area{overflow:hidden;width:80%;margin:30px auto 0}
.modal_area .input_area .cont_area .cs{float:left}
.modal_area .input_area .cont_area .cs .cs_tit{margin-top:30px;font-size:20px;font-weight:700;color:#111}
.modal_area .input_area .cont_area .cs .tel{margin-top:-13px;font-size:44px;font-weight:700;line-height:normal;color:var(--primary);letter-spacing:0;font-family:'Poppins'}
.modal_area .input_area .cont_area .cs .txt{font-weight:700;color:#111}
.modal_area .input_area .cont_area .input{float:left;width:56%;margin-left:30px}
.modal_area .input_area .cont_area .input dl{overflow:hidden;margin-bottom:10px;border:1px solid #e1e1e1;padding:10px 15px;line-height:40px}
.modal_area .input_area .cont_area .input dt{float:left;width:65px;font-weight:700;color:#111}
.modal_area .input_area .cont_area .input dd{float:left;width:calc(100% - 65px)}
.modal_area .input_area .cont_area .input dd input{display:block;width:100%;padding:0 10px;line-height:40px}
.modal_area .input_area .cont_area .agr{margin:20px 0;color:#333}
.modal_area .input_area .cont_area .agr label{margin:0 5px}
.modal_area .input_area .cont_area .agr label span{font-weight:700;color:var(--primary)}
.modal_area .input_area .cont_area .agr button{border:none;background:none;text-decoration:underline}
.modal_area .input_area .cont_area .input .submit_btn{display:block;width:100%;background:var(--primary);border:none;border-radius:5px;background:var(--primary);font-weight:700;font-size:16px;line-height:47px;color:#fff;}
.modal_area .all_chk{position:relative}
.modal_area .all_chk button{position:absolute;top:50%;right:0;margin-top:-12px;background:none;border:none}
.modal_area .all_chk button:last-child{display:none}
.modal_area .all_chk button svg{color:#b1b1b1}
.modal_area .agr_area{display:none;margin-left:20px}
.modal_area .step0{display:block}

.modal_area .input_area .cont_area .input dd .code_input{display:inline-block;width:70%}
.modal_area .input_area .cont_area .input dd .code_btn{display:inline-block;width:28%;border:none;border-radius:5px;background:#e5f0fe;font-size:14px;color: var(--primary);line-height:40px}
.modal_area .input_area .cont_area .input dd .code_btn.off{background:#ddd;color:#fff}

.modal_area .service_area{overflow-y:auto;max-height:530px}
.modal_area .plus_area,.modal_area .plus_area2{display:none;margin-top:5px;padding:20px;border:1px solid var(--primary);border-radius:10px}
.modal_area .step .label_ul li input:checked ~ .plus_area,.modal_area .step .label_ul li input:checked ~ .plus_area2{display:block}
.modal_area .plus_area dt,.modal_area .plus_area2 dt{margin-bottom:10px;font-weight:700;font-size:17px;color:#333}
.modal_area .plus_area dt span,.modal_area .plus_area2 dt span{margin-left:3px;font-size:14px;color:var(--primary)}
.modal_area .plus_area dd:after{display:block;clear:both;content:""}
.modal_area .plus_area2 dd{position:relative;line-height:40px}
.modal_area .plus_area2 dd label{width:auto}
.modal_area .plus_area2 dd .num{position:absolute;top:50%;right:0;-webkit-transform: translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%)}
.modal_area .plus_area2 dd .num .ctl{display:inline-block;padding:5px;border:1px solid #e1e1e1;line-height:normal}
.modal_area .plus_area2 dd .num button{width:15px;border:none;border-radius:3px;background:var(--primary);color:#fff}
.modal_area .plus_area2 dd .num input{width:20px;text-align:center}
.modal_area .plus_area dd label{float:left;width:49.5%;margin:0 1% 1% 0;border:1px solid #e1e1e1;line-height:55px;text-align:center;cursor:pointer}
.modal_area .plus_area dd input:checked + label{border-color:var(--primary);background:#e4f2ff}
.modal_area .plus_area dd label:nth-of-type(2n){margin-right:0}
.modal_area .plus_area .etc_input{display:none;text-align:right}
#rental_7:checked ~ .etc_input,#rental2_7:checked ~ .etc_input{display:block}
.modal_area .plus_area .etc_input input{width:49.5%;padding:15px 0 15px 6px;color:#333;border:1px solid #e1e1e1!important}

.modal_area .pyeong_area{overflow:hidden}
.modal_area .pyeong_area dt{float:left;margin-bottom:0}
.modal_area .pyeong_area dd{float:right}
.modal_area .service_area .clean_pyeong{width:50px;line-height:30px;text-align:center;border:1px solid #e1e1e1!important}

.modal_area .gauge_area{overflow:hidden;width:100%;height:10px;margin:20px 0 10px;background:#efefef;border-radius:3px}
.modal_area .gauge_area .gauge{height:100%;background:var(--primary);transition:0.3s}

@media (max-width:768px){
    #modal_pick ul li button:hover{border-color:#e1e1e1;background:#fff}
    .modal_area .cont,#modal_pick .cont{width:90%}
    .modal_area .close{top:10px;right:10px}
    .modal_area .step .label_ul{gap:5px}
    .modal_area .step .label_ul li{flex:1 1 100%}
    .modal_area .step .cal_area_pc{display:none}
    .modal_area .step .cal_area_mo{display:block}
    .modal_area .step .area_pick{width:100%}
    .modal_area .input_area .cont_area .cs{display:none}
    .modal_area .input_area .cont_area .input{float:none;width:100%;margin-left:0}
}
@media (max-width:480px){
    .modal_area .cont{padding:50px 20px 40px}
    #modal_pick ul li{gap:10px}
    #modal_pick ul li img{width:90px}
    #modal_pick ul li .name{font-size:17px}
    .modal_area .step .tit{font-size:22px}
    .modal_area .step .label_ul{margin-top:30px}
    .modal_area .step .label_ul li .label{padding:15px 15px 15px 45px;font-size:17px}
    .modal_area .step .label_ul li .label:before{top:20px;left:16px}
    .modal_area .step .label_ul li input:checked + .label:after{top:24px;left:20px}
    .modal_area .step .label_ul li .label .label_txt{font-size:13px}
    .modal_area .step .next_btn button{width:100%;padding:15px 0}
    .modal_area .step .next_btn .not_option{margin-bottom:5px;padding:15px 0}
    .modal_area .step .area_pick li{width:32%;margin-right:1%}
    .modal_area .step .area_pick li:nth-child(5n){margin-right:1%}
    .modal_area .step .area_pick li:nth-child(3n){margin-right:0}
    .modal_area .step .area_pick2 li{width:49.5%}
    .modal_area .step .area_pick2 li:nth-child(3n){margin-right:1%}
    .modal_area .step .area_pick2 li:nth-child(2n){margin-right:0}
    .modal_area .adr{width:100%}
    .modal_area .adr dl{margin-top:30px}
    .modal_area .input_area .cont_area{width:100%}
    .modal_area .plus_area dd label{width:100%;margin-right:0}
    .modal_area .plus_area .etc_input input{width:100%}
    .modal_area .input_area .cont_area .input dd .code_input{width:60%}
    .modal_area .input_area .cont_area .input dd .code_btn{width:38%}
}
@media (max-width:415px){
    .modal_area .step .label_ul li .label .label_txt{margin-top:2px;line-height:18px}
}
@media (max-height:725px){
    .modal_area .service_area{max-height:485px}
    #modal_form2 .input_area{overflow-y:scroll;max-height:485px}
}
@media (max-width:320px){
    .modal_area .input_area .cont_area .input dd .code_input{width:45%}
    .modal_area .input_area .cont_area .input dd .code_btn{width:52%}
}