.image-container {
    position: relative;
    width: 100%;
    height: 810px; /* 원하는 높이 */
    overflow: hidden;
}

.image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: main-image-zoom-out 5s ease-out both;
}

/* 영역 크기는 그대로 두고 이미지만 확대 상태에서 원래 배율로 축소한다. */
@keyframes main-image-zoom-out {
    from {
        transform: scale(1.15);
    }
    to {
        transform: scale(1);
    }
}

/* 이미지가 조금 어두워져 흰색 문구가 선명하게 보이도록 하는 반투명 오버레이 */
.image-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
}

.main-visual-text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    animation: main-text-rise 1.2s ease-out 0.45s both;
}

.main-visual-text.text-x-left {
    left: 8%;
    text-align: left;
    transform: translate(0, -50%);
    animation: none;
}

.main-visual-text.text-x-right {
    right: 8%;
    left: auto;
    text-align: right;
    transform: translate(0, -50%);
    animation: none;
}

.main-visual-text.text-y-top {
    top: 18%;
}

.main-visual-text.text-y-bottom {
    top: auto;
    bottom: 14%;
}

/* 문구가 아래에서 중앙으로 올라오면서 서서히 나타난다. */
@keyframes main-text-rise {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 50px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.main-visual-text h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: 600;
    letter-spacing: 0.12em;
}

.main-visual-text p {
    margin: 0 0;
    font-size: clamp(0.7rem, 1.3vw, 1.35rem);
    font-weight: 300;
    letter-spacing: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
    .image-container img,
    .main-visual-text {
        animation: none;
    }
}

/* ------------------------------- */
.middle{

    position: relative;
    display: flex;

    justify-content: center;
    align-items: center;
}

.middle .middle-header{
    margin : 60px 0px;

    position: relative;
    display: flex;

    justify-content: center;
    align-items: center;

}

.header-item {


    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;
    min-width: 280px;
    border-right: 1px solid silver;  /* 로그인과 회원가입 사이에 선 추가 */
}

/* 마지막 버튼에는 border-right 제거 */
.header-item:last-child {
    border-right: none; /* 마지막 항목에는 수직선 제거 */
}

.header-item h1, .header-item h4 {
    margin: 0;
    text-align: center; /* 중앙 정렬 */

}



.header-item i {
    color : black;
    font-size: 3em; /* 아이콘 크기 조정 */
    margin-bottom: 10px; /* 아이콘과 텍스트 사이 간격 */

}


.header-item:hover i {
    color:  #c75e5e;
}

.header-item a {
    display: inline-block;
    text-decoration: none;
    color : #585858;
    background-color: white;
    padding: 8px 15px;

    border: 1px solid silver; /* 각 항목 사이에 수직선 추가 */
}

.header-item:hover  a{
    color : white;
    background-color: #c75e5e;
    border: 1px solid #c75e5e; /* 각 항목 사이에 수직선 추가 */
}

@media (max-width: 900px) {
    .middle {
        width: 100%;
    }

    .middle .middle-header {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin: 34px 0;
        padding: 0 16px;
        align-items: stretch;
    }

    .header-item {
        min-width: 0;
        padding: 24px 10px;
        gap: 10px;
        border-right: 0;
        border-bottom: 1px solid #e5e1dc;
    }

    .header-item:nth-child(odd) {
        border-right: 1px solid #e5e1dc;
    }

    .header-item:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .header-item i {
        margin-bottom: 2px;
        font-size: 2em;
    }

    .header-item h1 {
        font-size: 19px;
    }

    .header-item h4 {
        min-height: 38px;
        font-size: 12px;
        line-height: 1.55;
        word-break: keep-all;
    }

    .header-item a {
        padding: 7px 12px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .middle .middle-header {
        padding: 0 10px;
    }

    .header-item {
        padding-inline: 6px;
    }

    .header-item h1 {
        font-size: 17px;
    }
}

/*---------------------------------------------------------*/

.middle-middle{
    padding: 10px 0;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),url("/img/main/woman.png"); /* 배경 이미지 설정 */
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: center center; /* 이미지 가운데 정렬 */
    background-size: cover; /* 배경 이미지가 섹션을 덮도록 설정 */
    background-attachment: fixed; /* 스크롤 시 배경 이미지 고정 */
    position: relative;

    justify-content: center;
    align-items: center;
}


