@charset "utf-8";

/*신청 및 조회*/
.program-select {border:1px solid #ddd; background-color:#f3f5f7; margin-bottom:3rem; padding:3rem 5rem; text-align:center}
.program-select > div {border-bottom:1px solid #ddd; padding-bottom:2.5rem; margin-bottom:2.5rem}
.program-select .form_select {height:5rem; width:33rem; margin-top:1rem}
.program-select .form_select select {height:5rem}
.program-select .btn i {color:#d45e4c}
.program-select .btn span {color:#000; font-weight:400; display:inline-block; text-decoration:underline}
.program-select .btn a {border:1px solid #22316a; border-radius:100px; color:#22316a; font-size:1.5rem; padding:0 10px; margin-left:5px}

/*예약관련설명*/
.explain {font-size:1.4rem; margin-bottom:1rem}
.explain:after {content:''; clear:both; display:block}
.explain ul {float:right}
.explain ul li {display:inline-block; font-size:14px; margin:0 0.5rem}
.explain ul li.state em {display:inline-block; height:15px; width:15px; margin-right:5px; vertical-align:-2px}

/*예약현황 type*/
.state em {font-size:0.6rem; padding:0 5px; margin-right:3px}
.state .white {border:1px solid #ccc}
.state .ltgray {background-color:#f3f5f7; border:1px solid #ccc}
.state .circle {background-color:#000; border-radius:100%; width:6px !important; height:6px !important; padding:0 !important; vertical-align:2px !important}
.state .gray {background-color:#666; color:#fff}
.state .green {background-color:#009a44; color:#fff}
.state .red {background-color:#dd6021; color:#fff}

.Calendar-area {border:1px solid #d8d8d8; display:table; position:relative; width:100%; margin-bottom:2.5rem}
.Calendar-area .Calendar {border-right:1px solid #d8d8d8; display:table-cell; width:60%; padding:1.5rem}
.Calendar-area .timeList {display:table-cell; width:40%; padding:1rem; text-align:center}

/*캘린더 날짜*/
div.DateArea {clear:both; position:relative; padding:0.5rem 0 1rem 0; overflow:hidden; text-align:center}
.Calendar .DateArea {position:relative; width:26rem; text-align:center; margin:0 auto}
.Calendar .DateArea span {font-size:2.4rem; margin:0; padding:0; font-weight:600; color:#333}
.Calendar .DateArea a {position:absolute; top:50%; left:auto; -webkit-transform:translateY(-50%); transform:translateY(-50%); left:0; margin:0; padding:0; border:0 none; background-color:#fff; font-size:0; color:transparent}
.Calendar .DateArea a.next_month {left:auto; right:0}
.Calendar .DateArea a:before {content:''; display:block; width:2.4rem; height:2.4rem; line-height:2.4rem; color:#999; font-size:1.6rem; font-family:'xeicon'; font-weight:bold}
.Calendar .DateArea a.next_month:before {content:''}

/*카드형 리스트 - 수학버스킹*/
.gallery_list .no-data {border:1px solid #ddd; padding:3rem 2rem; text-align:center; width:100%; margin:0 auto}

/*예약 상황*/
div.process {position:absolute; right:0; top:3rem}
div.process ul li {display:inline-block; margin-left:0.5rem}
div.process ul li span {color:#000; display:inline-block; position:relative; padding-left:0.5rem}
div.process ul li span:before {content:''; border-radius:5px; width:0.3rem; height:0.3rem; position:absolute; left:0; top:50%; transform:translateY(-50%)}
div.process ul li span.type01:before {background-color:#999} /*예약 대기중*/
div.process ul li span.type02:before {background-color:#e57373} /*예약 완료*/

/*달력 안 예약 현황*/
.Calendar-table ul li .type01 {background-color:#f3f3f3; color:#828282; display:block; padding:0 0.3rem} /*예약 대기중*/
.Calendar-table ul li .type02 {background-color:rgba(229,115,115,0.3); color:#d87979; display:block; border:1px solid #efc0c1; margin:-1px 0 0 0; padding:0 0.3rem} /*예약 완료*/

/*캘린더 리스트*/
.Calendar-table {border-top:2px solid #000; color:#333; font-size:1.4rem}
.Calendar-table table {width:100%}
.Calendar-table thead {border-bottom:1px solid #ddd}
.Calendar-table thead th {border-left:1px solid #ddd; border-bottom:1px solid #ddd; font-weight:500; line-height:3.5; text-align:center; padding:0 0.3rem}
.Calendar-table tbody td {background-color:#f9f9f9; border-left:1px solid #ddd; border-bottom:1px solid #ddd; color:#b9b9b9; height:60px; position:relative; padding:0; text-align:center; vertical-align:top}
.Calendar-table thead tr th:first-of-type, .Calendar-table tbody tr td:first-of-type {border-left:0}
.Calendar-table tbody .day {color:#b9b9b9; display:block; font-size:1.4rem; line-height:normal; padding:0.3rem 0 0 0}

.Calendar-table .sat .day {color:#96a7e4}
.Calendar-table .sun .day, .Calendar-table .holi, .Calendar-table .holi .day {color:#eaa195} 
.Calendar-table .sun .reserve, .Calendar-table .sun .reserve .day, .Calendar-table .holi .reserve, .Calendar-table .holi .reserve .day {color:#d44932}
.Calendar-table .sat .reserve .day {color:#3358dc}
.Calendar-table .reserve {background-color:#fff; display:block; width:100%; height:100%} /*예약 가능 흰배경*/
.Calendar-table .reserve-no {background-color:#f7f7f7; display:block; width:100%; height:100%} /*예약 불가능 흰배경*/
.Calendar-table .state {display:block; text-align:center}
.Calendar-table .state .circle {display:inline-block}
.Calendar-table .current,
.Calendar-table .current a {background-color:#f7e9e7 !important}
.Calendar-table .reserve .day, .Calendar-table .current .day {color:#333}

/*휴무일*/
.holiday {background-color:#F44336; border:1px solid #F44336; border-radius:100px; display:inline-block; font-size:11px; color:#fff; padding:0.1rem 0.5rem; line-height:normal; white-space:nowrap}

/*시간 예약*/
.timeList .tt {color:#333; font-size:2.2rem; font-weight:600}
.timeList .tt strong {color:#2c3787; margin-right:1rem}
.timeList ul {border-top:2px solid #000; clear:both; padding:1px 0 0 1px; margin:1.1rem 0 0; overflow:hidden}
.timeList ul li {border:1px solid #ddd; font-size:1.6rem; /*float:left; width:50%;*/ margin:-1px 0 0 -1px; height:5.5rem; line-height:3.3}
.timeList ul li a {color:#000; display:block; width:100%; height:100%}
.timeList ul li a:hover {background-color:#f8f9ed}
/*.timeList ul li:nth-child(-n+2) {border-top:0}*/
.timeList ul li.reserve-no {border:none; color:#d44933; font-size:1.8rem; font-weight:600; float:none; width:100%; padding:35% 0} /*예약 불가능 사유*/
/*시간 목록 제거*/
.timeList ul li.remove {background-color:#eee}
.timeList ul li.remove strong {color:#999; display:block; font-weight:300; text-decoration:line-through}

div.board_info fieldset input {border-top:1px solid #ddd}

.board_list td a {color:#333; display:block; font-weight:400; text-align:left}

.board_list .state {border-radius:100px; color:#fff; display:inline-block; font-size:1.4rem; padding:0 1rem; text-align:center; line-height:2; width:8rem}
.board_list .state.wait {background-color:#d6b326}/*접수대기*/
.board_list .state.ing {background-color:#06a056}/*접수중*/
.board_list .state.end {background-color:#c5c5c5; color:#333}/*접수종료*/
.board_list .state.book {background-color:#24499c}/*대기신청*/
.board_list .state.cancel {background-color:#d44933}/*취소하기*/


@media screen and (max-width:999px) {
	.Calendar-area .Calendar,
	.Calendar-area .timeList {border:0; display:block; width:100%}
	.holiday {padding:0 5px; white-space:inherit; line-height:1.1} /*휴무일*/
	
	.lecture_list .txt {padding:4rem 3rem}
	.con-group .txt {padding:4rem 3rem}
}
	
@media screen and (max-width:767px) {
	.program-select .btn a {display:block; width:70px; margin:1rem auto 0}
	
	.lecture_list .thum {display:block; width:100%; height:220px; overflow:hidden}
	.lecture_list .txt {display:block; width:100%}
	
	.con-group .thum {display:block; width:100%; height:220px; overflow:hidden}
	.con-group .txt {display:block; width:100%}
	
	.board_list .tstyle_list td::before {display:none}
	.board_list td a {font-size:1.8rem}
}

@media screen and (max-width:640px) {
	.lecture_list > ul > li {width:100%; margin-bottom:1rem}
}