/*
#main-cal .ui-datepicker thead{display: none;}
#main-cal .ui-datepicker table{display: block;margin: 0; font-size: 0;}
#main-cal .ui-datepicker tbody{display: block; white-space: nowrap; overflow-x: auto;  border-bottom: 1px solid #ccc; padding-bottom: 20px;}
#main-cal .ui-datepicker tr{display: inline}
#main-cal .ui-datepicker td{display: inline !important;
    padding: 0 !important;
    border: 0 !important; height: auto !important}
#main-cal .ui-datepicker td span, #main-cal .ui-datepicker td a{display: inline-block; font-size: 18px; position: relative !important;}
#main-cal .ui-datepicker td a{border-radius:50%}
#main-cal .ui-datepicker-year::after{content: ''}
#main-cal .ui-datepicker .ui-datepicker-title{display: block; margin: 0;}

.main-calendar{background: #f7f7f7; border:1px solid #ccc; color: #333; font-size: 16px; width: 100%; position: relative; min-height: 213px; padding-left: 200px;}
.main-calendar .ui-datepicker-header{background: #004684; width: 200px; text-align: center; padding: 40p#main-cal .ui-datepicker tablex 0; position: absolute;left: 0;top:0; height: 100%}
.main-calendar .ui-datepicker-header .ui-datepicker-year{font-size: 20px; border-bottom: 1px solid rgba(255,255,255,.23); display: inline-block; padding-bottom: 5px; color: #fff; margin: 0;}
.main-calendar .ui-datepicker-header .ui-datepicker-month{font-size: 44px; font-weight: 700; line-height: 1.15; position: relative; margin-bottom: 10px; color: #fff; display: block;}
.main-calendar .ui-datepicker-header .day > *{display: inline-block; vertical-align: middle;}
.main-calendar .ui-datepicker .ui-datepicker-prev,
.main-calendar .ui-datepicker .ui-datepicker-next{width: 10px; height: 10px; border:0; border-radius:0;border-top: 2px solid #fff; border-left: 2px solid #fff; white-space: nowrap; overflow: hidden; text-indent: -999px; position: absolute;top:50%; margin-top: -5px;}
.main-calendar .ui-datepicker .ui-datepicker-prev{    transform: rotate(-45deg); left: 30px}
.main-calendar .ui-datepicker .ui-datepicker-next{    transform: rotate(135deg); right: 30px}
.main-calendar .ab{position: absolute; left: 0; bottom: 50px; width: 200px; text-align: center;}
.main-calendar .total{border-bottom: 1px solid rgba(255,255,255,.23); display: inline-block; font-size: 14px; padding-bottom: 5px;}

#main-cal .ui-datepicker table{padding: 30px 40px 0; margin-bottom: 20px;}
.main-calendar .cal{padding: 0 40px 30px}
.main-calendar .cal .date ul{white-space: nowrap; overflow-y: hidden;; overflow-x: auto;}
.main-calendar .ui-datepicker td a{display: inline-block; width: 25px; height: 25px;border-radius:50%; text-align: center; line-height: 25px; margin: 0 4px; padding: 0; vertical-align: middle; font-weight: 500; color: #333}
.main-calendar .ui-state-highlight, .main-calendar .ui-state-active{color: #0058a5 !important; background: #fff; text-decoration: none !important;}
.main-calendar .ui-datepicker-week-end a{color: rgba(255,255,255,.5) !important}

.main-calendar .detail{font-weight: 500}
.main-calendar .detail ul{margin-left: -2%;}
.main-calendar .detail li{float: left; width: 23%; position: relative; padding-left: .7em; margin-left: 2%;}
.main-calendar .detail li:before{position: absolute; left:0;top:0;content: '-'}
.main-calendar .detail strong,.main-calendar .detail span{display: block;}
.main-calendar .detail strong{font-weight: 400;}
.main-calendar .detail span{color: rgba(255,255,255,.5); font-weight: 300;}

.main-calendar.small #main-cal .ui-datepicker td a{width: 20px; height: 20px; line-height: 17px; font-size: 16px;}

/* �깋�긽 *
.main-calendar.type-gold{background: #f7f7f7;} /* 怨⑤뱶 *
.main-calendar.type-gold.white{background: #fff}
.main-calendar.type-gold .ui-datepicker-header{background: #be9f57}
.main-calendar.type-gold .ui-datepicker-week-end a{color: #be9f57 !important}
.main-calendar.type-gold .ui-datepicker-today a{background: #be9f57; color: #fff !important}
.main-calendar.type-gold .ui-state-active{background: none; border:1px solid #be9f57; color: #333 !important}

.main-calendar.type-red{background: #f7f7f7} /* 鍮④컯 *
.main-calendar.type-red .ui-datepicker-header{background: #9a0e17}
.main-calendar.type-red .ui-datepicker-week-end a{color: #e71b1b !important}
.main-calendar.type-red .ui-datepicker-today a{background: #9a0e17; color: #fff !important}
.main-calendar.type-red .ui-state-active{background: none; border:1px solid #9a0e17; color: #333 !important}

.main-calendar.type-blue{background: #fff;} /* �꽕�씠鍮� *
.main-calendar.type-blue .ui-datepicker-header{background: #0a326f}
.main-calendar.type-blue .ui-datepicker-week-end a{color: #3561d0 !important}
.main-calendar.type-blue .ui-datepicker-today a{background: #0a326f; color: #fff !important}
.main-calendar.type-blue .ui-state-active{background: none; border:1px solid #0a326f; color: #333 !important}

.main-calendar.type-black{background: #f7f7f7;} /* 寃��젙 *
.main-calendar.type-black .ui-datepicker-header{background: #222}
.main-calendar.type-black .ui-datepicker-week-end a{color: #e93838 !important}
.main-calendar.type-black .ui-datepicker-today a{background: #222; color: #fff !important}
.main-calendar.type-black .ui-state-active{background: none; border:1px solid #222; color: #333 !important}

.main-calendar.type-brown{background: #f7f7f7;} /*  
.main-calendar.type-brown .ui-datepicker-header{background: #a78b76}
.main-calendar.type-brown .ui-datepicker-week-end a{color: #be9f57 !important}
.main-calendar.type-brown .ui-datepicker-today a{background: #a78b76; color: #fff !important}
.main-calendar.type-brown .ui-state-active{background: none; border:1px solid #a78b76; color: #333 !important}

@media (max-width:1024px){
	.main-calendar{font-size: 15px;padding-left: 150px;}
	.main-calendar .ui-datepicker-header,.main-calendar .ab{width: 150px}
	#main-cal .ui-datepicker table{padding: 20px 20px 0}
	.main-calendar .cal{padding: 0 20px 20px}
}
@media (max-width:768px){
	.main-calendar{font-size: 14px; padding-left: 0;}
	.main-calendar .ui-datepicker-header{width: 100%; position: static; padding: 5px 0 13px}
	.main-calendar .ui-datepicker-header .ui-datepicker-year, .main-calendar .ui-datepicker-header .ui-datepicker-month{display: inline-block; vertical-align: middle;}
	.main-calendar .ui-datepicker-header .ui-datepicker-year{padding-bottom: 0;}
	.main-calendar .ui-datepicker-header .ui-datepicker-month{margin:0 0 0 10px; line-height: .7; font-size: 30px;}
	.main-calendar .ui-datepicker .ui-datepicker-prev, .main-calendar .ui-datepicker .ui-datepicker-next{top:20px; margin-top: 0;}
	.main-calendar .ui-datepicker .ui-datepicker-prev{left: 15px}
	.main-calendar .ui-datepicker .ui-datepicker-next{right: 15px}
	.main-calendar .ab{right: 35px; top: 10px; width: auto; left: auto;}
	#main-cal .ui-datepicker table{padding: 15px 15px 0; margin-bottom: 15px;}
	#main-cal .ui-datepicker tbody{padding-bottom: 15px;}
	.main-calendar .cal .date li{font-size: 16px; margin: 0 2px;}
	.main-calendar .detail{margin-top: -20px;}
	.main-calendar .detail li{width: 48%; margin-top: 20px;}
}
*/
#main-cal-wrap{display:flex; border:1px solid #ddd; padding:20px; background:#fff;margin-bottom: 4em;}
#main-cal-wrap .cal{flex:1; overflow:hidden;}

