/* ==========================================================================
   Section 07
   ========================================================================== */

.section07 {
    width: 100%;
    height: 800px;

    overflow: hidden;

    display: flex;

    justify-content: flex-start;
    align-items: stretch;

    box-sizing: border-box;
}


/* ==========================================================================
   시공 항목 박스
   PC : 5개 가로 배치
   ========================================================================== */

.construction-box {
    position: relative;

    flex: 1 1 0;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    border-right: 3px solid #D8D8D8;

    display: flex;

    flex-direction: column;

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

    gap: 24px;

    box-sizing: border-box;
}

.construction-img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    /* 이미지 확대 시 영역 밖 차단 */
    z-index: 1;
    isolation: isolate;
    /* 크롬/사파리 마스크 뚫림 방지 */
    transform: translateZ(0);
}



/* 마지막 박스 오른쪽 테두리 제거 */

.construction-box:last-child {
    border-right: none;
}


/* ==========================================================================
   배경 이미지
   ========================================================================== */

.construction-box img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

    filter: brightness(0.4) blur(4px);

    transform: scale(1);

    transition:
        filter 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);

    will-change: filter, transform;
}


/* ==========================================================================
   호버
   ========================================================================== */

.construction-box:hover img {
    filter: brightness(0.9) blur(0);

    transform: scale(1.08);
}


/* ==========================================================================
   아이콘 / 텍스트
   ========================================================================== */

.construction-icon-box,
.construction-text01,
.construction-text02 {
    position: relative;

    z-index: 2;

    transition:
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   아이콘 원형
   ========================================================================== */

.construction-icon-box {
    width: 120px;
    height: 120px;

    flex-shrink: 0;

    position: relative;

    overflow: hidden;

    border-radius: 50%;

    outline: 3px solid #FFFFFF;

    outline-offset: -3px;

    box-sizing: border-box;
}


.construction-icon {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 80px;
    height: 80px;

    transform: translate(-50%, -50%);

    display: flex;

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


.icon-box {
    width: 80px;
    height: 80px;

    display: flex;

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


.icon-box svg {
    width: 70px;
    height: 70px;

    max-width: 100%;
    max-height: 100%;
}


/* ==========================================================================
   제목
   ========================================================================== */

.construction-text01 {
    width: 100%;

    padding: 0 15px;

    text-align: center;

    color: #FFFFFF;

    font-size: clamp(1.25rem, 1.67vw, 2rem);

    font-family: "Noto Sans KR", sans-serif;

    font-weight: 700;

    line-height: 1.4;

    word-break: keep-all;

    box-sizing: border-box;
}


/* ==========================================================================
   설명
   ========================================================================== */

.construction-text02 {
    width: 100%;

    padding: 0 15px;

    text-align: center;

    color: #FFFFFF;

    font-size: clamp(0.75rem, 0.83vw, 1rem);

    font-family: "Noto Sans KR", sans-serif;

    font-weight: 400;

    line-height: 1.875;

    word-break: keep-all;

    box-sizing: border-box;
}


/* ==========================================================================
   대형 PC
   ========================================================================== */

@media (min-width: 1441px) {

    .section07 {
        height: 800px;
    }


    .construction-box {
        gap: 24px;
    }


    .construction-icon-box {
        width: 120px;
        height: 120px;
    }


    .construction-icon {
        width: 80px;
        height: 80px;
    }


    .construction-text01 {
        font-size: 32px;
    }


    .construction-text02 {
        font-size: 16px;

        line-height: 30px;
    }
}


/* ==========================================================================
   태블릿 / 중간 해상도

   5개를 그대로 가로 배치하면 각 영역이 너무 좁아지므로
   가로 스크롤 없이 자동 줄바꿈
   ========================================================================== */

@media (max-width: 1200px) {

    .section07 {
        height: auto;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        overflow: hidden;
    }


    .construction-box {
        width: 100%;

        min-height: 500px;

        border-right: 1px solid #D8D8D8;

        border-bottom: 1px solid #D8D8D8;
    }


    .construction-box:nth-child(3n) {
        border-right: none;
    }
}


/* ==========================================================================
   태블릿

   2개씩 배치
   ========================================================================== */

@media (max-width: 900px) {

    .section07 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .construction-box {
        min-height: 450px;

        border-right: 1px solid #D8D8D8;
    }


    .construction-box:nth-child(3n) {
        border-right: 1px solid #D8D8D8;
    }


    .construction-box:nth-child(2n) {
        border-right: none;
    }


    .construction-icon-box {
        width: clamp(90px, 12vw, 110px);

        height: clamp(90px, 12vw, 110px);
    }


    .construction-icon {
        width: clamp(60px, 8vw, 75px);

        height: clamp(60px, 8vw, 75px);
    }


    .icon-box {
        width: 100%;
        height: 100%;
    }


    .icon-box svg {
        width: clamp(55px, 7vw, 65px);

        height: clamp(55px, 7vw, 65px);
    }
}


/* ==========================================================================
   모바일

   1개씩 세로 배치
   ========================================================================== */

@media (max-width: 767px) {

    .section07 {
        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;
    }


    .construction-box {
        width: 100%;

        height: clamp(380px, 110vw, 520px);

        min-height: 0;

        flex: none;

        gap: clamp(0.875rem, 3vw, 1.5rem);

        border-right: none;

        border-bottom: 1px solid #D8D8D8;
    }


    .construction-box:last-child {
        border-bottom: none;
    }


    /*
       모바일에서는 hover가 없으므로
       기본 이미지 상태를 조금 더 선명하게 유지
    */

    .construction-box img {
        filter: brightness(0.5) blur(1px);

        transform: scale(1.02);
    }


    .construction-box:hover img {
        filter: brightness(0.7) blur(0);

        transform: scale(1.04);
    }


    .construction-icon-box {
        width: clamp(80px, 22vw, 110px);

        height: clamp(80px, 22vw, 110px);
    }


    .construction-icon {
        width: clamp(55px, 16vw, 75px);

        height: clamp(55px, 16vw, 75px);
    }


    .icon-box {
        width: 100%;
        height: 100%;
    }


    .icon-box svg {
        width: clamp(50px, 14vw, 65px);

        height: clamp(50px, 14vw, 65px);
    }


    .construction-text01 {
        padding-left: 20px;
        padding-right: 20px;

        font-size:
            clamp(1.3rem, 6vw, 2rem);

        line-height: 1.4;
    }


    .construction-text02 {
        padding-left: 20px;
        padding-right: 20px;

        font-size:
            clamp(0.8rem, 3.5vw, 1rem);

        line-height: 1.7;
    }
}


/* ==========================================================================
   작은 모바일
   ========================================================================== */

@media (max-width: 480px) {

    .construction-box {
        height: 400px;

        gap: 14px;
    }


    .construction-icon-box {
        width: 80px;
        height: 80px;
    }


    .construction-icon {
        width: 55px;
        height: 55px;
    }


    .icon-box svg {
        width: 50px;
        height: 50px;
    }


    .construction-text01 {
        font-size: 21px;
    }


    .construction-text02 {
        padding-left: 15px;
        padding-right: 15px;

        font-size: 13px;

        line-height: 1.7;
    }
}