/******************* 공통 *******************/
.sub-section-in {
	width: 1400px;
	margin: auto;
	padding: 120px 0;
}
/******************* 공통 *******************/


/******************* confirm *******************/
#confirm .sub-section-in, #reser-mypage .sub-section-in {
	width: 640px;
	padding-top: 180px;
}
#confirm .title-area, #reser-mypage .title-area, #reser-list .title-area {
	font-size: 30px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 15px;
}
.confirm-wrap > small {
	position: relative;
	display: block;
	margin-bottom: 20px;
	font-size: 16px;
	text-align: center;
	opacity: 0.8;
}
.confirm-wrap > small:before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #ddd;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.confirm-wrap > small span {
    position: relative;
	display: block;
    width: 130px;
    margin: auto;
    background: #fff;
}
.confirm-wrap li {
	display: flex;
    align-items: center;
	margin-bottom: 15px;
}
.confirm-wrap li > label {
    min-width: 150px;
    float: left;
    font-size: 18px;
    font-weight: 600;
}
.confirm-wrap li > input {
    width: calc(100% - 150px);
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
    border: 0;
    background: transparent;
    border-radius: 4px;
	border: 1px solid #ddd;
    background: #fff;
    vertical-align: middle;
    text-indent: 10px;
}
.confirm-wrap li > input::placeholder {
	font-size: 16px;
}
.confirm-wrap .login-btn, .confirm-wrap .confirm-btn {
	display: block;
	width: 240px;
	margin: 40px auto 0;
	line-height: 56px;
    height: 56px;
    padding: 0 10px;
    text-align: center;
    border: 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    border: 1px solid #05a1f2;
    background: #05a1f2;
    color: #fff;
    cursor: pointer;
}
.confirm-wrap .confirm-btn {
	background: #969696;
    border: 1px solid #969696;
	color: #fff;
}
.confirm-wrap:last-child {
	margin-top: 80px;
}
/******************* confirm *******************/


/******************* reservation-mypage *******************/
#reser-mypage .confirm-wrap table {
	width: 100%;
	padding:0;
    border:0;
    border-spacing:0px;
    border-collapse:collapse;
	border-top: 2px solid #b5b5b5;
}
#reser-mypage .confirm-wrap table tr {
	width: 50%;
	float: left;
    border-spacing:0px;
    border-collapse:collapse;
	border-bottom: 1px solid #ddd;
	border-left: none;
	border-right: none;
}
#reser-mypage .confirm-wrap table tr.sum, #reser-mypage .confirm-wrap table tr.wide {
	width: 100%;
}
#reser-mypage .confirm-wrap table th, #reser-mypage .confirm-wrap table td {
	float: left;
	padding: 18px 12px;
	font-size: 18px;
    font-weight: 500;
	text-align: left;
}
#reser-mypage .confirm-wrap table th {
	width: 130px;
}
#reser-mypage .confirm-wrap table td {
	width: calc(100% - 130px);
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
}
#reser-mypage .confirm-wrap table td .price {
	color: #05a1f2;
	font-weight: 900;
}
#reser-mypage .confirm-wrap:nth-child(2) {
	margin-bottom: 50px;
}
#reser-mypage .confirm-wrap:last-child {
	margin-top: 0px;
}
#reser-mypage .confirm-wrap table tr:nth-child(2n) td, #reser-mypage .confirm-wrap table tr.wide td, #reser-mypage .confirm-wrap table tr.sum td {
	border-right: 0;
 }
