[class^="MC_wrap"] { position: relative; width: 100%; overflow: hidden;
    --boxGap: 1rem;
    --radius: 1rem;
    --mainfont: 1rem;
    --Titfont: 1rem;
}

.MC_wrap1 { margin: calc(var(--boxGap) * 4) 0 calc(var(--boxGap) * 5); }
.MC_wrap2 { overflow: visible; }
.MC_wrap3 { margin: calc(var(--boxGap) * 5) 0; overflow: visible; }
.MC_wrap3 .container { display: flex; flex-wrap: wrap; gap: calc(var(--boxGap) * 5) calc(var(--boxGap) * 3.9); position: relative; }

[class^="MC_box"] { position: relative; }

.MC_box1 { width: 100%; height: 30rem; }
.MC_box2 { width: 100%; z-index: 1; }
.MC_box3 { width: 100%; }
.MC_box4 { width: calc(100% - calc(25rem + calc(var(--boxGap) * 3.9))); height: 15.9rem; }
.MC_box5 { width: 25rem; height: 31rem; }
.MC_box6 { width: calc(100% - calc(27rem + calc(var(--boxGap) * 3.9))); height: 12.3rem; position: absolute; left: 1rem; bottom: 0; }

/***** 반응형 *****/

@media screen and (max-width: 1640px) {
    [class^="MC_wrap"] {
        --boxGap: 0.9rem;
    }

    .MC_wrap1 { margin: calc(var(--boxGap) * 2.5) 0 calc(var(--boxGap) * 4); }
    .MC_box1 { height: auto; }
}

@media screen and (max-width: 1440px) {
    .MC_wrap1 { margin: calc(var(--boxGap) * 3) 0 calc(var(--boxGap) * 4); }
    .MC_wrap3 { margin: calc(var(--boxGap) * 4) 0; }
    .MC_wrap3 .container { gap: calc(var(--boxGap) * 4) calc(var(--boxGap) * 2.5); } 
    .MC_box4,
    .MC_box5 { height: 20rem; } 
    .MC_box4 { width: calc(100% - calc(18.5rem + calc(var(--boxGap) * 2.5))); }
    .MC_box5 { width: 18.5rem; }
    .MC_box6 { position: relative; left: auto; bottom: auto; width: 100%; height: auto; }
}

@media screen and (max-width: 1240px) {
    [class^="MC_wrap"] {
        --boxGap: 0.8rem;
        --mainfont: 0.95rem;
        --Titfont: 0.85rem;
    }

    .MC_wrap1 { margin: calc(var(--boxGap) * 2.5) 0 calc(var(--boxGap) * 3.5); }
}

@media screen and (max-width: 1024px) {
    [class^="MC_wrap"] {
        --radius: 0.9rem;
    }
    .MC_box4 { width: calc(100% - calc(16.5rem + calc(var(--boxGap) * 2.5))); }
    .MC_box5 { width: 16.5rem; }
    
}

@media screen and (max-width: 968px) {
    .MC_box4,
    .MC_box5 { width: 100%; height: auto; }
}

@media screen and (max-width: 768px) {
    [class^="MC_wrap"] {
        --boxGap: 0.6rem;
        --mainfont: 0.9rem;
        --Titfont: 0.8rem;
    }

    footer .box_info p.logo img, header h1 img { max-width: calc(var(--basicFont) * 14) !important; }
}

@media screen and (max-width: 480px) {
    [class^="MC_wrap"] {
        --boxGap: 0.5rem;
        --Titfont: 0.75rem;
        --radius: 0.9rem;
    }

    footer .box_info p.logo img, header h1 img { max-width: calc(var(--basicFont) * 11.5) !important; }
}

@media screen and (max-width: 380px) {
    [class^="MC_wrap"] {
        --boxGap: 0.4rem;
        --mainfont: 0.8rem;
        --Titfont: 0.7rem;
        --radius: 0.8rem;
    }

    footer .box_info p.logo img, header h1 img { max-width: calc(var(--basicFont) * 10) !important; }
}