.modal_wrap {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.5); z-index: 999; display: none;}
.modal_wrap .modal_box {padding: 40px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; max-width: 600px; width: 100%; min-width: 260px; }
.modal_con {display: flex; flex-direction: column; width: 100%; justify-content: center; gap: 30px; align-items: center;}
.modal_con .md_tit {font-size: 22px; text-align: center; color: #222; line-height: 1;}
.modal_con .md_text {padding: 20px; background-color: #f5f5f5; line-height: 1.6; font-size: 16px; word-break: keep-all; border-radius: 8px; height: 50vh; overflow-y: scroll; width: 100%; font-weight: 400;}
.md_close {font-size: 15px; color: #fff; padding: 10px 30px; line-height: 1; background-color: var(--main-color); border-radius: 4px; cursor: pointer;}


/* ********************************************* *
* 690px
* ********************************************* */
@media screen and (max-width: 690px){

    .modal_wrap .modal_box {width: calc(100% - 32px); padding: 30px ;}

}