.modal_wrap {position: fixed;top: 0;left: 0; display: none; z-index: 1000}
.modal_wrap .madal_inner {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 750px; min-width: 300px; border-radius: 10px; border: 4px solid #fff; border-radius: 10px; overflow: hidden; box-sizing: border-box; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}

.modal_wrap .modal_head, 
.modal_wrap .modal_con, 
.modal_wrap .modal_foot {position: relative; width: 100%; box-sizing: border-box;}

/* head */
.modal_wrap .modal_head {height: 35px; line-height: 35px; background: #0099d5;}
.modal_head .modal_close {width: 25px; height: 25px; padding: 0; background: transparent; border: none; position: absolute; top: 50%; transform: translateY(-50%); right: 10px;}
.modal_head .modal_close img {width: 100%; filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(197deg) brightness(109%) contrast(101%)}

/* con */
.modal_wrap .modal_con {}
.modal_con .modal_con_box {width: 100%}
.modal_con .modal_con_box .modal_img_frame {width: 100%}
.modal_con .modal_con_box .modal_img_frame img {width: 100%}


/* foot */
.modal_wrap .modal_foot {text-align: right; height: 35px ;line-height: 35px; padding: 0 10px; background: #fff}
.modal_foot .modal_ck input {display: none}
.modal_foot .modal_ck {display: inline-flex; align-items: center; cursor: pointer; font-size: 14px; user-select: none;}
.modal_foot .checkbox {}
.modal_foot .check_mark {width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 4px; display: inline-block; position: relative; margin-right: 4px; transition: all 0.2s ease;}
.modal_foot .modal_ck input:checked + .check_mark {background-color: #0099d5; border-color: #0099d5;}
.modal_foot .check_mark::after {content: ""; position: absolute; display: none; left: 5px; top: 0px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.modal_foot .modal_ck input:checked + .check_mark::after {display: block}