@charset "utf-8";



.ui-process.type2>li{width:calc(33% - 30.5px);}
@media only screen and (max-width: 767px){
	.table {display:block;}
	.ui-process.type2>li{width:100%;}
	.program--contents .table tbody>tr>th {text-align:center;}
	.table-form td, .table-form th {border:none;}
	.table.table-bordered {display:table;}
}

.reservationWrap{overflow:hidden;}
.reservationWrap .calendarArea{}
.reservationWrap .calendarArea .title2 {margin:0 0 20px;}
.reservationWrap .calendarArea .title2:after {display:block; clear:both; visibility:hidden; content:'';}
.reservationWrap .calendarArea .info{float: left;padding: 5px 0 0;}
.reservationWrap .calendarArea .info span{display:inline-block;padding:3px 6px;color:#111;vertical-align: middle;}
.reservationWrap .calendarArea .info .holiday{border:1px solid #ddd;background:#ddd;}
.reservationWrap .calendarArea .info .not{border:1px solid #ddd;background:url(/images/prog/bg_pattern2.png)}
.reservationWrap .calendarArea .info .ok{border:1px solid #ccc;background-color:#fff}
.reservationWrap .calendarArea .info .select{border:1px solid #345aa0;background-color:#345aa0;color:#fff}
.reservationWrap .calendarArea .titbtn {float:right;}
.reservationWrap .calendarArea .calendar{clear:both;width:100%;padding:40px 20px 35px;border:1px solid #ddd}
.reservationWrap .calendarArea .calendar .calHeader{position:relative;text-align:center}
.reservationWrap .calendarArea .calendar .calHeader .calDate{display:inline;font-size:36px;font-weight:bold;line-height:100%;color:#000;letter-spacing:-2px}
.reservationWrap .calendarArea .calendar .calHeader .calBtn{display: block;position:absolute;top:5px;width: 32px;height: 32px;line-height:30px;cursor:pointer;}
.reservationWrap .calendarArea .calendar .calHeader .calBtn a{display: block;width: 100%;height: 100%;font-size:0;}
.reservationWrap .calendarArea .calendar .calHeader .prev{left:0;/* padding-left:40px */}
.reservationWrap .calendarArea .calendar .calHeader .next{right:0;/* padding-right:40px */}
.reservationWrap .calendarArea .calendar .calHeader .prev:before{position:absolute;top:0;left:0;z-index:1;width:32px;height:32px;border-radius:50%;background-color:#424245;content:''}
.reservationWrap .calendarArea .calendar .calHeader .prev:after{position:absolute;top:7px;left:10px;z-index:2;width:9px;height:16px;background:url(/images/prog/arrow_img.png) no-repeat -27px 0;content:''}
.reservationWrap .calendarArea .calendar .calHeader .next:before{position:absolute;top:0;right:0;z-index:1;width:32px;height:32px;border-radius:50%;background-color:#424245;content:''}
.reservationWrap .calendarArea .calendar .calHeader .next:after{position:absolute;top:7px;right:10px;z-index:2;width:9px;height:16px;background:url(/images/prog/arrow_img.png) no-repeat -18px 0;content:''}
.reservationWrap .calendarArea .calendar .schcal_tbl{width:100%;margin-top:27px;border-top:1px solid #555}
.reservationWrap .calendarArea .calendar .schcal_tbl th{padding:12px 0;border-bottom:1px solid #aaa;font-weight:bold;text-align:center}
.reservationWrap .calendarArea .calendar .schcal_tbl td{border-left:1px solid #ccc;border-bottom:1px solid #ccc;font-weight:500;text-align:center;vertical-align:top}
.reservationWrap .calendarArea .calendar .schcal_tbl td:first-child{border-left:none}
.reservationWrap .calendarArea .calendar .schcal_tbl td div{height:69px;padding:2px 0;font-size: 15px;}
.reservationWrap .calendarArea .calendar .schcal_tbl td.holiday{background: url(/images/prog/bg_pattern2.png);}
.reservationWrap .calendarArea .calendar .schcal_tbl td.not{background:url(/images/prog/bg_pattern2.png);}
.reservationWrap .calendarArea .calendar .schcal_tbl td.holiday{font-size:12px}
.reservationWrap .calendarArea .calendar .schcal_tbl td a{display:block;width:100%;height:100%;vertical-align: top;line-height: 1;}
.reservationWrap .calendarArea .calendar .schcal_tbl td button {display:block;width:100%;height: 100%;position: relative;}
.reservationWrap .calendarArea .calendar .schcal_tbl td button span {display:block;position: absolute;top: 0;width: 100%;vertical-align:top;font-weight: 500;color: #494949; }
.reservationWrap .calendarArea .calendar .schcal_tbl td.selected button span{color:#fff;}
.reservationWrap .calendarArea .calendar .schcal_tbl td.sun,.reservationWrap .calendarArea .calendar .schcal_tbl td.sun a{color:#c30c57}
.reservationWrap .calendarArea .calendar .schcal_tbl td.sat,.reservationWrap .calendarArea .calendar .schcal_tbl td.sat a{color:#1473b5}
.reservationWrap .calendarArea .calendar .schcal_tbl td.off{background-color:#fafafa}
.reservationWrap .calendarArea .calendar .schcal_tbl td.selected{background-color:#345aa0;font-weight:bold;}
.reservationWrap .calendarArea .calendar .schcal_tbl td.selected a{color:#fff}
.reservationWrap .timeArea{float:right;width:50%}
.reservationWrap .timeArea strong{font-size:22px;line-height:88%;font-weight:800;letter-spacing:-1px}
.reservationWrap .timeArea strong span{display:inline-block;margin-left:20px;font-size:14px;font-weight:normal;vertical-align:baseline}
.reservationWrap .timeArea .timeBtnGroup{width:100%;margin:22px 0 34px;border-collapse:collapse}
.reservationWrap .timeArea .timeBtnGroup:after{display:block;visibility:hidden;clear:both;content:''}
.reservationWrap .timeArea .timeBtnGroup li{display:table;float:left;width: 50%;height:100%;margin-left:-1px;margin-top:-1px;vertical-align:middle;}
.reservationWrap .timeArea .timeBtnGroup button{display:table-cell;position:relative;width:100%;padding: 35px 5px 20px;border:1px solid #ddd;font-size:15px;font-weight:600;background-color:transparent;}
.reservationWrap .timeArea .timeBtnGroup button span{display:block;margin-top:3px;text-align:center}
.reservationWrap .timeArea .timeBtnGroup button span:first-child{margin-top:0}
.reservationWrap .timeArea .timeBtnGroup button span.ampm1{color:#293855}
.reservationWrap .timeArea .timeBtnGroup button span.ampm2{color:#5e3a46}
.reservationWrap .timeArea .timeBtnGroup button:focus{padding:29px 0 20px;border:4px solid #424245}
.reservationWrap .timeArea .timeBtnGroup button .check{position:absolute;top:10px;left:50%;width:15px;height:12px;margin-left:-8px;background:url(/images/prog/red_check.png) no-repeat}
.reservationWrap .timeArea .timeBtnGroup button.disable .check{display:none}
.reservationWrap .timeArea .timeBtnGroup button.disable:after{position:absolute;top:15px;left:50%;width:15px;height:12px;margin-left:-8px;background:url(/images/prog/red_x.png) no-repeat;content:''}
.reservationWrap .timeArea .result{overflow:hidden;margin-top:12px;padding:23px 0;border:1px solid #ddd}
.reservationWrap .timeArea .result .date{float:left;width:50%;font-size:15px;font-weight:500;color:#635c56;text-align:center}
.reservationWrap .timeArea .result .date:before{display:inline-block;width:18px;height:18px;margin-right:10px;margin-top:-8px;background:url(/images/prog/icon_board.png) no-repeat 0 0;vertical-align:middle;content:''}
.reservationWrap .timeArea .result .time{float:left;width:50%;border-left:1px solid #ddd}
.reservationWrap .timeArea .result .time li{margin-top:5px;font-size:15px;font-weight:500;color:#635c56;text-align:center}
.reservationWrap .timeArea .result .time li:first-child{margin-top:0}
.reservationWrap .timeArea .result .time li:before{display:inline-block;width:18px;height:18px;margin-top:-5px;margin-right:5px;background:url(/images/prog/icon_board.png) no-repeat -21px -1px;vertical-align:middle;content:''}
.reservationWrap .timeArea .submitBtn{width:100%;height:68px;margin-top:32px;border: 1px solid #345aa0;background-color: #345aa0;font-weight:bold;line-height:55px;font-size:18px;color:#fff;transition:all .2s;}
.reservationWrap .timeArea .submitBtn:focus,.reservationWrap .timeArea .submitBtn:hover{background-color:#fafafa;color:#333}
.reservationWrap .timeArea .submitBtn .arrow{display:inline-block;position:relative;width:36px;height:36px;margin-left:15px;border:1px solid #424245;border-radius:50%;background-color:#fff;vertical-align:middle}
.reservationWrap .timeArea .submitBtn .arrow:before{position:absolute;top:9px;right:11px;width:9px;height:16px;background:url(/images/prog/arrow_img.png) no-repeat -9px 0;content:''}

@media(max-width:430px){
	.reservationWrap .calendarArea .title2 {margin:0 0 10px;}
	.reservationWrap .calendarArea .info {float:none;width:100%;text-align: right;}
    .reservationWrap .calendarArea .titbtn {float:none; width:100%;margin:0 0 10px;}
    .reservationWrap .calendarArea .titbtn a {display:block; }
}

.userGuideWrap{margin-top:50px;padding:40px 60px;border:1px solid #ccc}
.userGuideWrap .title{position:relative;padding-left: 30px;font-size:20px;font-weight:bold;color:#222}
.userGuideWrap .title:before{position: absolute;top: 7px;left: 8px;width: 18px;height: 18px;background: url(/images/prog/tit.jpg) no-repeat;content: '';}
.userGuideWrap .title b{margin:0 15px;font-size:26px;color:#e43e3e}
.userGuideWrap .title b:first-child{margin-left:10px}
.userGuideWrap .title .exMark{display:inline-block;position:relative;width:24px;height:24px;margin-right:20px;border:1px solid #222;border-radius:50%;background-color:#e43e3e;font-size:18px;line-height:24px;text-align:center;vertical-align:middle;color:#fff}
.userGuideWrap .title .exMark:before{position:absolute;top:-5px;right:-5px;left:-5px;bottom:-5px;border:2px solid #222;border-radius:50%;content:''}
.userGuideWrap ul{overflow:hidden;margin-top:30px}
.userGuideWrap ul li{float:left;position:relative;width:50%;min-height:100px;padding:10px 10px 10px 92px}
.userGuideWrap ul li img{position:absolute;top:10px;left:10px}
.userGuideWrap ul li p{line-height:130%}
.btnArea{margin-top:20px;text-align:right}
@media screen and (max-width:799px){
	.userGuideWrap{padding:30px 20px}
	.userGuideWrap ul li{float:none;width:100%;min-height:90px}
}
@media screen and (max-width:460px){
	.reservationWrap .calendarArea .calendar .calHeader .calDate{font-size:28px}
	.reservationWrap .calendarArea .calendar .calHeader .calBtn{top:-3px}
	.reservationWrap .calendarArea .calendar .calHeader .prev{padding-left:32px}
	.reservationWrap .calendarArea .calendar .calHeader .next{padding-right:32px}
	.reservationWrap .timeArea .result .date,.reservationWrap .timeArea .result .time{float:none;width:100%}
	.reservationWrap .timeArea .result .time{border-left:none}
}



.modal__open #top_link,
.modal__open #top_layout {z-index:1;}
.modal__body {width:600px;min-height:300px;padding: 50px;}
.modal__content {padding:0;}
.modal__content .list-1st li span {margin-right:10px;}
.modal__close-button span {width:50px; height:50px;}
.modal__close-button span:before{left:50%;width:30px;height:1px;margin-top:0;margin-left:-15px}
.modal__close-button span:after{width:1px;height:30px;margin-top:-15px}

@media(max-width:767px){
	.modal__body {overflow-y: auto;width: 80% !important;height: 60%;padding: 50px 20px;}
	.modal__content {}
}


.form-horizontal.bucket-form .form-group .control-label label {font-weight: bold;margin-bottom: 0;color: #333;font-size: 16px;}
.example-box p span {display:inline-block; font-weight:bold; color: #345aa0;}