﻿/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%; }

.MC_wrap1 { position:relative; padding-top: 3rem;} 
.MC_wrap1 .container{ position: relative; display: flex; flex-wrap: wrap;}
.MC_wrap1 .container .con_wrap { position: relative; display: flex; flex-wrap: wrap; margin-top: -14.2rem; padding-top: 3rem; width: 100%; }
.MC_wrap1 .container .con_wrap::before {content: '';display: block;position: absolute;left: -5rem;right: -5rem;top: 0rem;bottom: 0;background: #F7F8FA;border-radius: 3rem;z-index: -1;}
.MC_wrap2 { position:relative; overflow: hidden; } 
.MC_wrap2::before {position: absolute;content: "";bottom: 0;left: 0;width: 100%;height: 16.4rem;background: url(/26_common/images/template/T0011/main/0011_img_bg_07.png)no-repeat center center;}
.MC_wrap2 .container {position: relative; display: flex; padding: 3rem 0rem 4rem; }
.MC_box1 { position: relative; width: 30rem; height: 33rem; z-index: 2; } /* 메인비주얼 */
.MC_box1::before {position: absolute;content: "";background: url(/26_common/images/template/T0011/main/0011_img_deco01.png)no-repeat center center;width: 6.8rem;height: 9.2rem;left: -10.55rem;top: 4.6rem;}
.MC_box2 { position: relative; width: calc(100% - 30rem); height: 16.5rem; padding-left: 3rem;} /* 게시판 */
.MC_box2::before {position: absolute;content: "";background: url(/26_common/images/template/T0011/main/0011_img_deco02.png)no-repeat center center;width: 7rem;height: 9.2rem;right: -12.082rem;top: 13.74rem;}
.MC_box3 { position: relative; width: calc(100% - 46rem); height: 11.25rem; margin-left: auto; padding:0 3rem;} /* 식단 */
.MC_box4 { position: relative; width: 16rem; height: 11.25rem; } /* 팝업존 */
.MC_box5 { position: relative; width: 100%; margin: 3rem 0;} /* 바로가기 */
.MC_box6 {position: relative;width: 16rem;height: 17rem;} /* 캘린더 */
.MC_box6::before {position: absolute;content: "";background: url(/26_common/images/template/T0011/main/0011_img_deco04.png)no-repeat center center;width: 8.55rem;height: 12.65rem;left: -11.2rem;top: 0.45rem;}
.MC_box7 {position: relative;width: calc(100% - 16rem);height: 17rem;padding-left: 3rem;} /* 갤러리 */
.MC_box7::after {position: absolute;content: "";background: url(/26_common/images/template/T0011/main/0011_img_deco03.png)no-repeat center center;height: 14.1rem;width: 9.1rem;right: -12rem;top: 0.51rem;z-index: 1;}

@media (max-width:1740px){
    .MC_wrap1 .container .con_wrap { z-index: 1; }
    .MC_wrap1 .container .con_wrap::after { display: none; }
    .MC_wrap2 .container::before { left: -33.5rem; }
}

@media (max-width: 1640px) {
    .MC_wrap1 .container .con_wrap::before { left: -3rem; right: -3rem; }
}

@media (max-width: 1440px) {
    .MC_wrap1 .container .con_wrap::before { width: calc(100% + 2rem); left: -1rem; border-radius: 2rem; }
    .MC_wrap2 .container{padding-left: 1rem; padding-right: 1rem;}
    .MC_wrap2 .container::after { right: -37rem; }
    .MC_wrap2 .container::before { left: -28.5rem; bottom: -2rem; }

    .MC_box1 { width: 26rem; }
    .MC_box1::before {display:none;}
    .MC_box2 { width: calc(100% - 26rem); padding-left: 2rem; }
    .MC_box2::before {display:none;}
    .MC_box3 { padding: 0 2rem; width: calc(100% - 42rem); }
    .MC_box6::before { display: none; }
    .MC_box7 { padding-left: 2rem; }
    .MC_box7::after { display: none; }
}

@media (max-width: 1240px) {
    .MC_wrap1 { padding-top: 1.5rem; }
    .MC_wrap1 .container::before { left: -23rem; bottom: 9.5rem; }
    .MC_wrap1 .container::after { right: -22rem; bottom: 20rem; }
    .MC_wrap1 .container .con_wrap { margin-top: 1.5rem; padding: 1.5rem; }
    .MC_wrap1 .container .con_wrap::before { width: 100%; left: 0; border-radius: 1.5rem; }
    .MC_wrap2 .container { padding: 2rem 1rem 3rem; }
    .MC_wrap2 .container::before { left: -27.5rem; bottom: -2.5rem; }
    .MC_wrap2 .container::after { right: -39rem; }

    .MC_box1 { height: 22rem; width: 23rem; }
    .MC_box2 { margin-top: 1rem; width: calc(100% - 23rem); }
    .MC_box3 { margin: 0; width: calc(100% - 16rem); padding: 0 2rem 0 0; }
    .MC_box5 { margin: 1.5rem 0 0 0; }
}

@media (max-width:1024px){
    .MC_wrap1 .container::before { bottom: 8rem; }
    .MC_wrap1 .container::after { right: -25.5rem; bottom: 19.5rem; }

    .MC_box1 { width: 18rem; height: 19rem; }
    .MC_box2 { z-index: 2; width: calc(100% - 18rem); }
    .MC_box2::before { right: -7.25rem; top: -4rem; }


}

@media (max-width:968px){  
    .MC_box1 { width: 100%; height: auto; max-height: 30rem; }
    .MC_box2 { width: 100%; padding: 0; height: auto; }
    .MC_box1::before,
    .MC_box2::before, 
    .MC_wrap1 .container::before,
    .MC_wrap1 .container::after { display: none; }
}

@media (max-width:768px){ 
    .MC_wrap2 .container { flex-wrap: wrap; }
    .MC_wrap2 .container::before { background-size: 32rem; }
    .MC_wrap2 .container::after { background-size: 46rem; right: -38rem; }

    .MC_box6 { width: 100%; height: auto; }
    .MC_box7 { width: 100%; padding-left: 0; margin-top: 1.5rem; height: auto; }
}

@media (max-width:680px){  
    .MC_box3 { width: 100%; padding: 0; height: auto; }
    .MC_box4 { width: 100%; margin-top: 1.5rem; }

}

@media (max-width:480px){  
    .MC_wrap1 .container .con_wrap { margin-top: 1rem; padding: 1.5rem 1rem; }
    .MC_wrap1 .container .con_wrap::before { border-radius: 1rem; }
    .MC_wrap2::before { height: 130%; }
    .MC_wrap2 .container { padding: 1rem 1rem 1.5rem; }

    .MC_box1 { max-height: 25rem; }
    .MC_box4 { margin-top: 1rem; }
    .MC_box5 { margin-top: 1rem; }
    .MC_box7 { margin-top: 1rem; }
}

@media (max-width:380px){  
    .container { padding: 0 0.75rem; }

    .MC_wrap1 { padding-top: 1rem; }
    .MC_wrap1 .container .con_wrap { padding: 1rem 0.75rem; }
    .MC_wrap2 .container { padding: 1rem 0.75rem 1.25rem; }
    .MC_wrap2 .container::before { left: -25.5rem; }

    .MC_box1 { max-height: 18.5rem; }
    .MC_box7 { height: auto; }
}


@media (max-width:360px){ 
    .MC_box4{height: auto;}
 }