/* 사파리.. */
input, textarea, button, select{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.disabled{
    pointer-events: none;
    background-color: #FFBDA8 !important;
}

.enabled{
    cursor: pointer;
    background-color: #FF7A50 !important;
}

/* capmsite */
.campsite-map .swiper-slide {
    height: auto !important;
}
.campsite-map .swiper-slide > img {
    width: 100%;
    /*배치도를 다 보이게 하고싶다는 요청이 와서 일단.. 주석 처리*/
    /*height: 246px;*/
    cursor: pointer;
    object-fit: cover;
}
.input-disabled{
    pointer-events: none;
    background-color: #e9ecef;
}
/* share-btn */
.share-btn {
    width: 25px;
    height: 25px;
    background: url(https://cdn.campingtalk.net/local/images/icon/share/share.svg) 50% 50% no-repeat;
    background-size: contain;
}
/*방문객 및 캠핑 가는날*/
.visitor-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    text-align: center;
    background-color: var(--sub-bg);
    padding: .25rem 0;
    border-radius: .25rem;
}
.visitor-counter > span{
    font-size: 14px;
    font-weight: bold;
}
    /* d-day */
.d-day > span > span {
    color: var(--cpt-danger);
}

.qaA .schedule{
    display: flex;
    padding: .5rem 0;
    gap: .5rem;
}
.schedule div .date{
    color: var(--sub-text-color);
}
.schedule .dateWrap{
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    background-color: var(--sub-bg);
    border-radius: .375rem;
}

/* 질의응답 */
.product-info {
    margin-top: 8px;
}
.product-info p, .choose p{
    font-size: 14px;
    line-height: 19px;
}
.product-info .choose > img{
    width: 16px;
    height: 16px;
    margin-right: 16px;
}
.product-info .fw-bold{
    font-size: 16px;
    margin-bottom: 8px;

}
/* new Reserved-room-count */
.reserved-room-count button {
    width: 50px;
    height: 35px;
}
.reserved-room-count > div > div:first-of-type {
    width: 85px;
}
.reserved-room-count > div > div:last-child {
    width: 81%;
}
/* new Reserved-room-count */
.reserved-room-count{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    margin-top: .5rem;
    border: 1px solid #e5e5e5;
    border-radius: .375rem;
}
.reserved-room-count .maxBookingCount{
    display: flex;
    align-items: center;
    gap: .25rem;
}
.reserved-room-count .maxBookingCount p{
    font-size: 12px;
    color: #6E6E6E;
}
.reserved-room-count > p {
    font-size: .75rem;
    color: var(--sub-text-color);
}
.countWrap{
    display: flex;
    align-items: center;
}
.countWrap .counterBtn{
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e5e5e5;
    border-radius: .375rem;
}
.countWrap .counterBtn.disabled{
    background-color: #FAFAFA !important;
}
.countWrap .counterBtn.disabled i{
    opacity: .5;
}
.countWrap .result{
    width: 2.5rem;
    text-align: center;
    font-weight: bold;
}

/* guest-info */
.guest-info {
    padding: 16px;
}
.required {
    color: #f64e60;
}
.optional {
    color: #C4C4C4;
}

/* more-options */
.more-options-item {
    position: relative;
    padding-bottom: 12px;
    margin-top: 16px;
}
.more-options-item::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    content: '';
    width: 100%;
    height: 1px;
    transform: translateX(-50%);
    border-bottom: 1px solid #F1F1F1;
}
.more-options-item:last-of-type::before {
    display: none;
}

