.camp-detail-page{
    margin-top: 112px;
    min-height: 500px;
    padding-bottom: 60px;
    overflow: hidden;
    .mt{margin-top: 46px;}
    .s-title{
        font-family: "Pridi" , sans-serif;
        font-weight: 500;
        font-size: 21px;
        padding-bottom: 15px;
    }
    .desc-camp{
        .head{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .h-title{
            font-size: 39px;
            line-height: 1em;
            padding-bottom: 8px;
        }
        .content{
            margin-top: 32px;
        }
        .desc{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 21px;
            line-height: 1.4em;
            margin-top: 0;
        }
        .image{
            width: 62px;
            height: 62px;
            overflow: hidden;
            border-radius: 50%;
            .cover{
                position: relative;
                width: 100%;
                height: 100%;
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        .name{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 21px;
            line-height: 1.2em;
            margin-top: 11px;
        }
    }
    .rating-review{
        display: flex;
        align-items: center;
        img{
            width: 16px;
            filter: brightness(0) invert(0);
        }
        .desc{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 19px;
            color: #b2b2b2;
            padding-left: 7px;
        }
    }
    .b-icon{
        // width: 100%;
        // padding-right: 75px;
        // display: flex;
        .item-list{
            margin: 0 -24px;
            li{padding: 0 24px;}
        }
        .detail{
            cursor: pointer;
            .feather{font-size: 36px;}
        }
        .text{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 15px;
            color: $color-success;
            text-decoration: underline;
            text-align: center;
            padding-top: 9px;
        }
        .social-list{
            margin: 0 -2px;
            li{padding: 0 2px;}
        }
        .dropdown-menu{
            transform: translate(-180px, 10px) !important;
            border: none;
            box-shadow: 0 3px 6px 0 rgba($color: #000000, $alpha: 0.1);
            padding: 7px;
            min-width: 180px;
            img{width: 28px;}
    
        }
    }
    .favorite{
        // position: absolute;
        width: 40px;
        height: 46px;
        // top: 25px;
        // left: 42%;
        z-index: 1;
        .b-fav{
            cursor: pointer;
            position: relative;
            .fa-heart-o{color: $color-light; font-size: 38px;}
            .fr-main{opacity: 1; transition: all 200ms; filter: brightness(0);}
            .fr-hover{
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                object-fit: contain;
                opacity: 0;
                filter: brightness(0);
                transition: all 200ms;
            }
            &.active{
                .fr-main{opacity: 0;}
                .fr-hover{opacity: 1; filter: brightness(1) invert(0);}
            }
            &:hover{
                .fr-main{opacity: 0;}
                .fr-hover{opacity: 1;}
            }
        }
        .feather{
            font-size: 40px;
            color: $color-light;
        }
    }
    .select-camp-area{
        border: 1px solid #DFDFDF;
        // .item-list{
        //     li{
        //         width: calc(100% / 2);
        //         &:not(:last-child){border-right: 1px solid #DFDFDF;}
        //     }
        // }
        .block{
            border-bottom: 1px solid #DFDFDF;
            .border-left{border-left: 1px solid #DFDFDF;}
            .wrapper{padding: 25px 10px;}
        }
        .h-title,
        .desc{
            font-family: "Pridi", sans-serif;
        }
        .h-title{
            font-weight: 500;
            font-size: 18px;
            &.font-sum{font-size: 25px;}
        }
        .desc{
            font-weight: 300;
            font-size: 21px;
            margin-top: 17px;
        }
        .action{
            .btn{min-width: 100%;}
        }
        .box{
            font-family: "DMSans", sans-serif;
            font-weight: bold;
            font-size: 36px;
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid $color-darkgray;
        }
        .fw-medium{font-weight: 500;}
        .item-list{
            margin-top: 15px;
            li + li{margin-top: 21px;}
            .desc{
                margin-top: 10px;
                & + .desc{margin-top: 7px;}
            }
        }
        .help-block{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 16px;
            color: #bababa;
            text-align: center;
            margin-top: 11px;
        }
    }
    .should{
        // min-height: 500px;
        // padding-right: 190px;
        &.-i{
            padding-right: 30px;
            border-right: 1px solid #e2e2e2;
        }
        &.-ii{padding-left: 23px;}
        .h-title{
            font-family: "Pridi", sans-serif;
            font-weight: 500;
            font-size: 21px;
        }
    }   
    .should-list{
        margin-left: 12px;
        width: auto;
        font-weight: 300;
        font-family: 'Pridi', serif;
        font-size: 20px;
        line-height: 1.4em;
        li{
            position: relative;
            border: 1px solid #e2e2e2;
            padding: 10px 25px;
            margin-top: 10px;
            & + li{
                margin-top: 20px;
            }
        }
        .icon{
            display: inline-block;
            vertical-align: top;
            position: relative;
            top: -2px;
            margin-right: 5px;
        }
        .allow{
            position: absolute;
            top: 12px;
            left: -12px;
            width: 24px;
            height: 24px;
            background: url('../img/icon/checked.svg') center no-repeat;
            background-size: cover;
        }
        .notallow{
            position: absolute;
            top: 12px;
            left: -12px;
            width: 24px;
            height: 24px;
            background: url('../img/icon/cancel.svg') center no-repeat;
            background-size: cover;
        }
    }
    .action{
        &.-should{
            margin-top: 10px;
            &.-ii{padding-left: 23px;}
            .link{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 15px;
                color: $color-success;
                text-decoration: underline;
            }
        }
    }
    .zone{
        .cover{
            position: relative;
            padding-bottom: 30%;
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                object-fit: cover;
            }
        }
    }
    .tent-site{
        .cover{
            position: relative;
            padding-bottom: 56%;
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                object-fit: cover;
            }
        }
    }
    .detail-select{
        margin-top: 49px;
        li{
            width: 100%;
            padding: 20px 0;
            &.allow{
                .wrapper{
                    .box{
                        &:before{
                            content: '';
                            position: absolute;
                            top: -10px;
                            left: -12px;
                            width: 24px;
                            height: 24px;
                            background: url('../img/icon/checked.svg') center no-repeat;
                            background-size: cover;
                        }
                    }
                    .view{
                        .lock,
                        .close{opacity: 1; pointer-events: inherit;}
                    }
                }
            }
            &:not(:last-child){
                border-bottom: 1px solid #E2E2E2;
            }
        }
        .wrapper{
           margin-left: 17px;
           .box{
               font-family: "DMSans";
               font-weight: bold;
               font-size: 39px;
               position: relative;
               width: 106px;
               height: 106px;
               display: flex;
               align-items: center;
               justify-content: center;
               border: 1px solid $color-darkgray;
                // &.allow:before{
                //     content: '';
                //     position: absolute;
                //     top: -10px;
                //     left: -12px;
                //     width: 24px;
                //     height: 24px;
                //     background: url('../img/icon/checked.svg') center no-repeat;
                //     background-size: cover;
                // }
           }
           .size-camp{
               font-family: "Pridi", sans-serif;
               font-weight: 300;
               margin-top: 17px;
               font-size: 25px;
            //    .item-list{margin: 0 -13px;}
            //    li{
            //        font-size: 25px;
            //        padding: 0 13px;
            //        width: calc(100% / 2);
            //        border-bottom: none;
            //        &:nth-child(2){
            //            font-size: 16px;
            //        }
            //        &:not(:last-child){
            //            border-right: 1px solid #E2E2E2;
            //        }
            //    }
                span{
                    margin-left: 14px;
                    padding-left: 14px;
                    font-size: 16px;
                    border-left: 1px solid #E2E2E2;
                }
           }
           .price-camp{
               margin-top: 30px;
                font-family: "DMSans", sans-serif;
                font-weight: bold;
                font-size: 39px;
                padding: 0 7px; 
                border-bottom: none;
                span{
                    font-family: "Pridi", sans-serif;
                    font-weight: 300;
                    font-size: 16px;
                    padding-left: 6px;
                }
           }
           .desc{
               width: 100%;
               display: flex;
               justify-content: space-between;
               &:not(:last-child){
                   padding-bottom: 27px;
                   margin-bottom: 34px;
                   border-bottom: 1px solid #E2E2E2;
               }
           }
           .select2-container .select2-selection--single{min-width: 193px;}
           .select2-container--default .select2-selection--single{border-radius: 5px;}
           .select2-container--default .select2-selection--single .select2-selection__rendered{font-family: "Pridi", sans-serif;}
           .help-block{
               font-family: "Pridi", sans-serif;
               font-weight: 300;
               font-size: 16px;
               padding-top: 7px;
           }
           .view{
               display: flex;
               .lock{
                   margin-right: 10px;
                   opacity: 0;
                   pointer-events: none;
                   span{
                       font-family: "DMSans", sans-serif;
                       font-weight: bold;
                       font-size: 25px;
                       color: $color-light;
                       width: 56px;
                       height: 56px;
                       background-color: $color-danger;
                       display: flex;
                       align-items: center;
                       justify-content: center;
                       border-radius: 50%;
                   }
                   .link{text-align: center; margin-top: 5px;}
               }
               .close{
                   opacity: 0;
                   pointer-events: none;
                   cursor: pointer;
                   margin-left: 10px;
                   margin-top: 4px;
                }
           }
           .noti{
               font-family: "Pridi", sans-serif;
               font-weight: 300;
               font-size: 16px;
               margin-left: -17px;
               margin-top: 22px;
               color: $color-success;
           }
        } 
    }
    .event{
        .item-list{
            margin: 0 -65px;
            padding-top: 40px;
            li{
                padding: 0 65px;
                margin-bottom: 55px;
                width: calc(100% / 5);
            }
        }
        .wrapper{
            .cover{
                position: relative;
                width: 63px;
                height: 63px;
                overflow: hidden;
                margin: 0 auto;
                img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    object-fit: cover;
                }
            }
            .text{
                font-family: "Pridi", sans-serif;
                font-weight: 300;
                font-size: 16px;
                text-align: center;
                margin-top: 10px;
            }
        }
    }
    .detail{
        .desc{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 21px;
            line-height: 1.4em;
            margin-bottom: 17px;
        }
        .link{
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 15px;
            color: $color-success;
            text-decoration: underline;
        }
    }
    .gallery{
        position: relative;
        .item-list{
            margin: 0 -6px;
            li{
                padding: 0 6px;
                width: calc(100% / 2);
                .item-list{
                    li{
                        width: calc(100% / 3);
                        &:nth-child(1),
                        &:nth-child(2),
                        &:nth-child(3){margin-bottom: 12px;}
                        .cover{
                            position: relative;
                            padding-bottom: 100%;
                            img{
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                top: 0;
                                left: 0;
                                bottom: 0;
                                right: 0;
                                object-fit: cover;
                            }
                        }
                    }
                }
            }
        }
        .cover{
            position: relative;
            padding-bottom: 66.2%;
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                object-fit: cover;
            }
        }
        .action{
            position: absolute;
            right: 50px;
            bottom: 18px;
            .btn-light{
                min-width: 200px;
                height: 42px;
                font-family: "Pridi", sans-serif;
                font-weight: 400;
                font-size: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    .full-map{
        width: 100%;
        margin-top: 80px;
        .cover{
            position: relative;
            padding-bottom: 22%;
            .f-map{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                object-fit: cover;
            }
        }
    }
    .review-i{
        li{
            padding: 31px 0;
            &:not(:last-child){
                border-bottom: 1px solid #E2E2E2;
            }
        }
        .title{
            font-family: "Pridi", sans-serif;
            display: flex;
            justify-content: space-between;
            .t-review{
                font-weight: 500;
                font-size: 21px;
                .rating-star{
                    float: right;
                    margin-left: 43px;
                    margin-top: -3px;
                }
            }
            .date{
                font-weight: 300;
                font-size: 19px;
                color: #b2b2b2;
            }
        }
        .desc{font-size: 21px;}
    }
}
.t-zone{
    min-width: 91px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%, 0);
    border-radius: 30px;
    color: $color-light;
    background-color: $color-danger;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Pridi", sans-serif;
    font-weight: 500;
    font-size: 21px;
    z-index: 1;
}
.btn-zone{
    position: absolute;
    min-width: 90px;
    height: 42px;
    border-radius: 30px;
    border: 3px solid $color-success;
    background-color: $color-light;
    color: $color-success;
    font-family: "Pridi", sans-serif;
    font-weight: 500;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
    transition: all 200ms;
    &:hover{border-color: $color-danger; color: $color-danger;}
    &.active{
        background-color: $color-danger;
        color: $color-light;
        border-color: $color-danger;
    }
    &.-z1{bottom: 30px; left: 30px;}
}
.btn-lock{
    position: absolute;
    cursor: pointer;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid $color-success;
    background-color: $color-light;
    color: $color-success;
    font-family: "DMSans", sans-serif;
    font-weight: bold;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms;
    &:hover{
        color: $color-danger;
        border-color: $color-danger;
    }
    &.active{
        background-color: $color-danger;
        border-color: $color-danger;
        color: $color-light;
    }
    &.disabled{
        cursor: inherit;
        background-color: #e2e2e2;
        border-color: #e2e2e2;
        color: #b2b2b2;
    }
    &.-b2{
        bottom: 30px;
        left: 30px;
    }
}
.popover-detail{
    position: absolute;
    min-width: 430px;
    height: 193px;
    padding: 15px;
    border-radius: 20px;
    background-color: #ebebeb;
    bottom: 200px;
    right: 20px;
    z-index: 1;
    .wrapper{
        position: relative;
        width: 100%;
        height: 100%;
        &:before{
            content: "";
            position: absolute;
            bottom: -29px;
            left: 5px;
            width: 0;
            height: 0;
            border-left: 11px solid transparent;
            border-right: 11px solid transparent;
            border-top: 17px solid #ebebeb;
        }
    }
    .cover{
        position: relative;
        padding-bottom: 90% !important;
        width: 180px;
        border-radius: 10px;
        overflow: hidden;
        img{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            object-fit: cover;
        }
    }
    .desc{
        font-family: "Pridi", sans-serif;
        font-weight: 300;
        font-size: 16px;
        line-height: 1.2em;
        & + .desc{margin-top: 5px;}
    }
    .action{
        position: absolute;
        bottom: 0;
        .btn-secondary{
            width: 88px;
            min-width: auto;
            height: 43px;
            line-height: 43px;
            font-family: "Pridi", sans-serif;
            font-weight: 300;
            font-size: 16px;
            background-color: $color-success;
            color: $color-light;
        }
    }
    .overlay-lock{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img{
            position: relative !important; width: 45px !important; height: 34px !important;
            filter: brightness(0) invert(1);
            & + img{margin-top: 20px;}
        }
    }
}