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

.MC_wrap1 {padding-top: 1.5rem; position: relative; z-index: 1;}
.MC_wrap1:before {content: ""; display: block; width: calc(150% + 9.7rem); height: 15.35rem; background: #eef5ff; position: absolute; left: -50%; bottom: 0; border-radius: 0 3rem 0 0; z-index: -1;}
.MC_wrap2 {clear: both; padding-top: 1.5rem; padding-bottom: 4rem;}
.MC_wrap3 {clear: both; padding-top: 1.5rem; padding-bottom: 2rem; background: url(/images/schl/template/T0022/main/MC_wrap3_bg.png);}

.MC_box1 {position: relative; float: left; width: calc(100% - 20rem); padding-bottom: 2rem;} /* 메인비주얼 */
.MC_box1::before {position: absolute; content: ''; width: 10.3rem; height: 14.7rem; top: 5.5rem; left: -12.5rem; background: url(/images/schl/template/T0022/main/0022_bg01.png) no-repeat;}
.MC_box2 {position: relative; float: right; width: 17rem;} /* 캘린더 */
.MC_box2::after {position: absolute; content: ''; width: 8.95rem; height: 11.65rem; top: 4.75rem; right: -12.9rem; background: url(/images/schl/template/T0022/main/0022_bg02.png) no-repeat;}
.MC_box3 {float: right; margin-top: 2.15rem; width: 17rem; height: 10.2rem; padding-top: 1rem; padding-bottom: 1rem; background: #b0cfff; border-radius: 2rem 2rem 2rem 0;} /* 바로가기 */
.MC_box4 {float: left; width: 17.5rem; margin-right: 2.5rem;} /* 팝업존 */
.MC_box5 {float: left; width: calc(100% - 20rem);} /* 게시판 */
.MC_box6 {position: relative; float: left; width: 17.5rem; padding: 0 1.5rem; margin-right: 2.5rem;} /* 오늘의식단 */
.MC_box6::before {position: absolute;content: '';width: 100%;height: calc(100% + 5.5rem);top: -3.5rem;left: 0;background: #b0cfff;border-radius: 2rem 2rem 0 2rem;}
.MC_box7 {float: left; width: calc(100% - 20rem);} /* 갤러리 */

@media (max-width: 1240px) {
    .MC_box1 {width: calc(100% - 19rem); height: 32.5rem; }
    .MC_box1::before {display: none;}
    .MC_box2::after {display: none;}
    .MC_box3 { position: absolute; bottom: 0; right: 1rem; }
}

@media (max-width: 1024px) {
    #container {padding-top: 3.3rem;}
}

@media (max-width: 984px) {
    .MC_box3 {padding-bottom: 2rem;}
    .MC_box5 {float: none; width: 100%;}
    .MC_box4 {float: none; width: 100%; margin-right: 0; margin-bottom: 1.5rem;}
}

@media (max-width: 860px) {
    .MC_wrap1 {display: flex; flex-wrap: wrap; justify-content: space-between;}
    .MC_wrap1:before {height: 50%;}
    .MC_wrap1:after {display: none;}
    .MC_wrap2 {padding-top: 1.5rem; padding-bottom: 3rem;}
    .MC_wrap3 {padding-top: 2rem;}

    .MC_box1 {width: 100%; height: auto; padding-bottom: 0;}
    .MC_box2 {margin-top: 2rem; float: none; width: calc(50% - 0.5rem); padding-top: 0; }
    .MC_box3 {position: relative; width: calc(50% - 0.5rem); height: auto; right: 0; padding-bottom: 0; padding-top: 0; }
}

@media (max-width: 640px) {
    .MC_wrap1:before {height: 70%;}
    .MC_wrap2 {padding-bottom:5rem;}
    .MC_box2 {width: calc(50% + 3.5rem);}
    .MC_box3 {width: calc(50% - 4.5rem); padding-top: 1rem;}
    .MC_box7 {float: none; width: 100%; margin-top: 2rem;}
    .MC_box6 {float: none; width: 100%; margin-right: 0; margin-bottom: 1rem; margin-top: -5rem; padding: 2rem 1.5rem;}
    .MC_box6::before {height: 100%; top: 0;}
} 

@media (max-width: 560px) {
    .MC_wrap1:before {height: 80%;}
    .MC_box2 {width: 100%;}
    .MC_box3 {width: 100%; margin-top: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
}