._reservation{}
._reservation .contents{}
._reservation .contents .wrap{
	display: flex; align-items: flex-start; justify-content: space-between;
}
._reservation .contents .left{
	width: 44.44%;
}
._reservation .contents .left .imgBx{
	position: relative; width: 100%;
}
._reservation .contents .left .imgBx::before {
	content:''; display: block; padding-bottom: calc(660/640*100%);
}
._reservation .contents .left .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
	opacity: 0; transition: opacity 0.5s;
}
._reservation .contents .left .imgBx img.on{opacity: 1;}

._reservation .contents form{
	width: 48%;
}
._reservation .contents form .box{margin-bottom: 40px;}
._reservation .contents form .box.no_margin{margin-bottom: 0;}
._reservation .contents form .box h4{
	font-size: 20px; font-weight: 600; letter-spacing: -0.025em;
	position: relative; display: inline-block; box-sizing: border-box;
	margin-bottom: 20px;
}
._reservation .contents form .box h4.star{padding-right: 10px;}
._reservation .contents form .box h4.star::after {
	content:''; display: block; position: absolute; right: 0; top: 0;
	width: 6px; height: 6px; border-radius: 50%; background-color: var(--red);
}
._reservation .contents form .box .check{
	display: flex; gap: 14px;
}
._reservation .contents form .box .check label{flex: 1; cursor: pointer;}
._reservation .contents form .box .check label input{display: none;}
._reservation .contents form .box .check label .imgBx{
	position: relative; border: 2px solid #dddddd; box-sizing: border-box;
	transition: border-color 0.1s;
}
html.pc ._reservation .contents form .box .check label:hover .imgBx{border-color: #444;}
._reservation .contents form .box .check label input:checked + .imgBx{border-color: var(--red) !important;}
._reservation .contents form .box .check label .imgBx::before {
	content:''; display: block; padding-bottom: calc(240/220*100%);
}
._reservation .contents form .box .check label .imgBx img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
}
._reservation .contents form .box .check label p{
	font-size: 18px; letter-spacing: -0.025em; text-align: center; margin-top: 14px; margin-bottom: 10px;
}

