@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Bold';
    src: url('https://gcore.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
.wrap.cpt{
    background-color: #fff;
}
.header {
    margin-bottom: 0;
}
.main-visual {
    overflow: hidden;
    /*padding-top: .5rem;*/
}
.main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* swiper */
.main-nav-wrap {
    padding: 1rem 1.5rem .5rem;
    background-color: #fff;
}
.main-nav-icon {
    width: 72.8px;
    margin: 9px;
    border-radius: 10px;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
}
.main-nav-wrap > div > a {
    width: 72.8px;
    height: 66px;
    margin: 0 0 1rem;
    border-radius: 10px;
}
.main-nav-wrap > div > a > span {
    font-size: 12px;
    font-weight: 500;
    margin-top: .25rem;
    color: rgb(86, 94, 103);
}
.main-nav-wrap > div > a > img {
    width: 48px;
    height: 48px;
    padding: 8px;
    background: #F2F6F9;
    border-radius: 16px;
}
.cpt .main-visual .swiper{
    padding: 0 2rem;
}
.main-visual .swiper-slide{
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}
.main-visual .pagination-wrap{
    width: 100%;
}
.main-visual .swiper-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    bottom: 0;
    left: unset;
    right: 2rem;
    width: 42px;
    height: 20px;
    z-index: 1;
    margin: .5rem;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
}
.main-visual .swiper-pagination-bullet{
    border: none;
    width: 8px;
    height: 8px;
    background-color: #ccc;
}
.main-visual .swiper-pagination-bullet-active{
    /*background-color: #007aff;*/
    background-color: var(--main-color);
}

/*sub-banner*/
.sub-banner{
    cursor: pointer;
    padding: 0 1rem;
}
.sub-banner .swiper{
    border-radius: .5rem;
}
.sub-banner .swiper-pagination-fraction{
    bottom: .5rem !important;
    right: .5rem;
    left: unset;
    width: unset;
    padding: .125rem .625rem;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}


.input-area{
    position: relative;
}

