@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;
	position: relative;
	width: 1200px;
	margin: 0 auto;
}

.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;
	justify-content: space-between;
	margin-bottom: 70px
}

.res_container ul.tabs li { width: 48.5%}
.res_container ul.tabs li a {
	display: block;
	font-size: 1.18rem;
	color: #fff;
	background: #d4d4d4;
	text-align: center;
	padding: 15px 0;
	transition: .3s;
	cursor: pointer;
}

.res_container ul.tabs li.active a {
	color: #fff;
	background: #882530;
}
.res_container ul.tabs li a.active:hover {
	background: #415a73 !important;
}
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: 22px; font-weight: 500; letter-spacing: -1.5px; color: #0D2144; margin-bottom: 25px;width: fit-content;}
h5.res_step_tit {
	font-size: 20px;
	font-weight: 500;
	color: #111;
	margin-bottom: 20px
}
h5.res_step_tit span { font-size: 20px; 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: #fff;
	padding: 40px;*/
	justify-content: space-between;
}
.res_choice_in02 {
	margin-top: 60px;
}
.rese_cal_wrap {
	width: 570px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.rese_cal_time_wrap {
	width: 550px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.rese_cal_time_wrap {
	width: 550px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}
.res_cal_box {
	width: 570px;
	margin-right: 20px
}

.calendar_box {
	width: 100%;
	background: #fff;
	border: 1px solid #bbb;
	margin-bottom: 10px;
	border-bottom: none;
}

.calendar_tlt {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px;
}
.calendar_tlt a {
	display: block;
	width: 16px;
	height: 16px;
	font-size: 0;
	transition: all 0.3s;
	background-size: cover !important;
}
.calendar_tlt a.calendar_prev { background: url("../images/document/calendar_prev.svg") 0 0 no-repeat}
.calendar_tlt a.calendar_next { background: url("../images/document/calendar_next.svg") 0 0 no-repeat}
.calendar_tlt a.calendar_prev:hover { background: url("../images/document/calendar_prev_on.svg") 0 0 no-repeat}
.calendar_tlt a.calendar_next:hover { background: url("../images/document/calendar_next_on.svg") 0 0 no-repeat}
.calendar_tlt strong {
	flex: unset;
	margin: 0 25px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 400;
	color: #111
}

table.calendar { width: 100%}
table.calendar thead {
	background: #fff;
	border: 1px solid #888;
	border-width: 1px 0
}
table.calendar th, table.calendar td { text-align: center}
table.calendar th {
	font-weight: 500;
	padding: 5px 0;
	vertical-align: middle
}
table.calendar td { width: 14.2857%; height:48px; font-size: 14px; font-weight: 400; border: 1px solid #888; 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.done { background: #eee}
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: #0D2144}
table.calendar td.doing.select a { color: #fff;}
table.calendar td .skipday { color: #ccc}
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:#0D2144; border:1px solid #0D2144}
.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 : 방문예약 시간 선택 */
.choice_date {
	position: relative;
	font-size: 1.2rem;
	color: #333;
	padding: 26px 40px;
	border-bottom: 1px solid #888;
	text-align: center;
}
.choice_date span { color: #000; 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: 550px;
	background: #fff;
	border: 1px solid #bbb
}
.time_box ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	justify-content: space-between;
}
.time_box ul li {
	/*width: 50%;*/
	/*margin: 7px 0;*/
	/*text-align: center !important;*/

	width: 50%;
	margin: 7px 0;
	/* text-align: center !important; */
	position: relative;
	left: 63px;
	/* transform: translateX(-50%); */
}

.time_box ul li .checkradio-box .radio-text {
    font-size: 15px;
    color: #333;
    cursor: pointer;
}

.time_box ul li .checkradio-box .radio-text em { font-size: 14px;}
.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: 240px;
    margin: 0;
}
.time_box ul li.not-today span { display: block}

/* 예약자 정보 입력 */			
.res_info {
	margin-bottom: 30px;
	width: 100%;
}

table.board_write { width: 100%}
table.board_write, table.board_write th, table.board_write td {
	border-top: 1px solid #888;
	border-bottom: 1px solid #888;
	vertical-align: middle;
}
table.board_write th {
	width: 180px;
	font-size: 0.938rem;
	color: #111;
	font-weight: 500;
	text-align: center;
	background: #fff;
	padding: 0px
}
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: #0D2144; font-weight: 500; margin-left: 10px}
.visit-schedule.nodata { color: #333; background: none; padding: 0; border-radius: 0}
.visit-schedule.nodata strong { color: #0D2144; font-weight: 500; margin: 0 5px}

/* BTN */
.button_line { text-align: center; margin-bottom: 50px}
.btn_res {
	display: inline-block;
	width: 295px;
	height: 75px;
	background: #882530;
	color: #fff;
	font-size: 19px;
	border: 1px solid transparent;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
	margin: 0 auto;
}

.btn_res:hover {
	background: #071125;
}
.btn_res.outline { background: #fff; color: #0D2144; border: 1px solid #0D2144}
.btn_res.outline:hover { background: #0D2144; color: #fff;}


/*========================================================
Common document
========================================================*/

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;
}
#result1, #c_b_name {
	height: 43px;
	display: block;
	width: 100%;
	font-size: 0.875rem;
	color: #111;
	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; }
.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: none}
.checkradio-box input[type="radio"]:disabled+.radio-icon::before { background: #eee}
.checkradio-box input[type="radio"]:disabled~.radio-text { cursor: none}

.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}


.agree_wrap {
	padding-bottom: 30px;
	margin-bottom: 30px;
	text-align:left;
}

.agree_box {
	width: 100%;
	overflow-y: scroll;
	/* border: 2px solid #3f1d42; */
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
	height: 220px;
	background: #f7f7f7;
	color: #333;
	font-size: 17px;
	border: 1px solid #ddd;
}

.agree_box p {
	margin: 20px 0;
}

.agree_box h4 {
	margin: 20px 0;
}
.agree_box .h5 {
	display: inline-block;
	font-weight: 800;
	font-size: 19px;
	margin: 15px 0;
}

.agree_box .h6 {
	display: inline-block;
	font-weight: 800;
}

.agree_radio {
	font-size: 18px;
	text-align: end;
}

.agree_radio label {
	display:inline-block;
	margin-left: 10px;
	cursor:pointer;
}


@media (max-width:1024px) {
	.container .row {
		max-width: 100vw;
	}
	.res_container {
		width: 95vw;
	}

	.res_container ul.tabs {
		margin-bottom: 40px;
	}



	.agree_box .h5 {
		font-size:16px;
	}

	.agree_radio,
	.agree_radio .checkradio-box .radio-text {
		font-size: 24px !important;
	}

	.agree_box {
		font-size: 24px !important;
	}

	.agree_radio,
	.res_choice h4.res_tit {
		text-align:center;
	}

	.agree_radio span {
		display:block;
		text-align:center;
		margin-bottom: 5px;
	}

	.checkradio-box input[type="radio"]+.radio-icon {
		width: 25px;
		height: 25px;
		left: -5px;
		top: calc(50% + 2px);
	}

	h4.res_tit {
		font-size:26px;
		margin-bottom: 30px;
	}

	.res_choice h4.res_tit {
		margin-bottom: 10px;

	}

	.res_choice_in {
		padding: 15px;
	}


	.choice_list {
		margin-bottom: 20px;
	}

	.w250 {
		width: 100% !important;
	}

	table.board_write th,
	table.board_write td {
		padding: 10px;
	}


	.res_choice_in { display: block; }
	.res_cal_box {
		width: 100%;
		margin-right: 0;
		margin-bottom: 40px;
	}
	.time_box {
		/*width: 100%;*/
		width: 682.5px;
	}
	.res_info h5 {
		font-size: 25px;
		margin-top: 50px;
	}
	.time_box ul {
		padding: 20px;
	}
	.time_box ul li .checkradio-box .radio-text em {
		font-size: 24px;
	}
	.res_container::after {
		content: unset;
	}

	.res_container ul.tabs li a {
		padding: 20px 0;
		font-size: 24px;
	}

	h5.res_step_tit {
		font-size: 26px;
	}
	.calendar_tlt {
		padding: 24px;
	}
	.calendar_tlt strong {
		font-size: 24px;
	}
	.calendar_tlt a {
		width: 30px;
		height: 30px;
	}
	table.calendar th {
		padding: 15px 0;
		font-size: 24px;
	}
	table.calendar td {
		font-size: 22px;
		height: 55px;
	}

	.choice_date {
		font-size: 24px;
	}
	.choice_date span {
		font-size: 22px;
	}
	.time_box ul li.not-today {
		height: 300px;
	}
	.time_box ul li.not-today span {
		font-size: 24px;
		width: 382px;
	}
	table.board_write th {
		font-size: 24px;
	}
	#result1, .form-basic, #c_b_name {
		font-size: 24px;
		height: unset !important;
	}
	.form-basic::placeholder {
		height: unset;
		font-size: 24px;
	}
	.w70 {
		width: 120px !important;
	}
	.warn {
		font-size: 22px;
	}
	.btn_res {
		font-size: 26px;
	}

	.rese_cal_wrap, .rese_cal_time_wrap {
		width: unset;
	}

}