#main-cal{width:40%;}
#main-cal .ui-datepicker{display:flex !important; justify-content:space-between; align-items:center;}
#main-cal .ui-datepicker .ui-datepicker-header{ position: relative; justify-content:space-between; width:25%;}
#main-cal .ui-datepicker .ui-datepicker-prev span, 
#main-cal .ui-datepicker .ui-datepicker-next span{text-indent:-9999px; overflow:hidden; width:10px; height:10px; border-width:0 2px 2px 0; border-style:solid; border-color:#666;}
#main-cal .ui-datepicker .ui-datepicker-prev{order:2;}
#main-cal .ui-datepicker .ui-datepicker-prev span{transform:rotate(135deg);}
#main-cal .ui-datepicker .ui-datepicker-next{order:3;}
#main-cal .ui-datepicker .ui-datepicker-next span{transform:rotate(-45deg);}
#main-cal .ui-datepicker .ui-datepicker-title{order:1; width:100%; margin:0; justify-content:center; flex-wrap:wrap; font-size:0; flex-direction:column;}
#main-cal .ui-datepicker-year{margin:0; line-height:1; font-size:24px; font-weight:600; color:#666;}
#main-cal .ui-datepicker-year::after{display:none;}
#main-cal .ui-datepicker-month{font-size:30px; font-weight:600; color:#243a72; margin:5px 0 20px; line-height:1;}