.middle-middle h1 {
    font-size: 50px;
    text-align: center;
    color: white;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(50px); /* 아래에서 위로 올라오는 효과 */
    transition: opacity 0.5s ease-out, transform 1s ease-out;
}

/* 스크롤 시 보이는 상태 */
.middle-middle h1.show {
    opacity: 1;
    transform: translateY(0);
}

.middle-img {
    display: flex;
    flex-wrap: wrap; /* 줄 바꿈 */
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 수직 정렬 */
    gap: 24px;

    margin-bottom: 24px;
}

/* .image-item 클래스: 각 이미지 스타일 */
/* 초기 상태: 투명하고 아래에 위치 */
.image-item {
    position: relative;
    overflow: hidden;
    width: 630px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(50px); /* 아래에서 올라오도록 */
    transition: opacity 0.7s ease-out, transform 1s ease-out;
}

/* 스크롤 시 보이는 상태 */
.image-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* 이미지 스타일 */
.image-item img {
    width: 100%; /* 이미지가 컨테이너의 너비를 가득 채우도록 설정 */
    height: 100%; /* 이미지가 컨테이너의 높이를 가득 채우도록 설정 */
    object-fit: contain; /* 이미지 비율을 유지하며 영역을 채우도록 설정 */
    transition: transform 0.5s ease; /* 호버 시 확대 효과에 부드러운 전환 추가 */
}

/* 호버 시 이미지 확대 */
.image-item:hover img {
    transform: scale(1.2); /* 이미지를 1.2배 확대 */

}

/* 호버 시 배경의 높이와 위치 변경 */
.image-item:hover .overlay-background {
    height: 100%; /* 배경의 높이를 100px로 확대 */
    width: 190px;
}

/* 기본 상태에서 아래쪽 선 숨기기 */
.overlay-text::after {
    content: ''; /* 가상 요소의 내용을 비움 */
    position: absolute; /* 부모 요소에 대해 절대 위치 */
    bottom: 0; /* 부모 요소의 아래쪽에 위치 */
    left: 9%; /* 부모 요소의 왼쪽 기준 중앙으로 설정 */
    width: 0; /* 기본 상태에서는 선을 숨김 */
    height: 1px; /* 선의 두께를 1px로 설정 */
    background-color: white; /* 선의 색상을 흰색으로 설정 */
}

/* 호버 시 텍스트 오버레이 아래쪽 선 표시 */
.image-item:hover .overlay-text::after {
    width: 80%; /* 호버 시 선의 길이를 부모 요소 너비의 100%로 설정 */
}

/* 배경 색상 */
.overlay-background {
    position: absolute;
    top: 0; /* 이미지의 최상단에 배치 */
    left: 22px; /* 이미지의 좌측에 배치 */
    width: 85px; /* 이미지의 너비에 맞게 확장 */
    height: 85px; /* 이미지의 높이에 맞게 확장 */
    background-color: #c75e5e; /* 원하는 배경색 */
    opacity: 0.9; /* 배경의 투명도 */
    transition: transform 0.5s ease; /* 호버 시 확대 효과에 부드러운 전환 추가 */
    align-items: center;
}

