html{ height: 100%;box-sizing: border-box; }
body{ min-height: 100%; box-sizing: border-box; background: #FCF4CE; padding-top: 0.7733rem; padding-bottom: 1.3667rem; position: relative; }
body::before{ content: ""; position: absolute; width: 100%; height: 12.76rem; left: 0; top: 0; background: url(../images/promotion_bg.png) no-repeat; background-size: 100% 100%; }
body.page_ios::before{ background-image: url(../images/landing_bg_ios.png); }
body *{ box-sizing: border-box; }
.top-box{ height: 7.6rem; }
.title{ text-align: center; padding: 0 0.4rem; }
.title .txt{ position: relative; font-weight: bold; line-height: 1.2; color: #FFFFFF;
background: linear-gradient(0deg, #FFBA00 0%, #FFFE78 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; font-size: .72rem; }
.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: 6.533333rem; height: 1.813333rem; text-align: center; line-height: 1.6733rem; 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; left: 0; width: 100%; height: 3.813333rem; background: linear-gradient(to bottom, #FFFBE3, #ffffff 30%); }
.records{ padding: 0.2667rem 0.5333rem; border-radius: 0.4rem; background-color: #fff; border-radius: 0.56rem; border: .04rem solid #C9AC87; overflow: hidden; height: 9.4933rem; position: relative;}
.records .head{ font-size: 0.4533rem; color: #9B6637; padding: 0.24rem 0; text-align: center; font-weight: bold; position: relative;}
.records .list-box{ max-height: 8rem; overflow-y: hidden; position: relative; }
.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: #BF9558; }
.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{ width: 2.773333rem; height: .986667rem; line-height: .986667rem; text-align: center; background: url(../images/landing_btn2.png) no-repeat; background-size: 100% 100%; }
.footer .btn a{ color: #fff; font-size: .32rem; font-weight: bold; }

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