/*
Theme name: BitBrowser
Author: Me
Author URI: https://www.net.cn/
*/
@media screen and (min-width: 993px) {
    :root {
        --module-title-size:30px;
        --home-banner-title-size: 46px;
        --home-banner-sub-title-size: 20px;
        --home-what-cando-title-size: 20px;
        --home-what-cando-text-size: 16px;
        --home-bte5-card-text-size: 32px;
        --home-bte5-button-text-size: 35px;
        --download-banner-title-size: 46px;
        --download-banner-sub-title-size: 24px;
        --download-apply-title-size: 40px;
        --download-apply-sub-title-size: 14px;
        --download-version-title-size: 24px;
        --download-version-text-size: 16px;
        --agent-banner-title-size: 46px;
        --agent-banner-subtitle-size: 25px;
        --agent-occupation-title-size: 40px;
        --about-module-title: 40px;
        --about-banner-title-size: 40px;
        --about-banner-text-size: 16px;
        --concat-use-banner-title-size: 46px;
        --concat-use-banner-text-size: 30px;
        --concat-use-text-size: 14px;
        --store-banner-title-size: 40px;
        --friend-banner-title-size: 46px;
        --phone-title-size: 40px;
        --q-m-lg: 120px
    }
}

@media screen and (max-width: 992px) {
    :root {
        --module-title-size:30px;
        --home-banner-title-size: 24px;
        --home-banner-sub-title-size: 16px;
        --home-what-cando-title-size: 16px;
        --home-what-cando-text-size: 16px;
        --home-bte5-card-text-size: 16px;
        --home-bte5-button-text-size: 20px;
        --home-banner-text-line-height: 24px;
        --download-banner-title-size: 24px;
        --download-banner-sub-title-size: 24px;
        --download-apply-title-size: 24px;
        --download-apply-sub-title-size: 14px;
        --download-version-title-size: 15px;
        --download-version-text-size: 13px;
        --agent-banner-title-size: 30px;
        --agent-banner-subtitle-size: 18px;
        --agent-occupation-title-size: 30px;
        --about-module-title: 24px;
        --about-banner-title-size: 18px;
        --about-banner-text-size: 14px;
        --concat-use-banner-title-size: 25px;
        --concat-use-banner-text-size: 16px;
        --concat-use-text-size: 14px;
        --store-banner-title-size: 30px;
        --friend-banner-title-size: 24px;
        --q-m-lg: 60px
    }
}

/*
@font-face{font-family:Inter;src:url("fonts/Inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/Inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/Inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/Inter-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
*/
html {
    scroll-behavior: smooth
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    color: #333;
    line-height: 1.6;
    background: #f5f7fa
}

header {
    position: sticky;
    top: 0;
    z-index: 999;
}

li {
    list-style: none
}

.banner-sub-container .text-list li[data-v-6eecdd9c] {
    border: 1px solid #fff;
    border-radius: 8px;
    box-shadow: 0 8px 40px #1011471a;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    height: 56px;
    line-height: 56px;
    min-width: 208px;
    padding: 0 20px;
    position: absolute;
    text-align: center
}

.banner-sub-container .text-list li[data-v-6eecdd9c]:first-child {
    background: #3370ff;
    border: 1px solid #fff;
    left: 71px;
    top: 40px;
    transform: rotate(11.78deg)
}

.banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(2) {
    background: #593cff;
    left: -23px;
    top: 166px;
    transform: rotate(-8.48deg)
}

.banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(3) {
    background: #ff6060;
    left: -9px;
    top: 291px;
    transform: rotate(-22.49deg)
}

.banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(4) {
    background: #209e91;
    right: 1px;
    top: 58px;
    transform: rotate(-12.39deg)
}

.banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(5) {
    background: #fb9247;
    right: 112px;
    top: 155px;
    transform: rotate(12.36deg)
}

.banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(6) {
    background: #00b8eb;
    right: 32px;
    top: 256px;
    transform: rotate(13.41deg)
}

.banner-sub-container[data-v-6eecdd9c] {
    position: relative
}

.banner-sub-container img[data-v-6eecdd9c] {
    margin-top: -207px
}

.banner-sub-container img {
    margin-top: -107px
}

.navbar {
    background: 0 0;
    border-bottom: 1px solid rgba(0,0,0,.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all .3s ease
}

.navbar.scrolled {
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,.05)
}

.linear-font {
    background: linear-gradient(90deg,#165fff -1.1%,#a53fff 99.77%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #2a3142;
    font-size: 46px;
    font-weight: 600
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px
}

.logo img {
    height: 32px
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
    color: #333
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center
}

.nav-menu a {
    text-decoration: none;
    color: #666;
    font-size: 14px;
    transition: color .3s
}

.nav-menu a:hover {
    color: #5b7cff
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px
}

.lang-btn {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    color: #666
}

.login-btn {
    padding: 8px 20px;
    background: #5b7cff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease
}

.login-btn:hover {
    background: #4a6bef
}

.mobile-menu-btn {
    display: none;
    background: 0 0;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 5px;
    z-index: 1001
}

.mobile-menu-btn.active {
    color: #5b7cff
}

@media screen and (max-width: 1024px) {
    .nav-menu.mobile-active {
        display:flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 20px;
        gap: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,.1);
        border-top: 1px solid rgba(0,0,0,.1)
    }

    .nav-menu.mobile-active li {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0
    }

    .nav-menu.mobile-active li:last-child {
        border-bottom: none
    }

    .nav-menu.mobile-active a {
        display: block;
        font-size: 15px;
        padding: 8px 0
    }

    .nav-right.mobile-active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 200px);
        left: 0;
        right: 0;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 20px;
        gap: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,.1);
        border-top: 1px solid rgba(0,0,0,.1)
    }

    .nav-right.mobile-active .lang-btn,.nav-right.mobile-active .login-btn {
        width: 100%;
        text-align: center
    }
}