#main-cal .ui-datepicker table{margin:0;border-collapse: separate; border-spacing: 0; border-bottom:1px solid #ddd; width:70%}
#main-cal .ui-datepicker th{background:transparent; color:#111; border:0;}
#main-cal .ui-datepicker th:first-child{color:#9a0e17;}
#main-cal .ui-datepicker th:last-child{color:#243a72;}
#main-cal .ui-datepicker td{height:35px; background:#f9f9f9; text-align:center; border-bottom:0; border-left:0}
#main-cal .ui-datepicker td.ui-datepicker-week-end-holiday a{color:#9a0e17;}
#main-cal .ui-datepicker td a{font-size:13px; color:#888; font-weight:500;}
#main-cal .ui-datepicker td:first-child a{color:#9a0e17;}
#main-cal .ui-datepicker td:last-child a{color:#243a72;}
#main-cal .ui-datepicker tbody tr td:first-child{border-left:1px solid #ddd}

#main-cal-list{flex:1; margin-left:20px; position:relative; border-left:1px solid #ddd; padding-left:20px;}
#main-cal-list .title{border-bottom:1px solid #ddd; font-size:24px; font-weight:500; color:#111; line-height:1; padding:0 0 20px; margin:0 0 15px;}
#main-cal-list .item{}
#main-cal-list .item li{font-size:1rem; color:#666; font-weight:300; line-height:1; position: relative; padding-left: 7em; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
#main-cal-list .item li:not(:last-child){margin-bottom:10px;}
#main-cal-list .item li a{display:block;}
#main-cal-list .item li a::before{content:'· '; font-size:inherit; color:inherit;}
#main-cal-list .item li span{}
#main-cal-list .item li .date{width: 7em; position: absolute;left: 0;top:0;}
#main-cal-list .item li .subject{flex:1; margin-left:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#main-cal-list .other{position:absolute; bottom:0px; right:0px; font-size:1.25rem; color:#243a72; font-weight:500;}

@media screen and (max-width:1400px){
	
}
@media screen and (max-width:1024px){
	#main-cal-wrap{flex-wrap:wrap;}
	#main-cal{width:100%;}
	#main-cal-list{flex:none; width:100%; margin-left:0; padding-left:0; border-left:0; margin-top:20px; padding-bottom:40px;}
	.ui-datepicker .ui-datepicker-prev, 
	.ui-datepicker .ui-datepicker-next{width:40px; height:40px;}
	#main-cal .ui-datepicker .ui-datepicker-prev, 
	#main-cal .ui-datepicker .ui-datepicker-next { position: absolute; top: 50%; transform: translateY(-50%); }
	#main-cal .ui-datepicker .ui-datepicker-prev{ left: 0; }
	#main-cal .ui-datepicker .ui-datepicker-next{ right: 0;}
}

@media screen and (max-width:720px){
	#main-cal .ui-datepicker{display: block !important;}
	#main-cal .ui-datepicker .ui-datepicker-header{width: 100%;}
	#main-cal .ui-datepicker table{width: 100%;}
}