@charset "UTF-8";

/* ==========================================================
 * 예약 회원구분 선택 (rsvn_00)
 * ========================================================== */
.rsvn-type-wrap {padding: 20px 0 80px;}
.rsvn-type-wrap .rsvn-type-head {text-align: center; margin-bottom: 40px;}
.rsvn-type-wrap .rsvn-type-head .step-txt {font-size: 13px; color: #838383; letter-spacing: 1px; margin-top: 8px;}

.rsvn-type-list {display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px;}
.rsvn-type-list .rsvn-type-item {
	position: relative;
	flex: 1 1 0;
	min-width: 260px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 46px 24px 40px;
	text-align: center;
	background: #fcfcfc;
	border: 1px solid #dddddd;
	/*border-radius: 12px;*/
	text-decoration: none;
	transition: all .25s ease;
}

/* 선택 가능한 카드 */
.rsvn-type-list .rsvn-type-item.btnRsvnType {cursor: pointer;}
.rsvn-type-list .rsvn-type-item.btnRsvnType:hover,
.rsvn-type-list .rsvn-type-item.btnRsvnType:focus-within {
	background: #fafcfe;
	border-color: #021D43;
	box-shadow: 0 8px 24px rgba(2, 29, 67, .12);
	transform: translateY(-4px);
}

.rsvn-type-list .rsvn-type-item .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: #f2f2f2;
	transition: background .25s ease;
}
.rsvn-type-list .rsvn-type-item .ico svg {width: 36px; height: 36px; stroke: #838383; transition: stroke .25s ease;}
.rsvn-type-list .rsvn-type-item.btnRsvnType:hover .ico,
.rsvn-type-list .rsvn-type-item.btnRsvnType:focus-within .ico {background: #ecf2f9;}
.rsvn-type-list .rsvn-type-item.btnRsvnType:hover .ico svg,
.rsvn-type-list .rsvn-type-item.btnRsvnType:focus-within .ico svg {stroke: #021D43;}

.rsvn-type-list .rsvn-type-item .tit {font-size: 22px; font-weight: bold; color: #3d3d3d; margin-bottom: 10px;}
.rsvn-type-list .rsvn-type-item .desc {font-size: 14px; color: #838383; line-height: 1.6; min-height: 45px;}

/* 회원번호 선택 */
.rsvn-type-list .rsvn-type-item .memb-select {
	width: 100%;
	margin-top: 18px;
	text-align: left;
	cursor: default;
}
.rsvn-type-list .rsvn-type-item .memb-select label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	color: #838383;
}
.rsvn-type-list .rsvn-type-item .memb-select select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	box-sizing: border-box;
	font-size: 14px;
	color: #3d3d3d;
	background: #ffffff;
	border: 1px solid #dddddd;
	/*border-radius: 6px;*/
	cursor: pointer;
}
.rsvn-type-list .rsvn-type-item .memb-select select:focus {border-color: #021D43; outline: none;}

.rsvn-type-list .rsvn-type-item .go-bt {
	display: inline-block;
	margin-top: auto;
	padding: 11px 34px;
	font-size: 14px;
	color: #565656;
	border: 1px solid #b3b3b3;
	/*border-radius: 30px;*/
	transition: all .25s ease;
}
.rsvn-type-list .rsvn-type-item .memb-select + .go-bt {margin-top: 18px;}
.rsvn-type-list .rsvn-type-item.btnRsvnType:hover .go-bt,
.rsvn-type-list .rsvn-type-item.btnRsvnType:focus-within .go-bt {background: #021D43; border-color: #021D43r; color: #ffffff;}

/* 선택 불가 카드 */
.rsvn-type-list .rsvn-type-item.disabled {
	background: #f7f7f7;
	border-color: #eaeaea;
	cursor: not-allowed;
}
.rsvn-type-list .rsvn-type-item.disabled .ico {background: #ededed;}
.rsvn-type-list .rsvn-type-item.disabled .ico svg {stroke: #c4c4c4;}
.rsvn-type-list .rsvn-type-item.disabled .tit {color: #a6a6a6;}
.rsvn-type-list .rsvn-type-item.disabled .desc {color: #b3b3b3;}
.rsvn-type-list .rsvn-type-item.disabled .go-bt.off {
	margin-top: auto;
	color: #a6a6a6;
	background: #ededed;
	border-color: #e0e0e0;
	cursor: not-allowed;
}

/* 안내문구는 카드 목록과 같은 폭으로 맞춘다. (360px * 3 + gap 20px * 2) */
.rsvn-type-wrap .rsvn-type-notice {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	margin-top: 44px;
	padding: 20px 24px;
	background: #f7f7f7;
	border-radius: 8px;
	font-size: 13px;
	color: #838383;
	line-height: 1.8;
}
.rsvn-type-wrap .rsvn-type-notice li {list-style: none; padding-left: 0;}
.rsvn-type-wrap .rsvn-type-notice li:before {content: none;}

@media all and (max-width: 1024px) {
	.rsvn-type-list {gap: 16px;}
	.rsvn-type-list .rsvn-type-item {min-width: 220px; padding: 40px 16px 34px;}
	.rsvn-type-list .rsvn-type-item .tit {font-size: 19px;}
}

@media all and (max-width: 767px) {
	.rsvn-type-wrap {padding: 10px 0 50px;}
	.rsvn-type-wrap .rsvn-type-head {margin-bottom: 26px;}
	.rsvn-type-list {display: block;}
	.rsvn-type-list .rsvn-type-item {
		width: 100%;
		max-width: none;
		min-width: 0;
		margin-bottom: 14px;
		padding: 30px 20px 26px;
	}
	.rsvn-type-list .rsvn-type-item .ico {width: 62px; height: 62px; margin-bottom: 14px;}
	.rsvn-type-list .rsvn-type-item .ico svg {width: 30px; height: 30px;}
	.rsvn-type-list .rsvn-type-item .desc {min-height: 0;}
	.rsvn-type-list .rsvn-type-item .go-bt {margin-top: 16px;}
	.rsvn-type-list .rsvn-type-item .memb-select {margin-top: 14px;}
	.rsvn-type-list .rsvn-type-item .memb-select + .go-bt {margin-top: 14px;}
}