._reservation .contents form .box h4{}
._reservation .contents form .box input{
	height: 60px; font-size: 17px; font-family: 'Pretendard'; letter-spacing: -0.025em;
	padding: 0 20px; box-sizing: border-box; width: 100%;
	border: 1px solid #dddddd;
}
._reservation .contents form .box input::placeholder{
	color: rgba(0,0,0,0.5); font-size: 17px; font-family: 'Pretendard'; letter-spacing: -0.025em;
}
._reservation .contents form .box .row{
	display: flex; gap: 10px; margin-bottom: 10px;
}
._reservation .contents form .box .row input{}
._reservation .contents form .box .row button{
	min-width: 120px; background-color: #888888; color: #fff;
	font-size: 17px; font-weight: 600; letter-spacing: -0.025em;
	transition: background-color 0.1s,color 0.1s;
}
._reservation .contents form .box .row button:hover{background-color: #444; color: #fff;}
._reservation .contents form .box .row button p{}
._reservation .contents form .box .textArea{
	width: 100%; height: 160px;
	padding: 20px; padding-right: 4px; box-sizing: border-box; 	border: 1px solid #dddddd;
}
._reservation .contents form .box textarea{
	padding-right: 6px; box-sizing: border-box;
	width: 100%; border: 0; height: 100%; resize: none;
	font-size: 17px; font-family: 'Pretendard'; letter-spacing: -0.025em;
	line-height: 1.3;
}
._reservation .contents form .box textarea::placeholder{
	font-size: 17px; font-family: 'Pretendard'; letter-spacing: -0.025em;
	line-height: 1.3;
}


/* 날짜 */
.datepicker-box{position: relative;}
.datepicker-box input{cursor: pointer;}
.datepicker-box i{position: absolute; top: 50%; transform: translateY(-50%); right: 20px; color: rgba(0,0,0,0.5); pointer-events: none;}
#ui-datepicker-div{position: absolute !important; top: 100% !important; left: 0 !important;}




/* 아래 */
._reservation .contents form .bottom{}
._reservation .contents form .agree{
	display: flex; align-items: center; line-height: 1.3;
	justify-content: flex-end; padding-top: 20px; padding-bottom: 40px;
}
._reservation .contents form .agree label{display: flex; align-items: center; cursor: pointer;}
._reservation .contents form .agree label input{}
._reservation .contents form .agree label .ico{
	position: relative; display: flex; align-items: center;
	width: 1em; height: 1em; margin-right: 0.2em;
}
._reservation .contents form .agree label .ico i{position: absolute;}
._reservation .contents form .agree label .ico i:nth-child(1){opacity: 1;}
._reservation .contents form .agree label .ico i:nth-child(2){opacity: 0;}
._reservation .contents form .agree label input:checked + .ico i:nth-child(1){opacity: 0;}
._reservation .contents form .agree label input:checked + .ico i:nth-child(2){opacity: 1;}
._reservation .contents form .agree label p{letter-spacing: -0.025em;}
._reservation .contents form .agree ._privacy_popup_btn{
	width: calc(60/12*1em); height: calc(20/12*1em); display: flex; align-items: center; justify-content: center;
	background-color: #888888; font-size: 12px; cursor: pointer; border-radius: 100px; color: #fff;
	line-height: 0.6; margin-left: 5px;
}
html.pc ._reservation .contents form .agree ._privacy_popup_btn:hover{background-color: #444;}
._reservation .contents form .agree ._privacy_popup_btn p{}

._reservation .contents form .submit_btn{
	margin-left: auto;
	width: calc(160/20*1em); height: calc(50/20*1em);
	display: flex; align-items: center; justify-content: space-between;
	background-color: var(--red); color: #fff; padding: 0 1em; box-sizing: border-box;
	font-size: 20px; letter-spacing: -0.025em;
	transition: background-color 0.2s;
}
html.pc ._reservation .contents form .submit_btn:hover{background-color: #444;}
._reservation .contents form .submit_btn p{}
._reservation .contents form .submit_btn i{}



@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	._reservation .contents .wrap{gap: 2.5vw;}
	._reservation .contents .left{width: calc(50% - 1.25vw);}
	._reservation .contents form{width: calc(50% - 1.25vw);}
}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	._reservation .contents .left{display: none;}
	._reservation .contents form{width: 100%;}
}
@media screen and (max-width:820px) {
	._reservation .contents form .box .check label p{font-size: 16px;}
	._reservation .contents form .box h4{font-size: 18px; margin-bottom: 10px;}
	._reservation .contents form .box input{font-size: 16px; height: 50px; padding: 0 14px;}
	._reservation .contents form .box input::placeholder{font-size: 16px;}
	._reservation .contents form .box .row button{font-size: 14px;}
	._reservation .contents form .box .textArea{padding: 14px;}
	._reservation .contents form .box textarea{font-size: 16px;}
	._reservation .contents form .box textarea::placeholder{font-size: 16px;}

	._reservation .contents form .agree{font-size: 14px;}
}
@media screen and (max-width:500px) {
	._reservation .contents form .submit_btn{font-size: 18px;}


	._reservation .contents form .box{margin-bottom: 20px;}
	._reservation .contents form .box .check{gap: 4px;}
	._reservation .contents form .box .check label p{font-size: 12px; margin: 8px;}
	._reservation .contents form .box h4{font-size: 14px; margin-bottom: 10px;}
	._reservation .contents form .box input{font-size: 12px; height: 36px; padding: 0 10px;}
	._reservation .contents form .box input::placeholder{font-size: 12px;}
	._reservation .contents form .box .row button{font-size: 12px; font-weight: 400; min-width: 70px;}
	._reservation .contents form .box .textArea{padding: 10px;}
	._reservation .contents form .box textarea{font-size: 12px;}
	._reservation .contents form .box textarea::placeholder{font-size: 12px;}

	._reservation .contents form .box .row{gap: 6px; margin-bottom: 6px;}

	._reservation .contents form .agree{font-size: 13px;}
	._reservation .contents form .agree ._privacy_popup_btn{font-size: 10px; line-height: 0.9;}
}
@media screen and (max-width:320px) {
	._reservation .contents form .box .check label p{font-size: 9px;}
}