.rservCon { font-size: 0.75rem; }

.rservCon .rs_tit01 { font-family: 'SCDream','NotoSans'; font-weight: 600; font-size: 0.8rem; }

.rservCon .rs_tit02 { font-family: 'SCDream','NotoSans'; font-weight: 600; font-size: 0.8rem; }

.rservCon .rs_tit03 { font-family: 'SCDream','NotoSans'; font-weight: 600; font-size: 0.8rem; }

.rservCon .box { margin-top: 0.5rem; }

.rservCon .box .rs_tit02 { background: #e6ebf6; border-radius:1rem 1rem 0 0; padding: 0.7rem 1rem; border:1px solid #c6d2ed;}

.rservCon .box .rs_tit02 .rs_tit02_2 { display: block; float: left; margin-right: 0.5rem; }

.rservCon .box .rs_tit03 { background: #f9f9f9; padding: 0.7rem 1rem; border-bottom: 1px dashed #dcdcdc; }

.rservCon .box .rs_tit03 span { vertical-align: middle; }

.rservCon .box .rs_tit03 .whBtn { margin-left: 0.5rem; }

.rservCon .box .inner { padding: 1rem; }

.rservCon .whBtn { display: inline-block; padding: 0 0.5rem; }

/*일반예약_스케줄표추가 201209*/
.calendarDate { position: relative; margin: 1rem 0 0 !important; padding: 1rem 0; background: #f4f4f4; border-top: 2px solid #000; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

.calendarDate .date { font-size: 1.2rem; font-weight: 600; border: none; line-height: 33px; vertical-align: middle; }

.calendarDate .btn_date { width: 33px; height: 33px; margin: 0 2px; line-height: 33px; border: 1px solid #bfbfbf; font-size: 1rem; }

.calendarWrap { position: relative; overflow-x: auto; }

.calendarBox { position: relative; min-width: 800px; padding-left: 60px; height: auto; overflow: hidden; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

.calendarBox .time-line { position: absolute; left: 0; top: 31px; width: 60px; padding-top: 19px; background-color: #fcfcfe; border-bottom: 1px solid #ddd; border-top: 2px solid #ddd; text-align: center; }

.calendarBox .time-line .time { display: block; height: 36px; line-height: 1px; }

.calendarBox .box_row .box_col { float: left; position: relative; margin-top: 42px; width: 14.28571428571429%; height: 911px; border-left: 1px solid #ddd; background: url("../images/sub/bg_timeline.png") repeat 0 10px; border-bottom: 1px solid #ddd; }

.calendarBox .box_row .box_col .boxTit { margin: -42px -1px 20px -1px; background: #fff; padding: 8px 7px 7px; height: 33px; border-bottom: 2px solid #ddd; font-size: 0.75rem; line-height: 1.3; text-align: center; }

.calendarBox .box_row .box_col .boxTit:before { content: ''; position: absolute; top: -42px; left: -1px; height: 60px; border-left: 1px solid #ddd; }

.calendarBox .box_row .box_col .time_card { position: absolute; left: 0; right: 0; z-index: 10; font-size: 12px; text-align: center; }

.calendarBox .box_row .box_col .time_card .txt_cell { display: table; width: 100%; height: 100%; }

.calendarBox .box_row .box_col .time_card .txt_cell a { display: table-cell; vertical-align: middle; }

.calendarBox .box_row .box_col .time_card.bg1 { background-color: #dfe9f8; }

/* 예약하기 201216 */
.reservBox .left { width: 49%; float: left; border: 1px solid #dcdcdc; }

.reservBox .left .img { position: relative; display: block; height: 22rem; overflow: hidden; }

.reservBox .left .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }

.reservBox .left dl { padding: 0.5rem 1.5rem 1.5rem; }

.reservBox .left dl dt { padding: 0.5rem 0; font-size: 1.5rem; font-weight: bold; text-align: center; border-bottom: 1px solid #000; }

.reservBox .left dl dd { padding: 1.3rem 1rem; background: #f9f9f9; border-bottom: 1px dashed #dcdcdc; }

.reservBox .right { width: 49%; float: right; }

.reservBox .right > div[class*="booking"] { border: 1px solid #dcdcdc; margin-bottom: 0.5rem; }

.reservBox .right .list { padding: 0 1.5rem; }

.reservBox .right .list > li { position: relative; height: auto; overflow: hidden; }

.reservBox .right .list > li p.tit { display: block; width: 5rem; float: left; padding: 1rem 0; line-height: 2rem; }

.reservBox .right .list > li div.con { width: calc(100% - 5rem); float: right; padding: 1rem 0; line-height: 2rem; }

.reservBox .right .list > li:not(:first-child) { border-top: 1px solid #ddd; }

.reservBox .right .detailTit { position: relative; display: block; height: auto; overflow: hidden; }

.reservBox .right .detailTit:hover { color: #ff5353; }

.reservBox .right .detailTit.on { border-bottom: 1px solid #ddd; }

.reservBox .right .detailTit.on:before { content: "\e932"; }

.reservBox .right .detailTit:before { content: "\e938"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); font-family: 'xeicon'; }

.reservBox .right .detailTit + .detail { display: none; }

.reservBox .right .detailTit + .detail .list { padding: 0; }

.reservBox .right .detailTit + .detail .list > li:not(:first-child) { border-top: 1px dashed #ddd; }

.reservBox .right .detailTit + .detail .list a.time { display: block; width: 23%; margin: 0 1% 0.3rem; line-height: 2.3rem; border-radius: 2.3rem; float: left; background: #ffc9c9; border: 1px solid #ffafaf; text-align: center; }

.reservBox .right .detailTit + .detail .list a.time:hover, .reservBox .right .detailTit + .detail .list a.time:focus { border-color: #f03838; }

.reservBox .right .detailTit + .detail .list a.time.unable { background: #f9f9f9; border-color: #ececec; }

.reservBox .right .detailTit + .detail .list a.time.checked { background: #f03838; border-color: #ececec; color: #fff; }

.reservBox .right .list_st3 li { font-size: 0.75rem; }

.reservBox .right .list_st3 li:before { top: 0.5rem; }

.reservBox .right .grayBox { background: #fafafa; }

.reservBox .right .booking1 { padding: 1.5rem; }

.reservBox .right .booking1 .calendarTit { text-align: center; line-height: 2.5rem; margin-bottom: 1rem; }

.reservBox .right .booking1 .calendarTit a { display: inline-block; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #ddd; }

.reservBox .right .booking1 .calendarTit a:hover, .reservBox .right .booking1 .calendarTit a:focus { color: #ff5353; }

.reservBox .right .booking1 .calendarTit strong { font-size: 1.5rem; padding: 0 1rem; }

.reservBox .right .booking1 .calendarTbl { text-align: center; }

.reservBox .right .booking1 .calendarTbl th { padding: 0.5rem; font-size: 0.7rem; color: #737373; }

.reservBox .right .booking1 .calendarTbl td { padding: 0.2rem; }

.reservBox .right .booking1 .calendarTbl td a.num { display: inline-block; width: 2.5rem; line-height: 2.5rem; border-radius: 50%; font-size: 0.9rem; color: #262626; font-weight: 700; }

.reservBox .right .booking1 .calendarTbl td a.num.unable { color: #d1d1d1; }

.reservBox .right .booking1 .calendarTbl td a.num.checked { background: #ff5353; }

.reservBox .right .booking1 .help_num { border-top: 1px dashed #dcdcdc; margin-top: 1rem; padding: 1rem 0 0; }

.reservBox .right .booking1 .help_num li { display: inline-block; margin: 0 0.5rem; }

.reservBox .right .booking1 .help_num li span { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: 0.3rem; }

.reservBox .right .booking1 .help_num li span.red { background: #ff5353; }

.reservBox .right .booking1 .help_num li span.gray { background: #dedede; border: 1px solid #c4c4c4; }

.reservBox .right .booking2 .grayBox { margin: 0 1.5rem 1.5rem; padding: 1rem; border-top: 1px dashed #ddd; }

.reservBox .right .booking2 .detailTit .con { color: #777; }

.reservBox .right .booking2 .detailTit:hover .con { color: #ff5353; }

.reservBox .right .booking3 { padding: 1rem 1.5rem; word-break: keep-all; }

.reservBox .right .booking4 .bookingTit { border-bottom: 1px solid #ddd; line-height: 3.6rem; padding: 0 1.5rem; }

.reservBox .right .booking4 .bookingTit h3 { display: inline-block; font-size: 1rem; }

.reservBox .right .booking4 .bookingTit span.ar { float: right; font-size: 0.75rem; }

.reservBox .right .booking4 .inner { background: #f9f9f9; padding: 1rem 0; }

.reservBox .right .booking4 .inner ul li { border: none; }

.reservBox .right .booking4 .inner ul li p.tit { padding: 0.2rem 0; }

.reservBox .right .booking4 .inner ul li .con { padding: 0.2rem 0; }

.reservBox .right .booking4 .agreemnent { font-size: 0.9rem; border-top: 1px solid #ddd; }

.reservBox .right .booking4 .agreemnent .ar { float: right; }

.reservBox .right .booking4 .agreemnent .agr_inner { padding: 0 1.5rem; background: #fff; word-break: keep-all; }

.reservBox .right .booking4 .agreemnent .agr_inner li .detailTit { padding: 0.7rem 0; font-size: 0.8rem; }

.reservBox .right .booking4 .agreemnent .agr_inner li .detail { height: 12rem; background: #f9f9f9; padding: 1rem; font-size: 0.75rem; margin-bottom: 1.5rem; overflow-y: auto; }

.reservBox .right .booking4 .agreemnent .agr_inner li:not(:first-child) { border-top: 1px solid #ddd; }

.reservBox .right .booking5 { word-break: keep-all; }

.reservBox .right .booking5 a.detailTit { padding: 1rem 1.5rem; }

.reservBox .right .booking5 a.detailTit:before { right: 1.5rem; }

.reservBox .right .booking5 .detail { background: #fff; padding: 1rem 1.5rem; }

.reservBox .right .btnWrap a { display: block; text-align: center; line-height: 3.3rem; text-align: center; }

.reservBox .right .btnWrap .redBtn { width: 70%; float: left; }

.reservBox .right .btnWrap .grayBtn { width: 29%; float: right; }

/*예약현황 리스트 201229*/
.btnArrw { display: inline-block; width: 2.1rem; height: 2.1rem; min-width:0; border: 1px solid #c7d3ec; border-radius: 50%; background: #fff; line-height: 2rem; text-align: center; font-size: 1rem; vertical-align: middle; padding:0; color:#182f50; }

.btnArrw:hover, .btnArrw:focus { color: #fff; background:#182f50; }

.reservList .rs_tit02 { position: relative; text-align: center; }

.reservList .rs_tit02 .date { position: relative; display: inline-block; vertical-align: middle; padding: 0.5rem 3rem; }

.reservList .rs_tit02 .date p { display: inline-block; padding: 0 0.8rem; font-size: 1.15rem; color:#182f50; font-weight:700; vertical-align: middle; }

.reservList .rs_tit02 .date p .xi-calendar { color: #646464; padding-left: 0.2rem; }

.reservList .rs_tit02 .date .btnArrw { position: absolute; top: 0.4rem; }

.reservList .rs_tit02 .date .btnArrw.btn_prev { left: 0; }

.reservList .rs_tit02 .date .btnArrw.btn_next { right: 0; }

.reservList .rs_tit02 .select { position: absolute; right: 1rem; bottom: 0.7rem; }

.reservList .rs_tit02 .select span { font-family: 'NotoSans'; vertical-align: middle; }

.reservList .rs_tit02 .select select { color: #145598; margin-left: 0.2rem; }

.reservList .rs_tit03 { height: auto; overflow: hidden; }

.reservList .rs_tit03 .fr { font-family: 'NotoSans'; }

.reservList .rs_tit03 .fr .whBtn { padding: 0.2rem 0.5rem; margin-left: 0.2rem; }

/*예약현황_월간 201229*/
.monthOption { display: none; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); top: 3.2rem; width: 16rem; height: auto; background: #fff; border: 1px solid #ddd; z-index: 2; }

.monthOption .month { width: 100%; border-top: 1px solid #ddd; }

.monthOption .month li { width: 33.3333%; float: left; display: block; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }

.monthOption .month li a { display: block; line-height: 3rem; }

.monthOption .month li a:hover, .monthOption .month li a:focus { background: #eee; }

.monthOption .month li:nth-child(3n) { border-right: none; }

.monthOption .month li:nth-child(n+10) { border-bottom: none; }

.monthOption.on { display: block; }

.whBtn.on { background: #999; color: #fff; }

.scheduleSelect { position: absolute; right: 0.8rem; top: 1rem; }

.scheduleSelect a { display: inline-block; padding: 0.3rem 0.5rem; border: 1px solid #dedede; border-radius: 0.2rem; font-size: 0.75rem; background:#fff; }

.scheduleSelect .btnToday { border-color: #ff0022; color: #ff0022; }

.scheduleSelect .catg { display: inline-block; }

.scheduleSelect .catg a { border-color: #dedede; }

.scheduleSelect .catg a:hover, .scheduleSelect .catg a:focus { color:#0098d9;}

.scheduleSelect .catg a.on { background: #3e4e6f; color: #fff; }

.scheduleTable table {table-layout:fixed;}

.scheduleTable td { text-align: left; padding: 0.2rem; vertical-align: top; }

.scheduleTable .today{ background: #f5f5f5; }

.scheduleTable td .date { display: inline-block; width: 1.5rem; line-height: 1.5rem; }

.scheduleTable td .con { min-height: 5rem; margin-top: 0.2rem; }

.scheduleTable .bgGray { background: rgba(0, 0, 0, 0.03); }

.scheduleTable .sche_tit { float: right; font-size: 0.75rem; line-height: 1.5rem; }

.scheduleTable .today .sche_tit { color: #ff0022; }

.scheduleTable .today .date { background: #ff0022; color: #fff; border-radius: 50%; text-align: center; }

.scheduleTable .schedulebtn { position: relative; display: block; width: 100%; font-family: 'NotoSans'; font-size: 0.75rem; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left; }
.scheduleTable .schedulebtn:hover,
.scheduleTable .schedulebtn:focus { text-decoration:underline; }
.scheduleTable .schedulebtn + button { margin-top: 0.2rem; }

.scheduleTable .schedulebtn span { float: left; }

.scheduleTable .schedulebtn em { float: right; font-weight: bold; }

.scheduleTable .schedulebtn.remain { color: #777; /*cursor: default; */}

.scheduleTable .schedulebtn.avail { background: #c8d4ee; border-radius: 0.2rem; }

.scheduleTable .schedulebtn.avail:hover, .scheduleTable .schedulebtn.avail:focus { background: #b0c0e4; }

.sche_week th { text-align: left; }

.sche_week th .date { font-size: 1rem; }

.sche_week th .date:after { content: '/'; position: relative; font-size: 0.65rem; }

.sche_week th .tit { font-size: 0.65rem; float: right; color: #555; margin-left: 0.5rem; line-height: 1.7rem; }

/* 캘린더 포인트 색상 */
.date_red { color:#ff0000; }
 
@media (max-width: 1200px) { /*왼쪽메뉴 + 서브페이지 레이아웃*/ 
  /* 예약하기 201216 */
  .reservBox .left { width: 100%; }
  .reservBox .right { width: 100%; margin-top: 1rem; } }

@media (max-width: 900px) { /*예약상품*/
  .rservBox { width: 100%; margin-left: 0; }
  /*예약현황 리스트 201229*/
  .reservList .rs_tit02 .select { position: relative; right: auto; bottom: auto; }
  /*예약현황_월간 201229*/
  .scheduleSelect { position: relative; right: auto; top: auto; margin-top: 0.3rem; }
  /* 테이블 스크롤 201229 */
  .scroll_gr2 { width: 100%; overflow-x: auto !important; background-repeat: no-repeat !important; background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%) !important; background-position: right 5px !important; background-size: 30px 100% !important; z-index: 1; }
  .scroll_gr2 table { width: 900px !important; } 
}
 
@media (max-width: 580px) { 
  /*일반예약_스케줄표추가 201209*/
  .calendarDate { padding-top: 3rem; }
  .calendarDate .date { position: absolute; left: 0; top: 0.5rem; width: 100%; text-align: center; font-size: 1rem; }
  /*기본정보 201211*/
  .time_slct { margin-top: 0.5rem; }
  .input_text { width: 100%; margin: 0.2rem 0; }
  .input_text input { width: 50%; }
  /*201214 추가*/
  .reservOn ~ .openCon { position: relative; right: auto; bottom: auto; margin: 0.5rem auto 0; }
  /* 예악하기 2012116 */
  .reservBox .right .booking1 .calendarTbl th { padding: 0 0.2rem; }
  .reservBox .right .booking1 .calendarTbl td a.num { width: 100%; }
  .reservBox .right .booking1 .calendarTbl td a.num.checked { background: #fff; color: #ff5353; }
  .reservBox .right .detailTit + .detail .list a.time { width: 48%; }
  /*예약현황 리스트 201229*/
  .reservList .rs_tit02 .date { width: 100%; padding:.5rem;}
  .reservList .rs_tit02 .date p { padding: 0 0.2rem; }
  .reservList .rs_tit02 .date .btnWrap { margin: 0.2rem 0 0; }
  .reservList .rs_tit02 .date .btnArrw { width: 2rem; height: 2rem; line-height: 2rem; position: relative; top: auto; } }

@media (max-width: 460px) { 
  /*예약상품*/
  .rservBox .con li dl dd { width: 100%; }
  .rservBox .btn_wrap { padding: 1rem 0.5rem; } 
  /*예약현황 리스트 201229*/
  .rservCon .box .rs_tit03 { text-align: center; }
  .rservCon .box .rs_tit03 div { width: 100%; }
  .rservCon .box .rs_tit03 div + div { margin-top: 0.5rem; } }

@media (max-width: 360px) { /*예약자입력정보설정*/
  .reservInfo .left ul li { padding-left: 0 !important; }
  .reservInfo .left ul li span { position: relative; left: auto; top: auto; line-height: 1.5rem; } 
  /* 예약하기 201216 */
  .reservBox .left dl { padding: 0.5rem 0.6rem 0.6rem; }
  .reservBox .right .list > li p.tit { width: 100%; padding: 0.5rem 0 0; }
  .reservBox .right .list > li div.con { width: 100%; padding: 0 0 0.5rem; }
  .reservBox .left dl dd, .reservBox .right .booking1, .reservBox .right .booking3, .reservBox .right .booking5 a.detailTit, .reservBox .right .booking5 .detail { padding: 1rem 0.6rem; }
  .reservBox .right .list, .reservBox .right .booking4 .bookingTit, .reservBox .right .booking4 .agreemnent .agr_inner { padding: 0 0.6rem; }
  .reservBox .right .booking2 .grayBox { margin: 0 0.6rem 0.6rem; }
  .reservBox .right .booking5 a.detailTit:before { right: 0.6rem; }
  .reservBox .right .btnWrap .redBtn { width: 60%; }
  .reservBox .right .btnWrap .grayBtn { width: 39%; }
  .reservBox .right .booking1 .calendarTit strong { font-size: 1.2rem; }
  .reservBox .right .booking1 .calendarTit { line-height: 1.8rem; }
  .reservBox .right .booking1 .calendarTit a { width: 1.8rem; height: 1.8rem; } }

@media (max-width: 320px) { 
  /*예약상품*/
  .rservBox .btn_wrap a { width: 45% !important; margin: 0.1rem 0; } 
  /*일반예약_스케줄표추가 201209*/
  .calendarDate .date { font-size: 0.9rem; } }