/* 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;}
.ft68 { font-size: clamp(30px, 0.68rem, 136px); }
.ft52 { font-size: clamp(24px, 0.52rem, 104px); }
.ft48 { font-size: clamp(24px, 0.48rem, 96px); }
.ft44 { font-size: clamp(22px, 0.44rem, 88px); }
.ft42 { font-size: clamp(22px, 0.42rem, 84px); }
.ft36 { font-size: clamp(22px, 0.36rem, 72px); }
.ft32 { font-size: clamp(20px, 0.32rem, 64px); }
.ft27 { font-size: clamp(18px, 0.27rem, 54px); }
.ft24 { font-size: clamp(18px, 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(14px, 0.14rem, 28px); }
.mt80 { margin-top: 0.8rem; }
h2 { color: #000; text-align: center; font-weight: 600; }

/* sec1 */
.sec1 { background: url(../upgrade/img/upgrade-banner-bgimg.png) top center no-repeat; background-size: cover; padding-top: 0.8rem; }
.banner-text { max-width: 1200px; width: 96%; margin: 0 auto; text-align: center; }
.banner-title { color: #F5F5F5; text-align: center; font-weight: 600; line-height: .9rem; }
.banner-title span { background: linear-gradient(180deg, #FFDAAF 0%, #FFAD4C 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }
.banner-des { color: #FFF; margin-top: 0.2rem; }
.current-item { max-width: 276px; width: 100%; padding: 0.7rem 0rem; }
.current-item .current-btn { display: none; }
.current-title { color: #333; font-weight: 500; }
.current-device { display: inline-block; border-radius: 100px; background: linear-gradient(90deg, rgba(255, 223, 200, 0.20) 1.92%, #FFDDC4 49.7%, rgba(255, 223, 200, 0.20) 90.66%); color: #501900; font-weight: 500; line-height: 2; padding: 0 0.1rem; margin: 0.12rem 0; }
.current-device img { vertical-align: middle; margin-right: 0.08rem; }
.current-price { color: #333; font-weight: 600;}
.current-lists { margin-top: 0.44rem; }
.current-lists li { font-size: inherit; margin-top: 0.15rem; }
.current-lists li::before { display: inline-block; vertical-align: top; margin-right: 0.04rem; content: ""; width: 14px; height: 21px; background: url(../upgrade/img/current-list-icon.svg); background-size: cover; }
.current-lists p { color: #333; font-size: inherit; width: calc(100% - 25px); display: inline-block; }

.upgrade-cont { max-width: 1400px; width: 96%; margin: 0.5rem auto 0; border-radius: .24rem; border: 4px solid #FFF; background: linear-gradient(146deg, #F6F0FF 19.99%, #FFF3E5 89.07%); backdrop-filter: blur(45px); display: flex; box-sizing: border-box; padding: 0.3rem; justify-content: center; gap: 0.2rem; position: relative;}
.upgrade-item { max-width: 336px; width: 25%; box-sizing: border-box; padding: 0.3rem 0.2rem; border-radius: 20px; background: linear-gradient(191deg, #FFF 0%, #FFF7F0 29.14%, #FFF 100%); box-shadow: 0 4px 18px 0 rgba(255, 156, 98, 0.17); backdrop-filter: blur(20px); border: 4px solid transparent; }
.upgrade-title { color: #333; font-weight: 600; line-height: 1.5; }
.upgrade-price b { font-weight: 600; background: linear-gradient(308deg, #FF664E 32.47%, #FF9110 82.62%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.upgrade-price del { color: rgba(51, 51, 51, 0.80); margin-left: 0.1rem; display: inline-block; }
a.upgrade-btn { color: #501900; font-weight: 500; text-decoration: none; border-radius: 10px; border: 2px solid #FFC27B; background: linear-gradient(180deg, rgba(255, 229, 198, 0.00) 0%, #FFD6C6 100%); display: inline-block; max-width: 100%; width: 100%; text-align: center; padding: 0.1rem 0; margin: 0.24rem 0; box-sizing: border-box; transition: all .3s ease-in-out;}
a.upgrade-btn: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; }
.upgrade-item.hot-item { border: 4px 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.17); }
.hot-item a.upgrade-btn { border-radius: 10px; 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%); color: #fff; border: none; }
.hot-item a.upgrade-btn:hover { background: linear-gradient(13deg, #FF5B4E 7.58%, #FDCC77 93.27%); box-shadow: 0 4px 8px 0 rgba(255, 145, 76, 0.30); }

.upgrade-cont.pw980 { max-width: 980px; justify-content: flex-end; gap: 1.4rem;  }
.pw980 .hot-item { max-width: 50%; width: 100%; }

.upgrade-lists { margin: 0; min-height: 100px; width: 100%; }
.upgrade-lists li { line-height: normal; margin-top: .1rem; font-size: inherit;}
.upgrade-lists li svg { vertical-align: top;}
.upgrade-lists li p { position: relative; display: inline-block; font-size: inherit; color: #666; width: calc(100% - 24px);}
.upgrade-lists li p span { font-size: inherit; color: inherit; }
.upgrade-lists li p img { position: absolute; top: 0; margin-left: 0.04rem; }
.upgrade-lists li p .tips { position: absolute; background-color: #fff; padding: 5px 10px; border-radius: 5px; box-shadow: 0 0 6px rgba(0, 0, 0, .15); top: -40px; left: 100px; display: none; font-style: normal; }
.upgrade-lists li p .tips::after { content: ""; display: inline-block; border: 8px solid transparent; border-top-color: #fff; position: absolute; bottom: -15px; right: 45%; }

.upgrade-lists li::before { display: inline-block; vertical-align: top; margin-top: 0.02rem; margin-right: 0.08rem; content: ""; width: 16px; height: 17px; background: url(../upgrade/img/right_icon.svg); background-size: cover; }
.upgrade-lists .function-lists::before { display: none; }
.function-lists dl { padding-left: 0.2rem; }
.function-lists dd { margin-top: 0.1rem; font-size: inherit; }
.function-lists dd::before { display: inline-block; vertical-align: top; margin-top: .03rem; margin-right: 0.08rem; content: ""; width: 14px; height: 14px; background: url(../upgrade/img/function-list-icon.svg); background-size: cover; }
.upgrade-lists b { font-weight: 600; color: #FFA133; font-size: inherit; }
.icon_tips { position: relative; margin: 0; }
.icon_tips i { font-style: normal; display: none; position: absolute; z-index: 2; width: 150px; 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: -100px; color: #666; }
.icon_tips i::before { content: ""; display: inline-block;  border: 8px solid transparent; border-bottom-color: #fff; position: absolute; top: -16px; left: 100px; }
.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; }

/* sec2 */
.paymethod-title { color: #000; text-align: center; font-weight: 500; }
.pay-method { position: relative; text-align: center; padding: 0.18rem 0; margin: 0.5rem auto 0.4rem; 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: 1400px; 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; }

/* sec3 */
.sec3 { background: linear-gradient(90deg, #F0F4FF 0%, #F7F2FF 100%); padding: 1.2rem 0; }
.upgrade-news { max-width: 1400px; width: 96%; margin: 0 auto; text-align: center; }
.upgrade-news h2 { max-width: 1100px; width: 100%; margin: 0 auto; }
.news-tab { max-width: 920px; width: 96%; margin: 0.8rem auto 0.5rem; display: flex; border-radius: 0.88rem; padding: 4px; background: rgba(255, 255, 255, 0.80); justify-content: space-between; }
.news-tab p { padding: 0.2rem 0.54rem; color: #000; font-weight: 600; cursor: pointer; }
.news-tab p:hover { border-radius: .66rem; background: linear-gradient(106deg, #EFE5FF 16.86%, #E5EDFF 99.22%); }
.news-tab p.active { border-radius: .66rem; background: linear-gradient(106deg, #DCC7FF 16.86%, #C7D7FF 99.22%); }
.news-lists { display: none; }
.news-lists.active { display: flex; gap: 0.2rem; }
.news-lists-title { display: none; }
.news-item { max-width: 440px; width: 100%; border-radius: 20px; box-sizing: border-box; padding: 0.6rem 0.4rem; overflow: hidden; position: relative;}
.news-item1 { background: linear-gradient(180deg, #D6D8FF 0%, #BDBFFF 100%); }
.news-item2 { background: linear-gradient(180deg, #E5D9FF 0%, #D4BFFF 100%); }
.news-item3 { background: linear-gradient(180deg, #D6F0FF 0%, #A3DEFF 100%); }
.news-item .new-cont {display: flex; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; opacity: 0; z-index: -1; transition: .39s ease-in-out; border-radius: 10px; }
.news-item .new-cont>div {display: flex;flex-flow: column; align-items: center; justify-content: center; transform: translateY(100%); transition: all .6s ease-in-out; width: 90%; margin: 0 auto; }
.news-item img, .news-item>h3 { opacity: 1; transition: all .5s ease-in-out; }
.news-item .new-cont>div>span{margin-top: 20px; font-size: 14px;color: #fff;font-weight: 400;}
.news-item:hover .new-cont { opacity: 1; z-index: 1;}
.news-item:hover img, .news-item:hover>h3 { opacity: 0; transform: translateY(-2rem); transition: all .5s ease-in-out; }
.news-item:hover .new-cont>div { transform: translateY(0%); transition: all .6s ease-in-out; }
.news-item-title { color: #333; font-weight: 600; margin-top: 0.3rem; }
.new-cont-title { color: #333; font-weight: 600; }
.new-cont-des { color: #333; margin-top: 0.2rem; } 
.upgrade-news>a { color: #000; font-weight: 600; display: inline-block; border-radius: .15rem; border: 2px solid #000; text-decoration: none; padding: 0.15rem 0.88rem; margin-top: 0.7rem; position: relative; overflow: hidden;}
.upgrade-news>a span svg { vertical-align: sub; }
.button-box { display: inline-block; width: 18px; height: 24px; vertical-align: sub; margin-left: 0.2rem; position: relative; }
.button-elem { position: absolute; left: 0; }
.button-elem2 { transform: translateY(60px); }
.upgrade-news>a:hover { border: 2px solid #9E62FF; }
.button:hover .button-box, .button:focus .button-box {  transition: 0.4s; transform: translateY(-60px);}

/* sec4 */
.sec4 { padding: 1.2rem 0; }
.compare-info { max-width: 1200px; width: 96%; margin: 0 auto; }
.fs-product img { margin-right: 0.24rem; vertical-align: middle; width: 0.44rem; height: 0.44rem; }
.fs-product p { font-weight: 600; background: linear-gradient(90deg, #2C67FF 0%, #9E62FF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-size: inherit; vertical-align: middle; }
.frist-plan { color: #333; font-weight: 700; border-right: none; }
.second-plan { color: #333; font-weight: 700; }
table { border-collapse:separate; border-spacing: 0; border-radius: .2rem; border: .12rem solid rgba(158, 98, 255, 0.21); background: rgba(255, 255, 255, 0.50); position: relative; margin-top: 0.6rem; }
td { border-right: 1px solid #E6DAFA; border-bottom: 1px solid #E6DAFA; padding: .15rem .2rem; color: #333; }
.ftc-other { color: rgba(40, 0, 65, 0.50); }
.ftc-normal { color: #30005D; }
.ftc-title { color: #9E62FF; }
/* table::after { content: ""; width: 24%; height: 100%; position: absolute; right: 0; top: 0; background: url(../upgrade/img/table-last-bgimg.png) top center no-repeat; background-size: 100% 100%; z-index: -1; } */
tr td:last-child { border-left: .04rem solid #9E62FF; border-right: .04rem solid #9E62FF; border-bottom: none; position: relative; }
tr td:last-child::after { display: block; content: ""; height: 1px; width: 100%; background-color: #E6DAFA; position: absolute; left: 0; bottom: 0; }
table td.ft-top { border-top: .04rem solid #9E62FF; border-radius: 0.08rem 0.08rem 0 0; }
table td.ft-btm { border-bottom: .04rem solid #9E62FF; border-radius: 0 0 0.08rem 0.08rem; }
table td.ft-btm::after { display: none; }
table td:last-child { background: #F7F2FF; }
.ft-border { border-right: none; }

/* sec5 */
.sec5 { background: linear-gradient(180deg, rgba(255, 235, 210, 0.06) 5.1%, #FDE4FF 48.08%, #DDD1FF 95.16%); padding-bottom: 1.2rem; }
.faq-info { max-width: 1400px; 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.3rem; cursor: pointer; }
.faq-title { color: #000; font-weight: 600; padding-right: 0.4rem; position: relative;}
.faq-title::after { content: "+"; position: absolute; width: 0.32rem; height: 0.32rem; 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: "-"; color: #9E62FF; background: rgba(158, 98, 255, 0.20); }
.faq-des { color: #333; display: none; margin-top: 0.12rem; }

/* 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 .news-tab { max-width: 520px; }
#cn .pay-method { background: url(../cn/img/paymethod-borderimg.png) top center no-repeat; background-size: 100% 100%;}
#cn .pay-method img { max-width: 5.14rem; width: 100%; }

@media screen and (max-width: 1400px) {
    .upgrade-cont { padding: 0.3rem 0.1rem; gap: 0.1rem; }
    .upgrade-item { padding: 0.3rem 0.1rem; }
}

@media screen and (max-width: 1200px) {
    .upgrade-cont { flex-wrap: wrap; gap: 0.3rem; padding: 0.3rem; }
    .pw980 .current-item { max-width: 276px; padding: 0.7rem 0; }
    .current-item { max-width: 100%; padding: 0; }
    .current-group { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
    .current-group>div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }
    .upgrade-item { width: 31%; padding: 0.3rem 0.2rem; }
    .current-price, .current-title { display: inline-block; }
    .current-lists { margin-top: 0rem; }
    .current-lists li { display: inline-block; margin-right: 0.2rem; }
    .current-lists p { width: auto; }

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

@media screen and (max-width: 1000px) {
    .news-tab p { padding: 0.2rem 0.48rem; }
}

@media screen and (max-width: 980px) {
    .upgrade-cont { gap: 0.4rem 3%; border: none; }
    .upgrade-cont.pw980 { justify-content: center; gap: 0.4rem 3%; }
    .upgrade-item { width: 48%; max-width: 100%; }

    .news-tab { display: none; }
    .news-lists, .news-lists.active { display: block; }
    .news-lists-title { display: block; margin-top: 0.4rem; font-weight: 600; }
    .news-item { max-width: 100%; margin-top: 0.4rem; }
}

@media screen and (max-width: 750px) {
    .upgrade-item { max-width: 390px; width: 100%; padding: 0.3rem; }
    .payinfo-item { max-width: 100%; }

    .upgrade-news, .pay-lists, .upgrade-cont, .compare-info { width: 90%; }

    table { border: 1px solid rgba(158, 98, 255, 0.21); }
    td { padding: 0.1rem 0.04rem; }
    .fs-product img { margin-right: 0.1rem; }
    .ft32 { font-size: clamp(20px, 0.32rem, 64px); }

    .faq-title { padding-right: 32px; }
    .faq-title::after { width: 24px; height: 24px; }
    .banner-title { line-height: 1.5; }

    .pw980 .current-item { max-width: 100%; padding: 0; }
    .pw980 .hot-item { max-width: 390px; width: 100%; }
    
    .current-group { flex-direction: column; align-items: flex-start; }
    .current-group>div { flex-direction: column; align-items: flex-start; gap: 0; }
    .current-device { margin: 0.2rem 0; }
    .upgrade-lists li { margin-top: 0.2rem; }
}