@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: 1300px; margin: 0 auto 100px auto; }
/*tab content*/
.reservation .tab_content { background-color: #fff; }
.reservation .tab_content .btn_container { width: 100%; margin: 0 auto; margin-top: 70px; }

.hide { display:none; }
.color1 { color: #071a3f }
/*********************************************************************

사전예약

**********************************************************************/
/*안내글*/
.reservation .top {
	width: 100%;
	text-align: center;
	border: 1px solid #333;
	padding: 5px;
	margin-bottom: 40px;
}

.reservation .top_inner {
	width: 100%;
	border: 1px solid #333;
	padding: 70px 40px 40px;
}

.reservation .top .title {
	color: #333;
	line-height: 1.4;
	margin-bottom: 0;
}

.reservation .top .title img {
	display: block;
	max-width: 100%;
	width: auto;
	margin: 0 auto;
	padding-bottom: 30px;
}

.reservation .top .title strong {
	display: block;
	font-size: 44px;
	line-height: 1.35;
	letter-spacing: -1px;
	margin-bottom: 10px;
}

.reservation .top .title p {
	font-size: 22px;
}

.reservation .top .title span {
	display: inline-block;
	font-size: 21px;
	letter-spacing: -1px;
	padding: 8px 0;
	border-top: 1px solid #777;
	border-bottom: 1px solid #777;
	margin-top: 15px;
}


/* =========================================================
   대상 / 예약기간 / 장소
========================================================= */

.reservation .top dl {
	display: block;
	width: 100%;
	max-width: 760px;
	margin: 50px auto;
	padding: 0;
	text-align: left;
	font-size: 17px;
}

.reservation .top dl > div {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 12px;
	gap: 15px;
}

.reservation .top dl > div:last-child {
	margin-bottom: 0;
}

.reservation .top dt,
.reservation .top dd {
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 30px;
}

.reservation .top dt {
	flex: 0 0 180px;
	width: 180px;
	min-height: 30px;
	padding: 0 15px;
	text-align: center;
	border-radius: 30px;
	background: #071a3f;
	color: #fff;
	white-space: nowrap;
}

.reservation .top dd {
	flex: 1 1 auto;
	min-width: 0;
	color: #333;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.reservation .top dd span {
	color: #071a3f;
}

.mo_br {
	display: none;
}


/* =========================================================
   유의사항
========================================================= */

.reservation .attention {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding-top: 20px;
	border-top: 1px solid #ccc;
	text-align: left;
}

.reservation .attention strong {
	display: block;
	margin-bottom: 10px;
}

.reservation .attention p {
	margin: 0 0 10px;
	color: #333;
	font-size: 15px;
	line-height: 1.6;
	word-break: keep-all;
}

.reservation .attention p.color1 {
	color: #ba0028;
}

.reservation .attention p span {
	display: block;
}


/* =========================================================
   태블릿
========================================================= */

@media screen and (max-width: 768px) {

	.reservation .top {
		margin-bottom: 30px;
	}

	.reservation .top_inner {
		padding: 50px 25px 35px;
	}

	.reservation .top .title img {
		max-width: 180px;
		padding-bottom: 25px;
	}

	.reservation .top .title strong {
		font-size: 30px;
	}

	.reservation .top .title p {
		font-size: 18px;
	}

	.reservation .top .title span {
		font-size: 17px;
	}

	.reservation .top dl {
		margin: 35px auto;
		font-size: 16px;
	}

	.reservation .top dt {
		flex-basis: 135px;
		width: 135px;
		font-size: 15px;
	}

	.reservation .top dd {
		font-size: 15px;
		line-height: 1.7;
	}

}


/* =========================================================
   모바일
========================================================= */

@media screen and (max-width: 580px) {

	.reservation .top {
		padding: 4px;
		margin-bottom: 25px;
	}

	.reservation .top_inner {
		padding: 40px 15px 30px;
	}

	.reservation .top .title img {
		width: auto;
		max-width: 150px;
		padding-bottom: 20px;
	}

	.reservation .top .title strong {
		font-size: 24px;
		line-height: 1.4;
		word-break: keep-all;
	}

	.reservation .top .title p {
		font-size: 16px;
	}

	.reservation .top .title span {
		font-size: 15px;
	}


	/* 안내정보 */
	.reservation .top dl {
		width: 100%;
		margin: 30px auto;
	}

	.reservation .top dl > div {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 14px;
	}

	.reservation .top dt {
		flex: 0 0 105px;
		width: 105px;
		min-height: 32px;
		height: auto;
		padding: 3px 8px;
		line-height: 32px;
	}

	.reservation .top dd {
		flex: 1;
		width: auto;
		min-width: 0;
		padding-top: 3px;
		font-size: 14px;
		line-height: 1.65;
		word-break: keep-all;
	}

	.mo_br {
		display: block;
	}

	.reservation .attention {
		width: 100%;
		padding-top: 15px;
	}

	.reservation .attention p {
		font-size: 13px;
		line-height: 1.6;
	}
}


/* 작은 모바일 */
@media screen and (max-width: 380px) {

	.reservation .top_inner {
		padding-left: 10px;
		padding-right: 10px;
	}

	.reservation .top dt {
		flex-basis: 95px;
		width: 95px;
		font-size: 12px;
	}

	.reservation .top dd {
		font-size: 13px;
	}
}

/*날짜,시간 선택*/
.select_wrap { margin-bottom: 100px; }
.select_wrap h3 { color: #333; font-size: 20px; margin-top: 40px; 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:60px; background: #eee; overflow: hidden; margin-bottom: 20px; display:flex; gap:40px;}
.select  > div{flex:1;}
.select .guide { margin-top: 12px; text-align: left; clear:left; }
.select .guide img { width: auto !important; }
.choose { background: #c5b6a1; color: #fff; }
.off { background: #c9c9c9 !important; cursor:default !important; }
.selected { background: #071a3f; border-color: #071a3f !important; color: #fff !important;}

/*날짜 선택*/
.calendar { background: #fff; padding: 38px 20px 0 20px; height: 300px; }
.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:#071a3f; }

/****달력체크박스*****/
.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 {}
.time_frame { background: #fff; padding-top: 20px; min-height: 300px; }
.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;}
.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 td br{display:none}


@media screen and (max-width: 480px) {
	.table td br{display:block}
}



/*정보입력폼*/
.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-top: 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 h3 { color: #333; font-size: 20px; margin-bottom: 15px; }

/*개인정보 동의*/
.privacy { margin-top: 30px; }
.con_text { width: 100%; border: 1px solid #bfbfbf; padding:20px; font-size:15px; line-height: 160%; height: 280px; overflow: auto; color: #707070;  text-align:left;}
.con_text li { margin: 5px 0; }
.con_text  span{font-weight:500;}
.agree_btn{margin-top:15px; text-align:left;}
.agree_btn label {font-size: 17px !important; 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 .result strong{font-size: 22px;}
.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;}
#reservation_m .top dt { padding: 0 20px; }
#reservation_m .top dd { line-height: 145%; }
#reservation_m .attention p { font-size: 13px; }


#reservation_m .select { padding:50px 28px; text-align: center; }
#reservation_m .select_date,
#reservation_m .select_time { float: inherit; display: block; margin: 0 auto; }
#reservation_m .select_time { position: relative; left: auto;}
#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 .step img { width: 95%; }
#reservation_m .modal-content { width: 300px; }
#reservation_m .modal-content .result{font-size:17px}
#reservation_m .modal-content .result strong{font-size:17px}
#reservation_m .result{font-size:17px}

@media screen and (max-width: 768px) {

	.select_wrap {
		margin-bottom: 60px;
	}

	.select {
		padding:20px;  flex-wrap: wrap;
	}

	.select > div {flex:0 0 100%;}

	.select_date {
		margin-bottom: 35px;
	}

	.calendar {
		width: 100%;
		height: auto;
		min-height: 300px;
		padding: 25px 15px;
	}

	.select_time {
		width: 100%;
	}

	.time_frame {
		width: 100%;
		min-height: 200px;
		padding: 20px 15px;
		overflow: hidden;
	}

	.time_frame ul {
		float: none;
		width: 100%;
		margin: 0;
	}

	.time_frame ul li {
		width: 100%;
		margin-bottom: 12px;
	}

	.select .guide {
		width: 100%;
		overflow: hidden;
	}

	.select .guide img {
		max-width: 100%;
		height: auto;
	}


	/* 개인정보 */
	.con_text {
		height: 230px;
		padding: 20px 15px;
		font-size: 14px;
		line-height: 1.6;
	}


	/* 입력폼 */
	.table th {
		width: 90px;
		padding: 12px 5px;
		font-size: 13px;
	}

	.table td {
		padding: 8px;
		font-size: 13px;
	}

	.table input,
	.table select {
		max-width: 100%;
	}

	.table .input_style_addr2 {
		width: 100%;
	}


	/* 버튼 */
	.btn {
		margin-top: 50px;
	}

	.btn input {
		width: 100%;
		max-width: 280px;
		height: 55px;
		margin: 4px 0;
	}
}

/********************************************************************
TAB & BUTTON
*********************************************************************/
/*tab content*/
.tab_content { width: 100%; margin: 0 auto; padding-top: 40px; }

.tab_content ul.btns {display:flex; align-items:center;}
.tab_content ul.btns li {flex:1 0 50%; border-bottom:none; border-right:none; line-height:60px; text-align:center; background:#ebedf1; cursor:pointer;  font-size:17px; font-weight:500; font-family: 'Pretendard'; letter-spacing:1px; color:#000; transition:all 0.4s; }
.tab_content ul.btns li.active{background:#00193e; color:#fff;}
.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{background:#383838;}

.tab_content .btn_container { width: 100%; position: relative; }
.tab_content .btn_container .btn_content > img { display: block; width: 100%; }


@media screen and (max-width: 560px) {
	.tab_content ul.btns{flex-wrap: wrap; width:100%;}
	.tab_content ul.btns li {flex:1 0 calc(100% / 2); height:55px; font-size:15px; line-height:120%; display:flex; align-items:center; justify-content: center;}

}

/*tab content(e)*/