.mfy-referral-web {
    font-family: var(--mfy-font-family);
    background: url('../tui/bei_03.png');
    background-size: 100%;
    /*padding-top: 10px;*/
    width: 1920px;
    height: 498px;
}

.mfy-referral-web-block {
    padding: 0 20px
}

.mfy-referral-web-block-rebate {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    margin-top: 7px
}

.mfy-referral-web-block-img__item {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center
}

.mfy-referral-web-block-img__send {
    padding-bottom: 22px
}

.mfy-referral-web-block-img__text {
    font-size: var(--mfy-font-size-4);
    color: var(--mfy-color-text);
    margin-top: 10px
}

.mfy-referral-web-block-leaderboard__header {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    background: #f4f7ff;
    padding: 9px 17px;
    border-radius: 16px 16px 0 0;
    height: 38px
}

.mfy-referral-web-block-leaderboard__title {
    color: var(--mfy-label-color);
    font-size: var(--mfy-font-size-6)
}
.mfy-functional-block {
    font-family: var(--mfy-font-family);
    --background-color: var(--mfy-color-background);
    --margin-bottom: 16px;
    background: var(--background-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: var(--margin-bottom)
}

.mfy-functional-block-header {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 12px
}



.mfy-functional-block:last-child {
    margin-bottom: 0
}

.mfy-referral-block-special .mfy-functional-block-header-desc {
    color: #fff;
    text-shadow: 2px 1px 3px rgba(61,172,233,.23);
    margin-left: 10.4vw;
    margin-bottom: 6.75vw
}

 .mfy-referral-web-block-special {
    background: url(../tui/bei_05.png) 50% 50% no-repeat;
    background-size: 100%;
    padding-top: 10px
}



.mfy-referral-header-content {
    position: absolute;
    margin: 0 5.714vw;
    top: 101.6vw;
    height: 77.6vw;
    width: 100%;
    padding: 0 5.3333vw;
    border-radius: 16px
}

.mfy-referral-header-operator {
    background: hsla(0,0%,100%,.5);
    border-radius: 16px;
    height: 100%;
    border: 1px solid #fff
}



.mfy-referral-header-operator__amount {
    font-size: 32px;
    line-height: 10.1333vw;
    text-align: center;
    margin-top: 2.6666vw;
    height: 12.1333vw;
    color: var(--mfy-color-text)
}

.mfy-referral-header-operator__desc {
    color: var(--mfy-placeholder-color);
    font-size: var(--mfy-font-size-4);
    text-align: center;
    line-height: 14px;
    margin: 1.06666vw 0 2.13333vw
}

.mfy-referral-header-operator__user {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 4.2666vw
}

.mfy-referral-block-leaderboard__item-user {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 60% 1;
    flex: 60% 1
}

.mfy-referral-block-leaderboard__item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    margin-right: 9px
}