.hero {
    height: 664px;
    position: relative;
    align-items: center
}

.hero-container {
    margin: auto!important;
    max-width: 1240px!important;
    width: 96%!important;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    height: 100%;
    left: 50%;
    padding-top: 110px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 10
}

.hero-left {
    width: 52%
}

.hero-left h1 {
    font-size: 42px;
    color: #1a1a2e;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.3
}

.hero-left h1 .highlight {
    color: #5b7cff
}

.hero-left h2 {
    color: #2a3142;
    font-size: var(--home-banner-title-size);
    font-weight: 600
}

.hero-left p {
    font-size: 24px;
    margin-bottom: 40px
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px
}

.btn-download {
    padding: 14px 32px;
    background: #5b7cff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease
}

.btn-download:hover {
    background: #4a6bef;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(91,124,255,.3)
}

.btn-register {
    padding: 14px 32px;
    background: #fff;
    color: #5b7cff;
    border: 1px solid #5b7cff;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease
}

.btn-register:hover {
    background: #5b7cff;
    color: #fff
}

.hero-stats {
    display: flex;
    gap: 30px;
    font-size: 13px;
    color: #999
}

.hero-right {
    position: relative;
    width: 48%
}

.hero-cards {
    position: relative;
    height: 400px
}

.feature-card-float {
    position: absolute;
    background: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap
}

.card-1 {
    background: #5b7cff;
    top: 10px;
    left: 10px;
    transform: rotate(-15deg)
}

.card-2 {
    background: #00c48c;
    top: 30px;
    right: 20px;
    transform: rotate(15deg)
}

.card-3 {
    background: #7c5cff;
    top: 120px;
    left: 5px;
    transform: rotate(-20deg)
}

.card-4 {
    background: #ff6b6b;
    top: 140px;
    right: 10px;
    transform: rotate(18deg)
}

.card-5 {
    background: #ffa94d;
    top: 250px;
    left: 15px;
    transform: rotate(-12deg)
}

.card-6 {
    background: #00d4ff;
    top: 270px;
    right: 15px;
    transform: rotate(14deg)
}

.rating-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd
}

.dot.active {
    background: #5b7cff
}

.dot.orange {
    background: #ffa94d
}

.dot.yellow {
    background: #ffd93d
}

.section {
    padding: 80px 20px
}

.section.gray {
    background: #f5f7fa
}

.container {
    max-width: 1200px;
    margin: 0 auto
}

.section-title {
    font-size: 40px;
    font-weight: 600!important;
    color: #2a3142!important;
    text-align: center
}

.section-subtitle {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 50px
}

.intro-content {
    background: 0 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 40px
}

.intro-content h3 {
    font-size: 16px;
    color: #5b7cff;
    margin-bottom: 15px;
    font-weight: 600
}

.intro-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 12px
}

.intro-content ul {
    list-style: none;
    padding-left: 0
}

.intro-content ul li {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px
}

.intro-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #5b7cff;
    font-weight: 700
}

.fingerprint-diagram {
    position: relative;
    width: 100%;
    margin: 50px auto;
    height: 500px
}

.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10
}

.center-logo img {
    width: 75px;
    height: 75px
}

.banner-sub-container img {
    margin-top: -107px
}

.fingerprint-diagram img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 90%;
    height: auto
}

.param-tag {
    position: absolute;
    background: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: #333;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.08)
}

.why-section {
    padding: 160px 20px;
    background: #f5f7fa
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 50px
}

.why-card {
    background: 0 0;
    border-radius: 0;
    padding: 20px 0;
    text-align: center;
    box-shadow: none;
    transition: all .3s ease
}

.why-card:hover {
    transform: none;
    box-shadow: none
}

.why-icon {
    width: 60%;
    height: auto;
    margin: 0 auto 20px
}

.why-icon img {
    width: 100%;
    height: auto;
    object-fit: contain
}

.why-card h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600
}

.why-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.8
}

.how-section {
    padding: 160px 20px;
    background: #fff
}

.how-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    margin-top: 50px
}

.how-steps {
    background: #f8f9fc;
    border-radius: 12px;
    padding: 30px
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0
}

.step-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

.step-number {
    width: 32px;
    height: 32px;
    background: #5b7cff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0
}

.step-content h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 600
}

.step-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.6
}

.how-image {
    position: relative
}

.how-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.1)
}

.testimonials {
    padding: 160px 20px;
    background: #f5f7fa
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 50px
}

.testimonial-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06)
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover
}

.testimonial-info h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
    font-weight: 600
}

.testimonial-info p {
    font-size: 13px;
    color: #999
}

.testimonial-stars {
    color: #ffa94d;
    font-size: 14px;
    margin-bottom: 15px
}

.testimonial-text {
    font-size: 14px;
    color: #666;
    line-height: 1.8
}

.news-section {
    padding: 160px 20px;
    background: #fff
}

