//css for ExperiencerCard
@import 'cbkfe-assets/dist/css/control.less';
@color_e9: #E9E9E9;
@color_00: #000000;
@color_ff: #FFFFFF;
@color_44: #444444;
.experiencer-swiper {
    position: relative; // padding-top: 1.8rem;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    height: 17rem;
    background: @color_ff;
    -webkit-overflow-scrolling: touch;
    .experiencer-card--only {
        position: relative;
        z-index: 19;
        width: auto;
        padding: 0.8rem 0 3rem 0;
        display: flex;
        justify-content: center;
        overflow-x: auto !important;
    }
    .experiencer-poi-bar {
        position: relative;
        height: 0.7rem;
        z-index: 200;
        font-size: 0;
        margin-top: -0.5rem;
        margin-bottom: -0.1rem;
    }
    .experiencer-poi {
        display: inline-block;
        max-width: 100%;
        height: 1rem;
        padding: 0 0.4rem;
        background: linear-gradient(315deg, rgba(255, 34, 68, 1) 0%, rgba(255, 109, 93, 1) 100%);
        border-radius: 0.2rem;
        font-size: 0.6rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 1rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .experiencer-poi-icon {
            width: 0.6rem;
            vertical-align: middle;
            margin-right: 0.15rem;
        }
        .experiencer-poi-text {
            vertical-align: middle;
        }
    }
}

.experiencer-list {
    position: relative;
    z-index: 19;
    width: auto;
    padding: 0.8rem 0 3rem 0.75rem;
    display: flex;
    overflow-x: auto !important;
    .list-item {
        position: relative;
        display: inline-block; // margin-left: 0.5rem;
        padding-right: 0.5rem;
        flex-shrink: 0; // border-radius:0.4rem;
        // box-shadow:0rem 0.2rem 0.6rem 0rem @color_e9;
    }
}

.experiencer-item-container {
    width: 16.5rem;
    padding: 0 0.5rem 0.75rem 0.5rem;
    border-radius: 0.4rem;
    box-shadow: 0rem 0.2rem 0.6rem 0rem @color_e9;
}

.experiencer-album-content {
    // overflow: hidden;
    // object-fit: cover;
}

.experiencer-header {
    position: relative;
    width: 100%;
    height: 2.83rem;
    .header-img {
        position: absolute;
        left: 0;
        top: -0.8rem;
        width: 2.95rem;
        height: 2.95rem;
        border-radius: 100%;
        overflow: hidden;
        border: 0.08rem solid rgba(233, 233, 233, 1);
    }
    .header-wrap {
        // display: inline-flex;
        // flex-direction: column;
        // justify-content: space-between;
        height: 2.15rem;
        padding-left: 3.48rem;
    }
    .header-name {
        display: inline-block;
        max-width: 100%;
        padding-right: 0.98rem;
        padding-top: 0.5rem;
        .font(0.7rem, @color_00, 0.68rem);
        font-weight: 500;
        .text-overflow();
        background-repeat: no-repeat;
        background-position: 100% bottom;
        background-size: auto 0.68rem;
    }
    .header-tag-wrap {
        display: flex;
    } // .header-tag {
    //     display: inline-block;
    //     height: 0.7rem;
    //     padding: 0 0.25rem 0 0.85rem;
    //     margin-right: 0.4rem;
    //     .font(0.45rem, @color_00, 0.7rem);
    //     font-weight:300;
    //     border-radius: 0.1rem;
    //     background-repeat: no-repeat;
    //     background-position: 0.25rem center;
    //     background-size: 0.45rem auto;
    //     &::before {
    //         content: '';
    //         display: inline-block;
    //         vertical-align: middle;
    //         width: 0;
    //         height: 100%;
    //         margin-top: 1px;
    //     }
    // }
    .header-tag {
        display: inline-block;
        height: 0.7rem;
        padding: 0 0.25rem 0 0.85rem;
        .font(0.45rem, @color_00, 0.7rem);
        font-weight: 300;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 0.1rem;
        background-repeat: no-repeat;
        background-position: 0.25rem center;
        background-size: 0.45rem auto;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 0;
            height: 100%;
            margin-top: 1px;
        }
        &-city {
            margin-right: 0.4rem;
            background-color: rgba(255, 34, 68, 0.06);
            background-image: url("https://static.caibeike.com/i/7c61a1130a5ccbaf976005f319c0b8ba-5NRE5Q");
        }
        &-baby {
            flex: 1;
            max-width: max-content;
            background-color: rgba(255, 153, 51, 0.06);
            background-image: url("https://static.caibeike.com/i/9a2d8a22f2a38cd46dd458d9cba3be4b-z4nHxo");
        }
    }
}