.camping-search {
    padding: 16px 16px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
.camping-search > h5 {
    margin-bottom: .5rem;
}
.search-half span{
    display: block;
    font-size: 14px;
}
.camping-search > div > div > p{
    font-weight: 500;
}
.camping-search > div > div > span{
    display: block;
    font-size: 14px;
    margin: 8px 0;
}

.camping-search > div > a {
    display: block;
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 15px;
    border-radius: .375rem;
}

.search-half p, .camping-search input::placeholder{
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.search-half {
    width: 50%;
}
.search-half:first-of-type {
    margin-right: 8px;
}
.search-half > div {
    padding-left: 12px;
    margin-bottom: 0;
}

.use-guide {
    margin: .5rem;
    text-align: center;
    cursor: pointer;
}
.use-guide a{
    display: block;
    padding: 10px 0;
}
.use-guide a > p {
    font-size: .875rem;
}
.use-guide a > p > span {
    color: #FF7A50;
}
.camp-name-search input{
    width: 100%;
    border: none;
    background-color: transparent;
}
.camp-name-search input:focus{
    outline: none;
}

.cpt-magazine {
    position: relative;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    padding: 1rem 0 1rem 1rem;
    margin-bottom: 0 !important;
}
.cpt-magazine > h4 {
    width: 100%;
    color: #000;
    text-align: left;
    margin-left: 8px;
}
.cpt-magazine > .title-wrap{
    margin-bottom: .5rem;
}
.cpt-magazine > .title-wrap p{
    color: var(--sub-text-color);
    font-size: 14px;
    text-align: left;
    margin-top: 2px;
}

.cpt-magazine-area {
    width: 100%;
    max-width: 450px;
    margin-top: 1rem;
}
.cpt-magazine-inner {
    width: 100%;
    height: 100%;
}
.cpt-magazine .swiper-wrapper{
    padding-bottom: 4px;
}

.magazine-content-wrap {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.magazine-content-wrap span {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sub-text-color);
    font-size: .6785rem;
}
.magazine-content-wrap p {
    width: 100%;
    color: #000;
    font-size: .8125rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.magazine-content-wrap > div:last-child {
    padding: 8px;
    text-align: left;
    white-space: nowrap;
    box-sizing: border-box;
}
.magazine-content-img {
    position: relative;
    width: 100%;
    padding-top: 80px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.cpt-mz .magazine-content-img{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.cpt-coupon {
    height: 100%;
}
.cpt-coupon.cpt-magazine::before {
    background-color: #E86F52;
}
.cpt-coupon-evt-area {
    height: 100%;
}

.cpt-coupon .magazine-content {
    border-radius: 0;
}
.cpt-coupon .magazine-content-wrap {
    border-radius: 0;
}
.coupon-evt-desc {
    font-weight: 400;
}
.coupon-evt-desc > div:first-child {
    margin-bottom: 8px;
}
.coupon-evt-desc > div:first-child > p {
    font-size: 13px;
}
.coupon-evt-desc > div:last-child > span {
    color: #000;
    line-height: 12px;
}
.coupon-evt-desc > div:last-child > p {
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}
.cpt-best-review{
    padding: .5rem 0 0;
}

.cpt-review-wrap  .vreview-best-review-widget {
    margin-top: -12px;
}

/*매거진 더보기*/
.cpt-magazine .accordion-button{
    justify-content: center;
    gap: .5rem;
    font-weight: 500;
}
.cpt-magazine .accordion-button:focus{
    border-color: #e5e5e5 !important;
}
.cpt-magazine .accordion-button:not(.collapsed){
    background-color: transparent;
    color: unset;
    box-shadow: none;
}
.cpt-magazine .accordion-button::after{
    filter: grayscale(1);
    margin-left: 0;
}
.cpt-magazine .collapsing{
    display: block;
    height: auto !important;
    transition: height .1s ease !important;
}

/*매거진 텍스트 공통 클래스*/
.cpt-magazine .magazine-inner-text{
    padding-top: .625rem;
}
.cpt-magazine-type-length .magazine-inner-text-main,
.cpt-magazine-type-length .magazine-inner-text-sub,
.cpt-magazine-type-A .magazine-inner-text-main,
.cpt-magazine-type-A .magazine-inner-text-sub,
.cpt-magazine-type-B .magazine-inner-text-sub{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cpt-magazine-type-length .magazine-inner-text-main{
    font-weight: 500;
}
.cpt-magazine-type-length .magazine-inner-text-sub,
.cpt-magazine-type-A .magazine-inner-text-sub,
.cpt-magazine-type-B .magazine-inner-text-sub{
    font-size: 12px;
    margin-bottom: 4px;
    line-height: 12px;
}

/*매거진 이벤트 뱃지*/
.cpt-magazine-type-length .magazine-content-img .event-badge{
    position: absolute;
    top: 1rem; left: 1rem;
    width: auto;
    padding: 1px .5rem;
    color: #fff;
    background-color: rgb(136, 126, 194);
    border-radius: .25rem;
    font-size: 11px;
}
.cpt-magazine-type-A .magazine-content-img .event-badge,
.cpt-magazine-type-B .magazine-content-img .event-badge{
    position: absolute;
    bottom: .625rem; left: .625rem;
    width: auto;
    padding: 3px 7px 1px;
    background-color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/*매거진 세로타입*/
.cpt-magazine-type-length{
    padding: 1.5rem 1rem 0;
}
.cpt-magazine-type-length .cpt-magazine-inner{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.cpt-magazine-type-length .magazine-content-img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.cpt-magazine-type-length .magazine-inner-wrap{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.cpt-magazine-type-length .magazine-inner-wrap:after{
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 60%,rgba(0,0,0,.8));
}
.cpt-magazine-type-length .magazine-inner-text{
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    padding: 1rem;
    z-index: 2;
}
.cpt-magazine-type-length .magazine-inner-text > *{
    color: #fff;
}
.cpt-magazine-type-length .collapse:not(.show){
    display: block;
    height: 616px;
    overflow: hidden;
}

/*매거진 2분할, 3분할 공통 클래스*/
.cpt-magazine-type-A,
.cpt-magazine-type-B{
    padding: 1.5rem 0;
}
.cpt-magazine-type-A .swiper,
.cpt-magazine-type-B .swiper{
    padding: 0 1rem 0;
}
.cpt-magazine-type-A > .title-wrap,
.cpt-magazine-type-B > .title-wrap{
    padding: 0 1rem 0;
}
.cpt-magazine-type-A .magazine-content-img,
.cpt-magazine-type-B .magazine-content-img{
    padding-top: 100%;
    border-radius: 12px;
    overflow: hidden;
}

/*매거진 2분할*/
.cpt-magazine-type-A .magazine-inner-text-main{
    font-size: 14px;
    font-weight: 600;
}

/*매거진 3분할*/
.cpt-magazine-type-B .cpt-magazine-inner{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    margin-top: 1rem;
}
.cpt-magazine-type-B .collapse:not(.show){
    display: block;
    height: 92vw;
    overflow: hidden;
}
.cpt-magazine-type-B .magazine-inner-text .magazine-inner-text-main{
    font-size: 13px;
    font-weight: 600;
}

/* 광고 */
.cpt-article{
    padding: .5rem 1rem;
}
.cpt-article > div{
    width: 100%;
}
.cpt-ad-wrap{
    position: relative;
    padding-top: 35%;
    overflow: hidden;
    width: 100%;
    margin-right: 10px;
    border-radius: 12px;
}
.cpt-ad-wrap:last-child{
    margin-right: 0;
}
.cpt-ad-wrap img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
/*캠핑장 오픈 일정*/
#bookingOpen .campListWrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#bookingOpen .campNameWrap{
    display: flex;
    align-items: center;
    gap: .5rem;
}
#bookingOpen .campName{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#bookingOpen .time{
    white-space: nowrap;
}

.open-schedule > div > p.topDate{
    font-size: .875rem;
    font-weight: bold;
}

/* 회원가입 프로모션 페이지 */
.member-btn-wrap{
    padding-bottom: 60px;
    background-color: #E5E5E5;
}
.member-btn-wrap a{
    display: block;
    width: 80%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    border-radius: 0.5rem;
    color: #fff;
    background-color: var(--main-color);
}
.member-btn-wrap a i:before{
    font-weight: bold !important;
}
#member-promotion-detail .accordion-button{
    background-color: var(--main-color);
    color: #fff;
}
#member-promotion-detail .accordion-button:not(.collapsed){
    box-shadow: none;
}
#member-promotion-detail .accordion-button::after{
    filter: brightness(100);
}
#member-promotion-detail .accordion-body p{
    font-size: 0.9rem;
    line-height: 24px;
    padding-bottom: 1rem;
}

/* kbstar esg event page */
/* comomon */
#esg-promotion-info *, #esg-promotion *{
    font-family: 'NanumSquareRound','sans-serif';
    word-break: break-all;
    font-size: 0.75rem;
}
#esg-promotion-info .fw-bold, #esg-promotion .fw-bold{
    font-family: 'NanumSquareRoundB','sans-serif';
    font-weight: bold;
}
#esg-promotion-info .fs-10{
    font-size: 0.5rem;
}
#esg-promotion-info .fs-16{
    font-size: 1rem;
}
#esg-promotion-info .main-color{
    color: #432697;
}
#esg-promotion-info .sub-color{
    color: #aaa;
}
#esg-promotion-detail .green-btn{
    background-color: #5FCF81;
}
#esg-promotion-detail .green-btn:focus{
    background-color: #3d8854;
}
#esg-promotion-info .main-btn{
    width: 142px; height: 34px;
    background-color: #432697;
    color: #fff;
    font-size: 1rem;
}
#esg-promotion-info .sub-btn{
    background-color: #fff;
    border: 1px solid #CED4DA;
    color: #6C757D;
}

