html{ height: 100%;box-sizing: border-box; }
body{ min-height: 100%; box-sizing: border-box; background: url(../images/share_bg_coins.png) no-repeat; background-size: 100% 19.32rem; background-color: #000000; padding-top: 2.2rem; padding-bottom: 0.7733rem;  }
body.page_ios{ background-image: url(../images/share_bg_card.png); }
body *{ box-sizing: border-box; }
.header{ position: fixed; left: 0; top: 0; width: 100%; display: flex; align-items: center; height: 1.4667rem; padding: 0 0.3467rem; color: #fff; background-color: #000; z-index: 99; }
.header .logo{ width: 1.0667rem; }
.header .center{ flex: 1; padding: 0 0.2667rem; }
.header .center .h1{ font-size: 0.3733rem; font-weight: bold; }
.header .center .h2{ font-size: 0.2933rem; margin-top: 0.0533rem; }
.header .btn{ padding: 0 0.4rem; height: 0.8533rem; line-height: 0.8533rem; background: linear-gradient( 135deg, #F50664 0%, #FE721F 100%); border-radius: 0.4267rem; font-size: 0.32rem; font-weight: bold; }
.header .btn a{ color: #fff; }
.top-box{ height: 5.8rem; }
.title{ text-align: center; padding: 0 0.2rem; }
.title .txt{ position: relative; font-size: 0.6133rem; color: #FCEED5; line-height: 1.2; font-weight: bold; }
.title .txt .tag{ position: absolute; right: 0.8rem; top: -0.46rem; width: 0.9333rem; height: 0.7467rem; background: url(../images/invite_icon_free.png) no-repeat; background-size: 100% 100%;  }
.desc{ text-align: center; }
.desc .txt{ display: inline-block; padding: 0 0.6667rem; height: 1.0933rem; line-height: 1.0933rem; font-size: 0.32rem; background: url(../images/invite_bg_type.png) no-repeat; background-size: 100% 100%; color: #9F4D33; font-weight: bold; }
.share-btn{ margin: 0 auto; width: 7.3333rem; height: 1.7867rem; text-align: center; line-height: 1.3067rem; font-weight: 500; font-size: 0.48rem; color: #FFFFFF; text-shadow: 0rem 0.0267rem 0.24rem rgba(210,88,26,0.36), 0rem 0.0267rem 0rem #E70000; background: url(../images/invite_bg_btn.png) no-repeat; background-size: 100% 100%; }
.share-btn:active{ opacity: .95; }
.code-box{ display: flex; align-items: center; justify-content: center; font-size: 0.3733rem; color: #A9ABB1; margin-top: 0.2133rem; }
.code-box .code{ color: #fff; }
.code-box .copy{ width: 0.32rem; margin-left: 0.1067rem; transform: translateY(0.0267rem); }

.records-box{ margin: 0 0.4rem; margin-top: 0.5333rem; border: 2px solid #FFBA8C; border-radius: 0.5333rem; background-color: #fff; box-shadow: inset 0rem -0.1333rem 0rem 0rem #FFF6E2; border-radius: 0.5333rem; border: 1px solid #FFBA8C; position: relative; overflow: hidden; }
.records-box::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2.2667rem; background: linear-gradient( 180deg, #FFE3C8 0%, rgba(255,255,255,0) 100%); }
.records-box::after{ content: ""; position: absolute; right: 0; top: 0; width: 2.0267rem; height: 1.7333rem; background: url(../images/withdraw_bg_coins.png) no-repeat; background-size: 100% 100%; }
.records{ padding: 0.2667rem 0.5333rem; border-radius: 0.4rem; }
.records .head{ height: 1.1467rem; display: flex; align-items: center; justify-content: center; font-size: 0.4267rem; color: #CD421C; font-weight: bold; margin-bottom: 0.2667rem; position: relative; text-align: center; }
.records .head::before{ content: ""; width: 0.9333rem; height: 0.04rem; background: url(../images/invite_icon_lttle.png) no-repeat; background-size: 100%; margin-right: 0.2133rem;  }
.records .head::after{ content: ""; width: 0.9333rem; height: 0.04rem; background: url(../images/invite_icon_lttle.png) no-repeat; background-size: 100%; margin-left: 0.2133rem; transform: rotate(180deg); }
.records .list-box{ max-height: 5.5rem; overflow-y: hidden; }
.records .list .item{ display: flex; align-items: center; padding: 0.2667rem 0; border-bottom: 1px solid #E5E5E5;}
.records .list .item .logo{ width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: #eee; }
.records .list .item .center{ flex: 1; padding: 0 0.1867rem; }
.records .list .item .center .h1{ font-size: 0.32rem; font-weight: bold; }
.records .list .item .center .h1 span{ color: #FF3631; }
.records .list .item .center .h2{ color: #888888; font-size: 0.2933rem; }

.agrement{ text-align: center; margin-top: 0.36rem; font-size: 0.2933rem; color: #5A606B; }
.agrement a{ color: #858C99; text-decoration: underline; }

.screen{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 999; }
.screen .mask{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8.3467rem; background-color: #fff; border-radius: 0.5333rem; padding: 0.8rem 0.5333rem; overflow: hidden; }
.screen .mask::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 120px; background: linear-gradient( 180deg, #FFE3C8 0%, rgba(255,255,255,0) 100%); }
.screen .mask-title{ font-size: 0.5067rem; font-weight: bold; position: relative; text-align: center; line-height: 1; }
.screen .mask-option{ font-size: 0.3733rem; line-height: 0.56rem; margin-top: 0.5333rem; }
.screen .mask-desc{ font-size: 0.3733rem; color: #888888; line-height: 0.56rem; margin-top: 0.2667rem; }
.screen .mask-close{ width: 0.3467rem; height: 0.3467rem; position: absolute; right: 0.4267rem; top: 0.4267rem; background: url(../images/login_icon_close.png) no-repeat; background-size: 100% 100%; background-position: center;}