@charset "utf-8";


/* 배너 */
.banner-wrap{
    width:100%;
    height:auto;
    object-fit: cover;
}

.banner-wrap img{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius:1rem;
}

.title-section{
    width:100%;
    height:400px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position:relative;
}
.title-section div{
    background: url(../img/reservation-bg.png) center bottom no-repeat;
    position: absolute;
    width:100%;
    height:inherit;
    animation: titleZoom 1s;
    animation-fill-mode: forwards;
}

@keyframes titleZoom {
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.05);
    }
}


.title-section h2{
    font-size:3rem;
    font-weight:700;
    color:#fff;
}

.reser-form-wrap{
    padding:10rem 24px;
    background: var(--gray50);
}

.map-wrap{
    max-width:1560px;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:2rem;
    letter-spacing:0;
    flex-wrap:wrap;
}

.map-wrap .map-txt{
    display: flex;
    gap:0.5rem;
}

.map-wrap .map-txt p{
    font-weight:600;
    color:var(--gray500);
}

.map-wrap a{
    color:var(--gray400);
    font-size:0.875rem;
}

.map-wrap .map-txt p span{
    color:var(--gray400);
    font-weight:400;
}

.map-mo{
    font-size:0.875rem;
    color:var(--gray400);
    margin: 0.5rem 0 2rem;
    letter-spacing: 0;
    line-height:1.5;
}

.form-box{
    width:100%;
    max-width:1560px;
    margin:0 auto;
    padding:0;
}

.form-box h3{
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:0;
    margin-bottom:60px;
}

#bo_cate_ul{
    display:flex;
    align-items: center;
    overflow: unset;
    background: var(--gray200);
    margin-bottom:6rem;
    border-radius:4px;
}

#bo_cate_ul > li{
    float:unset;
    border:transparent;
    line-height:55px;
    border-radius:4px;
}

#bo_cate_ul > li.on{
    background-color: var(--black500);
    border:transparent;
}

#bo_cate_ul > li a{
    font-size:20px;
    font-weight:600;
    letter-spacing:0;
    color:var(--gray400);
}

.dt-wrapper{
    display: flex;
    gap:2rem;
}

.calendar-wrap{
    flex-basis:40%;
    background: #fff;
    border-radius:1.25rem;
    padding:4rem;
}

.cal-box{
    float:unset;
    width:100%;
    margin-right:0;
}

.cal-navi{
    background-color: transparent;
    color:var(--black500);
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0 1rem;
    margin-bottom:1rem;
}

button{
    background-color: transparent;
}

.cal-navi button{
    background-color: transparent;
    width:initial;
    height:initial;
    padding:0;
    transform:none;
    min-width:fit-content;
}

.cal-navi .btn-prev{
    position: unset;
}

.cal-navi .btn-next{
    position: unset;
}

.cal-navi h2{
    line-height:unset;
    font-size:1.5rem;
}

table, tr, th, td{
    border:transparent;
}

#cal-table-box th{
    border:transparent;
    font-size:1.125rem;
}

#cal-table-box td{
    border:transparent;
}

#cal-table-box td .cm{
    width:40px;
    height:40px;
    line-height:40px;
}

#cal-table-box td .cm0{
    font-size:1rem;
    color:var(--gray200);
}

#cal-table-box td .cm1{
    font-size:1rem;
    color:var(--gray400);
}

#cal-table-box td.work .cm{
    color:var(--black500);
    background-color: var(--gray50);
}

#cal-table-box td.work.on .cm{
    background-color: var(--black500);
}

#frmhr label{
    font-size:1rem;
}

input#hr_date{
    padding-left:unset;
    font-weight:600;
}

.time-box{
    flex-basis:60%;
    background-color: #fff;
    border-radius:1.25rem;
    padding:4rem;
    width:100%;
    float:unset;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
}

#time-list-box td{
    padding:unset;
}

.time-box td, .time-box th{
    border:transparent;
    vertical-align: baseline;
    border-radius:1rem;
}

.time-box table{
    min-height:280px;
    height:auto;
    border-bottom:1px solid var(--gray400);
    margin-bottom:1rem;
}