.experiencer-album {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 6.5rem;
    img {
        object-fit: cover;
    }
    .nice-icon {
        position: absolute;
        right: 0.5rem;
        top: -1.55rem;
        z-index: 2;
        width: 1.8rem;
        height: 1.8rem;
    }
    .one-img {
        position: relative;
        width: 100%;
        height: 6.5rem;
        object-fit: cover;
    }
    .groupon-video-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2.2rem;
        height: 2.2rem;
        z-index: 1000;
    }
    .two-img {
        position: relative;
        width: 49%;
        height: 6.5rem;
    }
    .three-img-left {
        position: relative;
        width: 62.9%;
        height: 6.5rem;
    }
    .three-img-right-wrap {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 35.8%;
        height: 6.5rem;
    }
    .three-img-right-1 {
        height: 48.46%;
        width: 100%;
    }
    .three-img-right-2-wrap {
        position: relative;
        height: 48.46%;
        .three-img-right-2 {
            height: 100%;
            width: 100%;
        }
        .three-img-mask {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            span {
                .font(0.8rem,
                @color_ff,
                0.8rem);
            }
            .mask-add {
                position: relative;
                top: -0.1rem;
                padding-right: 0.1rem;
            }
        }
    }
}

.experiencer-content {
    width: 100%;
    min-height: 3.45rem;
    padding-top: 0.45rem;
    .font(0.6rem,
    @color_44,
    1rem);
    font-weight: 300;
    word-break: break-all;
    .line-clamp(3);
}

.experiencer-footer {
    display: flex;
    align-items: center;
    width: 100%;
    line-height: 1rem;
    padding-top: 0.7rem;
    .footer-likelist {
        display: flex;
        .like-img {
            width: 1rem;
            height: 1rem;
            margin-left: -0.25rem;
            border: 1px solid @color_e9;
            border-radius: 100%;
            overflow: hidden;
            &:nth-child(1) {
                margin-left: 0;
            }
        }
    }
    .like-num {
        flex: 1;
        padding-left: 0.4rem;
        .font(0.6rem,
        @color_44,
        1rem);
    }
    .footer-btnwrap {
        display: flex;
        height: 1rem;
        .footer-btn {
            display: flex;
            align-items: flex-start;
            &:nth-child(1) {
                margin-right: 1rem;
            }
        }
        .footer-icon {
            width: 1rem;
            height: 1rem; // background-repeat: no-repeat;
            // background-size: 1rem auto;
            // background-position: center center;
            &-liked {
                background-image: url("https://static.caibeike.com/i/17b7f7ab7a3411a30920890abad31795-0IUtIP");
            }
            &-nolike {
                background-image: url("https://static.caibeike.com/i/c36290e0ea7d211d273b0d28579207e1-tdrke4");
            }
        } // .footer-icon-animate {
        //     animation: likeanimate 0.4s ease-in-out;
        // }
        // @keyframes likeanimate {
        //     0% {
        //         transform: scale(0);
        //     }
        //     70% {
        //         transform: scale(1.2);
        //     }
        //     100% {
        //         transform: scale(1);
        //     }
        // }
        .footer-count {
            padding-left: 0.25rem;
            padding-top: 1px;
            .font(0.7rem,
            @color_00,
            0.7rem); // font-family: DINAlternate-Bold;
            font-family: 'Din Condensed';
            font-weight: bold;
        }
    }
}

.experiencer-album-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    height: 6.5rem;
    overflow: hidden;
    .experiencer-album__side {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 7;
        height: 100%;
        overflow: hidden;
        &:not(:only-child):first-child {
            margin-right: 1%;
        }
        &--2 {
            // 有1张图片 自动撑满 2张图片55开 3张图片74开
            flex: 4;
        }
        .experiencer-album__sideItem {
            position: relative;
            height: 49%;
            width: 100%;
            object-fit: cover;
            overflow: hidden;
            &:only-child {
                height: 100%;
            }
        }
        .experiencer-album__image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .three-img-mask {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        span {
            .font(0.8rem,
            @color_ff,
            0.8rem);
        }
        .mask-add {
            position: relative;
            top: -0.1rem;
            padding-right: 0.1rem;
        }
    }
}