/* 메인 컨테이너 */
#container { position:relative;}

[class^='MC_wrap'] .container { display: flex; flex-wrap: wrap; }
.MC_wrap1 { margin: 3rem 0 4rem; }
.MC_wrap2 { margin: 0 0 4rem 0; }

.MC_box1 { position: relative; width: 58rem; height: 25rem; } /* 메인비주얼 */
.MC_box2 { position: relative; width: calc(100% - 58rem); height: 25rem; padding-left: 4rem; } /* 바로가기01 */
.MC_box3 { position: relative; width: 100%; padding: 4rem 0 3.75rem; } /* 바로가기02 */
.MC_box3::before { position: absolute; content: ""; width: 0%; left: 50%; bottom: 0; transform: translateX(-50%); background: #f3f9eb; border-radius: 5rem 5rem 0.5rem 0.5rem; height: calc(100% + 5.7rem); z-index: -1; transition: 0.3s; }
.active .MC_box3::before { width: calc(100% + 10rem); transition-delay: 0.5s; }
.MC_box4 { position: relative; width: calc(100% - 18rem); padding-right: 4rem; } /* 게시판 */
.MC_box5 { position: relative; width: 18rem; height: 14rem; } /* 팝업존 */

/*** 반응형 ***/
@media screen and (max-width: 1640px) {
    [class^='MC_wrap'] .container { padding: 0 1rem; }

    .MC_box2 { padding-left: 2rem; }
    .MC_box4 { padding-right: 2rem; }
}

@media screen and (max-width: 1440px) {
	.MC_box1 {width:50rem; height:21.5rem;}
	.MC_box2 {width:calc(100% - 50rem); height:21.5rem;}
	
}

@media screen and (max-width: 1280px) {
	.MC_wrap1 { margin: 2.5rem 0 3rem; }
    .MC_box1 { width: 100%; height: auto; }
    .MC_box2 { padding: 0; width: 100%; margin-top: 2rem; height: auto; }
    .MC_box3 { padding: 3rem 0 2.5rem; }
}

@media screen and (max-width: 1024px) {
	/* header */
	#header {border-bottom:1px solid #ddd;}
	
    .MC_wrap1 { margin: 1rem 0 2rem; }
    .MC_wrap2 { margin: 0 0 3rem 0; }
    .MC_wrap2 > .container {flex-direction:column;}
    .MC_wrap2 > .container .MC_box4 {width:100%; flex:1;}

    .MC_box2 { margin-top: 1rem; }
    .MC_box3 { padding: 2rem 0 1.75rem; }
    .MC_box3::before { height: calc(100% + 3rem); border-radius: 0; }
    .MC_box4 { width: calc(100% - 17.5rem); }
    .MC_box5 { width: 17.5rem; height: auto; }
    .MC_box6 {width:100%; min-width: 0px; position: relative;}
}

@media screen and (max-width: 900px) {
    .MC_box3 { padding: 1.5rem 0; }
    .MC_box4 { width: 100%; padding: 0; }
    .MC_box5 { width: 100%; margin-top: 2rem; }
}

@media screen and (max-width: 480px) {
    .MC_wrap1 { margin: 1rem 0 1.5rem; }

    .MC_box5 { margin-top: 1.5rem; }
}

@media screen and (max-width: 380px) {
    .MC_wrap1 { margin: 1rem 0; } 
    .MC_wrap2 { margin: 0 0 2rem 0; }
    [class^='MC_wrap'] .container { padding: 0 0.75rem; }

    .MC_box2 { margin-top: 0.5rem; }
    .MC_box3 { padding: 1rem 0; }
    .MC_box5 { margin-top: 1rem; }
}