#reser-mypage .confirm-wrap table:after, #reser-mypage .confirm-wrap table tr:after {
	content: "";
	display: block;
	clear: both;
}
#reser-mypage .confirm-wrap.m-info table tr {
	width: 100%;
}
#reser-mypage .confirm-wrap.m-info table td {
	border-right: 0;	
}
.badge {
	display: block;
	width: 74px;
	padding: 4px 0;
	border-radius: 50px;    
	font-size: 13px;
	color: #fff;
	text-align: center;
}
.badge.wait {background: #878787;}
.badge.complete {background: #05a1f2;}
.badge.cancel {background: #f23c05;}
.badge.refund_wait {background: #f29e05;}
.badge.refund_ok {background: #8dc740;}

#reser-mypage .goback-list {
    display: block;
    width: 160px;
    line-height: 56px;
    height: 56px;
    padding: 0 10px;
    margin: 80px auto 0;
    border: 1px solid #969696;
    background: #969696;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}
#reser-mypage .goback-list:hover {
	border: 1px solid #969696;
    background: #fff;
    color: #969696;
    transition: all .3s ease-in;
}
/******************* reservation-mypage *******************/


/******************* 예약내역 *******************/
#reser-list .sub-section-in {
	width: 1400px;
	padding-top: 180px;
}
#reser-list .confirm-wrap:last-child {
	margin-top: 0;
}
#reser-list .confirm-wrap table {
	width: 100%;
	padding:0;
    border:0;
    border-spacing:0px;
    border-collapse:collapse;
}
#reser-list .confirm-wrap table tr {
	width: 100%;
	cursor: pointer;
	transition: all .3s ease-in;
}
#reser-list .confirm-wrap table tr:hover {
	background: #f9f9f9;
}
#reser-list .confirm-wrap table th {
	border-top: 2px solid #b5b5b5;
	border-bottom: 2px solid #b5b5b5;
}
#reser-list .confirm-wrap table th, #reser-list .confirm-wrap table td {
	padding: 18px 12px;
	font-size: 18px;
    font-weight: 500;
	text-align: left;
}
#reser-list .confirm-wrap table td {
	border-bottom: 1px solid #ddd;
}
#reser-list .confirm-wrap table th.center, #reser-list .confirm-wrap table td.center {
	text-align: center;
}
#reser-list .confirm-wrap table th.right, #reser-list .confirm-wrap table td.right {
	text-align: right;
}
#reser-list .confirm-wrap table td .badge {
	margin: auto;
}
#reser-list .confirm-wrap table td.blue a {
	color: #05a1f2;
}
#reser-list .confirm-wrap table td.no-reser {
	padding: 120px 0;
	text-align: center;
	opacity: 0.5;
}
/******************* 예약내역 *******************/


/******************* 실시간예약 *******************/
#reservation-header .sub-top, #complete-header .sub-top {
	background: url("../img/sub/subtop_05.png") no-repeat center / cover;
}
#reservation .sub-section-in, #reservation .sub-section-in {
	width: 1400px;
	margin: auto;
}
#reservation .sub-tit {
	margin-bottom: 30px;
}
#reservation .st-tit {
	display: block;
	margin-bottom: 10px;
    font-size: 18px;
    font-weight: 800;
	color: #05a1f2;
}

.step02-top {
	margin-bottom: 80px;
}
.step02-top #datepicker.left {
	float: left;
	width: calc(35% - 30px);
	height: 354px;
}
.step02-top .img-wrap {
	float: right;
	width: 65%;
	height: 500px;
	margin-left: 30px;
	/*
	background:  url("../img/sub/site02-2.png") no-repeat center / contain;
	*/
}
.step02-top:after {
	content: "";
	display: block;
	clear: both;
}
.ui-datepicker-header {
	position: relative;
}
.ui-datepicker-prev, .ui-datepicker-next {
	width: 20px;
    height: 20px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: url("../img/sub/left.png") no-repeat center / 20px;
	cursor: pointer;
}
.ui-datepicker-next {
	left: inherit;
	right: 0;
	background: url("../img/sub/right.png") no-repeat center / 20px;
}
.ui-icon {display: none;}
.ui-datepicker-title {
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: bold;
	text-align: center;
}
.ui-datepicker-calendar {
	width: 100%;
	padding: 10px 10px 30px;
	border: 1px solid #ddd;
	text-align: center;
}
.ui-datepicker-calendar th, .ui-datepicker-calendar td {
	padding: 10px 8px;
	width: calc(100% / 7);
	font-size: 15px;
}
.ui-state-active {
	padding: 2px 5px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	background: #05a1f2;
}
.ui-state-disabled {
	color: #c9c9c9;
}
.step02-top:after {
	content: "";
	display: block;
	clear: both;
}

.reser-table-wrap {
	width: 100%;
	margin-bottom: 50px;
}
#reservation .reser-table, .result-table, .reser-t-explain table {
	width: 100%;
	padding:0;
    border:0;
    border-spacing:0px;
    border-collapse:collapse;
	border-top: 2px solid #b5b5b5;	
}
#reservation .reser-table th, .reser-t-explain table th {
	padding: 12px 10px;
	font-size: 17px;
	text-align: center;
	border: 1px solid #e6e9ea;
	background: #f9f9f9;
}
#reservation .reser-table td, .reser-t-explain table td {
	padding: 15px 10px;
	font-size: 15px;
	text-align: center;
	border: 1px solid #e6e9ea;
}
#reservation .reser-table td:first-child {
	position: relative;
}
#reservation .reser-table th:first-child, #reservation .reser-table td:first-child {
	border-left: none;
}
#reservation .reser-table th:last-child, #reservation .reser-table td:last-child {
	border-right: none;
}