#time-list-box .item{
    padding:1rem 2rem;
    border-radius:4px;
    border:unset;
    background-color: var(--secondary-light);
    letter-spacing: 0;
}

#time-list-box .item.close{
    background-color: var(--gray200);
    color:var(--gray300);
}

#time-list-box .item.on{
    background-color: var(--black500);
}

.time-box table .tl{
    width:100%;
}

.personnel-wrap h3{
    margin-bottom:0.5rem;
}

.personnel-wrap p{
    margin-bottom:1rem;
    color:#b5b5b5;
}

.personnel-wrap p strong{
    color:var(--gray500);
    margin-right:0.5rem;
}

.personnel-wrap .stepper-wrap{
    display:flex;
    align-items: center;
    gap:0 0.5rem;
}

.personnel-wrap .stepper-wrap input[type="button"]{
    width:40px;
    height:40px;
    background-color: var(--black500);
    color:#fff;
    border:none;
    border-radius:4px;
}

.personnel-wrap .stepper-wrap #result{
    min-width:110px;
    border-bottom:1px solid var(--gray200);
    padding:0.5rem;
    text-align:center;
}

.neto-form-wrap{
    width:100%;
    background-color: #fff;
    border-radius:20px;
    padding:4rem;
    margin:2.5rem 0;
    letter-spacing: 0;
}

.neto-form-wrap .notice{
    color: var(--gray500);
    margin-bottom:3rem;
    word-break: keep-all;
}

.neto-form-wrap .notice h3{
    margin-bottom:1rem;
}

.neto-form-wrap .notice h3 span{
    font-size:14px;
    font-weight:400;
    color:var(--gray400);
}

#frmhr .space-form label{
    font-weight:400;
}

.space-form p{
    font-size:1.125rem;
    margin-bottom:1.5rem;
    font-weight:500;
    display: flex;
    align-items: center;
    gap:4px;
    word-break: keep-all;
}

.space-form img{
    width:24px;
}

.space-form > div{
    margin-bottom:2.5rem;
}

input[type="radio"] {
    display: none;
}

.space-form .select-space{
    display:flex;
    align-items: center;
    gap:1rem;
    margin-bottom:100px;
}

.select-space label {
    padding: 12px 32px;
    background: var(--gray50);
    border-radius: 50px;
    cursor: pointer;
    display:inline-block;

}

.select-space input[type="radio"]:checked + label {
    background: var(--black500);
    color:#fff;
    font-weight:600;
    transition: all .2s ease;
}

.space-form .land-add{
    display: flex;
    flex-direction: column;
}

.space-form input[type="text"]{
    margin-right:1rem;
}

.space-form input[type="button"]{
    background:transparent;
    border:1px solid var(--black500);
    padding:12px 24px;
    border-radius:4px;
}

.space-form input[type="button"]:hover{
    background:var(--black500);
    color:#fff;
    cursor: pointer;
    transition: all .3s ease;
}


.space-form .land-area select{
    background:transparent;
    border:1px solid var(--black500);
    padding:12px 24px;
    border-radius:4px;
}

.space-form .land-area input[type="text"]{
    margin-right:1rem;
}

.space-form .land-area02{
    display:flex;
    gap:1rem;
    margin-bottom:100px;
}

.space-form .land-area02 div{
    display: flex;
    flex-direction: column;
}

.space-form .land-area02 input[type="text"]{
    min-width:100px;
}

.space-form .landtype-wrap{
    width:fit-content;
    margin-bottom:100px;
}

.space-form .landtype-wrap p{
    margin-bottom:0;
}


.space-form .landtype-wrap a{
    font-size:0.875rem;
    color:var(--gray500);
}

.space-form .landtype-wrap > div:first-child{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:2rem;
    gap:1rem;
}

.space-form .select-land{
    display:flex;
    align-items: center;
    gap:1rem;
    margin-bottom:2rem;
}

.space-form .select-land label {
    padding: 12px 32px;
    background: var(--gray50);
    border-radius: 50px;
    cursor: pointer;
    display:inline-block;
}