.news-tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px
}

.news-tab {
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    transition: all .3s ease;
    font-weight: 600
}

.news-tab.active {
    color: #5b7cff;
    border-bottom-color: #5b7cff
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px
}

.news-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: all .3s ease
}

.news-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    border-color: #5b7cff
}

.news-card h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600
}

.news-card p {
    font-size: 13px;
    color: #999
}

.footer {
    background: #f5f7fa;
    padding: 30px 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    margin-bottom: 40px
}

.footer-section h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600
}

.footer-section ul {
    list-style: none
}

.footer-section ul li {
    margin-bottom: 12px
}

.footer-section a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color .3s
}

.footer-section a:hover {
    color: #5b7cff
}

.footer-bottom {
    text-align: center;
    color: #999;
    font-size: 13px
}

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5)
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-content {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15)
}

.modal-content h3 {
    font-size: 20px;
    color: #1a1a2e;
    margin-bottom: 15px;
    font-weight: 600
}

.modal-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center
}

.modal-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease
}

.modal-btn-cancel {
    background: #f0f0f0;
    color: #333
}

.modal-btn-cancel:hover {
    background: #e0e0e0
}

.modal-btn-confirm {
    background: #5b7cff;
    color: #fff
}

.modal-btn-confirm:hover {
    background: #4a6bef
}

