hmw1001
150 lines
3.1 KiB
CSS
150 lines
3.1 KiB
CSS
/*
|
|
* greeting 정보형 페이지 전용 스타일
|
|
*/
|
|
.sub-page-container {
|
|
padding-top: 0px; !important;
|
|
padding-bottom: 80px;
|
|
background: #fff;
|
|
min-height: 500px;
|
|
}
|
|
.container {
|
|
/* max-width: 1200px; !important; */ /* 💡 [수정] 고정 너비 제거 */
|
|
width: 90%; !important;/* 💡 [추가] 화면 너비의 90% 사용 (좌우 5% 여백) */
|
|
max-width: 1600px; /* 💡 [추가] 너무 넓어지는 것 방지 (선택 사항) */
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
.info-page-container {
|
|
background-color: #fff;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* 페이지 헤더 */
|
|
.info-page-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.info-page-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 900;
|
|
color: #222;
|
|
line-height: 1.3;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.info-page-subtitle {
|
|
font-size: 1.3rem;
|
|
color: #555;
|
|
}
|
|
|
|
/* =====================================================
|
|
🔥 [수정 핵심]
|
|
이미지 | (한글 위 / 영어 아래) 2컬럼 구성
|
|
기존 flex → grid 로 변경
|
|
===================================================== */
|
|
.greeting-content-wrapper {
|
|
display: grid; /* [변경] */
|
|
grid-template-columns: 250px 1fr; /* 이미지 | 텍스트 */
|
|
column-gap: 40px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* 대표 이미지 */
|
|
.greeting-figure {
|
|
flex: 0 0 250px; /* [유지] */
|
|
margin: 0;
|
|
grid-row: 1 / 3; /* 🔥 한글+영문 전체 높이 차지 */
|
|
}
|
|
|
|
.greeting-image {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* =====================================================
|
|
🔥 [수정 핵심]
|
|
오른쪽 컬럼 내부 정렬
|
|
===================================================== */
|
|
.prose {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
color: #333;
|
|
}
|
|
|
|
/* 한글 콘텐츠 */
|
|
.greeting-content-wrapper .prose:first-of-type {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
/* 영문 콘텐츠 */
|
|
.greeting-content-wrapper .prose:last-of-type {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
|
|
/* 제목 스타일 */
|
|
.prose h3 {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: #0056b3;
|
|
margin-top: 20px;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #f0f0f0;
|
|
}
|
|
|
|
.prose h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.prose h3 .fas {
|
|
margin-right: 10px;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.prose p {
|
|
margin-bottom: 1.5em;
|
|
color: #555;
|
|
}
|
|
|
|
.prose strong {
|
|
color: #000000;
|
|
}
|
|
|
|
/* =====================================================
|
|
📱 모바일 대응 (기존 유지 + grid 대응 추가)
|
|
===================================================== */
|
|
/* PC 전용 - 모바일 반응형 제거 */
|
|
|
|
/* PC 전용 - 모바일 반응형 제거 */
|
|
|
|
/*
|
|
* 3단 레이아웃 스타일 (기존 코드 유지)
|
|
*/
|
|
.three-column-layout {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.layout-sidebar-left {
|
|
flex: 0 0 240px;
|
|
}
|
|
|
|
.layout-main-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.layout-sidebar-right {
|
|
flex: 0 0 240px;
|
|
}
|
|
|
|
/* PC 전용 - 모바일 반응형 제거 */
|