@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

.system {
    text-align: right;
    font-size: 13px;
    color: #A6C367; /* 첫 번째 줄:  */
    font-weight: bold;
    margin-top: 80px;
}



/* 전체 페이지 여백 추가 */
body {
    margin: 0;
    padding: 0;
    margin-top: 0;
    font-family: Arial, sans-serif; /* 폰트 설정 */
}

main {
    max-width: auto; /* 전체 컨테이너 너비 제한 */
    margin: 0 0; /* 컨테이너를 화면 중앙으로 정렬 */
    padding: 20px; /* 내부 여백 */
}

.Project {
    margin-top: 0px;
}
/* 제목에 여백 추가 */
.Project_main {
    margin-top: 0px; /* 제목 위로 여백 추가 */
    margin-bottom: 0px;
    padding-left: 20px;
    text-align: left; /* 제목 가운데 정렬 */
    display: flex; /* flexbox로 레이아웃 구성 */
    justify-content: space-between; /* 왼쪽과 오른쪽에 배치 */
    align-items: center; /* 수평 중앙 정렬 */
}

.custom-line {
    border-top: 1px solid #A6C367; /* 선의 두께와 색상 */
    width: 100%;               /* 선의 길이 */
    margin: 20px 0;            /* 위아래 여백 */
}

/* 이미지와 텍스트를 나란히 배치 */
.image-container {
    display: flex;
    gap: 20px;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    padding: 20px;
}

/* 텍스트와 이미지가 나뉘어 있는 레이아웃 */
.image-description {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
}

/* 왼쪽 이미지 영역 */
.image-section {
    flex: 0 0 auto; /* 이미지 크기 고정 */
}

/* 오른쪽 텍스트 영역 */
.text-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 30px;
    max-width: 600px; /* 텍스트 영역 너비 제한 */
}

/* 이미지는 왼쪽에 배치 */
.image-section img {
    padding-left: 0px;
    margin-left: 40px;
    width: 500px; /* 이미지 크기 설정 */
    height: 270px;
    /*object-fit: cover; /* 이미지 비율을 유지하면서 크기에 맞춤 */

    border-radius: 8px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
    /*box-shadow: none;*/
}

/* 맨 아래 독립적인 이미지 */
.image-section2 {
  margin-top: 40px;
  display: flex;
  justify-content: center; /* 이미지 중앙 정렬 */
  align-items: center;
}

.image-section2 img {
  padding-left: 40px;
  width: 1100px; /* 이미지 크기 설정 */
  height: 170px;
  object-fit: cover;
  
}


/* 설명 텍스트 스타일 */
.description {
    font-size: 16px;
    margin: 5px 0;
    color: #333;
    text-align: left;

    line-height: 1.8; /* 줄 간격 설정 */
    /*letter-spacing: 1px; /* 글자 간격 설정 */
    /*word-spacing: 3px; /* 단어 간격 설정 */
    margin-left: 50px;
    margin-bottom: 15px; /* 텍스트 블록 아래 여백 */

}

/* 각 줄마다 다른 스타일을 적용 */
.description:nth-of-type(1) {
    font-size: 13px;
    color: #262626; /* 첫 번째 줄:  */
    font-weight: bold;
}

.description:nth-of-type(2) {
    font-size: 23px;
    font-weight: 550;
    color: #3c3b3b; /* 두 번째 줄: */
    font-weight: bold;

}

.description:nth-of-type(3) {
    font-size: 20px;
    color: #ea4d4d; /* 세 번째 줄: */
    font-weight: bold;

}

.description:nth-of-type(4) {
    font-size: 10px;
    color:#333;
}