@charset "utf-8";

/* common form element */
input.inpTxt, input.inpFile { padding:4px 2px; border:1px solid #abadb3; background:#fff; }
input.file + div{position:relative !important;display:inline-block !important;}
input.inpFile { margin:0 3px 0 0; }
textarea.txtArea {border:1px solid #abadb3; background:#fff; width:90% }
select.selTxt { min-width:80px; height:25px; }

/* 예약내역 확인 */
.rsrv_com { overflow:hidden}
.rsrv_com dt, .rsrv_com dd{ float:left}
.rsrv_com dd { margin-left:10px}
.rsrv_com dd + dt { margin-left:20px;}

/* 시설물 예약 신청 */
.rsv_top_area {overflow:hidden; margin: 0 0 30px}
.rsv_top_area .fa_info{ position:relative; width:45%; min-height:558px; float:left; border:1px solid #828282}
.rsv_top_area .fa_select{ position:relative; width:45%; min-height:558px; float:left; border:1px solid #828282}
.rsv_top_area .calendar_wrap{ width:53%; float:right; border:1px solid #d2d2d2;}
										
/* 시설물 예약 신청 - 시설물정보 */
.fa_info .fa_thumb{ display:block; width:100%; height:300px; overflow:hidden}
.fa_info .fa_thumb li{ height:100%;}
.fa_info .fa_thumb img{ width:100%; height:100%}
.fa_info .control {z-index:10}
.fa_info .control a { position:absolute; top:130px; display:block; text-indent:-10000px; width:40px; height:40px; overflow:hidden; background-position:center center; background-repeat:no-repeat }
.fa_info .control a.prev { left:16px; background-image:url('/images/web/sisuluser/sub/btn_th_prev.png'); }
.fa_info .control a.next { right:16px; background-image:url('/images/web/sisuluser/sub/btn_th_next.png'); }

.fa_info .info_txt{ padding:16px;}
.fa_info .info_txt dl{ overflow:hidden; height:25px; margin-top:5px; letter-spacing:-1px}
.fa_info .info_txt dl:first-child{margin-top:0;}
.fa_info .info_txt dt{float:left; width:20%; height:23px; line-height:21px; border:1px solid #a6b7ca; border-radius:12px; text-align:center; color:#778492;}
.fa_info .info_txt dd{float:right; line-height:23px; width:75%; color:#46474b; font-size:15px; text-align:left}
.fa_info .info_txt dd span{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.fa_info .info_txt dl:first-child dt{ border-color:#559bfa; color:#3479d8}

.fa_info .btn_list{ padding:16px; overflow:hidden; border-top:1px dotted #b7b7b7; letter-spacing:-1px}
.fa_info .btn_list a{ width:23%; text-align:center; margin:1%; float:left; display:block; background-color:#559bfa; color:#fff}
.fa_info .btn_list a span{ width:1%; display:table-cell; font-size:13px; height:38px; vertical-align:middle;}
.fa_info .btn_list a.dis{background-color:#6f7b88; color:#c4cacf}

/* 시설물 예약 신청 - 예약내용 선택/입력 */
.rsv_top_area .fa_select .s_tit { font-weight:bold; font-size:17px; height:50px; line-height:48px; padding:0 15px; border-bottom:1px solid #828282; background:linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%);}
.rsv_top_area .fa_select .rev_cont {position:relative; padding:20px;}
.rsv_top_area .fa_select .rev_cont .ss_tit { font-size:15px; background:url('/images/web/sisuluser/sub/bu2.png') no-repeat 0 6px; padding-left:10px; margin-bottom:10px; font-weight:bold}
.table_st1{width:100%; border-left:1px solid #d2d2d2; font-size:13px;}
.table_st1 tbody td, .table_st1 tbody th{border-bottom:1px solid #cbcbcb; border-right:1px solid #d2d2d2 ;padding:8px; line-height:1.5; text-align:center;}
.table_st1 th{ background-color:#fbfbfb}
.table_st1 tbody tr:first-child td, .table_st1 tbody tr:first-child th{border-top:1px solid #364054;}

/* 시설물 예약 신청 - 달력  */
.rsv_top_area .calendar_wrap .nowcal {position:relative; border-bottom:1px solid #d2d2d2; height:50px;}
.rsv_top_area .calendar_wrap .nowcal span {display:inline-block; text-indent:-9999px; content:''}
.rsv_top_area .calendar_wrap .prev_month {position:absolute; top:2px; left:0}
.rsv_top_area .calendar_wrap .currunt_month {width:100%; font-weight:bold; text-align:center; line-height:50px;}
.rsv_top_area .calendar_wrap .next_month {position:absolute; top:2px; right:0}
.rsv_top_area .calendar_wrap .prev_month a {display:block; width:46px; height:46px; background:url('/images/web/sisuluser/sub/arr_prv.png') no-repeat 50% 50% ;}
.rsv_top_area .calendar_wrap .next_month a {display:block; width:46px; height:46px; background:url('/images/web/sisuluser/sub/arr_nxt.png') no-repeat 50% 50%;}
.rsv_top_area .calendar{width:100%;border-bottom:1px solid #d2d2d2;}
.rsv_top_area .calendar thead th {height:40px; border-bottom:1px solid #d2d2d2;}
.rsv_top_area .calendar tbody td {text-align:center; height:45px; cursor:pointer; border-left:1px solid #ebebeb;border-top:1px solid #ebebeb; color:#555}
.rsv_top_area .calendar tbody td:first-child{border-left:none;}
.rsv_top_area .calendar tbody td:hover {background:#d5eded;}
.rsv_top_area .calendar .sun > p{color:#d23a3a;}
.rsv_top_area .calendar .sat > p{color:#2667ab;}
.rsv_top_area .calendar .select {background:#007dbd;font-weight:bold;}
.rsv_top_area .calendar .select:hover{background:#007dbd;}
.rsv_top_area .calendar .select > p {color:#fff;}
.rsv_top_area .calendar .rev_no{cursor:default;background:#f4dce0}
.rsv_top_area .calendar .rev_no:hover {background:#f4dce0}
.rsv_top_area .calendar .rev_ing{cursor:default;background:#fdfbd8 }
.rsv_top_area .calendar .rev_ing:hover {background:#fdfbd8 }
.rsv_top_area .calendar .rev_no p {text-decoration:line-through}
.rsv_top_area .calendar .rev_no p span { font-size:11px;}
.rsv_top_area .calendar .day_no:hover{ background:none;cursor:default;}


.cal_sort {padding:15px;}
.cal_sort > span {display:inline-block;font-size:14px;padding-right:5px;}
.cal_sort > span:before {content:''; display:inline-block; width:14px; height:14px; background:#fff; border:1px solid #d2d2d2; vertical-align:middle; margin-right:4px; font-size:11px; text-align:center}
.cal_sort > span.type2:before {background:#f4dce0; content:'';}
.cal_sort > span.type3:before {background:#fdfbd8; content:'';}

div.date_control {overflow:hidden; position: relative; margin: 0 0 10px; border: 1px solid #c9d5e6; vertical-align: top; background: #f2f6fc; padding:16px; font-size:16px; font-weight:bold}
div.date_control .tit { float:left}
div.date_control .date { float:right; color:#335082}

table.state_con{width:100%; border-left:1px solid #dbdbdb; border-top:1px solid #dbdbdb;}
table.state_con th, table.state_con td{border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; padding:8px;}
table.state_con th{ font-weight:normal; background:#f3f3f3;}
table.state_con td .img { text-align:center; position:relative; padding-bottom:50px;}
table.state_con td .img img {width:90%; height:auto}
table.state_con td .img .btn-zoom {position:absolute; bottom:0; left:50%; width:45px; height:45px; margin-left:-22.5px; display:block; z-index:100; background:url('../../../images/com/gne/cslide_sprite.png') no-repeat 0 0}	
	
.state_lst{ overflow:hidden}
.state_lst li{ float:left; width:13%; margin:0.5%}
.state_lst li a{ display:block; text-align:center; background-color:#fff; border:2px solid #ccc; font-size:13px; color:#666; padding:4px 4px 6px}
.state_lst li a.sel{background-color:#dcece5; border:2px solid #6fc19c;}
.state_lst li a.dis{background-color:#f4dce0; border:2px solid #ccc; cursor:default;}
.state_lst li a span{ display:block}

/* 부가정보 박스 */
.addInfo_box {overflow:hidden; background:#f2f4f7; border:1px solid #d1d8e4; padding:20px}
.addInfo_box .fl { width:49%}
.addInfo_box .fr { width:49%;}
.addInfo_box .txtArea {overflow:hidden; overflow-y:scroll; padding:1%; width:98%;}





@media (max-width:1019px) {
	
	/* 예약내역 확인 */
	.rsrv_com { overflow:hidden}
	.rsrv_com dt, .rsrv_com dd{ float:none; display:block;}
	.rsrv_com dt:first-child { margin-top:10px;}
	.rsrv_com dd { margin:5px 0 10px}
	.rsrv_com dd + dt { margin-left:0;}
	.rsrv_com dd.nam input.inpTxt{ width:25%; box-sizing:border-box}
	.rsrv_com dd.tel input.inpTxt{ width:25%; box-sizing:border-box}
	
	/* 시설물 예약 신청 */
	.rsv_top_area .fa_info{width:40%;}
	.rsv_top_area .fa_select{ width:100%; box-sizing:border-box; min-height:auto; margin-bottom:15px;}
	.rsv_top_area .fa_select + .calendar_wrap{ width:100% !important; box-sizing:border-box}
	.rsv_top_area .calendar_wrap{ width:58%;}
	
	/* 시설물 예약 신청 - 시설물정보 */
	.fa_info .fa_thumb{height:250px;}
	.fa_info .control a {top:105px;}
	.fa_info .control a.prev { left:2.5%;}
	.fa_info .control a.next { right:2.5%;}
	.fa_info .btn_list a{ width:48%;}
	.fa_info .btn_list a span{height:43px;}

	.state_lst li{width:15%;}
}

@media (max-width:890px) {
	
	/* 시설물 예약 신청 */
	.rsv_top_area .fa_info{width:100%; min-height:auto; box-sizing:border-box;  margin-bottom:15px}
	.rsv_top_area .calendar_wrap{width:100%; box-sizing:border-box;}

	/* 시설물 예약 신청 - 시설물정보 */
	.fa_info .btn_list a{ width:23%;}
	.fa_info .btn_list a span{height:45px;}
	
	/* 시설물 예약 신청 - 달력  */
	.rsv_top_area .calendar tbody td {height:50px;}
	.cal_sort {padding:10px;}
		
	.state_lst li{width:24%;}
	
	
}





@media (max-width:800px) {
	
	/* Force table to not be like tables anymore 181106 수정 */
	#no-more-tables_2, #no-more-tables_2 thead, #no-more-tables_2 tbody, #no-more-tables_2 th, #no-more-tables_2 td, #no-more-tables_2 tr {display: block; }
	#no-more-tables_2{border-left:0 !important;}
	#no-more-tables_2 thead tr { position: absolute; top: -9999px; left: -9999px}
	#no-more-tables_2 tr { border:1px solid #d2dae2; border-bottom:0; border-top:0 }
	#no-more-tables_2 th { border-right: 0;}
	#no-more-tables_2 td { border: none; border-bottom: 1px solid #d2dae2; position: relative; white-space: normal; text-align:center}
	
	/* 시설물 예약 신청 - 예약내용 선택/입력 */
	.table_st1 tbody td input.w100{ width:65px}
	

}

@media (max-width:680px) {
	
	/* 시설물 예약 신청 - 시설물정보 */
	.fa_info .info_txt dt{width:27%;}
	.fa_info .info_txt dd{width:70%;}
	
	/* 부가정보 박스 */
	.addInfo_box .fl { width:100%}
	.addInfo_box .fr { width:100%; margin-top:10px}
	

	
	
}

@media (max-width:580px) {

	
	/* 시설물 예약 신청 - 시설물정보 */
	.fa_info .info_txt dt{width:30%;}
	.fa_info .info_txt dd{width:67%;}
	.fa_info .btn_list a{ width:48%;}
	
	/* 시설물 예약 신청 - 달력  */
	.rsv_top_area .calendar tbody td {height:45px;}
	
	div.date_control .tit { float:none; display:block; margin-bottom:10px}
	div.date_control .date { float:none; display:block;}
	
	.state_lst li{width:32%;}
	


	
}

@media (max-width:480px) {
	
	/* 예약내역 확인 */
	.rsrv_com dd.nam input.inpTxt{ width:50%;}
	.rsrv_com dd.tel input.inpTxt{ width:29%;}

	
}

@media (max-width:380px) {
	
	.state_lst li{width:49%;}
		

	
}