.space-form .select-land input[type="radio"]:checked + label {
    background: var(--black500);
    color:#fff;
    font-weight:600;
    transition: all .2s ease;
}

.space-form .typeCrop{
    margin-bottom:100px;
}

.space-form .reser-select-crop{
    display:flex;
    align-items: center;
    gap:1rem;
    margin-bottom:2rem;
}


.space-form .reser-select-crop label {
    padding: 12px 32px;
    background: var(--gray50);
    border-radius: 50px;
    cursor: pointer;
    display:inline-block;
}


.space-form .reser-select-crop input[type="radio"]:checked + label {
    background: var(--black500);
    color:#fff;
    font-weight:600;
    transition: all .2s ease;
}


.space-form .remarks-wrap{
    display: flex;
    flex-direction: column;
}

#frmhr .space-form .remarks-wrap label{
    margin-bottom:1rem;
    font-size:1.125rem;
}

.space-form .remarks-wrap textarea{
    width:100%;
    min-height:10rem;
    border:1px solid var(--gray200);
    padding:1rem;
    font-family:"Pretendard",Sans-serif;
    font-size:1rem;
}



/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡ 개인정보 처리 방침 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.privacy-box{
    background-color: #fff;
    border-radius: 10px;
    border: transparent;

}

.checkbox{
    margin-top:1rem;
    text-align:left;
}

.confirm_wrapper{
    margin-bottom:2.5rem;
}


/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡ 예약자 정보 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.hr-info{
    margin-top:unset;
    background: #fff;
    border-radius:20px;
    padding:4rem;
}

.hr-info h3 span{
    font-size:14px;
    font-weight:400;
    color:var(--gray400);
}

.hr-info .item label span{
    color:#EC4141;
}

.hr-info .write_div{
    margin:3rem 0;
}

.hr-info #captcha button{
    min-width:fit-content;
    padding:1rem;
    border:1px solid var(--gray200);
    border-radius:8px;
    font-size:1rem;
    font-weight:500;
}

.hr-info #captcha button:hover{
    background-color: var(--black500);
    color:#fff;
}

.hr-info #captcha button span{
    display:none;
}

.hr-info #captcha_info{
    display:block;
    margin-top:1rem;
}

.form-box .action{
    margin:5rem 0;
    padding:0;
}


.form-box .action .btn_submit{
    background: var(--black500);
    color:#fff;
    border-radius:4px;

}

.reser-form-wrap .data-info{
    max-width:1560px;
    margin:0 auto;
    padding:2rem;
    border-radius:20px;
    background-color: var(--gray200);
    letter-spacing: 0;
}

.reser-form-wrap .data-info h3{
    margin-bottom:1rem;
}

.reser-form-wrap .data-info ul li{
    line-height:1.8;
}


/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡ 예약내역 확인 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.reser-list-wrap{
    padding:5rem 0;
    background: var(--gray50);
}
.reser-list-section{
    max-width:1560px;
    margin:0 auto;
    padding:10rem 24px;
}

.reser-list-section .list-box{
    max-width:100%;
    margin: 2rem auto;
}

.reser-list-section .list-box table.list{
    margin-bottom:4rem;
}

.reser-list-section #bo_cate_ul{
    margin-bottom:6rem;
}

.reser-list-section .reser-check-wrap{
    display: flex;
    justify-content: center;
    gap:0.5rem;
}

.reser-list-section .btn-search-pop,.reser-list-section .btn-reservation{
    padding: 1rem 26px;
    border: 1px solid var(--black500);
    background-color: var(--black500);
    border-radius: 8px;
    min-width: 150px;
    cursor: pointer;
    color:#fff;
    box-sizing: border-box;
}

.reser-list-section .btn-search-pop:hover{
    background-color: var(--black500);
}

.reser-list-section .btn-reservation{
    color:var(--black500);
    font-size:1.125rem;
    background-color: transparent;
    text-align:center;
}


#fsearch{
    border:transparent;
}

#fsearch .action{
    margin:2rem 0;
}