.overlay-background.text-x-center {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

.overlay-background.text-x-right {
    text-align: right;
    right: 22px;
    left: auto;
}

.overlay-background.text-y-center {
    top: 50%;
    transform: translateY(-50%);
}

.overlay-background.text-x-center.text-y-center {
    transform: translate(-50%, -50%);
}

.overlay-background.text-y-bottom {
    top: auto;
    bottom: 0;
}

.overlay-text,
.overlay-text-h,
.overlay-text-a {
    white-space: pre-line;
}

/* 텍스트 오버레이 */
.overlay-text {
    left: 10%; /* 이미지 왼쪽에서 약간 떨어져서 배치 */
    transform: translate(0, 0); /* 중앙 정렬 대신 좌측 상단에 배치 */
    color: white; /* 텍스트 색상 */
    font-size: 25px; /* 텍스트 크기 */
    font-weight: bold; /* 텍스트 두껍게 */
    padding: 10px 20px; /* 텍스트 주변에 여백 추가 */
}

/* 텍스트 오버레이 - h */
.overlay-text-h {
    padding: 10px 20px; /* 텍스트 주변에 여백 추가 */
    opacity: 0; /* 기본 상태에서 숨김 */

    font-weight: bold;
    color:white;
}

/* 텍스트 오버레이 - a */
.overlay-text-a {
    padding: 0px 20px; /* 텍스트 주변에 여백 추가 */
    opacity: 0; /* 기본 상태에서 숨김 */
    margin-bottom: 50px;

    color:white;
}

/* 호버 시 텍스트 오버레이 보이기 */
.image-item:hover .overlay-text-h,
.image-item:hover .overlay-text-a {
    opacity: 1; /* 호버 시 보이도록 설정 */
}


.overlay-background a{
    margin: 0 20px;
    padding: 10px 15px; /* 텍스트 주변에 여백 추가 */
    text-decoration: none;
    color : white;
    border: 1px solid white; /* 각 항목 사이에 수직선 추가 */
}

.overlay-background a:hover{
    color: #c75e5e;
    background-color: white;
}

/*---------------------------------------------------------*/
.mb{
    position: relative;


    justify-content: center;
    align-items: center;

    padding: 72px 0;
    width: 100%;
    background-color: #eeeef1;

}


.mb h1{
    text-align: center; /* 중앙 정렬 */
    font-size: 50px;
    margin-bottom: 50px;
}

.about-small-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

.about-small-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 24px 28px;
    border: 1px solid rgba(58, 55, 51, 0.08);
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 30px rgba(45, 42, 38, 0.07);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-small-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 50%;
    color: #c75e5e;
    background-color: transparent;
    font-size: 36px;
}

.about-small-card h2 {
    margin: 0 0 8px;
    color: #302e2b;
    font-size: 22px;
    font-weight: 600;
}

.about-small-highlight {
    color: #c75e5e;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

.about-small-card p {
    margin: 0;
    color: #6b6863;
    font-size: 15px;
    line-height: 1.7;
    word-break: keep-all;
}

.about-small-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(45, 42, 38, 0.12);
}

@media (max-width: 900px) {
    .about-small-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .mb {
        padding: 52px 0;
    }

    .about-small-grid {
        grid-template-columns: 1fr;
        width: calc(100% - 32px);
    }
}

.mbimg-container {
    display: flex;
    width: 100%;
    height: 800px;
}

.overlayimg-item {
    flex: 1;
    position: relative;
    transition: width 0.5s ease, flex 0.5s ease;
    overflow: hidden;
    cursor: pointer;
}

/*About People*/
/*Active 아닐 때 타이틀 보이게*/
/*---------------------------------------------------------*/
.overlayimg-item .title-overlay{
    position: absolute; /* 위치를 절대값으로 설정 */
    top: 5%; /* 원하는 위치로 설정 */
    left: 10%; /* 원하는 위치로 설정 */
    color: black;
    font-size: 35px;
    opacity: 0.8; /* 기본적으로 보이게 설정 */
    transition: opacity 0.2s ease;
    writing-mode: vertical-rl; /* 글자를 수직으로 배치 */
    letter-spacing: 5px; /* 글자 간격 조정 */
}

.overlayimg-item:not(.active) .title-overlay {
    opacity: 0.8; /* 활성화되지 않았을 때 보이게 설정 */
}

