/*popup*/
.popup.hidden {
    opacity: 0;
}

.popup.show {
    opacity: 1 !important;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
}

.popup_wrap {
    position: relative;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -49%);
    margin: 2rem auto;
    max-width: 1180px;
    max-height: 1080px;
    height: calc(100% - 10rem);
    background-color: #fff;
    border-radius: 1rem;
}

.popup_wrap > div {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    justify-content: space-between;
}

.popup_header {
    display: flex;
    padding: 1.5rem;
    align-items: center;
    border-bottom: 1px solid var(--cpt-e5);
    gap: .25rem;
}

.popup_header h5{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.noticeList{
    padding: 0 8px;
    border-radius: 0.35rem;
    white-space: nowrap;
    background-color: var(--cpt-sub);
}
.noticeList span{
    font-size: .75rem;
    color: var(--cpt-ff);
}

.popup_body {
    overflow-y: auto;
    padding: 1.5rem 1.5rem 7rem;
    height: 100%;
}

.popup_body img {
    width: 100% !important;
}

.popup_footer {
    border-top: 1px solid var(--cpt-e5);
}

.popup_footer form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 1rem;
}

.popup_footer form div {
    padding: 0 1rem 1rem;
}

.dontShow {
    width: 100%;
    padding: .5rem 1rem;
    border-radius: 0;
    font-size: .875rem !important;
    background: var(--cpt-sub-bg);
    border-radius: 10px;
    color: var(--cpt-sub);
}

.closePopup {
    width: 100%;
    padding: .5rem 1rem;
    border-radius: 0;
    font-size: .875rem !important;
    background: var(--cpt-sub);
    border-radius: 10px;
    color: var(--cpt-ff);
}

.dontShowAll {
    position: absolute;
    top: -39px;
    right: 0;
    padding: .35rem 1rem;
    font-size: .875rem;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50px;
}

.dontShowAll:hover,
.dontShowAll:focus {
    color: #fff;
    border: 1px solid #fff;
}

#app > div {
    border: none;
}

.site-detail {
    position: relative;
}

#swiper-container-campImage img {
    width: 100%;
    height: 100%;
    max-height: 348px;
    min-height: 348px;
    object-fit: cover;
}

.moreInfoContainer h5 {
    font-family: 'IBMPlexSansKR-Bold', 'Apple SD Gothic Neo', serif;
    margin-bottom: 1rem !important;
}

.moreInfoContainer p,
.moreInfoContainer li {
    font-size: .875rem;
}

.moreInfoContainer .icon-img {
    width: 100%;
    height: 20px;
    background-position: center;
    filter: contrast(0.5);
    margin-bottom: 0.5rem;
}

#info .moreInfoTable {
    border-top: 1px solid #dee2e6;
}

/*캠핑장 소개*/
.infoToggle {
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: .5rem;
    gap: .5rem;
    border: 1px solid var(--cpt-e5);
}

.infoToggle p {
    font-size: 1rem;
}

.infoToggle:hover {
    border: 1px solid var(--cpt-e5);
}

.icon-title {
    font-size: .75rem;
}

/*캠핑장 사진 이미지*/
.tab_imgListWrap {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;
}

.tab_imgList {
    max-height: 200px;
    min-height: 200px;
}

.tab_imgList img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*swiper*/
.swiper-pagination-campImage,
.swiper-pagination.campZoomImage,
.swiper-pagination-campMapImage,
.swiper-pagination.campMapZoomImage {
    position: absolute;
    right: 1rem;
    left: auto;
    display: flex;
    width: 8%;
    justify-content: center;
    padding: 0px 40px 0 24px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    z-index: 20;
    font-size: .875rem;
}

.swiper-pagination-campImage span,
.swiper-pagination.campZoomImage span,
.swiper-pagination-campMapImage span,
.swiper-pagination.campMapZoomImage span {
    color: #fff;
    font-size: .875rem;
}

.swiper-pagination-campImage ~ i,
.swiper-pagination.campZoomImage ~ i,
.swiper-pagination-campMapImage ~ i,
.swiper-pagination.campMapZoomImage ~ i {
    position: absolute;
    right: 24px;
    left: auto;
    bottom: 12px;
    justify-content: center;
    color: #fff;
    z-index: 20;
    font-size: .75rem;
}

.swiper-wrapper {
    align-items: center;
}

#swiper-container-campMapImage .swiper-wrapper .swiper-slide {
    height: auto !important;
}

#swiper-container-popupSwiper .swiper-wrapper .swiper-slide {
    width: 100% !important;
}