#fsearch h2{
    font-size: 1.5rem;
    line-height: 1.8;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--gray300);
}

#fsearch .btn_submit{
    border:1px solid var(--black500);
    border-radius:50px;
    cursor: pointer;
}

#fsearch .btn_submit:hover{
    background-color: var(--black500);
    color:#fff;
}

.edit,.cancel{
    padding:4px;
    border-radius:4px;
    border: 1px solid var(--black500);
}

.list td span, .list th span{
    vertical-align: middle;
}



@media (max-width:1560px){
    .title-section{
        height:280px;
    }

    .reser-form-wrap{
        padding:6rem 24px;
    }
    
    .space-form .select-land{
        flex-wrap:wrap;
    }
    
}



@media (max-width:1024px){

    .map-wrap{
        margin-bottom:0;
    }


    .calendar-wrap{
        flex-basis:60%;
    }

    .dt-wrapper{
        flex-direction:column;
    }


    .list td, .list th{
        line-height:30px;
    }


}

@media (max-width:768px){

    .reser-list-section{
        padding:6rem 24px;
    }

    #bo_cate_ul > li a{
        font-size:1.25rem;
    }
    .reser-form-wrap{
        padding:6rem 24px;
    }

    .calendar-wrap{
        padding:2rem;
    }

    #cal-table-box td .cm{
        width:32px;
        height:32px;
        line-height:32px;
    }

    .time-box{
        padding:2rem;
    }

    .neto-form-wrap{
        padding:2rem;
    }

    .land-add input[type="text"],.space-form .land-area input[type="text"]{
        width:75%;
        min-width:75%;
    }
    
    .space-form .select-space{
        flex-wrap: wrap;
        width:373px;
        margin-bottom:4rem;
    }

    .select-space > div{
        width: calc(100% / 2 - 1rem);
    }

    .select-space label{
        padding:1rem;
        width:100%;
        text-align:center;
    }

    .space-form .landtype-wrap{
        margin-bottom:4rem;
    }

    .space-form .typeCrop{
        margin-bottom:4rem;
    }

    .space-form .landtype-wrap > div:first-child{
        flex-direction: column;
        align-items: baseline;
    }

    .space-form .select-land{
        flex-wrap:wrap;
    }

    .select-land > div{
        width: calc(100% / 2 - 1rem);
    }

    .space-form .select-land label{
        text-align:center;
        padding:1rem;
        width:100%;
    }

    .space-form .land-area02{
        margin-bottom:4rem;
    }

    .space-form .reser-select-crop{
        flex-wrap:wrap;
    }

    .space-form .remarks-wrap textarea{
        width:auto;
    }

    .hr-info{
        padding:2rem;
    }

    .data-info ul li{
        font-size:1rem;
    }

    #captcha #captcha_key{
        margin-bottom:1rem;
    }

    .list td, .list th{
        vertical-align: middle;
    }

    .reser-list-section .list-box .table-wrap{
        overflow-y:auto;
    }

    .reser-list-section .list-box .table-wrap table.list{
        min-width:720px;
    }

    .list td span, .list th span{
        display:inline-block;
        width:50%;
        vertical-align: middle;
    }

    .list td, .list th{
        height:42px;
    }

    .reser-list-section .btn-search-pop,.reser-list-section .btn-reservation{
        min-width: 50%;
    }

}


@media (max-width:520px){

    #bo_cate_ul{
        margin-bottom:3rem;
    }

    .time-box table{
        min-height:240px;
    }

    #time-list-box .item{
        padding: 1rem 0.8rem;
        min-width: 57px;
    }

    .space-form .select-space{
        width:100%;
        max-width:100%;
    }

    .space-form img{
        width:16px;
    }

    .land-add input[type="text"], .space-form .land-area input[type="text"]{
        width:70%;
        min-width:70%;
    }

    .space-form input[type="button"],.space-form .land-area select{
        padding: 1rem;
    }

    .space-form .land-area02{
        flex-direction: column;
    }

    .form-box .action .btn_submit{
        width:100%;
    }

    .space-form p{
        display: block;
    }

}