/* CSS Document */
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th,p,a,li,td,b,div { font: 400 12px "Poppins", "Lucida Grande", "Lucida Sans Unicode", "Arial"; color: #333;}
html { font: 400 100% "Poppins", "Lucida Grande", "Lucida Sans Unicode", "Arial"; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none; line-height: 1.2; color: #333; font-size: 10px;}
.ft56 { font-size: clamp(24px, 0.56rem, 112px); }
.ft48 { font-size: clamp(24px, 0.48rem, 96px); }
.ft42 { font-size: clamp(22px, 0.42rem, 84px); }
.ft24 { font-size: clamp(16px, 0.24rem, 48px); }
.ft22 { font-size: clamp(16px, 0.22rem, 44px); }
.ft20 { font-size: clamp(16px, 0.20rem, 40px); }
.ft18 { font-size: clamp(15px, 0.18rem, 36px); }
.ft16 { font-size: clamp(14px, 0.16rem, 32px); }
.ft14 { font-size: clamp(12px, 0.14rem, 28px); }

h1 { color: #F5F5F5; font-weight: 600; text-align: center; }
h2 { color: #000; text-align: center; font-weight: 600; } 
body { background-color: #FAFAFA; }

/* sec1 */
.sec1 { background: url(../upgrade/img/upgrade-banner-bgimg.png) top center no-repeat; background-size: cover; padding: 0.8rem 0 1rem; }
.purchase-box { max-width: 1360px; width: 96%; margin: 0 auto; }
.credits-des { color: rgba(255, 255, 255, 0.80); text-align: center;}
.purchase-credits { display: flex; justify-content: center; gap: 0.24rem; align-items: center; margin-top: 0.6rem; }
.credits-item { border-radius: .2rem; background: linear-gradient(109deg, #FFF 3.67%, #FFF7F0 69.43%, #FFF 96.47%); box-shadow: 0 4px 12px 0 rgba(199, 181, 213, 0.40); max-width: 320px; width: 100%; box-sizing: border-box; padding: 0.4rem 0.3rem; min-height: 4.12rem; }
.credits-item.hot-item { border-radius: .2rem; border: .04rem solid #FFC27B; background: linear-gradient(109deg, #FFF 3.67%, #FFF7F0 69.43%, #FFF 96.47%); box-shadow: 0 4px 18px 0 rgba(255, 156, 98, 0.30); position: relative; padding: 60px 0.26rem 0.4rem; }
.popular-img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.credits-title { background: linear-gradient(90deg, #2C67FF 0%, #9E62FF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; }
.credits-title img { margin-right: 0.1rem; vertical-align: middle; }
.credits-price { line-height: 1.25; }
.credits-price span { display: inline-block; background: linear-gradient(308deg, #FF664E 32.47%, #FF9110 82.62%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; vertical-align: middle; font-weight: 600; }
.credits-price del { color: #777; margin-left: 0.1rem; display: inline-block; vertical-align: middle; }
.credits-plan { color: #333;}
.average-price { color: #333; font-size: inherit; display: inline-block; margin-top: 0.1rem; }
.price-group { padding-bottom: 0.34rem; border-bottom: 1px dashed rgba(51, 51, 51, 0.25); }
.credits-plan { color: #777; margin: 0.2rem 0;}
a.buy-credits { display: inline-block; border-radius: .1rem; text-decoration: none; border: 2px solid #FFC27B; background: linear-gradient(180deg, rgba(255, 229, 198, 0.00) 0%, #FFD6C6 100%); color: #501900; font-weight: 500; padding: 0.10rem 0.14rem; box-sizing: border-box; text-align: center; width: 100%; transition: all .3s ease-in-out; }
a.buy-credits:hover { background: linear-gradient(180deg, rgba(255, 241, 224, 0.00) 0%, #FFD6C6 100%); box-shadow: 0 4px 8px 0 rgba(255, 145, 76, 0.30); transform: translateY(-0.1rem); transition: all .3s ease-in-out; }
.hot-item a.buy-credits { background: linear-gradient(180deg, rgba(247, 85, 1, 0.20) 0%, rgba(255, 167, 80, 0.20) 100%), linear-gradient(13deg, #FF5B4E 7.58%, #FDCC77 93.27%); border: none; padding: 0.12rem 0.14rem; color: #fff; }
.hot-item a.buy-credits:hover {background: linear-gradient(13deg, #FF5B4E 7.58%, #FDCC77 93.27%); box-shadow: 0 4px 8px 0 rgba(255, 145, 76, 0.30);  }
.credits-save { margin-top: 0.2rem; }
.credits-save span { display: inline-block; color: #FFA133; font-weight: 600;}

/* sec2 */
.effect-box { max-width: 1200px; width: 96%; margin: 0 auto; }
.effect-lists { display: flex; border-radius: .2rem; background: linear-gradient(146deg, #F6F0FF 19.99%, #FFF3E5 89.07%); padding: 0.4rem 0.3rem; justify-content: space-between; margin-top: 0.5rem; flex-wrap: wrap; }
.effect-item { text-align: center; max-width: 2.1rem; width: 100%; }
.effect-item p { color: #333; margin-top: -0.5rem; }

/* sec3 */
.sec3 {margin-top: 1rem; }
.rules-box { max-width: 1360px; width: 96%; margin: 0 auto; }
.faq-lists { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.24rem;}
.faq-lists li { border-radius: .1rem; border: 1px solid #DCD3E0; background: #FFF; padding: 0.24rem 0.2rem; cursor: pointer;}
.faq-title { color: #000; font-weight: 600; padding-right: 0.4rem; position: relative;}
.faq-title::after { content: "\e92d"; font-family: "iconfont"; position: absolute; font-size: 14px; padding: 0.09rem; border-radius: 50%; background: rgba(163, 163, 163, 0.20); text-align: center; color: #666; right: 0; top: 0;}
.faq-title:hover::after { color: #9E62FF; background: rgba(158, 98, 255, 0.20);}
li.show .faq-title::after { content: "\e92c"; font-family: "iconfont"; color: #9E62FF; background: rgba(158, 98, 255, 0.20);}
.faq-des { color: #333; display: none; margin-top: 0.12rem;}

/* sec4 */
.sec4 {margin-top: 1rem; }
.used-box { max-width: 1360px; width: 96%; margin: 0 auto; }
table { border-collapse:separate; border-spacing: 0; border-radius: .24rem; border: 8px solid rgba(158, 98, 255, 0.18); background: rgba(255, 255, 255, 0.50); margin-top: 0.6rem; }
td { padding: 0.16rem 0.4rem;border-right: 1px solid #E6DAFA; border-bottom: 1px solid #E6DAFA; color: #333; }
.icon_tips { position: relative; margin: 0; }
.icon_tips i { font-style: normal; display: none; position: absolute; z-index: 2; width: 240px; box-sizing: border-box; padding: 8px 10px; font-size: 12px; text-align: left; background-color: #fff; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); top: 20px; left: -120px; color: #666; }
.icon_tips i::before { content: ""; display: inline-block;  border: 8px solid transparent; border-bottom-color: #fff; position: absolute; top: -16px; left: 120px; }
.icon_tips::after { color: #666; font-size: 12px; vertical-align: top; cursor: pointer; display: inline-block; margin-top: -5px; font-weight: normal; }
.icon_tips:hover i { display: block; font-weight: normal; }

/* sec5 */
.sec5 { background: linear-gradient(180deg, rgba(255, 235, 210, 0.06) 5.1%, #FDE4FF 48.08%, #DDD1FF 95.16%); margin-top: 1rem; padding-bottom: 1.2rem; }
.pay-method { margin: 0.6rem auto 0.4rem; position: relative; text-align: center; padding: 0.18rem 0; background: url(../img/paymethod-borderimg.svg) top center no-repeat; background-size: cover;}
.pay-method img { vertical-align: bottom; max-width: 6.02rem; width: 90%;}
.pay-lists { max-width: 1360px; width: 96%; margin: 0 auto; display: flex; justify-content: center; gap: 0.4rem;}
.payinfo-item { max-width: 3.1rem; width: 100%; text-align: center;}
.payinfo-title { color: #333; margin: 0.1rem auto;}
.payinfo-des { color: #666;}

/* pop */
.pop-tips { display: none; }
.pop-box { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.70); backdrop-filter: blur(25px); width: 100%; height: 100%; z-index: 101; }
.pop-main { max-width: 560px; width: 100%; box-sizing: border-box; padding: 0.52rem 0.4rem 0.4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: .2rem;
background: #FFF; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.70); text-align: center; }
.pop-title { color: #000; font-weight: 600; margin: 0.2rem auto 0.1rem; }
.pop-des { color: #333; }
a.buy-btn { width: 100%; display: inline-block; color: #fff; text-decoration: none; border-radius: .08rem; background: linear-gradient(90deg, #2C67FF 0%, #9E62FF 100%); font-weight: 600; padding: 0.1rem 0; margin: 0.2rem auto; }
.pop-action-tips { color: #666; }
.pop-close::after { content: "\e916"; font-family: "iconfont"; position: absolute; top: 0.2rem; right: 0.2rem; color: #7E8C8C; cursor: pointer; }

/* loading */
.loading { position: fixed; top: 0; left: 0; background: linear-gradient(180deg, #DDD1FF 0%, rgba(240, 236, 255, 0.06) 100%), #FFF;  width: 100%; height: 100%; z-index: 101; }
.loading-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.loading-title { color: #000; font-weight: 600; margin: 0.24rem auto 0.1rem; }
.loading-des { color: #333;}
.loading-box ul{width: 50px; margin: 13px auto; display: flex; justify-content: space-between; }
.loading-box ul li{display: inline-block;vertical-align: middle;width: 6px;height: 6px;border-radius: 3px;transition: .6s;}
.loading-box ul li.act{width: 24px;}
.loading-box ul li:nth-child(1){background-color: #FFAD4C; }
.loading-box ul li:nth-child(2){background-color: #2C67FF; }
.loading-box ul li:nth-child(3){background-color: #3BBA54; }

/* cn */
#cn .pay-method { background: url(../cn/img/paymethod-borderimg.png) top center no-repeat; background-size: cover;}
#cn .pay-method img { max-width: 5.14rem; width: 100%; }

@media screen and (max-width: 1400px) {
    .credits-item { padding: 0.4rem 0.1rem; }
    .purchase-credits { gap: 0.14rem; }
}

@media screen and (max-width: 1200px) {
    .credits-item { padding: 0.4rem 0.3rem; max-width: 390px; }
    .purchase-credits { flex-wrap: wrap; gap: 0.4rem; }
    
    .effect-lists { gap: 0.4rem 3%; justify-content: center; }
    .effect-item { max-width: 30%; }

    .pay-lists { flex-wrap: wrap;  gap: 0.4rem 3%; }
    .payinfo-item { max-width: 48%; }
}

@media screen and (max-width: 980px) {
}

@media screen and (max-width: 750px) {
    .credits-des { margin-top: 0.3rem; }
    .ft56 { line-height: 1.2; font-size: clamp(26px, 0.52rem, 104px); };
    td { padding: 0.2rem; }
    .effect-box, .rules-box, .purchase-box, .used-box, .pay-lists { width: 90%; }
    .payinfo-item { max-width: 100%; }
    .price-group { margin-top: 0.2rem; }

    .effect-lists { background: transparent; gap: 0.28rem 2%; padding: 0; }
    .effect-lists:last-child { width: 100%; }
    .effect-item { border-radius: .2rem; background: linear-gradient(146deg, #F6F0FF 19.99%, #FFF3E5 89.07%); position: relative; display: flex; align-items: center; max-width: 49%;  }
    .effect-item img { width: 73px; transform: translate(-6px, 12px); }
    .effect-item p { display: inline-block; vertical-align: middle; margin-top: 0; text-align: left; transform: translateX(-12px); }
    .effect-item:last-child { max-width: 100%; }
    .effect-item .ft18 { font-size: 13px; }
}

@media screen and (max-width: 568px) {
    .faq-title { padding-right: 32px; }
    .faq-title::after { padding: 0.12rem; font-size: 12px; }
    .icon_tips i { left: -200px; }
    .icon_tips i::before { left: 200px; }
}