/* AI 융합교실 및 전시기획 - 실제 시공사례 섹션 스타일 */

/* 공통 섹션 스타일 - PC */
.sections {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
    gap: 30px;
}

/* 홀수 섹션 (텍스트 왼쪽, 이미지 오른쪽) */
.sections.sec-1,
.sections.sec-3,
.sections.sec-5 {
    flex-direction: row;
}

/* 짝수 섹션 (이미지 왼쪽, 텍스트 오른쪽) */
.sections.sec-2,
.sections.sec-4 {
    flex-direction: row;
}

/* 텍스트 박스 */
.sections .txt_box {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
}

/* 이미지 박스 */
.sections .max_img {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
}

/* 모바일 간격 숨김 */
.sections .pad_10.c_show {
    display: none;
}

/* 버튼 Wrapper */
.btn-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

/* 다운로드 버튼 스타일 개선 */
.download_ai {
    flex: 1;
    min-width: 0;
    max-width: 50%;
    display: inline-block;
    /* padding: 10px 20px; */
    margin: 0;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.download_ai:hover {
    background-color: #2a8fc8;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 반응형 - 태블릿 */
@media only screen and (max-width: 992px) {
    .sections {
        flex-direction: column !important;
        max-width: 100%;
        padding: 0 15px;
        gap: 20px;
    }

    .sections .txt_box,
    .sections .max_img {
        /* flex: 0 0 100%; */
        max-width: 100%;
    }

    .sections .pad_10.c_show {
        display: block;
    }

    /* 모바일에서 모든 섹션 순서를 텍스트 -> 이미지로 통일 */
    .sections.sec-1 .txt_box,
    .sections.sec-3 .txt_box,
    .sections.sec-5 .txt_box {
        order: 1;
    }

    .sections.sec-1 .max_img,
    .sections.sec-3 .max_img,
    .sections.sec-5 .max_img {
        order: 2;
    }

    .sections.sec-2 .txt_box,
    .sections.sec-4 .txt_box {
        order: 1;
    }

    .sections.sec-2 .max_img,
    .sections.sec-4 .max_img {
        order: 2;
    }

    .sections .pad_10.c_show {
        order: 1.5;
    }
}

/* 반응형 - 모바일 */
@media only screen and (max-width: 768px) {
    .sections {
        padding: 0 10px;
        gap: 15px;
    }

    .btn-wrapper {
        /* flex-direction: column; */
        gap: 10px;
    }

    .download_ai {
        min-width: 50%;
        width: 50%;
    }
}