@media screen and (max-width: 1024px) {
    .nav-menu {
        display:none
    }

    .mobile-menu-btn {
        display: block
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .hero-cards {
        height: 300px
    }

    .why-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .how-content {
        grid-template-columns: 1fr
    }

    .testimonial-grid {
        grid-template-columns: 1fr
    }

    .news-grid {
        grid-template-columns: 1fr
    }

    .footer-content {
        grid-template-columns: repeat(2,1fr)
    }
}

@media screen and (max-width: 768px) {
    .nav-container {
        padding:12px 15px;
        position: relative
    }

    .nav-menu {
        display: none
    }

    .nav-right {
        display: none
    }

    .mobile-menu-btn {
        display: block
    }

    .logo img {
        width: 28px;
        height: 28px
    }

    .logo-text {
        font-size: 16px
    }

    .nav-right {
        gap: 10px
    }

    .lang-btn {
        padding: 5px 10px;
        font-size: 12px
    }

    .login-btn {
        padding: 6px 16px;
        font-size: 13px
    }

    .hero {
        height: auto;
        min-height: 500px;
        padding: 80px 0 40px
    }

    .hero-container {
        position: relative;
        transform: none;
        left: auto;
        top: auto;
        padding-top: 20px;
        flex-direction: column;
        align-items: center;
        text-align: center
    }

    .hero-left {
        width: 100%;
        padding: 0 20px;
        margin-bottom: 30px
    }

    .hero-left h1 {
        font-size: 28px;
        margin-bottom: 12px
    }

    .hero-left h1.linear-font {
        font-size: 28px
    }

    .hero-left h2 {
        font-size: 20px;
        margin-bottom: 15px
    }

    .hero-left p {
        font-size: 16px;
        margin-bottom: 25px
    }

    .hero-buttons {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px
    }

    .btn-download,.btn-register {
        width: 100%;
        padding: 12px 24px;
        font-size: 14px
    }

    .hero-stats {
        flex-direction: column;
        gap: 8px;
        font-size: 12px
    }

    .hero-right {
        display: none;
        width: 100%;
        padding: 0 20px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c] {
        font-size: 12px;
        height: 40px;
        line-height: 40px;
        min-width: 140px;
        padding: 0 15px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:first-child {
        left: 20px;
        top: 20px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(2) {
        left: -15px;
        top: 100px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(3) {
        left: -5px;
        top: 180px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(4) {
        right: 5px;
        top: 30px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(5) {
        right: 60px;
        top: 100px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(6) {
        right: 15px;
        top: 170px
    }

    .banner-sub-container img {
        margin-top: -50px;
        width: 100%;
        height: auto
    }

    .section {
        padding: 50px 15px
    }

    .section-title {
        font-size: 24px;
        margin-top: 40px;
        margin-bottom: 30px
    }

    .section-subtitle {
        font-size: 14px;
        margin-bottom: 30px
    }

    .intro-content {
        margin-bottom: 30px
    }

    .intro-content h3 {
        font-size: 15px;
        margin-bottom: 12px
    }

    .intro-content p {
        font-size: 13px;
        margin-bottom: 10px
    }

    .why-section {
        padding: 50px 15px
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 30px
    }

    .why-card {
        padding: 15px 0
    }

    .why-icon {
        width: 50%;
        margin-bottom: 15px
    }

    .why-card h3 {
        font-size: 18px;
        margin-bottom: 12px
    }

    .why-card p {
        font-size: 13px
    }

    .how-section {
        padding: 50px 15px
    }

    .how-content {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 30px
    }

    .how-steps {
        padding: 20px
    }

    .step-item {
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 20px
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 13px
    }

    .step-content h4 {
        font-size: 15px;
        margin-bottom: 6px
    }

    .step-content p {
        font-size: 13px
    }

    .how-image img {
        max-width: 100%;
        height: auto
    }

    .testimonials {
        padding: 50px 15px
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px
    }

    .testimonial-card {
        padding: 20px
    }

    .testimonial-header {
        gap: 12px;
        margin-bottom: 15px
    }

    .testimonial-avatar {
        width: 45px;
        height: 45px
    }

    .testimonial-info h4 {
        font-size: 15px
    }

    .testimonial-info p {
        font-size: 12px
    }

    .testimonial-stars {
        font-size: 13px;
        margin-bottom: 12px
    }

    .testimonial-text {
        font-size: 13px
    }

    .news-section {
        padding: 50px 15px
    }

    .news-tabs {
        gap: 20px;
        margin-bottom: 30px;
        flex-wrap: wrap
    }

    .news-tab {
        font-size: 15px
    }

    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .news-card {
        padding: 15px
    }

    .news-card h4 {
        font-size: 15px;
        margin-bottom: 8px
    }

    .news-card p {
        font-size: 12px
    }

    .fingerprint-diagram {
        max-width: 100%;
        height: 300px;
        padding: 0;
        margin: 30px auto
    }

    .fingerprint-diagram img {
        max-width: 100%
    }

    .param-tag {
        font-size: 12px;
        padding: 6px 12px
    }

    .footer {
        padding: 40px 15px 20px
    }

    .footer-content {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
        margin-bottom: 30px
    }

    .footer-section h4 {
        font-size: 15px;
        margin-bottom: 15px
    }

    .footer-section a {
        font-size: 13px
    }

    .footer-bottom {
        padding-top: 20px;
        font-size: 12px
    }

    .modal-content {
        padding: 30px 20px;
        max-width: 90%;
        margin: 20px
    }

    .modal-content h3 {
        font-size: 18px;
        margin-bottom: 12px
    }

    .modal-content p {
        font-size: 13px;
        margin-bottom: 25px
    }

    .modal-buttons {
        flex-direction: column;
        gap: 10px
    }

    .modal-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px
    }
}

@media screen and (max-width: 480px) {
    .nav-container {
        padding:10px 12px
    }

    .logo img {
        width: 24px;
        height: 24px
    }

    .logo-text {
        font-size: 14px
    }

    .lang-btn {
        padding: 4px 8px;
        font-size: 11px
    }

    .login-btn {
        padding: 5px 12px;
        font-size: 12px
    }

    .hero {
        padding: 60px 0 30px
    }

    .hero-container {
        padding-top: 15px
    }

    .hero-left {
        padding: 0 15px;
        margin-bottom: 25px
    }

    .hero-left h1 {
        font-size: 24px;
        margin-bottom: 10px
    }

    .hero-left h1.linear-font {
        font-size: 24px
    }

    .hero-left h2 {
        font-size: 18px;
        margin-bottom: 12px
    }

    .hero-left p {
        font-size: 14px;
        margin-bottom: 20px
    }

    .btn-download,.btn-register {
        padding: 10px 20px;
        font-size: 13px
    }

    .hero-stats {
        font-size: 11px
    }

    .hero-right {
        padding: 0 15px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c] {
        font-size: 11px;
        height: 36px;
        line-height: 36px;
        min-width: 120px;
        padding: 0 12px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:first-child {
        left: 10px;
        top: 15px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(2) {
        left: -10px;
        top: 80px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(3) {
        left: -5px;
        top: 150px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(4) {
        right: 3px;
        top: 25px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(5) {
        right: 40px;
        top: 80px
    }

    .banner-sub-container .text-list li[data-v-6eecdd9c]:nth-child(6) {
        right: 10px;
        top: 145px
    }

    .section {
        padding: 40px 12px
    }

    .section-title {
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 25px
    }

    .section-subtitle {
        font-size: 13px;
        margin-bottom: 25px
    }

    .intro-content h3 {
        font-size: 14px;
        margin-bottom: 10px
    }

    .intro-content p {
        font-size: 12px;
        margin-bottom: 8px
    }

    .intro-content ul li {
        font-size: 12px
    }

    .why-section {
        padding: 40px 12px
    }

    .why-grid {
        gap: 20px;
        margin-top: 25px
    }

    .why-card {
        padding: 12px 0
    }

    .why-icon {
        width: 45%;
        margin-bottom: 12px
    }

    .why-card h3 {
        font-size: 16px;
        margin-bottom: 10px
    }

    .why-card p {
        font-size: 12px
    }

    .how-section {
        padding: 40px 12px
    }

    .how-content {
        gap: 25px;
        margin-top: 25px
    }

    .how-steps {
        padding: 15px
    }

    .step-item {
        gap: 10px;
        margin-bottom: 15px;
        padding-bottom: 15px
    }

    .step-number {
        width: 26px;
        height: 26px;
        font-size: 12px
    }

    .step-content h4 {
        font-size: 14px;
        margin-bottom: 5px
    }

    .step-content p {
        font-size: 12px
    }

    .testimonials {
        padding: 40px 12px
    }

    .testimonial-grid {
        gap: 15px;
        margin-top: 25px
    }

    .testimonial-card {
        padding: 15px
    }

    .testimonial-header {
        gap: 10px;
        margin-bottom: 12px
    }

    .testimonial-avatar {
        width: 40px;
        height: 40px
    }

    .testimonial-info h4 {
        font-size: 14px
    }

    .testimonial-info p {
        font-size: 11px
    }

    .testimonial-stars {
        font-size: 12px;
        margin-bottom: 10px
    }

    .testimonial-text {
        font-size: 12px
    }

    .news-section {
        padding: 40px 12px
    }

    .news-tabs {
        gap: 15px;
        margin-bottom: 25px
    }

    .news-tab {
        font-size: 14px
    }

    .news-grid {
        gap: 15px
    }

    .news-card {
        padding: 12px
    }

    .news-card h4 {
        font-size: 14px;
        margin-bottom: 6px
    }

    .news-card p {
        font-size: 11px
    }

    .fingerprint-diagram {
        max-width: 100%;
        height: 250px;
        margin: 25px auto;
        padding: 0
    }

    .fingerprint-diagram img {
        max-width: 100%
    }

    .center-logo {
        width: 70px;
        height: 70px
    }

    .center-logo img {
        width: 35px;
        height: 35px
    }

    .param-tag {
        font-size: 10px;
        padding: 4px 8px;
        white-space: normal;
        max-width: 60px
    }

    .footer {
        padding: 30px 12px 15px
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 25px
    }

    .footer-section h4 {
        font-size: 14px;
        margin-bottom: 12px
    }

    .footer-section a {
        font-size: 12px
    }

    .footer-bottom {
        padding-top: 15px;
        font-size: 11px
    }

    .modal-content {
        padding: 25px 15px;
        max-width: 95%;
        margin: 15px
    }

    .modal-content h3 {
        font-size: 16px;
        margin-bottom: 10px
    }

    .modal-content p {
        font-size: 12px;
        margin-bottom: 20px
    }

    .modal-btn {
        padding: 10px 18px;
        font-size: 13px
    }
}

.immersive-translate-input {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 2147483647;
    display: flex;
    justify-content: center;
    align-items: center
}

.immersive-translate-attach-loading::after {
    content: " ";
    --loading-color: #f78fb6;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
    box-sizing: border-box;
    animation: immersiveTranslateShadowRolling 1.5s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-2000%,-50%);
    z-index: 100;
    color: #fff
}

.immersive-translate-loading-spinner {
    vertical-align: middle!important;
    width: 10px!important;
    height: 10px!important;
    display: inline-block!important;
    margin: 0 4px!important;
    border: 2px rgba(221,244,255,.6) solid!important;
    border-top: 2px rgba(0,0,0,.375) solid!important;
    border-left: 2px rgba(0,0,0,.375) solid!important;
    border-radius: 50%!important;
    padding: 0!important;
    -webkit-animation: immersive-translate-loading-animation .6s infinite linear!important;
    animation: immersive-translate-loading-animation .6s infinite linear!important
}

@-webkit-keyframes immersive-translate-loading-animation {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(359deg)
    }
}

@keyframes immersive-translate-loading-animation {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

.immersive-translate-input-loading {
    --loading-color: #f78fb6;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
    margin: 12px auto;
    position: relative;
    color: #fff;
    left: -100px;
    box-sizing: border-box;
    animation: immersiveTranslateShadowRolling 1.5s linear infinite
}

@keyframes immersiveTranslateShadowRolling {
    0% {
        box-shadow: 0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)
    }

    12% {
        box-shadow: 100px 0 var(--loading-color),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)
    }

    25% {
        box-shadow: 110px 0 var(--loading-color),100px 0 var(--loading-color),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)
    }

    36% {
        box-shadow: 120px 0 var(--loading-color),110px 0 var(--loading-color),100px 0 var(--loading-color),0 0 rgba(255,255,255,0)
    }

    50% {
        box-shadow: 130px 0 var(--loading-color),120px 0 var(--loading-color),110px 0 var(--loading-color),100px 0 var(--loading-color)
    }

    62% {
        box-shadow: 200px 0 rgba(255,255,255,0),130px 0 var(--loading-color),120px 0 var(--loading-color),110px 0 var(--loading-color)
    }

    75% {
        box-shadow: 200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 var(--loading-color),120px 0 var(--loading-color)
    }

    87% {
        box-shadow: 200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 var(--loading-color)
    }

    100% {
        box-shadow: 200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0)
    }
}

.immersive-translate-toast {
    display: flex;
    position: fixed;
    z-index: 2147483647;
    left: 0;
    right: 0;
    top: 1%;
    width: fit-content;
    padding: 12px 20px;
    margin: auto;
    overflow: auto;
    background: #fef6f9;
    box-shadow: 0 4px 10px 0 rgba(0,10,30,.06);
    font-size: 15px;
    border-radius: 8px;
    color: #333
}

.immersive-translate-toast-content {
    display: flex;
    flex-direction: row;
    align-items: center
}

.immersive-translate-toast-hidden {
    margin: 0 20px 0 72px;
    text-decoration: underline;
    cursor: pointer
}

.immersive-translate-toast-close {
    color: #666;
    font-size: 20px;
    font-weight: 700;
    padding: 0 10px;
    cursor: pointer
}

.immersive-translate-dialog {
    position: fixed;
    z-index: 2147483647;
    left: 0;
    top: 0;
    display: flex;
    width: 300px;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    border-radius: 20px;
    background-color: #fff
}

.immersive-translate-modal {
    display: none;
    position: fixed;
    z-index: 2147483647;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0,0,0,.4);
    font-size: 15px
}

.immersive-translate-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 40px 24px 24px;
    border-radius: 12px;
    width: 350px;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    position: relative
}

@media screen and (max-width: 768px) {
    .immersive-translate-toast {
        top:0;
        padding: 12px 0 0 10px
    }

    .immersive-translate-toast-content {
        flex-direction: column;
        text-align: center
    }

    .immersive-translate-toast-hidden {
        margin: 10px auto
    }

    .immersive-translate-modal-content {
        margin: 25% auto!important
    }

    .immersive-translate-modal-body {
        max-height: 250px;
        overflow-y: auto
    }
}

@media screen and (max-width: 480px) {
    .immersive-translate-modal-content {
        width:80vw!important;
        margin: 20vh auto!important;
        padding: 20px 12px 12px!important
    }

    .immersive-translate-modal-title {
        font-size: 14px!important
    }

    .immersive-translate-modal-body {
        font-size: 13px!important;
        max-height: 60vh!important
    }

    .immersive-translate-btn {
        font-size: 13px!important;
        padding: 8px 16px!important;
        margin: 0 4px!important
    }

    .immersive-translate-modal-footer {
        gap: 6px!important;
        margin-top: 16px!important
    }
}

.immersive-translate-modal .immersive-translate-modal-content-in-input {
    max-width: 500px
}

.immersive-translate-modal-content-in-input .immersive-translate-modal-body {
    text-align: left;
    max-height: unset
}

.immersive-translate-modal-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #333
}

.immersive-translate-modal-body {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    margin-top: 24px;
    word-break: break-all
}

.immersive-translate-close {
    color: #666;
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 20px;
    font-weight: 700
}

.immersive-translate-close:focus,.immersive-translate-close:hover {
    text-decoration: none;
    cursor: pointer
}

.immersive-translate-modal-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px
}

.immersive-translate-btn {
    width: fit-content;
    color: #fff;
    background-color: #ea4c89;
    border: none;
    font-size: 14px;
    margin: 0 8px;
    padding: 9px 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .3s ease
}

.immersive-translate-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.immersive-translate-btn:hover {
    background-color: #f082ac
}

.immersive-translate-btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

.immersive-translate-btn:disabled:hover {
    background-color: #ea4c89
}

.immersive-translate-link-btn {
    background-color: transparent;
    color: #ea4c89;
    border: none;
    cursor: pointer;
    height: 30px;
    line-height: 30px
}

.immersive-translate-cancel-btn {
    background-color: #596b78
}

.immersive-translate-cancel-btn:hover {
    background-color: #415461
}

.immersive-translate-action-btn {
    background-color: transparent;
    color: #ea4c89;
    border: 1px solid #ea4c89
}

.immersive-translate-btn svg {
    margin-right: 5px
}

.immersive-translate-link {
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    text-decoration: none;
    color: #ea4c89;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1)
}

.immersive-translate-primary-link {
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    text-decoration: none;
    color: #ea4c89;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1)
}

.immersive-translate-modal input[type=radio] {
    margin: 0 6px;
    cursor: pointer
}

.immersive-translate-modal label {
    cursor: pointer
}

.immersive-translate-close-action {
    position: absolute;
    top: 2px;
    right: 0;
    cursor: pointer
}

.imt-image-status {
    background-color: rgba(0,0,0,.5)!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center!important;
    border-radius: 16px!important
}

.imt-image-status img,.imt-image-status svg,.imt-img-loading {
    width: 28px!important;
    height: 28px!important;
    margin: 0 0 8px 0!important;
    min-height: 28px!important;
    min-width: 28px!important;
    position: relative!important
}

.imt-img-loading {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMABBMIDyQXHwyBfFdDMSw+OjXCb+5RG51IvV/k0rOqlGRM6KKMhdvNyZBz9MaupmxpWyj437iYd/yJVNZeuUC7AAACt0lEQVRIx53T2XKiUBCA4QYOiyCbiAsuuGBcYtxiYtT3f6/pbqoYHVFO5r+iivpo6DpAWYpqeoFfr9f90DsYAuRSWkFnPO50OgR9PwiCUFcl2GEcx+N/YBh6pvKaefHlUgZd1zVe0NbYcQjGBfzrPE8Xz8aF+71D8gG6DHFPpc4a7xFiCDuhaWgKgGIJQ3d5IMGDrpS4S5KgpIm+en9f6PlAhKby4JwEIxlYJV9h5k5nee9GoxHJ2IDSNB0dwdad1NAxDJ/uXDHYmebdk4PdbkS58CIVHdYSUHTYYRWOJblWSyu2lmy3KNFVJNBhxcuGW4YBVCbYGRZwIooipHsNqjM4FbgOQqQqSKQQU9V8xmi1QlgHqQQ6DDBvRUVCDirs+EzGDGOQTCATgtYTnbCVLgsVgRE0T1QE0qHCFAht2z6dLvJQs3Lo2FQoDxWNUiBhaP4eRgwNkI+dAjVOA/kUrIDwf3CG8NfNOE0eiFotSuo+rBiq8tD9oY4Qzc6YJw99hl1wzpQvD7ef2M8QgnOGJfJw+EltQc+oX2yn907QB22WZcvlUpd143dqQu+8pCJZuGE4xCuPXJqqcs5sNpsI93Rmzym1k4Npk+oD1SH3/a3LOK/JpUBpWfqNySxWzCfNCUITuDG5dtuphrUJ1myeIE9bIsPiKrfqTai5WZxbhtNphYx6GEIHihyGFTI69lje/rxajdh0s0msZ0zYxyPLhYCb1CyHm9Qsd2H37Y3lugVwL9kNh8Ot8cha6fUNQ8nuXi5z9/ExsAO4zQrb/ev1yrCB7lGyQzgYDGuxq1toDN/JGvN+HyWNHKB7zEoK+PX11e12G431erGYzwmytAWU56fkMHY5JJnDRR2eZji3AwtIcrEV8Cojat/BdQ7XOwGV1e1hDjGGjXbdArm8uJZtCH5MbcctVX8A1WpqumJHwckAAAAASUVORK5CYII=");
    background-size: 28px 28px;
    animation: image-loading-rotate 1s linear infinite!important
}

.imt-image-status span {
    color: var(--bg-2,#fff)!important;
    font-size: 14px!important;
    line-height: 14px!important;
    font-weight: 500!important;
    font-family: "PingFang SC",Arial,sans-serif!important
}

.imt-primary-button {
    display: flex;
    padding: 12px 80px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #ea4c89;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    border: none;
    cursor: pointer
}

.imt-retry-text {
    color: #999;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    cursor: pointer
}

.imt-action-container {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.imt-modal-content-text {
    text-align: left;
    color: #333;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px
}

@keyframes image-loading-rotate {
    from {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0)
    }
}

.position {
    margin: 10px 0;
    color: #999;
    font-size: 13px
}

.position a {
    color: #999;
    font-size: 13px
}

.post-all h1 {
    font-size: 2em;
    text-align: center;
    color: #333;
}

.news-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem
}

#wps-list-img {
    display: block;
    width: 100%;
    height: 10rem;
    overflow: hidden;
    background-size: 100%;
    background-repeat: no-repeat
}

.news-list div {
    overflow: hidden;
    text-align: left;
    border: 1px solid #eee;
    border-radius: 10px;
}

.c-tit {
    font-size: 1.2rem;
    text-align: center;
    margin: 2rem 0
}

.atk-title {
    padding: 1rem;
    line-height: 1.8;
    background: #fafafa;
}

.atk-title strong {
    display: block;
    height: 1.5rem;
    line-height: 1.5rem;
    overflow: hidden;
    margin-bottom: .5rem
}

.atk-title a {
    font-size: 1rem;
    color: #333;
    text-decoration: none
}

.atk-title p {
    font-size: .8rem;
    color: #333;
}

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    width: 100%;
    justify-content: center;
    border-radius: .25rem;
    margin: 30px auto
}