.reser-t-explain {
	word-break: keep-all;
	margin-top: 50px;
}
.reser-t-explain p {
	margin-bottom: 8px; 
	font-size: 18px;
	font-weight: bold;
	color: #05a1f2;
}
.reser-t-explain table th, .reser-t-explain table td {
	width: 33.33%;
}
.reser-t-explain table th {
	font-size: 18px;
}
.reser-t-explain table td {
	font-size: 17px;
}
.reser-t-explain small {
	display: block;
	margin-top: 5px;
	font-size: 15px;
	/*text-align: right;*/
	opacity: 0.6;
}
.reser-t-explain table th span {
	display: block;
	margin: 5px auto 0;
    padding: 2px 0;
	width: 50px;
	border-radius: 50px;
	background: #8f8f8f;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	color: #fff;
}

.result-table {
	margin-bottom: 50px;
}

#reservation .sports-table {
	margin: 0 0 50px;
}
#reservation .sports-table tr {
	display: flex;
    align-items: center;
	margin-bottom: 15px;
}
#reservation .sports-table tr:last-child {
	margin-bottom: 0px;
}

#reservation input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}
#reservation  input[type="radio"] + label {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	color: #fff;
}
#reservation  input[type="radio"]:disabled + label {
	color: #c7c7c7;
}
#reservation  input[type="radio"] + label:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 100%;
}
#reservation  input[type="radio"]:checked + label:before {
    background: #fff;
}
#reservation  input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #05a1f2;
    border-radius: 100%;
}

#reservation .reservation-info .radio-box {
	display: flex;
	margin-top: 2px;
}
#reservation .reservation-info input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}
#reservation .reservation-info input[type="radio"] + label {
    display: inline-block;
    margin-right: 40px;
    position: relative;
    padding-left: 30px;
	font-size: 16px;
	color: #0c0c0c;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#reservation .reservation-info input[type="radio"]:disabled + label {
	color: #c7c7c7;
}
#reservation .reservation-info input[type="radio"] + label:before {
    content: '';
    position: absolute;
    top: 50%;
	left: 0;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 100%;
}
#reservation .reservation-info input[type="radio"]:checked + label:before {
    background: #fff;
}
#reservation .reservation-info input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 50%;
	left: 5px;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #05a1f2;
    border-radius: 100%;
}

#reservation select {
	width: 180px; 
	padding: 10px 15px; 
	font-family: inherit; 
	font-size: 15px;
	background: url('../img/sub/down.png') no-repeat right 15px center / 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-appearance: none; 
	-moz-appearance: none;
	appearance: none;
}
#reservation select::-ms-expand {
    display: none;
}
#reservation select:disabled {
	background: #f9f9f9;
	border: 1px solid #ddd;
	color: #b9b9b9;
}
#reservation .rp_use {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    outline: 0;
    z-index: -1;
    overflow: hidden;
}
#reservation input[type="checkbox"] + label {
	position:relative;
	margin: 0 28px 0 8px;
	font-size: 15px;
	font-weight: 600;
}
#reservation input[type="checkbox"] + label span {
	float: left;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
}
#reservation input[type="checkbox"]:checked + label {
	color: #000
}
#reservation input[type="checkbox"]:checked + label span {
	background:url('../img/sub/check_white.png') no-repeat 50% 50% #05a1f2;
	background-size: 18px;
	border-color: #05a1f2;
	border-radius: 4px;
}

#reservation input[type="text"] {
	width: calc(100% - 75px);
	border: 0;
	background: transparent;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #d1d1d1;
	border-radius: 4px;
}

#reservation .total-wrap {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
}
#reservation .total-wrap > div {
	padding: 0 10px 18px;
}
#reservation .total-wrap > div:last-child {
	padding: 18px 10px;
	border-top: 1px solid #a9a9a9;
}
#reservation .total-wrap .price {
	float: right;
}
#reservation #total_price-span {
	color: #05a1f2;
}
#reservation .total-wrap:after {
	content: "";
	display: block; clear: both;
}

