@charset "utf-8";

.modal_wrap {background-color: rgba(0, 0, 0, 0.5); width: 100%; font-family: 'Pretendard'; position: fixed; top: 0; left: 0; height: 100vh; z-index: 9999;}
.modal_wrap {display: none;}

.modal_box {width: 1440px; background-color: #f5f5f5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 50px;}

/* --- 모달 제목 --- */
.title_wrap {margin-bottom: 30px;}
.title_wrap p {font-weight: 700; font-size: 40px; color: #333;}

/* --- 모달 본문 --- */
.content_wrap ul {display: flex; justify-content: space-between; background-color: white;}
.content_wrap ul li {height: 600px; padding: 20px;}
.content_wrap ul li:nth-of-type(1) {width: 60%;}
.content_wrap ul li:nth-of-type(2) {width: 40%;}
.content_wrap ul .text_area {overflow-y: scroll; width: 100%; height: 100%;}
.content_wrap ul .img_area {width: 100%; background-color: white; height: 100%;  overflow-y: scroll;}

/* --- 모달 닫기 버튼 --- */
.modal_wrap .btn_close {position: absolute; right: 0; top: 0; cursor: pointer;}
.btn_close i {font-size: 45px; color: white;}

/* --------- 1600px --------- */
@media screen and (max-width: 1600px) {
    .modal_box {width: 1200px;}
}

/* --------- 1400px --------- */
@media screen and (max-width: 1400px) {
    .modal_box {width: 1000px;}
}

/* --------- 1200px --------- */
@media screen and (max-width: 1200px) {
    .modal_box {width: 900px;}
}

/* --------- 1024px --------- */
@media screen and (max-width: 1024px) {
    .modal_box {width: 800px;}
}

/* --------- 960px --------- */
@media screen and (max-width: 960px) {
    .modal_box {width: 800px;}
    .content_wrap ul li:nth-of-type(1) {width: 40%;}
    .content_wrap ul li:nth-of-type(2) {width: 60%;}
}

/* --------- 850px --------- */
@media screen and (max-width: 850px) {
    .modal_box {width: 750px;}
}

/* --------- 768px --------- */
@media screen and (max-width: 768px) {
    .modal_box {width: 650px; padding: 30px;}
}

/* --------- 670px --------- */
@media screen and (max-width: 670px) {
    .modal_box {width: 550px; padding: 20px;}
    .title_wrap {margin-bottom: 10px;}
    .title_wrap p {font-size: 32px;}
}

/* --------- 576px --------- */
@media screen and (max-width: 576px) {
    .modal_box {width: 440px;}
    .content_wrap ul {flex-direction: column; height: 80vh;}
    .content_wrap ul li:nth-of-type(1) {width: 100%; height: 60%;}
    .content_wrap ul li:nth-of-type(2) {width: 100%; height: 40%;}
}

/* --------- 460px --------- */
@media screen and (max-width: 460px) {
    .modal_box {width: 320px; padding: 10px 0;}
    .content_wrap ul {height: 60vh;}
    .content_wrap ul li {padding: 10px;}
    .content_wrap ul li:nth-of-type(1) {height: 50%;}
    .content_wrap ul li:nth-of-type(2) {height: 50%;}
}

/* --------- 350px --------- */
@media screen and (max-width: 350px) {
    .modal_box {width: 300px;}
}

/* --------- 310px --------- */
@media screen and (max-width: 310px) {
    .modal_box {width: 260px;}
}