.page-link,.page-num {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #08c;
    background-color: #fff;
    border: 1px solid #dee2e6
}

.page-num:not(:disabled) {
    cursor: pointer
}

.page-num-current {
    z-index: 1;
    color: #333;
    background-color: #246789;
    border-color: #5b39c98
}

.inf {
    font-size: .8rem;
    color: #666;
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0
}

.content {
    margin: auto;
    font-size: 1rem;
    line-height: 200%;
    color: #333;
    margin-bottom: 1rem
}

.content h2,.content h3,.content h4,.content h5 {
    line-height: 1.4;
    margin: 25px 0;
    padding: 0;
    color: #333;
    font-weight: 700;
    padding: 10px 0 10px 10px
}

.content h2,.content h3,.content h4,.content h5 {
    border-left: 5px solid #e5e6e0;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4
}

.content h3 {
    font-size: 18px
}

.content h4 {
    font-size: 15px
}

.content h5 {
    font-size: 14px
}

.content img {
    max-width: 100%;
    margin: auto;
    display: block
}

.content iframe {
    display: block;
    margin: auto;
    margin-top: .8rem;
    margin-bottom: .8rem;
    min-width: 660px;
    max-width: 660px;
    min-height: 400px;
    max-height: 400px
}

.content ol,.content ul {
    margin: 0 0 18px 15px
}

