html{ height: 100%;box-sizing: border-box; }
body{ min-height: 100%; box-sizing: border-box; background: url(../images/promotion_bg.png) no-repeat; background-size: 100% 10.1333rem; background-color: #FFDFDF; padding-top: 0.7733rem; padding-bottom: 1.0667rem;  }
body.page_ios{ background-image: url(../images/promotion_bg_ios.png); }
body *{ box-sizing: border-box; }

.title{ text-align: center; padding: 0 0.4rem; }
.title .txt{ position: relative; font-size: 0.6133rem; color: #FCEED5; line-height: 1.2; }
.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%;  }
.page_ios .title{ height: 4.6333rem;}

.icon-box{ text-align: center; margin-top: 0.4rem; }
.icon-box img{ width: 5.3333rem; }

.share-btn{ position: relative; margin: 0 auto; margin-top: -0.1333rem; 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; }
.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: #B62300; 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{ display: flex; align-items: center; justify-content: center; font-size: 0.3733rem; 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; background-color: #fff; box-shadow: 0px 0px 0.1467rem 0px rgba(237,199,199,0.7); border-radius: 0.4rem; position: relative; overflow: hidden; height: 9.4933rem; }
.records{ padding: 0.2667rem 0.5333rem; border-radius: 0.4rem; }
.records .head{ font-size: 0.4533rem; 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; }

body.page_ios .records-box{ margin: 0 0.2667rem; margin-top: 0.2667rem;  box-shadow: none; background: url(../images/landing_invite_bg_box.png) no-repeat; background-size: 100% 100%;}
body.page_ios .records-box .records .head{ text-align: left;}

.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: #000; 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;}