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

.MC_wrap1 { position: relative; padding: 1.8rem 0 0; background: linear-gradient(to right, #f4fff6, #eef7ff); }
.MC_wrap1::before { position: absolute; content: ""; background: url(/images/schl/template/T0048/main/wrap1_before.png)no-repeat; width: 15.05rem; height: 15rem; top: 0; left: 0; }
.MC_wrap1 .container { position: relative; }
.MC_wrap2 { position: relative;  }
.MC_wrap2::before { position: absolute; content: ""; background: url(/images/schl/template/T0048/main/wrap2_before.png)no-repeat; width: 13.05rem; height: 17.5rem; bottom: 0; right: 0; z-index: 1; }
.MC_wrap2 .container { position: relative; padding: 2.3rem 0 3rem; }
.MC_wrap2 .container::before { position: absolute; content: ""; background: #006898; border-radius: 5rem 0 0 0; top: 0; left: -8.75rem; width: 500%; height: 100%; z-index: -1; }

.con_wrap { position: relative; display: flex; clear: both; padding: 2.25rem 0 2.7rem; flex-wrap: wrap; }
.con_wrap::before { position: absolute; content: ""; background: #fff; border-radius: 0 5rem 0 0; width: 500%; height: 100%; top: 0; right: -8.75rem; }

.MC_box1 { position: relative; width: calc(100% - 16.5rem); height:25.75rem; float: left; } /* 메인비주얼 */
.MC_box2 { position:relative;  width: 13.35rem; height: 25.75rem; float: right; padding-top: 0.4rem; } /* 바로가기 */
.MC_box3 { position: relative; width: 48%; height: 15.3rem; float: left; margin: 2.6rem 0 2.5rem;} /* 게시판1 */
.MC_box4 { position: relative; width: 48%; height: 15.3rem; float: right; margin-top: 2.6rem;} /* 게시판2 */
.MC_box5 { position: relative; width: 17.5rem; height: 14rem; float: left; } /* 팝업존 */
.MC_box6 { position: relative; width: 20.2rem; height: 14rem; float: left; margin-left: 1.6rem; } /* 캘린더 */
.MC_box7 { position: relative; width: 19rem; height: 14rem; margin-left:1.6rem; float: right; } /* 식단 */
.MC_box8 { position: relative; width: 100%; height: 17rem; } /* 갤러리 */

@media (max-width:1240px){
    .MC_wrap1::before { display: none; }
    .MC_wrap2::before { display: none; }
    .MC_wrap2 .container { padding: 2.3rem 1rem 3rem; }

    .MC_box1 { width: calc(100% - 15.65rem); }
    .MC_box6 { width: calc(100% - 37rem); margin-left: 1rem; }
    .MC_box7 { width: 17.5rem;  margin-left: 1rem;}
}
 
@media (max-width:1024px){
    .con_wrap { padding: 2rem 0 1.6rem; }
    .con_wrap::before { border-radius: 0 3rem 0 0; right: 0; }
    .MC_wrap2 .container { padding: 2rem 1rem 2.1rem; }
    .MC_wrap2 .container::before { left: 1rem; border-radius: 3rem 0 0 0; }

    .MC_box3 { margin: 2.6rem 0 1.5rem; }
    .MC_box7 { padding-right: 1rem; }
    .MC_box8 { padding-left: 1.85rem; }

}
 
@media (max-width:968px){
    .con_wrap { padding: 1.5rem 0; }
    .con_wrap::before { right: -1rem; border-radius: 0; }

    .MC_box6 { order: 1; width: 100%; height: auto; margin-left: 0; margin-bottom: 1.5rem; }
    .MC_box5 { order: 2; width: 48%;  }
    .MC_box7 { order: 3; width: 48%; margin-left: 4%; padding-right: 0; }
}

@media (max-width:900px){
    .MC_wrap2 .container::before { left: -1rem; border-radius: 0; }

    .MC_box1 { width: 100%; height: auto; }
    .MC_box2 { width: 100%; height: auto; padding-top: 0; margin-top: 1.5rem;  }
    .MC_box3 { width: 100%; margin:1.5rem 0; height: auto; }
    .MC_box4 { width: 100%; margin-top: 0; margin-bottom: 1.5rem; height: auto; }
    .MC_box8 { padding-left: 0; }
}

@media (max-width:680px){

    .MC_box8 { height: auto; }
}

@media (max-width:580px){
    .MC_box5 { width: 100%; order: 1; height: auto; }
    .MC_box6 { order: 2; margin: 1.5rem 0; }
    .MC_box7 { order: 3; width: 100%; height: auto; margin-left: 0; }
}

@media (max-width: 480px) {
    .MC_wrap1 { padding-top: 1.2rem; }
}

@media (max-width: 380px) {
    .MC_wrap1 { padding-top: 1rem; }
}