.content ul {
    list-style: disc
}

.content ol {
    list-style: decimal
}

.content li {
    margin-bottom: 6px
}

.content p {
    padding: 0 0 8px 0;
    word-wrap: break-word;
    font-size: 18px;
    line-height: 190%
}

.content pre {
    word-wrap: break-word
}

.content table {
    margin-bottom: 18px;
    width: 100%;
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd
}

.content table th {
    background-color: #f9f9f9;
    text-align: center
}

.content table td,.content table th {
    padding: 5px 10px;
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd
}

blockquote {
    background: #f3f3f3;
    padding: 20px;
    border-radius: 10px;
    margin-left: 20px;
    margin-bottom: 10px
}

blockquote p {
    padding-bottom: 0!important
}

.nextorprev {
    font-size: .8rem
}

.nextorprev a {
    color: #000;
    text-decoration: none;
    font-size: .8rem
}

.nextorprev a:hover {
    text-decoration: underline
}

.prev-post {
    margin-bottom: 10px
}

.imt-linear-gradient-text {
    background: linear-gradient(90deg,#00a6ff 0,#c369ff 52.4%,#ff4590 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.imt-flex-center {
    display: flex;
    align-items: center;
    justify-content: center
}

.imt-linear-black-btn {
    border-radius: 50px;
    background: linear-gradient(66deg,#222 19%,#696969 94.25%);
    height: 48px;
    width: 100%;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center
}

.halation-header-1 {
    aspect-ratio: 1/1;
    background: #7477ff;
    border-radius: 50%;
    filter: blur(300px);
    flex-shrink: 0;
    height: 400px;
    left: calc(50% - 511px);
    position: absolute;
    top: -70px;
    width: 400px;
    z-index: -1
}

.halation-header-2 {
    aspect-ratio: 1/1;
    background: #7477ff;
    border-radius: 50%;
    filter: blur(400px);
    flex-shrink: 0;
    height: 400px;
    position: absolute;
    right: calc(50% - 719px);
    top: -70px;
    width: 400px;
    z-index: -1
}

.halation-header-3 {
    aspect-ratio: 1/1;
    background: #2865e9;
    border-radius: 50%;
    filter: blur(300px);
    flex-shrink: 0;
    height: 400px;
    position: absolute;
    right: calc(50% - 615px);
    top: 210px;
    width: 400px;
    z-index: -1
}

@media screen and (max-width: 768px) {
    .halation-header-1 {
        filter:blur(100px);
        height: 100px;
        left: 0;
        top: 0;
        width: 30%
    }

    .halation-header-2 {
        filter: blur(100px);
        height: 100px;
        right: 0;
        top: 10px;
        width: 30%
    }

    .halation-header-3 {
        filter: blur(100px);
        height: 100px;
        right: 100px;
        top: 150px;
        width: 30%
    }
}

.intro-content .tag[data-v-6eecdd9c] {
    background: url(../images/tags-bg.html) no-repeat 50%;
    height: 460px;
    margin: 50px auto 0;
    max-width: 1100px;
    position: relative
}

.intro-content .tag .tag-center[data-v-6eecdd9c] {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%)
}

.intro-content .tag .tag-center1[data-v-6eecdd9c] {
    background: url(../images/tag-center1.svg) no-repeat 50%/100% 100%;
    height: 120px;
    width: 120px;
    z-index: 10
}

.intro-content .tag .tag-center2[data-v-6eecdd9c] {
    background: url(../images/tag-center2.webp) no-repeat 50%;
    height: 218px;
    width: 218px;
    z-index: 5
}

.intro-content .tag .tag-center3[data-v-6eecdd9c] {
    background: url(../images/tag-center3.webp) no-repeat 50%;
    height: 240px;
    width: 240px
}

.intro-content .tag p[data-v-6eecdd9c] {
    background: #fff;
    border: 1px solid #3370ff;
    border-radius: 100px;
    color: #3370ff;
    display: block;
    font-size: 14px;
    padding: 10px 24px;
    position: absolute
}

.intro-content .tag p[data-v-6eecdd9c]:hover {
    border-radius: 29px;
    box-shadow: 0 24px 60px #00000014;
    color: #3370ff;
    opacity: 1;
    transition: all .3s ease
}

.intro-content .tag p[data-v-6eecdd9c]:first-of-type {
    left: 0;
    top: 30px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(2) {
    left: -32px;
    top: 148px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(3) {
    left: -12px;
    top: 270px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(4) {
    left: 20px;
    top: 392px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(5) {
    left: 150px;
    top: 96px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(6) {
    left: 122px;
    top: 210px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(7) {
    left: 150px;
    top: 322px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(8) {
    left: 290px;
    top: 150px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(9) {
    left: 290px;
    top: 263px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(10) {
    right: 290px;
    top: 263px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(11) {
    right: 290px;
    top: 150px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(12) {
    right: 150px;
    top: 322px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(13) {
    right: 122px;
    top: 210px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(14) {
    right: 150px;
    top: 96px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(15) {
    right: -15px;
    top: 374px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(16) {
    right: -50px;
    top: 210px
}

.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(17) {
    right: 23px;
    top: 46px
}

@media screen and (max-width: 768px) {
    .intro-content .tag[data-v-6eecdd9c] {
        margin-top:10px;
        padding: 5px 10px
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(odd) {
        left: 0;
        right: auto
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(2n) {
        left: auto;
        right: 0
    }

    .intro-content .tag p[data-v-6eecdd9c]:first-of-type,.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(2) {
        top: 0
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(3),.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(4) {
        top: 50px
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(5),.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(6) {
        top: 100px
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(7),.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(8) {
        top: 150px
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(10),.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(9) {
        top: 200px;
        transform: none
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(11),.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(12) {
        top: 250px
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(13),.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(14) {
        top: 300px
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(15),.intro-content .tag p[data-v-6eecdd9c]:nth-of-type(16) {
        top: 350px
    }

    .intro-content .tag p[data-v-6eecdd9c]:nth-of-type(17) {
        top: 400px
    }
}

@media (max-width: 576px) {
    .news-list {
        display:flex;
        flex-direction: column;
    }
}

.faq-section {
    padding: 160px 20px;
    background: #f5f7fa;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #c7c7c7;
    transform: translateY(-2px);
}

.faq-question {
    width: 100%;
    background: transparent;
    color: #333;
    border: none;
    text-align: left;
    padding: 20px 24px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-question span.icon {
    font-size: 24px;
    color: #5b7cff;
    transition: transform 0.3s ease;
    margin-left: 12px;
    flex-shrink: 0;
}

.faq-item.active .faq-question span.icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 24px;
    color: #666;
    font-size: 15px;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 24px 20px 24px;
}

.faq-answer p {
    margin-top: 4px;
}

@media (max-width: 768px) {
    .faq-header h1 {
        font-size: 28px;
    }

    .faq-question {
        font-size: 16px;
        padding: 18px 18px;
    }

    .faq-answer {
        padding: 0 18px;
    }

    .faq-item.active .faq-answer {
        padding: 0 18px 18px 18px;
    }
}