@charset "utf-8";

.modal_area .cont{overflow-y:auto;position:relative;width:1000px;max-height:700px;padding:50px 30px 0 30px;border-radius:20px;background:#fff;letter-spacing:-0.5px;color:#000;scrollbar-width: none;-ms-overflow-style: none}
.modal_area .cont::-webkit-scrollbar{display:none}
.modal_area .close{position:absolute;top:18px;right:30px;border:none;border-radius:3px;background:none}
.modal_area .close svg{width:28px;height:28px;}
.modal_area .back{position:absolute;top:20px;left:30px;border:none;background:none}

.modal_area .next_btn{display:flex;position:sticky;bottom:0;left:0;gap:20px;margin-top:25px;padding:15px 0 25px;background:#fff}
.modal_area .next_btn button{flex:1 1 calc(50% - 10px)}
.modal_area .next_btn button:first-child{border:1px solid #000;background:none;color:#000}
.modal_area .next_btn button{width:calc(50% - 10px);padding:12px 0;border:none;border-radius:5px;background:var(--primary);font-weight:600;font-size:16px;color:#fff}
.modal_area .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;position:relative}
.modal_area .tit{font-weight:600;font-size:26px;color:#111}
.modal_area .tit span{margin-left:220px;font-size:16px;color:#3f3f46}
.modal_area .label_ul{display:flex;gap:20px;flex-wrap:wrap;margin-top:25px}
.modal_area .label_ul li{flex:1 1 calc(50% - 10px)}
.modal_area .label_ul li:last-child{flex:0 1 calc(50% - 10px)}
.modal_area input[type="radio"]{display:none}
.modal_area .label_ul li .label{display:block;position:relative;width:100%;height:100%;padding:20px 20px 20px 50px;border:1px solid #e1e1e1;border-radius:10px;font-weight:700;font-size:20px;color:#111;cursor:pointer}
.modal_area .label_ul li input:checked + .label{border-width:2px;border-color:var(--primary)}
.modal_area .label_ul li .label:before{position:absolute;top:30px;left:20px;width:20px;height:20px;border-radius:100%;border:1px solid var(--primary);content:""}
.modal_area .label_ul li input:checked + .label:after{position:absolute;top:34px;left:24px;width:12px;height:12px;border-radius:100%;background:var(--primary);content:""}
.modal_area .label_ul li .label .label_txt{font-weight:400;font-size:16px;line-height:1.5;color:#52525B}
.modal_area .label_ul li .label span{color:#f00}
.modal_area .label_ul li img{position:absolute;top:50%;right:20px;width:72px;-webkit-transform:translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%)}
.modal_area .cal_area{position:relative;margin-top:30px;}
.modal_area .cal_area .date_btn{position:absolute;top:4px;border:none;background:none}
.modal_area .cal_area .prev{left:0}
.modal_area .cal_area .next{right:0}
.modal_area .cal_area_mo{display:none}
.modal_area .cal_area_pc>div{display:flex;gap:20px;flex-wrap:wrap}
.modal_area .cal_area_pc .cal{flex:1 1 0}
.modal_area .cal .date{font-weight:600;font-size:18px;;text-align:center}
.modal_area .cal table{width:100%}
.modal_area .cal table th{width:14.28%;color:#333}
.modal_area .cal table td{font-weight:600;font-size:13px;color:#27272a;text-align:center;color:#dedede}
.modal_area .cal table td button{display:block;position:relative;width:100%;margin:0 auto;padding:5px;border:none;background:none;font-weight:600;font-size:13px;color:#27272a}
.modal_area .cal table td button p{font-size:12px}
.modal_area .cal table td button .blue{color:#1955f8}
.modal_area .cal table td button .red{color:#ff6567}
.modal_area .cal table td button.lunar:before{position:absolute;top:3px;right:12px;width:6px;height:6px;border-radius:100%;background:var(--primary);content:""}
.modal_area .cal_area_mo table td button.lunar:before{right:3px}
.modal_area .cal table td button.on{border:1px solid #1955f8;border-radius:8px;background:#e4f2ff}
.modal_area .info{margin-top:15px;padding-top:15px;border-top:1px solid #e1e1e1;color:#333;text-align:center;word-break:keep-all}
.modal_area .info span{font-weight:700;color:#f00}
.modal_area .area_pick{overflow:hidden;overflow-y:auto;width:80%;max-height:390px;margin:50px auto 0}
.modal_area .area_pick li{float:left;width:19.2%;margin-right:1%;margin-bottom:1%}
.modal_area .area_pick li:nth-child(5n){margin-right:0}
.modal_area .area_pick li label{display:block;width:100%;padding:12px 0;border:1px solid #e1e1e1;text-align:center;cursor:pointer}
.modal_area .area_pick li input:checked + label{border-color:var(--primary);color:var(--primary)}
.modal_area .area_pick .label_txt{color:var(--primary)}
.modal_area .info2{padding:30px 0;color:var(--primary);font-weight:700;text-align:center}
.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:#000}
.modal_area .agr_area{display:none;margin-left:20px}
.modal_area .step0{display:block}

.modal_area .gauge_bar{width:100%;height:10px;margin:20px 0 10px;background:#efefef;border-radius:3px}
.modal_area .gauge_bar .gauge{position:relative;height:100%;border-radius:3px;background:var(--primary);transition:0.3s}
.modal_area .gauge_bar .gauge_num{position:absolute;top:-22px;right:0;font-weight:600;font-size:14px;color:var(--primary)}
.modal_area .gauge_txt{margin-bottom:20px;font-size:14px;color:#3f3f46}

.modal_area .tip{margin-top:20px;padding:15px;border-radius:4px;background:#e4f2ff;font-weight:600;font-size:18px;color:#3f3f46}
.modal_area .tip svg{margin-right:3px;vertical-align:middle}
.modal_area .info_list{padding-top:10px;border-top:1px solid #E4E4E7;font-size:13px;line-height:1.4;color:#71717a}
.modal_area .info_list li{position:relative;padding-left:10px}
.modal_area .info_list li:before{position:absolute;top:50%;left:0;width:3px;height:3px;margin-top:-1.5px;border-radius:100%;background:#71717a;content:""}
.modal_area .info_list li .red{font-weight:700;color:#ff6567}
.modal_area .info_list li .blue_circle{display:inline-block;width:6px;height:6px;border-radius:100%;background:#1955f8}
.modal_area .tit_float{overflow:hidden}
.modal_area .tit_float .tit{float:left}
.modal_area .tit_float .date_txt{float:right;font-weight:600;font-size:16px}
.modal_area .tit_float .date_txt .date_input{display:inline-block;width:300px;height:48px;margin-left:5px;border:1px solid #E4E4E7;padding:10px;border-radius:8px;font-weight:400;color:#27272a}
.modal_area .tit_float .date_txt .date_input svg{width:16px;height:16px;margin-right:3px;color:#27272a;vertical-align:middle}

.modal_area .input_div {margin:10px 0 30px}
.modal_area .step .input_div input{width:100%;padding:15px;border:1px solid #e4e4e7!important;border-radius:8px;font-size:16px;color:#000}
.modal_area .input_div .adr_input{display:flex;gap:20px;margin-bottom:10px;}
.modal_area .input_div .adr_input input{flex:1 1 calc(85% - 10px)}
.modal_area .input_div .adr_input button{border:none;border-radius:8px;background:var(--primary);font-weight:600;font-size:16px;color:#fff;flex:1 1 calc(15% - 10px)}
.modal_area .select_area{position:relative;width:50%}
.modal_area .select_area .select_view{cursor:pointer}
.modal_area .select_area svg{position:absolute;top:15px;right:10px;}
.modal_area .select_area .select_list{display:none;overflow-y:auto;max-height:380px;border:1px solid var(--primary);border-radius:8px}
.modal_area .select_area .select_list button{position:relative;width:100%;padding:10px 15px;border:none;background:none;font-size:16px;color:#000;text-align:left}
.modal_area .select_area .select_list button:hover{background:#E4F2FF;}
.modal_area .select_area .select_list button span{position:absolute;top:50%;right:15px;color:var(--primary);-webkit-transform:translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%)}
.modal_area .destination_area{display:none;margin-top:10px}
.modal_area .adr_chk{display:flex;gap:20px}
.modal_area .adr_chk dt{font-weight:600;font-size:14px;line-height:48px;flex:1 1 calc(5% - 5px)}
.modal_area .adr_chk dd{position:relative;flex:1 1 calc(45% - 5px)}
.modal_area .adr_chk dd input{background:#e4e4e7;color:#71717a}
.modal_area .adr_chk dd button{position:absolute;top:50%;right:15px;border:none;background:none;font-weight:700;font-size:13px;color:var(--primary);-webkit-transform:translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%)}
.modal_area .radio_btn{display:flex;gap:20px;margin-top:15px}
.modal_area .radio_btn label{display:block;width:120px;line-height:56px;border:1px solid #D4D4D8;border-radius:8px;font-weight:600;font-size:18px;color:#a1a1aa;text-align:center;cursor:pointer}
.modal_area .radio_btn input:checked ~ label{border:2px solid var(--primary);color:var(--primary)}

.modal_area .service_area{display:flex;gap:20px}
.modal_area .service_area input[type=checkbox]{display:none}
.modal_area .check_ul{width:100%}
.modal_area .check_ul li{margin-bottom:15px}
.modal_area .check_ul li:last-child{margin-bottom:0}
.modal_area .check_ul .option label{display:block;position:relative;width:100%;height:100%;padding:20px 20px 20px 50px;border:1px solid #e1e1e1;border-radius:10px;font-weight:700;font-size:20px;color:#111;cursor:pointer;background:#F7F9FF }
.modal_area .check_ul .option input:checked + .label{border-width:2px;border-color:var(--primary);color:var(--primary);background:#fff}
.modal_area .check_ul .option .label:before{position:absolute;top:30px;left:20px;width:20px;height:20px;border-radius:2px;border:2px solid #d4d4d8;content:""}
.modal_area .check_ul .option input:checked + .label:before{border-color:var(--primary)}
.modal_area .check_ul .option input + .label:after{position:absolute;top:36px;left:24px;width:12px;height:8px;background:url(/sh_img/make24/modal_form/check_off.png) no-repeat;background-size:contain;content:""}
.modal_area .check_ul .option input:checked + .label:after{background-image:url(/sh_img/make24/modal_form/check.png)}
.modal_area .check_ul .option .label .label_txt{font-weight:400;font-size:16px;line-height:1.5;color:var(--primary)}
.modal_area .check_ul .option input:checked + .label .label_txt{color:#52525B}
.modal_area .check_ul .option .label span{color:#f00}
.modal_area .check_ul .option input:checked + .label span{color:#52525B}
.modal_area .check_ul .option_area{border-radius:16px}

.modal_area .service_option{overflow:hidden;border-radius:16px}
.modal_area .option_area{padding:15px;background:#F7F9FF}
.modal_area .option_area>p{margin-bottom:10px;font-weight:700;font-size:20px;color:var(--primary)}
.modal_area .option_area dt{margin-bottom:5px;font-weight:700;font-size:16px}
.modal_area .option_area dd{margin-bottom:15px;font-weight:600;font-size:14px}
.modal_area .option_area dd .clean_pyeong{width:120px;margin-right:10px;padding-left:5px;border:1px solid #E4E4E7!important;border-radius:8px;background:#fff;font-size:16px;line-height:48px;color:#71717a;text-align:center}
.modal_area .option_area dd input[type=radio] + label,.modal_area .option_area dd input[type=checkbox] + label{display:inline-block;width:calc(50% - 10px);margin:0 2.5px 5px;border:1px solid #d4d4d8;border-radius:8px;background:#fff;font-weight:600;font-size:18px;line-height:56px;color:#a1a1aa;text-align:center;cursor:pointer}
.modal_area .option_area dd input:checked + label{border:2px solid var(--primary);color:var(--primary)}
.modal_area .option_area .plus_area2 label{width:auto;font-weight:600;font-size:16px}
.modal_area .option_area dd .etc{width:100%;;padding-left:10px;border:1px solid #E4E4E7!important;border-radius:8px;background:#fff;font-size:16px;line-height:48px;color:#71717a}
.modal_area .option_area dd .ctl{display:inline-block;border:1px solid #e4e4e7;background:#fff}
.modal_area .option_area dd .ctl button{width:40px;line-height:40px;color:#000;border:none;background:none;font-weight:400;font-size:26px}
.modal_area .option_area dd .ctl button:first-child{border-right:1px solid #e4e4e7}
.modal_area .option_area dd .ctl button:last-child{border-left:1px solid #e4e4e7}
.modal_area .option_area dd .ctl input{width:70px;font-size:16px;line-height:40px;color:#71717a;text-align:center}

.modal_area .input_area .cont_area{display:flex;gap:20px;margin-top:20px}
.modal_area .input_area .cont_area>div{flex:1 1 calc(50% - 10px)}
.modal_area .input_area .input dl{display:flex;margin-bottom:15px}
.modal_area .input_area .input dt{width:140px;font-weight:600;font-size:14px;line-height:52px}
.modal_area .input_area .input dd{position:relative;width:calc(100% - 140px)}
.modal_area .input_area .input dd input{width:100%;padding-left:15px;border:1px solid #e4e4e7!important;border-radius:8px;font-size:16px;line-height:52px;color:#000;box-sizing:border-box}
.modal_area .input_area .input dd input:read-only{background:#f4F4F5;color:#71717A}
.modal_area .input_area .input dd .code_btn{position:absolute;top:8px;right:15px;padding:10px;border:none;border-radius:8px;font-weight:600;font-size:14px;color:#fff;background:var(--primary)}
.modal_area .input_area .input dd .send_btn{border:1px solid #A1A1AA;color:#71717A;background:#fff}
.modal_area .input_area .input .code_area p{font-weight:600;font-size:14px;color:var(--primary)}
.modal_area .input_area .cont_area .all_chk{margin:10px 0;padding-bottom:10px;border-bottom:1px solid #D4D4D8}
.modal_area .input_area .cont_area .agr input{display:none}
.modal_area .input_area .cont_area .agr label{position:relative;padding-left:30px;font-size:14px}
.modal_area .input_area .cont_area .agr label:before{position:absolute;top:50%;left:0px;width:20px;height:20px;border-radius:2px;border:2px solid #d4d4d8;content:"";-webkit-transform:translate(0,-50%);-ms-transform: translate(0,-50%);transform: translate(0,-50%)}
.modal_area .input_area .cont_area .agr input:checked + label:before{border-color:var(--primary)}
.modal_area .input_area .cont_area .agr label:after{position:absolute;top:4px;left:4px;width:12px;height:8px;background:url(/sh_img/make24/modal_form/check_off.png) no-repeat;background-size:contain;content:""}
.modal_area .input_area .cont_area .agr input:checked + label:after{background-image:url(/sh_img/make24/modal_form/check.png)}
.modal_area .input_area .cont_area .agr_area button{margin-left:5px;border:none;background:none;color:var(--primary)}

.modal_area .input_area .cont_area .cs{padding:30px;border-radius:12px;background:url(/sh_img/app/icon/3d/phone.png) 93% 50% no-repeat #E4F2FF}
.modal_area .input_area .cont_area .cs .cs_tit{float:left;margin:9px 12px 0 0;font-weight:700;font-size:16px}
.modal_area .input_area .cont_area .cs .tel{float:left;font-weight:700;font-size:24px;color:var(--primary)}
.modal_area .input_area .cont_area .cs .txt{font-size:14px;line-height:1.5;clear:both}
.modal_area .input_area .cont_area .event{margin-top:10px}
.modal_area .input_area .cont_area .event img{width:100%}

@media (max-width:768px){
    .modal_area .label_ul li .label{padding:15px 15px 15px 45px;font-size:16px}
    .modal_area .label_ul li .label:before{top:20px;left:16px}
    .modal_area .label_ul li input:checked + .label:after{top:24px;left:20px}
    .modal_area .label_ul li .label .label_txt{font-size:13px}
    .modal_area .tit{font-size:18px}
    .modal_area .tit span{display:block;margin-left:0;margin-bottom:10px;font-weight:400;font-size:13px}
    .modal_area .tip{padding:0;background:none;font-size:12px;color:var(--primary)}
    .modal_area .tip svg{display:none}
    .modal_area .next_btn{gap:5px;margin-top:30px}
    .modal_area .next_btn button{flex:1 1 calc(70% - 5px);font-size:14px}
    .modal_area .next_btn button:first-child{flex:1 1 calc(30% - 5px)}
    .modal_area .cont,#modal_pick .cont{width:90%;max-height:84vh}
    .modal_area .label_ul{gap:5px}
    .modal_area .label_ul li,.modal_area .label_ul li:last-child{flex:1 1 100%}
    .modal_area .cal_area_pc{display:none}
    .modal_area .cal_area_mo{display:block}
    .modal_area .area_pick{width:100%}
    .modal_area .input_div input{font-size:14px}
    .modal_area .input_div .adr_input{gap:10px}
    .modal_area .input_div .adr_input input{flex:1 1 calc(70% - 5px)}
    .modal_area .input_div .adr_input button{flex:1 1 calc(30% - 5px);font-size:14px}
    .modal_area .tit_float .tit{float:none}
    .modal_area .tit_float .date_txt{float:none;margin-top:10px;font-size:14px;color:#3f3f46}
    .modal_area .tit_float .date_txt .date_input{width:100%;margin-left:0}
    .modal_area .step .input_div input{font-size:14px}
    .modal_area .select_area{width:100%}
    .modal_area .select_area .select_list{max-height:184px}
    .modal_area .select_area .select_list button{font-size:14px}
    .modal_area .adr_chk{display:block}
    .modal_area .adr_chk dt{line-height:inherit}
    .modal_area .adr_chk dd{margin:5px 0 10px 0}
    .modal_area .radio_btn li{flex:1 1 calc(50% - 10px)}
    .modal_area .radio_btn label{width:100%;font-size:16px;line-height:50px}
    .modal_area .check_ul .option label{font-size:14px}
    .modal_area .check_ul .option .label .label_txt{font-size:12px}
    .modal_area .option_area>p{font-size:14px}
    .modal_area .option_area dt{font-size:14px}
    .modal_area .option_area dd input[type=radio] + label, .modal_area .option_area dd input[type=checkbox] + label{width:calc(50% - 5px);margin:0 0 5px;font-size:13px;line-height:50px}
    .modal_area .option_area dd .clean_pyeong{line-height:48px}
    .modal_area .option_area dd .ctl input{font-size:14px}
    .modal_area .option_area dd .etc{font-size:14px}
    .modal_area .input_area .cont_area{display:block}
    .modal_area .input_area .cont_area .cs{margin-top:25px;padding:14px}
    .modal_area .input_area .cont_area .cs .cs_tit{margin:5px 9px 0 0;font-size:13px}
    .modal_area .input_area .cont_area .cs .tel{font-size:18px}
    .modal_area .input_area .cont_area .cs .txt{font-size:12px}
    .modal_area .input_area .cont_area .event{display:none}
    .modal_area .input_area .input dt{width:95px}
    .modal_area .input_area .input dd{width:calc(100% - 95px)}
    .modal_area .service_area{display:block}
}
@media (max-width:480px){
    .modal_area .close{right:20px}
    .modal_area .back{left:20px}
    .modal_area .cont{padding:50px 20px 0 20px}
    .modal_area .next_btn{padding-bottom:20px}
    .modal_area .next_btn .not_option{margin-bottom:5px;padding:15px 0}
    .modal_area .area_pick li{width:32%;margin-right:1%}
    .modal_area .area_pick li:nth-child(5n){margin-right:1%}
    .modal_area .area_pick li:nth-child(3n){margin-right:0}
    .modal_area .area_pick2 li{width:49.5%}
    .modal_area .area_pick2 li:nth-child(3n){margin-right:1%}
    .modal_area .area_pick2 li:nth-child(2n){margin-right:0}
    .modal_area .input_div{width:100%}
    .modal_area .plus_area dd label{width:100%;margin-right:0}
    .modal_area .plus_area .etc_input input{width:100%}
}
@media (max-width:415px){
    .modal_area .label_ul li .label .label_txt{width:64%;margin-top:2px;line-height:18px}
}