﻿/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%; }

.MC_wrap1 { position: relative; padding: 2.5rem 0; overflow: hidden;}
.MC_wrap1::before { position: absolute;  content: ""; background: url(/images/po/template/T2001/main/2001_wrap01_deco.png) no-repeat;  width: 17.1rem; height: 25.85rem; left: 0; bottom: -6rem; z-index: 0;}
.MC_wrap1 .container { position: relative; }
.MC_wrap2 { position: relative; margin-top: 2.5rem; }
.MC_wrap2 .container {display: flex; justify-content: space-between;}
.MC_wrap3 { position: relative; margin-top: 5rem; margin-bottom: 2rem; }

.MC_box1 { position:relative; width: 100%; height:26.75rem; } /* 메인비주얼 */
.MC_box1::before { position: absolute; content: ""; width: calc(100% + 70rem); height: calc(100% + 5rem); top: -2.5rem; right: 11.15rem; border-radius: 0 5rem 5rem 0; background:#f1f8ff; z-index: -1;}
.MC_box2 { position: relative; width: calc(100% - 25.5rem); height: 15.6rem; } /* 게시판 */
.MC_box3 { position: relative; width: 23.5rem; height: 15.6rem; margin-left: auto; } /* 팝업존 */
.MC_box4 { position: relative; width: 100%; float: right; height: 21.5rem; } /* 포토앨범 */
.MC_box4::before { position: absolute; content: ""; width: calc(100% + 12.7rem); height: calc(100% + 4.5rem); bottom: -2rem; left: -6.35rem; border-radius: 4rem 4rem 0 0; background:#f5fefc url(/images/po/template/T2001/main/2001_gallbg.png) no-repeat bottom center;}

@media (max-width: 1440px) {
    .container{padding: 0 1rem;}
}

@media (max-width: 1240px) {
    .MC_wrap1::before {display: none;}
}

@media (max-width: 1100px) {
    .MC_wrap2 {margin-top: 1.5rem;}
    .MC_wrap3 {margin-top: 3.5rem;}

    .MC_box4::before { height: calc(100% + 3.5rem); bottom: -2rem;}
}

@media (max-width: 1024px) {
    .MC_wrap1 { padding: 1.5rem 0; }  
    .MC_wrap2 .container {flex-direction: column;}
    
    .MC_box1 { height: auto; }
    .MC_box2 { width: 100%; height: auto; } /* 게시판 */
    .MC_box3 { width: 100%; height: auto; margin-top: 1.5rem;} /* 팝업존 */
}

@media (max-width: 900px) {
    .MC_box2 { width: 100%; height: auto; }
    .MC_box3 { width: 100%; height: auto; margin-top: 2rem; }
}

@media (max-width: 768px) {
    .MC_box2 { height: auto; }
}

@media (max-width: 560px) {
    .MC_wrap3 {margin-top: 1.5rem;}
    .MC_box1::before {right: 1.15rem; border-radius: 0 4rem 4rem 0;}
    .MC_box4 { width: 100%; height: auto; margin-top: 1.5rem; }
}

@media (max-width: 380px) {
    .MC_box4 { margin-top: 1rem; }
}