/*new more-options*/
.moreOptionsWrap{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.moreOptions{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border: 1px solid #E5E5E5;
    border-radius: .75rem;
}
.moreOptions .title{
    display: flex;
    align-items: center;
    gap: .25rem;
}
.moreOptions .campOptionDesc{
    font-size: 12px;
    color: #6E6E6E;
}
.moreOptions .bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.more-options-title {
    margin-bottom: 8px;
}
.more-options-title > h6  {
    width: 70%;
}
.more-options-title > div {
    width: 79px;
}
.more-options-title > div > button {
    padding: 0;
    width: 22px;
    height: 22px;
    color: #fff;
    border-radius: 100%;
}
/* +- button */
.counterBtn{

}
.minus {
    background-image: url(https://cdn.campingtalk.net/local/images/icon/minus/minus_disabled.svg);
    background-position: 50% 35%;
}
.plus {
    background-image: url(https://cdn.campingtalk.net/local/images/icon/plus/plus_disabled.svg);
    background-position: 50% 50%;
}

/* guest-qaa */
.guest-qaa{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.guest-q {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border: 1px solid #e5e5e5;
    border-radius: .75rem;
}
.guest-q > span {
    width: 44px;
}
/*.guest-q-required {*/
/*    background-color: #D9534D;*/
/*    border: 1px solid #D9534D;*/
/*}*/
.guest-q-optional {
    background-color: #C4C4C4;
    border: 1px solid #C4C4C4;
}
.guest-q > select, .guest-q > input, .guest-q > textarea {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #e5e5e5;
    border-radius: .375rem;
}
.guest-q > input::placeholder,
.guest-q > textarea::placeholder,
.guest-q > select:required:invalid {
    color: #c2c2c2;
    font-size: 14px;
}
.guest-q > select {
    padding: 10px 0 8px 10px;
    font-size: 14px;
    color: #000;
}
.guest-q p{
    font-size: 13px;
    white-space: pre-wrap;
    word-break: keep-all;
}
select{
    background-image: url(https://cdn.campingtalk.net/local/images/icon/arrow/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
}

/* room-reservation */
.bottom-section{
    z-index: 10;
    position: fixed;
    bottom: 50px;
    width: 100%;
    max-width: 450px;
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-section > div {
    width: 100%;
    height: 50px;
    max-width: 450px;
    font-size: 18px;
    cursor: pointer;
}
.bottom-section .bottom-btn{
    background-color: #FF7A50;
}
.bottom-section > div > button {
    color: #fff;
}
.bottom-section > div > a {
    z-index: 2;
    width: 100%;
    height: 100%;
    color: #fff;
    line-height: 50px;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25);
}
/*reservationConfirm*/
#reservation-confirm .go-channel-btn{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 1rem;
}
#reservation-confirm .go-channel-btn li button {
    display: block;
    width: 100%;
    border: 1px solid;
}

/* new terms-agree */
.termsAgree{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    background-color: #fff;
}
.termsAgree .termsAgreeWrap label{
    font-size: 14px;
}
.termsAgree .termsAgreeWrap{
    position: relative;
}
.termsAgree .termsAgreeWrap input{
    position: absolute;
    top: 50%;
    transform: translate(1rem, -50%);
}
.termsAgree .selectAll label{
    background-color: #F8F8F8;
    border-radius: .375rem;
    font-size: 1rem !important;
}
.termsAgree .termsAgreeWrap label{
    padding: 10px 0 10px 2.5rem;
    width: 100%;
    cursor: pointer;
}
.termsAgree .termsAgreeWrap{
    display: flex;
    align-items: center;
    gap: .5rem;
}
.termsAgree .termsAgreeWrap button{
    padding: 0 1rem 0 0;
    margin-left: auto;
}

/* terms-agree */
.terms-agree input {
    margin-right: 8px;
}
.agree-all {
    margin-bottom: 12px;
    font-weight: 500;
}
.agreement {
    padding: 16px 0;
    border-top: 1px solid #D0D0D0;
}
.agreement > div {
    margin-bottom: 8px;
}
.agreement > div:last-of-type {
    margin-bottom: 0;
}
.agreement > div > a {
    margin-right: 12px;
    color: #7E8299;
    text-decoration: underline;
}

/* 고객센터 */
.operate > div > a {
    display: block;
    width: 75px;
    height: 33px;
    padding: 0;
}
.faq {
    padding: 0;
}
.faq-nav {
    padding: 8px 8px 22px 8px;
}
.faq-nav-wrap {
    margin-bottom: 8px;
}
.faq-nav-wrap > div {
    width: 120px;
    height: 38px;
    margin-right: 8px;
    border: 1px solid #BABABA;
    border-radius: 10px;
    cursor: pointer;
}
.faq-nav-wrap > div:last-child {
    margin-right: 0;
}
.faq-nav-wrap > div > a {
    padding-left: 0;
    padding-right: 0;
    font-size: 14px;
    color: #3F4254;
}
.on {
    background-color: #F5F5F5;
}
.on-content {
    color: #E1772D !important;
}
.questionListcon {
    display: none;
}

.operate > h5 {
    margin-bottom: 14px;
}
.operate > p {
    padding-left: 8px;
    margin-bottom: 15px;
    font-size: 16px;
}
.operate-list {
    padding-left: 8px;
}
.operate-list-item {
    margin-bottom: 12px;
    font-size: 12px;
}
.operate-list-item > div {
    display: inline-block;
}
.operate-list-item > div:first-child {
    width: 100px;
}

.partnership > h5 {
    margin-bottom: 29px;
}
.partnership > .operate-list > .operate-list-item > div:first-of-type {
    width: 140px;
}

/* 찜 목록 */
.keep-products-list {
    padding: 0;
    background-color: #F5F5F5;
}

.keep-products-list-item {
    height: 105px;
    margin-bottom: 8px;
    background-color: #fff;
}
.campsite-img {
    width: 40%;
    height: auto;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    object-fit: cover;
}
.campsite-desc {
    width: 60%;
    padding: 8px;
}
.campsite-desc > div:first-child > h6 {
    margin-bottom: 7px;
    font-size: 15px;
}
.favorite-btn {
    width: 24px;
    height: 24px;
    background: url(https://cdn.campingtalk.net/local/images/icon/favorite/favorite_off.svg) 50% 50% no-repeat;
    background-size: contain;
}
.favorite-btn-on {
    width: 24px;
    height: 24px;
    background: url(https://cdn.campingtalk.net/local/images/icon/favorite/favorite_on.svg) 50% 50% no-repeat;
    background-size: contain;
}
.bi-heart-fill::before {
    content: "\f415" !important;
}
.campsite-desc > div:last-child > button > img {
    width: 16px;
    height: 13px;
}

/* 비어있을 때 */
.keep-products-empty {
    padding-top: 50%;
    padding-bottom: 50%;
    text-align: center;
}
.keep-products-empty > *{
    color: #999 !important;
}
.keep-products-empty p{
    padding-top: .25rem;
}
/*알림 용 비었을때*/

/* 마이페이지 */
.user-profile {
    position: relative;
    margin-bottom: 12px;
}
.user-profile > span {
    margin-bottom: 8px;
}
.user-profile-img {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.user-profile-name {
    margin-bottom: 16px;
    font-size: 20px;
}

.mypage-nav {
    padding: 8px 0;
}
.mypage-nav .mypage-nav-wrap > div {
    height: 71px;
}
.mypage-nav .mypage-nav-wrap > div > a{
    width: 25%;
}
.mypage-nav .mypage-nav-wrap > div > a > img {
    width: 25px;
    height: 25px;
    margin-bottom: 8px;
}
.mypage-nav-item-disabled, .mypage-nav-item-disabled:hover {
    color: #9F9F9F;
}
.info-height{
    min-height: 380px;
}
/* 예약 취소 */
.cancellation > p {
    width: 50%;
}
.border-title {
    border-bottom: 1px solid #F1F1F1;
}

/* 내 예약 상세 */
.reservation-product-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.reservation-number {
    padding: 8px 8px 18px;
    font-size: 15px;
}
.reservation-number > p {
    display: inline-block;
}
.reservation-info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 0 1rem 1rem;
}
.reservation-info > .schedule > div {
    width: 287px;
}
.reservation-detail > .button-section {
    position: static;
    left: 0;
    transform: translateX(0);
}

/* 내 예약 */
.reservation-header{
    padding: 1rem;
    background-color: #fff;
}
.my-reservation-tab{
    border-bottom: 1px solid #f2f2f2;
}
.my-reservation-tab .nav{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: #fff;
}
.my-reservation-tab .nav-link {
    position: relative;
    padding: 1rem 0;
    font-size: .875rem;
}
.my-reservation-tab .nav-link.active {
    color: var(--cpt-primary);
    background-color: unset;
}
.my-reservation-tab .nav-link.active:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0;
    width: 100%;
    transform: translateX(-50%);
    border-bottom: 3px solid var(--cpt-primary);
}
.reservation{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0 8px #00000005;
}
.reservation-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 1rem;
    border-bottom: 1px solid #F1F1F1;
}
.reservation-top button{
    padding: 0;
    color: var(--cpt-primary);
    font-size: .875rem;
}
.reservation-top i{
    font-size: .875rem;
    color: var(--cpt-primary);
}
.reservation-top i:before{
    font-weight: 700 !important;
}
.reservation-top > div{
    display: flex;
    gap: .125rem;
    align-items: center;
}
.reservation-cancel{
    color: var(--cpt-danger) !important;
}
.reservation-content{
    display: flex;
    gap: 1rem;
    cursor: pointer;
}
.reservation-content-info{
    display: flex;
    flex-direction: column;
    gap: .125rem;
}
.reservation-content-info p{
    font-size: .875rem;
    color: var(--cpt-secondary);
}
.reservation-product-img-s {
    width: 100%;
    max-width: 84px;
    min-width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: .5rem;
}
/*내예약 > 예약 상세*/
.reservationDetailTitle{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reservationDetailTitle.completed{
    align-items: center;
}
.reservationDetailTitle.completed i{
    display: flex;
    align-items: center;
    font-size: 3rem;
    color: var(--cpt-success);
}
.reservationDetailWrap.orderInfo .btnWrap{
    display: flex;
    gap: .5rem;
}
.reservationDetailWrap.orderInfo .btnWrap > *{
    width: 100%;
    height: 3rem;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 0;
    font-weight: bold;
}
.reservationDetail{
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.reservationDetail > .reservationDetailWrap{
    background-color: #fff;
}
.reservationDetail hr{
    border-color: #F1F1F1;
    opacity: 1;
    margin: .5rem 0;
}
.reservationDetailWrap{
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reservationDetailWrap-p1{
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #fff;
}
.reservationDetailWrap-p1 .alert{
    padding: 12px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: normal;
}
.reservationDetailWrap-p1 .alert i{
    font-size: 1rem;
}
.reservationDetailWrap ul{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reservationDetailWrap ul li{
    display: flex;
    gap: 1rem;
    font-size: .875rem;
}
.reservationDetailWrap ul li > p:first-child{
    min-width: 4.5rem;
    color: var(--cpt-secondary);
}
.reservationDetailWrap ul li .right{
    margin-left: auto;
    white-space: nowrap;
}
.reservationDetailWrap ul li .price{
    min-width: 65px;
    white-space: nowrap;
    text-align: end;
}
.reservationDetailWrap ul.total li{
    justify-content: space-between;
}
.reservationDetailWrap .infoWrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reservationDetailWrap .more-btn{
    height: 40px;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.reservationDetailWrap .more-btn:not(.collapsed){
    background-color: #fff;
    color: #333;
}
.reservationDetailWrap .more-btn:after{
    margin-left: 0;
    background-size: .875rem;
    width: .875rem;
    height: .875rem;
    filter: grayscale(100);
}
.reservationDetailWrap .btnWrap{
    display: flex;
    gap: 1rem;
}
.reservationDetailWrap .btnWrap a{
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#carNo span{
    font-size: .75rem;
    color: var(--cpt-danger);
    margin-top: .25rem;
}
/*취소수수료*/
#cancelInfo{
    border: 1px solid #f1f1f1;
    border-radius: .5rem;
    overflow: hidden;
}
#cancelInfo .accordion-button{
    font-size: 1.125rem;
    font-weight: bold;
}
#cancelInfo .accordion-button:not(.collapsed){
    background-color: #f1f1f1;
    color: #333;
}
#cancelInfo .accordion-button::after{
    filter: unset;
}

/*입퇴실일*/
.reservation-schedule{
    display: flex;
}
.reservation-schedule > div{
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border: 1px solid #F1F1F1;
}
.reservation-schedule > div:first-child{
    border-radius: .5rem 0 0 .5rem;
    border-right: none;
}
.reservation-schedule > div:last-child{
    border-radius: 0 .5rem .5rem 0;
}
.reservation-schedule .date{
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--cpt-secondary) !important;
}
.reservation-schedule h5{
    color: var(--cpt-danger) !important;
}
.reservation-schedule div > p{
    color: var(--cpt-secondary) !important;
    line-height: 1.2;
}
.my-reservation-btn {
    width: 100%;
    height: 3rem;
    font-size: .875rem;
}
.my-reservation-btn-wrap{
    display: flex;
    gap: .5rem;
}

.btn-bg-tab-normal{
    color: var(--sub-text-color);
    background-color: #fff;
    text-align: center;
    border: 1px solid #eee;
    border-radius: .375rem;
}

/* 내 예약: 비회원 */
.my-reservation-nologin h3 {
    padding: 0;
    margin-bottom: 16px;
}
.my-reservation-nologin p {
    color: #7E8299;
    font-size: 12px;
}
.my-reservation-nologin .warning{
    padding: .5rem 1rem;
    margin-top: .5rem;
    border-radius: .375rem;
    word-break: keep-all;
    font-weight: bold;
    font-size: .75rem;
}
.input-box {
    margin-bottom: 24px;
}
.input-box > label {
    display: block;
    margin-bottom: 8px;
}
.input-box > input {
    width: 100%;
    padding: .5rem 1rem;
}
.input-box > input::placeholder{
    color: #ccc;
}
.input-box > span {
    color: #7E8299;
    font-size: 12px;
}

/* 내 리뷰 */
.my-review-head {
    padding: 8px;
    font-size: 12px;
}
.my-review-head > h6 {
    margin-bottom: 8px;
    font-size: 15px;
}
.my-review-head > p {
    margin-bottom: 8px;
    line-height: 15px;
}

.my-review-img {
    width: 140px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.more-options-title > div span{
    width: 20px;
}

/* 친구 추천 */
#recommendId .coupon-box{
    width: 70%;
    margin: 12px auto;
    border: 1px solid #F1F1F1;
    border-radius: 10px;
    overflow: hidden;
}
#recommendId .coupon-box > div{
    padding: 20px 10px;
}
#recommendId .coupon-box > div:first-child{
    width: 85%;

}
#recommendId .coupon-box > div:last-child{
    width: 25%;
    background-color: #E86F52;
}

/* modal */
.modal-header .btn-close-w{
    z-index: 2;
    filter: invert(100%);
    opacity: 1;
}
.modal-header .btn-close-w:focus{
    box-shadow: none;
}
.modal-header .btn-close:focus{
    box-shadow: none;
}

/* sweetalert */
.swal2-modal{
    gap: .5rem;
    border-radius: .5rem;
    padding: 1.5rem;
}
.swal2-actions{
    flex-wrap: nowrap;
    gap: 1rem;
}
.swal2-actions button{
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: .378rem !important;
}
.swal2-image{
    margin: 0 auto .5rem;
}
.swal2-html-container{
    margin: 0 !important;
}
.swal2-title{
    padding: 0 0 1rem;
    font-size: 1.5rem;
}

/* sns logo image */
.sns-logo-img {
    width: 35px;
    height: 35px;
    margin-right: 12px;
}


/*.camp-list-disabled .product-img span{*/
/*    background-color: #E86F52;*/
/*}*/
/* 모바일 360 이하 */
@media screen and (max-width: 365px) {
    .faq-nav-wrap > div > a {
        font-size: 10px;
    }
    .reservation-schedule h5,
    .reservation-schedule div > p{
        font-size: .875rem;
    }
}