/* content */
#esg-promotion-info .esg-event-bg{
    position: relative;
    padding: 0 1.5rem 2rem;
    background-color: #432697;
}
#esg-promotion-info .esg-event-bg:after{
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 100px;
    background-color: #5FCF81;
}
#esg-promotion-info .esg-event-desc{
    padding: 0 2rem;
    word-break: keep-all;
}
#esg-promotion-info .zoom-icon-wrap{
    position: absolute;
    bottom: 0; right: 0;
    padding: 1rem;
    margin: 1rem;
    border-radius: 50%;
    background-color: rgba(0,0,0,.7);
    cursor: pointer;
}
#esg-promotion-info .zoom-icon{
    filter: invert(1);
}
#esg-promotion-info .esg-event-content-wrap{
    position: relative;
    z-index: 2;
    text-align: center;
    border-radius: 0.5rem;
    background-color: #fff;
}
#esg-promotion-info .esg-event-content-wrap label{
    width: 64px;
    text-align: start;
    margin-right: 1rem;
    white-space: nowrap;
    font-size: 0.875rem;
}
#esg-promotion-info select:not(:focus):invalid{
    color: #ccc;
}
#esg-promotion-info .esg-event-content-wrap input{
    line-height: 36px;
}
#esg-promotion-info .esg-event-content-wrap input,
#esg-promotion-info textarea{
    margin-bottom: 0;
    padding: 5px 20px;
    font-size: 0.75rem;
    border: 1px solid #CED4DA;
    border-radius: 2px;
}
#esg-promotion-info textarea{
    padding-top: 9px;
    height: 36px;
}
#esg-promotion-info select{
    margin-bottom: 0;
    padding: 5px 36px 5px 20px;
    font-size: 0.75rem;
    border: 1px solid #CED4DA;
    border-radius: 2px;
}
#esg-promotion-info input:focus,
#esg-promotion-info textarea:focus,
#esg-promotion-info select:focus {
    border: 1px solid #432697;
    outline: none;
    box-shadow: none;
}
#esg-promotion-info input,
#esg-promotion-info select{
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#esg-promotion-info input::placeholder,
#esg-promotion-info textarea::placeholder{
    color: #ccc;
}
#esg-promotion .modal-backdrop{
    width: 100% !important;
    margin: 0 !important;
}
#esg-promotion-info #campingMapZoom.modal{
    --bs-modal-bg: transparent;
    --bs-modal-border-color: none;
}
#esg-promotion-info #campingMapZoom .modal-header{
    border-bottom: none;

}
#esg-promotion-info #campingMapZoom .modal-dialog{
    width: 100%;
    max-width: 1080px !important;
}
#esg-promotion-info #campingMapZoom .modal-body{
    height: 480px;
    max-width: 1080px !important;
    max-height: 100% !important;
}
#esg-promotion-info #campingMapZoom .modal-header .btn-close{
    border-radius: 50%;
    filter: invert(100);
    opacity: .8;
    background-color: #fff;
}

