@charset "utf-8";

.wrap-cal

/* Tab */
.cal-tab ul {display: inline-block; width: 100%; margin-bottom: 15px;}
.cal-tab ul li {float: left; margin-right: 10px; margin-bottom: 10px;}
.cal-tab ul li a {position: relative; top: 1px; display: block; padding: 6px 15px; border: 1px solid #d1d1d1; font-size: 15px;}
.cal-tab ul li a.active {background: #004098; color: #fff;}

/* Search */
.cal-search {margin-bottom: 45px; padding: 5px; background: #fff url('../images/pattern.png')}
.cal-search .box {position: relative; background: #fff;}
.cal-search .move {padding: 8px 0; text-align: center; font-size: 0;}
.cal-search .move strong {display: inline-block; margin-right: 10px; font-family:'S-CoreDream-5Medium'; font-size: 26px; text-align: center; vertical-align: middle; color: #333;}
.cal-search .move .recently_btn {display: inline-block; width:60px; height: 30px !important; padding: 0 5px; border: 1px solid #d1d1d1; border-radius: 3px; vertical-align: middle; font-family:'S-CoreDream-4Regular'; font-size: 15px; margin-left: 10px;}
.cal-search .move .month {display: inline-block; vertical-align: middle;}
.cal-search .move .month select {height: 30px !important; padding: 0 5px; border: 1px solid #d1d1d1; border-radius: 3px; font-family:'S-CoreDream-4Regular'; font-size: 15px; line-height: 40px;}
.cal-search .move #searchDay {height: 30px !important; padding: 0 5px; border: 1px solid #d1d1d1; border-radius: 3px; font-family:'S-CoreDream-4Regular'; font-size: 15px; line-height: 40px; text-align: center;}
.cal-search .prev,
.cal-search .next {position: absolute; top: 50%; display: inline-block; height: 30px; transform: translate(0 , -50%);}
.cal-search .prev {left: 20px; padding-left: 40px; background: url('../images/btn-prev.png') no-repeat left center;}
.cal-search .next {right: 20px; padding-right: 40px; background: url('../images/btn-next.png') no-repeat right center;}

@media all and (max-width: 768px) {
	.cal-search .move strong {font-size: 18px;}
}

/* Month Contents */
.cal-con {display: table; width: 100%; table-layout: fixed;}
.cal-con .calendar {display: table-cell; width: 420px; padding-right: 60px; vertical-align: top;}
.cal-con .calendar .line {border: 1px solid #ccc;}
.cal-con .calendar strong {display: inline-block; width: 100%; padding: 18px 10px; font-family:'S-CoreDream-5Medium'; font-size: 18px; text-align: center;}
.cal-con .calendar table{width: 100%}
.cal-con .calendar thead tr{background: #1d335a}
.cal-con .calendar th{padding: 10px 0; font-family:'S-CoreDream-6Bold'; font-size: 14px; color: #fff;}
.cal-con .calendar td{padding: 7px 5px; font-size: 15px;}
.cal-con .calendar td:first-child p{color: #ff1800}
.cal-con .calendar td:last-child p{color: #004fd2}
.cal-con .calendar td p{display: inline-block; width: 30px; height: 30px; margin: 0 auto; background: #fff; border-radius:5 0%; line-height: 29px; color: #666}
.cal-con .calendar td.marked p{font-family:'S-CoreDream-4Regular'; font-size:14px; color:#000}
.cal-con .calendar td.marked{position: relative}
.cal-con .calendar td.marked::after{content: ""; display: block; position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; margin-left: -5px; background: #23a3b9; border-radius: 50%;}

.cal-con .detail {display: table-cell; border-top:2px solid #1d335a; vertical-align: top;}
.cal-con .detail table {width: 100%; table-layout: fixed;}
.cal-con .detail th,
.cal-con .detail td{padding: 15px 20px; border-bottom: 1px solid #d9d9d9}
.cal-con .detail th:last-child,
.cal-con .detail td:last-child{border-right: 0}
.cal-con .detail th{position: relative; width: 170px; font-size: 16px; vertical-align: top; text-align: left;}
.cal-con .detail th::after{content: ""; display: block; position: absolute; right: 0; top: 25px; width: 1px; height: 13px; background: #cacaca;}
.cal-con .detail td{font-family:'S-CoreDream-3Light'; font-size: 16px; color: #666; vertical-align: top; text-align: left;}
.cal-con .detail td a {color: #666;}

@media all and (max-width: 1024px) {
	.cal-con .calendar,
	.cal-con .detail {display: table; width: 100%;}
	.cal-con .calendar {padding-right: 0; padding-bottom: 50px;}
}

.noti{float: right; margin-top: 65px; font-family:'S-CoreDream-3Light'; color: #1d335a;}
.noti p{padding-left: 35px; background: url('../images/ico-noti.png') no-repeat left top; line-height:25px}
.noti::after{content: ""; clear:both; display: table; }

/* Cal List */
.cal-list {border-top: 1px solid #000}
.cal-list ul {display: inline-block; width: 100%}
.cal-list ul li {padding: 20px; border-bottom: 1px solid #d9d9d9}
.cal-list .box-cal {display: table; width: 100%}
.cal-list .num {display: table-cell; width: 170px; vertical-align: middle}
.cal-list .num h3 {width: 105px; height: 105px; border-radius: 100%; background: #f0f0f0; font-family:'S-CoreDream-5Medium'; font-size: 20px; text-align: center; line-height: 105px; color: #000}
.cal-list .num.day h3{font-size: 18px}
.cal-list .desc {display: table-cell; vertical-align: middle}
.cal-list .desc dl {display: table; width: 100%; margin: 10px 0}
.cal-list .desc dl dt {display: table-cell; width: 205px; font-family:'S-CoreDream-4Regular'; font-size: 16px; vertical-align: middle; color: #000}
.cal-list .desc dl dt.middle {vertical-align: middle; width: 150px}
.cal-list .desc dl dd {display: table-cell; color: rgb(29, 8, 8)}
.cal-list .desc dl dt {margin-bottom: 10px}
.cal-list .desc dl dt a {display: block; position: relative; padding-left: 15px; margin-bottom: 5px}
.cal-list .desc dl dt a:after {content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background: #3362b2; border-radius: 100%}
.cal-list .desc dl dd a {display: block; position: relative; padding-left: 15px; margin: 2px 0; font-family:'S-CoreDream-3Light'; color: #000}
.cal-list .desc dl dd a:after {content: ''; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; background: #3362b2; border-radius: 100%}
.cal-list .desc .day-title {display: block; width: 100%; margin-bottom: 0; font-family:'S-CoreDream-5Medium'; font-size: 20px;}
.cal-list .desc .day-desc {display: table; width: 100%; table-layout: fixed;}
.cal-list .desc .day-desc .schedule {display: block; width: 100%;}
.cal-list .desc .day-desc .date {width: 200px;}

@media all and (max-width: 900px) {
	.cal-list .num h3 {width: 95px; height: 95px; margin: 0 auto; margin-bottom: 20px; line-height: 95px;}
	.cal-list .box-cal,
	.cal-list .num,
	.cal-list .desc dl,
	.cal-list .desc dl dt,
	.cal-list .desc dl dd {display: block; width: 100%;}
}

.no-data {padding: 50px 0; text-align: center;}

/* Layer */
#layer_planner{display: none; position: fixed; left: 50%; top: 50%; width: 90%; max-width: 660px; z-index: 20; transform: translate(-50%,-50%); padding: 30px; background: #fff; border: 1px solid #d1d1d1}
#layer_planner.on{display: block}
#layer_planner h1{position: absolute; left: 0; top: 0; width: 100%; padding: 20px 29px; background-image: url('../images/alert_header.png'); color: #fff; font-size: 21px}
#layer_planner .btn_close{background: #2b3e5c; border: 1px solid #2b3e5c; display: block; cursor: pointer; font-size: 14px; height: 40px; line-height: 36px; text-align: center; min-width: 80px; margin: 0 auto; margin-top: 20px; border-radius:100px; font-family:'S-CoreDream-4Regular'; color: #fff}
#layer_planner table{position: relative; margin-top: 86px}
#layer_planner table:after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #000}
#layer_planner thead th{padding: 14px 10px; font-family:'S-CoreDream-4Regular'; font-weight: 400; background: #f7f8f9; color: #000; border-right: 1px solid #dddee0; border-bottom: 1px solid #dddee0; font-size: 18px}
#layer_planner thead th.small{padding: 15px 10px; font-size: 17px}
#layer_planner tbody th{padding: 13px 15px; font-family:'S-CoreDream-4Regular'; font-weight: 400; background: #fbfbfb; color: #666; border-right: 1px solid #dddee0; border-bottom: 1px solid #ccd0d7; font-size: 16px}
#layer_planner tbody td{padding: 13px 15px; font-family:'S-CoreDream-4Regular'; background:#fff; color: #666; border-bottom: 1px solid #dddee0; font-size: 16px; text-align: left}
#layer_planner .list li{position: relative; padding-left: 8px}
#layer_planner .list li:after{content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 100%; background: #666}
#layer_planner .align-l{text-align: left}
#layer_planner .align-c{text-align: center}
#layer_planner .align-r{text-align: right}


/* 일정등록 */
.sch-add {position:relative;display:block;width: 131px;height:40px;line-height:40px;margin-left:auto; margin-bottom:10px; color: #fff;font-size: 15px;border-radius: 40px;background: #1e5ba8;font-weight:500;text-align: center;text-indent: -17px;}
.sch-add::before {display: inline-block;position: absolute;right: 29px;top: 15px;content: '';width: 2px;height: 12px;background: #fff;}
.sch-add::after {display: inline-block;position: absolute;right: 24px;top: 20px;content: '';width: 12px;height: 2px;background: #fff;}
.sch-add:hover {color: #fff;}