

/* 달력 컨테이너 */
.schedule__container{ max-width:1300px;margin:0 auto; padding:20px; }


/*날짜와 교대위치 */



/* 교육카테고리 */
.cate01						{ color:#fff; background: #ffb1b9; }
.cate02						{ color:#fff; background: #facbba; }
.cate03						{ color:#fff; background: #f0cc96; }
.cate04						{ color:#fff; background: #7addd1; }
.cate05						{ color:#fff; background: #b5e8e2; }


/* 교육월간일정 달력 */
.schedule_top								{ position:relative; height:65px; padding:0 0 1.2em 0; font-family:'Spoqa Han Sans', sans-serif; text-align:center; }
.schedule_top .year							{ position:relative; clear:both; width:50%; margin:0 auto; text-align:center; color:#333; font-size:2em;}
.schedule_top .year strong					{ display:inline-block; line-height:100%; padding-top:.65em }
.schedule_top .year font					{ font-size:.65em; font-weight:300 }
.schedule_top .year>a						{ position:absolute; display:inline-block; top:.5em; width:40px; height:40px; border:1px solid rgba(0,0,0,0.1); border-radius:20px;  }
.schedule_top .year>a:before				{ position:absolute; left:13px; top:14px; width:13px; height:1px; background:#969696; content:''; }
.schedule_top .year>a:after					{ position:absolute; left:13px; bottom:14px; width:13px; height:1px; background:#969696; content:'';  }
.schedule_top .year>.prev					{ left:50px;  }
.schedule_top .year>.prev:before			{ transform:rotate(-45deg);  }
.schedule_top .year>.prev:after				{ transform:rotate(45deg);  }
.schedule_top .year>.year_prev					{ left:0;  }
.schedule_top .year>.year_prev:before			{ transform:rotate(-45deg);  }
.schedule_top .year>.year_prev:after			{ transform:rotate(45deg);  }
.schedule_top .year>.year_prev span:before		{ transform:rotate(45deg);  }
.schedule_top .year>.year_prev span:after		{ transform:rotate(-45deg);  }
.schedule_top .year>.year_prev span				{ visibility:inherit }
.schedule_top .year>.year_prev span:before		{ position:absolute; left:8px; top:23px; width:13px; height:1px; background:#969696; content:''; }
.schedule_top .year>.year_prev span:after		{ position:absolute; left:8px; bottom:23px; width:13px; height:1px; background:#969696; content:'';  }
.schedule_top .year>.next						{ right:50px;  }
.schedule_top .year>.next:before				{ transform:rotate(45deg);  }
.schedule_top .year>.next:after					{ transform:rotate(-45deg);  }
.schedule_top .year>.year_next					{ right:0;  }
.schedule_top .year>.year_next:before			{ transform:rotate(45deg);  }
.schedule_top .year>.year_next:after			{ transform:rotate(-45deg);  }
.schedule_top .year>.year_next span:before		{ transform:rotate(-45deg);  }
.schedule_top .year>.year_next span:after		{ transform:rotate(45deg);  }
.schedule_top .year>.year_next span				{ visibility:inherit }
.schedule_top .year>.year_next span:before		{ position:absolute; left:18px; top:23px; width:13px; height:1px; background:#969696; content:''; }
.schedule_top .year>.year_next span:after		{ position:absolute; left:18px; bottom:23px; width:13px; height:1px; background:#969696; content:'';  }

.schedule_top .month						{ display:inline-block; *display:inline; margin:.3em 0 }
.schedule_top .month li						{ display:inline-block; *display:inline; margin-left:.7em; font-size:1.25em; color:#333;}
.schedule_top .month li.on,
.schedule_top .month li:hover,
.schedule_top .month li:focus				{ color:#ff8522; font-weight:700 }
.cate_box							{ /* position:absolute; */ left:10px; right:2px;  }
.cate_box li						{  margin:0 0.5em; padding:0;  color:#333; font-size:1em;  }
.cate_box li:last-child				{ margin-right:0}
.cate_box li span					{ display:inline-block; *display:inline; height:12px; width:12px; margin-right:0.5em; font-size:.92em; text-align:center; border-radius:50%;  }
.perf_calendar						{ clear:both; margin-top:1.5em; font-family:'Spoqa Han Sans', 'Noto Sans SC', sans-serif;}
.perf_calendar .sun					{ color:#b71919 !important}
.perf_calendar .sat					{ color:#2496de !important}
.perf_calendar>ul>li				{ float:left; width:14.342%; margin-right:-1px; }
.perf_calendar ul.weekdays li		{ padding:15px; font-size:1.14em; text-align:center; border-top:2px solid #5d7d9b; border-bottom:1px solid #5d7d9b; }
.perf_calendar .days				{ zoom:1}
.perf_calendar .days:after			{ display:block; clear:both; content:""}
.perf_calendar .days>li				{ position:relative; height:200px; padding:5px 10px; border:1px solid #ebebeb; border-top:0; border-bottom-color:#999;  }
.perf_calendar .days>li:hover		{ background:#fffce7;}
.perf_calendar .date				{ position:absolute; bottom:10px; right:10px; font-size:1.1em; color:#565656; }
.perf_calendar .event li			{ margin:.4em 0}
.perf_calendar .event a				{ display:block; overflow:hidden; line-height:20px; font-size:.93em; color:#333; letter-spacing:-.075em; text-overflow:ellipsis; white-space:nowrap;}
.perf_calendar .event a span		{ display:inline-block; *display:inline; height:12px; width:12px; font-size:.92em; text-align:center; border-radius:50%; }
.perf_calendar .other-month			{ background:#f7f7f7; }
.perf_calendar .other-month .date,
.perf_calendar .other-month .event a{ opacity:.5}

.Volunteer-ctbox{display: inline-block; width: 100%; margin-top: 5%;}
.Volunteer-ctbox li {display: inline-block; white-space:nowrap; margin: 0 1em;}
.Volunteer-ctbox li .cate01, .Volunteer-ctbox li .cate02, .Volunteer-ctbox li .cate03, .Volunteer-ctbox li .cate04, .Volunteer-ctbox li .cate05 { display:inline-block; *display:inline; height:12px; width:12px; margin-right:0.5em; font-size:.92em; text-align:center; border-radius:50%;  }

@media screen and (min-width: 451px) and (max-width: 1300px){
	.Volunteer-ctbox{margin-top: 0;}
}



@media all and (min-width:767px){
/* 교육월간일정 달력 */

}

@media all and (max-width:767px){
	/* 교육월간일정 달력 */
	.schedule_top .year	       	    {width:100%;}
	.schedule_top .year>.next	{right:0;  }
	.cate_box{display: inline-block;}
	.cate_box li	{ float:left; }

	.perf_calendar							{ border-top:2px solid #565656}
	.perf_calendar .weekdays,
	.perf_calendar .other-month				{ display:none; }
	.perf_calendar .days>li					{ height:auto !important; width:100%; padding:.6em; }
	.perf_calendar .date					{ position:relative; bottom:auto; right:auto; font-size:1em}
	.perf_calendar .event a					{ font-size:1em}

	/*날짜와 교대위치 */
	.oneday{display:flex;}
	/*.cal-day{width:20px; }*/
	.cal-schedule{width:calc(100%-10px)}

	}
