/* 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;}
.ft52 { font-size: clamp(32px, 0.52rem, 104px); }
.ft43 { font-size: clamp(28px, 0.43rem, 86px); }
.ft42 { font-size: clamp(22px, 0.42rem, 84px); }
.ft32 { font-size: clamp(22px, 0.32rem, 64px); }
.ft27 { font-size: clamp(21px, 0.27rem, 54px); }
.ft26 { font-size: clamp(20px, 0.26rem, 52px); }
.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; }
.mt60 { margin-top: 0.6rem; }
h2 { color: #e6e6e6; text-align: center; font-weight: 600; }
.alc { text-align: center; }
.month, .monthbasic { display: none; }
body { background-color: #080808; }

/* sec1 */
.sec1 { background: url(../img/pricing-banner-bgimg.png) top center no-repeat; background-size: 100% 100%; 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; opacity: 0.8; margin-top: 0.1rem; }
.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(https://focusee.imobie-resource.com/upgrade/img/current-list-icon.svg); background-size: cover; }
.current-lists p { color: #333; font-size: inherit; width: calc(100% - 25px); display: inline-block; }

.hotimg { position: absolute; top: -0.24rem;}
.tab-lists { max-width: 300px; width: 96%; display: flex; margin: 0 auto; border-radius: .87rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.21); }
.tab-lists p { color: #e6e6e6; width: 50%; text-align: center; padding: 0.045rem 0; border-radius: .58rem; cursor: pointer; font-weight: 400; position: relative; }
.tab-lists p:hover { background: #8A4BEE; }
.tab-lists p.active { background: #8A4BEE; color: #f5f5f5; font-weight: 600; }
.upgrade-cont { max-width: 1360px; width: 96%; margin: 0.5rem auto 0; display: flex; align-items: flex-end; box-sizing: border-box; gap: 0.32rem; position: relative; padding: 0.3rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, 0.05); background: linear-gradient(180deg, rgba(128, 67, 255, 0.12) 0%, rgba(128, 67, 255, 0.00) 50%, rgba(128, 67, 255, 0.12) 100%); backdrop-filter: blur(42px);}
/* .upgrade-item { max-width: 400px; width: 32%; box-sizing: border-box; padding: 0.4rem; text-align: center; border-radius: .3rem; border: 1px solid rgba(255, 255, 255, 0.24); background: linear-gradient(180deg, #292339 1.45%, #0F0C16 73.34%); } */
.upgrade-item { max-width: 400px; width: 32%; box-sizing: border-box; padding: 0.4rem; text-align: center; border-radius: .3rem; background: linear-gradient(180deg, #292339 1.45%, #0F0C16 73.34%); border: 1px solid transparent; background: linear-gradient(180deg, #292339 1.45%, #0F0C16 73.34%) padding-box, linear-gradient(180deg, #43404D, #232029) border-box; }
.upgrade-plan { color: #F5F5F5; font-weight: 700; margin-bottom: 0.12rem; }
.upgrade-des { color: #e6e6e6; }
.upgrade-title { color: #F5F5F5; font-weight: 600; line-height: 1.5; }
.upgrade-price { color: #f5f5f5; margin: 0.07rem auto; }
.upgrade-price b { font-weight: 600; display: inline-block; background: linear-gradient(180deg, #FFDAAF 0%, #FFAD4C 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.upgrade-price del { color: rgba(245, 245, 245, 0.80); margin-left: 0.1rem; display: inline-block; }
a.upgrade-btn { color: #F5F5F5; font-weight: 500; text-decoration: none; display: inline-block; max-width: 100%; width: 100%; text-align: center; padding: 0.1rem 0; margin: 0.08rem 0; box-sizing: border-box; border-radius: 10px; background: linear-gradient(13deg, rgba(70, 0, 183, 0.50) 7.58%, rgba(158, 98, 255, 0.50) 93.27%); box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.25) inset; }
a.upgrade-btn:hover { background: linear-gradient(13deg, #5000D1 7.58%, #AD7AFF 93.27%); box-shadow: 0 27px 42px 0 rgba(77, 50, 255, 0.15), 0 6.031px 9.381px 0 rgba(159, 50, 255, 0.15), 0 2px 0 0 rgba(255, 255, 255, 0.55) inset;}
/* .upgrade-item.hot-item { position: relative; max-width: 440px; width: 36%; border: 2px solid #9E62FF; background: linear-gradient(180deg, #292339 1.45%, #0F0C16 73.34%); } */
.upgrade-item.hot-item { position: relative; max-width: 440px; width: 36%; border: 2px solid transparent; background: linear-gradient(180deg, #292339 1.45%, #0F0C16 73.34%) padding-box, linear-gradient(180deg, #9E62FF, #2C1E45) border-box;}
.popular-img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.hot-item a.upgrade-btn { border-radius: 10px; background: linear-gradient(13deg, #4600B7 7.58%, #9E62FF 93.27%); box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.55) inset; color: #fff; border: none; }
.hot-item a.upgrade-btn:hover { background: linear-gradient(13deg, #5000D1 7.58%, #AD7AFF 93.27%); box-shadow: 0 27px 42px 0 rgba(77, 50, 255, 0.15), 0 6.031px 9.381px 0 rgba(159, 50, 255, 0.15), 0 2px 0 0 rgba(255, 255, 255, 0.55) inset; }
.upgrade-total { color: #FFC0A3; width: 100%; position: relative; overflow: hidden; font-weight: 500; }
.upgrade-total.dsn { opacity: 0; }
.upgrade-total::before { display: inline-block; width: calc((100% - 200px) / 2); height: 2px; content: ""; background: linear-gradient(to right, rgba(255, 195, 152,0), rgba(255, 195, 152, 1)); vertical-align: middle; margin-right: 0.06rem; }
.upgrade-total::after { display: inline-block; width: calc((100% - 200px) / 2); height: 2px; content: ""; background: linear-gradient(to right, rgba(255, 195, 152, 1), rgba(255, 195, 152,0)); vertical-align: middle;  margin-left: 0.06rem; }
.upgrade-refund { margin-bottom: 0.24rem; color: #bfbfbf; }
.upgrade-save { position: relative; border-radius: .26rem; background: url(../img/pricing-save-bgimg.png) top center no-repeat; color: #FFC0A3; font-weight: 500; max-width: 179px; background-size: cover; width: 100%; padding: 0.12rem 0; margin: 0 auto; overflow: hidden; }
.upgrade-refund img { display: inline-block; vertical-align: middle; margin-top: -0.03rem; }

.upgrade-lists { margin: 0; min-height: 1.48rem; width: 100%; text-align: left; min-height: 2.15rem; }
.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: #e6e6e6; 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-tip { border-radius: .88rem; background: linear-gradient(90deg, rgba(255, 195, 152, 0.30) 0%, rgba(255, 195, 152, 0.00) 100%); padding: 0.04rem 0.08rem; text-align: left; color: #501900; margin-top: 0.24rem; }
.list-title { color: #e6e6e6; font-weight: 500; }
.nav-item { cursor: pointer; }
.year-plan { position: relative; }
.year-plan img { position: absolute; right: 0; top: -50%; }
.product-info { min-height: 1.25rem; display: flex; flex-direction: column; min-height: 2.45rem; }

.upgrade-lists li::before { display: inline-block; vertical-align: top; margin-top: .02rem; margin-right: 0.08rem; content: ""; width: 16px; height: 17px; background: url(../img/list_icon.svg); background-size: cover; }
.upgrade-lists .function-lists::before { display: none; }
.function-lists dd { margin-top: 0.2rem; font-size: inherit; }
.function-lists dd::before { display: inline-block; vertical-align: top; margin-top: .03rem; margin-right: 0.08rem; content: ""; width: 16px; height: 16px; background: url(https://focusee.imobie-resource.com/upgrade/img/function-list-icon.svg); background-size: cover; }
.function-lists dd.normal-icon::before { background: url(../img/list_icon.svg); background-size: cover; width: 16px; height: 17px; margin-top: .02rem; }
.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: 260px; box-sizing: border-box; padding: 8px 10px; font-size: 12px; text-align: left; background-color: rgba(245, 245, 245, 0.12); backdrop-filter: blur(10px); border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); bottom: 36px; left: -160px; color: #fff; }
.icon_tips i::before { content: ""; display: inline-block;  border: 8px solid transparent; border-top-color: rgba(245, 245, 245, 0.12); position: absolute; bottom: -16px; left: 160px; backdrop-filter: blur(10px); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); }
.icon_tips::after { color:rgba(245, 245, 245, 0.3); font-size: 14px; vertical-align: top; cursor: pointer; display: inline-block; margin-top: -5px; font-weight: normal;  }
.icon_tips:hover i { display: block; font-weight: normal; }

.edu_cont { max-width: 6.2rem; width: 96%; border-radius: .12rem; background: #FCF6F2; text-align: center; padding: 0.16rem 0; margin: 0.6rem auto 0; }
.edu_cont img{ display: inline-block ; vertical-align: middle; margin-right: 0.15rem;  }
.edu_cont a{color: #4B4B4B; font-size: 16px; font-weight: 500; text-decoration: none; vertical-align: middle;}
.edu_cont a::after{display: inline-block;margin-left: 15px; vertical-align: middle; content: "\e920";font-family: "iconfont";font-size: 12px;color: inherit;transition:transform .3s;}
.edu_cont a:hover::after{transform: translateX(5px);}


/* sec2 */
.paymethod-title { color: #e6e6e6; text-align: center; font-weight: 500; }
.pay-method { position: relative; text-align: center; padding: 0.18rem 0 0.1rem; margin: 0.2rem auto 0.3rem; }
.pay-method img { vertical-align: middle; max-width: 6.02rem; width: 90%;}
.pay-lists { max-width: 1280px; width: 96%; margin: 0 auto; display: flex; justify-content: center; gap: 0.4rem; }
.payinfo-item { max-width: 2.9rem; width: 100%; text-align: center; display: flex; align-items: center; }
.payinfo-text { text-align: left; margin-left: 0.12rem; }
.payinfo-title { color: #e6e6e6; font-weight: 500; margin: 0.06rem auto; }
.payinfo-des { color: #BFBFBF; }
.payinfo-des a { color: #000; text-decoration: underline; font-size: inherit; }
.pay-other { max-width: 1200px; width: 96%; margin: 0.8rem auto 0; border-radius: .12rem; background: #FCF6F2; text-align: center; padding: 0.16rem 0; cursor: pointer; }
.pay-other p { color: #4B4B4B; font-weight: 500; padding: 0 0.4rem; }
.pay-other p svg { display: inline-block; vertical-align: middle; margin-top: -2px; }
.pay-other:hover { background-color: #FFECE0; }
.pay-other:hover svg { animation: actfloat 1.5s linear infinite; }

@keyframes actfloat {
    25% {
        transform: translateY(-3px);
    }
    50%, 100% {
        transform: translateY(0px);
    }
    75% {
        transform: translateY(3px);
    }
}

/* sec3 */
.sec3 { padding: 2rem 0 0; margin-top: -1.1rem; position: relative; }
.sec3::after { content: ""; display: block; background: url('../img/pricing-sec3-bgimg.png') no-repeat; background-size: cover; background-position: top center; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; transition: all 1s ease-in-out;}
.sec3_bg_show::after { opacity: 1;}
.compare-box { max-width: 1400px; width: 96%; margin: 0.7rem auto 0; padding: 0.4rem 0.6rem; box-sizing: border-box; background: url(../img/pricing-table-bgimg.png) top center no-repeat; background-size: 100% 100%; border-radius: 0.4rem; }
.compare-table { max-width: 1280px; width: 100%; position: relative; }
.compare-table .bgcolor1 { position: absolute; left: calc((var(--col) - 0) * (100% / var(--cols)) - 1%); border-radius: .3rem .3rem 0 0; background: linear-gradient(189deg, rgba(255, 255, 255, 0.10) 7.76%, rgba(255, 255, 255, 0.00) 94.22%); backdrop-filter: blur(2px); width: 26%; z-index: 0; height: 100%; top : -1px; }
.compare-table .bgcolor2 { position: absolute; left: calc((var(--col) - 2) * (100% / var(--cols)) - 6%); border-radius: .3rem .3rem 0 0; background: linear-gradient(189deg, rgba(255, 255, 255, 0.10) 7.76%, rgba(255, 255, 255, 0.00) 94.22%);backdrop-filter: blur(2px); width: 26%; z-index: 0; height: 100%; top : -1px;}
.compare-table .bgcolor3 { position: absolute; left: calc((var(--col) - 1) * (100% / var(--cols)) - 3.5%); border-radius: .3rem .3rem 0 0; backdrop-filter: blur(2px); width: 26%; z-index: 0; height: 100%; top: -1px; background: linear-gradient(13deg, rgba(158, 98, 255, 0.05) 12.2%, rgba(70, 0, 183, 0.60) 63.61%, rgba(158, 98, 255, 0.60) 99.45%); }
table { border-collapse: separate; border-spacing: 0; position: relative; }
/* .table1 thead td { border-radius: 0.2rem 0.2rem 0 0; padding: 0.3rem 0; border: 1px solid #34343D; border-left: none; background: #111; } */
/* .table1 table { border-radius: 0.2rem 0.2rem 0 0; border: 1px solid #34343D; border-bottom: none; } */
.table1 td.border-line { border-radius: 0.2rem 0.2rem 0 0; padding: 0.3rem 0; }
.table2 table { max-width: 100%; width: 100%; }
/* .table2 td.border-line { border-top: 0; border-bottom: 1px solid #E6DAFA; } */
.table2 td.border-line.border-bottom { border-radius: 0 0 0.2rem 0.2rem; }
.table-plan { font-weight: 600; color: #e6e6e6; }
.table-price { font-weight: 400; margin: 0.12rem auto; background: linear-gradient(180deg, #FFDAAF 0%, #FFAD4C 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.table-price span { background: linear-gradient(180deg, #FFDAAF 0%, #FFAD4C 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #000; font-weight: 600; }
.thead-box button { border-radius: .1rem; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.00) 100%); padding: 0.085rem 0rem; cursor: pointer; max-width: 2.6rem; width: 100%;transition: all .3s ease-in-out; color: #e6e6e6; }
.table2 table tr td:last-child { border-right: 1px solid #34343D; }
.thead-box button:hover { transform: translateY(-5px); transition: all .3s ease-in-out; }
.border-line .thead-box button { border: none; color: #fff; padding: 0.105rem 0; border: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.00) 100%); }
.table1 { border-radius: 0.3rem 0.3rem 0 0; border: 1px solid #34343D; border-bottom: none; }
.table1.sticky { position: sticky; top: 70px; z-index: 2; background: #111; border-radius: unset; }
.table2 td { padding: 0.12rem 0.16rem; border-top: 1px solid #34343D; color: #E6E6E6; text-align: center; }
.table2 td.clb3 { color: #B3B3B3; border-right: 1px solid #34343D; border-bottom: none; }
.thead-title {border: 1px solid #34343D; position: relative; z-index: 0; }
.table2 table:first-child .thead-title td { border-top: none; }
.table2 table .thead-title td { position: relative; }
.table2 table .thead-title td:first-child::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background: #111; }
.thead-title td { padding: 0.12rem 0.16rem; color: #B3B3B3; }
.thead-title td.border-line { border-bottom: none; }
.toggle-down { cursor: pointer; color: #000; font-weight: 600; }
.table2 td.toggle-down:hover { color: #fff; }
.toggle-down::before { display: inline-block; content: "\e90f"; transform: rotateZ(90deg); margin-right: 0.1rem; font-size: 12px; font-family: "iconfont"; }
.special-font { background: linear-gradient(-45deg, #009DFF, #A100FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; }
.thead-title td.special-font { border-right: 1px solid #34343D; }
.special-font svg { display: inline-block; margin-top: -0.2rem; }
.hover-tip { font-weight: 500; position: relative; }
.hover-tip .tips { width: 270px; position: absolute; background-color: #fff; border-radius: 0.1rem; padding: 0.1rem; z-index: 1; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); display: none; text-align: left; bottom: 70%; left: 0; }
.hover-tip:hover .tips { display: block; }
.ishide .toggle-down::before { transform: rotateZ(-90deg); }
.border-none.hover-tip .tips { right: 0.06rem; left: auto; width: 300px; }
.table-last { border-radius: 0 0 0.2rem 0.2rem; }
.table2:last-child { border: 1px solid #34343D; border-radius: 0 0 0.2rem 0.2rem; border-right: none; }
.table2 .table-last { border: 1px solid #34343D; }
.table2 .table-last tr td:last-child { border-right: none; }


/* sec4 */
.sec4 { margin-top: 1.2rem; }
.offer-info { max-width: 1360px; width: 96%; margin: 0 auto; }
.offer-des { margin-top: 0.12rem; text-align: center; opacity: 0.8; background: linear-gradient(180deg, #FFF 0%, #626262 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.offer-lists { display: flex; gap: 0.32rem; margin-top: 0.3rem; }
.offet-item { max-width: 6.64rem; width: 96%; text-align: center; border-radius: .3rem; padding: 0.4rem; border: 2px solid #131313; background: linear-gradient(180deg, rgba(190, 149, 255, 0.10) -6.62%, rgba(190, 149, 255, 0.00) 73.34%), linear-gradient(180deg, rgba(22, 23, 26, 0.40) 0%, rgba(8, 8, 8, 0.40) 100%); backdrop-filter: blur(19px); position: relative; z-index: 2; }
.offet-item h3 { color: #e6e6e6; font-weight: 600; margin: 0.24rem auto 0.17rem; }
.offet-item a { background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(158, 98, 255, 1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.offet-item span { font-weight: 600; }
.offet-item a::after { content: "\e900"; font-family: 'iconfont'; font-size: 12px; margin-left: 0.04rem; }
.offet-item a:hover::after { margin-left: 0.1rem; transition: all .3s ease-in-out; }
/* sec5 */
.sec5 { padding-bottom: 1.2rem; margin-top: 1.2rem; background: url(../img/pricing-sec5-bgimg.png) top center no-repeat; background-size: 100% 100%; }
.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: .2rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(28, 28, 28, 0.40); padding: 0.24rem 0.2rem; cursor: pointer; }
.faq-title { color: #fff; 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-lists li:hover { border: 1px solid #9E62FF; }
.faq-lists li:hover .faq-title::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: rgba(255, 255, 255, 0.7); display: none; margin-top: 0.12rem; }


#cn .pay-method { background: url(../img/paymethod-borderimg-pricing.png) top center no-repeat; background-size: cover; max-width: 18.32rem; width: 94%; margin: 0.2rem auto 0.4rem;}
#cn .pay-method img { max-width: 5.22rem; width: 100%; }

@media screen and (max-width: 1400px) {
    .table1 thead td { padding: 0.18rem 0; }
    .table1 td.border-line { padding: 0.18rem 0; }
}


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

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

    .news-lists { gap: 0.4rem; }
    .news-item { max-width: 48%; }
    .table-price { min-height: 60px; }
    .table-price span { display: block; }
    .thead-box button { max-width: 80%; }
}

@media screen and (max-width: 980px) {
    .upgrade-item.hot-item { width: 45%; }
    .upgrade-cont { flex-wrap: wrap; justify-content: center; }
    .upgrade-item { padding: 0.3rem 0.1rem; width: 45%; }

    .table2 td { padding: 0.15rem 0.06rem; }
    .table1 .ft26 { font-size: clamp(20px, 0.2rem, 52px); }
    .table1.sticky { top: 102px; }
}

@media screen and (max-width: 750px) {
    .upgrade-item, .upgrade-item.hot-item { max-width: 440px; width: 100%; padding: 0.5rem 0.36rem; }
    .product-info { min-height: auto; }
    .upgrade-save {  border: 1px solid transparent; background-size: contain;}
    a.upgrade-btn { margin: 0.4rem auto 0.08rem; padding: 0.14rem 0; }
    .hot-item a.upgrade-btn { padding: 0.18rem 0; }
    .upgrade-refund { margin-bottom: 0.4rem; }
    .upgrade-cont, .offer-info, .banner-text, .pay-lists, .upgrade-news, .faq-info { width: 90%; }
    .edu_cont { padding: 0.2rem; }

    .payinfo-item { max-width: 100%; }

    .news-item { max-width: 100%; }
    .upgrade-lists li { margin-top: 0.2rem; }

    .table1 { position: relative; top: 0; }
    .offer-lists { flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
    .compare-table { overflow-x: auto; padding-top: 0; }
    .compare-table>div { width: 750px; }
    .special-font svg { position: absolute; top: 0.2rem; }
    .thead-box button:hover { transform: translateY(0); }
    .toggle-down:hover { color: inherit; }
    .sec3 { padding: 1rem 0 0; margin-top: 0; }
    .sec3::after { display: none; }
    .compare-box { padding: 0; background: none; }
    .compare-table .bgcolor1, .compare-table .bgcolor2, .compare-table .bgcolor3, .compare-table .bgcolor4 { display: none; }

    .tab-lists { margin: 0.2rem auto 0; }
    .tab-lists p { padding: 0.09rem 0; }
    .upgrade-price { margin: 0.14rem auto; }
    .upgrade-total { margin-bottom: 0.1rem; }
    .upgrade-cont { border: none; background: none; }
    .upgrade-cont { padding: 0; }
    .hotimg { top: -60%; }
}

@media screen and (max-width: 568px) {
    .year-plan img { top: -80%; }
    .faq-title::after { padding: 0.12rem; font-size: 12px; }
    .faq-title { padding-right: 32px; }
    .function-lists dd::before { margin-top: 3px; }
    .upgrade-lists li::before { margin-top: 2px; }
    .table2 td { padding: 0.3rem 0.2rem; }
    .hover-tip .tips { left: 0.1rem; }
}

@media screen and (max-width: 390px) {
    .upgrade-save { background-position: 16px; }
}