/* 메인 레이아웃 래퍼 */
.main-layout-wrapper {
    width: 100%;
    overflow: hidden;
}

/* 레이아웃 CSS */
.flex_container {
    width: 100%;
    display: flex;
    gap: 20px; /* 좌우 간격 */
    margin-bottom: 20px; /* 섹션 간 간격 */
}

.flex_box {
    box-sizing: border-box;
}

.flex_box_l {
    width: 30%;
}

.flex_box_r {
    width: 70%;
}

.flex_box_l1 {
    width: 70%;
}

.flex_box_r1 {
    width: 30%;
}

.flex_box_full {
    width: 100%;
    margin-bottom: 20px;
}

/* 마지막 요소의 하단 여백 제거 */
.flex_container:last-child,
.flex_box_full:last-child,
.main-layout-wrapper > *:last-child {
    margin-bottom: 0 !important;
}

/* 메인 컨테이너 하단 여백 제거 */
#rb_container {
    padding-bottom: 0 !important;
}

/* 모바일 반응형 */
@media all and (max-width: 1024px) {
    .flex_container {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }
    
    /* 모바일에서 순서 변경 */
    .flex_container:first-child .flex_box_l {
        order: 2;
    }
    
    .flex_container:first-child .flex_box_r {
        order: 1;
    }
    
    .flex_box_l,
    .flex_box_r,
    .flex_box_l1,
    .flex_box_r1 {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* 각 컨테이너 내 마지막 박스의 여백 제거 */
    .flex_container .flex_box:last-child {
        margin-bottom: 0;
    }
    
    .flex_box_full {
        margin-bottom: 20px;
    }
    
    /* 전체 마지막 요소 여백 제거 */
    .main-layout-wrapper > *:last-child,
    .main-layout-wrapper > *:last-child .flex_box:last-child {
        margin-bottom: 0 !important;
    }
}

/* 모바일 작은 화면 */
@media all and (max-width: 768px) {
    .flex_container {
        gap: 0;
    }
    
    .flex_box_l,
    .flex_box_r,
    .flex_box_l1,
    .flex_box_r1,
    .flex_box_full {
        padding: 0 10px; /* 좌우 여백 추가 */
    }
}