html{ height: 100%;box-sizing: border-box; }
body{ min-height: 100%; box-sizing: border-box; background: linear-gradient(to bottom, #FFE4C2 30%, #FEF4E8); padding-top: 0.7733rem; padding-bottom: 1.0667rem; position: relative; }
body::before{ content: ""; position: absolute; width: 100%; height: 10rem; left: 0; top: 0; background: url(../images/promotion_bg.png) no-repeat; background-size: 100% 100%; }
body *{ box-sizing: border-box; }
.top-box{ height: 5.3rem; }
.title{ text-align: center; padding: 0 0.4rem; }
.title .txt{ position: relative; font-size: 0.6133rem; font-weight: bold; line-height: 1.2; color: #FFF5CA; text-shadow: 0px 5px 6px rgba(255,0,0,0.5); }
.title .txt .tag{ position: absolute; right: 0.8rem; top: -0.42rem; width: 0.9333rem; height: 0.7467rem; background: url(../images/invite_icon_free.png) no-repeat; background-size: 100% 100%;  }

.share-btn{ position: relative; margin: 0 auto; margin-top: -0.1333rem; width: 7.2533rem; height: 1.5733rem; text-align: center; line-height: 1.4733rem; font-weight: 500; font-size: 0.5333rem; color: #FFFFFF; background: url(../images/invite_bg_btn.png) no-repeat; background-size: 100% 100%; }
.share-btn:active{ opacity: .95; }
.share-btn .tag{ position: absolute; right: 0; top: -0.2667rem; min-width: 1.5733rem; height: 0.5867rem; padding: 0 0.16rem; background: url(../images/landing_invite_corner_bg.png); background-size: 100% 100%; color: #FFFFFF; font-size: 0.32rem; line-height: 0.48rem; text-align: center;}
.share-btn .tag::before{display: inline-block; content: ''; width: 0.3733rem; height: 0.3733rem; background: url(../images/icon_green_money.png) no-repeat; background-size: 100% 100%; vertical-align: middle; }
.share-btn .tag span{ vertical-align: middle; }

.code-box{ position: relative; display: flex; align-items: center; justify-content: center; font-size: 0.3733rem; color: #A8450F; margin-top: 0.32rem; }
.code-box .code{ color: #FF0000; }
.code-box .copy{ width: 0.32rem; margin-left: 0.1067rem; transform: translateY(0.0267rem);  }

.records-box{ margin: 0 0.4rem; margin-top: 0.4267rem; position: relative;  }
.top-img{ position: absolute; left: 0; top: -0.4533rem; width: 100%; height: 0.6667rem; }
.records{ padding: 0.2667rem 0.5333rem; border-radius: 0.4rem; background: url(../images/landing_icon_boxtl.png) no-repeat; background-size: 100% 1.3867rem; background-color: #fff; box-shadow: inset 0rpx 0rpx 0.28rem 0rpx rgba(255,196,140,0.2); border-radius: 0.56rem; border: 1px solid #FAB26E; overflow: hidden; height: 9.4933rem; }
.records .head{ font-size: 0.4533rem; color: #8F2F14; padding: 0.24rem 0; text-align: center; font-weight: bold; }
.records .list-box{ max-height: 8rem; 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: 500; }
.records .list .item .center .h1 span{ color: #FF3631; }
.records .list .item .center .h2{ color: #888888; font-size: 0.2933rem; }
.records .list .item .money{ font-size: 0.3467rem; font-weight: 500; }
.records .list .item .money span{ color: #FF3631; }

.agrement{ text-align: center; margin-top: 0.36rem; font-size: 0.2933rem; color: #9C8181; }
.agrement a{ color: #9C8181; text-decoration: underline; }

.footer{ position: fixed; left: 0; bottom: 0; width: 100%; display: flex; align-items: center; height: 1.4667rem; padding: 0 0.3467rem; color: #fff; background-color: rgba(92, 69, 69, .95); z-index: 99; }
.footer .logo{ width: 1.0667rem; }
.footer .center{ flex: 1; padding: 0 0.2667rem; }
.footer .center .h1{ font-size: 0.3733rem; font-weight: bold; }
.footer .center .h2{ font-size: 0.2933rem; margin-top: 0.0533rem; }
.footer .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; }
.footer .btn a{ color: #fff; }

.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;}