@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');
@import url('fonts.css');
html, body{height:100%;}
* {-webkit-text-size-adjust:none;}
* {box-sizing: border-box;}
* {margin:0;padding:0}
* {word-break: keep-all;}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; outline:0;text-decoration:none; }
body {line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;}
img { vertical-align:top; }
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
body, input, textarea, select, button, table { font-family: 'Noto Sans KR', 'NanumSquare', 'Nanum Gothic', 'Nanum Barun Gothic', Dotum, '돋움', Gulim, Helvetica, 'Nanum Myeongjo', sans-serif; -webkit-text-size-adjust:none; }
ul, ol {list-style-type:none;}
input, select {vertical-align:middle;}
a {text-decoration:none; color:#555}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
/*reset(e)*/


.reservation { width: 90%; max-width: 1000px; 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: #333; }
.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 #333; border-bottom-width: 0; }
		.reservation .tab_content ul.btns li:hover span.txt,
		.reservation .tab_content ul.btns li.active span.txt { color: #333; 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; }
.color1 { color: #c46d5d }
/*********************************************************************

사전예약

**********************************************************************/
/*안내글*/
.reservation .top { text-align: center; border: 1px solid #333; padding: 5px; margin-bottom: 40px; }
.reservation .top_inner { width: 100%; border: 1px solid #333; padding: 70px 10px 40px 10px; }
.reservation .top .title { color: #333; line-height: 140%; margin-bottom:0}
.reservation .top .title img{padding-bottom:30px;}
.reservation .top .title strong,
.reservation .top .title span { display: block; letter-spacing: -1px; margin-bottom: 10px; }
.reservation .top .title p { font-size: 22px; }
.reservation .top .title strong { font-size: 44px; }
.reservation .top .title span { font-size: 21px; display: inline-block; padding: 8px 0; border-top: 1px solid #777; border-bottom: 1px solid #777; margin-top: 15px; }
.reservation .top dl { text-align: left; display: inline-block; font-size: 17px; margin-top: 50px; margin-bottom: 50px; }
.reservation .top dl div { margin-bottom: 10px; }
.reservation .top dt,
.reservation .top dd { display: inline-block; line-height: 30px; }
.reservation .top dt { width: 130px; height: 30px; line-height: 30px; border-radius: 20px; text-align: center; background: #c46d5d; color: #fff; margin-right: 10px; }
.reservation .top dd {  }
.reservation .top dd span { color: #c46d5d }
.reservation .attention { text-align: left; display: inline-block; padding-top: 10px; border-top: 1px solid #ccc; }
.reservation .attention p { color: #333; line-height: 140%; font-size: 15px; }
.reservation .attention p.color1 { color: #ba0028; }
.reservation .attention p span { display: block; }
/*날짜,시간 선택*/
.select_wrap { margin-bottom: 100px; }
.select_wrap h3 { color: #333; 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: #333; padding-right: 10px; border-right: 1px solid #333; 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; }
.choose { background: #e8c3bc; color: #fff; }
.off { background: #c9c9c9 !important; cursor:default !important; }
.selected { background: #c46d5d; border-color: #c46d5d !important; color: #fff !important; }
		/*날짜 선택*/
		.select_date { width: 260px;  margin-right: 40px; }
				.calendar { background: #fff; padding: 38px 20px 0 20px; height: 400px; }
				.calendar table { width: 100%; }
				.calendar table caption { text-align: left; color: #626262; font-size: 15px; font-weight: bolder; margin-bottom: 8px; }
				.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;}
				.calendar td span.choose { cursor: pointer; }
				.calendar td span.current_day { background:#c46d5d; }

/****달력체크박스*****/
.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 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: #333; }
				.time_frame ul li.full p { color: #a0a0a0; }
		/*유의사항*/
		.attention2 { text-align: left; }
		.attention2 strong { color: #424242; font-size: 15px; display: block; margin-bottom: 10px; }
		.attention2 ul li { position: relative; padding-left: 8px; color: #707070; font-size: 15px; 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 #333; margin-bottom: 50px; }
.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,
		.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: #333; 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: #333; font-size: 20px; margin-bottom: 15px; }
		/*개인정보 동의*/
		.privacy { margin-top: 30px; }
		.con_text { width: 100%; border: 1px solid #bfbfbf; padding: 30px; font-size: 17px; line-height: 120%; height: 280px; 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: 17px; 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 .nth_01 { font-size: 24px; color: #333; 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: #333; 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: #333; margin-bottom: 55px; }
		/*예약 취소 재확인*/
		#popModal2 .modal-content { width: 400px; }
		#popModal2 .modal-content .content_inner { padding: 0; }
		#get_result img { width:auto; }
		#popModal2 .text{ font-size: 24px; color: #333; }
		#popModal2 .icon2 { padding-top: 85px; padding-bottom: 20px; }
		#popModal2 .ask { font-size: 24px; color: #333; 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 .top .title strong { font-size: 26px; }
#reservation_m .top .title span { font-size: 17px; }
#reservation_m .top dt,
#reservation_m .top dd { display: block; }
#reservation_m .top dl { font-size: 14px; padding: 0 20px; }
#reservation_m .top dt { padding: 0 20px; }
#reservation_m .top dd { line-height: 140%; }
#reservation_m .attention { margin: 0 20px;  }
#reservation_m .attention p { font-size: 13px; }


#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: 100px; }
#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; }
}*/

/********************************************************************
TAB & BUTTON
*********************************************************************/
/*tab content*/
.tab_content { width: 100%; margin: 0 auto; padding-top: 40px; }
.tab_content ul.btns { position: relative; overflow: hidden; text-align: center; width: 100%; margin: 0 auto; margin-bottom: 8%; }
.tab_content ul.btns li { position: relative; text-align: center; cursor: pointer; padding: 0; float: left; height: 50px; display: table; padding-right: 1px;
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
.tab_content ul.btns li.last { padding-right: 0; }
.tab_content ul.btns.btns1 li { width: 100%; }
.tab_content ul.btns.btns2 li { width: 50%; }
.tab_content ul.btns.btns3 li { width: 50%; }
.tab_content ul.btns.btns4 li { width: 25%; }
.tab_content ul.btns.btns5 li { width: 20%; }
.tab_content ul.btns.btns6 li { width: 16.5%; }
.tab_content ul.btns.btns7 li { width: 14%; }

.tab_content ul.btns li span { color: #000; background-color: #c46d5d; display: table-cell; vertical-align: middle; font-size: 17px; width: 100%; height: 100%;
	-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
		.tab_content ul.btns li:hover span,
		.tab_content ul.btns li.active span{ color: #fff; font-weight: bold; }
		.tab_content ul.btns li:hover span.clr01,
		.tab_content ul.btns li.active span.clr01 {background-color: #000; }

.tab_content .btn_container { width: 100%; position: relative; }
.tab_content .btn_container .btn_content > img { display: block; width: 100%; }
/*tab content(e)*/