hmw1001
113 lines
3.2 KiB
CSS
113 lines
3.2 KiB
CSS
/* --- 문의하기 팝업(모달) 스타일 --- */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999; /* 💡 [핵심 수정] z-index 값을 매우 높게 설정 */
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #fff;
|
|
padding: 40px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
|
|
width: 90%;
|
|
max-width: 960px; /* 팝업 최대 너비 */
|
|
max-height: 90vh; /* 팝업 최대 높이 */
|
|
overflow-y: auto; /* 내용이 길면 스크롤 */
|
|
position: relative;
|
|
transform: scale(0.9);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.modal-overlay.active .modal-content {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 20px;
|
|
background: none;
|
|
border: none;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #888;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: #333;
|
|
}
|
|
|
|
/* --- 문의 폼 메시지 영역 --- */
|
|
.form-message-area {
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
display: none; /* 평소에는 숨김 */
|
|
text-align: center;
|
|
}
|
|
.form-message-area.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
display: block;
|
|
}
|
|
.form-message-area.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
display: block;
|
|
}
|
|
|
|
/* --- 컨텐츠 내부 스타일 (기존 CSS에서 가져옴) --- */
|
|
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
|
|
.contact-info h3, .contact-form h3 { font-size: 28px; font-weight: 900; color: #2c3e50; margin-bottom: 32px; }
|
|
.info-item { margin-bottom: 24px; }
|
|
.info-item strong { display: block; font-size: 16px; font-weight: 700; color: #34495e; margin-bottom: 4px; }
|
|
.info-item p { font-size: 18px; color: #333; }
|
|
.contact-form input, .contact-form textarea { width: 100%; padding: 16px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 16px; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; }
|
|
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #2c3e50; box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1); }
|
|
.contact-form .cta-button { width: 100%; font-size: 16px; cursor: pointer; background-color: #2c3e50; color: #ffffff; border: 2px solid #2c3e50; padding: 16px 32px; border-radius: 8px; font-weight: 700; transition: all 0.3s ease; }
|
|
.contact-form .cta-button:hover { background-color: #34495e; border-color: #34495e; color: #ffffff; }
|
|
|
|
/* 반응형 스타일 */
|
|
@media (max-width: 992px) {
|
|
.contact-wrapper {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.contact-wrapper {
|
|
padding: 0;
|
|
gap: 30px;
|
|
}
|
|
.modal-content {
|
|
padding: 20px;
|
|
width: 95%;
|
|
}
|
|
.contact-info h3, .contact-form h3 {
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|