을 대체하는 한 줄(항목)
* * [핵심]
* 1. display: flex -> 자식 요소(ko, en)들을 가로로 나열
* 2. align-items: center -> 자식 요소들을 수직 중앙 정렬
*/
.service-item {
display: flex;
align-items: center; /* 수직 중앙 정렬 (table의 vertical-align: middle 역할) */
border-bottom: 1px solid #eaeaea;
}
.service-list .service-item:last-child {
border-bottom: none;
}
/* * service-name-ko, service-name-en: | 를 대체하는 각 셀
* * [핵심]
* 1. flex-basis: 40% / 60% -> 4:6 비율로 너비를 차지
* 2. box-sizing: border-box -> padding을 너비에 포함시켜 계산
*/
.service-name-ko,
.service-name-en {
padding: 20px 20px;
box-sizing: border-box; /* 패딩을 포함해 너비를 계산합니다. */
}
.service-name-ko {
flex-basis: 40%; /* 40% 너비를 가짐 */
flex-shrink: 0; /* 화면이 줄어도 40%를 유지하려 함 (모바일 전) */
color: #333;
}
.service-name-en {
flex-basis: 60%; /* 60% 너비를 가짐 */
text-align: left;
}
/* 섹션 헤더 스타일 */
.service-section-header .service-name-ko,
.service-section-header .service-name-en {
font-size: 1.2em;
font-weight: 600;
color: #000;
}
/* 섹션 구분선 */
.section-divider {
border-bottom: 2px solid #d0d0d0;
}
/* ------------------------------------- */
/* == 반응형 디자인 (Media Query) == */
/* ------------------------------------- */
@media (max-width: 600px) {
/* * [핵심]
* 1. flex-direction: column -> 가로 정렬(row)을 세로 정렬(column)로 변경
* 2. align-items: flex-start -> 세로로 쌓일 때 왼쪽 정렬
*/
.service-item {
flex-direction: column; /* 세로로 쌓기 */
align-items: flex-start; /* 왼쪽 정렬 */
}
/* * [핵심]
* 1. flex-basis: auto -> 40%/60% 비율 해제
* 2. width: 100% -> 부모 너비에 꽉 채우기
*/
.service-name-ko,
.service-name-en {
flex-basis: auto; /* 너비 비율 해제 */
width: 100%; /* 꽉 찬 너비 */
}
/* 쌓였을 때 위아래 여백 조절 */
.service-name-ko {
padding-bottom: 4px; /* 한글 아래 여백 추가 */
font-weight: 500;
}
.service-name-en {
padding-top: 0; /* 영어 위 여백 제거 */
color: #555;
}
/* 섹션 헤더도 동일하게 여백 조절 */
.service-section-header .service-name-ko {
padding-bottom: 5px;
font-weight: 600; /* 헤더는 원래 굵기 유지 */
}
.service-section-header .service-name-en {
padding-top: 0;
}
}
.timeline-container {
max-width: 900px;
margin: 30px auto;
}
/*
* .timeline-item (각 항목)
* - display: flex: 자식 요소(.timeline-left, .timeline-right)를
* 가로로 나열합니다.
*/
.timeline-item {
display: flex;
}
/*
* .timeline-left (그래픽 영역: 선, 점, 화살표)
* - flex-basis: 50px: 너비를 50px로 고정합니다.
* - flex-shrink: 0: 화면이 줄어도 50px보다 좁아지지 않습니다.
* - position: relative: 자식/가상 요소(선, 점)의 기준점이 됩니다.
*/
.timeline-left {
flex-basis: 50px;
flex-shrink: 0;
position: relative;
}
/*
* .timeline-left::before (세로 선)
* - .timeline-left 영역에 세로로 꽉 차는 선을 그립니다.
*/
.timeline-left::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%; /* 부모 너비의 50% 지점 */
width: 2px;
background-color: #000;
transform: translateX(-50%); /* 정확히 중앙에 오도록 보정 */
z-index: 1;
}
/*
* .timeline-marker (점 / 화살표)
* - z-index: 2: 선(z-index: 1)보다 위에 보이도록 합니다.
*/
.timeline-marker {
position: relative;
z-index: 2;
width: 12px;
height: 12px;
background-color: #000;
border-radius: 50%;
/* * left: 50%, margin-left: -6px로 중앙 정렬.
* (transform을 써도 됩니다)
*/
left: 50%;
margin-left: -6px; /* width의 절반만큼 왼쪽으로 당김 */
margin-top: 10px; /* 제목과 수직 위치를 맞추기 위한 상단 여백 */
}
/*
* [핵심] 첫 번째 아이템의 선은 '점'에서부터 시작하도록
*/
.timeline-item:first-child .timeline-left::before {
top: 10px; /* .timeline-marker의 margin-top과 동일하게 */
}
/*
* [핵심] 마지막 아이템의 선은 '점'까지만 이어지도록
*/
.timeline-item:last-child .timeline-left::before {
height: 20px; /* .timeline-marker가 끝나는 지점까지 */
bottom: auto;
}
/*
* [핵심] 마지막 아이템의 마커는 '화살표'로 변경
*/
.timeline-item:last-child .timeline-marker {
background-color: transparent; /* 원 모양 숨기기 */
border-radius: 0;
/* CSS로 삼각형(화살표) 만들기 */
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 12px solid #000;
margin-left: -7px; /* border-left/right 값만큼 당김 */
}
/*
* .timeline-right (콘텐츠 영역)
* - flex: 1: .timeline-left(50px)를 제외한 나머지 너비를
* 모두 차지합니다. (이것이 반응형의 핵심)
*/
.timeline-right {
flex: 1;
padding-bottom: 30px; /* 항목 간의 세로 간격 */
padding-left: 10px;
}
.timeline-title {
font-size: 1.1em;
font-weight: 600;
color: #000;
margin-top: 8px; /* 마커와 높이를 맞추기 위함 */
}
.timeline-description {
font-size: 1em;
color: #333;
margin-top: 8px;
line-height: 2.5;
}
/*
* 반응형 처리
* - 600px 이하에서는 폰트와 패딩을 미세하게 조절합니다.
*/
@media (max-width: 600px) {
.timeline-title {
font-size: 1rem;
}
.timeline-description {
font-size: 0.9rem;
}
.timeline-right {
padding-left: 5px;
}
}
/* ------------------------------------- */
/* == 장비 목록 (Gear List) 스타일 == */
/* ------------------------------------- */
/* 장비 목록 전체 컨테이너 */
.gear-list-wrapper {
max-width: 900px;
margin: 20px auto;
background-color: transparent;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
overflow: hidden;
}
/* 목록 내부 */
.gear-list {
/* 특별한 스타일 없음 */
}
/*
* .gear-item: 장비 항목 한 줄 (Flexbox 컨테이너)
*/
.gear-item {
display: flex;
align-items: flex-start;
border-bottom: 1px solid #eaeaea; /* 얇은 회색 선 */
padding: 16px 20px;
}
.gear-list .gear-item:last-child {
border-bottom: none;
}
/*
* .gear-category (왼쪽 열 - 카테고리)
*/
.gear-category {
flex-basis: 35%; /* 너비 35% */
flex-shrink: 0;
color: #fff;
font-weight: 500;
padding-right: 15px;
box-sizing: border-box;
}
/*
* .gear-details (오른쪽 열 - 상세 내역)
*/
.gear-details {
flex-basis: 65%; /* 너비 65% */
color: #C3C3C3;
line-height: 1.5;
}
/* ------------------------------------- */
/* == 반응형 디자인 (Media Query) == */
/* ------------------------------------- */
@media (max-width: 600px) {
/* 세로로 쌓기 */
.gear-item {
flex-direction: column;
align-items: flex-start;
padding: 16px 20px;
}
/* 너비 비율 해제 및 100% 사용 */
.gear-category,
.gear-details {
flex-basis: auto;
width: 100%;
}
/* 쌓였을 때 위아래 여백 조절 */
.gear-category {
padding-right: 0;
padding-bottom: 8px;
font-weight: 600;
}
.gear-details {
padding-top: 0;
color: #555;
}
}
.sub-visual-area {
width: 100%;
height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-top: var(--header-height);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.sub-visual-area.sub-about-us {
background-image: url('/assets/images/sub-visual-about.png');
}
.sub-visual-area.sub-technology {
background-image: url('/assets/images/sub-visual-technology.png');
}
.sub-visual-area.sub-visual-customer {
background-image: url('/assets/images/sub-visual-customer.png');
}
.sub-visual-area.sub-visual-employment {
background-image: url('/assets/images/sub-visual-employment.png');
}
.sub-visual-area.sub-visual-service {
background-image: url('/assets2024/images/sub/sub-visual-service.png');
}
.sub-visual-area .sub-title {
font-size: 60px;
font-weight: 500;
color: #fff;
margin: 0;
margin-top: 0px;
text-align: center;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border:0px solid yellow;
text-transform:uppercase;
letter-spacing:0.2em;
}
@media (max-width: 768px) {
.sub-visual-area {
height: 230px;
background-size: cover;
background-position: center center;
padding-top: 0;
border:0px solid yellow;
}
.sub-visual-area .sub-title {
margin-top:30px;
font-size: 30px;
line-height: 1.3;
}
}
|