@charset "utf-8";

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

*,::after,::before { box-sizing: border-box}
.res_container { font-family: 'Roboto','Noto Sans KR','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif; letter-spacing: -0.5px; text-align: left}
.res_container input, .res_container textarea, .res_container select { font-family:'Roboto','Noto Sans KR','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif;}
.res_container ul.tabs { display: flex; margin-bottom: 70px}
.res_container ul.tabs li { width: 50%}
.res_container ul.tabs li a { display: block; font-size: 1.18rem; color: #F08200; font-weight: 700; border: 1px solid #F08200; background: #fff; text-align: center; padding: 15px 0}
.res_container ul.tabs li.active a { color: #fff; background: #F08200}

h3.res_tit { font-size: 2rem; font-weight: 700; letter-spacing: -1px; color: #000; text-align: center; margin-bottom: 30px}
h4.res_tit { font-size: 1.5rem; font-weight: 500; letter-spacing: -1.5px; color: #F08200; margin-bottom: 25px;}
h5.res_step_tit { font-size: 1rem; font-weight: 500; color: #111; margin-bottom: 10px}
h5.res_step_tit span { font-size: 0.85rem; font-weight: 400; margin-right: 10px}

/* 약관 */
.agree_radio { color: #000}
.agree_radio .checkradio-box .radio-text { font-size: 18px; color: #000; line-height: 1; padding-left: 25px}
.agree_radio .checkradio-box input[type="radio"]+.radio-icon { border: 1px solid #999}

/* step1 : 방문예약 날짜 선택 */
.res_choice { margin-bottom: 50px}
.res_choice h4.res_tit { padding-top: 20px}
	.res_choice_in { display: flex; background: #f6f6f6; padding: 40px}

		.res_cal_box { width: 370px; margin-right: 20px}
			.calendar_box { width: 100%; min-height: 400px; background: #fff; border: 1px solid #bbb; margin-bottom: 10px}
				.calendar_tlt { display: flex; align-items: center; padding: 15px}
					.calendar_tlt a { display: block; width: 32px; height: 32px; font-size: 0; transition: all 0.3s}
					.calendar_tlt a.calendar_prev { background: url("../images/reservation/calendar_prev.svg") 0 0 no-repeat}
					.calendar_tlt a.calendar_next { background: url("../images/reservation/calendar_next.svg") 0 0 no-repeat}
					.calendar_tlt a.calendar_prev:hover { background: url("../images/reservation/calendar_prev_on.svg") 0 0 no-repeat}
					.calendar_tlt a.calendar_next:hover { background: url("../images/reservation/calendar_next_on.svg") 0 0 no-repeat}
					.calendar_tlt strong { flex: 1; text-align: center; font-size: 1.2rem; font-weight: 400; color: #111}
					
				table.calendar { width: 100%}
				table.calendar thead { background: #f9f9f9; border: 1px solid #ddd; border-width: 1px 0}
				table.calendar th, table.calendar td { text-align: center}
				table.calendar th { font-weight: 500; padding: 11px 0 10px 0; vertical-align: middle}
				table.calendar td { width: 14.2857%; height:48px; font-size: 14px; font-weight: 400; border: 1px solid #ddd; border-width: 0 1px 1px 0; vertical-align: middle;}
				table.calendar td:last-of-type { border-right: 0}
				table.calendar td a { position: relative; display: block; height: 100%; color: #777; line-height: 47px;}
				/*table.calendar td a:hover{ color: #fff; background: #0574b5; }*/
				table.calendar td.select { background: #0574b5}
				table.calendar td.select a { color: #fff;}
				table.calendar td.tody { color:#a1b6c5}
				table.calendar td.done a { color: #bbb;}
				table.calendar td.done.select { background: #0574b5}
				table.calendar td.done.select a { color: #bbb;}
				table.calendar td.doing { background: #dfedf5}
				table.calendar td.doing a { color: #333;}
				table.calendar td.doing.select { background: #e12d2d; color:#fff}
				table.calendar td.doing.select a { color: #fff;}
				table.calendar td.skipday { color: #ccc}
				table.calendar td.doing.holiday { background: #e12d2d; color:#ff0000}
				table.calendar td.holiday { color: #ff0000}
				table.calendar td.select a .holiday { color: #fff}				
				
				.choice_list { display: flex; align-items: center; font-size:13px; color:#666}
				.choice_list span { display:inline-block; width:12px; height:12px; margin-right:5px;}
				.choice_list span.nemo_select {  background:#F08200; border:1px solid #F08200}
				.choice_list span.nemo_doing { background:#dfedf5; border:1px solid #bbb; margin-left:20px;}
				.choice_list span.nemo_done { background:#eee; border:1px solid #bbb; margin-left:20px;}

/* step2 : 방문예약 시간 선택 */
		.res_time_box { flex: 1}
			.choice_date { position: relative; font-size: 1.2rem; color: #333; padding: 16px 40px; border-bottom: 1px solid #ddd}
			.choice_date span { color: #76849a; font-size: 13px; margin-right: 10px}
			.choice_date strong { font-weight: 500}
			.choice_date .btn-reset { position: absolute; top: 50%; right: 40px; display: block; font-size: 0; transform: translateY(-50%)}
			
			.time_box { width: 450px; min-height: 215px; background: #fff; border: 1px solid #bbb}
			.time_box ul { display: flex; flex-wrap: wrap; padding: 10px 40px}
			.time_box ul li { width: 33%; margin: 7px 0px 0px 0px; text-align:left !important;}
			.time_box ul li .checkradio-box .radio-text { font-size: 15px; color: #333}
			.time_box ul li .checkradio-box .radio-text em { font-size: 18px;}
			.time_box ul li.time_done .checkradio-box .radio-text { color: #aaa}
			.time_box ul li .checkradio-box .radio-text em { }
			.time_box ul li.not-today { display: flex; justify-content: center; align-items: center; width: 100%; height: 250px}
			.time_box ul li.not-today span { display: block}
			
/* 예약자 정보 입력 */			
.res_info { margin-bottom: 70px}
	table.board_write { width: 100%}
	table.board_write, table.board_write th, table.board_write td { border: 1px solid #ddd; vertical-align: middle;}
	table.board_write th { width: 180px; font-size: 0.938rem; color: #111; font-weight: 500; text-align: left; background: #f8f8f8; padding: 10px 0 10px 30px}
	table.board_write td { padding: 10px 0 10px 20px}
	.input_phone { display: flex; align-items: center}
	.input_phone span.hypen { display: block; color: #aaa; margin: 0 5px}
	.input_phone input { text-align: center;}
	
/* 예약 완료 */
.complete { font-size: 18px; text-align: center; background: #f6f6f6; padding: 40px; margin-bottom: 40px}
.complete .text { color: #666; margin-bottom: 15px}
.complete .text strong { color: #000; font-weight: 500}
.complete .text span { color: #000;}
.visit-schedule { display: inline-block; color: #666; background: #fff; padding: 16px 70px; border-radius: 30px}
.visit-schedule strong { color: #F08200; font-weight: 500; margin-left: 10px}
.visit-schedule.nodata { color: #333; background: none; padding: 0; border-radius: 0}
.visit-schedule.nodata strong { color: #F08200; font-weight: 500; margin: 0 5px}

/* BTN */
.button_line { text-align: center; margin-bottom: 50px}
.btn_res { display:inline-block; width:250px; background: #F08200; color:#fff; font-size: 1rem; border: 1px solid transparent; border-radius: 50px; padding:15px 0; cursor: pointer; transition: all 0.3s}
.btn_res:hover { background: #0574b5}
.btn_res.outline { background: #fff; color: #F08200; border: 1px solid #F08200}
.btn_res.outline:hover { background: #F08200; color: #fff;}


/*========================================================
Common Reservation
========================================================*/

em { font-style: normal}
legend, caption, .invisible{ width:0; height:0; padding:0; font-size:0; line-height:0; overflow:hidden; position:absolute; visibility:hidden}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;}

/* width */
.w50 { width: 50px !important}
.w70 { width: 70px !important}
.w80 { width: 80px !important}
.w250 { width: 250px !important}

/* margin */
.ml5{ margin-left:5px !important;}

.mb0{ margin-bottom:0 !important}
.mb5{ margin-bottom:5px !important;}
.mb10{ margin-bottom:10px !important}
.mb15{ margin-bottom:15px !important}
.mb20{ margin-bottom:20px !important}
.mb25{ margin-bottom:25px !important}
.mb30{ margin-bottom:30px !important}
.mb40{ margin-bottom:40px !important}
.mb50{ margin-bottom:50px !important}
.mb60{ margin-bottom:60px !important}
.mb70{ margin-bottom:70px !important}
.mb80{ margin-bottom:80px !important}
.mb100{ margin-bottom:100px !important;}

/* input */
.form-basic { display: block; width: 100%; font-size: 0.875rem; color: #111; border: 1px solid #ccc; background: #fff; padding: 12px;}
.form-basic:focus { border: 1px solid #b7b7b7}
div.form-basic { height: 43px}

/* Radio */
.checkradio-box { position: relative; display: inline-block;}
.checkradio-box .radio-text { display: inline-block; font-size: 14px; font-weight: 400; color: #333; word-break: keep-all; padding-left: 30px; cursor: pointer}
.checkradio-box input[type="radio"] { overflow: hidden; position: absolute; width: 0; height: 0; border: 0 none; font-size: 0; line-height: 0; left: -9999px}
.checkradio-box input[type="radio"]+.radio-icon { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; transform: translateY(-50%); border: 1px solid #999; border-radius: 50%; background: #fff; cursor: pointer}
.checkradio-box input[type="radio"]+.radio-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff}
.checkradio-box input[type="radio"]+.radio-icon::after { content: ''; display: none}

.checkradio-box input[type="radio"]:checked+.radio-icon { border-color: #3c74de;}
.checkradio-box input[type="radio"]:checked+.radio-icon::before { background: #3c74de}
.checkradio-box input[type="radio"]:disabled+.radio-icon { border-color: #ccc; background: #eee; cursor: default}
.checkradio-box input[type="radio"]:disabled+.radio-icon::before { background: #eee}
.checkradio-box input[type="radio"]:disabled~.radio-text { cursor: default}

.checkradio-box input[type="radio"]:focus+.radio-icon {border-color: #3c74de; box-shadow: 0 0 10px #cdcdcd;}
.checkradio-box input[type="radio"]:checked:focus+.radio-icon {border-color: #999; box-shadow: 0 0 0 0}

@media (max-width:1024px) {
	.res_choice_in { display: block; }
	.res_cal_box { width: 100%; }
}

.rsv-sel-info {background:#f2f1ed;min-height:150px;padding:15px 30px;}
.rsv-sel-info li:after {content:"";display:block;clear:both;}
.rsv-sel-info li {clear:both;}
.rsv-sel-info dl {display:block;padding:20px 0;border-bottom:1px solid #DDD;font-size:14px;}
.rsv-sel-info dl:last-child {border-bottom:0;}
.rsv-sel-info dt {color:#5a4826;font-weight:500;margin-top:15px}
.rsv-sel-info dt:first-child {margin-top:0}
.rsv-sel-info dd {font-size:13px;font-weight:400;letter-spacing:-.025em}
.rsv-sel-info dd:after {content:"";display:block;clear:both;}
.rsv-sel-info dd .txt-amt, .rsv-sel-info dd .txt-name {display:inline-block;}
.rsv-sel-info dd .txt-amt {float:right;}