/* 기본 세팅 reset */
html, body {font-size: 20px; color: #222;}
body, #wrap {min-width: 0;}
*, *:before, *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}
a {color: #222;}
select {color: #222;}
em {color: inherit;}
button {box-sizing: border-box;}

/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%; font-size: .9rem; letter-spacing: -.05rem;}
#container *{ scrollbar-arrow-color: #ddd; scrollbar-Track-Color: #ddd; scrollbar-base-color: #aaa; scrollbar-Face-Color: #aaa; scrollbar-3dLight-Color: #aaa; scrollbar-DarkShadow-Color: #aaa; scrollbar-Highlight-Color: #aaa; scrollbar-Shadow-Color: #aaa;}
#container ::-webkit-scrollbar {width: 5px; height: 5px;}
#container ::-webkit-scrollbar-thumb { background-color: #aaa; border-radius:10px; }
#container ::-webkit-scrollbar-track { background-color: #ddd; border-radius:10px; }
#container button {font-size: .9rem; letter-spacing: -.05rem;}

.container {position: relative; width: 100%; max-width: 1200px; margin: 0 auto;}

.MC_wrap1 {padding-top: 1.75rem; position: relative;}
.MC_wrap1:before {content: ""; display: block; width: 5rem; height: 5rem; border-radius: 50%; background: #daf3df; position: absolute; left: 50%; margin-left: -33.25rem; top: 1.3rem; z-index: -1;}
.MC_wrap1:after {content: ""; display: block; width: 6.3rem; height: 6.3rem; background: url(/images/sch/web/bongnae-p/main/00406_wr01_bg01.png) center/contain no-repeat; position: absolute; right: 50%; margin-right: -40.35rem; top: 13.5rem; z-index: -1;}
.MC_wrap2 {position:relative; margin-top: 2.5rem;}
.MC_wrap2 .container {display: flex; flex-wrap: wrap; justify-content: space-between;}
.MC_wrap2 .container .MC_cont {position:relative;margin-top: 2.5rem; width: calc(100% - 20rem);}
.MC_wrap3 {margin-top: 2rem; padding-bottom: 2.75rem; position: relative;}
.MC_wrap3:before {content: ""; width: 100%; height: 11.8rem; background: url(/images/sch/web/bongnae-p/main/00406_wr03_ptrn.jpg); position: absolute; left: 0; bottom: 0; z-index: -2;}
.MC_wrap3 .container:before {content: ""; width: 10.3rem; height: 6.45rem; background: url(/images/sch/web/bongnae-p/main/00406_wr03_bg01.png) left center/contain no-repeat; position: absolute; left: 50%; margin-left: -43rem; top: 4.5rem; z-index: -1;}
.MC_wrap3 .container:after {content: ""; width: 11.5rem; height: 12.45rem; background: url(/images/sch/web/bongnae-p/main/00406_wr03_bg02.png) right center/contain no-repeat; position: absolute; right: 50%; margin-right: -44rem; top: -1.5rem; z-index: -1;}

.MC_box1 {max-width: 60rem; height: 18rem; margin: 0 auto;} /* 메인비주얼 */
.MC_box1:before {content: ""; width: 100%; max-width: 80rem; height: 16rem; border-radius: 0 0 2.25rem 2.25rem; background: linear-gradient(90deg, #e9fbeb 0%, #fff4e8 100%); position: absolute; left: 50%; top: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index: -2;}
.MC_box2 {width: 27.25rem; position: absolute; left: 50%; margin-left: -30rem; bottom: 0;} /* 학급홈페이지 */
.MC_box3 {position:relative;width: calc(100% - 20rem); height: 14.5rem;} /* 게시판 */
.MC_box4 {position:relative;width: 17.5rem; height: 14.5rem;} /* 캘린더 */ 
.MC_box5 {position:relative;} /* 캘린더 */ 
.MC_box6 {position:relative;margin-top: 1.15rem; height: 6.5rem;} /* 식단 */
.MC_box7 {position:relative; margin-top: 2.5rem; width: 17.5rem;} /* 팝업존 */ 

@media (max-width: 1240px) {
    
    .container {max-width: none; padding: 0 1rem;}
    
    .MC_wrap1 {padding: 0 1rem;}
    .MC_wrap1:before {width: 3.5rem; height: 3.5rem; left: 1.8rem; margin-left: 0; top: 1.8rem;}
    .MC_wrap2 {margin-top: 1.5rem;}
    .MC_wrap2 .container .MC_cont {margin-top: 2rem; width: calc(100% - 19.5rem);}
    .MC_wrap3 {margin-top: 1.5rem; padding-bottom: 2rem;}
    .MC_wrap3:before {height: 11rem;}
    
    .MC_box1 {height: auto; padding: 2rem 2.5rem 0; position: relative;}
    .MC_box1:before {height: calc(100% + 3.1rem);}
    .MC_box2 {margin-top: 1rem; width: 100%; padding: 0 2.5rem; position: static; margin-left: 0;}
    .MC_box3 {width: calc(100% - 19.5rem);}
    .MC_box7 {margin-top: 2rem;}
}

@media (max-width: 1024px) {
    
	/* 기본 세팅 reset */
    html {font-size: 19px;}
	#wrap {min-width: 0; height: auto; overflow: auto;}
}

@media (max-width: 960px) {
    
    .MC_wrap2:after {content: ""; display: block; clear: both; visibility: hidden;}
    .MC_wrap2 .container {display: block;}
    .MC_wrap2 .container .MC_cont {margin-top: 1.5rem; width: 100%;}
    
    .MC_box3 {width: 100%;}
    .MC_box4 {margin-top: 1.5rem; width: 100%;}
    .MC_box6 {margin-top: 1.5rem; float: left; width: calc(100% - 19.5rem); height: 14.45rem;}
    .MC_box7 {margin-top: 1.5rem; float: right;}
}

@media (max-width: 860px) {
}

@media (max-width: 768px) {
    
    /* 기본 세팅 reset */
    html {font-size: 18px;}
    
    .MC_wrap1 {padding: 0;}
    .MC_wrap1:before {width: 1.65rem; height: 1.65rem; left: -.1rem; top: 1.5rem;}
    .MC_wrap3 {margin-top: 2.5rem;}
    
    .MC_box1 {padding: 1rem 1rem 0;}
    .MC_box1:before {height: calc(100% - .5rem); border-radius: 0;}
    .MC_box2 {height: auto; padding: 0 1rem;}
    .MC_box3 {height: auto;}
    .MC_box4 {height: auto;}
    .MC_box6 {float: none; width: 100%; height: 6.5rem;}
    .MC_box7 {float: none; width: 100%;}
}

@media (max-width: 640px) {
    
    .MC_box6 {height: auto;}
}

@media screen and (max-width:480px){
	.container { padding: 0 0.5rem; }
}