@charset "utf-8";

/**
 *	레이아웃 
 */
#contents{padding-bottom:50px;}

/* .contents-tab {width: 100%; padding: 30px 0; text-align: center;  }
.contents-tab ul {display: inline-block; margin: 0 auto; text-align: center; }
.contents-tab ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.contents-tab ul li {float: left; position: relative; }
.contents-tab ul li + li:before {content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #7abd9c; }
.contents-tab ul li a {color: #fff; font-size: 18px; } */

.contents-head{height:88px;line-height:88px;position:relative;text-align:center;}
.contents-head .page-title{color:#fff;font-size:24px;font-weight:600;}
/* .contents-head .page-title::before {
	content: "";
	display: inline-block;
	margin-top: -2px;
	margin-right: 12px;
	width: 48px;
	height: 49px;
	background: url("../images/sub/img_character.png") no-repeat;
	vertical-align: middle;
} */
.contents-head .btn-prev{position:absolute;top:50%;left:0;width:34px;height:34px;margin-top:-17px;}
.contents-head .btn-prev .icon{display:block;line-height:1;}
.contents-head .btn-prev .icon::after{content:"\f0a8";font-family:"Font Awesome 5 Free";font-size:34px;font-weight:bold;color:#fff;}
/* 단쳬예약 타이틀 */
.contents-head .group-title{position:absolute;bottom:18px;right:25px;line-height:1;color:#fff;font-size:16px;}
.contents-head .group-title strong{color:#f07f27;font-weight:inherit;}
.contents-head .group-title .title-mobile{display:none;}

.contents-body{position:relative;min-height:546px;background:#fafadc;border-radius:30px;padding:23px;}
.contents-wrap{background:#fff;border-radius:20px;padding:25px 30px;border:1px solid #c2daa3;}
.contents-body > .contents-wrap{min-height:calc(100vh - 375px);position:relative;}

.contents-section + .contents-section{margin-top:1.2em;}

@media (max-width:1024px) {
	#contents{background:#fafadc;padding-bottom:40px;}

	.contents-head .page-title,
	.contents-head .btn-prev .icon::after,
	.contents-head .group-title{color:#684e47;}
	.contents-head .page-title::before{display:none;}

	.contents-head .group-title{right:20px;}

	.contents-body{padding:0;min-height:0;}
	.contents-body > .contents-wrap{min-height:calc(100vh - 305px);}
}
@media (max-width:768px) {
	#contents{background:#fff;padding-bottom:0;}

	.contents-head{height:41px;line-height:41px;background:#55a57e;margin:0 -20px;}
	.contents-head .page-title{color:#fff;font-size:15px;font-weight:600;}
	.contents-head .btn-prev{left:20px;width:20px;height:20px;margin-top:-10px;}
	.contents-head .btn-prev .icon{line-height:20px;}
	.contents-head .btn-prev .icon::after{content:"\f060";color:#fff;font-size:20px;vertical-align:top;}

	.contents-head .group-title{bottom:55px;right:0;background:#684e47;color:#fff;font-size:13px;padding:8px 12px 8px 16px;border-radius:14px 0 0 14px;}
	.contents-head .group-title .title-pc{display:none;}
	.contents-head .group-title .title-mobile{display:block;}

	.contents-body{background:none;}
	.contents-body > .contents-wrap{min-height:0;border:0;padding:20px 0;}
}

/*=========================================================================================================================================*/
/**
 *	타이틀 
 */
h3.contents-title{margin-bottom:8px;color:#00ca68;font-size:22px;font-weight:600;}
h3.contents-title .title-guide{display:inline-block;padding-left:10px;font-size:16px;color:#414141;}
h4.contents-subtitle{display:block; padding-bottom:5px; font-size:18px; font-weight:500; }

@media (max-width:768px) {
	h3.contents-title{margin-bottom:5px;font-size:16px;}
	h4.contents-subtitle{padding-bottom:3px; font-size: 14px; }
}

/**
 *	텍스트 
 */
.contents-desc{color:#222;font-size:14px;font-weight:500;word-break:keep-all;}
.contents-desc + .contents-desc,
.dotted-list ~ .contents-desc{margin-top:.2em;}
.dotted-list + .contents-desc{margin-top:.7em;}

.contents-info{color:#e36412;font-size:16px;font-weight:500;word-break:keep-all;text-align:center;line-height:1.65;}
* ~ p.contents-info{margin-top:1.1em;}
.table-basic + .contents-info{margin-top:0;padding:1.6em;border-bottom:1px solid #b8ceea;}

.info-desc{position:relative;font-weight:600;font-size:18px;color:#222;}
.info-desc::before {
	content: "\f05a";
	/* position: absolute;
	top: -3px;
	left: 0; */
	display: inline-block;
	margin-right: 12px;
	font-family: "Font Awesome 5 Free";
	font-size: 24px;
	font-weight: bold;
	color: #23a1e2;
}
.dotted-list + .info-desc{margin-top:.8em;}

.text-through {text-decoration: line-through;color:#b2b2b2;font-size:14px;}


@media (max-width:768px) {
	h3.contents-title .title-guide{display:block;padding-top:10px;padding-left:0;font-size:13px;}

	.contents-desc{font-size:12px;}
	
	.contents-info{font-size:13px;}

	.info-desc{font-size:13px;}
	.info-desc::before{font-size:16px;margin-right:8px;vertical-align:middle;margin-top:-2px;}

	.text-through{font-size:11px;}
}

/**
 *	리스트
 */
/* 점이 있는 리스트 */
.dotted-list > li{position:relative;padding-left:20px;color:#222;font-size:18px;font-weight:500;word-break:keep-all;}
.dotted-list > li + li{margin-top:.4em;}
.dotted-list > li::before{content:"";position:absolute;top:10px;left:5px;width:6px;height:6px;background:#55a57e;border-radius:50%;}
.dotted-list .table-basic{margin-top:.5em;}

@media (max-width:768px) {
	.dotted-list > li{font-size:13px;padding-left:17px;}
	.dotted-list > li::before{width:4px;height:4px;top:7px;left:5px;}

	.modal-body .dotted-list > li{font-size:16px;}
}

/* 앞에 별붙은 리스트 */
.star-list{padding:10px 15px;}
.star-list li{position:relative;padding-left:16px;color:#2bae0f;font-size:16px;font-weight:500;word-break:keep-all;}
.star-list li::before{content:"*";position:absolute;left:0;}

@media (max-width:768px) {
	.star-list > li{font-size:12px;padding-left:10px;}
}

.dl-list{}
.dl-list:after{content:"";clear:both;display:block;height:0;visibility: hidden;}
.dl-list dt,
.dl-list dd{float:left;margin-top:4px;}
.dl-list dt{clear:left;position:relative;width:17%;padding-right:10px;line-height:1.3;}
.dl-list dt:after{content:"";display:inline-block;position:absolute;top:4px;right:0;width:1px;height:65%;background-color:#adacac;}
.dl-list dd{width:calc(100% - 17% - 22px);margin-left:10px;word-break:keep-all;line-height:1.3;text-align:left;}

@media (max-width:768px) {
	.dl-list.popup-text dt,
	.dl-list.popup-text dd{font-size:13px;}
	#dialog_info dl + .text-guide{font-size:12px;}
}


/**
 *	박스
 */
/* 상단 박스 */
.top-box{display:table;width:100%;text-align:center;margin-top:-20px;}
.top-box .box-wrap{height:116px;display:table-cell;padding:16px 6%;vertical-align:middle;}
.top-box .box-wrap p{font-size:18px;word-break:keep-all;line-height:1.55;}
.top-box .box-wrap p.important{position:relative;display:inline-block;font-weight:600;font-size:20px;padding-left:36px;}
.top-box .box-wrap p.important::before {
	content: "\f05a";
	/* position: absolute;
	top: -3px;
	left: 0; */
	display: inline-block;
	margin-right: 12px;
	font-family: "Font Awesome 5 Free";
	font-size: 24px;
	font-weight: bold;
	color: #55a57e;
}
.top-box .box-wrap p + p{margin-top:.4em;}

@media (max-width:768px) {
	.top-box .box-wrap{height:60px;}
	.top-box .box-wrap p{font-size:13px;}
	.top-box .box-wrap p.important{font-size:15px;padding-left:20px;}
	.top-box .box-wrap p.important::before{font-size:13px;/* top:0; */margin-right:7px;}
}

/*=========================================================================================================================================*/
/** 
 *  버튼
 */
.btn{display: inline-block;border-radius:24px !important;text-align: center;cursor: pointer;white-space: nowrap;vertical-align:middle;box-shadow:none !important;}
.btn[disabled]{background:#ccc !important;cursor:default;}

/*** 버튼 - 채워진 형태 ***/
.btn.btn-background {
	min-width: 120px;
	height: 42px;
	padding: 0 20px;
	border: none;
	background: #666;
	color: #fff !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 42px;
}
/* 크기*/
.btn.btn-background.btn-xsmall{min-width: 50px; padding: 0 15px; height: 28px; font-size: 14px; line-height: 28px;}
.btn.btn-background.btn-small{min-width: 60px; padding: 0 20px; height: 34px; font-size: 14px; line-height: 34px;}
.btn.btn-background.btn-large{min-width:170px; height:48px; padding: 0 30px; font-size: 18px; line-height: 48px;}
.btn.btn-background.btn-xlarge{min-width:262px; height:56px; padding: 0 30px; font-size: 26px; line-height: 56px;border-radius:28px !important;}
/* 색상*/
.btn.btn-background.modify, /* 변경 */
.btn.btn-background.auth-num, /* 인증번호 발송 */
.btn.btn-background.add-booking, /* 추가예약 */
.btn.btn-background.confirm{background:linear-gradient(to bottom, #ff72aa 0%, #e7015c 100%);} /* 확인 */
.btn.btn-background.booking{background:linear-gradient(to bottom, #ff72aa 0%, #e7015c 98%);} /* 예약하기, 결제하기 */
.btn.btn-background.cancel{background:linear-gradient(to bottom, #959595 0%, #6c6c6c 98%);} /* 취소 */
.btn.btn-background.complete{background:linear-gradient(to bottom, #ff72aa 0%, #e7015c 98%);} /* 완료 */
.btn.btn-background.qr-ticket, /* QR티켓 보기 */
.btn.btn-background.print, /* 인쇄 */
.btn.btn-background.auth{background:linear-gradient(to bottom, #47d060 0%, #55a57e  100%);} /* 인증 */
.btn.btn-background.auth-num,
.btn.btn-background.auth{min-width:157px;}
.btn.btn-background.auth-num {background: linear-gradient(to bottom, #47d060 0%, #55a57e 100%);}
.btn.btn-background.qr-ticket{position:relative;padding-left:60px;border-radius:10px !important;text-align:right;}
.btn.btn-background.qr-ticket i{position:absolute;top:50%;left:20px;font-size:24px;transform:translateY(-50%);}

/* 더하기, 빼기 버튼 */
.btn-plus,
.btn-minus {
	width: 42px;
	height: 42px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #cecece;
	color: #414141;
	font-size: 16px;
	vertical-align: middle;
	margin-left: 4px;
}
.btn-plus.small,
.btn-minus.small{width:32px;height:32px;font-size:13px;margin-left:0;}

@media (max-width:768px) {
	.btn.btn-background{height:32px;font-size:13px;line-height:32px;}
	.btn.btn-background.btn-large{min-width:130px;height:42px;font-size:15px;line-height:42px;padding:0 14px;}
	.mobile-fixed-group .btn.btn-background.btn-xlarge {min-width:150px;height:38px;padding: 15px 0 calc(constant(safe-area-inset-bottom) + 15px); padding: 15px 0 calc(env(safe-area-inset-bottom) + 15px); line-height: 8px; font-size:15px;border-radius:20px 20px 0 0 !important;}

	.btn.btn-background.auth-num,
	.btn.btn-background.auth{min-width:110px;}

	.btn-plus,
	.btn-minus{width:32px;height:32px;font-size:13px;}
	.btn-plus.small,
	.btn-minus.small{width:30px;height:30px;font-size:12px;}
}
@media (max-width:360px) {
	.btn.btn-background.btn-large{min-width:110px;font-size:14px;}
}

/*=========================================================================================================================================*/
/** 
 *  버튼 그룹
 *	.btn-group: 버튼 그룹 기본 클래스
 *	.btn-group .left-group: 왼쪽 정렬 버튼 그룹
 *	.btn-group .right-group: 오른쪽 정렬 버튼 그룹
 *	.btn-group .center-group: 중앙 정렬 버튼 그룹
 */
.btn-group{display:table;width:100%;table-layout:fixed;margin-top:30px;}
.btn-group.top{margin-top:0;margin-bottom:30px;}

.btn-group [class$="group"]{display:table-cell;vertical-align:middle;}
.btn-group .left-group{text-align:left;}
.btn-group .right-group{text-align:right;}
.btn-group .center-group{text-align:center;}
.btn-group .left-group a,
.btn-group .left-group .btn{margin-right:6px;}
.btn-group .right-group a,
.btn-group .right-group .btn{margin-left:6px;}
.btn-group .center-group a,
.btn-group .center-group .btn{margin:0 3px;}

.btn-group .group-row::after{content:'';display:block;clear:both;}
.btn-group .group-row + .group-row{margin-top:10px;}
.btn-group .group-row .btn{width:100%;float:left;min-width:0;}
.btn-group .group-row.btn-2 .btn{width:48.5%;}
.btn-group .group-row.btn-2 .btn + .btn{margin-left:3%;}

/* 하단에 붙는 버튼 */
.btn-group.group-bottom{position:absolute;bottom:30px;left:0;right:0;}
/* 하단에 붙는 버튼이 올 경우 써야하는 클래스 */
.with-button-group{padding-bottom:88px;}

@media (max-width:768px) {
	.btn-group{margin-top:20px;}
	.btn-group.top{margin-bottom:20px;}

	/* 모바일에서 하단에 고정된 버튼 */
	.mobile-fixed-group{position:fixed;bottom:0;left:0;right:0;z-index:2;text-align:center;animation:slideUp .4s ease;}

	.btn-group.group-bottom{position:static;}
	.with-button-group{padding-bottom:0;}
}

/*=========================================================================================================================================*/
/** 
 *	폼요소
 */ 
.form-control{position:relative;}
.form-control .form-control{padding-bottom:0;}
.form-control:after{content:'';display:block;clear:both;}
/* .form-control input.inp-text{width:100%;}
.form-control input.inp-file{width:100%;}
.form-control select.sel{width:100%;} */
.form-control .message-wrap{min-height:1.4em;margin-top:4px;line-height:1.4;}
.form-control .error-message{color:#e9346b;font-size:11px;letter-spacing:-.02em;word-break:keep-all;font-weight:500;}
.form-control .error-message.hidden{display:none;}
.form-control .control-col{float:left;width:calc(100% - 130px);}
.form-control .control-col.col-button{text-align:right;width:130px;}

div.form-control{width: 100%; max-width: 100%;}
div.form-control+div.form-control{margin-top:2px;}
span.form-control{display: inline-block; max-width: 100%; margin:2px 20px 2px 0; vertical-align: middle;}
span.form-control:last-child{margin-right:0;}
span.form-control.check-control{margin-right:15px;}
span.form-control.check-control:last-child{margin-right:0;}

.form-control.input-with-sel,
.form-control.element-3{max-width:630px;}
.form-control.input-with-sel::after,
.form-control.element-3::after{content:"";display:block;clear:both;}
.form-control.input-with-sel .sel,
.form-control.element-3 .sel{width:32.333%;float:left;}
.form-control.input-with-sel .sel,
.form-control.element-3 .sel + .sel{margin-left:1.5%;}
.form-control.input-with-sel .inp-text{float:left;width:66.167%;}

/* placeholder */
::-webkit-input-placeholder{color: #a6a8ab;font-size:12px;font-weight:normal;}
:-moz-placeholder{color: #a6a8ab;font-size:12px;font-weight:normal;}
::-moz-placeholder{color: #a6a8ab;font-size:12px;font-weight:normal;}
:-ms-input-placeholder{color: #a6a8ab;font-size:12px;font-weight:normal;}

/* focus color */
input.inp-text:focus,
select.sel:focus{border-color:#3fbf81;outline:none;}
input.inp-text[readonly]:focus,
input.inp-text[disabled]:focus,
select.sel[readonly]:focus,
select.sel[disabled]:focus{border-color:#cecece;outline:none;}

/* form 공통 */
input.inp-text,
select.sel {
	width: 240px;
	height: 42px;
	color: #2a9348;
	font-size: 18px;
	background-color: #fff;
	border: 1px solid #cecece;
	border-radius: 20px;
	vertical-align: middle;
	font-weight: 600;
}

/* input[type=text, password] */
input.inp-text{padding:0 20px;}
input.inp-text[readonly],
input.inp-text[disabled]{background:#efefef !important;cursor:default;}
input.inp-text.number{width:105px;text-align:center;}
input.inp-text.short{width:188px;}
/* 팝업안에 들어가는 작은 input */
input.inp-text.small{height:35px;font-size:16px;font-weight:500;}
input.inp-text.small.number{width:86px;}

/* input[type=file] */
input.inp-file{display:none;}

/* input[type=checkbox] */
input.chk{width:16px;height:16px;vertical-align:middle;}
label.lbl + input.rdo,
label.lbl + input.chk{margin-left:4px;}

/* input[type=radio] */
input.rdo{width:16px;height:16px;vertical-align:middle;}

/* switch */
.switch-lbl {
	position: relative;
	width: 44px;
	height: 20px;
	background: #edf4fa;
	border: 1px solid #dae4ec;
	display: inline-block;
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
}
.switch-lbl:after{content: '';position: absolute ;top:2px;left:2px;width:14px;height:14px;background: #c0c6ce;border-radius:50%;transition: 0.3s;}
.switch-inp:checked + .switch-lbl:after{background:#009ee8;left:calc(100% - 2px);transform:translateX(-100%);box-shadow:1px 1px 1px rgba(35,54,76,.2);}

/* label */
label.lbl {
	display: inline-block;
	margin-right: 10px;
	color: #222;
	font-size: 18px;
	font-weight: 500;
}
label.lbl p.lbl_p{font-size : 15px}
label.lbl,
label.rdo-lbl,
label.chk-lbl{vertical-align:middle;}
input.chk + label.lbl,
input.rdo + label.lbl{margin-left:10px;}

/* textarea */
textarea.txtarea {
	width: 100%;
	height: 170px;
	resize: none;
	padding: 8px 10px;
	color: #515151;
	font-size: 13px;
	border: 1px solid #cecece;
	border-radius: 3px;
	vertical-align: middle;
	font-weight: 500;
}
textarea.txtarea[disabled]{background:#efefef !important;}

/* select box */
select.sel{padding:0 20px;background:url("../images/common/sel_arrow.png") no-repeat right 15px top 50%;-webkit-appearance:none;appearance:none;}
select.sel::-ms-expand{display:none;}
select.sel[disabled]{background:#efefef !important;cursor:default;}
select.sel.short{width:204px;}

/* datepicker */
.ui-datepicker.ui-widget.ui-widget-content {border: 1px solid #b9dacb; }
.ui-widget-header.ui-widget-header {border: 1px solid #478f6c;	background: #55a57e 50% 50% repeat-x;	color: #ffffff;	font-weight: medium; }
.ui-datepicker-calendar th > span {color: #2bae0f; }
.ui-datepicker-calendar td.undefined .ui-state-default {border: 1px solid #fff; background: #fff; color: #4c4c4c; text-align: center; }
.ui-datepicker-calendar td.undefined .ui-state-default:hover {color: #eb166b; }

.ui-datepicker-calendar td.undefined .ui-state-active,
.ui-datepicker-calendar td.undefined .ui-widget-content .ui-state-active,
.ui-datepicker-calendar td.undefined .ui-widget-header .ui-state-active,
.ui-datepicker-calendar td.undefined a.ui-button:active,
.ui-datepicker-calendar td.undefined .ui-button:active,
.ui-datepicker-calendar td.undefined .ui-button.ui-state-active:hover {
	border: 1px solid #e79c79;
	background: #f5f8f9;
	color: #e17009;
}

/* dialog 팝업 */
#dialog_info {line-height :1.3;}
#dialog_info h3 {display:block;margin-top: 20px; padding: 20px 0 10px;border-top: 1px solid #ccc;text-align: center; font-size: 18px;color: #333;}
#dialog_info h3:first-child{margin-top:0; padding-top:0; border-top:0;}
#dialog_info .popup-text + .popup-text {margin-top: 5px;}
#dialog_info .text-guide {display: block; margin-top: 5px; font-size: 13px;color:#555;}
#dialog_info .dl-list + .text-guide {margin-top: 10px; }
#dialog_info .text-guide:last-child {border-bottom: 0;}


@media (max-width:768px) {
	.form-control.input-with-sel,
	.form-control.element-3{margin:0 auto;}

	input.inp-text,
	select.sel{width:150px;height:32px;font-size:14px;padding:0 12px;}
	input.inp-text.number{width:68px;}
	/* 팝업안에 들어가는 작은 input */
	input.inp-text.small{height:30px;font-size:13px;padding:0 10px;}
	input.inp-text.small.number{width:60px;}

	label.lbl{font-size:14px;}
        label.lbl p.lbl_p{font-size:11px;}
	input.chk + label.lbl,
	input.rdo + label.lbl{margin-left:5px;}

	input.chk,
	input.rdo{width:14px;height:14px;}

	select.sel{background-position:right 10px top 50%;background-size:12px auto;}
	select.sel.short{width:120px;}

	#dialog_info h3{font-size:16px;}
	#dialog_info .popup-text{font-size:14px;}
}

/*=========================================================================================================================================*/
/** 
 *  테이블
 */
table{width:100%;table-layout:fixed;}
table.text-left th,
table.text-left td{text-align:left;}
table.text-center th,
table.text-center td{text-align:center;}
table th.text-left,
table td.text-left{text-align:left;}
table td.text-left{padding-left:20px;padding-right:20px;}
table th.text-right,
table td.text-right{text-align:right;}
table td.text-right{padding-right:20px;padding-right:20px;}

/* 테이블 강조 */
table th.point,
table td.point{background-color:#ffeee1;}

/* .table-basic{table-layout:auto;} */
.table-basic th,
.table-basic td{height:48px;padding:10px 0;border:1px solid #ead6b8;font-size:16px;text-align:center;word-break:keep-all;word-wrap:break-word;}
.table-basic th{background:#fbfaf3;color:#5e5e5e;font-weight:600;}
.table-basic td{background:#fff;color:#595959;}
.table-basic th:first-of-type,
.table-basic td:first-of-type{border-left:0;}
.table-basic th:last-of-type,
.table-basic td:last-of-type{border-right:0;}
.table-basic .total{padding:.3em 0;font-size:1.3em;font-weight:600;color:#ef2571;}

.table-basic .special-w1{width:30%;}
.table-basic .special-w2{width:24%;}

.table-basic.table-small th,
.table-basic.table-small td{height:46px;font-size:15px;}

.table-basic .sale {display: block; font-size: 13px; color: #999; }

@media (max-width:768px) {
	table td.text-left{padding-left:10px;padding-right:10px;}
	table td.text-right{padding-right:10px;padding-right:10px;}

	.table-basic{width:100%;overflow:auto;}
	.table-basic table{width:auto;white-space:nowrap;}

	.table-basic th,
	.table-basic td{padding:10px 5px;height:44px;font-size:13px;}

	.table-basic .special-w1{width:150px;}

	.table-basic.table-small th,
	.table-basic.table-small td{height:34px;font-size:12px;}
}
@media (max-width:360px) {
	/* .table-basic .btn-plus.small,
	.table-basic .btn-minus.small{display:none;} */

	.table-basic .special-w1{width:90px;}
}

/*=========================================================================================================================================*/
/**
 *	개인정보 수집 및 이용 동의
 */
.agree-box{padding:1em 0;border-top:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;}
.agree-box .box-title{margin-bottom:.4em;color:#00ca68;font-size:22px;font-weight:bold;}
.agree-check{text-align:center;margin-top:30px;}
.agree-check .lbl{font-weight:700;}

@media (max-width:768px) {
	.agree-box .box-title{font-size:16px;}
	.agree-check{margin-top:20px;}
}

/**
 *	날짜 및 인원선택
 */
/* 레이아웃 */
.grid-wrap{position:relative;padding-right:calc(36% + 20px);}
.grid-wrap .btn-group{margin-top:100px;}
.grid-row{display:table;width:100%;table-layout:fixed;}
.grid-row + .grid-row{margin-top:20px;}
.grid-col{display:table-cell;vertical-align:middle;position:relative;}
.grid-col.col-title{width:90px;padding-right:10px;}
.grid-2col{display:flex;justify-content:space-between;}
.grid-2col .grid-guide{width:29%;}
.grid-2col .grid-guide ul li{font-size:15px;text-align:left;}
.grid-2col .grid-guide .dotted-list > li::before{top:6px;}
.grid-title{color:#2bae0f;font-size:24px;font-weight:600;word-break:keep-all;line-height:1.2;}
.grid-title small{font-size:inherit;font-weight:400;}
/* 단체예약 */
.grid-wrap.group-wrap{padding-right:0;}
.top-box + .grid-wrap.group-wrap{border-top:1px solid #cfcfcf;}
.grid-wrap.group-wrap .grid-col.col-title{width:150px;}
.grid-wrap.group-wrap .grid-row{border-bottom:1px solid #cfcfcf;padding:20px 15px;}
/*.grid-wrap.group-wrap .grid-row:first-of-type{padding-top:0;}*/
.top-box + .grid-wrap.group-wrap .grid-row:first-of-type{padding-top:20px;}
/*.grid-wrap.group-wrap .grid-row + .grid-row{margin-top:0;}*/

.grid-guide{margin-top:30px;}
.grid-guide ul li{font-size:14px;color:#444;text-align:left;}
.grid-guide .dotted-list > li:before{top:7px;}

@media (max-width:1240px) {
	.grid-wrap{padding-right:0;}
	.grid-wrap .btn-group{margin-top:30px;}
}
@media (max-width:768px) {
	.grid-wrap{margin:0 -20px;padding-bottom:20px;}
	.grid-row,
	.grid-col{display:block;}
	.grid-col{text-align:center;}
	.grid-2col{flex-wrap:wrap;}
	.grid-2col .grid-guide{width:100%;margin-top:20px;}
	.grid-2col .grid-guide ul li{font-size:13px;}
	.grid-guide ul li{font-size:13px;}

	.grid-col.col-title{width:auto !important;margin-bottom:18px;}
	.grid-row + .grid-row{margin-top:0;}
	.grid-row{padding:20px;border:0;border-bottom:1px solid #dbe8f2;border-radius:0;}
	.grid-info + .grid-row{border-top:1px solid #dbe8f2;}
	.grid-title{text-align:center;font-size:16px;}
	/* 단체예약 */
	.grid-wrap.group-wrap{padding-bottom:0;}
	
}


/* 날짜 */
.date-wrap{position:relative;width:100%;max-width:570px;padding-right:50px;}
.date-list{display:table;width:100%;table-layout:fixed;}
.date-list li{display:table-cell;vertical-align:bottom;text-align:center;}
.date-list .month{color:#00ca68;font-size:14px;font-weight:500;margin-bottom:5px;}
.date-list .date{width:44px;height:44px;border-radius:50%;color:#222;font-size:22px;font-weight:500;}
.date-list .date:hover{color:#f2508d;}
.date-list .date.on{background:#f2508d;color:#fff;}
.date-list .day{color:#222;font-size:16px;margin-top:5px;}
.date-list .date:disabled,
.date-list .date:disabled ~ .day{color:#b0b0b0;}
.date-list .sat {color: #0b80c3; }
.date-list .sun {color: #e53434; }
.date-list .hol {color: #e53434; }

.grid-calendar{position:absolute;top:50%;right:0;margin-top:-17px;}
.grid-calendar .ui-datepicker-trigger,
.grid-calendar .btn-calendar{height:34px;width:34px;color:#2bae0f;font-size:34px;line-height:34px;}
.grid-calendar .ui-datepicker-trigger i,
.grid-calendar .btn-calendar i{font-weight:400;text-shadow:3px 3px 3px rgba(0,0,0,.1);vertical-align:top;}

@media (max-width:768px) {
	.date-wrap{padding-right:40px;margin:0 auto;}
	.date-list .month{font-size:12px;margin-bottom:3px;}
	.date-list .date{width:35px;height:35px;font-size:16px;}
	.date-list .day{font-size:13px;margin-top:3px;}
	.grid-calendar .ui-datepicker-trigger,
	.grid-calendar .btn-calendar{width:28px;height:28px;font-size:28px;line-height:28px;}
}
@media (max-width:480px) {
	.date-list li:nth-of-type(n+7){display:none;}
}

/* 관람인원 */
.grid-wrap .control-group + .control-group{margin-top:10px;}
.grid-wrap .control-group > .lbl{width:80px;}
.grid-wrap .control-group .inp-text + .btn{margin-left:5px;}
.grid-wrap .control-group > .form-control{margin-right:0;}
.grid-wrap .control-group.group-label-large > .lbl{width:100px;}
.grid-wrap .control-info{margin-left:20px;color:#09a3ea;font-size:16px;font-weight:500;}

@media (max-width:768px) {
	.grid-wrap .control-group + .control-group{margin-top:8px;}
	.grid-wrap .control-group > .lbl{width:60px;text-align:left;}
	.grid-wrap .control-group > .form-control{max-width:100%;text-align:left;}
	.grid-wrap .control-group .inp-text + .btn{margin-left:2px;}
	.grid-wrap .control-group.group-label-large + .control-group.group-label-large{margin-top:5px;}
	.grid-wrap .control-group.group-label-large > .lbl{width:65px;}
	.grid-wrap .control-group.group-label-large > .form-control{}
	.grid-wrap .control-group.group-label-large .inp-text{width:130px;}
	.grid-wrap .control-info{display:block;font-size:12px;margin-top:6px;text-align:center;}
}
@media (max-width:370px) {
	.grid-wrap .control-group.group-label-large + .control-group.group-label-large{margin-top:10px;}
	.grid-wrap .control-group.group-label-large > .lbl{display:block;margin-bottom:3px;}
	.grid-wrap .control-group.group-label-large > .form-control{text-align:left;display:block;width:auto;}
}

/* 시간 */
.episode-wrap{margin-bottom:-10px;}
.episode-wrap .btn-episode {
	position: relative;
	width: 180px;
	height: 42px;
	margin-bottom: 10px;
	margin-right: 6px;
	border-radius: 20px;
	border: 1px solid #cecece;
	font-size: 13px;
	color: #636363;
	font-weight: 500;
}
.episode-wrap .btn-episode:nth-of-type(3n){margin-right:0;}
.episode-wrap .btn-episode:hover{color:#f2508d;}
.episode-wrap .btn-episode.on{background:#f2508d;color:#fff;border-color:#f2508d;}
.episode-wrap .btn-episode:disabled{background:#e7e7e7;color:#a0a0a0;}
/* .episode-wrap .btn-episode .seat{margin-left:4px;} */
.episode-wrap .btn-episode .badge {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 95px;
	height: 26px;
	margin: auto;
	border-radius: 3px;
	color: #fff;
	font-size: 12px;
	line-height: 26px;
	text-align: center;
	font-weight: 400;
	letter-spacing: -.02em;
}
.episode-wrap .btn-episode .badge.badge-disabled{background:#f65a61;}
.episode-wrap .btn-episode .badge.badge-soldout{background:#626b7b;}

@media (max-width:768px) {
	.episode-wrap{margin-bottom:-5px;}
	.episode-wrap .btn-episode{width:175px;height:32px;font-size:12px;margin-right:2px;margin-bottom:5px;}
	.episode-wrap .btn-episode:nth-of-type(3n){margin-right:2px;}
	.episode-wrap .btn-episode .badge{width:80px;height:22px;line-height:22px;font-size:12px;}
}
@media (max-width:400px) {
	.episode-wrap .btn-episode{width:100%;margin-right:0;}
	.episode-wrap .btn-episode:nth-of-type(3n){margin-right:0;}
}

/* 메뉴 리스트*/
.menu-list-wrap{margin-bottom:-10px;}
.menu-list-wrap .btn-menu-list {
	position: relative;
	width: 180px;
	height: 42px;
	margin-bottom: 10px;
	margin-right: 6px;
	border-radius: 20px;
	border: 1px solid #cecece;
	font-size: 16px;
	color: #636363;
	font-weight: 500;
}
.menu-list-wrap .btn-menu-list:nth-of-type(3n){margin-right:0;}
.menu-list-wrap .btn-menu-list:hover{color:#f2508d;}
.menu-list-wrap .btn-menu-list.on{background:#f2508d;color:#fff;border-color:#f2508d;}
.menu-list-wrap .btn-menu-list:disabled{background:#e7e7e7;color:#a0a0a0;}
.menu-list-wrap .btn-menu-list .seat{margin-left:4px;}
.menu-list-wrap .btn-menu-list .badge {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 95px;
	height: 26px;
	margin: auto;
	border-radius: 3px;
	color: #fff;
	font-size: 12px;
	line-height: 26px;
	text-align: center;
	font-weight: 400;
	letter-spacing: -.02em;
}
.menu-list-wrap .btn-menu-list .badge.badge-disabled{background:#f65a61;}
.menu-list-wrap .btn-menu-list .badge.badge-soldout{background:#626b7b;}

@media (max-width:768px) {
	.menu-list-wrap{margin-bottom:-5px;}
	.menu-list-wrap .btn-menu-list{width:160px;height:32px;font-size:13px;margin-right:2px;margin-bottom:5px;}
	.menu-list-wrap .btn-menu-list:nth-of-type(3n){margin-right:2px;}
	.menu-list-wrap .btn-menu-list .badge{width:80px;height:22px;line-height:22px;font-size:12px;}
}
@media (max-width:380px) {
	.menu-list-wrap .btn-menu-list{min-width:136px;margin-right:0;}
	.menu-list-wrap .btn-menu-list:nth-of-type(3n){margin-right:0;}
}



/* 예약자 */
@media (max-width:768px) {
	/* .reserve-person .form-control{display:block;margin-right:0;} */
	.reserve-person .form-control + .form-control{margin-top:10px;}
	.reserve-person .form-control .lbl{width:70px;text-align:left;}

	.grid-wrap.group-wrap .reserve-person .form-control .lbl{width:45px;}
}


/* 번호 인증 */
.confirm-group {position: relative; }
.confirm-group .inp-text {padding-right: 50px; }
.confirm-group .timer {position: absolute; top: 3px; right: 20px; font-size: 13px; }


/* 결제 방법 */
.pay-wrap{}
.pay-wrap li{display:inline-block;margin-bottom:10px; }
.pay-wrap li + li {margin-right: 6px; }
.pay-wrap .pay-rdo{display:none;}
.pay-wrap .pay-lbl {
	display: inline-block;
	width: 180px;
	height: 42px;
	border-radius: 20px;
	border: 1px solid #cecece;
	font-size: 16px;
	color: #636363;
	font-weight: 500;
	text-align: center;
	line-height: 40px;
}
.pay-wrap .pay-rdo:checked ~ .pay-lbl{background:#51b275;color:#fff;border-color:#53ad79;}

@media (max-width:768px) {
	/* .episode-wrap{margin-bottom:-5px;} */
	.pay-wrap li{margin-bottom:5px;}
	.pay-wrap li + li {margin-right: 2px; }
	.pay-wrap .pay-lbl{width:118px;height:32px;font-size:13px;line-height:30px;}
}
@media (max-width:380px) {
	.pay-wrap .pay-lbl{width:104px;margin-right:0;}
}

/* 예약정보 */
.grid-info {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 36%;
	min-height: 500px;
	border: 4px solid #ffac2f;
	border-radius: 20px;
	background: #fff;
	padding: 25px 30px;
	box-shadow: 6px 8px 10px rgba(0, 0, 0, .1);
}
.grid-info .info-wrap{max-height:100%;overflow-y:auto;}
.reserv-info {
	position: absolute ;
        top: 50px ;
        right: 45px ;
        bottom: 0px ;
        width: 34% ;
        height:640px;
        min-height: 500px ;
        border: 4px solid #ffac2f ;
        border-radius: 20px ;
        background: #fff url(../images/sub/bg_grid_info.png) no-repeat;
        padding: 25px 30px ;
        box-shadow: 6px 8px 10px rgb(0 0 0 / 10%) ;
}
.reserv-info .info-wrap{max-height:100%;overflow-y:auto;}

.info-title{position:relative;margin-bottom:20px;color:#4fad01;font-size:24px;font-weight:600;text-align:center;}
.info-title .icon-receipt{display:inline-block;position:absolute;top:0;right:10px;width:40px;height:40px;background:url("../images/sub/icon_receipt.png") no-repeat center center / 34px;text-indent: -999px;}

.reserve-info.border-bottom{border-bottom:1px solid #cfcfcf;}
.reserve-info li{display:table;width:100%;table-layout:fixed;}
.reserve-info .tit,
.reserve-info .txt{display:table-cell;height:52px;color:#545454;font-size:16px;vertical-align:middle;border-top:1px solid #cfcfcf;}
.reserve-info .tit{width:120px;font-weight:600;padding-left:20px;}
.grid-wrap .reserve-info .tit{width:110px;}
.reserve-info .txt strong{margin-left:3%;font-size:80%;}
.reserve-info.info-col-2{margin-bottom:10px;border-bottom:1px solid #cfcfcf;}
.reserve-info.info-col-2::after{content:"";display:block;clear:both;}
.reserve-info.info-col-2 li{float:left;width:50%;}
.reserve-info.info-col-2 li:nth-child(2n){border-left:1px solid #cfcfcf;}
/* .reserve-info.info-col-2 .tit{width:120px;} */

.preferred-info{display:table;width:100%;table-layout:fixed;margin-top:20px;}
.preferred-info li{display:table-row;}
.preferred-info .tit,
.preferred-info .txt{display:table-cell;height:54px;padding:8px 0;color:#545454;font-size:15px;vertical-align:middle;border-top:1px solid #cfcfcf;word-break:keep-all;}
.preferred-info li:last-of-type .tit,
.preferred-info li:last-of-type .txt{border-bottom:1px solid #cfcfcf;}
.preferred-info .tit{font-weight:600;padding-left:20px;}
.preferred-info .txt{width:33.33%;text-align:center;}

.invite-info{display:table;width:100%;table-layout:fixed;}
.invite-info li{display:table-row;}
.invite-info .tit,
.invite-info .txt{display:table-cell;height:54px;padding:8px 0;color:#545454;font-size:15px;vertical-align:middle;word-break:keep-all;}
.invite-info li:last-of-type .tit,
.invite-info li:last-of-type .txt{border-bottom:1px solid #cfcfcf;}
.invite-info .tit{font-weight:600;padding-left:20px;}
.invite-info .txt{width:33.33%;text-align:center;}


@media (max-width:1240px) {
	.grid-info{position:static;width:auto;margin-top:20px;margin-bottom:20px;min-height:0;}
	.reserv-info{position:static;width:auto;margin-top:20px;margin-bottom:20px;min-height:0;}
	.grid-row ~ .grid-info{margin-bottom:0;}
	.grid-row ~ .reserv-info{margin-bottom:0;}


	.reserve-info .txt strong{margin-left:0;display:block;}
}
@media (max-width:768px) {
	.grid-info{margin-left:20px;margin-right:20px;border-width:2px;padding:20px 25px;box-shadow:6px 4px 5px rgba(0, 0, 0, .1)}
	.info-title{font-size:18px;}

	.reserve-info .tit,
	.reserve-info .txt{height:42px;font-size:14px;padding-top:8px;padding-bottom:8px;}
	.reserve-info.info-col-2 li{float:none;width:100%;}
	.reserve-info.info-col-2 li:nth-child(2n){border-left:0;}

	.preferred-info{margin-top:10px;}
	.preferred-info .tit,
	.preferred-info .txt{height:42px;font-size:13px;}

	.reserv-info {
       	 	height:500px;
/*
		position: absolute ;
       	 	top: 50px ;
       	 	right: 45px ;
       	 	bottom: 0px ;
       	 	width: 34% ;
       	 	height:770px;
		min-height: 500px ;
		border: 4px solid #ffac2f ;
       		border-radius: 20px ;
	       	background: #fff url(../images/sub/bg_grid_info.png) no-repeat;
	   	padding: 25px 30px ;
       		box-shadow: 6px 8px 10px rgb(0 0 0 / 10%) ;
*/
}
}
@media (max-width:360px) {
	.preferred-info .btn-plus.small,
	.preferred-info .btn-minus.small{display:none;}
}

/* 결제 완료 */
.payment-info{}
.payment-info .payment-title {
	text-align: center;
	margin-bottom: 10px;
	background: #e9eef2;
	border-radius: 23px;
	height: 46px;
	line-height: 46px;
	color: #4fad01;
	font-size: 24px;
	font-weight: 600;
}
.result-guide{font-size:18px;}
@media (max-width:768px) {
	.payment-info .payment-title{font-size:18px;height:40px;line-height:40px;border-radius:20px;}
	.result-guide{font-size:13px;}
}

/* 나의 티켓 */
.form-box{padding:40px 0;border-top:1px solid #cfcfcf;border-bottom:1px solid #cfcfcf;text-align:center;}
.form-box .box-wrap{text-align:left;display:inline-block;}
.form-box .form-control{padding-left:104px;}
.form-box .form-control + .form-control{margin-top:10px;}
.form-box .form-control .lbl{position:absolute;top:0;left:0;line-height:42px;}

@media (max-width:768px) {
	.form-box{padding:20px 0;}
	.form-box .form-control{padding-left:84px;}
	.form-box .form-control .lbl{line-height:32px;}
}

/* 나의 티켓 및 QR티켓 리스트 */
.ticket-list .btn-group{/* margin-top:25px; */position:absolute;bottom:20px;left:20px;right:20px;width:calc(100% - 40px);}
.ticket-list .contents-wrap{height:730px;padding:20px;position:relative;background: #fff; }
.ticket-list .table-scroll{max-height:193px;overflow-y:auto;}
.ticket-list .info-scroll{height:108px;overflow-y:auto;margin-top:10px;}
.ticket-list .info-scroll .preferred-info{margin-top:0 !important;}
.ticket-list .total-amount{margin-top:25px;font-size:20px;font-weight:600;color:#ef2571;text-align:center;}
.ticket-list .contents-info{position:absolute;bottom:28px;left:0;right:0;padding:0;border-bottom:0;/* font-size:16px; */}
.ticket-list .btn-group .contents-info:first-child{position:static;margin-bottom:1em;}
.ticket-list .qr-ticket{height:47px;font-size:16px;line-height:47px;}
.ticket-list .cancel,
.ticket-list .modify{height:42px;font-size:15px;line-height:42px;}
.ticket-list .qr-wrap{text-align:center;position:relative;margin-bottom:20px;}
.ticket-list .qr-wrap img{width:170px;height:170px;}
.ticket-list .disabled .qr-wrap::after {
	content: "사용완료";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 134px;
	height: 42px;
	margin: auto;
	background: #656565;
	line-height: 42px;
	color: #fff;
	font-size: 16px;
	border-radius: 3px;
}
.ticket-list .printed .qr-wrap::after {
	content: "인쇄완료";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 134px;
	height: 42px;
	margin: auto;
	background: #656565;
	line-height: 42px;
	color: #fff;
	font-size: 16px;
	border-radius: 3px;
}
.ticket-list .canceled .qr-wrap::after {
	content: "취소완료";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 134px;
	height: 42px;
	margin: auto;
	background: #656565;
	line-height: 42px;
	color: #fff;
	font-size: 16px;
	border-radius: 3px;
}
.ticket-list .disabled .qr-wrap img{opacity:.5;}
.ticket-list .star-list{margin-top:20px;}
.ticket-list .star-list li{font-size:14px;}
.ticket-slider-prev,
.ticket-slider-next{position:absolute;top:50%;width:52px;height:104px;margin-top:-52px;background:rgba(209, 109, 0, 0.73);color:#fff;font-size:30px;}
.ticket-slider-prev{left:0;border-radius:0 52px 52px 0;padding-right:7px;box-shadow:3px 0 13px rgba(0,0,0,.15);}
.ticket-slider-next{right:0;border-radius:52px 0 0 52px;padding-left:7px;box-shadow:-3px 0 13px rgba(0,0,0,.15);}
/* 예약 취소 또는 사용 완료일 경우 */
.disabled .info-title{color:#a0a1a2;}
.disabled .table-basic th,
.disabled .table-basic td{border-color:#d1d1d1;}
.disabled .table-basic th{background:#f7f7f7;}
.disabled .table-basic .total{color:#a0a1a2;}

@media (max-width:768px) {
	.ticket-list{padding:20px 0;}
	.ticket-list .contents-wrap{height:623px;}
	.ticket-list .table-scroll{max-height:177px;}
	.ticket-list .info-scroll{height:84px;}
	.ticket-list .total-amount{margin-top:20px;font-size:18px;}
	/* .ticket-list .contents-info{bottom:28px;} */
	.ticket-list .qr-wrap img{width:160px;height:160px;}
	.ticket-list .disabled .qr-wrap::after{width:103px;height:34px;line-height:34px;font-size:12px;}
	.ticket-list .star-list{margin-top:10px;}
	.ticket-slider-prev,
	.ticket-slider-next{width:34px;height:70px;margin-top:-35px;font-size:20px;}
	.ticket-slider-prev{left:-20px;box-shadow:2px 0 6px rgba(0,0,0,.15);}
	.ticket-slider-next{right:-20px;box-shadow:-2px 0 6px rgba(0,0,0,.15);}
}
@media (max-width:640px) {
	.ticket-list .contents-wrap{height:auto;min-height:527px;padding:0;border:0;border-radius:0;background:0;}
	.ticket-list .btn-group{/* margin-top:25px; */position:static;width:100%;}
	.ticket-list .table-scroll{max-height:200px;/* max-height:initial;height:auto; */}
	.ticket-list .info-scroll{max-height:105px;/* max-height:initial;height:auto; */}
	.ticket-list .contents-info{/* bottom:6px; */position:static;margin-top:15px;}
}

/* 휴대폰인증 */
.modal .grid-wrap{padding:0 !important;/* text-align:center; */}
.modal .grid-wrap .control-group{text-align:left;display:inline-block;}

@media (max-width:768px) {
	.modal .grid-wrap{padding:0 20px !important;text-align:center;}
	.modal .grid-wrap .control-group.group-label-large > .lbl{display:block;width:auto;margin-bottom:5px;}
	.modal .grid-wrap .control-group.group-label-large + .control-group.group-label-large{margin-top:10px;}
}
@media (max-width:360px) {
	.modal .grid-wrap{padding:0 !important;}
}
@media (max-width:319px) {
	.modal .btn.btn-background.auth-num,
	.modal .btn.btn-background.auth{min-width:94px;padding:0;}
}