@charset "utf-8";

/*reset*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');


.reservation { width: 100%; max-width: 1200px; margin: 0 auto 100px auto; }
/*tab content*/
.reservation .tab_content { background-color: #fff; }
/*
.reservation .tab_content ul.btns { position: relative; width: 100%; overflow: hidden; text-align: center; margin: 0 auto; margin-top: 60px; padding: 0; }
		.reservation .tab_content ul.btns::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #B18F76; }
.reservation .tab_content ul.btns li { position: relative; text-align: center; cursor: pointer; padding: 0; float: left; height: 60px; background-color: #eee; display: table; border: none; }
.reservation .tab_content ul.btns li.last { margin-right: 0; }
		.reservation .tab_content ul.btns.btns2 li { width: 50%; }
		.reservation .tab_content ul.btns.btns3 li { width: 33%; }
		.reservation .tab_content ul.btns.btns4 li { width: 25%; }

.reservation .tab_content ul.btns li span.txt { position: relative; color: #676b6e; display: table-cell; vertical-align: middle; font-size: 15px; width: 100%; height: 100%; letter-spacing: 0; }
		.reservation .tab_content ul.btns li.active { background-color: #fff; border: 1px solid #B18F76; border-bottom-width: 0; }
		.reservation .tab_content ul.btns li:hover span.txt,
		.reservation .tab_content ul.btns li.active span.txt { color: #B18F76; font-weight: bold; }
		.reservation .tab_content ul.btns li.active span.txt::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: #fff; z-index: 1 }
*/



.reservation .tab_content .btn_container { width: 100%; margin: 0 auto; margin-top: 70px; }
/*tab content(e)*/

.hide { display:none; }
/*********************************************************************

사전예약

**********************************************************************/
/*안내글*/
.reservation .top { text-align: center; border: 1px solid #454545; padding: 5px; margin-bottom: 80px; }
.reservation .top_inner { width: 100%; border: 1px solid #454545; padding: 70px 10px 40px 10px; }
.reservation .top .title { font-size: 22px; color: #454545; line-height: 140%; }
.reservation .top .title span { display: block; letter-spacing: -1px; }
.reservation .step { margin: 40px 0 30px 0; }
.reservation .step img { width: 100%; max-width: 480px; }
.reservation .attention {  }
.reservation .attention p { color: #454545; line-height: 140%; font-size: 16px; }
.reservation .attention p.color1 { color: #ba0028; }
.reservation .attention p span { display: block; }
/*날짜,시간 선택*/
.select_wrap { margin-bottom: 100px; }
.select_wrap h3 { color: #454545; font-size: 20px; margin-bottom: 15px; }
.select_wrap h4 { font-size: 18px; color: #686b6e; margin-bottom: 13px; text-align: left; }
.select_wrap h4 span { display: inline-block; font-size: 12px; color: #454545; padding-right: 10px; border-right: 1px solid #454545; margin-right: 10px; }
.select { position: relative; padding: 70px 70px 28px 70px; background: #eee; overflow: hidden; margin-bottom: 20px; }
.select_date,
.select_time { float: left; }
.select .guide { margin-top: 12px; text-align: left; clear:left; }
.select .guide img { width: auto !important; vertical-align: top;}
.choose { background: #b18f76; color: #fff; }
.choose_1bl { background: #112138; color: #fff; }
.choose_2bl { background: #4d242c; color: #fff; }
.off { background: #c9c9c9 !important; cursor:default !important; }
.selected { background: #1a2239; border-color: #1a2239 !important; color: #fff !important; }
.selected2 { background: #b18f76; border-color: #1a2239 !important; color: #fff !important; }
		/*날짜 선택*/
		.select_date { width: 260px;  margin-right: 40px; }
		.calendar { background: #fff; padding: 38px 20px 0 20px; height: 300px; }
		.calendar table { width: 100%; }
		.calendar table caption { text-align: left; color: #000; font-size: 15px; font-weight: bolder; margin-bottom: 8px; }
		.calendar p{ text-align: left; color: #000; font-size: 15px; font-weight: bolder; margin-bottom: 0px; padding:0;}
		.calendar thead { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
		.calendar th, .calendar td { font-size: 12px; color: #686b6e; text-align: center; }
		.calendar th { font-weight: lighter; padding: 7px 0 6px 0; }
		.calendar td {position:relative; width: 31px; height: 30px; line-height: 30px; padding: 1px 1px 0 0; }
		.calendar td span { width: 100%; height: 100%; display: block; z-index:9999;cursor: pointer;}
		.calendar td span.choose { cursor: pointer; }
		.calendar td span.current_day { background:#1a2239; }

/****달력체크박스*****/
.calendar td input[type="checkbox"] {display: none;}
.calendar td input[type="checkbox"] {position:absolute;top:0;left:0;width:31px; height: 30px; background: #F4791F;cursor: pointer; border-radius: 10px;}
.calendar td:after {display:block; clear:both; content:"";}
.calendar td input[type="checkbox"]:checked + label {background:url(../image/main/check.png) #F4791F no-repeat center/10px 10px;}
.calendar {position:relative;}
.calendar td input[type="checkbox"] + label span {position: absolute; top: 0; left:30px; display: block; font-weight: bold;color:#000; font-size:16px;line-height:24px;}


		/*시간 선택*/
		.select_time { /*width: 560px;*/ width: calc(100% - 300px); }
				.time_frame { background: #fff; padding-top: 30px; min-height: 400px; }
				.time_frame ul { margin-left: 30px; float:left; }
				.time_frame ul:first-child { margin-right:50px; }
				.time_frame ul li { margin-bottom: 15px; cursor: pointer; }
				.time_frame ul li.full { cursor: unset; }
				.time_frame ul li .time { color: #626262; font-size: 12px; width: 50px; height: 20px; line-height: 20px; border: 1px solid #c9c9c9; display: inline-block; margin-right: 10px; text-align: center; }
				.time_frame ul li.full .time { color: #ccc; }
				.time_frame ul li p { display: inline-block; font-size: 15px; color: #454545; }
				.time_frame ul li.full p { color: #a0a0a0; }
		/*유의사항*/
		.attention2 {  }
		.attention2 strong { color: #424242; font-size: 20px; display: block; margin-bottom: 10px; }
		.attention2 ul li { position: relative; padding-left: 8px; color: #707070; font-size: 16px; margin-bottom: 6px; line-height: 120%; }
		.attention2 ul li::before { content: '\0387'; font-size: 16px; display: inline-block; position: absolute; left: -5px; top: 0; }

/*******************폼 공통********************/
input {
	-webkit-border-radius: 0;/*모서리 스타일 제거*/
	border-radius: 0;
	-webkit-appearance: none;/*안쪽 그림자 제거*/
	appearance: none;
}
input[type='checkbox'] { -webkit-appearance: checkbox; }
input:checked[type='checkbox'] { background-color: #ccc; -webkit-appearance: checkbox; }
input[type='radio'] { -webkit-appearance: radio; }
input[type='button'] { -webkit-border-radius: 0; }
.table { width: 100%; border-top: 2px solid #B18F76; }
.table tr { border-bottom: 1px solid #a0a0a0; }
.table th { padding: 12px 0; color: #434343; background: #eee; font-size: 15px; width: 160px; text-align: center; }
.table td { text-align: left; font-size: 14px; padding: 5px 0 5px 10px; }
		/*정보입력폼*/
		.table input { background: #eee; border: none; padding: 7px; margin: 2px 0; font-size: 14px; font-size: 14px; color: #686b6e; width:160px;}
		.table select { background: #eee; border: none; padding: 7px; margin: 2px 0; font-size: 14px; font-size: 14px; color: #686b6e; }
		.table label { font-size: 14px; margin-right: 15px; }
		.table .input_style_gender { margin-right: 3px; }
		.table .input_style_tel { width: 52px; text-align: center; }
		.table .input_style_addr1 { width: 80px; }
		.table .input_style_addr2 { width: 300px; /*color: #bfbfbf; */}
		.table .input_style_addr2:focus { color:#000; }
		.table input.btn_style1 { background: #B18F76; color: #fff; font-size: 12px; margin-left: 4px; }
.reservation .note { position: relative; color: #a0a0a0; font-size: 13px; line-height: 20px; font-weight: 100; margin: 10px 0 100px 0; border: none; padding: 0; width: 100%; }
.btn { width: 100%; position: relative; text-align: center; margin-bottom: 100px; }
.btn input { width: 220px; height: 60px; background-color: #fff; font-size: 15px; color: #000; cursor: pointer; border: 1px solid #a6a6a6; margin: 4px; border-radius: 30px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; -webkit-appearance: none; }
.btn input:hover, .btn input:focus { color: #fff;  background-color: #000; }

/*예약자 정보*/
.customer {  }
.customer h3 { color: #454545; font-size: 20px; line-height: 125%; margin: 15px 0; }
		/*개인정보 동의*/
		.privacy { margin-top: 30px; }
		.con_text { width: 100%; border: 1px solid #bfbfbf; padding: 30px; font-size: 15px; line-height: 120%; height: 180px; overflow: auto; color: #707070; }
		.con_text li { margin: 5px 0; }
		.agree_btn{ margin-top: 10px; margin-bottom: 32px; text-align: right; }
		.agree_btn label { font-size: 15px; color: #707070; }

/*팝업*/
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.5); }
.modal-content { position: absolute; width: 400px; background: #fff; left: 0; right: 0; margin: auto; top: 18%; text-align: center; line-height: 140%; }
.close { color: white; position: absolute; top: -30px; right: 0px; font-size: 40px; z-index: 2}
.close:hover, .close:focus { cursor: pointer;}
		.modal-content .bar { height: 90px; background: #005396; }
		.modal-content .content_inner { padding: 0 30px 60px 30px; background: url(../image/sub/reservation/bg_bottom.png) no-repeat bottom center; }
		.modal-content .content_inner div { position: relative; line-height: 120%; }
		.modal-content .content_inner div strong{font-size:23px; font-weight:bold}
		.modal-content .nth_01 { font-size: 24px; color: #112138; border-bottom: 1px solid #bcbcbc; padding-bottom: 30px; padding-top: 70px; margin-bottom: 40px; }
		.modal-content .nth_02 { margin-bottom: 40px;}
		.modal-content .result { font-size: 22px; color: #112138; margin-bottom: 20px; }
		.modal-content p { color: #707070; font-size: 15px; }

/*조회 결과 화면*/
.result_content { width: 100%; text-align: center; }
.result_content .icon { padding-top: 55px; padding-bottom: 40px; }
.result { font-size: 22px; line-height:  120%; color: #B18F76; margin-bottom: 55px; }
.result #rsved_name{font-size:23px; font-weight:bold; color: #112138;}
		/*예약 취소 재확인*/
		#popModal2 .modal-content { width: 400px; }
		#popModal2 .modal-content .content_inner { padding: 0; }
		#get_result img { width:auto; }
		#popModal2 .text{ font-size: 24px; color: #B18F76; }
		#popModal2 .icon2 { padding-top: 85px; padding-bottom: 20px; }
		#popModal2 .ask { font-size: 24px; color: #B18F76; margin-bottom: 50px; }
		#popModal2 .btn { margin-bottom: 40px; }
		#popModal2 .btn input { width: 150px; height: 50px; border-radius: 25px; font-size: 15px; }


/*모바일페이지 따로 있을 때*/
#reservation_m { min-width: 280px; max-width: 640px; }
#reservation_m .select { padding: 70px 0 28px 0; text-align: center; }
#reservation_m .select_date,
#reservation_m .select_time { float: inherit; display: block; margin: 0 auto; }
#reservation_m .select_date { margin-bottom: 70px; }
#reservation_m .select_time { position: relative; left: auto; width: 260px; }
#reservation_m .time_frame { padding-bottom:15px; }
#reservation_m .time_frame ul { margin-left: 0; float:none; }
#reservation_m .time_frame ul:first-child { margin-right:0; }
#reservation_m .table .input_style_addr2 { width: 95%; }
#reservation_m .table th { font-size: 12px; width: 70px; }
#reservation_m .step img { width: 95%; }
#reservation_m .modal-content { width: 300px; }

/*
@media screen and (max-width: 1000px){
	.reservation { margin-top: 70px; }
	.select_time { position: absolute; left: 370px; width: calc(100% - 450px); }
}
@media screen and (max-width: 800px){
	.select { padding: 70px 0 28px 0; text-align: center; }
	.select_date, .select_time { float: inherit; display: inline-block; }
	.select_date { margin-right: 4%; }
	.select_time { position: relative; left: auto; width: 260px; }
	.time_frame ul { margin-left: 0; }
	.modal-content { width: 300px; }
	.modal-content .content_inner { padding: 0 9% 22% 9%; }
	.modal-content .nth_01 { font-size: 20px; padding-top: 25%; padding-bottom: 10%; }
	.modal-content .result { font-size: 18px; }
	#popModal2 .modal-content { width: 300px; }
	#popModal2 .icon2 { padding-top: 19%; padding-bottom: 9%; }
	#popModal2 .ask { font-size: 20px; margin-bottom: 10%; }
}
@media screen and (max-width: 640px){
	.reservation .top_inner { padding: 11% 3% 5% 3%; }
	.reservation .top .title { font-size: 20px; }
	.reservation .step img { width: 95%; }
	.select_date, .select_time { display: block; margin: 0 auto; }
	.select_date { margin-bottom: 70px; }
	.time_frame ul { margin-left: auto; width: 90%; margin: 0 auto; }
	.table th { font-size: 12px; width: 70px; }
	.table .input_style_addr2 { width: 95%; }
	.con_text { padding: 15px; }
}
@media screen and (max-width: 444px){
	.select_time { width: 260px; margin: 0 auto; }
	.select { padding: 70px 0 28px 0; }
}*/


.table2 { width: 100%; border-top: 2px solid #B18F76; }
.table2 tr { border-bottom: 1px solid #a0a0a0; }
.table2 th { padding: 12px 0; color: #434343; background: #eee; font-size: 15px; width: 160px; }
.table2 td { text-align: left; font-size: 14px; padding: 5px 0 5px 10px; text-align:center; }