@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: 'Dream Medium'; font-size: 26px; text-align: center; vertical-align: middle; color: #333;}
.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: 'Dream Regular'; 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: 'Dream Regular'; 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;padding-bottom: 5px;}
.cal-con .calendar strong {display: inline-block; width: 100%; padding: 18px 10px; font-family:'Dream Medium'; 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:'Dream Bold'; 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: 'Dream Regular'; 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;font-weight: 500;}
.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: 'Dream Light'; 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:'Dream Light'; 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: 'Dream Medium'; 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-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;letter-spacing: -0.8px;font-weight:400;}
.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: 'Dream Light'; 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: 'Dream Medium'; 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;}

.search{text-align: center;
    background: #fff url(http://dep.hufs.ac.kr/Web-home/fnct/schdulmanage/sch_normal/images/pattern.png);
    line-height: 50px;
    font-size: 1.5rem;
    padding: 5px;
    margin-top: -1px;}
.search strong{background: #fff;
    width: 100%;
    padding: 5px;
    display: block;}

@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;}
.desc{ padding-bottom:20px !important;}
/* 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: 'Dream Regular'; 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: 'Dream Regular'; 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: 'Dream Regular'; 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: 'Dream Regular'; 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}