#reservation .reser-info {
	margin: 50px auto 30px;
	padding: 50px;
	background: #f9f9f9;
	border-radius: 20px;
}
#reservation .reser-info > div {
	margin-bottom: 25px;
	font-size: 14px;
	word-break: keep-all;
}
#reservation .reser-info > div strong {
	font-size: 15px;
}
#reservation .reser-info > div table {
	margin-top: 5px;
	padding:0;
    border:0;
    border-spacing:0px;
    border-collapse:collapse;
}
#reservation .reser-info > div tr {
	border-bottom: 1px solid #ddd;
	font-size: 14px;
	text-align: left;
}
#reservation .reser-info > div th, #reservation .reser-info > div td {
	padding: 10px 14px;	
}

.reser-btn-wrap {
	margin: 50px auto 0;
	text-align: center;
}
#reservation .reser-btn {
	margin: 0 5px;
    width: 180px;
	height: 56px;
    line-height: 56px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    border-radius: 50px;
	background: #05a1f2;
	border: 1px solid #05a1f2;
}
#reservation .reser-btn.back {
    background: #fff;
	border: 1px solid #dcdcdc;
    color: #05a1f2;
}

#reservation .result-table th, .result-table td {
	padding: 15px 10px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #e6e9ea;
}
#reservation .result-table th {
	border-left: 0;
}
#reservation .result-table td {
	border-right: 0;
}
#reservation .reservation-info {
	margin-bottom: 50px;
}
#reservation .reservation-info li  {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
#reservation .reservation-info li > label {
    min-width: 150px;
    float: left;
    font-size: 16px;
    font-weight: 600;
}
#reservation .reservation-info li > input {
    width: calc(100% - 150px);
    border-radius: 4px;
    padding: 10px 8px;
    font-size: 16px;
    border: 0;
    background: transparent;
    border-radius: 4px;
    border: 1px solid #d1d1d1;
    background: #fff;
    vertical-align: middle;
    text-indent: 8px;
}
#reservation .reservation-info li > input::placeholder {
    font-size: 16px;
	color: #d1d1d1;
}
#reservation .reservation-info.guest li:nth-child(4n) {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
}
#reservation .reservation-info.guest li:last-child {
	border-bottom: 0;
}

#fregister_private .fregister_agree {
	margin-bottom: 15px;
}
#fregister_private .selec_chk {
	display: none;
}
#fregister_private div {
    height: 180px;
    padding: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -.3px;
    background: #f9f9f9;
    border-radius: 20px;
    overflow-y: scroll;
}
#fregister_private p {
    margin-top: 24px;
	font-size: 14px;
}
#fregister_private p:first-child {
    margin-top: 0;
}

#reservation .bank-info {
	margin: 60px auto;
}
#reservation .bank-info * {
	display: block;
	margin: auto;
	text-align: center;
}
#reservation .bank-info .st-tit {
	margin: 5px auto 8px;
}
#reservation .bank-info > p {
	font-size: 14px;
	line-height: 1.4;
}
#reservation .bank-info > p strong {
	font-size: 16px;
}
/******************* 실시간예약 *******************/


/******************* 예약완료 *******************/
.complete-wrap {
	padding: 80px 20px;
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
	background: #fcfeff;
	border: 1px solid #00adec;
	border-radius: 30px;
}
.complete-wrap img {
	display: block;
	margin: 0 auto 15px;
	text-align: center;
}
.complete-wrap strong {
	font-size: 20px;
}
.complete-wrap .num {
	display: block;
    margin-bottom: 10px;
	font-size: 28px;
	font-weight: 800;
	color: #00adec;
}
.complete-wrap a {
	text-decoration: underline;
}
.relative{ position:relative; }
.sports-table .relative {
	min-width: 150px;
    text-align: left;
}
/******************* 예약완료 *******************/


.pop_up_wrap {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.7);
	z-index: 10000;
	overflow: auto;
}
.pop_up_wrap.none {
	display: none;
}
.pop_up {
	position: absolute;
	top: 50%;left:50%;
	transform: translate(-50%,-50%);
}

.btn_close {
	position: absolute;
	cursor: pointer;
	top: -30px;
	right: 0;
	font-size: 14px;
	color: #fff;
	background: transparent;
	border: none;
}

