/* 메인 컨테이너 */
#container {width: 100%; position: relative; z-index: 2;}

.container:after {display: none;}

.MC_wrap2:after {content: ""; display: block; clear: both; visibility: hidden;}
.MC_wrap3 {padding: 2rem 0 3rem; background: #e7f5ff;}
.MC_wrap4 {padding: 2.25rem 0 3rem; position: relative;}
.MC_wrap4:before {content: ""; display: block; width: 50%; height: 100%; background: #f6f6f6; position: absolute; left: 0; top: 0;}
.MC_wrap4 .container {display: flex; justify-content: space-between; align-items: center;}

.MC_box1 {max-width: 72.5rem; height: 28rem; margin: 0 auto; position: relative;} /* 메인비주얼 */
.MC_box2 {float: right; width: calc(100% - 25rem); height: 18.35rem; margin-top: 2.1rem;} /* 게시판 */
.MC_box3 {float: left; width: 22rem; height: 15.85rem; margin-top: -4.25rem;} /* 팝업존 */
.MC_box4 {float: left; width: 22rem; height: 12.1rem;} /* 식단 */
.MC_box5 {height: 17.9rem;} /* 갤러리 */
.MC_box6 {width: calc(100% - 25rem); height: 19.8rem;} /* 캘린더 */
.MC_box7 {width: 22rem; min-height: 19.5rem;} /* 바로가기1 */



@media (max-width: 1240px) {

    .MC_wrap2 .container {padding: 0;}

    [class^="MC_box"] {height: auto;}

    .MC_box2 {float: left; width: calc(100% - 24rem); padding-left: 1rem;}
    .MC_box3,
    .MC_box4 {float: right;}
    .MC_box6 {width: calc((100% - 50px) / 3 * 2);}
    .MC_box7 {width: calc((100% - 50px) / 3); min-height: unset;}
}



@media (max-width: 1024px) {

    #container {padding-top: 3.3rem;}

    .MC_wrap2 {display: flex; flex-wrap: wrap; padding: 0;}
    .MC_wrap3 {padding: 1.75rem 0;}
    .MC_wrap4 {padding: 0;}
    .MC_wrap4:before {display: none;}
    .MC_wrap4 .container {display: block; padding: 0;}

    .MC_box2 {margin-top: 1.25rem; width: 100%; padding: 0 1rem;}
    .MC_box3 {margin-top: 1.25rem; width: 19.5rem;}
    .MC_box4 {margin-top: 1.25rem; width: calc(100% - 19.5rem);}
    .MC_box6 {width: 100%; background: #f6f6f6; padding-top: 1.75rem; padding-left: 1rem;}
    .MC_box7 {width: 100%; padding: 1rem 1rem 1.75rem;}
}



@media (max-width: 768px) {

    .MC_box3 {width: 100%;}
    .MC_box4 {margin-top: 0; width: 100%;}
}



@media (max-width: 560px) {

    .MC_box6 {padding-left: 0;}
}



@media (max-width: 480px) {

    .MC_wrap3 {padding: 1.25rem 0;}
    
    .MC_box6 {padding-top: 1.25rem;}
}



@media (max-width: 380px) {

    .container {padding: 0 0.75rem;}

    .MC_wrap3 {padding: 1rem 0 1.25rem;}

    .MC_box2 {padding: 0 0.75rem; margin-top: 1rem;}
    .MC_box3 {margin-top: 1rem;}
    .MC_box6 {padding-top: 1rem;}
}