.mfy-referral-block-leaderboard__item-nick {
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.mfy-referral-block-leaderboard__item-count {
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    -webkit-flex: 25% 1;
    flex: 25% 1;
    text-align: center
}

.mfy-referral-block-leaderboard__empty {
    color: var(--mfy-placeholder-color);
    font-size: var(--mfy-font-size-5);
    text-align: center
}

.mfy-referral-block-activity__paragraph {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row
}

.mfy-referral-block-activity__paragraph:last-child p {
    margin-bottom: 0
}

.mfy-referral-block-activity__text {
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    line-height: 21px
}

.mfy-referral-block-activity__index {
    margin-bottom: 0;
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    line-height: 21px;
    margin-right: 5px
}

.mfy-referral-block-activity__example {
    color: var(--mfy-color-primary);
    font-size: var(--mfy-font-size-6);
    line-height: 21px
}

.mfy-referral-block-activity__indent {
    text-indent: 1em
}
.mfy-referral-web-block-activity__levelLine:first-child .mfy-referral-web-block-activity__num {
    width: 13.5px;
    height: 14.5px;
    background: url(../tui/dengji4.png) 50% 50% no-repeat;
    background-size: 100%
}

.mfy-referral-web-block-activity__levelLine:first-child .mfy-referral-web-block-activity__real {
    color: #fff
}

.mfy-referral-web-block-activity__levelLine:first-child .mfy-referral-web-block-activity__desc {
    width: 220px;
    background-image: linear-gradient(90deg,#dbe7ff,#ecf2ff 22%)
}

.mfy-referral-web-block-activity__levelLine:nth-child(2) .mfy-referral-web-block-activity__level {
    background-image: linear-gradient(100deg,#fc7b43 46%,#fecb61);
    box-shadow: 0 4px 5px 0 rgba(245,119,64,.12);
    border: none
}

.mfy-referral-web-block-activity__levelLine:nth-child(2) .mfy-referral-web-block-activity__num {
    width: 13.5px;
    height: 14.5px;
    background: url(../tui/dengji3.png) 50% 50% no-repeat;
    background-size: 100%
}

.mfy-referral-web-block-activity__levelLine:nth-child(2) .mfy-referral-web-block-activity__real {
    color: #fff
}

.mfy-referral-web-block-activity__levelLine:nth-child(2) .mfy-referral-web-block-activity__desc {
    width: 212px;
    background-image: linear-gradient(90deg,#feebcf,#fff5e7)
}

.mfy-referral-web-block-activity__levelLine:nth-child(3) .mfy-referral-web-block-activity__level {
    background-image: linear-gradient(100deg,#fe5c8b 46%,#fea6c6);
    box-shadow: 0 4px 5px 0 rgba(254,92,139,.12);
    border: none
}

.mfy-referral-web-block-activity__levelLine:nth-child(3) .mfy-referral-web-block-activity__num {
    width: 13.5px;
    height: 14.5px;
    background: url(../tui/dengji2.png) 50% 50% no-repeat;
    background-size: 100%
}

.mfy-referral-web-block-activity__levelLine:nth-child(3) .mfy-referral-web-block-activity__real {
    color: #fff
}

.mfy-referral-web-block-activity__levelLine:nth-child(3) .mfy-referral-web-block-activity__desc {
    width: 204px;
    background-image: linear-gradient(90deg,#ffe1e1,#fff0f0)
}

.mfy-referral-web-block-activity__levelLine:nth-child(4) .mfy-referral-web-block-activity__num {
    width: 13.5px;
    height: 14.5px;
    background: url(../tui/dengji1.png) 50% 50% no-repeat;
    background-size: 100%
}

.mfy-referral-web-block-activity__levelLine:nth-child(4) .mfy-referral-web-block-activity__real {
    color: var(--mfy-color-text)
}

.mfy-referral-web-block-activity__levelLine:nth-child(4) .mfy-referral-web-block-activity__desc {
    width: 196px;
    background-image: linear-gradient(90deg,#d7f5f794,#d8f7c945);
}

.mfy-referral-web-block-activity__levelLine:nth-child(5) .mfy-referral-web-block-activity__num {
    width: 13px;
    height: 14.5px;
    background: url(../tui/dengji0.png) 50% 50% no-repeat;
    background-size: 100%
}

.mfy-referral-web-block-activity__levelLine:nth-child(5) .mfy-referral-web-block-activity__real {
    color: var(--mfy-color-text)
}

.mfy-referral-web-block-activity__levelLine:nth-child(5) .mfy-referral-web-block-activity__desc {
    width: 188px;
background-image: linear-gradient(90deg,#f2f2f2e0,#fbfbfb52);
}






.mfy-referral-web-block-activity__text {
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    line-height: 21px
}

.mfy-referral-web-block-activity__index {
    margin-bottom: 0;
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    line-height: 21px;
    margin-right: 5px
}

.mfy-referral-web-block-activity__example {
    color: var(--mfy-color-primary);
    font-size: var(--mfy-font-size-6);
    line-height: 21px
}
.mfy-referral-web-block-activity__title {
    color: #f3658b;
    font-size: var(--mfy-font-size-6);
    line-height: 21px
}
.mfy-referral-web-block-activity__indent {
    text-indent: 1em
}

.mfy-referral-web-block-activity__levelLine {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 12px
}

.mfy-referral-web-block-activity__level {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 16px;
    width: 65px;
    height: 30px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.02);
    border: 1px solid #eee;
    background: #fff;
    margin-right: 10px
}
.mfy-referral-web-block-activity__text {
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    line-height: 21px
}

.mfy-referral-web-block-activity__index {
    margin-bottom: 0;
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-6);
    line-height: 21px;
    margin-right: 5px
}

.mfy-referral-web-block-activity__example {
    color: var(--mfy-color-primary);
    font-size: var(--mfy-font-size-6);
    line-height: 21px
}


.mfy-referral-web-block-activity__level {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    border-radius: 16px;
    width: 65px;
    height: 30px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.02);
    border: 1px solid #eee;
    background: #fff;
    margin-right: 10px
}

.mfy-referral-web-block-activity__level--title {
    color: var(--mfy-label-color);
    font-size: var(--mfy-font-size-4);
    line-height: 14px
}

.mfy-referral-web-block-activity__level--text {
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-8);
    font-weight: 600;
    line-height: 19px
}

.mfy-referral-web-block-activity__left {
    margin-right: 30px
}

.mfy-referral-web-block-activity__num {
    margin-right: 5px
}

.mfy-referral-web-block-activity__real {
    font-size: var(--mfy-font-size-6);
    font-weight: 600
}

.mfy-referral-web-block-activity__desc {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    height: 48px;
    border-radius: 8px;
    padding: 5px 0 4px 12px
}



.mfy-referral-web-block__detail {
    --margin-bottom: 16px;
    background: var(--mfy-color-background);
    border-radius: 16px;
    margin-bottom: var(--margin-bottom)
}

.mfy-referral-web-top {
    position: fixed;
    right: 0;
    bottom: 20vh
}

.mfy-referral-web-tabs_wrap {
    height: 156px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center
}

.mfy-referral-web-tabs_wrap__notCenter {
    -webkit-justify-content: flex-start;
    justify-content: flex-start
}

.mfy-referral-web-tabs_empty {
    color: var(--mfy-placeholder-color);
    font-size: var(--mfy-font-size-5);
    text-align: center
}

.mfy-referral-web-tabs_header {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
}

.mfy-referral-web-tabs_header--text {
    font-size: var(--mfy-font-size-6);
    color: var(--mfy-label-color);
    -webkit-flex: 29% 1;
    flex: 29% 1
}

.mfy-referral-web-tabs_header--text:first-child {
    -webkit-flex: 42% 1;
    flex: 42% 1
}

.mfy-referral-web-tabs_item--wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center
}

.mfy-referral-web-tabs_item--text {
    -webkit-flex: 29% 1;
    flex: 29% 1;
    color: var(--mfy-color-text);
    font-size: var(--mfy-font-size-4)
}

.mfy-referral-web-tabs_item--text:first-child {
    -webkit-flex: 42% 1;
    flex: 42% 1
}

.web-platform-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center
}

.web-platform-wrap .web-platform {
    width: 375px;
    padding: 34px 0 36px
}

.web-platform-wrap .web-platform .mfy-referral-web-header .mfy-referral-web-header-content {
    top: 400px
}

.web-platform-wrap .web-platform .mfy-referral-web-position {
    height: 160px
}

.mfy-button {
    --color: var(--mfy-color-text-light-solid);
    font-family: var(--mfy-font-family);
    --text-color: var(--mfy-button-text-color,var(--mfy-color-text));
    --background-color: var(--mfy-button-background-color,var(--mfy-color-background));
    --border-radius: var(--mfy-button-border-radius,4px);
    --border-width: var(--mfy-button-border-width,1px);
    --border-style: var(--mfy-button-border-style,solid);
    --border-color: var(--mfy-button-border-color,var(--mfy-color-border));
    --button-height: auto;
    --button-font-size: var(--mfy-font-size-4);
    color: var(--text-color);
    background-color: var(--background-color);
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: var(--button-height);
    padding: 7px 12px;
    margin: 0;
    font-size: var(--button-font-size);
    line-height: 1.4;
    text-align: center;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: opacity .15s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mfy-button:focus {
    outline: none
}

.mfy-button:before {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(calc(var(--border-width)*-1),calc(var(--border-width)*-1));
    transform: translate(calc(var(--border-width)*-1),calc(var(--border-width)*-1));
    width: 100%;
    height: 100%;
    background-color: #000;
    border: var(--border-width) var(--border-style) #000;
    border-radius: var(--border-radius);
    opacity: 0;
    content: " ";
    box-sizing: content-box
}

.mfy-button:active:before {
    opacity: .08
}

.mfy-button-default.mfy-button-fill-outline {
    --background-color: transparent;
    --border-color: var(--mfy-color-text)
}

.mfy-button-default.mfy-button-fill-none {
    --background-color: transparent;
    --border-width: 0px
}

.mfy-button:not(.mfy-button-default) {
    --text-color: var(--mfy-color-text-light-solid);
    --background-color: var(--color);
    --border-color: var(--color)
}

.mfy-button:not(.mfy-button-default).mfy-button-fill-outline {
    --text-color: var(--color);
    --background-color: transparent
}

.mfy-button:not(.mfy-button-default).mfy-button-fill-none {
    --text-color: var(--color);
    --background-color: transparent;
    --border-width: 0px
}

.mfy-button-primary {
    --color: var(--mfy-color-primary)
}

.mfy-button-success {
    --color: var(--mfy-color-success)
}

.mfy-button-danger {
    --color: var(--mfy-color-danger)
}

.mfy-button-warning {
    --color: var(--mfy-color-warning)
}

.mfy-button-block {
    display: block;
    width: 100%
}

.mfy-button-disabled {
    cursor: not-allowed;
    opacity: .4
}

.mfy-button-disabled:active:before {
    display: none
}

.mfy-button.mfy-button-mini {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: var(--mfy-font-size-main)
}

.mfy-button.mfy-button-mini.mfy-button-shape-rounded {
    padding-left: 9px;
    padding-right: 9px
}

.mfy-button.mfy-button-small {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: var(--mfy-font-size-7)
}

.mfy-button.mfy-button-large {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: var(--mfy-font-size-10)
}

.mfy-button.mfy-button-shape-rounded {
    --border-radius: 1000px
}

.mfy-button.mfy-button-shape-rectangular {
    --border-radius: 0
}

.mfy-button-loading {
    vertical-align: bottom
}

.mfy-button-loading-wrapper {
    display: -webkit-flex;
    display: flex;
    height: 1.4em;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center
}

.mfy-button-loading-wrapper>.mfy-loading {
    opacity: .6
}

.mfy-loading {
    display: inline-block
}


.mfy-tabs-header {
    position: relative;
    box-shadow: 0 4px 12px 0 rgba(228,239,252,.8);
    border-top-left-radius: var(--border-tab-header-radius);
    border-top-right-radius: var(--border-tab-header-radius)
}

.mfy-tabs-tab-list {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    overflow-x: scroll;
    scrollbar-width: none
}


.mfy-tabs-tab-list::-webkit-scrollbar {
    display: none
}

.mfy-tabs-tab-wrapper {
    padding: 0 12px
}

.mfy-tabs-tab-wrapper-stretch {
    -webkit-flex: auto;
    flex: auto
}

.mfy-tabs-tab {
    white-space: nowrap;
    padding: 14px 0 10px;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    margin: 0 auto;
    font-size: var(--title-font-size);
    color: var(--mfy-color-text);
    position: relative;
    cursor: pointer
}

.mfy-tabs-tab-active {
    color: var(--active-title-color)
}

.mfy-tabs-tab-disabled {
    opacity: .5;
    cursor: not-allowed
}

.mfy-tabs-tab-line {
    position: absolute;
    bottom: 0;
    height: var(--active-line-height);
    background: var(--active-line-color)
}

.mfy-tabs-content {
    padding: var(--content-padding)
}

.mfy-tabs-header-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 30px;
    height: 100%;
    pointer-events: none
}

.mfy-tabs-header-mask-left {
    left: 0;
    background: linear-gradient(90deg,var(--mfy-color-background),hsla(0,0%,100%,0))
}

.mfy-tabs-header-mask-right {
    right: 0;
    background: linear-gradient(270deg,var(--mfy-color-background),hsla(0,0%,100%,0))
}
.mfy-referral-web-block-special .mfy-functional-block-header-desc {
   color: #de9a00;
    /* text-shadow: 2px 1px 3px rgb(61 172 233 / 23%); */
    margin-left: 39px;
    margin-bottom: 20px;
}
.mfy-functional-block-header-desc {
    color: var(--mfy-placeholder-color);
    font-size: var(--mfy-font-size-4);
    line-height: 14px;
}
*,:after,:before {
    box-sizing: border-box
}
:root {
   --mfy-radius-s: 4px;
    --mfy-radius-m: 8px;
    --mfy-radius-l: 12px;
    --mfy-font-size-1: 9px;
    --mfy-font-size-2: 10px;
    --mfy-font-size-3: 11px;
    --mfy-font-size-4: 12px;
    --mfy-font-size-5: 13px;
    --mfy-font-size-6: 14px;
    --mfy-font-size-7: 15px;
    --mfy-font-size-8: 16px;
    --mfy-font-size-9: 17px;
    --mfy-font-size-10: 18px;
    --mfy-font-size-11: 19px;
    --mfy-font-size-12: 20px;
    --mfy-color-text: #3e445a;
	--mfy-label-color: #515b77;
	--mfy-font-family: Alibaba PuHuiTi Regular,Alibaba PuHuiTi Medium,Alibaba PuHuiTi Regular,-apple-system,blinkmacsystemfont,"Helvetica Neue",helvetica,segoe ui,arial,roboto,"PingFang SC","miui","Hiragino Sans GB","Microsoft Yahei",sans-serif;
    /* --mfy-color-text-secondary: #666; */
    /* --mfy-color-weak: #999; */
    /* --mfy-color-light: #ccc; */
    /* --mfy-color-border: #d9d9d9; */
    /* --mfy-color-background: #fff; */
    /* --mfy-color-white: #fff; */
    /* --mfy-color-box: #f5f5f5; */
    /* --mfy-placeholder-color: #b8bbc4; */
    /* --mfy-color-text-light-solid: var(--mfy-color-white); */
    /* --mfy-color-text-dark-solid: #7b808f; */
    /* --mfy-color-text-dark-bold: #3a4056; */
    /* --mfy-color-fill-content: var(--mfy-color-box); */
    /* --mfy-font-size-main: var(--mfy-font-size-5); */
    /* --mfy-font-family-alibaba-medium: Alibaba PuHuiTi Medium; */
    /* --mfy-font-family-alibaba-regular: Alibaba PuHuiTi Regular; */
    /* --mfy-border-color: var(--mfy-color-border); */
    /* --mfy-title-line-height: 19px; */
    /* --mfy-text-line-height: 16px; */
    /* --button-font-size: --mfy-font-size-6; */
	/* --mfy-color-primary: #597dfc; */
    /* --mfy-color-success: #00b578; */
    /* --mfy-color-warning: #ff8f1f; */
    /* --mfy-color-danger: #ff3141; */
}

.mfy-referral-web-block-activity__levelLine:first-child .mfy-referral-web-block-activity__level {
    background-image: linear-gradient(100deg,#597dfc 46%,#8af8ff);
    box-shadow: 0 4px 5px 0 rgba(60,54,241,.1);
    border: none
}