/* ===============================================================
    * reservation
=============================================================== */
.reservation {position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.3);}
.reserve-wrap {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    max-width: 1080px; width: 65%; height: 80%;
}
.reserve-box {position: relative; width: 100%; height: 85%; background: #fff;}
.reserve-close {z-index: 500; position: absolute; right: 35px; top: 35px; font-size: 30px; color: #222; cursor: pointer;}
.reserve-tit {position: relative; height: 100px; text-align: center;}
.reserve-tit h2 {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 24px; color: #222;}

.reserve-check {width: 100%; height: 15%;}
.checkbox {height: calc(100% - 50px); display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #fff;}
.checkbox h4 {font-size: 14px;}
.checkbox p input {opacity: 0; visibility: hidden; width: 0;}
.checkbox p label {position: relative; padding-left: 24px; cursor: pointer; color: #fff; white-space: nowrap;}
.checkbox p label:after {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; border: 2px solid #dc8436; background: #fff;
}
.checkbox p label:before {
    content: ''; position: absolute; left: 3px; top: 40%; transform: translateY(-50%) rotate(-45deg);
    width: 12px; height: 7px; border-bottom: 2px solid #fff; border-left: 2px solid #fff;
    z-index: 1; opacity: 0;
}
.checkbox p input:checked + label:after {background: #dc8436;}
.checkbox p input:checked + label:before {opacity: 1;}
.checkbox p.required label {color: #f00;}

.btn {position: relative; width: 100%; height: 50px; line-height: 50px; text-align: center; color: #fff; display: flex; justify-content: space-between;}

/*실시간예약 한줄*/
/*.btn > div{ width: calc(50% - 10px); background: #dc8436; position: relative;  cursor: pointer;}*/
.btn > div{ width: calc(100%); background: #dc8436; position: relative;  cursor: pointer;}

.btn a {display: none; position: absolute; left: 0;right: 0;top: 0;bottom: 0;}
.btn.checked a {display: block;}
.btn.checked p {display: none;}

.border {position: relative; height: calc(100% - 100px); padding: 60px 40px 60px 80px;}
.border:after {content: ''; position: absolute; top: 60px; bottom: 60px; background: #ccc; left: 80px; width: 1px;}
.border:before {content: ''; position: absolute; top: 60px; bottom: 60px; background: #ccc; left: 50%; transform: translateX(-50%); width: 1px;}

.reserve-list {height: 100%; overflow-y: scroll;}
.reserve-list::-webkit-scrollbar {width: 7px;}
.reserve-list::-webkit-scrollbar-thumb {background-color: rgba(34,34,34,.8); background-clip: padding-box; border-radius: 10px; border: 2px solid transparent;}
.reserve-list::-webkit-scrollbar-track {background-color: #eee; border-radius: 10px;}
.reserve-item {width: 50%; margin-bottom: 50px; padding: 0 30px;}
.reserve-item:nth-of-type(odd) {float: left;}
.reserve-item:nth-of-type(even) {float: right;}
.reserve-item h3 {font-size: 18px; color: #dc8436;}
.reserve-item div {padding-top: 20px; font-size: 14px; line-height: 22px; color: #777;}
@media (max-width: 820px){
    /* ios only */
    /* @supports (-webkit-touch-callout: none) { 
        .reservation {
            min-height: 100vh;
            min-height: -webkit-fill-available; 
        }
    } */
    
    .reserve-wrap {top: 4.00vw; width: 100%; left: 50%; height: calc(100% - 4.00vw); transform: translateX(-50%);}
    .reserve-box {width: calc(100% - 8.00vw); margin: 0 auto; height: 75%;}
    .reserve-close {font-size: 6.67vw; right: 4.67vw; top: 4.67vw;}
    .reserve-tit {height: 21.33vw;}
    .reserve-tit h2 {font-size: 5.87vw; width: 100%;}

    .reserve-check {height: 25%;}
    .checkbox {height: calc(100% - 14.93vw); display: block; padding: 3vw 4vw 0; font-size: 3.20vw; text-align: right;}
    .checkbox h4 {font-size: 3.20vw; text-align: right;}
    .checkbox p label:after {width: 13px; height: 13px;}
    .checkbox p label:before {width: 10px; height: 5px;}
    .btn {height: 14.93vw; line-height: 14.93vw; font-size: 3.73vw;} 

    .border {height: calc(100% - 21.33vw); padding: 4.00vw 2.00vw 4.00vw 4.00vw;}
    .border:after, .border:before {display: none;}

    .reserve-list {padding-right: 4.00vw;}
    .reserve-item {position: relative; width: 100%; float: none!important; border-left: 0.13vw solid #ccc; padding: 0 4.00vw; margin-bottom: 16.00vw;}
    .reserve-item:after {content: ''; position: absolute; left: 0; right: 0; bottom: -8.00vw; height: 0.13vw; background: #ccc;}
    .reserve-item:last-of-type:after {display: none;}
    .reserve-item h3 {font-size: 4.27vw;}
    .reserve-item div {padding-top: 2.67vw; font-size: 3.20vw; line-height: 3.73vw;}

    /* 2021-11-16 edit */
    .reservation {display: flex; align-items: center; justify-content: center;}
    .reserve-wrap {position: static; left: initial; top: initial; transform: none; height: 80vh; align-content: center;}
    .reserve-box {height: 70%;}
    .checkbox {height: calc(100% - 16vw);}
    .btn {width: calc(100% - 8vw); margin: 0 auto;}
}