﻿/* 메인 컨테이너 */
#container { position:relative; z-index:2; width:100%;}
#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: 5px; }
#container ::-webkit-scrollbar-thumb { background-color: #aaa; border-radius:10px; }
#container ::-webkit-scrollbar-track { background-color: #ddd; border-radius:10px; }

.MC_wrap1 {position: relative; padding-top: 2.5rem;}
.MC_wrap1:before {position:absolute; top: 0; right: 50%; margin-right: -42rem; width: 1000%; height: 70%; background: url('/images/template/T0023/main/0023_bg_visual.png'); border-radius: 0 3.5rem 3.5rem 0; content: "";} /* 메인비주얼 */
.MC_wrap2 {padding: 2.5rem 0;}
.MC_wrap3 .container {position: relative; padding: 2.5rem 0 2rem;}
.MC_wrap3 .container:before {position: absolute; top: 0; left: -8rem; width: 200%; height: 100%; content: ""; border-radius: 5rem 0 0 5rem;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fff8ed+0,f6f1ff+100 */
background: rgb(255,248,237); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(255,248,237,1) 0%, rgba(246,241,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,248,237,1) 0%,rgba(246,241,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,248,237,1) 0%,rgba(246,241,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff8ed', endColorstr='#f6f1ff',GradientType=1 ); /* IE6-9 */
}
.MC_wrap4 .container {position: relative; padding: 2.5rem 0;}
.MC_wrap4 .container:before {position: absolute; top: -8rem; right: -15rem; width: 210px; height: 210px; background: url('/images/template/T0023/main/0023_gal_bg.png'); content: "";}

.MC_box1 {position:relative; margin: 0 auto; width: 100%; max-width: 75.5rem; height: 22.5rem;} /* 메인비주얼 */
.MC_box2 {position: relative; width: calc(100% - 19.5rem); height: 13.5rem; float: left;} /* 게시판 */ 
.MC_box3 {position: relative; width: 17.5rem; height: 13.5rem; float: right;} /* 팝업존 */
.MC_box4 {clear: both; position: relative; width: 100%; height: 4rem; margin-bottom: 2.25rem;} /* 바로가기 */
.MC_box5 {position: relative; width: 17.5rem; float: left; height: 15.5rem;} /* 식단 */
.MC_box6 {position: relative; width: calc(100% - 19.5rem); float: right; height: 15.5rem; vertical-align: top;} /* 캘린더 */
.MC_box7 {} /* 갤러리 */

@media (max-width:1440px){
    .MC_box1 {margin-left: 0; height: auto;}
}

@media (max-width:1240px){
	.MC_wrap3 .container,
	.MC_wrap4 .container {padding: 2rem 1rem;}
}

@media (max-width:1024px){
	.MC_box4 {height: auto;} /* 바로가기 */
}

@media (max-width:960px){
    .MC_box5 {width: 100%; height: auto; margin-bottom: 2rem;} /* 식단 */
    .MC_box6 {width: 100%; height: auto;} /* 캘린더 */
}

@media (max-width:768px){
	.MC_wrap1 {padding-top: 1.5rem;}
	.MC_wrap2 {padding: 2.5rem 0 1.5rem;}

    .MC_box2 {width: 100%;} /* 게시판 */
    .MC_box3 {width: 100%; margin-top: 1.5rem;} /* 팝업존 */
	.MC_box4 {margin-bottom: 1.5rem;} /* 바로가기 */
}

@media (max-width:480px){
    .MC_box2 {height: auto;}
}