@charset "utf-8";
/* CSS Document */
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th,p,a,li,td,b,div,span{font:400 12px "Poppins", "Lucida Grande", "Lucida Sans Unicode", "Arial"; color:#333; }
.ft52 { font-size: clamp(26px, 0.52rem, 104px); }
.ft36 { font-size: clamp(18px, 0.36rem, 72px); }
.ft20 { font-size: clamp(12px, 0.20rem, 40px); }
.ft18 { font-size: clamp(12px, 0.18rem, 36px); }
.ft16 { font-size: clamp(12px, 0.16rem, 32px); }
.ft14 { font-size: clamp(12px, 0.14rem, 28px); }
.ft12 { font-size: clamp(12px, 0.12rem, 24px); }
.ft10 { font-size: 10px; }

body {background-color: #000; }
.tal { text-align: left;}
button img { display: none; vertical-align: middle; margin-top: -0.04rem; width: 0.28rem; height: 0.28rem; }
button img.loading { display: inline-block; }
.invite-item p.success-tips { color: #000; position: absolute; bottom: 30%; transform: translateY(50%); display: none; opacity: 1; }
.invite-item p.success-tips svg { display: inline-block; vertical-align: middle; margin-top: -0.03rem;}
.invite-item p.copy-tips { color: #000; position: absolute; top: 0; left: 50%; transform: translate(-50%, 50%); display: none; }
.invite-item p.copy-tips svg { display: inline-block; vertical-align: middle;}

.invite-page { padding: 0.8rem 0 0.7rem; background: url(../img/keeprix-invite-bgimg.png) top center no-repeat; background-size: cover; }


.title-box { max-width: 12rem; width: 94%; margin: 0 auto; text-align: center; }
.invite-title { color: #F5F5F5; font-weight: 600; }
.invite-des { color: #E6E6E6; margin-top: 0.2rem; }
.invite-des span { font-size: inherit; color: #FFC42F; font-weight: 700; }
.invite-activity { display: none; }

.content-box { max-width: 16.8rem; width: 94%; margin: 0.5rem auto 0; }
.content-tabs { display: flex; max-width: 9.2rem; width: 94%; margin: 0 auto; justify-content: space-between; border-radius: .56rem; background: #350F38; padding: 0.02rem; }
.content-tabs p { max-width: 4.5rem; width: 100%; padding: 0.18rem 0; box-sizing: border-box; font-weight: 500; color: #fff; text-align: center; cursor: pointer; }
.content-tabs p.act { border-radius: .56rem; background: linear-gradient(108deg, #DB74FF 0.14%, #256CFF 95.45%), #7E1D92; box-shadow: 0 0 1.66px 0 rgba(0, 0, 0, 0.20); }
.content-lists { border-radius: .38rem; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(7px); padding: 0.3rem 1.2rem 0.5rem; text-align: center; }
.content-item { display: none; }
.content-item.act { display: block; }
.invite-activity { color: #ACACAC; margin-bottom: 0.3rem; }
.invite-activity p { display: inline-block; vertical-align: middle; color: inherit; }
.invite-activity svg { display: inline-block; vertical-align: middle; margin-right: 0.05rem; }
.invite-activity span { color: inherit; font-size: inherit; }
.invite-steps h2 { color: #FFF; font-weight: 600; }
.invite-item { border-radius: 0.1rem; max-width: 4.7rem; width: 94%;  padding: 0.4rem 0.32rem 0.3rem; box-sizing: border-box; position: relative; }
.invite-modes { display: flex; gap: 0.15rem; margin-top: 0.6rem; }
.invite-item h3 { color: #000; font-weight: 600; line-height: 1.2; }
.invite-item input { display: block; padding: 0.14rem 0.12rem; background-color: #fff; border: 1px solid transparent; border-radius: 5px; outline: none; max-width: 3.8rem; width: 100%; margin: 0.18rem auto 0; box-sizing: border-box; }
.invite-item input:focus { border: 1px solid #466DFF; }
.invite-item input.error { border: 1px solid #E64040; }
.invite-item input::placeholder { color: #999; font-size: 14px !important; }
.invite-item input::-webkit-input-placeholder { color: #999; font-size: 14px !important; }
.invite-item input::-moz-placeholder { color: #999; font-size: 14px !important; }
.invite-item input::-ms-input { color: #999; font-size: 14px; }
.invite-item button { border-radius: 5px; background: #C2C2C2; box-sizing: border-box; max-width: 1.6rem; width: 94%; margin: 0 auto 0.1rem; border: none; color: rgba(255, 255, 255, 0.60); font-weight: 600; padding: 0.1rem ; }
.invite-item .copy-btn { color: #fff; font-weight: 600; max-width: 0.8rem; padding: 0.06rem 0; margin: 0; position: absolute; right: 0.05rem; top: 50%; transform: translateY(-50%); cursor: pointer; background: linear-gradient(108deg, #DB74FF 0.14%, #256CFF 95.45%); }
.invite-item button.invite-submit { color: #fff; background: linear-gradient(108deg, #DB74FF 0.14%, #256CFF 95.45%); cursor: pointer; }
.invite-item button.invite-submit:hover { background: linear-gradient(113deg, #D459FF 7.93%, #0A5AFF 94.09%); }
.content-item2 button { display: inline-block; max-width: 2.6rem; }
.invite-item p { color: #999; }
.invite-item1 { background: url(../img/invite-steps-bgimg1.png) top center no-repeat; background-size: 100% 100%; }
.invite-item2 { background: url(../img/invite-steps-bgimg2.png) top center no-repeat; background-size: 100% 100%; }
.invite-item3 { background: url(../img/invite-steps-bgimg3.png) top center no-repeat; background-size: 100% 100%; }
.invite-item2 textarea { display: block; border: none; resize: none; outline: none; padding: 0.06rem 0.9rem 0.06rem 0.15rem; box-sizing: border-box; border-radius: 5px; max-width: 3.8rem; width: 100%; background: #ECE6E6; word-break: break-all; color: #848484; font-family: 'Poppins';  }
/* 整体滚动条 */
textarea::-webkit-scrollbar { width: 2px; }
textarea::-webkit-scrollbar-track { background: #f1f1f1; }
textarea::-webkit-scrollbar-thumb { background: #ECE6E6; border-radius: 5px;}

.invite-item3 img { margin-top: 0.2rem; width: 2.6rem; }
.content-item2 .invite-item { padding: 0.28rem 0.42rem; }
.content-item2 .invite-item3 img { margin-top: 0.1rem; }
.invite-steps>p { color: #fff; border-radius: .09rem; max-width: 7.1rem; padding: 0.23rem 0; width: 94%; margin: 0.5rem auto 0; background: linear-gradient(90deg, rgba(126, 29, 146, 0.00) 0%, #7E1D92 51.7%, rgba(126, 29, 146, 0.00) 100%); }
.invite-link, .invite-code { position: relative; max-width: 3.8rem; width: 100%; }
.invite-link { margin: 0.2rem auto 0.1rem; }
.invite-code { margin: 0.1rem auto 0.2rem; }
.invite-mask { position: absolute; width: 100%; height: 100%; top: 0; left: 50%; transform: translateX(-50%); border-radius: 5px; background: rgba(236, 230, 230, 0.40); backdrop-filter: blur(2px); text-align: right; padding: 0.02rem 0.05rem; box-sizing: border-box; }
.invite-item1 .email-error { color: #e64040; text-align: left; max-width: 3.8rem; width: 100%; margin: 0 auto 0.12rem; opacity: 0; }
.invite-item1 .email-error.act { opacity: 1; }
a.check-invite { display: inline-block; vertical-align: middle; font-size: inherit; text-decoration: underline; color: inherit; }
.input-form { margin: 0.2rem auto 0; }
.input-form input { margin: 0 auto; }
.input-form p { color: #E64040; text-align: left; opacity: 0; }
.input-form p.act { opacity: 1; }
/* .input-form .input-email { margin-top: 0.1rem; } */
.download-box { border-radius: 5px; background: #ECE6E6; padding: 0.09rem 0; margin: 0.3rem auto; }
.download-box p { color: #000; }
.download-box img { vertical-align: middle; }
a.download-btn { display: block; max-width: 2.6rem; width: 100%; box-sizing: border-box; padding: 0.075rem 0; margin: 0 auto; border-radius: 5px; background: linear-gradient(108deg, #DB74FF 0.14%, #256CFF 95.45%); color: #fff; font-weight: 600; text-decoration: none; }
a.download-btn::after { content: "\e93a"; font-family: 'iconfont'; display: inline-block; vertical-align: middle; margin-left: 0.1rem; }

.note-box { max-width: 14rem; width: 94%; margin: 0.5rem auto 0; }
.note-box>p { color: #999; margin-top: 0.12rem; }
.note-box .note-title { color: #999; font-weight: 500; margin-top: 0;}

/* check pop */
.check-pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: none; }
.check-main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 7.2rem; width: 100%; box-sizing: border-box; border-radius: .12rem; background: linear-gradient(108deg, #F9E8FF 0.14%, #E2ECFF 95.45%); text-align: center; padding: 0.4rem 0; }
.check-main p { color: #000; font-weight: 500; }
.check-main .user-code { margin-top: 0.06rem; color: #95929e; font-weight: 500;}
.check-main .code-text { color: inherit; font-weight: 500; }
.check-main p.email-error { color: #E64040; max-width: 4.3rem; width: 100%; text-align: left; margin: 0.04rem auto 0.14rem; opacity: 0; }
.check-main p.email-error.act { opacity: 1; }
.check-main input { display: block; max-width: 4.3rem; width: 100%; outline: none; margin: 0.3rem auto 0; padding: 0.13rem 0.2rem; border-radius: 5px; border: 1px solid #F3F3F3; background: #FFF; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.20); box-sizing: border-box; }
.check-main input.error { border: 1px solid #E64040; }
.close-btn { position: absolute; right: 0.2rem; top: 0.2rem; cursor: pointer; }
.close-btn::after { content: "\e813"; font-family: 'iconfont'; font-size: clamp(14px, 0.16rem , 32px); font-weight: 700; color: #9a9a9a; }
.check-btn { max-width: 1.6rem; width: 100%; outline: none; border: none; border-radius: 5px; background: #C2C2C2; color: rgba(255, 255, 255, 0.60); padding: 0.1rem 0; }
.check-main button.invite-submit { color: #fff; background: linear-gradient(108deg, #DB74FF 0.14%, #256CFF 95.45%); cursor: pointer; }
.check-main input::placeholder { color: #999; font-size: 14px !important; }
.check-main input::-webkit-input-placeholder { color: #999; font-size: 14px !important; }
.check-main input::-moz-placeholder { color: #999; font-size: 14px !important; }
.check-main input::-ms-input { color: #999; font-size: 14px; }
.check-main input:focus { border: 1px solid #466DFF; background: #FFF; box-shadow: 0 5px 7.8px 0 rgba(0, 0, 0, 0.20); }
.check-main input:focus::placeholder { color: rgb(153, 153, 153, 0.3); }
.check-info { max-width: 5.8rem; width: 100%; margin: 0.18rem auto; background: linear-gradient(90deg, rgba(126, 29, 146, 0.00) 0%, #7E1D92 51.7%, rgba(126, 29, 146, 0.00) 100%); padding: 0.19rem 0; }
.check-info p { color: #fff; font-weight: 400; }
.check-info p span { color: #FFCF32; font-weight: 600; display: inline-block; vertical-align: middle; }
.check-info p:first-child { margin-bottom: 0.2rem; }
.check-completed { display: none; }

/* show img */
.preview-box { position: absolute; display: none; z-index: 9999; pointer-events: none; transform: translate(-50%, -50%); width: 100%; height: 100%; background: rgba(0, 0, 0, 0.20);}
.invite-item3 .preview-box img { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 0; }

@media screen and (max-width: 1200px) {
    .content-lists { padding: 0.5rem 0.6rem; }
}

@media screen and (max-width: 980px) {
    .invite-modes { flex-direction: column; align-items: center; }
    .invite-item { max-width: 100%; background-size: cover; }
    .input-form { max-width: 3.8rem; }
    .input-form p { font-size: 10px; }
}

@media screen and (max-width: 750px) {
    .content-lists { padding: 0.6rem 0.3rem; }
    .content-item2 .invite-item { padding: 0.28rem 0.3rem; }
    .input-form { max-width: 5rem; }
    .input-form input { max-width: 100%; }
}

@media screen and (max-width: 568px) {
    .invite-item p.success-tips { bottom: 28%; }
}