/* esg-promotion-detail */
#esg-promotion-detail .content-wrap{
    position: relative;
}
#esg-promotion-detail a{
    position: absolute;
    left: 50%; bottom: calc(4%);
    transform: translate(-50%);
}

/*pamphlet detail*/
#pamphlet-detail .pamphlet-tell{
    padding: 2rem 0;
    background-color: #FF6433;
}
#pamphlet-detail .pamphlet-tell h2{
    font-family: 'GmarketSansBold', 'Apple SD Gothic Neo', serif;
    font-size: 20px;
    color: #fff;
    text-align: center;
}
#pamphlet-detail .pamphlet-tell a{
    display: flex;
    width: 230px;
    height: 50px; line-height: 50px;
    align-items: center;
    justify-content: center;
    margin: 1rem auto 0;
    font-family: 'GmarketSansBold', 'Apple SD Gothic Neo', serif;
    font-size: 20px;
    color: #FF6433;
    background-color: #fff;
    border-radius: 12px;
}
#pamphlet-detail .pamphlet-tell a img{
    margin-left: .5rem;
}

.pretendard{
    font-family: 'Pretendard-Bold', 'Apple SD Gothic Neo', serif;
}

/*사계절 텐트세탁*/
#fourseasonwash-detail input[type="checkbox"]:checked{
    border: none;
}
#fourseasonwash-detail form{
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
}
#fourseasonwash-detail form a {
    white-space: nowrap;
    font-size: 18px;
}
/*마케팅 설문조사용 offcanvas*/
#banner-offcanvas{
    height: auto;
    overflow: hidden;
    border-top: none;
}

#banner-offcanvas .offcanvas-body{
    z-index: -1;
    position: relative;
    overflow: hidden;
    background-color: #F1F1F1;
}
#banner-offcanvas .offcanvas-body h2{
    font-family: TheJamsil5Bold, 'Noto Sans CJK KR', 'Apple SD Gothic Neo', serif;
    font-size: 2rem;
    white-space: nowrap;
    text-align: center;
    margin: 2.5rem 0 .25rem;

}
#banner-offcanvas .offcanvas-body img{
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    z-index: -1;
}
/*기존에 있던 설문조사 버튼 주석처리*/
/*#banner-offcanvas .text-wrap{*/
/*    position: absolute;*/
/*    bottom: 1rem;*/
/*    width: 100%;*/
/*}*/
#banner-offcanvas .text-wrap button{
    width: 100%;
    padding: 13px 32px;
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--main-color);
    color: #fff;
}

#banner-offcanvas .offcanvas-footer button{
    font-size: 14px;
}
#banner-offcanvas .offcanvas-footer{
    box-shadow: 0 0px 0.4rem 0 rgba(0,0,0,.16);
}
.text-white{
    color: #fff;
}


/* 폴드 시작 */
@media screen and (min-width: 440px) {
    #esg-promotion .esg-event-desc{
        padding: 0 4.5rem;
    }
}
/* 폴드 끝 */

/* 폴드 시작 */
@media screen and (max-width: 350px) {
    .cpt-magazine-type-A .collapse:not(.show).h-100{
        height: 100%;
    }
    .cpt-magazine-type-B .collapse:not(.show).h-100{
        height: 100%;
    }
}
/* 폴드 끝 */


/* 모바일 시작 */
@media screen and (min-width: 450px) {
    .cpt-magazine-type-A .collapse:not(.show){
        height: 543px;
    }
    .cpt-magazine-type-B .collapse:not(.show){
        height: 400px;
    }
}
/* 모바일 끝 */
/*TODO : 모바일 컨텐츠가 적을떄도 height 이상한거 조정해야함*/