//引入全局配置
@import "c/conf";
@import "c/mx";
@import "c/f";
@import "a/c";

.g-scroll {
    height: calc(100vh - 335rpx - env(safe-area-inset-bottom) / 2);
    &.z-page {
        height: 100vh;
    }
}
/* banner 样式 */
.banner-main {
    position: relative;
    width: 100%;
    height: 320rpx;
    background-color: #fff;
    z-index: 997;
    box-shadow: 0rpx 6rpx 21rpx 0rpx rgba(122, 122, 122, 0.23);

    .btn {
        position: absolute;
        padding-left: 15rpx;
        box-sizing: border-box;
        z-index: 2;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 165rpx;
        height: 56rpx;
        background: linear-gradient(0deg, #faaa05, #febb21);
        border-radius: 56rpx 0 0 56rpx;
        font-size: 28rpx;
        font-family: Source Han Serif SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 56rpx;
    }

    .d-title {
        position: absolute;
        z-index: 10;
        // margin-top: 1rpx;
        // border-radius: 5rpx;
        top: 0;
        left: 0;
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        background: linear-gradient(270deg, #f95c2c, #e3271c);
        box-shadow: 0rpx 9rpx 11rpx 0rpx rgba(148, 16, 16, 0.3);
        // border-radius: 20rpx 20rpx 0rpx 0rpx;

        overflow: hidden;

        .left-log {
            position: relative;
            z-index: 10;
            margin-left: 30rpx;
            top: -2rpx;
            width: 26rpx;
            height: 26rpx;
            vertical-align: middle;
        }

        .s-title {
            @include toe;
            display: inline-block;
            max-width: 65%;
            margin-left: 10rpx;
            font-size: 26rpx;
            font-family: Source Han Serif SC;
            font-weight: 500;
            color: #ffffff;
            vertical-align: bottom;
        }

        .d-group-no {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            right: 8rpx;
            width: 101rpx;
            height: 30rpx;
            background: #ffffff;
            border-radius: 15rpx;
            line-height: 30rpx;
            text-align: center;

            > image {
                position: absolute;
                z-index: 10;
                top: 0;
                right: 0;
                width: 110rpx;
                height: 40rpx;
            }

            > text {
                position: relative;
                display: block;
                z-index: 20;
                font-size: 20rpx;
                font-family: Source Han Serif SC;
                font-weight: 500;
                color: #e2281b;
            }
        }
    }

    .page-body {
        /* padding-top: 30rpx; */
        /* background: #fff; */
    }

    .page-section {
        width: 100%;
    }

    .page-section_center {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .page-section:last-child {
        margin-bottom: 0;
    }

    .page-section-gap {
        box-sizing: border-box;
        padding: 0 30rpx;
    }

    .page-section-spacing {
        box-sizing: border-box;
        /* padding: 0 20rpx; */
        height: 320rpx;
    }

    swiper {
        height: 320rpx;
    }

    .page-section-title {
        font-size: 28rpx;
        color: #999;
    }

    .page-section-gap .page-section-title {
        padding-left: 0;
        padding-right: 0;
    }

    .demo-text-1 {
        position: relative;
        align-items: center;
        justify-content: center;
        background-color: #1aad19;
        color: #fff;
        font-size: 36rpx;
    }

    .demo-text-1:before {
        content: "A";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .demo-text-2 {
        position: relative;
        align-items: center;
        justify-content: center;
        background-color: #2782d7;
        color: #fff;
        font-size: 36rpx;
    }

    .demo-text-2:before {
        content: "B";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .demo-text-3 {
        position: relative;
        align-items: center;
        justify-content: center;
        background-color: #f1f1f1;
        color: #353535;
        font-size: 36rpx;
    }

    .demo-text-3:before {
        content: "C";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .page-section-title {
        padding: 0;
    }

    .swiper-item {
        display: block;
        height: 320rpx;
    }

    .banner {
        overflow: hidden;
        height: 320rpx;
        display: flex;
        width: 100%;
    }

    .dots {
        display: flex;
        justify-content: center;
        margin-top: -23rpx;
        z-index: 999;
        position: relative;

        /* padding-bottom: 10rpx; */
    }

    .dots .dot {
        width: 20rpx;
        height: 6rpx;
        margin-left: 8rpx;
        background: rgba(247, 247, 247, 1);
        opacity: 0.38;
        border-radius: 3rpx;
        transition: all 0.3s;
    }

    .dots .dot.active {
        width: 20rpx;
        background: rgba(247, 247, 247, 1);
        border-radius: 3rpx;
        opacity: 1;
        /* background-image: linear-gradient(90deg, #fc5555 58%, #fc5555 100%); */
    }
}

/* banner end */

.tab-all {
    position: relative;
    width: 100%;
    background-color: #fff;
    z-index: 996;

    .tab-bar {
        width: 100%;
        height: 92rpx;
        background: #fff;
        display: flex;
        align-items: center;
        position: relative;
    }

    .tab-bar .tab {
        width: 25%;
        height: 100%;
        line-height: 92rpx;
        /* text-indent: 20rpx; */
        text-align: center;
        position: relative;
        z-index: 10;
        font-size: 32rpx;
        font-family: Source Han Serif SC;
        font-weight: 400;
        color: #999;
    }

    .tab-bar .tab.select {
        font-size: 34rpx;
        font-weight: bold;
        color: #333;
        // color: rgba(229, 15, 0, 1);
    }

    .tab-bar .select-bar {
        position: absolute;
        left: 14rpx;
        bottom: 0rpx;
        width: 30rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: #fc5555;
        z-index: 1;
    }

    .tab-bar .tab0.select-bar {
        left: calc(12.5% - 15rpx);
        transition: left 0.3s linear;
    }

    .tab-bar .tab1.select-bar {
        left: calc(37.5% - 15rpx);
        transition: left 0.3s linear;
    }

    .tab-bar .tab2.select-bar {
        left: calc(62.5% - 15rpx);
        transition: left 0.3s linear;
    }

    .tab-bar .tab3.select-bar {
        left: calc(87.5% - 15rpx);
        transition: left 0.3s linear;
    }

    .tab-bar .hover-tab {
        background: #f7f7f7;
    }
}

/* 内容 */
.details-top {
    // margin-top: 370rpx;
}

.volunteer-box {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.show {
    padding: 0rpx 40rpx;
    height: 24rpx;
    font-size: 24rpx;
    line-height: 24rpx;
    font-weight: 500;
    color: #c5c5c5;
}
.tip {
    height: 60rpx;
    font-size: 28rpx;
    background-color: #fff;
    position: absolute;
    right: 0;
    z-index: 999;
    border-radius: 16rpx 16rpx 0 16rpx;
    line-height: 60rpx;
    display: inline-flex;
    align-items: center;
}
.tip-text {
    margin-left: 10rpx;
    font-size: 32rpx;
}
.tip-img {
    display: inline-flex;
    margin-left: 20rpx;
}
.tip-img.left {
    height: 28rpx;
    width: 28rpx;
}
.tip-img.right {
    display: inline-block;
    height: 40rpx;
    width: 110rpx;
    font-size: 24rpx;
    border-radius: 15rpx;
    line-height: 40rpx;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(120deg, #fd7d29 0%, #fc4018 100%);
    margin-right: 20rpx;
    margin-left: 10rpx;
}
.sub-tab {
    width: 100%;
    height: 70rpx;
    background-color: #fff;
    padding-top: 10rpx;
}
.sub-tab-item {
    width: 21%;
    display: inline-block;
    margin-top: 10rpx;
    height: 50rpx;
    border-radius: 50rpx;
    border: 0.5px solid #fc5555;
    font-size: 30rpx;
    line-height: 50rpx;
    text-align: center;
    margin-left: 22rpx;
}
.sub-tab-item-active {
    background-color: #fc5555;
    color: #fff;
}
.hotline {
    color: #fff;
    font-style: italic;
    font-size: 40rpx;
    line-height: 62rpx;
}
.dial {
    width: 109rpx;
    height: 57rpx;
    margin-left: 10rpx;
}