@charset 'UTF-8';
/* /* 
  파일명: modalPopup.css
  작성자: 김도희
  최초작성일: 2025-05-07
  수정자: 김도희
  수정일: 2025-05-07
  설명: 이 파일은 모달 팝업 관련 css입니다. 
*/
/* 기본 모달 스타일 */
.modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0, 0, 0, 0.4);}

/* 모달 스타일 */
.modal .modal-wrap {margin: 2% auto;width: 100%;max-width: 1170px;background-color: #fff;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.modal .modal-wrap .modal-header {display: flex;align-items: center;height: 84px;flex-shrink: 0;padding: 0 32px;border-bottom: 1px solid #e1e1e1;background-color: #ffffff;}
.modal .modal-wrap .modal-header .modal-title{font-size: 16px;font-weight: bold;line-height: 1.25;color: #000;}
/* 모달 헤더 닫기 버튼 스타일 */
.modal .modal-wrap .modal-header .close{margin-left: auto;}
.modal .modal-wrap .modal-header .close i{font-size: 28px; color: #363c43; cursor: pointer;}
.modal .modal-wrap .modal-header .close:hover,
.modal .modal-wrap .modal-header .close:focus {color: #000000;text-decoration: none;cursor: pointer;}
.modal .modal-wrap .modal-body{padding: 52px 60px 60px; height: 730px; overflow-y: auto;}
.modal .modal-wrap .modal-body .modal-title{font-size: 28px;font-weight: bold;line-height: 1.18;color: #363c43;}
.modal .modal-wrap .modal-body .sub-title{margin-top: 36px;font-size: 16px;font-weight: bold;line-height: 1.25;color: #363c43;}
.modal .modal-wrap .modal-body .sub-title:first-child{margin-top: 28px;}
.modal .modal-wrap .modal-body .desc{margin-top: 14px; font-size: 14px;font-weight: 400;line-height: 1.14;color: #777e87;}
.modal .modal-wrap .modal-body .table-wrap{width: 720px;}
.modal .modal-wrap .modal-body table.basic th{height: 72px;}
.modal .modal-wrap .modal-body table.basic td{height: 104px;}
.modal .modal-wrap .modal-body table.basic td.txt-left{height: 134px;}
.modal .modal-wrap .modal-body a,a:hover{color: #087ef7;}
.modal .modal-wrap .modal-body a:hover{text-decoration: underline;}

/* 회원가입완료 확인 모달 */
.modal.join-confirm .modal-wrap{width: 700px;}
.modal.join-confirm .modal-body{padding: 80px 0 104px; text-align: center;}
.modal.join-confirm .modal-body .modal-title{font-size: 28px;text-align: center; line-height: 1; font-weight: bold;color: #363c43;}
.modal.join-confirm .modal-body .confirm-msg{margin-top: 52px; font-size: 16px; line-height: 1.25; color: #363c43;font-weight: 400;}
.modal.join-confirm .modal-body .confirm-box{display: flex;align-items: center;justify-content: center;margin-top: 22px;width: 100%;height: 68px;background-color: #f4f5f5;}
.modal.join-confirm .modal-body .confirm-box .label{font-size: 16px;color: #363c43;font-weight: 700;}
.modal.join-confirm .modal-body .confirm-box .account{font-size: 16px;color: #087ef7;font-weight: 500;}
.modal.join-confirm .modal-body .btn-wrap{margin-top: 100px;}
.modal.join-confirm .modal-body .btn-wrap .btn-login{display: inline-flex;height: 56px;justify-content: center;align-items: center;padding: 0px 104px;border-radius: 12px;background-color: #087ef7;font-size: 20px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;text-align: center;color: #fff;text-decoration: none;}