@charset "UTF-8";
@import url(./global.css);
@import url(./commer.css);
body { --base-color: #0088fe; min-height: 100vh; display: flex; flex-direction: column; }

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

.bgc-f6 { background-color: #f6f6f6; }

.page-main { flex: 1; }

/* ===== 页面头部 开始 ===== */
.fixednav { position: fixed; width: 100%; top: 0px; left: 0; right: 0; width: 100%; z-index: 100; background: #fff; height: 90px; box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; }

.placeholder { height: 90px; }

.head-page { width: 100%; height: 90px; }

.head-page .logo { position: relative; }

.head-page .logo img { height: 75px; aspect-ratio: 277 / 75; }

.head-page .item { margin-right: 60px; color: #333; }

.head-page .item > a { display: block; height: 80px; line-height: 80px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 150px; color: inherit; }

.head-page .item > a::after { content: ""; width: 100%; position: absolute; bottom: 0; height: 2px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); opacity: 0; background: #ea222d; left: 0; }

.head-page .item span { font-size: 16px; color: inherit; }

.head-page .active { color: var(--base-color); }

.head-page .item:hover span { color: var(--base-color); }

.search-wrap { position: relative; display: flex; align-items: center; margin-left: 20px; }

.search-form { display: flex; align-items: center; background: #fff; border-radius: 25px; overflow: hidden; border: 1px solid var(--base-color); }

.search-input { padding: 10px 15px; border: none; outline: none; font-size: 14px; width: 250px; background: transparent; color: #333; }

.search-btn { color: var(--base-color); background-color: transparent; position: absolute; right: 5px; border: none; width: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; font-size: 14px; }

.search-btn::before { content: ''; position: absolute; left: -6px; height: 16px; width: 1px; border-left: 1px solid #d0d0d0; }

/* ===== 页面头部 结束 ===== */
/* ===== 页面底部 开始 ===== */
.footer-two { background: var(--base-color); overflow: hidden; position: relative; }

.footer-two .footer-bot { color: rgba(255, 255, 255, 0.9); font-size: 14px; line-height: 48px; text-align: center; }

.footer-two .footer-bot span { padding: 0 10px; }

.footer-two .footer-bot a { color: inherit; }

/* ===== 页面底部 结束 ===== */
.banner .p-banner-x { aspect-ratio: 1920 / 500; }

.wz-text-p { font-size: 1rem; color: #363636; line-height: 1.7; text-align: justify; }

.wz-text-p2 { font-size: 1rem; color: #363636; line-height: 1.7; text-align: justify; text-indent: 2em; }

.wz-col { width: 100%; }

.wz-colbox { margin: -10px; }

.wz-row { padding: 10px; box-sizing: border-box; }

.wz-rowbox { overflow: hidden; width: 100%; background-color: #fff; }

.wz-title { font-weight: bold; font-size: 22px; margin-bottom: 10px; color: #000; }

.wz-img { width: 100%; overflow: hidden; object-fit: contain; }

.wz-img img { width: 100%; }

.wz-font { flex: 1; padding: 10px; }

.wz-text { flex: 1; font-size: 14px; text-align: justify; color: #525b69; }

.wz-time, .wz-view { display: flex; align-items: center; font-size: 15px; color: #2d2d2d; }

.wz-time .view-icon, .wz-view .view-icon { width: 18px; aspect-ratio: 1 / 1; margin-right: 10px; }

.btn { cursor: pointer; border: none; letter-spacing: 2px; color: #fff; font-weight: bold; width: 100%; border-radius: 10px; height: 45px; background-color: var(--base-color); background: linear-gradient(to right, #0088fe, #00d3f8); }

.index { background-color: #181b22; }

.index .btn { height: 55px; width: 350px; }

.strategy .nav a { font-size: 20px; position: relative; padding: 8px 60px; text-decoration: none; color: #333; background-color: transparent; transition: all 0.3s ease; display: block; transform: skew(-20deg); /* 使边框呈现平行四边形 */ }

.strategy .nav a:before { /* 使用伪元素创建带边框的平行四边形 */ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid var(--base-color); /* 边框颜色 */ z-index: -1; transform: skew(-20deg); /* 与元素倾斜相同的角度 */ }

.strategy .nav a.active span, .strategy .nav a:hover span { color: white; /* 高亮时文字颜色 */ }

.strategy .nav a.active::before, .strategy .nav a:hover::before { background-color: var(--base-color); }

.strategy .nav a span { font-weight: bold; display: block; transform: skew(20deg); /* 抵消倾斜效果，让文字正常显示 */ position: relative; z-index: 1; }

.strategy .wz-colbox { margin: -16px 0; }

.strategy .wz-row { padding: 16px 0; border-bottom: 1px solid #d2d2d2; }

.strategy .wz-row:last-child { border-bottom: none; }

.strategy .wz-text { line-height: 1.7; }

.strategy .wz-title { margin-bottom: 5px; }

.strategy .wz-font { padding: 5px 0; }

.strategy .wz-img { border-radius: 8px; max-width: 240px; aspect-ratio: 240 / 135; }

.rank { background-color: #fff; }

.rank .top-wrap-tit { color: var(--base-color); background-image: -webkit-linear-gradient(left, #197be6, #25dcea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 28px; margin-bottom: 15px; }

.rank .top-wrap-p { color: #525b69; line-height: 1.7; }

.rank .nav { background-color: #313131; }

.rank .nav a { font-size: 16px; padding: 15px 40px; text-decoration: none; color: #fff; background-color: transparent; transition: all 0.3s ease; display: block; }

.rank .nav a.active { background-color: var(--base-color); color: #fff; }

.rank .nav a:not(.active):hover { color: var(--base-color); }

.rank .wz-colbox { margin: -20px; }

.rank .wz-row { padding: 20px; }

.rank .wz-rowbox { background-color: transparent; }

.rank .wz-font { padding: 5px; }

.rank .wz-title {color: #000;font-size: 24px;}

.rank .wz-text {border-top: 1px solid rgba(0, 0, 0, 0.3);padding-top: 10px;color: rgba(255, 255, 255, 0.6);line-height: 1.7;}

.rank .wz-img { max-width: 163px; aspect-ratio: 163 / 196; border-radius: 8px;}

.rank .page-info, .rank .ellipsis { color: #fff; }

.rank-detail { background-color: #fff; }

.rank-detail .title-wrap { color: #fff; }

.rank-detail .title-wrap h3 { font-weight: bold; font-size: 18px; display: flex; align-items: center; }

.rank-detail a { font-size: 15px; color: var(--base-color); }

.rank-detail .left { width: 835px; }

.rank-detail .left .desc { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }

.rank-detail .left .content { margin-top: 10px; margin-bottom: 30px; }

.rank-detail .left .content p { line-height: 1.7; color: #525b69; font-size: 15px; }

.rank-detail .pc-slide { width: 835px; margin: 0 auto; position: relative; }

.rank-detail .pc-slide .view .swiper-container { width: 835px; height: 470px; border-radius: 30px; }

.rank-detail .pc-slide .view .arrow-left, .rank-detail .pc-slide .view .arrow-right { background-color: rgba(255, 255, 255, 0.9) !important; width: 40px; height: 40px; border-radius: 50%; position: absolute; z-index: 10; display: block; }

.rank-detail .pc-slide .view .arrow-left { left: 10px; top: 50%; transform: translateY(-50%); }

.rank-detail .pc-slide .view .arrow-left:after { content: ''; background-image: url(../images/index_tab_l.png); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; left: 51%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 18px; }

.rank-detail .pc-slide .view .arrow-right { right: 10px; top: 50%; transform: translateY(-50%); }

.rank-detail .pc-slide .view .arrow-right:after { content: ''; background-image: url(../images/index_tab_r.png); background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; right: 12%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 18px; }

.rank-detail .pc-slide .preview { width: 100%; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; }

.rank-detail .pc-slide .preview .swiper-container { width: 435px; height: 58px; }

.rank-detail .pc-slide .preview .swiper-slide { width: 100px; height: 56px; cursor: pointer; margin-right: 10px; }

.rank-detail .pc-slide .preview img { padding: 1px; border-radius: 6px; }

.rank-detail .pc-slide .preview .active-nav img { padding: 0; border: 1px solid #fff; }

.rank-detail .right { flex: 1; padding-left: 20px; }

.rank-detail .right .intro { padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.3); }

.rank-detail .right .intro .img img { max-width: 100px; aspect-ratio: 1 / 1; border-radius: 8px;}

.rank-detail .right .intro .content { color: #000; flex: 1; font-size: 14px; }

.rank-detail .right .intro .content .desc { position: relative; }

.rank-detail .right .intro .content .line:after { content: ''; background-color: #000; position: absolute; top: 0; width: 1px; height: 100%; }

.rank-detail .right .intro .title { letter-spacing: 4px; font-weight: bold; font-size: 30px; }

.rank-detail .right .download .icon { width: 24px; margin-right: 10px; }

.rank-detail .right .download .btn { display: flex; align-items: center; justify-content: center; }

.rank-detail .right .download .iphone { background-color: var(--base-color); background: linear-gradient(to right, #0088fe, #00d3f8); }

.rank-detail .right .download .android { background-color: #15cc00; background: linear-gradient(to right, #15cc00, #00ee1f); }

.rank-detail .right .download .download-disabled { background-color: #b8b8b8; background: linear-gradient(to right, #b8b8b8, #9d9d9d); cursor: not-allowed; opacity: .85; }

.rank-detail .card { margin: 20px 0; }

.rank-detail .card .wz-rowbox { background-color: transparent; }

.rank-detail .card .wz-img { border-radius: 8px; aspect-ratio: 240 / 135; }

.rank-detail .card .wz-font { padding: 15px 0 0 0; }

.rank-detail .card .wz-title { color: #000; font-size: 16px; }

.rank-detail .card .wz-text { color: #525b69; font-size: 16px; }

.rank-detail .hot { background-color: #fff; border-radius: 15px; padding: 20px; }

.rank-detail .hot .wz-img { border-radius: 14px; margin-right: 10px; width: 60px; aspect-ratio: 1 / 1; }

.rank-detail .hot .wz-font { padding: 0; }

/* ===== 详情页 开始 ===== */
.detail .item_title { text-align: center; margin-bottom: 20px; }

.detail .item_title h1 { font-weight: bold; font-size: 24px; color: #333; }

.detail .item_title p { margin: 10px 0 10px; font-size: 16px; color: #999; }

.detail .item_container p { width: 100%; text-indent: 2em; color: #333; font-size: 16px; line-height: 1.7; margin-bottom: 10px; }

.detail .item_container p:has(img) img { text-indent: 0; margin: 0 auto; display: block; max-width: 100%; width: auto; }

.detail .item_container section { width: 100%; text-indent: 2em; color: #333; font-size: 16px; line-height: 1.7; margin-bottom: 10px; }

.detail .item_container section:has(img) img { text-indent: 0; margin: 0 auto; display: block; max-width: 100%; width: auto; }

/* ===== 详情页 结束 ===== */
/* ===== 分页组件 开始 ===== */
.pagination-container { padding: 20px 0; text-align: center; }

.pagination-mobile-wrap { display: none; }

.pagination-desktop { display: flex; align-items: center; justify-content: center; gap: 10px; }

.pagination-mobile { display: flex; align-items: center; justify-content: center; gap: 10px; }

.page-btn { padding: 5px 14px; border: 1px solid #ddd; background-color: #fff; cursor: pointer; border-radius: 4px; font-size: 13px; color: #333; }

.page-btn:hover { background-color: #f5f5f5; }

.page-btn:disabled, .page-btn.disabled { color: #ccc; cursor: not-allowed; background-color: #f9f9f9; pointer-events: none; }

.page-number { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; background-color: #fff; cursor: pointer; border-radius: 4px; font-size: 14px; color: #333; }

.page-number:hover { background-color: #f5f5f5; }

.page-number.active { background-color: var(--base-color); color: #fff; border-color: var(--base-color); }

.ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 14px; color: #666; }

.page-info { margin-left: 15px; color: #666; font-size: 14px; }

#pageNumbers { display: grid; grid-auto-flow: column; gap: 10px; }

@media (max-width: 768px) {
    .pagination-pc-wrap { display: none; }
    .pagination-mobile-wrap { display: block; }
    .pagination-mobile .page-btn { width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 34px; }
    .pagination-mobile .page-info { margin-left: 0; font-size: 14px; }
}

/* ===== 分页组件 结束 ===== */
/* ===== 返回顶部组件 开始 ===== */
/* 回到顶部按钮样式 */
.back-to-top { position: fixed; bottom: 80px; right: 15px; width: 50px; height: 50px; background-color: var(--base-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 136, 254, 0.3); }

.back-to-top:hover { background-color: #006dcb; transform: translateY(-2px); }

.back-to-top:active { transform: translateY(0); }

.back-to-top.show { opacity: 1; visibility: visible; }

.arrow-up-icon { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid #fff; transition: all 0.3s ease; }

.back-to-top:hover .arrow-up-icon { border-bottom-color: #fff; }

/* ===== 返回顶部组件 结束 ===== */
/* 添加到 css/style.css 文件中 */
.follow-us-sidebar { position: fixed; left: 15px; top: 59%; z-index: 9999; background-image: url(../images/index_2.png); background-repeat: no-repeat; background-position: center; background-size: cover; width: 57px; height: 257px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 20px; }

.social-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.social-item { position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer; }

.social-icon { width: 32px; height: 33px; transition: all 0.3s ease; }

.qr-code-container { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); background: white; border-radius: 8px; padding: 5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: all 0.3s ease; min-width: 120px; z-index: 10000; }

.qr-code-container::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid white; }

.social-item:hover .qr-code-container { opacity: 1; visibility: visible; left: 50px; }

.qr-code { display: block; }