.pop_up_wrap .w > strong {
	display: block;
	margin-bottom: 8px;
	font-size: 22px;
	font-weight: 800;
	color: #05a1f2;
	text-align: center;
}
.pop_up_wrap .w {
	padding: 40px 30px 50px;
	background:#fff;
	font-size: 15px;
	line-height: 1.5;
}
.pop_up_wrap p {
	margin-bottom: 20px;
}
.pop_up_wrap p:last-child {
	margin-bottom: 0;
}
.pop_up_wrap p a {
	text-decoration: underline;
	color: #05a1f2;
}
.pop-btn-wrap {
	margin-top: 30px;
	text-align: center;
}
.pop-btn-wrap span {
	display: inline-block;
	margin: 0 1px;
	padding: 10px 0;
	width: 110px;
	border-radius: 50px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
.pop-btn-wrap span.js-refund-ok-btn {
	background: #05a1f2;
}
.pop-btn-wrap span.js-close-btn {
	background: #a1a1a1;
}

.camping-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}
.camping-tab li {
	margin: 0 5px;
	padding: 6px 15px;
	background: #f1f1f1;
	border-radius: 50px;
	cursor: pointer;
}
.camping-tab li.on {
	background: #05a1f2;
}
.camping-tab li.on a {
	color: #fff;
	font-weight: 600;
}
.camping-tab li a {
	display: block;
	font-size: 16px;
	text-align: center;
}

.reser-btn-wrap {display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;}




.reser2-info {
    width: 100%;
    margin: 0 auto 80px;
    padding: 60px 15px 60px 60px;
    background: #fcfeff;
    border: 1px solid #05a1f2;
    border-radius: 30px;
}
.reser2-info li {
    display: flex;
    padding-bottom: 15px;
    font-size: 22px;
}
.reser2-info li strong span {
	color: #05a1f2;
}
.reser2 .btn-wrap {display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;}
.reser2 .btn_submit {width: 210px;}

@media all and (max-width:1551px) {
	#reservation .sub-section-in, #reser-list .sub-section-in, #complete .sub-section-in {width: 80%;}
	/*
	#reservation-wrap {overflow-x: scroll;}
	*/
}

@media all and (max-width:1281px) {
	#reservation .sub-section-in, #reser-list .sub-section-in, #complete .sub-section-in {width: 90%;}
}

@media all and (max-width:1201px){
	#confirm .sub-section-in, #reser-mypage .sub-section-in {width: 80%; margin: 0 auto;}
	#confirm .title-area, #reser-mypage .title-area, #reser-list .title-area {font-size: 24px;}
	
	.sub-section-in {padding: 100px 0;}

	#reservation .sub-tit {margin-bottom: 20px; font-size: 30px;}

	.reser2-info {padding: 30px;}
	.reser2-info li {font-size: 20px;}
}

@media all and (max-width:1025px){
	.sub-section-in {padding: 80px 0;}
	.step02-top #datepicker.left {width: calc(45% - 30px); height: 354px;}
	.step02-top .img-wrap {width: 55%; height: 354px;}
}

@media all and (max-width:877px){
	#reser-mypage .confirm-wrap table th {width: 110px;}
	#reser-mypage .confirm-wrap table th, #reser-mypage .confirm-wrap table td {font-size: 16px;}
	#reser-mypage .confirm-wrap table td {width: calc(100% - 110px);}

	#reservation .sub-tit {font-size: 26px;}

	#reservation .reser-info {padding: 34px;}
	.step02-top #datepicker.left {width: 60%; height: inherit; margin: 20px auto 25px; float: none;}
	.step02-top .img-wrap {width: 100%; height: 354px; margin: auto; float: none;}

	#reser-list .confirm-wrap table th, #reser-list .confirm-wrap table td {font-size: 16px;}
	#reser-mypage .goback-list {margin-top: 35px; width: 150px; line-height: 54px; height: 54px; font-size: 18px;}

	.reser-t-explain table th, .reser-t-explain table td {font-size: 17px;}

	.reser2 .btn_submit {width: 190px; line-height: 54px; height: 54px; font-size: 18px;}

	.reser2-info {padding: 30px 15px;}
	.reser2-info li {font-size: 18px; padding-bottom: 4px;}
}

@media all and (max-width:767px){
	#reser-list .confirm-wrap table th.none, #reser-list .confirm-wrap table td.none {display: none;}
}

