:root {
    --swiper-theme-color: #007aff
}

.dharg_page {
    text-align: center;
    height: calc(100vh);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none
}

.dharg_page .dharg_section {
    width: 100%;
    height: 100%;
    background-image: url(/images/background-0ea840cc48dbda3eb7e7fa75e3a12060.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    position: relative
}

.dharg_page .dharg_wrap {
    height: 100%;
    padding-top: 90px
}

.dharg_page .dharg_wrap .appSwiper {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0
}


.dharg_page .dharg_section_wrap {
    width: 1200px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-right: 64px;

    .dharg_left {
        text-align: center;
        width: 510px;
        margin: 0 77px 0 43px
    }

    .dharg_right {
        margin-top: -24px
    }
}


.dharg_page .dharg_section_wrap .dharg_left .arg_kf {
    width: 510px;
    margin: 40px auto 0 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    li {
        width: 162px;
        height: 140px;
        border-radius: 24px;
        position: relative;
        overflow: hidden;
        background: url(/images/arg_kf_bg.png) no-repeat 50%/100%;
        box-shadow: 0 6px 20px 3px rgba(201, 211, 237, .5);
        padding: 16px 16px 0;
        box-sizing: border-box;
    
        &:not(:first-child) {
            margin-left: 12px;
        }
    
        .arg_kf_block {
            width: 42px;
            height: 42px;
            margin: 0 auto
        }
    }
}

.dharg_page .dharg_section_wrap .arg_kf li .arg_kf_text {
    margin: 6px 0 4px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 39px;

    p:nth-child(1){
        width: 100%;
        text-align: center;
        font-size: 12px;
        line-height: 17px;
        color: #7981a4;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    p:last-child{
        font-size: 14px;
        line-height: 20px;
        color: #303442;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    p:not(:first-child) {
        margin-top: 2px
    }
}


.dharg_page .dharg_section_wrap .arg_kf li .arg_kf_btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    a {
        width: 50px;
        height: 22px;
        border-radius: 11px;
        color: #fff;
        background: url(/images/btn-s.png) no-repeat;
        background-size: cover;
        font-size: 12px;
        line-height: 22px;
        font-weight: 400;
        box-shadow: 0 4px 8px rgba(29, 146, 255, .2);
    
        &:hover {
            opacity: .8
        }
    }
}


.dharg_page .dharg_section_wrap .join_btn {
    width: 160px;
    height: 50px;
    outline: none;
    border: none;
    box-shadow: 0 2px 4px #5da7eb;
    line-height: 50px;
    text-align: center;
    margin: 40px auto 0;
    color: #fff;
    font-size: 18px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: all .2s ease;
    border-radius: 25px;
    background: url(/images/join_btn.png) no-repeat 50%/100%;

    &:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
}