
.finishing_list {}
.finishing_list ul li i {color:#bbb;cursor:pointer;}
.opt_select {padding:10px 0 10px 0 }
.opt_select li { float:left;margin:0 10px;font-size:13px;font-weight:500;color:#333;margin-bottom:10px }

.test_line { background-color:#c1c1c1;text-align:center; }

.opt_form { display:none; }

.finishing_type { width:100px; }
.finishing_type img { width:100%; }
.finishing_type p	{ width:100% !important;font-size:12px }

/*.order_list { margin-bottom:20px; }*/

.payment_way { border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:10px 0 5px 0;margin-bottom:20px; }

#order_shipping_txt { width:277px;display:none; }
#wr_tel1 { width:50px;text-align:center; }
#wr_tel2,
#wr_tel3 { width:60px;text-align:center; }


.mail_select { height:30px; }
.view_coupon { display:none; }
#modal { display:none;padding:0 !important;width:auto !important; }

#virtual_price { font-size: 22px;font-weight: 500;display:inline-block;color:#111 }

.design_products { display:block; }
.design_products li { display:inline-block;text-align:center;border:2px solid #FFF; }
.design_products li p {font-size:13px;padding:10px 0;width:90px;border: 1px solid #eee;cursor:pointer}

.c_total_form .total_btn_b { margin:0; }


#design_cart h1 { margin-bottom:15px;font-family:noto sans kr;font-size:23px;font-weight:500;letter-spacing:-1px;}
#order_list_div { margin: 5px 0;border-top:2px solid #333; }
#order_list_table { width:100%;border-spacing: 0; }
#order_list_table td { border:0;border-bottom:1px solid #ccc;padding:15px 0; }
/* #order_list_table td:nth-child(1) { width:150px;text-align:left; } */
#order_list_table td:nth-child(1) { width:150px;text-align:center; }
#order_list_table td:nth-child(2) { width:auto;padding-left:20px;color:#777;font-size:13px}
#order_list_table td:nth-child(2) ul li b {display:block;font-size:16px;color:#333;margin-bottom:7px;font-weight:500}
#order_list_table td:nth-child(3) { width:200px;text-align:center;font-weight:500;font-size:15px }
#order_list_table td:nth-child(4) { width:100px;text-align:center; }

#design_order_create { display:block;width:100%;margin-bottom:30px; }
#design_order_create h1 { margin-bottom:15px;font-size:30px; }

#dp_img_div { margin:10px 0;text-align: center; }
#dp_info_div { margin-top:30px;color:#777; }
#dp_info_div li { padding:5px 0 0 5px; }
#dp_info_div li  {color:#ddd}
#dp_info_div li span {color:#666}
.dp_info_txt { width:60px;display:inline-block;font-size:13px; }
.dp_info_txt2 { font-size:13px;width:auto;padding-left:5px; }
.dp_title {position:relative; z-index:1;font-size:clamp(17px, 3vw, 22px);font-weight:500;margin-bottom:25px}
@media (max-width:600px) {
    .dp_title {margin-bottom:0;padding:0 10px 10px}
}
.order_msg {
    width:100%;
    height:auto;
    min-height: 8rem;
    padding:1rem;
    border: 1px solid var(--grey-5, #AAA);
    margin-top: 2.25rem;
}
.do_tab {
    width:100%;
}
.do_tab ul {
    display:flex;
    gap:0.5rem 1rem;
    margin-top: clamp(1rem, 4vw, 2rem);
}
.do_tab ul li {
    font-size: clamp(13px, 3vw, 15px);
    font-weight: 500;
}
.do_tab ul li:hover { background-color:#fff;color:#ea323a;font-weight:500; }

.do_tab_active {
    position:relative;
    background-color:#fff !important;
    color:#ea323a !important;
    font-weight:700 !important;
    border:1px solid #ea323a !important;
}

.opt5 { position:absolute;background-color:#fff;border:1px solid #000; }

.opts_delate { cursor:pointer; }
.dp_other_btn {padding:8px 0;background-color:#333;color:#fff;font-size:14px;font-weight:500;width:170px;text-align:center;cursor:pointer;}

.exp_cmt_div { text-align: center;padding: 20px 0;text-align: center;font-size: 16px;color: #999; }

.subTotalPrice { font-size: 18px;font-weight: 600; }
.designCartTitle { font-weight: 20px !important;font-weight: bold; }

.modal { width: auto;max-width: 800px;height:auto;padding: 0; }

.overMouse	{
    position: absolute;
    z-index: 4;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
}

#design_content {
    width: 100%;
    max-width: 1278px;
    display: grid;
    grid: 1fr / 5.86fr 3.52fr;
    justify-content: space-between;
    gap: 6.4%;
    margin: 0 auto 3rem;
}

#design_preview {
    position: relative;
    width: 100%;
    padding-top: 4rem;
}

.dp_title p {
    position: absolute;
    width: 52%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
@media (max-width:1200px) {
    .dp_title p {width: 80%;}
}

.dp_title span {
    font-size: 13px;
    font-weight: 400;
    color: var(--grey-6, #888);
}

.preview_img_wr {
    width: 750px;
    max-width: 100%;
    display:flex;
    justify-content: center;
    overflow: hidden;
}

.preview_img_wr * {
    display: block;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
}

#design_cart {
    width: 100%;
    margin-top: 50px;
    position: relative;
}

.design_cart_wr {
    position: sticky;
    top: 0;
}

#design_order {
    width: 100%;
}

.order_form_cates {
    display: flex;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
}

.form_inputs_wr {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f5f5f5;
    padding: 0.425rem clamp(1.25rem, 4vw, 2.5rem);
}
.form_inputs_wr input, select, label, textarea {
    font-size:clamp(13px, 3vw, 15px)
}
.form_inputs_wr p {
    font-size:clamp(13px, 3vw, 15px);
    font-weight:600;
}

.form_inputs_t {
    padding-top: 1rem;
}

.form_inputs_b {
    padding-bottom: 1rem;
}

.form_div_line {
    width: 100%;
    height: 1px;
    margin: 0.75rem 0;
    background: var(--grey-3, #DDD);
}

.form_inputs_wr p {
    flex: 0 1 4rem;
}

.form_result_wr b {
    flex: 0 1 6rem;
    font-size:clamp(13px, 3vw, 15px);
}

.select_st {
    width: 30%;
    min-height: 2.5rem;
    background: #fff;
    line-height: 2;
    cursor: pointer;
    border: 1px solid #aaa;
}

input[type='text'].numeric,
input[type='text'].text_message {
    min-height: 2rem;
    line-height: 2;
    border: 1px solid #aaa;
    background: #fff;
}

input[type='text'].text_message {
    width: 100%;
}

.form_result_wr {
    display: flex;
}

#order_list_div {
    max-height: 50vh;
    border: none;
    overflow: auto;
    padding: 1rem 0;
}

/*	.order_list_wrapper {
		position: relative;
		display: grid;
    grid: 1fr / 100px 1fr;
    gap: 1.25rem;
		border-radius: 10px;
    border: 1px solid var(--grey-3, #DDD);
    background: var(--grey-0, #FBFBFB);
    padding: 1.25rem;
	}*/
.order_list_wrapper {
    position: relative;
    display: flex;
    flex-direction: column;

}

.order_list_wrapper img {
    width: 100% !important;
    grid-area: 1 / 1 / 3 / 2;
}

.order_list_wrapper .opts_delate {
    /*position: absolute;
    top: 1rem;
    right: 1rem;*/
}

.order_list_empty {
    display: flex;
    justify-content: center;
    text-align:center;
    grid-area: 1 / 1 / 1 / 3;
    padding: 3rem 1.25rem;
    border: 1px #ddd solid;
    background-color:#f9f9f9;
    font-size: 14px;
    color: var(--grey-6, #888);
    border-radius:5px;
}

.order_total_box dl {
    display: flex;
    display: flex;
    justify-content: space-between;
}
.order_total_box dl dt {
    font-size:clamp(13px, 3vw, 15px);
}

.order_total_box .num {
    font-size: clamp(13px, 3vw, 15px);
    font-weight: 600;
}
.order_total_box .total_num {
    font-size: clamp(16px, 3vw, 20px);
    font-weight: 600;
}
.design_cart_close {
    padding: 0 1rem;
}

@media screen and (max-width: 1024px) {
    .dp_title span,
    .do_optbox .mt-4 button {
        display: none;
    }

    #design_content {
        display: block;
    }

    #design_preview {
        padding-top: 20px;
    }
    .design_cart_wr {
    }

    .preview_img_wr {
        margin: auto;
    }

    .do_tab ul {
        flex-wrap: wrap;
        padding: 0 1.25rem;
    }

    .do_tab ul li {
        width: 30%;
    }

    .order_msg, .form_result_wr {
        width: calc(100% - 2.5rem);
        margin: 1.25rem;
    }

    #design_cart {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        max-width: calc(100% - 2.5rem);
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 2rem 1rem;
        border: 1px solid #ddd;
        border-radius: 0.75rem;
        z-index: 60000;

    }

    #order_list_div {
        max-height: 30vh;
    }

    .order_list_wrapper {
        grid: 1fr / 0.4fr 1fr;
        border-radius: 0;
    }

    .order_list_wrapper .opts_delate {
        top: 0.5rem;
        right: 0.5rem;
    }

    .order_list_wrapper li {
        max-width: 88%;
    }

    .mo_bottom_container {
        position: sticky;
        bottom: 0;
        display: flex;
        width: 100%;
        background: #fff;
        padding: 1rem;
        border: 1px solid var(--grey-5, #AAA);
        gap:0.75rem 0.3rem;
    }

    .mo_bottom_container #mo_cart_trigger {
        position: relative
    }

    .mo_bottom_container #mo_cart_trigger span {
        position: absolute;
        top: 5px;
        right: 5px;
        background: var(--red, #FC2626);
        border-radius: 50px;
        color: #fff;
        width:25px;
        height:20px;
    }

    .preview_img_wr * {
        width: 100% !important;
    }
}
.design_tab li {
    width:33%;
    border-top: 1px #ccc solid;
    text-align: center;
    padding: 15px 0;
    font-size: clamp(13px, 4vw, 15px);
    font-weight: 400;
    color: #777;
    cursor: pointer;
}
.design_tab li span {
    font-weight:600;
    margin-left:3px;
    color:var(--teal-6);
}
.design_tab li.on {
    border-top:1px #000 solid;
    color:#000;
    font-weight:600;
}

.design_check_list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    padding: 20px 0;
    font-size: 14px;
}
.design_check_list label.design_check_item {
	display: flex;
	align-items: center;
	gap: 0 0.375rem; 
    padding:3px;
    word-wrap: break-word;
	cursor: pointer;
}

.design_text_message {
    width: 750px;
    height: 300px;
    background: oklab(0.98 0 0);
    border-radius: 16px;
    border: 1px #DDDDDD solid;
    padding: 20px;

}

#design_order .radio input[type="radio"] + label {
    display: flex;
    align-items: center;
	color: #777;
	cursor: pointer;
}

#design_order .radio input[type="radio"]:checked + label {
	color: #000;
}

#design_order .radio input[type="radio"] + label::before {
	border: 1px solid #ddd !important;
}

#design_order .radio input[type="radio"]:checked + label::before {
	border: 1px solid #000 !important;
	border: 1px solid #000 !important;
    background-image: radial-gradient(circle, #000 40%, #fff 50%) !important;
}


.design_check_item .check_img {
    content: url('../img/sample_check.png');
}

.design_check_item input[type="checkbox"]:checked + .check_img {
    content: url('../img/sample_check_r.png');
}