@charset "utf-8";
/* CSS Document */

/* 달력 */
.calendar { position: relative; float: left; width: calc(100% - 480px); background: #fbfbfb; border:1px solid #e5e5e5;}
.calendar table {width: 100%; text-align: center;}
.calendar table thead tr th {text-align: center; font-size: 1.3rem; height: 35px; border-top:1px solid #e5e5e5; font-weight: 500; color: #777; background:#fff; }
.calendar table tbody tr td {text-align: center; font-size: 1.5rem; height: 75px; border-top:1px solid #e5e5e5; font-weight: 600; color: #555; cursor: pointer; }
.calendar table tbody tr td:hover {background:#f1f1f1;}
.calendar table tbody tr td.sat {color: #0c29d2;}
.calendar table tbody tr td.sun{color: #de1a1d;}
.calendar table tbody tr td.today,
.calendar table tbody tr td.today:hover  { background: #e9f1ff;}
.calendar table tbody tr td.reserv {position: relative; }
.calendar table tbody tr td.reserv:after {width: 5px; height: 5px; border-radius: 50px; background: #5496ff; content: ''; position: absolute; bottom: 15px; left:50%; margin-left:-2px;}
.calendar .month-select { width: 100%; position: relative; text-align: center; padding: 30px 0; background: #fff;}
.calendar .month-select h3 {font-size: 2.5rem; font-weight: 600; color: #173058;}
.calendar .month-select button {position: absolute; border:0; background: none; padding: 5px; cursor: pointer; top:32px; }
.calendar .month-select button.left {left:20px;}
.calendar .month-select button.right {right:20px;}
.calendar .month-select button img { width: 13px; opacity: .7;}
.calendar .month-select button:hover img { opacity: 1;}

/* 월,주별 토글버튼 */
.calendar .toggle-btn {position: absolute; top:-40px; left:0;}
.calendar .toggle-btn .btn { border: 1px solid #173058;  display: inline-block; padding: 4px 10px; position: relative; text-align: center; -webkit-transition: background 600ms ease, color 600ms ease; transition: background 600ms ease, color 600ms ease; font-size: 1.3rem; color: #173058;}
.calendar .toggle-btn input[type=radio]:not(old) {background: none;}
.calendar .toggle-btn input[type=radio]:not(old) + label {background: none;}
.calendar .toggle-btn input[type=radio]:not(old):checked + label {margin:0;}
.calendar .toggle-btn input[type=radio]:not(old) + label{margin:0;}
.calendar .toggle-btn input[type="radio"].toggle { display: none;}
.calendar .toggle-btn input[type="radio"].toggle + label { cursor: pointer; min-width: 60px; line-height: normal;}
.calendar .toggle-btn input[type="radio"].toggle + label:hover { background: none; color: #173058;}
.calendar .toggle-btn input[type="radio"].toggle + label:after { background: #173058; content: ""; height: 100%; position: absolute; top: 0; -webkit-transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); width: 100%; z-index: -1;}
.calendar .toggle-btn input[type="radio"].toggle.toggle-left + label {  border-right: 0;}
.calendar .toggle-btn input[type="radio"].toggle.toggle-left + label:after { left: 100%;}
.calendar .toggle-btn input[type="radio"].toggle.toggle-right + label { margin-left: -5px}
.calendar .toggle-btn input[type="radio"].toggle.toggle-right + label:after { left: -100%;}
.calendar .toggle-btn input[type="radio"].toggle:checked + label { cursor: default; color: #fff; -webkit-transition: color 200ms; transition: color 200ms; z-index: 1}
.calendar .toggle-btn input[type="radio"].toggle:checked + label:after { left: 0;}

/* 스케줄 */
.schedule-wrap { float: right; width: 450px; background: #fff; }
.schedule-wrap .schedule {height: 455px; overflow-y: auto; border:1px solid #e5e5e5; }
.schedule-wrap .schedule .box { padding: 15px; border-bottom:1px solid #e5e5e5; min-height: 80px; cursor: pointer;}
.schedule-wrap .schedule .box.focus {background:#e9f1ff;}
.schedule-wrap .schedule .box:hover {background: #fafafa;}
.schedule-wrap .schedule .box p {font-weight: 600; font-size: 1.3rem; padding-bottom:10px;}
.schedule-wrap .schedule .box ul li { font-size: 1.3rem; padding-left: 10px; position: relative;}
.schedule-wrap .schedule .box ul li:after {content: ''; position: absolute; top:8px; left:0; width: 4px; height: 4px; border-radius: 10px; background:  #5496ff;}
.schedule-wrap .head {text-align: center; width: 100%; line-height: 55px; font-size: 1.5rem; font-weight: 500; color:#fff; background: #173058;}
.schedule-wrap .head img {width: 14px; margin-right: 7px; position: relative; top:2px;}

/* 스케줄 상세 */
.schedule-detail-wrap {float: left; width: 100%; margin-top: 70px;}
.schedule-detail-wrap .title { position: relative; font-size: 1.6rem; font-weight: 600; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #e5e5e5; padding-left: 15px;}
.schedule-detail-wrap .title:after {position: absolute; content: ''; top:4px; left:0; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; z-index: 1; border-left:8px solid #103d86;}
.schedule-detail-wrap .schedule-detail { position: relative; }
.schedule-detail-wrap .schedule-detail .box {padding:15px; border:1px solid #e5e5e5; margin-bottom:15px;background:#fff;}
.schedule-detail-wrap .schedule-detail .box:hover {border-color: #cacaca;}
.schedule-detail-wrap .schedule-detail .box .head { position: relative; }
.schedule-detail-wrap .schedule-detail .box .head span {font-size: 1.2rem; font-weight: 500; display: inline-block; line-height: 25px; padding:0 12px; background: #aaa; border-radius: 3px;}
.schedule-detail-wrap .schedule-detail .box.rev-01 .head span { background: #103d86; color: #fff;}
.schedule-detail-wrap .schedule-detail .box.rev-02 .head span { background: #888; color: #fff;}
.schedule-detail-wrap .schedule-detail .box .head h3 {display: inline-block; padding-left: 10px; font-size: 1.4rem; color: #333;}
.schedule-detail-wrap .schedule-detail .box .head h3 a {color: #222;}
.schedule-detail-wrap .schedule-detail .box .head h3 a:hover { text-decoration: underline}
.schedule-detail-wrap .schedule-detail .box ul {margin-top: 10px; padding: 10px; background: #f1f1f1;}
.schedule-detail-wrap .schedule-detail .box ul li { display: inline-block; font-size: 1.2rem; margin-right: 15px; position: relative; padding-left:9px;}
.schedule-detail-wrap .schedule-detail .box ul li:after { content: ''; position: absolute; top:calc(50% - 2px); left:0; width:4px; height: 4px; background:#888;}


@media all and (max-width: 640px) {
	.calendar {width: 100%;}
	.calendar .month-select {padding:20px 0;}
	.calendar .month-select button {top:24px;}
	.calendar table tbody tr td {height: 65px;}
	.calendar table tbody tr td.reserv:after {bottom:11px;}
	.schedule-wrap {width: 100%; margin-top: 20px;}
	.schedule-wrap .schedule {height: 350px;}
	.schedule-wrap .schedule .box {padding: 10px; min-height: 60px;}
}
@media all and (max-width: 425px) {
	.calendar table tbody tr td {height: 55px; font-size: 1.4rem;}
	.calendar table tbody tr td.reserv:after {width: 4px; height: 4px;}
	.calendar .toggle-btn {top:-30px !important; left:50% !important; margin-left: -58px !important; }
}