@charset "utf-8";

.site_wrap {width: 100%; font-family: 'Pretendard'; position: fixed; top: 0; left: 0; height: 100vh; z-index: 9999;}

.site_box {width: 60%; background-color: #f4f4f4; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 50px 30px;}

/* --- 모달 제목 --- */
.site_box .title_wrap {margin-bottom: 30px;}
.site_box .title_wrap p {font-weight: 500; font-size: 28px; color: #666; text-align: left;}

/* --- 모달 본문 --- */
.site_content {position: relative; width: 100%; height: 100%; overflow: hidden;}
/* .site_content ul {display: flex; justify-content: center; gap: 30px;} */
.site_content .site_area {width: 100%; height: 100%;}
.site_content .site_txt span {padding: 10px 0; font-weight: 600; color: #666; font-size: 18px;}

.site_content .site_txt span.site_address {font-weight: 400; padding-left: 5px;}


/* --- 모달 닫기 버튼 --- */
/* .share_box .modal_wrap .btn_close {position: absolute; right: 0; top: 0; cursor: pointer; } */
.site_box .btn_close i {font-size: 30px; color: #666; padding-top: 15px;}


/* --------- 1200px --------- */
@media screen and (max-width: 1200px) {
    .site_box {width: 65%; padding: 40px 30px;}
    .site_box .title_wrap p  {font-size: 24px;}
    .site_content .site_txt span {font-size: 16px;}
}

/* --------- 960px --------- */
@media screen and (max-width: 960px) {
    .site_box {width: 70%;}
    .site_box .title_wrap p  {font-size: 22px;}
    /* .site_content {padding-bottom: 70%;} */
    .site_box .btn_close i {font-size: 24px;}
}

/* --------- 768px --------- */
@media screen and (max-width: 768px) {
    .site_box {width: 80%; padding: 30px;}
    .site_box .title_wrap p  {font-size: 20px;}
    .site_content .site_txt span {font-size: 14px;}
    .site_content .site_txt span.site_address {padding-left: 3px;}
}

/* --------- 460px --------- */
@media screen and (max-width: 460px) {
    .site_box {padding: 20px;}
    .site_box .title_wrap p  {font-size: 18px;}
    .share_box .modal_wrap .btn_close { top: 20px; right: 20px;}
    .site_box .btn_close i {font-size: 24px;}
    /* .site_content {padding-bottom: 100%;} */
}


/* --------- 310px --------- */
@media screen and (max-width: 310px) {
    .site_box {padding: 10px;}
    .share_box .modal_wrap .btn_close {top: 8px; right: 10px; padding-top: 0;}
    .site_box .btn_close i {font-size: 18px;}
}