#swiper-container-popupSwiper .swiper-pagination {
    position: fixed;
    top: -40px;
    left: 0;
    right: 0;
    height: 24px;
    width: 50%;
    display: flex;
    gap: .25rem;
    color: #fff;
    font-size: .75rem;
    align-items: center;
}

#swiper-container-popupSwiper .swiper-pagination2 {
    position: fixed;
    top: -12px;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 10px;
    overflow: hidden;
}

#swiper-container-popupSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--cpt-sub);
}

#swiper-container-popupSwiper .swiper-pagination span {
    color: #fff;
    font-size: .75rem;
}

#swiper-container-popupSwiper .swiper-pagination-bullet,
#swiper-container-popupSwiper .swiper-pagination-bullet-active {
    background: #000 !important;
}

.swiper-zoom-container > img {
    height: 100%;
    max-height: 80vh;
}

.swiper-button-next.campImage,
.swiper-button-prev.campImage {
    z-index: 1;
}

/*collapse*/
.accordion-button:not(.collapsed) {
    color: unset !important;
    background-color: transparent;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    filter: grayscale(100);
}

#faq .moreInfoContainer {
    border-bottom: 1px solid var(--cpt-e5);
}

#faq .accordion-body {
    background-color: #f5f5f5;
    margin: 0 1rem 1rem;
}

#faq .accordion-body span,
#faq .accordion-body p {
    color: var(--cpt-666) !important;
    word-break: break-all;
}
#faq .accordion-body p img{
    width: 100% !important;
    height: 100% !important;
}

.cptInfoDetail p {
    word-break: break-all;
}

.cptInfoDetail p.info,
.cptInfoDetail i,
.cptInfoDetail span,
.cptInfoDetail a {
    font-size: .875rem;
}

.cptInfoDetail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.campPromote {
    background-color: rgb(245, 245, 245);
    border-radius: .5rem;
}

.campPromote p {
    padding: 1rem;
    color: var(--cpt-666);
}
#cptCollapse2 img{
    max-width: 100%;
}
/*------------xl------------*/
@media (max-width: 1199px) {
    .popup_header {
        padding: 1rem;
    }

    .popup_body {
        padding: 1rem 1rem 7rem;
    }

    .popup_footer form {
        flex-direction: column;
    }

    .dontShowAll {
        font-size: 13px;
    }

    .popup_wrap {
        margin: .5rem;
        height: calc(100% - 6rem);
    }

    .campInfo img {
        width: 100%;
        object-fit: cover;
    }

    .campInfo p {
        font-size: .875rem;
    }

    .nextBtn {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        padding: 1rem;
        background-color: #fff;
        z-index: 10;
        border-top: 1px solid #dee2e6;
    }

    /*캠핑장 사진 이미지*/
    .tab_imgListWrap {
        grid-template-columns: 1fr 1fr;
    }

    .tab_imgList {
        max-height: 120px;
        min-height: 120px;
    }

    .swiper-pagination-campImage,
    .swiper-pagination-campMapImage,
    .swiper-pagination.campMapZoomImage {
        width: 11%;
    }

    #info table tr {
        display: flex;
        flex-direction: column;
    }

    .swiper-zoom-container > img {
        height: auto;
        max-height: 100%;
    }
}

/*------------//xl------------*/

/*------------lg------------*/
@media (max-width: 767px) {
    /*캠핑장 사진 이미지*/
    .tab_imgListWrap {
        grid-template-columns: 1fr;
    }

    #faq .accordion-header button {
        font-size: .875rem;
    }

    #faq .accordion-body span {
        font-size: .875rem !important;
    }

    #info #cptCollapse2 span {
        font-size: .875rem;
    }

    /*------------collase------------*/
    /*#info #cptCollapse2 {*/
    /*    height: 40px;*/
    /*}*/

    /*#info #cptCollapse2.show {*/
    /*    height: 100%;*/
    /*}*/

    /*#info #cptCollapse2 span {*/
    /*    line-height: 26px;*/
    /*}*/

    /*#cptCollapse2 {*/
    /*    position: relative;*/
    /*    display: block !important;*/
    /*    height: 30px;*/
    /*    overflow: hidden;*/
    /*}*/

    /*#cptCollapse2:after {*/
    /*    content: '';*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    background: linear-gradient(#fff0, #fff);*/
    /*}*/

    /*#cptCollapse2.show {*/
    /*    height: 100%;*/
    /*    overflow-y: auto;*/
    /*}*/

    /*#cptCollapse2.show:after {*/
    /*    background: transparent;*/
    /*    z-index: -1;*/
    /*}*/

    /*------------//collase------------*/
}

/*------------//lg------------*/