@media all and (max-width:641px){
	#confirm .sub-section-in, #reser-mypage .sub-section-in {width: 90%; padding-top: 150px;}
	#confirm .title-area, #reser-mypage .title-area, #reser-list .title-area {font-size: 22px;}

	.confirm-wrap li {display: block;}
	.confirm-wrap li > label {float: none; display: block; min-width: 100%; margin-bottom: 5px;}
	.confirm-wrap li > input {width: 100%;}
	.confirm-wrap li > label {font-size: 16px;}
	.confirm-wrap .login-btn, .confirm-wrap .confirm-btn {margin-top: 30px; width: 200px; line-height: 50px; height: 50px; font-size: 17px;}

	#reser-mypage .confirm-wrap table tr {width: 100%; float:  none;}
	#reser-mypage .confirm-wrap table th {width: 100px;}
	#reser-mypage .confirm-wrap table tr td {width: calc(100% - 100px);border-right: none;}
	#reser-mypage .confirm-wrap table th, #reser-mypage .confirm-wrap table td {padding: 18px 8px; font-size: 15px;}
	#reser-mypage .confirm-wrap table tr.sum td {border-left: 1px solid #ddd;}

	.reser-t-explain table th, .reser-t-explain table td {font-size: 16px;}

	#reservation .sub-tit {font-size: 22px;}
	#reservation .st-tit {font-size: 16px;}
	#reservation .reser-btn {margin: 0 2.5px; width: 160px; line-height: 50px; height: 50px; font-size: 17px;}

	#reservation .reser-table th {min-width: 70px; font-size: 16px;}
	#reservation select {width: 130px;}
	#reservation .sports-table select {width: 180px;}
	#reservation .reser-info {padding: 20px;}
	#reservation .total-wrap {font-size: 17px;}
	#reservation .total-wrap > div {padding: 0 10px 12px;}

	.reser-table-wrap {overflow-x: scroll;}

	#reservation .result-table th, .result-table td {font-size: 15px;}
	#reservation .reservation-info.guest li:nth-child(4n) {padding-bottom: 20px; margin-bottom: 20px;}
	#reservation .reservation-info li > label {font-size: 15px; min-width: 90px;}
	#reservation .reservation-info li > input {font-size: 15px; width: calc(100% - 90px);}
	#reservation .reservation-info li > input::placeholder {font-size: 15px;}
	.step02-top #datepicker.left {width: 80%;}
	.step02-top .img-wrap {width: 100%; height: 370px;}

	#reser-list .confirm-wrap table th, #reser-list .confirm-wrap table td {font-size: 15px;}

	.complete-wrap {font-size: 15px; word-break: keep-all;}
	.complete-wrap img {width: 40px;}
	.complete-wrap strong {font-size: 18px;}
	.complete-wrap .num {font-size: 24px;}

	#reservation select {width: 100px;}
	
	.pop_up {width: 90%;}
	.pop_up_wrap .w {padding: 30px 20px 40px; font-size: 14px;}
	.pop_up_wrap p {margin-bottom: 10px;}
	.pop-btn-wrap span {padding: 8px 0; width: 100px; font-size: 15px;}
	.pop-btn-wrap {margin-top: 20px;}

	
	.camping-tab li {padding: 6px 12px;}
	.camping-tab li a {font-size: 15px;}

	.reser2-info {border-radius: 20px;}
	.reser2-info li {font-size: 16px;}
}

@media all and (max-width:481px){
	#reservation .sub-tit {font-size: 20px;}

	.step02-top #datepicker.left {width: 100%;}
	.ui-datepicker-calendar {padding: 0px 0px 10px;}
	.ui-datepicker-title {font-size: 15px;}
	.ui-datepicker-prev, .ui-datepicker-next {background-size: 18px;}
	.ui-datepicker-calendar th, .ui-datepicker-calendar td {padding: 8px 2px; font-size: 13px;}
	.ui-state-active {font-size: 16px;}
	.step02-top #datepicker.left {margin-bottom: 15px;}
	.step02-top .img-wrap {height: 260px;}
	#reser-mypage .goback-list {width: 144px; line-height: 50px; height: 50px; font-size: 17px;}

	.reser-t-explain table th, .reser-t-explain table td {font-size: 15px;}
	.reser-t-explain small {font-size: 13px;}

	#reservation .reservation-info li > label {min-width: 70px;}

	.sports-table .relative {min-width: 110px;}
	#reservation .sports-table select {width: 160px;}
	#reservation input[type="checkbox"] + label {margin: 0 16px 0 4px;}

	#reservation .reser-btn {width: 130px; line-height: 48px; height: 48px;}

	.pop_up_wrap .w {overflow-y: scroll;}

	.reser2-info {border-radius: 15px;}
	.reser2-info li {font-size: 15px;}
	.reser2 .btn_submit {width: 170px; line-height: 46px; height: 46px; font-size: 16px;}
}