@import url('/resource/css/up_pop.css');

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

.MC_wrap1 { position: relative; }
.MC_wrap2 {padding:2rem 0; position:relative; }
.MC_wrap2 .con_wrap{width:calc(100% - 20rem); float: left;}
.MC_wrap3{padding-bottom: 2rem; position:relative; }
.MC_wrap3::before { position: absolute; content: ''; width: 100%; height: 10rem; bottom: 0; background: #eaf5f5;}
 
.MC_box1 {position:relative; width: 100%; height:22rem;} /* 비주얼 */
.MC_box2 {position:relative; width:100%; height:5.6rem; } /* 식단 */ 
.MC_box2:before {content:""; position:absolute; left:-100%; bottom:0; width:300%; height:17rem; background:#f2f2f2; z-index:-1;}
.MC_box3 {position:relative; width: 100%; height: 21rem;} /* 공지사항 */
.MC_box4 {position:relative; width: 100%; height: 8.75rem; margin-top:0.5rem;} /* 바로가기 */
.MC_box5 {position:relative; width:17.5rem; height: 28.5rem; float:right;} /* 행사일정 */
.MC_box6 {position:relative; width:calc(100% - 22rem); height:15rem; float:left;} /* 포토갤러리*/
.MC_box7 {position:relative; width:17.5rem; height:15rem;  float:right;} /* 팝업존 */ 


@media (max-width:1240px) {    
    .MC_wrap2{padding-bottom: 0;}

    .MC_box1 {height:auto;} /* 비주얼 */
    .MC_box6 { width: calc(100% - 19.5rem); }
}

@media (max-width:1024px) {    
    .MC_box6 { float: right; }
    .MC_box7 { float: left; }
}
@media (max-width: 920px) { 
    .MC_wrap2 {padding:1rem 0 0;}
    .MC_wrap2 .con_wrap { width: 100%; float: none; }

    .MC_box3 {width:100%; height: auto; float:none;} /* 공지사항 */
    .MC_box4 {width:100%; float:none; height: auto; margin-top: 1.5rem;} /* 행사일정 */
    .MC_box5 {width:100%; height: auto; float:none; margin: 1.5rem 0; } /* 바로가기 */
} 
@media (max-width:768px){ 
	.MC_wrap3:before {bottom:auto; height:7rem; top:11.5rem;}
	
    .MC_box2 {height:auto; padding:1rem 0;} /* 식단 */ 
    .MC_box6 {width:100%; height:auto; margin-bottom: 1rem; } /*  갤러리 */ 
    .MC_box7 {width:100%; height:auto; padding-top:1rem; margin-bottom:1.5rem;} /* 팝업존*/
}
@media (max-width:580px){  
    .MC_wrap2 .container { display: flex; flex-direction: column-reverse; }
    .MC_wrap3{padding: 0 0 1rem;}
    .MC_wrap3:before { top: auto; bottom: 0; }
    .MC_wrap3 .container { display: flex; flex-direction: column-reverse; }
    .MC_box5 { margin: 0 0 1.5rem 0; }
}