@charset "utf-8";
/* icon */
.ti-calendar, .ti-alarm-clock, .ti-angle-left, .ti-angle-right,.ti-printer{ vertical-align: middle; line-height: 1em; height: 25px; display: inline-block; margin-top: -10px;}
.ti-angle-left:before{content:''; display: block; background:url(../images/board/angle-left.svg) no-repeat 0 0; width:15px; height: 25px; vertical-align: middle}
.ti-angle-right:before{content:''; display: block; background:url(../images/board/angle-right.svg) no-repeat 0 0; width:15px; height: 25px; vertical-align: middle}

.ReserBox {position: relative;margin-top:40px;margin-bottom: 10px;overflow: hidden;/* border-top: 2px solid #222; *//* border: 1px solid #ddd; *//* border-radius: 10px; */}
.ReserBox h5{position: relative;height: 59px;line-height: 59px;/* border-bottom: 1px solid #004cba; */font-size: 1.125em;font-weight: 700;color: #333;background: #eaf6f0;text-indent: 20px;}  
.ReserBox h5 small{ font-size: 14px; display: inline-block;}
.ReserBox > div{min-height: 400px;}
.ReserBox  .formSt dd.detail.full{padding:0 !important;border-top: 1px solid #ddd;overflow: hidden;width: 100%;display: flex;}
.ReserBox dt .txt{float: right;font-size: 0.8em; margin-top: 5px}
.ReserBox dt .txt p{margin-bottom:0;display:inline-block;color: #444;font-weight: 400;}
.ReserBox dt .txt .circle {margin: 0 5px 0 15px;}
.ReserBox dt .txt .circle.blue { color:#004cba; margin-left: 0;vertical-align: top;}
.ReserBox dt .txt .circle.green{ color:#218f57;}
.ReserBox dt .txt .circle.gray{color: #aeaeae;}

/* Calendar */
.calTable {width: 100%;text-align: center; }
.calTitle {/* height: 90px; *//* line-height: 90px; *//* border-bottom: 1px solid #ddd; */font-size: 2em;font-weight: 700;letter-spacing: -0.05em;font-family: 'Roboto','Noto Sans KR', 'Malgun Gothic', '맑은고딕', '돋움', sans-serif;}
.calTitle,.myCalendar {position: relative;margin: 0;padding: 0;text-align: center}
.calTitle .prevMonth,
.calTitle .nextMonth {color: #111;width: 50px;/* height: 90px; */text-decoration: none;display: inline-block;vertical-align: middle;}
.calTitle .prevMonth.disabled,
.calTitle .extMonth.disabled {opacity: .3;cursor: default !important;/*pointer-events: none;*/}
.calTitle .prevMonth {/* left: 0; */}
.calTitle .nextMonth {/* right: 0; */}
.calTitle span {width: auto;color: #111;}

.myCalendar {table-layout: fixed;padding: 0 0 20px;/* width: 320px; */max-width: 800px;margin: 0 auto !important; font-family: 'Roboto','Noto Sans KR', 'Malgun Gothic', '맑은고딕', '돋움', sans-serif}
.myCalendar tr th:last-child,
.myCalendar tr td:last-child { color: #5a7eec;}
.myCalendar tr th:first-child,
.myCalendar tr td:first-child,
.myCalendar tr td.holiday{  color: #ff6a5d;}
.myCalendar tr th.disabled:last-child,
.myCalendar tr td.disabled:last-child { color: #0171bd}
.myCalendar tr th.disabled:first-child,
.myCalendar tr td.disabled:first-child {color: #ff6a5d;}
.myCalendar tr td.disabled  {opacity: .5;cursor: default !important;/*pointer-events: none;*/}
.myCalendar tr td.disabled span {}
.myCalendar th {height: 80px;font-size: 1.25em;text-align: center;font-weight: 500;}
.myCalendar td {position: relative;font-size: 1.25em;border: 0;cursor: pointer;padding: 7px 3px;}
.myCalendar td span,
.myCalendar td a,
.myCalendar td button {display: inline-block;width: 75px;height: 75px;line-height: 75px;text-align: center;border-radius: 50%;font-weight: 500;}
.myCalendar tr td.disabled span {	background: #f1f1f1;}
.myCalendar tr td.disabled2 span {background: #f9dfdd;opacity: .4;color: #000;}
.myCalendar tr td.today{ opacity:1;}
.myCalendar tr td.today span {border: 2px solid #111;font-weight: 500;}
.myCalendar td.action a span,
.myCalendar td.action button span {color: #111 !important;font-weight: 700;background: #fcbd00;border: none!important;}
.myCalendar .blankLine th,
.myCalendar .blankLine td {  border-width: 0}
.myCalendar tr td.closed{opacity:1;}
.myCalendar tr td.closed span{ background-color:#ffd9cc; color:#333;}
.pop_calendar {position: relative;background: #fff;/* border: 1px solid #ddd; */float: left;width:calc(100% - 20em);padding: 3em 0 1.5em 0;border-radius: 10px 0 0 10px;}

.myCalendar .txt{text-align:left; font-size:0.88em; margin-top: 20px; color: #333;font-weight: 500; }
.myCalendar .txt i{ font-size:0.95em;font-style: normal;font-weight: 400;}
.myCalendar .txt .circle { margin: 0 3px 0 7px;}
.myCalendar .txt .circle:first-child{ margin-left:0;}
.myCalendar .txt .circle.red { color:#ffc8c3;}
.myCalendar .txt .circle.today{ color:#2d2d2d;}
.myCalendar .txt .circle.action{ color:#fcbd00; }

.date_arrow_box > ul { overflow: hidden; padding: 10px}

.time_cont {position: relative;float: right;width:20em;padding: 0;border: 1px solid #ddd;overflow: hidden;background: #fff;border-width: 0 0 0 1px;/* overflow-y: auto; */max-height: 775px;}
.time_cont .time-box {padding: 1.5em 1.2em;overflow-y: auto;height: calc(100% - 145px);}
.time_cont .time-box .tbl{margin: 0;}
.time_cont .time-box .disabled{ color:#666; background-color:#eee; border-color:#eee;}
.time_cont .time-box .disabled:hover{cursor: inherit;}
.ReserBox h5 .fR{ padding-right:15px;}
.ReserBox h5 .fR:before{content:":"; display: inline-block; vertical-align: middle; padding: 0 5px;}
/*
.time_select{overflow: auto;}
.time_select a{border:1px solid #ddd; padding:8px 22px; margin:0 3px 3px 0; border-radius: 50px; background: #fff; width: auto; height: auto; display: inline-block; float: left }
.time_select a.timeon{background:#65b8d6; border:1px solid #65b8d6; color: #fff;}
*/

.time_select button {height: 50px;line-height: 50px;display:block;border: 1px solid #218f57;color: #218f57;border-radius: 50px;cursor: pointer;font-size: 1em;background-color: #fff;text-decoration: none;font-weight: 500;position: relative;text-align: center;width: 100%;margin: 0 0 10px 0;transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.time_select button:nth-child(3n+3){ margin-right:0;}
.time_select button:active
.time_select button:focus,
.time_select button:hover {background-color: #218f57; border-color: #218f57; color:#fff;}
.time_select button.disabled,
.time_select button.null{cursor: default !important; /*pointer-events: none;*/border: 1px solid #ddd; }
.time_select button.null2 {cursor: default !important; /*pointer-events: none;*/border: 1px solid #218f57; }
.time_select button.disabled,
.time_select  button.null{opacity: .5;background-color: #efefef;color: #555;}
.time_select  button.null2 {opacity: .5;background-color: #218f57;color: #fff;}
.time_select button.active, 
.time_select button.active:hover {background-color: #218f57;color: #fff;border-color: #218f57;}
.time_select button span {display: inline-block;padding: 0 10px;}
.time_select button.waiting{ border-color:#00b271; color:#00b271;}
.time_select button.waiting:hover,
.time_select button.waiting.active{border-color:#00b271;background:#00b271; color:#fff;}
.time_select button.default:active,
.time_select button.default:focus,
.time_select button.default:hover{ cursor:default;border: 1px solid #218f57;color: #218f57; background-color:#fff;}

.time_cont .info_area{position: absolute;bottom:0;left:0;background: #f2f2f2;width: 100%;padding: 15px;border-top: 1px solid #ddd;display: flex;}
.time_cont .info_area .button{width:100%;text-align: center;}

@media only screen and (max-width: 1080px){ 
	
	.ReserBox {/* width:inherit; *//* display:block; */margin-bottom: 0;}
	.ReserBox h5, 
	.date_arrow_box h5 {height:auto;padding: 15px 0 13px; line-height:1.2em; text-indent: 10px}
	.ReserBox h5 small, 
	.date_arrow_box h5 small { font-size: 12px}
	.date_arrow_box {border: 1px solid #ddd;}

	.ReserBox .formSt dd.detail.full{display:block;}
	
	.ReserBox > div{ min-height: inherit;}
	.time_cont {float: none;width: 100%;/* max-width: 815px; *//* margin: 20px auto; */ height: auto;border-width: 1px 0 0 0px;}
	.time_cont .time-box{max-width:815px;margin:0 auto;height: auto;}
	.time_cont .info_area{position:relative; left:inherit; bottom:inherit;}
	.pop_calendar{float: none;width: 100%;max-width: 815px;margin: 0 auto;}
	.pop_calendar > div {margin-bottom: 20px;/* border: 1px solid #ddd; */}
	.pop_calendar > div:first-child { border-right: none;}
	.myCalendar .txt{padding:15px;}
	.time_select button { float:left; width:49%;}
	.time_select button:nth-child(even){float:right;}
}
@media only screen and (max-width: 768px){ 
	.ReserBox dt .txt{float:none; padding: 7px 0 0px 0; border-top:1px dotted #ddd; text-align: right; margin-top: 10px;letter-spacing: -0.1em;}
	
	.calTable {max-width: 320px; min-width: 290px; margin: 0 auto;}
	.calTitle { height: 40px; line-height: 40px;border:none; font-size: 1.5em;padding-top: 5px;}
	.calTitle .prevMonth,
	.calTitle .nextMonth{ height: 45px;}
	
	.pop_calendar {padding-top:15px;}
	.myCalendar th{height:40px;}
	.myCalendar th,
	.myCalendar td{ font-size:1em;}
	.pop_calendar > div  {width: 100%; margin: 0; padding:0; float: none }
	.myCalendar {border-left: none;border-right:none;padding: 0 0 10px; max-width:inherit; min-width:inherit; width: inherit}
	.myCalendar td span, .myCalendar td a, .myCalendar td button {width: 30px; height: 30px; line-height: 30px;}
	.date_arrow_box {margin-top: 15px;}
	
	.time_cont{height: 300px;/* margin-bottom: 15px; */}
	.time_cont .time-box{height: calc(100% - 117px);}
	.time_select button { float:none !important; width:100%; margin-bottom:5px;height: 40px;line-height: 40px;}
	.time_cont .info_area{}
}
@media only screen and (max-width: 350px){ 	
    .calTable {max-width:280px;min-width: 270px;}
	.ReserBox dt .txt .circle{ margin: 0 5px;}
}



/* 대관예약 */
.prg-form .info_ex02 { font-size: 13px; font-weight: 500; color: #e51919; margin: 10px 0 5px; font-family: "맑은고딕"; display: inline-block; margin-left: 3px}
.prg-form .info_ex02:before {content: "\e6c5";font-family: 'themify'; background: none;  width: inherit; height: inherit}
.prg-form .form_adress input:nth-child(2) { margin: 3px 0}
.prg-form input[type=radio][disabled] + label { opacity: .6}

ul.form_li { overflow: hidden}
ul.form_li > li { padding-left: 0; width: 50%; float: left; margin-bottom: 5px; color: #666}
ul.form_li > li:before { display: none !important}
ul.form_li .pay { display: inline-block;  width: 100px; text-align: right}
ul.form_li strong, .prg-form ul.form_li span { color: #333}

ul.form_jangbi > li {line-height: 30px; margin-bottom:2px; overflow: hidden}
ul.form_jangbi .check-wrap { width: calc( 75% - 50px ); float: left}
ul.form_jangbi .pay{ width: 80px; margin-right: 10px; float: left}
ul.form_jangbi .select {height: 30px;vertical-align: top;min-width: 50px !important;width: 50px; float: left; font-size: 14px} /*2020-06-29, 욱정 - PC 화면에서 셀렉트 박스가 보이지 않음, 50px로 수정, 모바일 화면 안깨짐*/

.c-line {border-width: 0px 0px 0px 0px;display: block;height: 2px;overflow: hidden;background: #cc1717;}

@media only screen and (max-width: 1080px){
	ul.form_li > li { width: 100%; float:none; clear: both}
}

/* 예약폼 */
.prg-form .tbl-form tfoot {border-top:1px solid #333;background: #ffeded;}
.prg-form .tbl-form tfoot th, .prg-form .tbl-form tfoot td {background: #ffeded;line-height: 30px;border-top: 1px solid #e9c9c9;}
.prg-form .tbl-form tfoot td span.money { min-width: 165px; text-align: right;  background-color: transparent;  padding: 0 5px; font-size: 15px; font-weight: 500;  color: #000; display: inline-block}
.prg-form .tbl-form tfoot td span.money#totalCost { min-width: 80px;}
@media only screen and (max-width: 768px){
	.prg-form .tbl-form tfoot th, .prg-form .tbl-form tfoot td { border-top:none; line-height: 25px;font-size: 1em;}		
	.prg-form .tbl-form tfoot td span.money{height: 25px;margin: 0px 0;font-size: 14px;}
	.prg-form .tbl-form tfoot span.dis_inB { float: right;min-width:70%; text-align: right}
}
/* 예약완료 신청서 */
.paper-wrap {overflow: hidden; border: 1px solid #444}
.paper-wrap h5 { font-size: 1.8em;font-weight: 400;color: #222;padding: 25px 0;text-align: center;border-bottom: 1px solid #444;}
.paper-wrap h6 { font-size: 1.125em;font-weight: 700;color: #222;padding: 10px 25px; border-top: 1px solid #ddd;}
.paper-wrap h5 + h6 {border-top: 0;} 
.paper-wrap .tbl_white  {border-top:0;margin:0}
.paper-wrap .tbl_white tr:last-child th, .paper-wrap .tbl_white tr:last-child td { border-bottom: 0}
.paper-wrap .tbl_white th {padding: 10px 25px; font-size: 1em; color: #333}
.paper-wrap .tbl_white td {padding: 10px 25px; font-size: 1em; color: #666}
.paper-wrap .tbl_white .tL th ,
.paper-wrap .tbl_white .tL td{ text-align: left; border-top: 1px solid #ccc;}
.paper-wrap .tbl_white thead th {background: #f8f8f8;border-bottom: 1px solid #ddd !important; text-align: center; color: #333;}
.paper-wrap .tbl_white tfoot th,
.paper-wrap .tbl_white tfoot td { border-top: 1px solid #ebd5d5; background-color: #fff0f0; color:#cd0e0e; border-left: 1px solid #ebd5d5; border-right: 1px solid #ebd5d5;}
.paper-wrap .tbl_white tfoot th, .paper-wrap .tbl_white tfoot strong {font-weight: 700;}
.paper-wrap .list01{padding: 15px 25px;border-top: 1px solid #ccc;font-weight: 500; }
.paper-wrap .agree-box {height: 270px; margin-bottom: 0;border-top: 1px solid #ccc;}
.paper-wrap .agree-box .agree-txt {overflow-y: auto;	overflow-x: hidden;	width: 100%;	height: 100%; padding: 15px 25px}
.paper-wrap .agree-box h5 {font-size: 1em ;font-weight: 600; color: #333; margin: 5px 0 10px; display: block; }
.paper-wrap .agree-box ul + h5 { margin-top: 20px}
.chk-wrap { text-align: center; margin: 15px 0}

@media only screen and (max-width: 1080px){
	.paper-wrap .tbl_white tbody th { width: 20%}
	.paper-wrap h3{padding: 20px 0; font-size: 1.3125em}
	.paper-wrap h4,
	.paper-wrap .tbl_white th,
	.paper-wrap .tbl_white td,
	.paper-wrap .list01,
	.paper-wrap .agree-box .agree-txt  {padding: 10px; font-size: 0.9375em}
}
@media only screen and (max-width: 768px){
	.paper-wrap h4,
	.paper-wrap .tbl_white th,
	.paper-wrap .tbl_white td {padding: 7px 5px;}
	.paper-wrap .tbl_white td {font-size: 13px; line-height: 1.3}
}

/* box_pw */
.box_pw{}
.box_pw p{width: 60%;display: block;margin: 0 auto 10px auto;}
.box_pw ul{width: 80%;margin: 0 auto;overflow:hidden;text-align:center;padding: 35px;border: 1px dashed #ddd;background:#f9f9f9;display: block;}
.box_pw ul li{ display:block; margin-bottom:10px; overflow: hidden;}
.box_pw ul label{float:left; padding: 3px 15px 3px 30px; display:block; background: url(../images/common/ico_guide.png) no-repeat 0px 7px; width:33%; text-align: left;}
.box_pw ul li:first-child input{ width:67%;}
.box_pw ul input{width: calc(100% - 310px);float:left;display:block;}
.box_pw ul li:last-child{ margin-bottom:0;}
.box_pw .btn{text-align:center;margin-bottom: 0;}
.box_pw .txtAuth{width: 67%;display:block;float: right;text-align: left;}

@media only screen and (max-width:1080px) {
	.box_pw ul, .box_pw p{width:70%;}
}
@media only screen and (max-width:768px) {
	.box_pw ul{width:80%;}
}

@media only screen and (max-width:640px) {
	.box_pw p{ width:100%;}
	.box_pw ul{width:100%; padding: 20px;}
	.box_pw ul label{ min-width:84px; padding: 3px 5px 3px 25px; width:100%; margin-bottom: 5px;}
	.box_pw ul input{width: calc(100% - 109px);}
	.box_pw ul li:first-child input{ width:100%;}
	.box_pw .txtAuth{ width:100%;}
}