.overlayimg-item.active .title-overlay {
    opacity: 0; /* 활성화되었을 때 안 보이게 설정 */
}
/*---------------------------------------------------------*/

.overlayimg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}



/*-- active 상태가 아닐 때는 어두움 --*/
.overlayimg-item:not(.active) img {
    filter: grayscale(80%);
}

/* 얇고 촘촘한 다이아몬드 패턴 추가 */
.overlayimg-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.1) 0,
            rgba(0, 0, 0, 0.1) 2.5px,
            transparent 2.5px,
            transparent 5px
    ), repeating-linear-gradient(
            -45deg,
            rgba(0, 0, 0, 0.1) 0,
            rgba(0, 0, 0, 0.1) 2.5px,
            transparent 2.5px,
            transparent 5px
    );
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1; /* 패턴이 이미지 위에 오도록 설정 */
}
.overlayimg-item:not(.active)::before {
    opacity: 0.5; /* 패턴 오버레이의 불투명도 조절 */
}
/*---------------------------------------------------*/

.overlayimg-item .background-overlay1{
    position: absolute;
    top: 4%;
    left: 68%;

    width: 300px; /* 이미지의 너비에 맞게 확장 */
    height: 255px; /* 이미지의 높이에 맞게 확장 */
    background-color: #c75e5e; /* 원하는 배경색 */
    opacity: 0; /* 배경의 투명도 */
    transition: transform 0.5s ease, filter 0.5s ease;; /* 호버 시 확대 효과에 부드러운 전환 추가 */
    align-items: center;
}

.overlayimg-item.active .background-overlay1 {
    opacity: 0.95;
}

.overlayimg-item .background-overlay2{
    position: absolute;
    top: 58%;
    left: 4%;

    width: 300px; /* 이미지의 너비에 맞게 확장 */
    height: 255px; /* 이미지의 높이에 맞게 확장 */
    background-color: #333333; /* 원하는 배경색 */
    opacity: 0; /* 배경의 투명도 */
    transition: transform 0.5s ease; /* 호버 시 확대 효과에 부드러운 전환 추가 */
    align-items: center;
}

.overlayimg-item.active .background-overlay2 {
    opacity: 0.95;
}

.overlayimg-item .background-overlay3{
    position: absolute;
    top: 4%;
    left: 4%;

    width: 300px; /* 이미지의 너비에 맞게 확장 */
    height: 255px; /* 이미지의 높이에 맞게 확장 */
    background-color: #adadad; /* 원하는 배경색 */
    opacity: 0; /* 배경의 투명도 */
    transition: transform 0.5s ease; /* 호버 시 확대 효과에 부드러운 전환 추가 */
    align-items: center;
}

.overlayimg-item.active .background-overlay3 {
    opacity: 0.95;
}

/*text-overlay*/
/*---------------------------------------------------------*/
.overlayimg-item .text-overlay {
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    align-items: center;
    text-align: center;
    padding: 50px 20px;

}

.text-overlay h5{
    padding: 10px 0;
    font-size: 18px;
}

.text-overlay h6{
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 20px;
}

.text-overlay a{
    color: white;
    font-weight: inherit;
    text-decoration: none;
    font-size: 15px;
    padding: 10px 15px; /* 텍스트 주변에 여백 추가 */
    border: 1px solid white; /* 각 항목 사이에 수직선 추가 */
    pointer-events: auto; /* 링크는 클릭 가능하도록 설정 */
}

.text-overlay a:hover{
    color: #333333;
    background-color: white;
}

.overlayimg-item.active .text-overlay {
    opacity: 1;
}

.overlayimg-item.active {
    flex: 5;
    cursor: default;
}
/*---------------------------------------------------------*/


.overlayimg-item.active img {
    transform: scale(1.1);
}

.mbimg-container .overlayimg-item:not(.active) {
    flex: 0.7;
}


.text-overlay a:hover{
    color: black;
}


/*-- main-bottom --*/
/*----------------------------------------------*/