/* 메인 컨테이너 */
#container {position: relative; width:100%; z-index: 2;}
#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: 3px; }
#container ::-webkit-scrollbar-thumb { background-color: #aaa; border-radius:10px; }
#container ::-webkit-scrollbar-track { background-color: #ddd; border-radius:10px; }

.container {max-width: 60rem;}

.MC_wrap1 {position: relative; padding: 0 0 2.5rem;}
.MC_wrap1:before {content:''; position:absolute; top:0; left:calc( 50% - .7rem ); width:30.7rem; height:28.4rem; background: url('/images/template/T0028/main/0028_wrap1_bg.png') repeat 0 0; border-radius:0 0 2rem 2rem; z-index:-1;}
.MC_wrap1:after {content:''; display:block; clear:both;}
.MC_wrap2 {margin: .7rem 0 0;}
.MC_wrap2 .container {position:relative; padding-bottom:3.5rem;}
.MC_wrap2 .container:before {content:''; position:absolute; bottom:0; left:-11.5rem; width:200%; height:21.75rem; border-radius:4rem 0 0; background: rgba(18, 214, 223, .08); 
                             background: -webkit-linear-gradient(to right, rgba(18, 214, 223, .08), rgba(247, 15, 255, .08)); background: -moz-linear-gradient(to right, rgba(18, 214, 223, .08), rgba(247, 15, 255, .08));
							 background: -o-linear-gradient(to right, rgba(18, 214, 223, .08), rgba(247, 15, 255, .08)); background: linear-gradient(to right, rgba(18, 214, 223, .08), rgba(247, 15, 255, .08));}

.MC_cont {float: left; width: 16rem; margin-left:2.4rem;}
.MC_box1 {position: relative; float: left; width: calc((100% - 60rem) / 2 + 41.5rem); height: 25.9rem; } /* 메인비주얼 */
.MC_box2 {position: relative; width: 100%; height: 12.5rem; margin-bottom: 1.25rem;} /* 캘린더 */
.MC_box3 {position: relative; width: 100%; height: 10.25rem;} /* 오늘의식단 */
.MC_box4 {position: relative; width: 41.5rem; height: 16rem; float: left; margin-bottom: 1.75rem;} /* 게시판 */
.MC_box5 {position: relative; width: 16rem; height: 16rem; float: right; margin:1.1rem 0 .7rem;} /* 바로가기 */
.MC_box6 {position: relative; width: 17.5rem; height: 15.5rem; float: left; margin-top:5.5rem;} /* 팝업존 */
.MC_box6:before {content:''; position:absolute; top:10rem; right:-2rem; width:350%; height:9rem; border-radius: 0 1.5rem 0 0; background: url('/images/template/T0028/main/0028_popup_bg.png') repeat 0 0; }
.MC_box7 {position: relative; width: 38rem; height: 15.5rem; float: right; margin-top:5.5rem;} /* 갤러리 */


@media (max-width: 1240px) {
	.MC_cont {margin-left:1.6rem;}
	.MC_box1{width: calc(100% - 18.5rem);}
	.MC_box4{width: calc(100% - 19rem);}
	.MC_box7{width: calc(100% - 22rem);}
}

@media (max-width: 1220px) {
	.MC_wrap1:before {left:inherit; right:1rem;}
}

@media (max-width: 1024px) {
	.MC_wrap2 {margin: 7.5rem 0 0;}
	
	.MC_wrap1:before {height:18.5rem;}
	.MC_box1 {height: 15rem; } /* 메인비주얼 */
	.MC_box3 {position: absolute; width: auto; height: 7.75rem; left:1rem; right:1rem; } /* 오늘의식단 */
}


@media (max-width: 900px) {
	.MC_cont{width: auto; margin:0 1rem; float:none;}
	.MC_wrap1{padding: 0 0 1.25rem;}
	.MC_wrap1:before { top:inherit; bottom:0; right:0; width:100%; height:24rem; border-radius:0;}
	.MC_wrap2{margin: 1.25rem 0 0;}
	.MC_wrap2 .container {padding-bottom:2.5rem;}
	.MC_wrap2 .container:before {height:19.2rem;}

	.MC_box1{width: 100%; height: auto; padding: 0 1rem;}
	.MC_box2{ margin:1.25rem 0 0; width: 48.5%; float: left;}
	.MC_box3{position:relative; width: 48.5%; float: right; margin:1.25rem 0 0; height: 12.5rem; left:inherit; right:inherit; }
	.MC_box4 {width: 100%; height: auto; margin-bottom:1.5rem;}
	.MC_box5{width: 100%; height: auto; margin:0;}
	.MC_box6{width: 47%; margin-top:1.5rem;}
	.MC_box6:before {height:8rem; right:-1rem;}
	.MC_box7{width: 47%; margin-top:1.5rem;}
	
}


@media (max-width: 620px) {	
	.MC_wrap1:before { bottom:14.2rem; }
	.MC_wrap2 .container:before {height:38rem;}
	
	.MC_box2{width: 100%; height: auto;}
	.MC_box3{width: 100%; height: auto; margin-top:2.5rem;}
	.MC_box5{margin-bottom:.2rem;}
	.MC_box6{width: 100%; height: auto; }
	.MC_box6:before {border-radius:0; top:auto; bottom: -1.5rem;}
	.MC_box7{width: 100%; height: auto; margin-top: 3rem;}
}

@media (max-width: 480px) {	
	.MC_wrap2 .container {padding-bottom:1.5rem;}
	.MC_wrap2 .container:before {height:52rem;}
}

@media (max-width: 360px) {	
	.MC_wrap2 .container:before {height:51rem;}
	.MC_box6:before {height:7.3rem;}
}

@media (max-width: 330px) {	
	.MC_wrap2 .container:before {height:50rem;}
	.MC_box6:before {height:6.1rem;}
}