@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 { 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;vertical-align: text-top;}
.reservation .top dt { width: 180px; height: 30px; line-height: 30px; border-radius: 20px; text-align: center; background: #071a3f; color: #fff; margin-right: 10px; }
.reservation .top dd {  }
.reservation .top dd span { color: #071a3f }
.reservation .attention { text-align: left; display: 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; }


/*250429 문연경 추가*/
.reservation_img{width:100%;}
.reservation_img img{width:1300px; max-width:100%;}

.reser_info_box{text-align: center; border: 1px solid #333; padding: 5px; margin-bottom: 40px;}
.reser_info_box > div{display:flex; flex-wrap: wrap; justify-content: center; padding:70px 0 40px; width: 100%; border:1px solid #333; }
.date_list{margin-top:20px; margin-bottom:25px;}
.date_list > div{display:flex; justify-content:center; gap:15px; margin-bottom:10px;}
.date_list > div:last-child{margin-bottom:0;}
.date_list > div p{flex:0 0 100px; height:27px; line-height:27px; background: #071a3f; color:#fff; border-radius:999px;}
.date_list > div span{flex:0 0 280px; text-align:left; line-height:27px;}
.date_list > div span b{color:#071a3f;}
.reservation .attention{width:600px; margin: 0 auto;}
.reservation .customer p.color1 {display: inline-block; color: #ba0028;}

@media screen and (max-width:580px){
	.reservation .top_inner {padding: 70px 10px 40px;}
	.date_list{margin-bottom:17px;}
	.date_list > div{flex-wrap: wrap; gap:7px; margin-bottom:15px;}
	.date_list > div span{flex:0 0 100%; text-align:center;}

    .reservation .attention{width:auto;}
}


/*날짜,시간 선택*/
.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: #c5b6a1; color: #fff; }
.off { background: #c9c9c9 !important; cursor:default !important; }
.selected { background: #071a3f; border-color: #071a3f !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: #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 { /*width: 560px;*/ width: calc(100% - 300px); }
.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: 30px; font-size: 17px; line-height: 120%; height: 280px; overflow: auto; color: #707070; }
.con_text li { margin: 5px 0; }
.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; padding: 0 20px; }
#reservation_m .top dt { padding: 0 20px; }
#reservation_m .top dd { line-height: 145%; }
#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 .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}


/********************************************************************
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)*/