/* Generated by .tools/build_frontend_assets.mjs; do not edit directly. */
html, body { margin: 0; font-size: 15px; font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol; line-height: 1.6; color: var(--theme-color); background-color: var(--theme-background); word-wrap: break-word; } * { margin: 0; padding: 0; box-sizing: border-box; outline: none !important; } .headBg { width: 100%; height: 100%; position: absolute; top: 0; opacity: .3; background-repeat: repeat-x; background-size: 100% auto; } form, input, textarea { border: 0; outline: 0; } input, button, textarea, select { border: 0; outline: 0; resize: none; } a { color: inherit; text-decoration: inherit; cursor: pointer; } a:hover { color: var(--theme-theme); } [v-cloak] { display: none; } body.homeExperience #app[v-cloak], body.detailExperience #app[v-cloak], body.channelExperience #app[v-cloak], body.apiDocsExperience #app[v-cloak], body.networkExperience #app[v-cloak], body.accountPage #app[v-cloak] { display: block; } body.homeExperience #app[v-cloak] .duckModal, body.detailExperience #app[v-cloak] .duckModal, body.channelExperience #app[v-cloak] .duckModal, body.apiDocsExperience #app[v-cloak] .duckModal, body.networkExperience #app[v-cloak] .duckModal, body.accountPage #app[v-cloak] .duckModal, body.networkExperience #app[v-cloak] [data-client-only], body.networkExperience #app[v-cloak] [v-if], body.networkExperience #app[v-cloak] [v-else-if], body.networkExperience #app[v-cloak] [v-else], body.networkExperience #app[v-cloak] [v-for], body.detailExperience #app[v-cloak] [v-show] { display: none; } #app:not([v-cloak]) [data-before-mount] { display: none; } body.networkExperience #app[v-cloak] .networkPanTabs > button:first-child { background: #ffba00; color: #142239; } #app { position: relative; z-index: 9; } .headerBox { position: fixed; top: 0; left: 0; right: 0; height: 68px; z-index: 99; } .headerKox { height: 68px; } .headerBox .bg { position: absolute; inset: 0; box-shadow: 0 3px 5px rgba(214, 214, 214, .22); background-color: var(--theme-other_background); transition: 'opacity 0.2s'; } .headerBox .box { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: auto; height: 100%; overflow: hidden; width: 1200px; } .headerBox .box .logoBox { display: inline-flex; align-items: center; transition: 'opacity 0.2s'; } .headerBox .box .logoBox .logo { height: 43px; } .headerBox .box .logoBox .title { margin-left: 18px; font-size: 20px; font-weight: bold; } .headerBox .box .navs { display: inline-flex; align-items: center; } .headerBox .box .navs .iconfont { display: none; } .headerBox .box .navs .item, .headerBox .box .navs a { padding: 4px 0; margin-left: 25px; cursor: pointer; white-space: nowrap; } .headerBox .box .navs .item:hover { color: var(--theme-theme); } .headerBox .box .search { position: relative; flex: 1; height: 40px; border-radius: 40px; display: flex; align-items: center; max-width: 400px; margin: 0 15px 0 auto; background-color: var(--theme-background); } .headerBox .box .search:after { content: ""; position: absolute; inset: 0; box-shadow: 0 2px 4px var(--theme-theme); border-radius: 40px; border: 1px solid var(--theme-color); opacity: .05; } .headerBox .box .search input { position: relative; z-index: 9; flex: 1; height: 100%; border-radius: 54px; border: none; font-size: 16px; box-sizing: border-box; padding-left: 24px; color: var(--theme-color); background-color: transparent; } .headerBox .box .search .btn { position: relative; z-index: 9; width: 64px; height: 54px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .headerBox .box .search .btn .iconfont { font-size: 26px; font-weight: bold; color: var(--theme-theme); } .homeBox { width: 1200px; margin: 0 auto; min-height: calc(100vh - 180px); text-align: center; padding-top: 68px; } .homeBox .box { width: 680px; margin: auto; } .homeBox .logoBox { display: inline-flex; align-items: center; } .homeBox .logoBox .logo { height: 68px; margin: 0 8px; } .homeBox .logoBox .title { margin: 0 8px; font-size: 30px; font-weight: bold; } .homeBox .subTitle { padding: 10px 0 10px; opacity: .6; } .searchBox .search { position: relative; margin: auto; margin-top: 30px; background-color: var(--theme-other_background); box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3); width: 100%; height: 54px; border-radius: 54px; display: flex; align-items: center; } .searchBox .search input { flex: 1; height: 100%; border-radius: 54px; border: none; font-size: 18px; box-sizing: border-box; padding-left: 24px; color: var(--theme-color); background-color: transparent; } .searchBox .search .btn { width: 64px; height: 54px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .searchBox .search .btn .iconfont { font-size: 26px; font-weight: bold; color: var(--theme-theme); } .footerBox { padding: 30px 15px 20px; } .footerBox .box { text-align: center; margin: auto; height: 100%; overflow: hidden; width: 1200px; } .footerBox .box p { opacity: .78; padding: 4px 0; } .home { margin-top: 78px; text-align: left; } .home .block { border-radius: 12px; background-color: var(--theme-other_background); box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3); margin-bottom: 20px; padding-top: 20px; } .home .nav { position: relative; font-size: 18px; font-weight: bold; color: var(--theme-color); padding: 0 20px 4px; display: flex; align-items: center; } .home .nav img { width: 24px; height: 24px; margin-right: 12px; } .home .content { min-height: 200px; } .home .content .list { display: flex; flex-wrap: wrap; padding: 0 0 10px 15px; } .home .content .list .item { position: relative; display: block; width: 130.8px; margin: 8px; border-radius: 8px 8px 0 0; overflow: hidden; text-align: center; padding: 2px 0; transition: all .5s; } .home .content .list .item:hover { transform: translateY(-5px); } .home .content .list .item p { margin-top: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .home .content .list .item .img { position: relative; width: 100%; height: 192px; border-radius: 8px; overflow: hidden; background: #f5f5f5; } .home .content .list .item .img img { position: relative; z-index: 9; width: 100%; height: 100%; object-fit: cover; } .home .content .list .item .img span { position: absolute; inset: 0; font-size: 12px; color: #ccc; display: flex; align-items: center; justify-content: center; } .home .content .list .item .img .titleLoading { font-size: 16px; padding: 0 3%; word-break: break-all; } .home.homeNO { display: flex; flex-wrap: wrap; } .home.homeNO .block { margin: 0 6px 12px; width: calc(20% - 12px); } .home.homeNO .content .list { padding: 10px; } .home.homeNO .content .list .item { width: 100%; margin: 0; border-radius: 0; text-align: left; max-width: 282px; } .home.homeNO .content .list .item p { margin-top: 0; padding: 4px 6px; } .home.homeNO .content .list .item:hover { transform: translateY(0); } .home.homeNO .content .list .item p span { color: #c4c7ce; margin-right: 6px; } .home.homeNO .content .list .item:nth-child(1) p span { color: #FE2D46; } .home.homeNO .content .list .item:nth-child(2) p span { color: #FF6600; } .home.homeNO .content .list .item:nth-child(3) p span { color: #FAA90E; } .el-dialog { background-color: var(--theme-other_background); } .layerBox .vname { font-size: 20px; font-weight: bold; text-align: center; } .layerBox .vbtn { background-color: var(--theme-theme); color: var(--theme-other_background); height: 40px; line-height: 40px; text-align: center; margin-top: 15px; border-radius: 8px; cursor: pointer; } .layerBox .el-textarea textarea { background-color: #f7f7f7; border-radius: 8px; width: 100%; height: 240px; margin: 15px auto 0; padding: 15px; box-sizing: border-box; box-shadow: none; } .layerBox .el-textarea__inner:focus { box-shadow: none; } .listBox { width: 1200px; margin: 0 auto; min-height: calc(100vh - 180px); display: flex; } .listBox h3 { position: relative; padding: 30px 0 15px 15px; } .listBox h3:after { content: ""; position: absolute; bottom: 20px; left: 0; width: 4px; background-color: var(--theme-theme); height: 18px; } .listBox h3 span { color: var(--theme-theme); } .listBox .nav { position: relative; font-size: 18px; font-weight: bold; color: var(--theme-color); padding: 30px 0 14px; display: flex; align-items: center; } .listBox .nav img { width: 22px; height: 22px; margin-right: 12px; } .listBox .left { width: 0; flex: 1; overflow: hidden; } .listBox .left .list { padding: 0 15px; } .listBox .left .list .item { position: relative; display: block; padding: 15px 0; border-bottom: 1px dashed #e6e6e6; } .listBox .left .list .item .title { font-size: 17px; font-weight: bold; padding-bottom: 4px; color: var(--theme-theme); } .listBox .left .list .item .title p { color: var(--theme-color); } .listBox .left .list .item .title p span { color: var(--theme-theme); } .listBox .left .list .item .btns { display: flex; align-items: center; margin-top: 10px; } .listBox .left .list .item .btns .btn { position: relative; margin-right: 35px; cursor: pointer; display: inline-flex; align-items: center; font-weight: 500; color: var(--theme-color); } .listBox .left .list .item .btns .btn .iconfont { font-size: 18px; margin-right: 5px; } .listBox .left .list .item .btns .btn .icon { width: 20px; margin-right: 5px; flex: none; } .listBox .left .list .item .type { position: relative; color: #999; flex: none; padding-left: 25px; margin-top: 10px; } .listBox .left .list .item .type::after { content: "\e619"; position: absolute; top: -3.4px; left: 0; font-family: 'iconfont'; font-size: 20px; } .listBox .left .list .item .type span { margin-right: 35px; } .listBox .left .list .item .type span span { color: #FF3F3D; } .listBox .left .list .item .type.time::after { content: "\ebb1"; } .listBox .left .list .item .type.cate::after { content: "\e65f"; } .listBox .right { width: 300px; margin-left: 20px; } .listBox .box { border-radius: 12px; background-color: var(--theme-other_background); box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3); min-height: calc(100% - 71px); padding: 15px; } .listBox .right .box { height: auto; min-height: auto; } .listBox .right .list .item { width: 100%; margin: 0; border-radius: 0; text-align: left; } .listBox .right .list .item p { margin-top: 0; padding: 4px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .listBox .right .list .item:hover { transform: translateY(0); } .listBox .right .list .item p span { color: #c4c7ce; margin-right: 6px; } .listBox .right .list .item:nth-child(1) p span { color: #FE2D46; } .listBox .right .list .item:nth-child(2) p span { color: #FF6600; } .listBox .right .list .item:nth-child(3) p span { color: #FAA90E; } .listBox .screen { width: 120px; margin-right: 20px; } .listBox .screen .fixed { position: fixed; width: 120px; z-index: 9; } .listBox .screen .box { height: auto; padding: 5px 15px; } .listBox .screen .box a { display: block; padding: 12px 0; border-bottom: 1px dashed #e6e6e6; } .listBox .screen .box a:last-child { border-bottom: none; } .listBox .screen .box a.active { font-weight: bold; color: var(--theme-theme); } .listBox .details { padding: 40px 50px; min-height: inherit; } .details .pic { width: 160px; height: 212px; border-radius: 8px; background-color: var(--theme-background); margin: 0 auto 30px; } .details .pic img { width: 100%; height: 100%; object-fit: cover; } .details .title { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 25px; color: var(--theme-theme); } .details .cat { display: flex; font-size: 15px; padding: 8px 0; } .details .cat .l { flex: none; width: 80px; opacity: .5; } .details .cat .r { opacity: 1; flex: 1; width: 0; } .details .cat .r a { color: var(--theme-theme); word-wrap: break-word; word-break: normal; } .details .cat .r .icon { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; } .details .cat .r span { vertical-align: middle; } .details .btns { display: flex; margin-top: 24px; justify-content: center; } .details .btns .btn { position: relative; width: 125px; height: 38px; line-height: 38px; border-radius: 38px; background-color: var(--theme-other_background); margin: 0 15px; font-size: 14px; color: var(--theme-color); text-align: center; opacity: .88; cursor: pointer; } .details .btns .btn .iconfont { font-size: 18px; margin-right: 5px; vertical-align: middle; } .details .btns .btn:after { content: ""; position: absolute; inset: 0; box-shadow: 0 2px 4px var(--theme-theme); border-radius: 38px; border: 1px solid var(--theme-color); opacity: .1; } .details .btns .btn.btnCol { background-color: var(--theme-theme); color: var(--theme-other_background); } .details .btns .btn:hover { background-color: var(--theme-theme); color: var(--theme-other_background); } .searchDetail { display: none; } .page { display: flex; padding: 20px 0 15px; justify-content: center; } .el-pagination.is-background .btn-next.is-disabled, .el-pagination.is-background .btn-next:disabled, .el-pagination.is-background .btn-prev.is-disabled, .el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .el-pager li.is-disabled, .el-pagination.is-background .el-pager li:disabled { background-color: var(--theme-other_background); color: var(--theme-color); } .el-pagination.is-background .btn-next.is-active, .el-pagination.is-background .btn-prev.is-active, .el-pagination.is-background .el-pager li.is-active { background-color: var(--theme-theme); color: var(--theme-other_background); } .el-pager li.is-active, .el-pager li:hover { color: var(--theme-theme); } .searchList { display: none; } .loader { margin: auto; width: fit-content; font-weight: bold; font-family: monospace; font-size: 24px; background: radial-gradient(circle closest-side, var(--theme-theme) 94%, #0000) right/calc(200% - 1em) 100%; animation: l24 1s infinite alternate linear; } .loader::before { content: " 全网检索中，请稍等..."; line-height: 1em; color: #0000; background: inherit; background-image: radial-gradient(circle closest-side, #fff 94%, var(--theme-theme)); -webkit-background-clip: text; background-clip: text; } @keyframes l24 { 100% { background-position: left } } .listBox .Ebox { border-radius: 12px; background-color: var(--theme-other_background); box-shadow: 0 4px 10px rgba(225, 225, 225, 0.3); padding: 15px; margin-bottom: 15px; } .listBox .left .Ebox .list .item:last-child { border-bottom: none; } .Qtips { text-align: center; font-size: 14px; color: #999; } .Qbtn { text-align: center; padding-top: 10px; } .Qbtn .btn { display: inline-block; color: #999999; cursor: pointer; } .listBox .details.samelistBox { padding: 25px 30px; } .samelist { display: flex; flex-wrap: wrap; } .samelist .item { width: 50%; margin: 0; border-radius: 0; text-align: left; padding: 3px 0; } .samelist .item p { margin-top: 0; padding: 4px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .samelist .item:hover { transform: translateY(0); } .samelist .item p span { color: #c4c7ce; margin-right: 6px; } .samelist .item:nth-child(1) p span { color: #FE2D46; } .samelist .item:nth-child(2) p span { color: #FF6600; } .samelist .item:nth-child(3) p span { color: #FAA90E; } .source-switch { display: flex; align-items: center; white-space: nowrap; overflow-x: auto; } .source-switch h3 { margin-right: 6px; } .switch-items { display: flex; gap: 18px; padding-top: 16px; } .switch-items a { position: relative; padding: 5px 0; text-decoration: none; transition: all 0.3s; } .switch-items a:hover { color: var(--theme-theme); } .switch-items a.active { color: var(--theme-theme); font-weight: bold; } .switch-items a.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; width: 20px; height: 4px; margin: auto; border-radius: 4px; background-color: var(--theme-theme); } .vtips { font-size: 14px; color: #999; padding: 10px 0 0; } .vtips a { font-weight: bold; color: var(--theme-theme); } .btns2 { display: flex; align-items: center; justify-content: center; border-radius: 6px; height: 30px; line-height: 30px; color: var(--theme-other_background); background-color: var(--theme-theme); font-size: 14px; width: 100px; cursor: pointer; position: absolute; bottom: 15px; right: 0; } .dialogUrlBox { width: 450px; border-radius: 18px; } .dialogUrlBox .dialogUrl { min-height: 100px; } .dialogUrlBox .dialogUrl .title { font-size: 20px; font-weight: bold; text-align: center; color: #000; } .dialogUrlBox .dialogUrl .title span { color: var(--theme-theme); } .dialogUrlBox .dialogUrl .tips { margin-top: 12px; color: #666; font-size: 14px; text-align: center; } .dialogUrlBox .dialogUrl .qrcode { margin: 24px auto 0; width: 200px; height: 200px; border: 1.5px solid #e5e6e8; border-radius: 4px; } .dialogUrlBox .dialogUrl .qrcode canvas { width: 100%; height: 100%; padding: 10px; } .dialogUrlBox .dialogUrl .nav { margin-top: 15px; font-size: 15px; } .dialogUrlBox .dialogUrl .nav .item { color: #333; text-align: center; margin-top: 5px; } .dialogUrlBox .dialogUrl .nav .item .t { font-weight: 600; } .dialogUrlBox .dialogUrl .nav .item a { color: var(--theme-theme); } .dialogUrlBox .dialogUrl .statement { margin-top: 24px; padding-top: 15px; text-align: left; font-size: 14px; border-top: 1px dashed #e6e6e6; } .dialogUrlBox .dialogUrl .statement .content { margin-bottom: 8px; color: #666; line-height: 1.6; } .dialogUrlBox .dialogUrl .statement .content p { text-align: justify; margin-top: 5px; } .dialogUrlBox .el-icon { font-size: 20px; } .iconfont { font-family: inherit !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-shijian_o:before { content: "\ebb1"; } .icon-laiyuan1:before { content: "\e619"; } .icon-laiyuan:before { content: "\e651"; } .icon-yun_o:before { content: "\ebb3"; } .icon-fenxiang1:before { content: "\e626"; } .icon-fangwen:before { content: "\e6d5"; } .icon-xiala:before { content: "\e65b"; } .icon-caidan:before { content: "\e65d"; } .icon-UC:before { content: "\e7cb"; } .icon-xunlei:before { content: "\ea50"; } .icon-baiduwangpan:before { content: "\e698"; } .icon-aliyunpan:before { content: "\e615"; } .icon-fenlei:before { content: "\e65f"; } .icon-tiaozhuan:before { content: "\e658"; } .icon--lianjie:before { content: "\e606"; } .icon-fenxiang:before { content: "\e65c"; } .icon-fuzhi:before { content: "\e60f"; } .icon-date:before { content: "\e611"; } .icon-kuake:before { content: "\e67d"; } .icon-sousuo:before { content: "\e623"; } .icon-sousuo:before, .icon-caidan:before, .icon-fenxiang1:before, .icon-yun_o:before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .icon-sousuo:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21 21-4.35-4.35M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21 21-4.35-4.35M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .icon-caidan:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .icon-fenxiang1:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M18 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M18 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .icon-yun_o:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.2 8.5 4.75 4.75 0 0 0 7 18Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.2 8.5 4.75 4.75 0 0 0 7 18Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (max-width: 768px) { @media screen and (max-width: 768px) { html, body { font-size: 4vw; width: 100%; -webkit-tap-highlight-color:transparent } a:hover { color: inherit; } .headerBox,.headerKox{ height: 15vw; } .headerBox .box { width: 100%; padding: 0 3vw; } .headerBox .box .logoBox .logo { height: 10vw; } .headerBox .box .logoBox .title { margin-left: 3vw; font-size: 4.8vw; } .headerBox .box .search { display: none; } .headerBox .box .navs .item,.headerBox .box .navs .btns { display: none; } .headerBox .box .navs .iconfont { display: block; font-weight: bold; font-size: 20px; } .drawer .item{ font-size: 4vw; color: var(--theme-color); } .drawer .item,.drawer a{ display: block; height: 10vw; line-height: 10vw; font-size: 4vw; color: var(--theme-color); text-align: center; } .homeBox{ width: 100%; padding: 6vw 5vw 0; } .homeBox .box { width: 100%; } .homeBox .logoBox .logo { height: 13.2vw; } .homeBox .logoBox .title { margin-left: 3.4vw; font-size: 5.6vw; } .searchBox .search { margin-top: 5vw; height: 12.5vw; border-radius: 12.5vw; } .searchBox .search input { border-radius: 12.5vw; font-size: 4.2vw; padding-left: 5vw; } .searchBox .search .btn { width: 15vw; height: 12.5vw; } .searchBox .search .btn .iconfont{ font-size: 5.8vw; } .home { flex-wrap: wrap; margin-top: 10vw; } .home .nav{ font-size: 4.2vw; padding: 0 3vw 2vw; } .home .nav img { width: 6vw; height: 6vw; margin-right: 2.6vw; } .home .content { min-height: auto; } .home .content .list{ padding: 0 0 2vw 2vw; } .home .content .list .item { width: 26.8vw; margin: 1vw; padding: 1vw 0; } .home .content .list .item .img { height: 40vw; } .home .content .list .item p{ margin-top: 2vw; } .home .content .list .item:hover{ transform: translateY(0); } .home.homeNO .block { margin: 0; margin-bottom: 5vw; width: 100%; flex: auto; } .home.homeNO .content .list { padding: 0 3vw 3vw; } .home.homeNO .content .list .item{ max-width: 100%; } .footerBox { padding: 5vw; } .footerBox .box { width: 100%; } .listBox { width: 100%; min-height: calc(100vh - 60vw); display: flex; flex-wrap: wrap; align-content: flex-start; } .listBox .screen{ width: 100%; margin: 0 3vw; } .listBox .screen .fixed h3{ display: none; } .listBox .right { display: none; } .listBox .left { padding: 0 4vw; } .listBox h3 { position: relative; padding: 20.4vw 0 0; font-size: 3.8vw; text-align: center; } .listBox h3:after { display: none; } .listBox .box { padding: 0 4vw 6vw; margin-top: 4vw; text-align: justify; min-height: calc(100% - 50vw); } .listBox .Ebox{ padding: 0 4vw 5vw; margin-top: 4vw; margin-bottom: 4vw; text-align: justify; } .listBox .left .Ebox .list .item:last-child{ padding: 5vw 0 0; } .Qloading { padding-top: 6vw; } .Qtips{ padding-top: 5.6vw; } .loader{ font-size: 18px; } .Qbtn{ padding-top: 5vw; } .listBox .left .list { padding: 0; } .listBox .left .list .item { padding: 5vw 0; } .listBox .left .list .item .title { font-size: 4.6vw; padding-bottom: 1.2vw; } .listBox .left .list .item .btns{ justify-content: space-between; } .listBox .left .list .item .btns .btn{ margin-right: 0; } .listBox .left .list .item .btns .btn .iconfont{ font-size: 4.5vw; margin-right: 1vw; } .listBox .left .list .item .btns .btn .icon{ width: 4.6vw; margin-right: 1vw; } .listBox .left .list .item .type{ margin-top: 2vw; } .listBox .left .list .item .type::after{ top: -1vw; font-size: 5.3vw; } .listBox .details{ padding-top: 5vw; } .details .title { font-size: 4.8vw; margin-bottom: 4vw; } .details .cat { display: flex; font-size: 4.2vw; } .details .pic { width: 30vw; height: 40vw; margin: 2vw auto 5vw; } .searchList{ position: fixed; left: 0; right: 0; z-index: 10; padding: 0 5vw 2vw; display: block; background-color: var(--theme-background); } .searchList .search { margin-top: 3vw; } .searchList .search .select{ font-size: 3.8vw; line-height: 13.2vw; height: 12.5vw; width: 20vw; text-align: center; opacity: .8; } .searchList .search input { padding-left: 3vw; } .listBox .screen .box{ padding: 0 4vw 6vw; margin-top: 17.5vw; display: none; } .searchDetail{ position: fixed; left: 0; right: 0; z-index: 10; padding: 0 5vw 2vw; display: block; background-color: var(--theme-background); } .searchDetail .search { margin-top: 3vw; } .searchDetail .search input { padding-left: 5vw; } .detailBox{ min-height: inherit; } .detailBox h3{ display: none; } .detailBox .details { padding-top: 5vw; margin-top: 20vw; min-height: inherit; } .listBox .details.samelistBox{ padding: 3vw; margin-top: 0; } .detailBox h3.samelistNav{ display: block; position: relative; padding: 30px 0 17px 15px; font-size: 4.2vw; text-align: left; } .detailBox h3.samelistNav:after { display: block; } .samelist .item { width: 100%; } .samelist .item p { padding: 4px 6px; } .switch-items { gap: 4.2vw; padding-top: 20vw; } .switch-items a { font-size: 3.8vw; } .btns2 { height: 8.2vw; line-height: 8.2vw; font-size: 3.4vw; width: 25vw; bottom: 4vw; } .listBox .left .Ebox .list .item:last-child .btns2{ bottom: 0; } .dialogUrlBox{ width: 90vw; } } } :root { --sp-navy: #112b46; --sp-navy-deep: #0b1f34; --sp-blue: #246bfe; --sp-yellow: #f7b731; --sp-text: #17263a; --sp-muted: #68778a; --sp-line: #e7edf4; --sp-surface: #ffffff; --sp-bg: #f5f7fb; --sp-shadow: 0 18px 50px rgba(28, 51, 77, .09); } html { scroll-behavior: smooth; } html, body { font-size: 16px; color: var(--sp-text); background: var(--sp-bg); font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body { min-width: 320px; } .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .headBg { display: none; } .headerBox { height: 72px; background: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(225, 233, 242, .9); box-shadow: 0 8px 32px rgba(15, 40, 66, .05); backdrop-filter: blur(18px); } .headerKox { height: 72px; } .headerBox .bg { background: transparent; box-shadow: none; } .headerBox .box { width: min(1180px, calc(100% - 40px)); overflow: visible; } .headerBox .box .logoBox { opacity: 1 !important; color: var(--sp-navy-deep); } .headerBox .box .logoBox .title { margin-left: 10px; font-size: 20px; letter-spacing: .02em; } .brandMark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--sp-navy-deep); background: var(--sp-yellow); font-size: 18px; font-weight: 800; box-shadow: 0 7px 18px rgba(247, 183, 49, .28); } .headerBox .box .navs { gap: 28px; } .headerBox .box .navs .item, .headerBox .box .navs a, .headerBox .box .navs .navLink { margin: 0; padding: 8px 0; color: #405166; font-size: 14px; font-weight: 600; } .headerBox .box .navs .item:hover, .headerBox .box .navs a:hover { color: var(--sp-blue); } .headerBox .box .search { max-width: 360px; height: 42px; margin-right: 32px; background: #f1f4f8; border: 1px solid transparent; } .headerBox .box .search:focus-within { border-color: rgba(36, 107, 254, .35); background: #fff; } .homeBox { width: min(1180px, calc(100% - 40px)); padding-top: 28px; text-align: left; } .homeHero { position: relative; min-width: 0; max-width: 100%; min-height: 430px; overflow: hidden; display: flex; align-items: center; border-radius: 30px; color: #fff; background: linear-gradient(125deg, rgba(10, 31, 52, .98), rgba(17, 55, 88, .96) 58%, rgba(28, 75, 114, .94)); box-shadow: 0 28px 75px rgba(11, 31, 52, .2); } .homeHero::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right, #000, transparent 80%); } .heroGlow { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; } .heroGlowOne { width: 340px; height: 340px; right: -90px; top: -150px; background: rgba(247, 183, 49, .24); } .heroGlowTwo { width: 280px; height: 280px; right: 120px; bottom: -210px; background: rgba(36, 107, 254, .34); } .heroContent { position: relative; z-index: 1; width: min(760px, calc(100% - 96px)); margin-left: 64px; padding: 56px 0; min-width: 0; } .heroEyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 700; letter-spacing: .14em; } .heroEyebrow span { width: 28px; height: 3px; border-radius: 99px; background: var(--sp-yellow); } .homeHero h1 { color: #fff; font-size: clamp(38px, 5vw, 58px); line-height: 1.18; letter-spacing: -.04em; white-space: normal; overflow-wrap: anywhere; } .homeHero h1 em { color: var(--sp-yellow); font-style: normal; } .heroDescription { max-width: 650px; margin-top: 16px; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.8; } .searchBox .heroSearch { height: 62px; margin: 30px 0 0; padding: 5px 6px 5px 22px; border-radius: 18px; background: #fff; box-shadow: 0 16px 36px rgba(0, 0, 0, .18); } .heroSearch .searchLead { color: #93a0b0; font-size: 20px; } .searchBox .heroSearch input { min-width: 0; padding-left: 14px; border-radius: 0; color: var(--sp-text); font-size: 16px; } .searchBox .heroSearch .btn { width: 104px; height: 50px; flex: none; border-radius: 14px; color: var(--sp-navy-deep); background: var(--sp-yellow); font-size: 16px; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .searchBox .heroSearch .btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(247, 183, 49, .25); } .platformRow, .trustRow { display: flex; align-items: center; flex-wrap: wrap; } .platformRow { gap: 8px; margin-top: 18px; } .platformLabel { margin-right: 4px; color: rgba(255, 255, 255, .56); font-size: 13px; } .platformChip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .07); font-size: 13px; } .platformChip img { width: 17px; height: 17px; object-fit: contain; } .trustRow { gap: 24px; margin-top: 20px; color: rgba(255, 255, 255, .62); font-size: 13px; } .trustRow i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; color: var(--sp-navy-deep); background: rgba(247, 183, 49, .9); font-size: 11px; font-style: normal; font-weight: 900; } .homeDiscover, .valueSection, .faqSection { padding-top: 76px; } .sectionHeading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; } .sectionKicker { color: var(--sp-blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; } .sectionHeading h2 { margin-top: 4px; color: var(--sp-navy-deep); font-size: 28px; line-height: 1.35; } .sectionHeading > p { max-width: 460px; color: var(--sp-muted); font-size: 14px; } .home { margin-top: 0; } .home .block, .home.homeNO .block { border: 1px solid var(--sp-line); border-radius: 18px; box-shadow: 0 10px 32px rgba(28, 51, 77, .06); } .home.homeNO { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .home.homeNO .block { width: auto; margin: 0; } .home .nav { padding: 0 20px 10px; color: var(--sp-navy-deep); } .home.homeNO .content .list .item { max-width: none; } .home.homeNO .content .list .item p { padding: 7px 6px; } .valueGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .valueGrid article { min-height: 205px; padding: 28px; border: 1px solid var(--sp-line); border-radius: 20px; background: var(--sp-surface); box-shadow: 0 12px 36px rgba(28, 51, 77, .05); } .valueIcon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--sp-navy-deep); background: #fff2cc; font-size: 13px; font-weight: 900; } .valueGrid h3 { margin-top: 22px; color: var(--sp-navy-deep); font-size: 18px; } .valueGrid p { margin-top: 10px; color: var(--sp-muted); font-size: 14px; line-height: 1.8; } .faqSection { padding-bottom: 56px; } .faqList { overflow: hidden; border: 1px solid var(--sp-line); border-radius: 20px; background: var(--sp-surface); } .faqList details { padding: 0 26px; border-bottom: 1px solid var(--sp-line); } .faqList details:last-child { border-bottom: 0; } .faqList summary { position: relative; padding: 20px 34px 20px 0; color: var(--sp-navy-deep); font-weight: 700; cursor: pointer; list-style: none; } .faqList summary::-webkit-details-marker { display: none; } .faqList summary::after { content: "+"; position: absolute; right: 2px; top: 18px; color: var(--sp-blue); font-size: 22px; } .faqList details[open] summary::after { content: "−"; } .faqList details p { max-width: 820px; padding: 0 0 20px; color: var(--sp-muted); font-size: 14px; line-height: 1.8; } .searchResultsPage { width: min(1180px, calc(100% - 40px)); gap: 20px; padding-top: 30px; } .searchResultsPage .screen { width: 168px; margin: 0; flex: none; } .searchResultsPage .screen .fixed { position: sticky; top: 94px; width: 168px; } .searchResultsPage .filterTitle { padding: 0 0 12px; color: var(--sp-navy-deep); font-size: 15px; } .searchResultsPage .screen .box { min-height: 0; padding: 8px 14px; border: 1px solid var(--sp-line); border-radius: 16px; box-shadow: 0 10px 30px rgba(28, 51, 77, .05); } .searchResultsPage .screen .box a { position: relative; padding: 11px 6px; border-bottom: 0; border-radius: 9px; color: #566579; font-size: 14px; } .searchResultsPage .screen .box a.active { padding-left: 12px; color: var(--sp-blue); background: #edf3ff; } .resultHeading { margin-bottom: 18px; } .resultHeading h1 { margin-top: 3px; color: var(--sp-navy-deep); font-size: 28px; line-height: 1.4; } .resultHeading p { margin-top: 7px; color: var(--sp-muted); font-size: 14px; } .source-switch { justify-content: space-between; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--sp-line); border-radius: 14px; background: #fff; } .sourceLabel { color: var(--sp-muted); font-size: 13px; font-weight: 700; } .switch-items { gap: 8px; padding: 0; } .switch-items a { padding: 6px 13px; border-radius: 9px; color: #566579; font-size: 13px; font-weight: 700; } .switch-items a.active { color: var(--sp-blue); background: #edf3ff; } .switch-items a.active::after { display: none; } .searchResultsPage .left > .box, .searchResultsPage .Ebox { min-height: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } .searchResultsPage .left .list { padding: 0; } .searchResultsPage .left .list .resultCard { margin-bottom: 12px; padding: 20px 22px; border: 1px solid var(--sp-line); border-radius: 16px; background: #fff; box-shadow: 0 9px 28px rgba(28, 51, 77, .045); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .searchResultsPage .left .list .resultCard:hover { transform: translateY(-1px); border-color: #cfdaf0; box-shadow: 0 14px 32px rgba(28, 51, 77, .08); } .searchResultsPage .left .list .item .title { display: block; padding: 0 0 6px; color: var(--sp-navy-deep); font-size: 17px; line-height: 1.55; } .searchResultsPage .left .list .item .title:hover { color: var(--sp-blue); } .searchResultsPage .left .list .item .type { padding-left: 0; color: var(--sp-muted); font-size: 13px; } .searchResultsPage .left .list .item .type::after { display: none; } .searchResultsPage .left .list .item .resourceMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; } .panBadge { display: inline-flex; align-items: center; width: fit-content; margin: 0 !important; padding: 4px 9px; border-radius: 7px; color: #315b9b; background: #edf3ff; font-size: 12px; font-weight: 700; } .panBadge.pan-0 { color: #6650ba; background: #f1edff; } .panBadge.pan-1 { color: #2771be; background: #eaf5ff; } .panBadge.pan-2 { color: #245fd3; background: #eaf0ff; } .panBadge.pan-3 { color: #d86708; background: #fff1df; } .panBadge.pan-4 { color: #3765d4; background: #edf1ff; } .searchResultsPage .left .list .item .btns { gap: 10px; margin-top: 16px; } .searchResultsPage .left .list .item .btns .btn { min-height: 34px; margin: 0; padding: 6px 11px; border-radius: 9px; color: #556579; background: #f5f7fa; font-size: 13px; } .searchResultsPage .left .list .item .btns .btn:last-child { color: #fff; background: var(--sp-blue); } .searchResultsPage .btns2 { position: absolute; right: 22px; bottom: 20px; width: auto; min-width: 92px; height: 34px; padding: 0 15px; border-radius: 9px; color: #fff; background: var(--sp-blue); font-weight: 700; } .searchResultsPage .right { width: 260px; margin: 0; flex: none; } .searchResultsPage .right .nav { padding: 0 0 12px; color: var(--sp-navy-deep); font-size: 15px; } .searchResultsPage .right .box { min-height: 0; padding: 12px; border: 1px solid var(--sp-line); border-radius: 16px; box-shadow: 0 10px 30px rgba(28, 51, 77, .05); } .detailBox { width: min(1040px, calc(100% - 40px)); gap: 22px; padding-top: 30px; } .detailBox .left { min-width: 0; } .detailHeading { margin-bottom: 16px; } .detailHeading h2 { margin-top: 4px; color: var(--sp-navy-deep); font-size: 26px; } .detailBox .details { min-height: 0; padding: 34px 38px; border: 1px solid var(--sp-line); border-radius: 20px; box-shadow: 0 14px 38px rgba(28, 51, 77, .06); } .detailBox .details .pic { width: 150px; height: 210px; border-radius: 14px; box-shadow: 0 12px 28px rgba(28, 51, 77, .13); } .detailBox .details .title { margin-bottom: 28px; color: var(--sp-navy-deep); font-size: 26px; line-height: 1.45; } .detailBox .details .cat { padding: 11px 0; border-bottom: 1px solid #eef2f7; } .detailBox .details .cat:last-of-type { border-bottom: 0; } .detailBox .details .cat .l { width: 92px; color: var(--sp-muted); opacity: 1; font-size: 14px; } .detailBox .details .cat .r { color: #35465a; font-size: 14px; line-height: 1.75; } .detailBox .details .cat .r a { color: var(--sp-blue); } .detailBox .details .btns .btn { width: auto; min-width: 126px; height: 42px; margin: 0 6px; line-height: 42px; border-radius: 11px; background: #f2f5f9; } .detailBox .details .btns .btn::after { display: none; } .detailBox .details .btns .btn.btnCol { color: #fff; background: var(--sp-blue); } .detailBox .samelistNav { margin: 30px 0 14px; color: var(--sp-navy-deep); font-size: 20px; } .detailBox .details.samelistBox { padding: 20px 24px; } .detailBox .right { width: 250px; margin: 58px 0 0; } .footerBox { margin-top: 20px; padding: 34px 0; color: #8491a2; background: var(--sp-navy-deep); } .footerBox .box { width: min(1180px, calc(100% - 40px)); min-height: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } .footerInner { display: flex; align-items: center; justify-content: space-between; gap: 40px; text-align: left !important; } .footerBrand { display: flex; align-items: center; gap: 14px; } .footerBrand strong { color: #fff; font-size: 17px; } .footerBrand p { max-width: 510px; padding: 2px 0 0 !important; font-size: 13px; } .footerInfo { text-align: right; font-size: 12px; } .footerInfo a { margin-left: 12px; } .footerBox a:hover { color: var(--sp-yellow); } @media (max-width: 900px) { .headerBox .box .navs .navLink { display: none; } .home.homeNO, .valueGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .searchResultsPage .right { display: none; } } @media (max-width: 768px) { html, body { width: 100%; font-size: 16px; } .headerBox, .headerKox { height: 62px; } .headerBox .box { width: calc(100% - 28px); padding: 0; } .headerBox .box .logoBox .title { margin-left: 8px; font-size: 18px; } .brandMark { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; } .headerBox .box .navs { gap: 0; } .homeBox { width: calc(100% - 24px); padding: 12px 0 0; } .homeHero { min-height: 0; border-radius: 22px; } .heroContent { width: calc(100% - 36px); margin: 0 auto; padding: 38px 0 32px; } .heroEyebrow { margin-bottom: 14px; font-size: 11px; } .homeHero h1 { font-size: 30px; line-height: 1.25; letter-spacing: -.03em; } .heroDescription { margin-top: 12px; font-size: 14px; line-height: 1.75; } .searchBox .heroSearch { height: 56px; margin-top: 24px; padding: 4px 4px 4px 16px; border-radius: 15px; } .searchBox .heroSearch input { width: 0; padding-left: 10px; font-size: 15px; } .searchBox .heroSearch .btn { width: 76px; height: 48px; border-radius: 12px; font-size: 15px; } .platformRow { gap: 6px; } .platformLabel { width: 100%; margin-bottom: 2px; } .platformChip { padding: 5px 8px; font-size: 12px; } .trustRow { gap: 10px 16px; margin-top: 16px; font-size: 12px; } .homeDiscover, .valueSection, .faqSection { padding-top: 50px; } .sectionHeading { display: block; margin-bottom: 18px; } .sectionHeading h2 { font-size: 23px; } .sectionHeading > p { margin-top: 8px; font-size: 13px; } .home.homeNO, .valueGrid { display: grid; grid-template-columns: 1fr; gap: 12px; } .home.homeNO .block { margin: 0; } .valueGrid article { min-height: 0; padding: 22px; } .valueGrid h3 { margin-top: 16px; } .faqSection { padding-bottom: 40px; } .faqList details { padding: 0 20px; } .footerBox .box { width: 100%; } .footerBox { padding: 30px 20px; } .footerInner { display: block; } .footerInfo { margin-top: 20px; text-align: left; } .searchList, .searchDetail { position: sticky; top: 62px; z-index: 20; padding: 8px 12px; background: rgba(245, 247, 251, .94); backdrop-filter: blur(12px); } .searchList .search, .searchDetail .search { height: 48px; margin-top: 0; border: 1px solid var(--sp-line); border-radius: 14px; box-shadow: 0 8px 24px rgba(28, 51, 77, .08); } .searchList .search input, .searchDetail .search input { width: 0; min-width: 0; padding-left: 10px; font-size: 14px; } .searchList .search .select { width: auto; min-width: 74px; height: 46px; padding-left: 12px; line-height: 46px; font-size: 13px; } .searchList .search .btn, .searchDetail .search .btn { width: 50px; height: 46px; } .searchResultsPage { display: block; width: calc(100% - 24px); min-height: 0; gap: 0; padding-top: 22px; } .searchResultsPage .screen { width: 100%; height: auto; margin: 0; } .searchResultsPage .screen .fixed { position: static; width: 100%; } .searchResultsPage .filterTitle { display: none; } .searchResultsPage .screen .box { margin-top: 0; } .searchResultsPage .left { width: 100%; padding: 0; } .resultHeading { margin-bottom: 14px; } .resultHeading h1 { font-size: 23px; } .resultHeading p { font-size: 13px; } .source-switch { margin-bottom: 12px; } .switch-items { padding: 0; } .searchResultsPage .left .list .resultCard { margin-bottom: 10px; padding: 17px; } .searchResultsPage .left .list .item .title { font-size: 16px; } .searchResultsPage .left .list .item .btns { align-items: stretch; justify-content: flex-start; flex-wrap: wrap; } .searchResultsPage .left .list .item .btns .btn { flex: 1; justify-content: center; min-width: 90px; } .searchResultsPage .btns2 { position: static; margin-top: 14px; } .detailBox { width: calc(100% - 24px); min-height: 0; padding-top: 18px; } .detailBox .left { padding: 0; } .detailHeading { display: none; } .detailBox .details { min-height: 0; margin-top: 0; padding: 24px 20px; } .detailBox .details .title { font-size: 21px; text-align: left; } .detailBox .details .cat { display: block; } .detailBox .details .cat .l { width: auto; margin-bottom: 3px; font-size: 13px; } .detailBox .details .cat .r { width: auto; font-size: 14px; } .detailBox .details .btns { gap: 10px; margin-top: 22px; } .detailBox .details .btns .btn { flex: 1; min-width: 0; margin: 0; } .detailBox .samelistNav { padding: 0; margin: 26px 0 12px; font-size: 19px; } .detailBox .details.samelistBox { margin-top: 0; padding: 14px 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } .networkOnlyBody .headerBox .box .search { display: none; } .networkOnlyBody .headerBox .box { justify-content: space-between; } .networkSearchPage { width: min(1100px, calc(100% - 40px)); min-height: calc(100vh - 260px); margin: 0 auto; padding: 34px 0 72px; } .networkSearchHero { position: relative; overflow: hidden; padding: 34px 40px 30px; color: #fff; background: radial-gradient(circle at 88% 10%, rgba(79, 132, 255, .42), transparent 30%), linear-gradient(135deg, #071a2f 0%, #0d2f57 58%, #174e89 100%); border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; box-shadow: 0 24px 70px rgba(8, 34, 61, .18); } .networkSearchHero::after { position: absolute; right: -64px; bottom: -116px; width: 310px; height: 310px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; box-shadow: 0 0 0 44px rgba(255, 255, 255, .025), 0 0 0 88px rgba(255, 255, 255, .02); content: ""; } .networkHeroCopy, .networkSearchForm, .networkTrustRow { position: relative; z-index: 1; } .networkEyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #91b9ff; font-size: 12px; font-weight: 800; letter-spacing: .18em; } .networkEyebrow i { width: 7px; height: 7px; background: #67e3ae; border-radius: 50%; box-shadow: 0 0 0 5px rgba(103, 227, 174, .11); } .networkSearchHero h1 { margin: 0; color: #fff; font-size: clamp(27px, 3.2vw, 40px); line-height: 1.3; letter-spacing: -.035em; } .networkSearchHero .networkHeroCopy p { margin: 7px 0 0; color: rgba(223, 236, 251, .75); font-size: 14px; } .networkSearchForm { display: flex; align-items: center; width: min(780px, 100%); height: 62px; margin-top: 25px; padding: 5px 5px 5px 20px; background: #fff; border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; box-shadow: 0 14px 35px rgba(0, 14, 34, .2); } .networkSearchForm > i { flex: 0 0 auto; color: #7890aa; font-size: 21px; } .networkSearchForm input { flex: 1; min-width: 0; height: 100%; padding: 0 15px; color: var(--sp-text); background: transparent; border: 0; outline: 0; font-size: 16px; } .networkSearchForm input::placeholder { color: #98a6b6; } .networkSearchForm button { flex: 0 0 auto; height: 50px; padding: 0 25px; color: #102947; background: var(--sp-yellow); border: 0; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; } .networkSearchForm button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(247, 183, 49, .28); } .networkTrustRow { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; color: rgba(222, 235, 250, .76); font-size: 12px; } .networkTrustRow span { display: inline-flex; align-items: center; gap: 7px; } .networkTrustRow b { color: #67e3ae; font-size: 10px; letter-spacing: .08em; } .networkWorkspace { overflow: hidden; margin-top: 18px; background: #fff; border: 1px solid var(--sp-line); border-radius: 22px; box-shadow: 0 16px 48px rgba(28, 51, 77, .07); } .networkToolbar { display: flex; align-items: center; gap: 28px; padding: 22px 26px; border-bottom: 1px solid var(--sp-line); } .networkToolbarTitle { flex: 0 0 190px; } .networkToolbarTitle > span { color: var(--sp-navy-deep); font-size: 16px; font-weight: 800; } .networkToolbarTitle p { margin: 3px 0 0; color: #8a98a9; font-size: 11px; } .networkPanTabs { display: flex; flex: 1; flex-wrap: wrap; gap: 8px; } .networkPanTabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 112px; height: 42px; padding: 0 15px; color: #536479; background: #f4f7fa; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 700; transition: all .18s ease; } .networkPanTabs button:hover { color: var(--sp-blue); background: #eef4ff; } .networkPanTabs button.active { color: #fff; background: var(--sp-blue); border-color: var(--sp-blue); box-shadow: 0 8px 18px rgba(36, 107, 254, .22); } .networkPanTabs button img, .networkLocalIcon { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; object-fit: cover; font-size: 10px; font-weight: 800; } .networkPanTabs button.active img { background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); } .networkResultHeader { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 28px; color: #748296; background: #fbfcfe; border-bottom: 1px solid #edf1f6; font-size: 12px; } .networkResultHeader > div { display: flex; align-items: center; gap: 8px; } .networkResultHeader strong { color: #26384e; font-size: 13px; } .networkResultDot { width: 7px; height: 7px; background: #67cf9e; border-radius: 50%; } .networkResultDot.loading { background: var(--sp-yellow); box-shadow: 0 0 0 5px rgba(247, 183, 49, .12); animation: networkPulse 1.2s ease-in-out infinite; } .networkStatusText::before { margin-right: 8px; color: #c4cbd4; content: "/"; } .networkResultCount b { color: var(--sp-blue); font-size: 14px; } .networkResultList { padding: 8px 26px 20px; } .networkResultCard { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 94px; padding: 18px 18px 18px 14px; border-bottom: 1px solid #edf1f5; transition: background .18s ease, transform .18s ease; } .networkResultCard:last-of-type { border-bottom: 0; } .networkResultCard:hover { background: #f8faff; transform: translateX(2px); } .networkResultMain { display: flex; align-items: center; min-width: 0; } .networkResultSource { display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 46px; margin-right: 15px; background: #f1f5fb; border: 1px solid #e6edf6; border-radius: 13px; } .networkResultSource img { width: 27px; height: 27px; border-radius: 7px; object-fit: cover; } .networkResultBody { min-width: 0; } .networkResultTitle { display: block; overflow: hidden; color: #172a42; font-size: 16px; font-weight: 750; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; } .networkResultTitle:hover { color: var(--sp-blue); } .networkResultMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 7px; color: #8a97a8; font-size: 12px; } .networkResultMeta i { width: 3px; height: 3px; background: #c8d0da; border-radius: 50%; } .networkGetButton { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; min-width: 112px; height: 42px; color: #1d55cf; background: #eef4ff; border: 1px solid #dae7ff; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 800; transition: all .18s ease; } .networkGetButton span { font-size: 16px; transition: transform .18s ease; } .networkGetButton:hover { color: #fff; background: var(--sp-blue); border-color: var(--sp-blue); box-shadow: 0 8px 18px rgba(36, 107, 254, .18); } .networkGetButton:hover span { transform: translateX(3px); } .networkEmptyState { padding: 68px 20px 76px; text-align: center; } .networkEmptyIcon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 15px; color: #7390af; background: #eef3f8; border-radius: 16px; font-size: 27px; font-weight: 700; } .networkEmptyIcon.blocked { color: #d54e4e; background: #fff0f0; } .networkEmptyState h2 { margin: 0; color: #263950; font-size: 18px; } .networkEmptyState p { margin: 8px 0 0; color: #8795a6; font-size: 13px; } .networkLoadingCards { padding-top: 8px; } .networkLoadingCards > div { position: relative; height: 88px; border-bottom: 1px solid #edf1f5; } .networkLoadingCards span, .networkLoadingCards p, .networkLoadingCards em { position: absolute; overflow: hidden; background: #edf1f6; border-radius: 8px; } .networkLoadingCards span::after, .networkLoadingCards p::after, .networkLoadingCards em::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); content: ""; animation: networkShimmer 1.4s infinite; } .networkLoadingCards span { top: 21px; left: 14px; width: 46px; height: 46px; border-radius: 13px; } .networkLoadingCards p { top: 23px; left: 76px; width: 48%; height: 14px; } .networkLoadingCards em { top: 49px; left: 76px; width: 28%; height: 9px; } .networkNotice { margin-top: 18px; padding: 0 8px; color: #8895a5; font-size: 12px; line-height: 1.8; text-align: center; } .networkNotice span { margin-right: 7px; padding: 3px 7px; color: #66768a; background: #e9eef4; border-radius: 5px; font-weight: 700; } @keyframes networkPulse { 50% { opacity: .45; } } @keyframes networkShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @media (max-width: 800px) { .networkOnlyBody .headerBox .box .navs .navLink { display: none; } .networkSearchPage { width: calc(100% - 24px); padding: 18px 0 50px; } .networkSearchHero { padding: 27px 22px 23px; border-radius: 19px; } .networkSearchHero h1 { font-size: 27px; } .networkSearchHero .networkHeroCopy p { font-size: 13px; line-height: 1.7; } .networkSearchForm { height: 56px; padding-left: 15px; border-radius: 14px; } .networkSearchForm input { padding: 0 9px; font-size: 14px; } .networkSearchForm button { height: 46px; padding: 0 16px; font-size: 13px; } .networkTrustRow { gap: 9px 16px; margin-top: 18px; } .networkWorkspace { border-radius: 17px; } .networkToolbar { display: block; padding: 19px 17px 16px; } .networkToolbarTitle p { margin-bottom: 13px; } .networkPanTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .networkPanTabs button { min-width: 0; padding: 0 7px; font-size: 12px; } .networkResultHeader { min-height: 50px; padding: 0 17px; } .networkStatusText { display: none; } .networkResultList { padding: 4px 12px 14px; } .networkResultCard { display: block; min-height: 0; padding: 17px 5px; } .networkResultSource { flex-basis: 40px; width: 40px; height: 40px; margin-right: 11px; border-radius: 11px; } .networkResultSource img { width: 24px; height: 24px; } .networkResultTitle { display: -webkit-box; overflow: hidden; font-size: 15px; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .networkResultMeta { gap: 6px; margin-top: 6px; font-size: 11px; } .networkResultMeta span:last-child, .networkResultMeta i:last-of-type { display: none; } .networkGetButton { width: 100%; height: 39px; margin-top: 13px; } .networkEmptyState { padding: 52px 12px 62px; } } @media (max-width: 430px) { .networkOnlyBody .headerBox .box .navs .item, .networkOnlyBody .headerBox .box .navs .btns { display: none; } .networkPanTabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .networkTrustRow span { width: calc(50% - 8px); } } :root { --sp-ink: #0b1b2b; --sp-ink-soft: #31475d; --sp-night: #05131f; --sp-night-2: #08243a; --sp-night-3: #0d3554; --sp-cyan: #55e6c1; --sp-cyan-soft: #dffbf3; --sp-blue: #3478f6; --sp-blue-deep: #1e57d9; --sp-yellow: #ffbd2e; --sp-yellow-soft: #fff4d8; --sp-surface: #ffffff; --sp-canvas: #f3f6fa; --sp-line: #dde7f1; --sp-muted: #6f8194; --sp-shadow: 0 24px 70px rgba(9, 31, 51, .10); --sp-shadow-soft: 0 14px 42px rgba(9, 31, 51, .07); } html { scroll-padding-top: 92px; } html, body { color: var(--sp-ink); background: radial-gradient(circle at 7% 8%, rgba(52, 120, 246, .055), transparent 24rem), radial-gradient(circle at 93% 34%, rgba(85, 230, 193, .045), transparent 26rem), var(--sp-canvas); font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } ::selection { color: #061827; background: rgba(85, 230, 193, .62); } :where(a, button, summary, [role="button"]):focus-visible { outline: 3px solid rgba(52, 120, 246, .35) !important; outline-offset: 3px; } .heroSearch input:focus-visible, .networkSearchForm input:focus-visible, .headerBox .search input:focus-visible, .searchDetail input:focus-visible, .searchList input:focus-visible { outline: 0 !important; } button, a, input, summary { -webkit-tap-highlight-color: transparent; } .headerBox { height: 76px; border-bottom: 1px solid rgba(214, 225, 236, .78); background: rgba(255, 255, 255, .88); box-shadow: 0 8px 35px rgba(9, 31, 51, .045); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); } .headerKox { height: 76px; } .headerBox .box { width: min(1240px, calc(100% - 48px)); } .brandMark { width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(145deg, #ffd45d, var(--sp-yellow)); box-shadow: 0 9px 24px rgba(255, 189, 46, .25); } .headerBox .box .logoBox .title { margin-left: 11px; color: var(--sp-ink); font-size: 20px; font-weight: 850; letter-spacing: -.02em; } .headerBox .box .navs { gap: 30px; } .headerBox .box .navs .item, .headerBox .box .navs a, .headerBox .box .navs .navLink { position: relative; color: #41566c; font-size: 14px; font-weight: 700; } .headerBox .box .navs .navLink::after { position: absolute; right: 50%; bottom: 1px; left: 50%; height: 2px; border-radius: 2px; background: var(--sp-blue); content: ""; transition: right .22s ease, left .22s ease; } .headerBox .box .navs .navLink:hover::after { right: 0; left: 0; } .headerBox .box .search { max-width: 390px; height: 44px; margin-right: 36px; border: 1px solid #dbe5ef; background: rgba(245, 248, 251, .94); box-shadow: inset 0 1px 0 #fff; } .headerBox .box .search::after { display: none; } .headerBox .box .search:focus-within { border-color: rgba(52, 120, 246, .45); background: #fff; box-shadow: 0 0 0 4px rgba(52, 120, 246, .08); } .headerBox .box .search input { padding-left: 19px; font-size: 14px; } .headerBox .box .search .btn { width: 52px; height: 42px; } .homeExperience .headerBox { border-bottom-color: rgba(255, 255, 255, .07); background: rgba(5, 19, 31, .94); box-shadow: none; } .homeExperience .headerBox .box .logoBox .title { color: #fff; } .homeExperience .headerBox .box .navs .item, .homeExperience .headerBox .box .navs a, .homeExperience .headerBox .box .navs .navLink { color: rgba(231, 241, 250, .78); } .homeExperience .headerBox .box .navs .item:hover, .homeExperience .headerBox .box .navs a:hover { color: #fff; } .homeExperience .headerBox .box .search { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .09); } .homeExperience .headerBox .box .search input { color: #fff; } .homeExperience .headerBox .box .search input::placeholder { color: rgba(255, 255, 255, .55); } .homeBox { width: min(1240px, calc(100% - 48px)); padding-top: 24px; } .homeHero { isolation: isolate; min-height: 570px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 34px; background: radial-gradient(circle at 78% 8%, rgba(52, 120, 246, .33), transparent 31%), radial-gradient(circle at 82% 90%, rgba(85, 230, 193, .12), transparent 28%), linear-gradient(130deg, var(--sp-night) 0%, #072037 52%, #0a3150 100%); box-shadow: 0 34px 90px rgba(5, 22, 37, .25); } .homeHero::before { z-index: -2; opacity: .14; background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 75% 48%, #000, transparent 72%); -webkit-mask-image: radial-gradient(circle at 75% 48%, #000, transparent 72%); } .homeHero::after { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle 360px at var(--hero-x, 73%) var(--hero-y, 42%), rgba(85, 230, 193, .09), transparent 72%); content: ""; pointer-events: none; } .particleField, .heroNoise { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .particleField { z-index: -1; opacity: .72; } .heroNoise { z-index: -1; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); } .heroGlowOne { width: 440px; height: 440px; right: -190px; top: -250px; background: rgba(52, 120, 246, .22); } .heroGlowTwo { width: 360px; height: 360px; right: 250px; bottom: -290px; background: rgba(85, 230, 193, .12); } .heroContent { width: 58%; margin-left: 64px; padding: 70px 0 66px; } .heroEyebrow { margin-bottom: 20px; color: rgba(220, 236, 250, .70); font-size: 12px; letter-spacing: .17em; } .heroEyebrow span { width: 34px; background: linear-gradient(90deg, var(--sp-cyan), var(--sp-yellow)); box-shadow: 0 0 18px rgba(85, 230, 193, .5); } .homeHero h1 { max-width: 650px; margin: 0; font-size: clamp(46px, 5.4vw, 72px); font-weight: 900; line-height: 1.05; letter-spacing: -.065em; } .homeHero h1 em { color: transparent; background: linear-gradient(90deg, #fff2bb 0%, var(--sp-yellow) 40%, var(--sp-cyan) 100%); background-clip: text; -webkit-background-clip: text; } .heroDescription { max-width: 650px; margin-top: 22px; color: rgba(221, 235, 248, .72); font-size: 16px; line-height: 1.9; } .searchBox .heroSearch { width: min(680px, 100%); height: 68px; margin-top: 32px; padding: 6px 7px 6px 23px; border: 1px solid rgba(255, 255, 255, .66); border-radius: 19px; background: rgba(255, 255, 255, .98); box-shadow: 0 21px 52px rgba(0, 8, 18, .26), 0 0 0 7px rgba(255, 255, 255, .045); transition: box-shadow .22s ease, transform .22s ease; } .searchBox .heroSearch:focus-within { transform: translateY(-2px); box-shadow: 0 25px 58px rgba(0, 8, 18, .31), 0 0 0 7px rgba(85, 230, 193, .10); } .heroSearch .searchLead { color: #6d8197; } .searchBox .heroSearch input { padding-left: 14px; color: var(--sp-ink); font-size: 16px; } .searchBox .heroSearch .btn { width: 112px; height: 54px; border-radius: 14px; color: #081d2e; background: linear-gradient(135deg, #ffd45d, var(--sp-yellow)); box-shadow: 0 8px 22px rgba(255, 189, 46, .23); } .searchBox .heroSearch .btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 13px 28px rgba(255, 189, 46, .32); } .platformRow { gap: 7px; margin-top: 21px; } .platformLabel { margin-right: 5px; color: rgba(213, 231, 245, .46); } .platformChip { padding: 6px 10px; border-color: rgba(255, 255, 255, .1); border-radius: 9px; color: rgba(235, 244, 252, .82); background: rgba(255, 255, 255, .055); backdrop-filter: blur(8px); } .platformChip img { border-radius: 5px; } .trustRow { gap: 22px; margin-top: 20px; color: rgba(209, 228, 244, .56); } .trustRow i { color: #052234; background: var(--sp-cyan); } .heroNetwork { position: absolute; z-index: 2; top: 50%; right: 34px; width: 440px; height: 440px; transform: translateY(-50%) perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d; transition: transform .18s ease-out; } .networkHalo { position: absolute; border: 1px solid rgba(138, 190, 235, .18); border-radius: 50%; } .networkHalo::before, .networkHalo::after { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-cyan); box-shadow: 0 0 14px var(--sp-cyan); content: ""; } .haloOne { inset: 34px; animation: haloSpin 24s linear infinite; } .haloOne::before { top: 34px; right: 57px; } .haloOne::after { bottom: 13px; left: 114px; background: var(--sp-yellow); box-shadow: 0 0 14px var(--sp-yellow); } .haloTwo { inset: 92px; border-style: dashed; animation: haloSpin 17s linear infinite reverse; } .haloTwo::before { top: -3px; left: 50%; } .haloTwo::after { right: -3px; bottom: 45px; } .networkCore { position: absolute; top: 50%; left: 50%; display: grid; width: 114px; height: 114px; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 32px; background: linear-gradient(145deg, rgba(22, 70, 106, .92), rgba(5, 25, 41, .94)); box-shadow: 0 22px 55px rgba(0, 5, 12, .38), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 44px rgba(52, 120, 246, .2); transform: translate(-50%, -50%) rotate(-5deg); } .networkCore strong { margin-top: 18px; color: #fff; font-size: 35px; line-height: 1; } .networkCore small { align-self: start; color: rgba(220, 238, 251, .54); font-size: 10px; letter-spacing: .12em; } .networkCoreSignal { position: absolute; top: 17px; right: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-cyan); box-shadow: 0 0 0 6px rgba(85, 230, 193, .08), 0 0 16px var(--sp-cyan); animation: signalPulse 1.8s ease-in-out infinite; } .networkNode { position: absolute; display: flex; align-items: center; gap: 9px; min-width: 92px; padding: 8px 12px 8px 9px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; color: rgba(242, 248, 253, .86); background: rgba(8, 31, 50, .76); box-shadow: 0 16px 35px rgba(0, 6, 14, .25), inset 0 1px 0 rgba(255, 255, 255, .07); backdrop-filter: blur(14px); font-size: 12px; font-weight: 700; animation: nodeFloat 5s ease-in-out infinite; } .networkNode img { width: 29px; height: 29px; border: 3px solid rgba(255, 255, 255, .9); border-radius: 9px; background: #fff; object-fit: cover; } .nodeQuark { top: 24px; left: 172px; } .nodeBaidu { top: 115px; right: 3px; animation-delay: -.8s; } .nodeAli { right: 40px; bottom: 52px; animation-delay: -1.6s; } .nodeUc { bottom: 12px; left: 78px; animation-delay: -2.4s; } .nodeXunlei { top: 130px; left: -5px; animation-delay: -3.2s; } .networkData { position: absolute; padding: 6px 9px; border: 1px solid rgba(85, 230, 193, .16); border-radius: 7px; color: rgba(85, 230, 193, .6); background: rgba(5, 22, 37, .7); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; letter-spacing: .12em; } .dataOne { top: 50px; right: 20px; } .dataTwo { bottom: 92px; left: 2px; } @keyframes haloSpin { to { transform: rotate(360deg); } } @keyframes nodeFloat { 50% { transform: translateY(-7px); } } @keyframes signalPulse { 50% { opacity: .42; transform: scale(.82); } } .capabilityStrip { position: relative; z-index: 5; display: grid; width: calc(100% - 64px); margin: -34px auto 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(218, 228, 238, .86); border-radius: 21px; background: rgba(255, 255, 255, .94); box-shadow: 0 20px 56px rgba(9, 31, 51, .12); backdrop-filter: blur(18px); } .capabilityStrip > div { position: relative; padding: 23px 26px; } .capabilityStrip > div + div::before { position: absolute; top: 21px; bottom: 21px; left: 0; width: 1px; background: var(--sp-line); content: ""; } .capabilityStrip strong, .capabilityStrip span { display: block; } .capabilityStrip strong { color: var(--sp-ink); font-size: 18px; font-weight: 900; } .capabilityStrip span { margin-top: 4px; color: var(--sp-muted); font-size: 12px; } .answerSection { display: grid; overflow: hidden; margin-top: 84px; grid-template-columns: .88fr 1.12fr; border: 1px solid var(--sp-line); border-radius: 28px; background: #fff; box-shadow: var(--sp-shadow-soft); } .answerLead { position: relative; overflow: hidden; padding: 48px 46px; color: #fff; background: radial-gradient(circle at 10% 0, rgba(85, 230, 193, .15), transparent 31%), linear-gradient(145deg, #071a2b, #0b304b); } .answerLead::after { position: absolute; right: -62px; bottom: -62px; width: 190px; height: 190px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%; box-shadow: 0 0 0 36px rgba(255, 255, 255, .025), 0 0 0 72px rgba(255, 255, 255, .018); content: ""; } .answerLead .sectionKicker { color: var(--sp-cyan); } .answerLead h2 { margin: 9px 0 0; color: #fff; font-size: 34px; line-height: 1.35; } .answerLead p { position: relative; z-index: 1; margin-top: 18px; color: rgba(222, 236, 248, .71); font-size: 15px; line-height: 2; } .answerFlow { display: grid; padding: 24px 38px; align-content: center; } .answerFlow article { position: relative; display: grid; min-height: 92px; padding: 19px 0; grid-template-columns: 54px 1fr; gap: 16px; border-bottom: 1px solid #e9eff5; } .answerFlow article:last-child { border-bottom: 0; } .answerFlow article > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: var(--sp-blue-deep); background: #edf3ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 900; } .answerFlow h3 { color: var(--sp-ink); font-size: 17px; } .answerFlow p { margin-top: 5px; color: var(--sp-muted); font-size: 13px; line-height: 1.7; } .homeDiscover, .valueSection, .faqSection { padding-top: 88px; } .sectionHeading { margin-bottom: 27px; } .sectionKicker { color: var(--sp-blue); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; letter-spacing: .19em; } .sectionHeading h2 { margin-top: 7px; color: var(--sp-ink); font-size: 32px; font-weight: 900; letter-spacing: -.035em; } .sectionHeading > p { color: var(--sp-muted); line-height: 1.75; } .home.homeNO { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .home .block, .home.homeNO .block { overflow: hidden; border: 1px solid var(--sp-line); border-radius: 21px; background: rgba(255, 255, 255, .94); box-shadow: var(--sp-shadow-soft); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .home .block:hover, .home.homeNO .block:hover { border-color: #cbd9e7; box-shadow: 0 21px 52px rgba(9, 31, 51, .105); transform: translateY(-3px); } .home .nav { min-height: 56px; padding: 3px 22px 10px; color: var(--sp-ink); font-size: 16px; font-weight: 850; } .home .nav::after { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--sp-cyan); box-shadow: 0 0 0 5px rgba(85, 230, 193, .11); content: ""; } .home.homeNO .content .list { padding: 0 15px 17px; } .home.homeNO .content .list .item p { position: relative; padding: 8px 10px 8px 30px; border-radius: 9px; color: #3c5167; font-size: 13px; transition: color .18s ease, background .18s ease, transform .18s ease; } .home.homeNO .content .list .item p > span { position: absolute; left: 8px; width: 15px; color: #9aa8b7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; text-align: center; } .home.homeNO .content .list .item:hover p { color: var(--sp-blue-deep); background: #f0f5ff; transform: translateX(2px); } .home .content .list .item .img { background: linear-gradient(145deg, #edf2f7, #e1e9f1); } .home .content .list .item .img img { transition: transform .5s ease; } .home .content .list .item:hover .img img { transform: scale(1.035); } .valueGrid { gap: 18px; } .valueGrid article { position: relative; isolation: isolate; overflow: hidden; min-height: 235px; padding: 31px; border: 1px solid var(--sp-line); border-radius: 23px; background: rgba(255, 255, 255, .94); box-shadow: var(--sp-shadow-soft); transition: transform .25s ease, box-shadow .25s ease; } .valueGrid article::after { position: absolute; z-index: -1; right: -52px; bottom: -58px; width: 150px; height: 150px; border-radius: 50%; background: rgba(52, 120, 246, .045); content: ""; } .valueGrid article:nth-child(2)::after { background: rgba(85, 230, 193, .08); } .valueGrid article:nth-child(3)::after { background: rgba(255, 189, 46, .10); } .valueGrid article:hover { transform: translateY(-5px); box-shadow: 0 24px 58px rgba(9, 31, 51, .11); } .valueIcon { width: 47px; height: 47px; border-radius: 15px; color: var(--sp-blue-deep); background: #edf3ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .valueGrid article:nth-child(2) .valueIcon { color: #087b62; background: var(--sp-cyan-soft); } .valueGrid article:nth-child(3) .valueIcon { color: #8a5a00; background: var(--sp-yellow-soft); } .valueGrid h3 { margin-top: 25px; color: var(--sp-ink); font-size: 19px; font-weight: 850; } .valueGrid p { margin-top: 11px; color: var(--sp-muted); font-size: 14px; line-height: 1.9; } .faqSection { padding-bottom: 70px; } .faqList { border: 1px solid var(--sp-line); border-radius: 23px; background: rgba(255, 255, 255, .96); box-shadow: var(--sp-shadow-soft); } .faqList details { padding: 0 29px; } .faqList summary { padding: 22px 42px 22px 0; color: var(--sp-ink); font-size: 15px; font-weight: 800; } .faqList summary::after { top: 16px; display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; background: #edf3ff; font-size: 19px; } .faqList details p { padding-bottom: 23px; color: var(--sp-muted); font-size: 14px; line-height: 1.9; } .networkSearchPage { width: min(1160px, calc(100% - 48px)); min-height: calc(100vh - 260px); padding: 30px 0 76px; } .networkSearchHero { isolation: isolate; min-height: 306px; padding: 42px 46px 35px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 29px; background: radial-gradient(circle at 88% 16%, rgba(52, 120, 246, .34), transparent 32%), linear-gradient(135deg, #061522 0%, #092943 61%, #0c3a5d 100%); box-shadow: 0 30px 78px rgba(6, 25, 42, .22); } .networkSearchHero::after { right: -33px; bottom: -143px; width: 360px; height: 360px; box-shadow: 0 0 0 47px rgba(255, 255, 255, .025), 0 0 0 94px rgba(255, 255, 255, .018); } .networkHeroGrid { position: absolute; z-index: 0; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, transparent, #000 38%, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000); } .networkHeroScanner { position: absolute; z-index: 0; top: 0; bottom: 0; left: 68%; width: 1px; background: linear-gradient(transparent, rgba(85, 230, 193, .65), transparent); box-shadow: 0 0 18px rgba(85, 230, 193, .45); animation: scannerMove 7s ease-in-out infinite; } @keyframes scannerMove { 50% { transform: translateX(180px); opacity: .35; } } .networkEyebrow { margin-bottom: 12px; color: var(--sp-cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; } .networkEyebrow i { background: var(--sp-cyan); box-shadow: 0 0 0 5px rgba(85, 230, 193, .1), 0 0 16px rgba(85, 230, 193, .5); } .networkSearchHero h1 { max-width: 820px; font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.045em; } .networkSearchHero .networkHeroCopy p { margin-top: 10px; color: rgba(218, 233, 247, .67); font-size: 14px; } .networkSearchForm { width: min(810px, 100%); height: 66px; margin-top: 27px; padding: 5px 6px 5px 21px; border-radius: 18px; box-shadow: 0 18px 45px rgba(0, 9, 20, .27), 0 0 0 6px rgba(255, 255, 255, .04); transition: transform .2s ease, box-shadow .2s ease; } .networkSearchForm:focus-within { transform: translateY(-2px); box-shadow: 0 23px 52px rgba(0, 9, 20, .32), 0 0 0 6px rgba(85, 230, 193, .09); } .networkSearchForm button { height: 54px; min-width: 116px; border-radius: 14px; background: linear-gradient(135deg, #ffd45d, var(--sp-yellow)); } .networkTrustRow { gap: 22px; margin-top: 24px; color: rgba(218, 233, 247, .63); } .networkTrustRow b { color: var(--sp-cyan); } .networkWorkspace { position: relative; z-index: 2; overflow: hidden; width: calc(100% - 34px); margin: -14px auto 0; border: 1px solid rgba(218, 228, 238, .94); border-radius: 24px; background: rgba(255, 255, 255, .97); box-shadow: 0 28px 72px rgba(9, 31, 51, .13); } .networkToolbar { gap: 34px; padding: 25px 28px 22px; background: linear-gradient(180deg, #fff, #fbfcfe); } .networkToolbarTitle { flex-basis: 188px; } .networkToolbarTitle > span { color: var(--sp-ink); font-size: 16px; font-weight: 900; } .networkToolbarTitle p { margin-top: 5px; color: var(--sp-muted); font-size: 11px; } .networkPanTabs { gap: 9px; } .networkPanTabs button { min-width: 114px; height: 44px; border-color: #e4ebf3; border-radius: 12px; color: #52677c; background: #f6f8fb; font-weight: 800; } .networkPanTabs button:hover { border-color: #cddcf1; transform: translateY(-1px); } .networkPanTabs button.active { border-color: #174dc6; background: linear-gradient(135deg, #3478f6, #1f5fe7); box-shadow: 0 10px 23px rgba(52, 120, 246, .24); } .networkResultHeader { min-height: 57px; padding: 0 29px; background: #f8fafc; } .networkResultDot { background: var(--sp-cyan); box-shadow: 0 0 0 5px rgba(85, 230, 193, .09); } .networkResultList { padding: 10px 28px 22px; counter-reset: result-card; } .networkResultCard { position: relative; min-height: 102px; padding: 19px 18px 19px 12px; counter-increment: result-card; border-bottom-color: #e8eef4; } .networkResultCard::before { position: absolute; top: 50%; left: -3px; width: 2px; height: 0; border-radius: 4px; background: linear-gradient(var(--sp-cyan), var(--sp-blue)); content: ""; transform: translateY(-50%); transition: height .2s ease; } .networkResultCard:hover { background: linear-gradient(90deg, rgba(52, 120, 246, .045), rgba(85, 230, 193, .018)); transform: none; } .networkResultCard:hover::before { height: 56px; } .networkResultSource { flex-basis: 49px; width: 49px; height: 49px; border-color: #e1e9f2; border-radius: 15px; background: #f2f6fa; box-shadow: inset 0 1px 0 #fff; } .networkResultSource img { width: 29px; height: 29px; border-radius: 8px; } .networkResultTitle { color: #13283e; font-size: 16px; font-weight: 850; } .networkResultMeta { color: #8392a3; } .networkGetButton { min-width: 116px; height: 43px; border-color: #d7e4f8; border-radius: 12px; color: var(--sp-blue-deep); background: #edf4ff; } .networkResultActions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; } .networkDetailButton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 102px; height: 43px; border: 1px solid #dfe7ef; border-radius: 12px; color: #455c72; background: #fff; font-size: 13px; font-weight: 800; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; } .networkDetailButton span { font-size: 14px; } .networkDetailButton:hover { border-color: #cbd9e9; color: var(--sp-blue-deep); background: #f6f9fd; transform: translateY(-1px); } .networkGetButton:hover { border-color: var(--sp-blue); background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-deep)); transform: translateY(-1px); } .networkEmptyState { padding: 76px 20px 83px; } .networkEmptyIcon { width: 58px; height: 58px; border-radius: 18px; background: #edf3f8; } .networkNotice { margin-top: 21px; } .detailBox { width: min(1120px, calc(100% - 48px)); gap: 24px; padding-top: 25px; } .breadcrumb { display: flex; align-items: center; min-height: 35px; margin-bottom: 14px; gap: 9px; color: #8795a4; font-size: 12px; } .breadcrumb a:hover { color: var(--sp-blue); } .breadcrumb strong { overflow: hidden; max-width: 260px; color: #607285; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .detailHeading { display: none; } .detailBox .details { padding: 0; border: 1px solid var(--sp-line); border-radius: 25px; background: rgba(255, 255, 255, .97); box-shadow: var(--sp-shadow); } .detailTop { position: relative; display: grid; min-height: 285px; padding: 38px 42px; grid-template-columns: 174px minmax(0, 1fr); align-items: center; gap: 34px; overflow: hidden; border-bottom: 1px solid var(--sp-line); background: radial-gradient(circle at 9% 15%, rgba(85, 230, 193, .08), transparent 24%), radial-gradient(circle at 92% 90%, rgba(52, 120, 246, .08), transparent 29%), #fff; } .detailTop::after { position: absolute; top: -54px; right: -48px; width: 190px; height: 190px; border: 1px solid rgba(52, 120, 246, .08); border-radius: 50%; box-shadow: 0 0 0 36px rgba(52, 120, 246, .025), 0 0 0 72px rgba(52, 120, 246, .015); content: ""; } .detailBox .details .pic { width: 164px; height: 226px; margin: 0; border: 5px solid #fff; border-radius: 18px; box-shadow: 0 18px 42px rgba(9, 31, 51, .18); } .detailPanVisual { position: relative; display: grid; width: 164px; height: 164px; place-items: center; border: 1px solid #dce7f1; border-radius: 35px; background: linear-gradient(145deg, #f7f9fc, #eaf1f7); box-shadow: 0 20px 45px rgba(9, 31, 51, .11), inset 0 1px 0 #fff; } .detailPanVisual img { position: relative; z-index: 2; width: 72px; height: 72px; border: 7px solid #fff; border-radius: 22px; background: #fff; box-shadow: 0 13px 28px rgba(9, 31, 51, .14); } .detailPanOrbit { position: absolute; inset: 18px; border: 1px dashed rgba(52, 120, 246, .25); border-radius: 50%; animation: haloSpin 18s linear infinite; } .detailPanOrbit::after { position: absolute; top: 8px; right: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-cyan); box-shadow: 0 0 12px rgba(85, 230, 193, .65); content: ""; } .detailSummary { position: relative; z-index: 1; min-width: 0; } .detailBadges, .detailQuickMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .detailBadges > span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; font-size: 11px; font-weight: 800; } .detailVerified { color: #08775f; background: var(--sp-cyan-soft); } .detailVerified i { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--sp-cyan); box-shadow: 0 0 0 4px rgba(85, 230, 193, .13); } .detailTemporary { color: #9a6200; background: var(--sp-yellow-soft); } .detailPermanent { color: #2358c6; background: #edf3ff; } .detailBox .details .title { max-width: 690px; margin: 17px 0 0; color: var(--sp-ink); font-size: clamp(25px, 3vw, 34px); font-weight: 900; line-height: 1.42; letter-spacing: -.035em; text-align: left; } .detailIntro { max-width: 690px; margin-top: 13px; color: var(--sp-muted); font-size: 13px; line-height: 1.8; } .detailQuickMeta { margin-top: 18px; color: #5f7286; font-size: 12px; } .detailQuickMeta span { padding: 6px 10px; border: 1px solid #e2e9f0; border-radius: 8px; background: #f8fafc; } .detailFacts { padding: 28px 42px 8px; } .detailBox .details .cat { padding: 14px 0; border-bottom-color: #ebf0f5; } .detailBox .details .cat .l { width: 94px; color: #7e8e9e; font-size: 13px; font-weight: 700; } .detailBox .details .cat .r { color: #334a60; font-size: 14px; line-height: 1.9; } .detailDescriptionRow { display: grid !important; grid-template-columns: 94px minmax(0, 1fr); } .detailFactGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; } .detailFactGrid .cat { display: grid; grid-template-columns: 94px minmax(0, 1fr); } .detailFactGrid .cat .r { display: flex; align-items: center; } .detailCode { color: #d94a42 !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px !important; font-weight: 900; letter-spacing: .08em; } .detailUrlRow { display: grid !important; grid-template-columns: 94px minmax(0, 1fr); } .detailUrl { display: block; overflow: hidden; max-width: 100%; padding: 11px 14px; border: 1px solid #dce7f3; border-radius: 11px; color: var(--sp-blue-deep) !important; background: #f1f6ff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .detailBox .details > .btns { margin: 0; padding: 25px 42px 34px; justify-content: flex-start; } .detailBox .details .btns .btn { min-width: 136px; height: 45px; margin: 0 10px 0 0; line-height: 45px; border: 1px solid #e0e8f0; border-radius: 12px; color: #41576c; background: #f5f8fb; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease; } .detailBox .details .btns .btn:hover { transform: translateY(-2px); } .detailBox .details .btns .btn.btnCol { border-color: var(--sp-blue-deep); background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-deep)); box-shadow: 0 10px 24px rgba(52, 120, 246, .21); } .detailBox .samelistNav { margin: 34px 0 15px; color: var(--sp-ink); font-size: 21px; font-weight: 900; } .detailBox .details.samelistBox { padding: 19px 24px; border-radius: 20px; box-shadow: var(--sp-shadow-soft); } .samelist .item p { padding: 9px 11px; border-radius: 8px; color: #42586d; transition: color .18s ease, background .18s ease; } .samelist .item:hover p { color: var(--sp-blue-deep); background: #f0f5ff; } .detailBox .right { width: 260px; margin-top: 49px; } .detailBox .right .nav { padding: 0 0 12px; color: var(--sp-ink); font-size: 15px; font-weight: 850; } .detailBox .right .box { min-height: 0; padding: 12px; border: 1px solid var(--sp-line); border-radius: 18px; box-shadow: var(--sp-shadow-soft); } .dialogUrlBox { border-radius: 22px; } .dialogUrlBox .el-dialog { border: 1px solid var(--sp-line); border-radius: 22px; box-shadow: 0 28px 85px rgba(5, 20, 34, .22); } .footerBox { margin-top: 24px; padding: 38px 0; color: #8297aa; background: radial-gradient(circle at 12% 0, rgba(85, 230, 193, .08), transparent 25%), #061522; } .footerBox .box { width: min(1240px, calc(100% - 48px)); } .footerBrand strong { font-weight: 850; } .footerBrand p { color: #72879a; line-height: 1.7; } .headerBox.isScrolled { box-shadow: 0 12px 38px rgba(9, 31, 51, .09); } .homeExperience .headerBox.isScrolled { background: rgba(5, 19, 31, .975); box-shadow: 0 12px 40px rgba(0, 8, 17, .25); } @media (max-width: 1080px) { .heroContent { width: 64%; margin-left: 48px; } .heroNetwork { right: 4px; width: 390px; height: 390px; opacity: .76; transform: translateY(-50%) scale(.9) perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); } .home.homeNO { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .heroContent { width: calc(100% - 88px); } .heroNetwork { right: -100px; opacity: .22; } .answerSection { grid-template-columns: 1fr; } .answerLead { padding: 40px; } .capabilityStrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .capabilityStrip > div:nth-child(3)::before { display: none; } .capabilityStrip > div:nth-child(-n+2) { border-bottom: 1px solid var(--sp-line); } .detailBox .right { display: none; } } @media (max-width: 768px) { html, body { font-size: 16px; } .headerBox, .headerKox { height: 64px; } .headerBox .box { width: calc(100% - 28px); padding: 0; } .headerBox .box .logoBox .title { font-size: 18px; } .homeExperience .headerBox .box .navs .iconfont { color: #fff; } .homeBox { width: calc(100% - 24px); padding-top: 12px; } .homeHero { min-height: 0; border-radius: 24px; } .heroContent { width: calc(100% - 38px); margin: 0 auto; padding: 42px 0 37px; } .heroNetwork, .particleField { display: none; } .heroEyebrow { margin-bottom: 15px; font-size: 10px; } .homeHero h1 { font-size: clamp(36px, 11vw, 48px); line-height: 1.08; } .heroDescription { margin-top: 17px; font-size: 14px; line-height: 1.8; } .searchBox .heroSearch { height: 59px; margin-top: 25px; padding: 4px 4px 4px 15px; border-radius: 16px; } .searchBox .heroSearch input { width: 0; min-width: 0; padding-left: 9px; font-size: 14px; } .searchBox .heroSearch .btn { width: 76px; height: 49px; border-radius: 12px; font-size: 14px; } .platformRow { margin-top: 17px; } .platformLabel { width: 100%; } .platformChip { padding: 5px 7px; font-size: 11px; } .trustRow { display: grid; margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; font-size: 11px; } .capabilityStrip { width: calc(100% - 16px); margin-top: -20px; border-radius: 17px; } .capabilityStrip > div { padding: 17px 14px; } .capabilityStrip strong { font-size: 15px; } .capabilityStrip span { font-size: 10px; } .answerSection { margin-top: 56px; border-radius: 21px; } .answerLead { padding: 31px 25px; } .answerLead h2 { font-size: 27px; } .answerLead p { margin-top: 13px; font-size: 14px; line-height: 1.85; } .answerFlow { padding: 14px 22px; } .answerFlow article { min-height: 84px; grid-template-columns: 45px 1fr; gap: 12px; } .answerFlow article > span { width: 41px; height: 41px; border-radius: 12px; } .answerFlow h3 { font-size: 15px; } .homeDiscover, .valueSection, .faqSection { padding-top: 58px; } .sectionHeading h2 { font-size: 25px; } .home.homeNO, .valueGrid { grid-template-columns: 1fr; } .valueGrid article { min-height: 0; padding: 25px; } .faqSection { padding-bottom: 46px; } .faqList details { padding: 0 20px; } .faqList summary { padding: 20px 40px 20px 0; font-size: 14px; } .networkSearchPage { width: calc(100% - 24px); padding: 17px 0 53px; } .networkSearchHero { min-height: 0; padding: 30px 22px 35px; border-radius: 22px; } .networkSearchHero h1 { font-size: 29px; } .networkSearchHero .networkHeroCopy p { font-size: 13px; line-height: 1.75; } .networkSearchForm { height: 57px; margin-top: 22px; padding-left: 14px; border-radius: 15px; } .networkSearchForm input { width: 0; padding: 0 8px; font-size: 14px; } .networkSearchForm button { min-width: 0; height: 47px; padding: 0 15px; border-radius: 12px; font-size: 13px; } .networkTrustRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } .networkWorkspace { width: calc(100% - 10px); margin-top: -13px; border-radius: 19px; } .networkToolbar { padding: 21px 17px 17px; } .networkPanTabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .networkPanTabs button { min-width: 0; height: 42px; padding: 0 7px; font-size: 12px; } .networkResultHeader { padding: 0 17px; } .networkResultList { padding: 5px 12px 15px; } .networkResultCard { display: block; padding: 18px 4px; } .networkResultSource { flex-basis: 42px; width: 42px; height: 42px; margin-right: 11px; border-radius: 12px; } .networkResultSource img { width: 25px; height: 25px; } .networkResultTitle { display: -webkit-box; font-size: 15px; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .networkGetButton { width: 100%; height: 41px; margin-top: 14px; } .networkResultActions { display: grid; margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .networkResultActions .networkDetailButton, .networkResultActions .networkGetButton { width: 100%; min-width: 0; height: 41px; margin: 0; } .detailBox { display: block; width: calc(100% - 24px); padding-top: 14px; } .detailBox .left { width: 100%; padding: 0; } .breadcrumb { overflow: hidden; margin-bottom: 8px; white-space: nowrap; } .detailBox .details { margin-top: 0; border-radius: 20px; } .detailTop { display: block; min-height: 0; padding: 27px 21px; } .detailBox .details .pic, .detailPanVisual { width: 118px; height: 158px; margin: 0 0 24px; border-radius: 18px; } .detailPanVisual { height: 118px; } .detailPanVisual img { width: 57px; height: 57px; border-radius: 18px; } .detailBox .details .title { margin-top: 14px; font-size: 23px; line-height: 1.48; } .detailFacts { padding: 20px 21px 4px; } .detailDescriptionRow, .detailUrlRow, .detailFactGrid .cat { display: block !important; } .detailFactGrid { grid-template-columns: 1fr; } .detailBox .details .cat .l { width: auto; margin-bottom: 4px; } .detailBox .details > .btns { padding: 22px 21px 27px; gap: 9px; } .detailBox .details .btns .btn { min-width: 0; margin: 0; } .detailBox .details.samelistBox { padding: 13px 14px; } .samelist .item { width: 100%; } .footerBox { padding: 32px 20px; } .footerBox .box { width: 100%; } } @media (max-width: 390px) { .platformChip img { display: none; } .trustRow span:last-child { grid-column: 1 / -1; } .networkSearchForm > i { display: none; } } @media (prefers-reduced-motion: reduce) { .particleField { display: none !important; } .networkHalo, .networkNode, .networkCoreSignal, .networkHeroScanner, .detailPanOrbit { animation: none !important; } } @media (forced-colors: active) { .homeHero, .networkSearchHero, .answerLead, .footerBox { border: 1px solid CanvasText; } } :root { --duck-yellow: #f7b500; --duck-yellow-deep: #d99600; --duck-yellow-soft: #fff8df; --duck-ink: #16181d; --duck-text: #283341; --duck-muted: #778291; --duck-line: #e3e7ec; --duck-line-dark: #cfd5dc; --duck-canvas: #f5f6f8; --duck-surface: #fff; --duck-blue: #245ec7; --duck-green: #168367; --duck-shadow: 0 8px 28px rgba(24, 32, 43, .06); } .accountPage { background: #f4f6f8; } .accountShell { width: min(1120px, calc(100% - 32px)); margin: 34px auto 56px; } .accountAuthShell { display: grid; min-height: 620px; place-items: center; } .accountAuthCard, .accountTopbar, .accountPanel { box-sizing: border-box; border: 1px solid #dfe4e9; border-radius: 14px; background: #fff; } .accountAuthCard { width: min(480px, 100%); padding: 38px 42px; box-shadow: 0 18px 50px rgba(18, 28, 40, .08); } .accountAuthBrand { display: grid; width: 54px; height: 54px; margin-bottom: 24px; border-radius: 13px; background: #ffb800; color: #172033; font-size: 28px; font-weight: 900; place-items: center; } .accountEyebrow { margin: 0 0 8px; color: #9b7000; font-size: 13px; font-weight: 800; letter-spacing: .08em; } .accountAuthCard h1, .accountTopbar h1, .accountPanel h2 { margin: 0; color: #111827; line-height: 1.25; } .accountAuthCard h1, .accountTopbar h1 { font-size: 30px; } .accountPanel h2 { font-size: 20px; } .accountLead, .accountPanelHint { color: #687386; line-height: 1.75; } .accountLead { margin: 12px 0 24px; } .accountForm { display: grid; gap: 16px; } .accountForm label { display: grid; gap: 7px; color: #283447; font-size: 14px; font-weight: 700; } .accountForm label em { color: #8b95a3; font-size: 12px; font-style: normal; font-weight: 400; } .accountForm input, .accountForm select, .accountForm textarea, .accountKeyRow input { box-sizing: border-box; width: 100%; border: 1px solid #cfd6df; border-radius: 8px; outline: 0; background: #fff; color: #172033; font: inherit; } .accountForm input, .accountForm select, .accountKeyRow input { height: 46px; padding: 0 13px; } .accountForm textarea { min-height: 92px; padding: 12px 13px; resize: vertical; } .accountForm input:focus, .accountForm select:focus, .accountForm textarea:focus, .accountKeyRow input:focus { border-color: #d99d00; box-shadow: 0 0 0 3px rgba(255, 184, 0, .14); } .accountHoney { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .accountPrimaryButton, .accountGhostButton, .accountKeyRow button { border: 0; border-radius: 8px; cursor: pointer; font-weight: 800; } .accountPrimaryButton { min-height: 46px; padding: 0 20px; background: #ffb800; color: #172033; } .accountPrimaryButton:hover { background: #f2ab00; } .accountPrimaryButton:disabled, .accountGhostButton:disabled, .accountKeyRow button:disabled { cursor: wait; opacity: .6; } .accountSwitch { margin: 22px 0 8px; color: #697587; text-align: center; } .accountSwitch a, .accountBackLink, .accountPanelHead a { color: #8c6500; font-weight: 700; } .accountBackLink { display: inline-block; margin-top: 14px; font-size: 13px; } .accountFormMessage { min-height: 20px; margin-top: 10px; font-size: 13px; } .accountFormMessage.is-error { color: #d83232; } .accountFormMessage.is-success { color: #14805e; } .accountTopbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 28px 32px; } .accountTopbar .accountLead { margin: 8px 0 0; } .accountGhostButton { min-height: 42px; padding: 0 18px; border: 1px solid #d6dce4; background: #fff; color: #3d495a; } .accountGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; } .accountColumn { display: grid; min-width: 0; align-content: start; gap: 18px; } .accountPanel { min-width: 0; padding: 26px; } .accountPanelHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .accountPanelHead > span, .accountPanelHead > a { flex: 0 0 auto; color: #7b8797; font-size: 13px; } .accountPanelHint { margin: 13px 0 18px; font-size: 14px; } .accountKeyRow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; } .accountKeyRow input { background: #f7f8fa; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .accountKeyRow button { min-width: 62px; padding: 0 12px; border: 1px solid #d5dce5; background: #fff; color: #445064; } .accountApiMeta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: #7c8796; font-size: 13px; } .accountCompactButton { min-height: 38px; } .accountReviewPanel { margin-top: 18px; } .accountFormSplit { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; } .accountRecordList, .accountSubmissionList { display: grid; margin-top: 16px; } .accountHistoryPanel { padding-bottom: 18px; } .accountHistoryPanel .accountRecordList { max-height: 286px; margin-top: 10px; padding-right: 8px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .accountHistoryPanel .accountRecordList a { min-height: 28px; padding: 10px 2px; } .accountHistoryPanel .accountRecordList strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .accountHistoryPanel .accountRecordList span { flex: 0 0 auto; } .accountRecordList a, .accountSubmissionList article { padding: 13px 0; border-top: 1px solid #edf0f3; } .accountRecordList a:first-child, .accountSubmissionList article:first-child { border-top: 0; } .accountRecordList a { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #1f2937; } .accountRecordList span, .accountSubmissionList span { color: #8a94a3; font-size: 12px; } .accountSubmissionList article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; } .accountSubmissionList article > div { display: grid; gap: 5px; } .accountSubmissionList article > b { align-self: start; padding: 4px 8px; border-radius: 999px; background: #fff3cd; color: #8a6500; font-size: 12px; } .accountSubmissionList article > b.is-status-1 { background: #dff7ee; color: #117a59; } .accountSubmissionList article > b.is-status-2 { background: #fde8e8; color: #b22e2e; } .accountSubmissionList article > p { grid-column: 1 / -1; margin: 2px 0 0; color: #778293; font-size: 13px; } .accountEmpty { margin-top: 18px; padding: 24px; border-radius: 9px; background: #f7f8fa; color: #7b8696; text-align: center; } @media (max-width: 768px) { .accountShell { width: calc(100% - 24px); margin: 18px auto 34px; } .accountAuthShell { min-height: auto; } .accountAuthCard, .accountTopbar, .accountPanel { border-radius: 11px; } .accountAuthCard { padding: 28px 22px; } .accountAuthCard h1, .accountTopbar h1 { font-size: 25px; } .accountTopbar { align-items: flex-start; padding: 22px; } .accountGrid { display: flex; flex-direction: column; gap: 12px; } .accountColumn { display: contents; } .accountApiPanel { order: 1; } .accountSubmitPanel { order: 2; } .accountHistoryPanel { order: 3; } .accountPanel { padding: 21px 18px; } .accountFormSplit { grid-template-columns: 1fr; } .accountKeyRow { grid-template-columns: minmax(0, 1fr) auto; } .accountKeyRow button:last-child { grid-column: 1 / -1; min-height: 40px; } .accountRecordList a { align-items: flex-start; flex-direction: column; gap: 5px; } .accountHistoryPanel .accountRecordList strong { width: 100%; } } @media (max-width: 420px) { .accountTopbar { flex-direction: column; gap: 18px; } .accountGhostButton { width: 100%; } } html, body { color: var(--duck-ink); background: var(--duck-canvas); font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body::before, .headBg { display: none !important; } ::selection { color: var(--duck-ink); background: #ffe28b; } :where(a, button, summary, [role="button"]):focus-visible { outline: 2px solid var(--duck-ink) !important; outline-offset: 3px; } .heroSearch input:focus-visible, .networkSearchForm input:focus-visible, .headerBox .search input:focus-visible, .searchDetail input:focus-visible, .searchList input:focus-visible { outline: 0 !important; } .headerBox, .homeExperience .headerBox, .headerBox.isScrolled, .homeExperience .headerBox.isScrolled { height: 70px; border-bottom: 1px solid var(--duck-line); background: rgba(255, 255, 255, .98); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .headerKox { height: 70px; } .headerBox .box { width: min(1180px, calc(100% - 40px)); } .brandMark { width: 38px; height: 38px; border: 1px solid #e2a700; border-radius: 7px; color: var(--duck-ink); background: var(--duck-yellow); box-shadow: none; font-size: 18px; } .headerBox .box .logoBox .title, .homeExperience .headerBox .box .logoBox .title { margin-left: 10px; color: var(--duck-ink); font-size: 19px; font-weight: 800; letter-spacing: -.03em; } .headerBox .box .navs { gap: 25px; } .headerBox .box .navs .item, .headerBox .box .navs a, .headerBox .box .navs .navLink, .homeExperience .headerBox .box .navs .item, .homeExperience .headerBox .box .navs a, .homeExperience .headerBox .box .navs .navLink { color: #4f5966; font-size: 14px; font-weight: 650; } .headerBox .box .navs .item:hover, .headerBox .box .navs a:hover, .homeExperience .headerBox .box .navs .item:hover, .homeExperience .headerBox .box .navs a:hover { color: var(--duck-ink); } .headerBox .box .navs .navLink::after { bottom: -7px; height: 2px; border-radius: 0; background: var(--duck-yellow); } .headerBox .box .search, .homeExperience .headerBox .box .search { max-width: 350px; height: 40px; margin-right: 31px; border: 1px solid var(--duck-line-dark); border-radius: 6px; color: var(--duck-ink); background: #f8f9fa; box-shadow: none; } .headerBox .box .search:focus-within, .homeExperience .headerBox .box .search:focus-within { border-color: #9da6b1; background: #fff; box-shadow: 0 0 0 3px rgba(247, 181, 0, .16); } .headerBox .box .search input, .homeExperience .headerBox .box .search input { color: var(--duck-ink); } .headerBox .box .search input::placeholder, .homeExperience .headerBox .box .search input::placeholder { color: #99a1ab; } .headerBox .box .search .btn { width: 48px; height: 38px; color: var(--duck-ink); background: var(--duck-yellow); } .homeExperience .headerBox .search { opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease; } .homeExperience .headerBox.isScrolled .search { opacity: 1; pointer-events: auto; transform: none; } .homeBox { display: flex; width: min(1180px, calc(100% - 40px)); padding-top: 30px; flex-direction: column; } .homeHero { order: 1; min-height: 0; overflow: visible; border: 1px solid var(--duck-line); border-top: 5px solid var(--duck-yellow); border-radius: 10px; color: var(--duck-ink); background: var(--duck-surface); box-shadow: var(--duck-shadow); } .homeHero::before, .homeHero::after, .particleField, .heroNoise, .heroGlow, .heroNetwork { display: none !important; } .heroContent { width: min(930px, calc(100% - 80px)); margin: 0 auto; padding: 58px 0 46px; text-align: center; } .heroEyebrow { display: inline-flex; min-height: 27px; margin: 0 0 14px; padding: 0 10px; align-items: center; border-radius: 4px; color: #755600; background: var(--duck-yellow-soft); font-size: 12px; font-weight: 750; letter-spacing: .04em; } .homeHero h1 { max-width: none; margin: 0; color: var(--duck-ink); font-size: clamp(38px, 4.2vw, 54px); font-weight: 900; line-height: 1.2; letter-spacing: -.055em; } .heroDescription { max-width: 720px; margin: 13px auto 0; color: #687382; font-size: 15px; line-height: 1.8; } .smartSearchShell { position: relative; z-index: 35; width: min(860px, 100%); margin: 27px auto 0; text-align: left; } .searchBox .heroSearch { width: 100%; height: 62px; margin: 0; padding: 5px 6px 5px 20px; border: 2px solid var(--duck-ink); border-radius: 8px; background: #fff; box-shadow: 0 5px 0 var(--duck-ink); transition: box-shadow .18s ease, transform .18s ease; } .searchBox .heroSearch:focus-within { border-color: var(--duck-ink); transform: translateY(2px); box-shadow: 0 3px 0 var(--duck-ink); } .heroSearch .searchLead { color: #7d8793; } .searchBox .heroSearch input { padding-left: 12px; color: var(--duck-ink); font-size: 16px; } .searchBox .heroSearch .btn { width: 108px; height: 48px; border: 0; border-radius: 5px; color: var(--duck-ink); background: var(--duck-yellow); box-shadow: none; font-size: 15px; font-weight: 850; } .searchBox .heroSearch .btn:hover { background: #ffc629; box-shadow: none; transform: none; } .homeHotWords { display: flex; min-height: 28px; margin-top: 15px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px 15px; color: var(--duck-muted); font-size: 12px; } .homeHotWords > span { color: #9a7100; font-weight: 750; } .homeHotWords a { color: #606b78; } .homeHotWords a:hover { color: var(--duck-ink); text-decoration: underline; text-decoration-color: var(--duck-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; } .platformRow { margin-top: 20px; justify-content: center; gap: 9px 20px; } .platformLabel { margin-right: 0; color: #929aa5; font-size: 12px; } .platformChip { padding: 0; border: 0; border-radius: 0; color: #56616e; background: transparent; backdrop-filter: none; font-size: 12px; } .platformChip img { border-radius: 4px; } .searchAssist { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; padding: 17px 20px 19px; border: 1px solid var(--duck-line-dark); border-radius: 7px; color: var(--duck-ink); background: #fff; box-shadow: 0 14px 35px rgba(21, 28, 38, .13); } .searchAssist[hidden] { display: none !important; } .searchAssistGroup + .searchAssistGroup { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--duck-line); } .searchAssistHeading { display: flex; min-height: 25px; margin-bottom: 7px; align-items: center; gap: 8px; } .searchAssistHeading span { font-size: 13px; font-weight: 800; } .searchAssistHeading small { color: #9aa2ac; font-size: 11px; } .searchAssistHeading button { margin-left: auto; padding: 3px 0; color: #7f8995; background: transparent; cursor: pointer; font-size: 11px; } .searchAssistHeading button:hover { color: #c53932; } .searchAssistWords { display: flex; flex-wrap: wrap; gap: 7px 8px; } .searchAssistWords a, .searchAssistWords button { overflow: hidden; max-width: 220px; padding: 6px 10px; border: 1px solid #e4e8ed; border-radius: 5px; color: #53606e; background: #f8f9fa; cursor: pointer; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .searchAssistWords a::before, .searchAssistWords button::before { display: none; } .searchAssistWords a:hover, .searchAssistWords button:hover { border-color: #d7a51b; color: var(--duck-ink); background: var(--duck-yellow-soft); } .homeDiscover { order: 2; } .capabilityStrip { order: 3; } .answerSection { order: 4; } .valueSection { order: 5; } .faqSection { order: 6; } .homeDiscover, .valueSection, .faqSection { padding-top: 50px; } .homeDiscover { padding-top: 46px; } .sectionHeading { margin-bottom: 19px; align-items: end; } .sectionKicker, .answerLead .sectionKicker { color: #987000; font-family: inherit; font-size: 12px; font-weight: 750; letter-spacing: .04em; } .sectionHeading h2 { margin-top: 4px; color: var(--duck-ink); font-size: 27px; font-weight: 850; letter-spacing: -.035em; } .sectionHeading > p { max-width: 470px; color: var(--duck-muted); font-size: 13px; line-height: 1.7; } .home.homeNO { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .home .block, .home.homeNO .block { overflow: hidden; border: 1px solid var(--duck-line); border-radius: 8px; background: #fff; box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; } .home .block:hover, .home.homeNO .block:hover { border-color: #cbd1d8; box-shadow: 0 7px 22px rgba(26, 34, 44, .07); transform: none; } .home .nav { min-height: 53px; padding: 4px 18px 8px; border-bottom: 1px solid #edf0f3; color: var(--duck-ink); background: #fafbfc; font-size: 15px; font-weight: 800; } .home .nav::after { width: 5px; height: 16px; margin-left: auto; border-radius: 0; background: var(--duck-yellow); box-shadow: none; } .home.homeNO .content .list { padding: 8px 12px 13px; } .home.homeNO .content .list .item p { padding: 8px 8px 8px 29px; border-radius: 4px; color: #465361; font-size: 13px; } .home.homeNO .content .list .item p > span { left: 7px; color: #a1a8b1; font-family: inherit; } .home.homeNO .content .list .item:hover p { color: var(--duck-ink); background: var(--duck-yellow-soft); transform: none; } .home .content .list .item .img { background: #f0f2f5; } .capabilityStrip { position: relative; z-index: 1; display: grid; width: 100%; margin: 38px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--duck-line); border-radius: 8px; background: #fff; box-shadow: none; backdrop-filter: none; } .capabilityStrip > div { padding: 19px 22px; } .capabilityStrip > div + div::before { top: 16px; bottom: 16px; background: var(--duck-line); } .capabilityStrip strong { font-size: 16px; font-weight: 850; } .capabilityStrip span { margin-top: 3px; color: var(--duck-muted); font-size: 11px; } .answerSection { display: grid; overflow: hidden; margin-top: 50px; grid-template-columns: .9fr 1.1fr; border: 1px solid var(--duck-line); border-radius: 8px; background: #fff; box-shadow: none; } .answerLead { position: relative; overflow: visible; padding: 39px 40px; border-right: 1px solid var(--duck-line); color: var(--duck-ink); background: #fafbfc; } .answerLead::after { display: none; } .answerLead h2 { margin-top: 6px; color: var(--duck-ink); font-size: 28px; } .answerLead p { margin-top: 14px; color: #65717f; font-size: 14px; line-height: 1.9; } .answerFlow { padding: 17px 32px; } .answerFlow article { min-height: 83px; padding: 16px 0; grid-template-columns: 42px 1fr; gap: 14px; } .answerFlow article > span { width: 38px; height: 38px; border: 1px solid #ead48a; border-radius: 5px; color: #6f5200; background: var(--duck-yellow-soft); font-family: inherit; font-size: 14px; } .answerFlow h3 { font-size: 15px; } .answerFlow p { font-size: 12px; } .valueGrid { overflow: hidden; gap: 0; border: 1px solid var(--duck-line); border-radius: 8px; background: #fff; } .valueGrid article, .valueGrid article:hover { min-height: 205px; padding: 27px; border: 0; border-right: 1px solid var(--duck-line); border-radius: 0; background: #fff; box-shadow: none; transform: none; } .valueGrid article:last-child { border-right: 0; } .valueGrid article::after { display: none; } .valueIcon, .valueGrid article:nth-child(2) .valueIcon, .valueGrid article:nth-child(3) .valueIcon { width: 39px; height: 39px; border: 1px solid #ead48a; border-radius: 5px; color: #6f5200; background: var(--duck-yellow-soft); font-family: inherit; font-size: 15px; } .valueGrid h3 { margin-top: 20px; font-size: 17px; } .valueGrid p { font-size: 13px; line-height: 1.8; } .faqSection { padding-bottom: 60px; } .faqList { border: 1px solid var(--duck-line); border-radius: 8px; background: #fff; box-shadow: none; } .faqList details { border-bottom-color: var(--duck-line); } .faqList summary::after { border-radius: 4px; color: var(--duck-ink); background: var(--duck-yellow-soft); } .networkSearchPage { width: min(1120px, calc(100% - 40px)); padding: 28px 0 56px; } .networkSearchHero { min-height: 0; overflow: visible; padding: 28px 30px 31px; border: 1px solid var(--duck-line); border-radius: 8px; color: var(--duck-ink); background: #fff; box-shadow: none; } .networkSearchHero::after, .networkHeroGrid, .networkHeroScanner, .networkTrustRow { display: none !important; } .networkHeroCopy { max-width: none; } .networkEyebrow { color: #8b6804; font-family: inherit; font-size: 12px; font-weight: 750; letter-spacing: .04em; } .networkEyebrow i { display: none; } .networkSearchHero h1 { margin-top: 5px; color: var(--duck-ink); font-size: clamp(26px, 3vw, 35px); line-height: 1.35; letter-spacing: -.035em; } .networkSearchHero .networkHeroCopy p { margin-top: 6px; color: var(--duck-muted); font-size: 13px; } .networkSmartSearch { width: 100%; margin: 20px 0 0; } .networkSearchForm { width: 100%; height: 58px; margin: 0; padding: 5px 6px 5px 18px; border: 2px solid var(--duck-ink); border-radius: 7px; background: #fff; box-shadow: 0 4px 0 var(--duck-ink); } .networkSearchForm:focus-within { border-color: var(--duck-ink); box-shadow: 0 2px 0 var(--duck-ink); transform: translateY(2px); } .networkSearchForm input { color: var(--duck-ink); } .networkSearchForm button { height: 44px; border-radius: 4px; color: var(--duck-ink); background: var(--duck-yellow); box-shadow: none; } .networkSearchForm button:hover { background: #ffc629; transform: none; } .networkWorkspace { width: 100%; margin: 20px 0 0; overflow: hidden; border: 1px solid var(--duck-line); border-radius: 8px; background: #fff; box-shadow: none; } .networkToolbar { padding: 18px 22px 15px; border-bottom: 1px solid var(--duck-line); background: #fafbfc; } .networkToolbarTitle > span { font-size: 14px; font-weight: 800; } .networkToolbarTitle p { margin-top: 2px; font-size: 11px; } .networkPanTabs { gap: 7px; } .networkPanTabs button { position: relative; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid #dfe3e8; border-radius: 5px; color: #596574; background: #fff; box-shadow: none; } .networkPanLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .networkPanTabs button:hover { border-color: #bfc6ce; color: var(--duck-ink); background: #fff; transform: none; } .networkPanTabs button.active { border-color: #d29b00; color: var(--duck-ink); background: var(--duck-yellow); box-shadow: none; } .networkLocalIcon, .networkPanTabs button img { border-radius: 4px; } .networkResultHeader { min-height: 50px; padding: 0 22px; border: 0; border-bottom: 1px solid var(--duck-line); background: #fff; } .networkResultDot, .networkResultDot.loading { border-radius: 50%; } .networkResultDot.loading { background: var(--duck-yellow); box-shadow: 0 0 0 4px rgba(247, 181, 0, .15); } .networkResultCount b { color: var(--duck-blue); } .networkSearchProgress { position: relative; display: grid; min-height: 82px; padding: 15px 22px 18px; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 14px; overflow: hidden; border-bottom: 1px solid #f0dfaa; background: var(--duck-yellow-soft); } .searchRadar { width: 32px; height: 32px; border: 3px solid #ead796; border-top-color: var(--duck-ink); border-radius: 50%; background: transparent; animation: duckSpin .85s linear infinite; } .searchRadar::before, .searchRadar::after, .searchRadar i, .searchRadar span, .searchProgressSignal { display: none; } .searchProgressCopy strong { color: var(--duck-ink); font-size: 14px; font-weight: 800; } .searchProgressCopy p { margin-top: 3px; color: #786c4b; font-size: 12px; line-height: 1.55; } .searchProgressTrack { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; overflow: hidden; background: rgba(199, 155, 27, .13); } .searchProgressTrack span { display: block; width: 22%; height: 100%; background: var(--duck-yellow-deep); animation: duckTrack 1.55s ease-in-out infinite; } @keyframes duckSpin { to { transform: rotate(360deg); } } @keyframes duckTrack { from { transform: translateX(-110%); } to { transform: translateX(520%); } } .networkResultList { padding: 0 22px; } .networkResultSection { background: #fff; } .networkResultSection--public { border-top: 8px solid #f2f4f6; } .networkResultSectionHead { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px; border-bottom: 1px solid var(--duck-line); background: #fafbfc; } .networkResultSectionHead > div { display: flex; align-items: center; gap: 11px; min-width: 0; } .networkResultSectionHead strong { color: var(--duck-ink); font-size: 14px; font-weight: 800; } .networkResultSectionHead p { margin: 0; color: #7a8794; font-size: 12px; line-height: 1.5; text-align: right; } .networkSectionBadge, .networkInlineOrigin { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 4px; color: #715300; background: #fff0bd; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; } .networkSectionBadge--local, .networkInlineOrigin { color: #087561; background: #ddf7ef; } .networkInlineOrigin { min-height: 20px; padding: 0 6px; font-size: 10px; } .networkResultSection--local .networkResultCard::before { background: #26b998; } .networkResultSection--local .networkResultSectionHead { background: #f6fcfa; } .networkResultCard { min-height: 94px; padding: 17px 8px; border-bottom-color: var(--duck-line); animation: duckResultIn .22s ease both; } .networkResultCard::before { width: 3px; background: var(--duck-yellow); } .networkResultCard:hover { background: #fafbfc; } @keyframes duckResultIn { from { opacity: .25; } to { opacity: 1; } } .networkResultSource { border-radius: 7px; background: #f3f5f7; } .networkResultTitle { color: var(--duck-ink); font-size: 15px; font-weight: 800; } .networkGetButton, .networkDetailButton { height: 40px; border-radius: 5px; } .networkDetailButton { color: #53606e; background: #fff; } .networkGetButton { border-color: #e1ab13; color: var(--duck-ink); background: var(--duck-yellow); } .networkGetButton:hover { border-color: #cf9900; color: var(--duck-ink); background: #ffc629; transform: none; } .networkDetailButton:hover { color: var(--duck-ink); background: #f5f6f8; transform: none; } .networkLoadingCards { padding: 10px 0; } .networkEmptyState { padding: 62px 20px 68px; } .networkEmptyIcon { border-radius: 7px; background: #f0f2f4; } .networkNotice { margin: 0; padding: 14px 22px; border-top: 1px solid var(--duck-line); color: #77828f; background: #fafbfc; font-size: 12px; line-height: 1.7; text-align: left; } .networkNotice span { display: inline-block; margin-right: 8px; padding: 2px 6px; border-radius: 3px; color: #775800; background: var(--duck-yellow-soft); font-weight: 750; } .detailBox { width: min(1180px, calc(100% - 40px)); gap: 26px; align-items: flex-start; } .breadcrumb { margin-bottom: 12px; } .detailBox .left { min-width: 0; overflow: visible; } .detailBox .right { width: 258px; margin: 35px 0 0; flex: 0 0 258px; } .detailBox .details { overflow: hidden; border: 1px solid var(--duck-line); border-radius: 8px; background: #fff; box-shadow: none; } .detailTop { display: grid; min-height: 0; padding: 30px 34px; grid-template-columns: 118px minmax(0, 1fr); gap: 28px; border-bottom: 1px solid var(--duck-line); background: #fff; } .detailTop::after { display: none; } .detailBox .details .pic, .detailPanVisual { width: 112px; height: 112px; margin: 0; border: 1px solid var(--duck-line); border-radius: 8px; background: #f6f7f9; box-shadow: none; } .detailPanVisual img { width: 56px; height: 56px; border: 5px solid #fff; border-radius: 9px; box-shadow: 0 5px 15px rgba(24, 32, 43, .10); } .detailBox .details .pic { height: 154px; } .detailSummary { min-width: 0; } .detailPanOrbit { display: none; } .detailBadges > span, .detailQuickMeta span { border-radius: 4px; } .detailVerified { color: #146c59; background: #eaf7f3; } .detailTemporary { background: var(--duck-yellow-soft); } .detailPermanent { color: #3c5e91; background: #eef3f9; } .detailHealthBadge { border: 1px solid transparent; } .detailHealth-healthy { color: #18704e; border-color: #cdebdc; background: #edf9f3; } .detailHealth-warning { color: #9a5b08; border-color: #f2ddb9; background: #fff7e8; } .detailHealth-unknown, .detailHealth-unchecked { color: #667586; border-color: #dfe5eb; background: #f5f7f9; } .detailBox .details .title { max-width: none; margin-top: 14px; font-size: clamp(24px, 3vw, 32px); line-height: 1.38; letter-spacing: -.02em; } .detailTrustPanel { display: grid; padding: 22px 34px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .detailTrustItem { display: grid; min-width: 0; padding: 17px 18px; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; border: 1px solid #e1e8ee; border-radius: 8px; background: #f8fafb; } .detailTrustIcon { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #8493a2; box-shadow: 0 0 0 4px rgba(132, 147, 162, .12); } .detailTrust-healthy .detailTrustIcon { background: #2faf78; box-shadow: 0 0 0 4px rgba(47, 175, 120, .13); } .detailTrust-warning .detailTrustIcon { background: #e49a2f; box-shadow: 0 0 0 4px rgba(228, 154, 47, .14); } .detailStoragePolicy .detailTrustIcon { background: var(--duck-blue); box-shadow: 0 0 0 4px rgba(46, 111, 205, .12); } .detailTrustItem h2 { margin: 0; color: var(--duck-ink); font-size: 14px; line-height: 1.5; } .detailTrustItem p { margin: 5px 0 0; color: #657383; font-size: 12px; line-height: 1.65; } .detailTrustItem span { display: block; margin-top: 7px; color: #8a96a2; font-size: 11px; } .detailTitleFacts { margin: 16px 34px 0; padding: 16px 18px; border: 1px solid #e4eaf0; border-radius: 8px; background: #fff; } .detailTitleFactsHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .detailTitleFactsHead strong { color: var(--duck-ink); font-size: 13px; } .detailTitleFactsHead span { color: #8c96a1; font-size: 11px; } .detailFactTags { display: flex; margin-top: 12px; flex-wrap: wrap; gap: 8px; } .detailFactTags > span { display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px; border: 1px solid #dde6ee; border-radius: 5px; color: #34495e; background: #f7f9fb; font-size: 12px; font-weight: 700; } .detailFactTags em { margin-right: 7px; color: #8491a0; font-size: 10px; font-style: normal; font-weight: 600; } .detailFacts { padding: 18px 34px 4px; } .detailBox .details .cat { min-width: 0; padding: 13px 0; } .detailBox .details .cat .l { width: auto; min-width: 0; color: #7b8794; font-size: 13px; font-weight: 700; } .detailBox .details .cat .r { width: auto !important; min-width: 0; color: #303b47; flex: initial; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; word-break: break-word; } .detailDescriptionRow, .detailUrlRow, .detailFactGrid .cat { grid-template-columns: 96px minmax(0, 1fr); } .detailDescriptionRow .r { max-width: 720px; } .detailFactGrid { column-gap: 30px; } .detailFactGrid .cat .r { display: flex; width: auto !important; flex-wrap: wrap; } .detailUrl { display: block; width: 100%; max-width: 720px; box-sizing: border-box; border-radius: 5px; color: var(--duck-blue) !important; background: #f5f7fa; } .detailHealthNotice { margin: 2px 34px 0; padding: 11px 13px; border-left: 3px solid #d7dee5; color: #7b8794; background: #f7f8fa; font-size: 11px; line-height: 1.7; } .detailBox .details > .btns { padding: 18px 34px 28px; gap: 10px; } .detailBox .details .btns .btn { min-width: 132px; margin: 0; border-radius: 5px; box-shadow: none; } .detailBox .details .btns .btn:hover { transform: none; } .detailBox .details .btns .btn.btnCol { border-color: #d69e00; color: var(--duck-ink); background: var(--duck-yellow); box-shadow: none; } .detailBox .details.samelistBox, .detailBox .right .box { border-radius: 8px; box-shadow: none; } .relatedResources { margin-top: 26px; } .relatedHeading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .detailBox .relatedHeading .samelistNav { margin: 0; } .relatedHeading > span { color: #8c96a1; font-size: 12px; } .samelist .item p { border-radius: 4px; } .samelist .item:hover p { color: var(--duck-ink); background: var(--duck-yellow-soft); } .footerBox { margin-top: 20px; padding: 34px 0; color: #9098a1; background: #1d2025; } .footerBox .box { width: min(1180px, calc(100% - 40px)); } .footerBrand p { color: #8f979f; } .dialogUrlBox, .el-dialog.dialogUrlBox { width: min(640px, calc(100vw - 32px)) !important; border: 1px solid rgba(18, 35, 52, .1); border-radius: 18px; overflow: hidden; box-shadow: 0 28px 80px rgba(14, 29, 43, .26); } .dialogUrlBox .el-dialog__header { margin: 0; padding: 22px 24px 0; } .dialogUrlBox .el-dialog__headerbtn { top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 50%; transition: background-color .2s ease, color .2s ease; } .dialogUrlBox .el-dialog__headerbtn:hover { background: #f2f4f7; } .dialogUrlBox .el-dialog__body { padding: 0 38px 38px; } .transferWait { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; padding: 18px 0 8px; text-align: center; color: var(--duck-ink); } .transferWait::before { content: ''; position: absolute; inset: 20px 8px 0; border-radius: 24px; background: radial-gradient(circle at 50% 32%, rgba(255, 188, 25, .13), transparent 34%), linear-gradient(180deg, rgba(247, 249, 251, .3), rgba(247, 249, 251, .86)); pointer-events: none; } .transferLoader, .transferWaitCopy, .transferProgressRail { position: relative; z-index: 1; } .transferLoader { width: 94px; height: 94px; display: grid; place-items: center; } .transferLoaderOrbit { position: absolute; inset: 0; border: 2px solid #e9edf2; border-top-color: var(--duck-yellow); border-right-color: rgba(255, 188, 25, .45); border-radius: 50%; animation: duckSpin 1s cubic-bezier(.55, .2, .35, .8) infinite; } .transferLoaderOrbit::after { content: ''; position: absolute; width: 9px; height: 9px; top: 7px; right: 12px; border-radius: 50%; background: var(--duck-yellow); box-shadow: 0 0 0 5px rgba(255, 188, 25, .14); } .transferLoaderCore { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; color: #172433; background: #ffbd1b; box-shadow: 0 14px 28px rgba(232, 157, 0, .24); font-size: 27px; font-weight: 900; transform: rotate(-3deg); } .transferWait strong { display: block; margin-bottom: 9px; color: #122234; font-size: 22px; font-weight: 850; letter-spacing: -.02em; } .transferWait p { margin: 0; color: var(--duck-muted); font-size: 14px; } .transferProgressRail { width: min(310px, 76%); height: 5px; overflow: hidden; border-radius: 999px; background: #e7ebf0; } .transferProgressRail span { position: absolute; inset: 0 auto 0 -42%; width: 42%; border-radius: inherit; background: linear-gradient(90deg, transparent, #ffbd1b 25%, #f29d00 70%, transparent); animation: duckProgress 1.45s ease-in-out infinite; } @keyframes duckSpin { to { transform: rotate(360deg); } } @keyframes duckProgress { 0% { left: -42%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { .transferLoaderOrbit, .transferProgressRail span { animation-duration: 3s; } } .homeDiscover { order: 2; } .channelSection { order: 3; padding-top: 48px; } .capabilityStrip { order: 4; } .answerSection { order: 5; } .valueSection { order: 6; } .faqSection { order: 7; } .channelGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .channelCard { display: flex; align-items: center; min-width: 0; padding: 18px; border: 1px solid #e6e9ee; border-radius: 14px; background: #fff; color: #182230; box-shadow: 0 8px 24px rgba(16, 24, 40, .045); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .channelCard:hover { border-color: #f0bd31; box-shadow: 0 12px 30px rgba(16, 24, 40, .08); transform: translateY(-2px); } .channelIcon, .channelHeroIcon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #fff4cf; color: #9a6b00; font-size: 19px; font-weight: 900; } .channelCard > span:nth-child(2) { min-width: 0; margin-left: 12px; } .channelCard strong, .channelCard small { display: block; } .channelCard strong { font-size: 15px; } .channelCard small { margin-top: 4px; color: #8a94a6; font-size: 12px; } .channelCard > i { margin-left: auto; color: #c58b00; font-style: normal; font-weight: 800; } .channelPage { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 64px; } .channelPage .breadcrumb { margin-bottom: 18px; } .channelHero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 30px 32px; border: 1px solid #e7eaf0; border-radius: 20px; background: linear-gradient(135deg, #fff 0%, #fffaf0 100%); box-shadow: 0 12px 36px rgba(16, 24, 40, .055); } .channelHeroIcon { width: 62px; height: 62px; border-radius: 18px; font-size: 26px; } .channelHero h1 { margin: 4px 0 7px; color: #101828; font-size: 30px; line-height: 1.25; } .channelHero p { max-width: 720px; margin: 0; color: #667085; font-size: 14px; line-height: 1.75; } .channelTotal { min-width: 112px; padding-left: 24px; border-left: 1px solid #eadfbf; text-align: center; } .channelTotal strong { display: block; color: #9a6b00; font-size: 27px; } .channelTotal span { color: #8a7551; font-size: 12px; } .channelTabs { display: flex; gap: 9px; margin: 18px 0; overflow-x: auto; padding: 2px 1px 7px; scrollbar-width: thin; } .channelTabs a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid #e2e6ec; border-radius: 999px; background: #fff; color: #475467; font-size: 13px; } .channelTabs a span { color: #98a2b3; font-size: 11px; } .channelTabs a.active { border-color: #edb414; background: #ffbd12; color: #111827; font-weight: 800; } .channelTabs a.active span { color: #715100; } .channelContent { overflow: hidden; border: 1px solid #e5e9ef; border-radius: 18px; background: #fff; } .channelListHeading { display: flex; align-items: end; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid #edf0f3; } .channelListHeading h2 { margin: 4px 0 0; color: #182230; font-size: 21px; } .channelListHeading > span { color: #98a2b3; font-size: 12px; } .channelResourceItem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 86px; margin: 0 24px; border-bottom: 1px solid #edf0f3; color: #182230; } .channelResourceItem:last-child { border-bottom: 0; } .channelPanIcon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #e5e9ef; border-radius: 12px; background: #f8fafc; } .channelPanIcon img { width: 27px; height: 27px; object-fit: contain; } .channelResourceCopy { min-width: 0; } .channelResourceCopy strong { display: block; overflow: hidden; font-size: 15px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; } .channelResourceCopy small { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; color: #8a94a6; font-size: 12px; } .channelResourceCopy small span + span::before { margin-right: 8px; color: #d0d5dd; content: '•'; } .channelOpen { padding: 9px 13px; border-radius: 9px; background: #fff6d9; color: #8b6500; font-size: 13px; font-weight: 800; } .channelOpen i { margin-left: 5px; font-style: normal; } .channelPagination { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 22px; border-top: 1px solid #edf0f3; } .channelPagination a, .channelPagination span { min-width: 74px; padding: 9px 14px; border: 1px solid #e1e5eb; border-radius: 9px; text-align: center; font-size: 13px; } .channelPagination a { color: #344054; background: #fff; } .channelPagination span { color: #c0c6cf; background: #f8f9fb; } .channelPagination strong { color: #667085; font-size: 13px; } .channelEmpty { padding: 62px 20px; color: #667085; text-align: center; } .channelEmpty strong { color: #344054; font-size: 18px; } .channelEmpty p { margin: 8px 0 0; font-size: 13px; } .detailCategoryLink { color: #9a6b00; font-weight: 750; } .networkCategoryLink { color: #8b6500; font-weight: 700; } .networkCategoryLink:hover { text-decoration: underline; } @media (max-width: 980px) { .channelGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .channelSection { padding-top: 34px; } .channelGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .channelCard { padding: 13px 12px; border-radius: 12px; } .channelIcon { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; } .channelCard > span:nth-child(2) { margin-left: 9px; } .channelCard small { display: none; } .channelPage { width: calc(100% - 24px); padding-top: 18px; } .channelHero { grid-template-columns: auto minmax(0, 1fr); gap: 13px; padding: 21px 17px; border-radius: 16px; } .channelHeroIcon { width: 48px; height: 48px; border-radius: 14px; font-size: 21px; } .channelHero h1 { font-size: 23px; } .channelHero p { grid-column: 1 / -1; font-size: 13px; } .channelTotal { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 7px; padding: 12px 0 0; border-top: 1px solid #eadfbf; border-left: 0; } .channelTotal strong { font-size: 20px; } .channelListHeading { padding: 18px 16px 14px; } .channelListHeading h2 { font-size: 18px; } .channelResourceItem { grid-template-columns: auto minmax(0, 1fr); gap: 11px; min-height: 78px; margin: 0 14px; } .channelPanIcon { width: 39px; height: 39px; } .channelPanIcon img { width: 24px; height: 24px; } .channelResourceCopy strong { display: -webkit-box; font-size: 14px; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .channelResourceCopy small { gap: 4px 9px; margin-top: 5px; } .channelOpen { display: none; } } .channelGrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .channelCard { --channel-accent: #d99a00; --channel-soft: #fff4cf; position: relative; flex: 0 0 calc((100% - 48px) / 4); min-height: 118px; overflow: hidden; padding: 20px 18px; border-radius: 17px; isolation: isolate; } .channelCard::before { position: absolute; z-index: -1; top: -52px; right: -48px; width: 132px; height: 132px; border-radius: 50%; background: var(--channel-soft); opacity: .58; content: ''; transition: transform .22s ease, opacity .22s ease; } .channelCard:hover::before { opacity: .86; transform: scale(1.1); } .channelCard:nth-child(2) { --channel-accent: #e4743d; --channel-soft: #fff0e8; } .channelCard:nth-child(3) { --channel-accent: #497fd3; --channel-soft: #edf4ff; } .channelCard:nth-child(4) { --channel-accent: #7654c5; --channel-soft: #f2edff; } .channelCard:nth-child(5) { --channel-accent: #d35c8c; --channel-soft: #fff0f6; } .channelCard:nth-child(6) { --channel-accent: #258c72; --channel-soft: #eaf8f3; } .channelCard:nth-child(7) { --channel-accent: #607487; --channel-soft: #edf2f6; } .channelCard:nth-child(8) { --channel-accent: #c24f78; --channel-soft: #fff0f5; } .channelCard:hover { border-color: color-mix(in srgb, var(--channel-accent) 50%, #d8dde5); } .channelIcon { width: 50px; height: 50px; border-radius: 15px; color: var(--channel-accent); background: var(--channel-soft); font-size: 19px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72); } .channelCard > span.channelCardCopy { min-width: 0; margin-left: 14px; } .channelCardCopy small, .channelCardCopy strong, .channelCardCopy em { display: block; } .channelCardCopy small { margin: 0 0 3px; color: var(--channel-accent); font-size: 9px; font-weight: 850; letter-spacing: .12em; } .channelCardCopy strong { color: #17212f; font-size: 17px; line-height: 1.3; } .channelCardCopy em { overflow: hidden; margin-top: 6px; color: #8a94a6; font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .channelCard > .channelArrow { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; margin-left: auto; border-radius: 50%; color: var(--channel-accent); background: rgba(255, 255, 255, .78); box-shadow: 0 4px 12px rgba(16, 24, 40, .06); font-size: 13px; } .discoverBoard { min-width: 0; } .discoverBoard.isTabbed { overflow: hidden; border: 1px solid var(--duck-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(16, 24, 40, .055); } .discoverTabBar { display: flex; gap: 7px; overflow-x: auto; padding: 13px 14px; border-bottom: 1px solid #edf0f3; background: #fafbfc; scrollbar-width: thin; } .discoverTab { flex: 0 0 auto; min-height: 36px; padding: 8px 15px; border: 1px solid transparent; border-radius: 10px; color: #667085; background: transparent; font: inherit; font-size: 13px; font-weight: 750; white-space: nowrap; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .discoverTab:hover { color: #5f4700; background: #fff7dd; } .discoverTab.isActive { border-color: #efb600; color: #171b22; background: var(--duck-yellow); box-shadow: 0 5px 14px rgba(225, 157, 0, .17); } .discoverTab:focus-visible { outline: 3px solid rgba(255, 188, 25, .28); outline-offset: 2px; } .discoverBoard.isTabbed .home { display: block; margin: 0; } .discoverBoard.isTabbed .home .block { display: none; width: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; } .discoverBoard.isTabbed .home .block.isActive { display: block; } .discoverBoard.isTabbed .home .block:hover { border: 0; box-shadow: none; } .discoverBoard.isTabbed .home .nav { min-height: 48px; padding: 15px 22px 10px; border-bottom: 0; background: #fff; font-size: 17px; } .discoverBoard.isTabbed .home .nav::after { width: 32px; height: 3px; border-radius: 999px; } .discoverBoard.isTabbed .home.homeNO .content { min-height: 0; } .discoverBoard.isTabbed .home.homeNO .content .list { display: grid; min-height: 232px; padding: 2px 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 18px; } .discoverBoard.isTabbed .home.homeNO .content .list:empty { display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 13px; } .discoverBoard.isTabbed .home.homeNO .content .list:empty::before { content: '该频道正在整理中，可先从上方频道入口浏览'; } .discoverBoard.isTabbed .home.homeNO .content .list .item { max-width: none; border-bottom: 1px solid #f0f2f5; transition: none; } @media (max-width: 1180px) { .channelCard { flex-basis: calc((100% - 32px) / 3); } } @media (max-width: 900px) { .channelCard { flex-basis: calc((100% - 16px) / 2); } } @media (max-width: 700px) { .channelGrid { gap: 9px; } .channelCard { flex-basis: calc((100% - 9px) / 2); min-height: 92px; padding: 14px 12px; } .channelIcon { width: 42px; height: 42px; border-radius: 12px; font-size: 17px; } .channelCard > span.channelCardCopy { margin-left: 10px; } .channelCardCopy small { display: none; } .channelCardCopy strong { font-size: 15px; } .channelCardCopy em { margin-top: 4px; font-size: 11px; } .channelCard > .channelArrow { display: none; } .discoverBoard.isTabbed { border-radius: 13px; } .discoverTabBar { padding: 10px; } .discoverTab { min-height: 34px; padding: 7px 12px; font-size: 12px; } .discoverBoard.isTabbed .home .nav { min-height: 44px; padding: 13px 14px 8px; font-size: 15px; } .discoverBoard.isTabbed .home.homeNO .content .list { display: block; min-height: 0; padding: 2px 10px 13px; } .discoverBoard.isTabbed .home.homeNO .content .list .item:last-child { border-bottom-color: transparent; } } @media (max-width: 980px) { .home.homeNO { grid-template-columns: repeat(2, minmax(0, 1fr)); } .answerSection { grid-template-columns: 1fr; } .answerLead { border-right: 0; border-bottom: 1px solid var(--duck-line); } .networkToolbar { align-items: flex-start; flex-direction: column; gap: 13px; } .networkToolbarTitle { width: 100%; flex: 0 0 auto; } .networkPanTabs { width: 100%; } } @media (max-width: 768px) { .headerBox, .homeExperience .headerBox, .headerBox.isScrolled, .homeExperience .headerBox.isScrolled, .headerKox { height: 62px; } .headerBox .box { width: calc(100% - 24px); } .homeExperience .headerBox .box .navs .iconfont { color: var(--duck-ink); } .homeBox, .networkSearchPage { width: calc(100% - 20px); } .homeBox { padding-top: 10px; } .homeHero { border-top-width: 4px; border-radius: 7px; } .heroContent { width: calc(100% - 30px); padding: 35px 0 30px; } .heroEyebrow { min-height: 24px; margin-bottom: 11px; font-size: 11px; } .homeHero h1 { font-size: clamp(31px, 10vw, 40px); } .heroDescription { margin-top: 11px; font-size: 13px; line-height: 1.7; } .smartSearchShell { margin-top: 21px; } .searchBox .heroSearch { height: 55px; padding: 4px 4px 4px 13px; border-radius: 6px; box-shadow: 0 4px 0 var(--duck-ink); } .searchBox .heroSearch input { width: 0; min-width: 0; padding-left: 8px; font-size: 14px; } .searchBox .heroSearch .btn { width: 72px; height: 43px; border-radius: 4px; font-size: 13px; } .homeHotWords { max-height: 50px; overflow: hidden; justify-content: flex-start; gap: 6px 12px; font-size: 11px; } .platformRow { display: grid; width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: center; align-items: center; gap: 10px 4px; } .platformLabel { width: auto; grid-column: 1 / -1; text-align: center; } .platformChip { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; } .platformChip img { display: block !important; width: 17px; height: 17px; flex: 0 0 17px; object-fit: contain; } .searchAssist { max-height: 290px; overflow-y: auto; padding: 14px; border-radius: 6px; } .searchAssistWords a, .searchAssistWords button { max-width: calc(50% - 4px); } .homeDiscover, .valueSection, .faqSection { padding-top: 40px; } .sectionHeading { align-items: flex-start; flex-direction: column; gap: 7px; } .sectionHeading h2 { font-size: 23px; } .home.homeNO, .valueGrid { grid-template-columns: 1fr; } .capabilityStrip { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 7px; } .capabilityStrip > div { padding: 15px 13px; } .capabilityStrip > div:nth-child(3)::before { display: none; } .capabilityStrip > div:nth-child(-n+2) { border-bottom: 1px solid var(--duck-line); } .answerSection { margin-top: 40px; border-radius: 7px; } .answerLead { padding: 27px 23px; } .answerLead h2 { font-size: 24px; } .answerFlow { padding: 11px 21px; } .valueGrid article, .valueGrid article:hover { min-height: 0; border-right: 0; border-bottom: 1px solid var(--duck-line); } .valueGrid article:last-child { border-bottom: 0; } .networkSearchPage { padding: 14px 0 45px; } .networkSearchHero { padding: 22px 16px 25px; border-radius: 7px; } .networkSearchHero h1 { font-size: 25px; } .networkSearchForm { height: 54px; padding-left: 12px; border-radius: 6px; } .networkSearchForm input { width: 0; min-width: 0; padding: 0 7px; font-size: 13px; } .networkSearchForm button { min-width: 0; height: 40px; padding: 0 12px; font-size: 12px; } .networkWorkspace { margin-top: 13px; border-radius: 7px; } .networkToolbar { gap: 12px; padding: 16px 14px 14px; } .networkToolbarTitle p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; } .networkPanTabs { display: grid; width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 0; } .networkPanTabs button { grid-column: span 4; width: 100%; min-width: 0; height: 44px; padding: 0 8px; gap: 6px; box-sizing: border-box; border-radius: 7px; white-space: nowrap; font-size: 12px; line-height: 1; } .networkPanTabs--1 button { grid-column: span 12; } .networkPanTabs--2 button, .networkPanTabs--4 button { grid-column: span 6; } .networkPanTabs--5 button:nth-child(n + 4) { grid-column: span 6; } .networkPanTabs--7 button { grid-column: span 3; } .networkPanTabs--7 button:nth-child(n + 5) { grid-column: span 4; } .networkPanTabs button img, .networkPanTabs .networkLocalIcon { width: 17px; height: 17px; flex: 0 0 17px; } .networkPanTabs button small { position: absolute; top: -5px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; } .networkPanLabel { flex: 0 1 auto; } .networkResultHeader { padding: 0 14px; } .networkSearchProgress { min-height: 79px; padding: 14px 15px 17px; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; } .searchRadar { width: 28px; height: 28px; } .searchProgressCopy strong { font-size: 13px; } .searchProgressCopy p { font-size: 11px; } .networkResultList { padding: 0 10px; } .networkResultSectionHead { min-height: 64px; align-items: flex-start; padding: 13px 14px; box-sizing: border-box; } .networkResultSectionHead > div { display: grid; gap: 6px; } .networkResultSectionHead strong { font-size: 13px; } .networkResultSectionHead p { max-width: 135px; padding-top: 3px; font-size: 11px; } .networkNotice { padding: 13px 14px; } .detailBox { display: block; width: calc(100% - 20px); } .detailBox .left { width: 100%; } .detailTop { display: block; padding: 24px 20px; } .detailBox .details .pic, .detailPanVisual { width: 82px; height: 82px; margin-bottom: 20px; } .detailBox .details .pic { width: 104px; height: 142px; } .detailPanVisual img { width: 44px; height: 44px; } .detailBox .details .title { margin-top: 12px; font-size: 23px; } .detailFacts { padding: 20px 20px 5px; } .detailTrustPanel { padding: 16px 20px 0; grid-template-columns: 1fr; gap: 10px; } .detailTrustItem { padding: 15px 14px; } .detailTitleFacts { margin: 14px 20px 0; padding: 14px; } .detailTitleFactsHead { display: block; } .detailTitleFactsHead span { display: block; margin-top: 4px; } .detailFactTags { gap: 6px; } .detailFactTags > span { min-height: 32px; } .detailDescriptionRow, .detailUrlRow, .detailFactGrid .cat { display: block !important; } .detailFactGrid { grid-template-columns: 1fr; } .detailBox .details .cat .l { margin-bottom: 4px; } .detailBox .details .cat .r, .detailFactGrid .cat .r { display: flex; width: auto !important; min-width: 0; } .detailDescriptionRow .r { display: block !important; } .detailUrl { max-width: 100%; } .detailHealthNotice { margin: 4px 20px 0; } .detailBox .details > .btns { padding: 19px 20px 25px; } .relatedHeading > span { display: none; } .footerBox .box { width: calc(100% - 24px); } } @media (prefers-reduced-motion: reduce) { .searchRadar, .searchProgressTrack span, .networkResultCard { animation: none !important; } } body.duckModalOpen { overflow: hidden; } .duckModal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(11, 22, 34, .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .duckModalPanel { position: relative; width: min(420px, calc(100vw - 32px)); max-height: min(84vh, 760px); overflow: auto; box-sizing: border-box; border: 1px solid rgba(18, 35, 52, .12); border-radius: 18px; color: var(--duck-ink, #122234); background: #fff; box-shadow: 0 30px 90px rgba(7, 20, 33, .3); animation: duckModalIn .2s ease-out both; } .duckModalClose { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: #707b87; background: #f3f5f7; font: 400 27px/36px Arial, sans-serif; cursor: pointer; transition: color .18s ease, background-color .18s ease, transform .18s ease; } .duckModalClose:hover, .duckModalClose:focus-visible { color: #132538; background: #e8edf2; outline: 2px solid rgba(255, 189, 27, .7); outline-offset: 2px; transform: rotate(4deg); } .duckQrModal { width: min(360px, calc(100vw - 32px)); padding: 62px 26px 26px; } .duckQrModal > img { display: block; width: 100%; height: auto; border-radius: 10px; } .duckDemandModal { width: min(460px, calc(100vw - 32px)); padding: 58px 28px 28px; } .layerBox textarea { display: block; width: 100%; min-height: 150px; margin-top: 18px; padding: 14px 15px; resize: vertical; box-sizing: border-box; border: 1px solid #d9e0e7; border-radius: 10px; color: #132538; background: #f8fafb; font: inherit; line-height: 1.65; transition: border-color .18s ease, box-shadow .18s ease; } .layerBox textarea:focus { border-color: #ffbd1b; outline: 0; box-shadow: 0 0 0 3px rgba(255, 189, 27, .18); } .layerBox .vbtn { display: block; width: 100%; border: 0; font: inherit; font-weight: 750; } .layerBox .vbtn:disabled { cursor: wait; opacity: .64; } .duckNavModal { width: min(390px, calc(100vw - 32px)); padding: 62px 24px 24px; } .duckNavModal .drawer { display: grid; gap: 10px; } .duckNavModal .drawer > a, .duckNavModal .drawer > .item, .duckNavModal .drawer .btns a { display: flex; min-height: 46px; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid #dce3e9; border-radius: 9px; color: #173047; background: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; } .duckResourceModal.dialogUrlBox { width: min(640px, calc(100vw - 32px)) !important; overflow: auto; } .duckResourceModal .dialogUrl { min-height: 150px; padding: 58px 38px 36px; box-sizing: border-box; } .duckSearchCaptchaModal { width: min(500px, calc(100vw - 32px)); padding: 64px 34px 34px; } .searchCaptchaPanel .tips { max-width: 390px; color: #667483; line-height: 1.65; } .transferCaptcha { display: grid; justify-items: center; gap: 12px; padding: 6px 0 10px; text-align: center; } .transferCaptchaIcon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: #725100; background: #ffbe00; box-shadow: 0 10px 24px rgba(255, 190, 0, .24); font-weight: 850; } .transferCaptcha .title { margin: 0 !important; } .transferCaptchaImage { display: grid; width: 150px; height: 58px; place-items: center; overflow: hidden; padding: 3px; border: 1px solid #dce3e9; border-radius: 10px; color: #7d8a97; background: #f7f9fb; cursor: pointer; } .transferCaptchaImage img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; } .transferCaptchaForm { display: flex; width: min(380px, 100%); gap: 10px; } .transferCaptchaForm input { min-width: 0; flex: 1; height: 44px; padding: 0 13px; border: 1px solid #d6dee6; border-radius: 10px; outline: none; font-size: 15px; } .transferCaptchaForm input:focus { border-color: #ffb400; box-shadow: 0 0 0 3px rgba(255, 180, 0, .12); } .transferCaptchaForm button { height: 44px; padding: 0 18px; border: 0; border-radius: 10px; color: #17212b; background: #ffb800; font-weight: 800; cursor: pointer; } .transferCaptchaForm button:disabled, .transferCaptchaImage:disabled { cursor: wait; opacity: .65; } .transferCaptchaHint { margin: 0; color: #98a2ad; font-size: 12px; } .networkPanTabs button small { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 999px; color: #5e6c79; background: #edf1f4; font-size: 11px; font-weight: 750; line-height: 18px; } .networkPanTabs button.active small { color: #132538; background: rgba(255, 255, 255, .62); } .duckToast { position: fixed; top: 22px; left: 50%; z-index: 4000; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; box-sizing: border-box; border: 1px solid #dce3e9; border-radius: 10px; color: #173047; background: #fff; box-shadow: 0 16px 44px rgba(10, 28, 44, .18); font-size: 14px; font-weight: 650; opacity: 0; transform: translate(-50%, -14px); transition: opacity .18s ease, transform .18s ease; } .duckToast.is-visible { opacity: 1; transform: translate(-50%, 0); } .duckToast--success { border-left: 4px solid #27b793; } .duckToast--error { border-left: 4px solid #e45454; } @keyframes duckModalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 768px) { .duckModal { align-items: center; padding: 14px; } .duckModalPanel, .duckResourceModal.dialogUrlBox { width: calc(100vw - 28px) !important; max-height: 82vh; border-radius: 17px; } .duckResourceModal .dialogUrl { padding: 56px 22px 28px; } .duckSearchCaptchaModal { padding: 60px 22px 28px; } .duckSearchCaptchaModal .transferCaptcha, .duckSearchCaptchaModal .searchCaptchaPanel { width: 100%; box-sizing: border-box; } .duckSearchCaptchaModal .transferCaptchaImage { width: min(190px, 100%); height: 66px; box-sizing: border-box; } .transferWait { min-height: 280px; } .transferCaptchaForm { width: 100%; max-width: none; box-sizing: border-box; flex-direction: column; align-items: stretch; } .transferCaptchaForm input { display: block; width: 100%; min-width: 100%; height: 52px; flex: 0 0 52px; box-sizing: border-box; font-size: 16px; } .transferCaptchaForm button { width: 100%; height: 52px; min-height: 52px; box-sizing: border-box; } } @media (prefers-reduced-motion: reduce) { .duckModalPanel, .duckToast { animation: none; transition: none; } } .apiDocsExperience { color: #142538; background: #f3f5f7; } .apiDocsPage { width: min(1180px, calc(100% - 40px)); margin: 34px auto 72px; } .apiDocsHero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 54px; align-items: center; min-height: 344px; padding: 58px 62px; overflow: hidden; box-sizing: border-box; border: 1px solid #dce2e8; border-top: 5px solid #ffba00; border-radius: 14px; background: #fff; box-shadow: 0 22px 55px rgba(22, 37, 54, .07); } .apiDocsHero::after { position: absolute; right: -110px; bottom: -190px; width: 430px; height: 430px; border: 1px solid rgba(255, 186, 0, .34); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255, 186, 0, .05), 0 0 0 110px rgba(255, 186, 0, .025); content: ""; pointer-events: none; } .apiDocsHeroCopy, .apiDocsStatusCard { position: relative; z-index: 1; } .apiDocsEyebrow { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 4px; color: #7d5a00; background: #fff3cb; font-size: 12px; font-weight: 800; letter-spacing: .11em; } .apiDocsHero h1 { max-width: 680px; margin: 20px 0 16px; color: #101d2b; font-size: clamp(34px, 4vw, 52px); font-weight: 900; line-height: 1.13; letter-spacing: -.045em; } .apiDocsHeroCopy > p { max-width: 720px; margin: 0; color: #607080; font-size: 16px; line-height: 1.9; } .apiDocsActions { display: flex; gap: 10px; margin-top: 28px; } .apiDocsActions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 19px; border: 1px solid #d8dfe6; border-radius: 7px; color: #213448; background: #fff; font-size: 14px; font-weight: 800; text-decoration: none; } .apiDocsActions .apiDocsPrimary { border-color: #ffba00; color: #142538; background: #ffba00; } .apiDocsStatusCard { padding: 24px; border: 1px solid #d8e0e7; border-radius: 10px; background: rgba(248, 250, 251, .96); } .apiDocsStatusHead { display: flex; gap: 10px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid #e0e6eb; font-size: 15px; } .apiDocsStatusDot { width: 9px; height: 9px; border-radius: 50%; background: #dd5960; box-shadow: 0 0 0 5px rgba(221, 89, 96, .11); } .apiDocsStatusDot.is-online { background: #25b78f; box-shadow: 0 0 0 5px rgba(37, 183, 143, .12); } .apiDocsStatusCard dl { margin: 10px 0 0; } .apiDocsStatusCard dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; font-size: 13px; } .apiDocsStatusCard dt { color: #82909e; } .apiDocsStatusCard dd { margin: 0; color: #203347; font-weight: 750; text-align: right; } .apiDocsTrustRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 32px; } .apiDocsTrustRow article { display: flex; gap: 14px; align-items: center; min-height: 88px; padding: 16px 20px; box-sizing: border-box; border: 1px solid #dce2e8; border-radius: 10px; background: #fff; } .apiDocsTrustRow b { color: #c18b00; font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; } .apiDocsTrustRow div { display: grid; gap: 5px; } .apiDocsTrustRow strong { color: #142538; font-size: 15px; } .apiDocsTrustRow span { color: #758391; font-size: 12px; line-height: 1.5; } .apiDocsLayout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; } .apiDocsSideNav { position: sticky; top: 92px; display: grid; gap: 3px; padding: 17px 12px; border: 1px solid #dce2e8; border-radius: 10px; background: #fff; } .apiDocsSideNav strong { padding: 6px 10px 10px; color: #142538; font-size: 13px; } .apiDocsSideNav a { padding: 9px 10px; border-radius: 6px; color: #657585; font-size: 13px; text-decoration: none; } .apiDocsSideNav a:hover { color: #142538; background: #fff6db; } .apiDocsContent { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; } .apiDocSection { min-width: 0; scroll-margin-top: 94px; padding: 34px 38px; border: 1px solid #dce2e8; border-radius: 11px; background: #fff; } .apiDocSectionTitle { display: flex; gap: 17px; align-items: flex-start; margin-bottom: 24px; } .apiDocSectionTitle > span { flex: 0 0 auto; padding-top: 4px; color: #b17f00; font: 800 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; } .apiDocSectionTitle h2 { margin: 0; color: #122336; font-size: 23px; line-height: 1.35; } .apiDocSectionTitle p { margin: 7px 0 0; color: #7a8794; font-size: 13px; line-height: 1.65; } .apiDocsNotice { padding: 18px 20px; border-left: 4px solid #ffba00; border-radius: 6px; background: #fff8e4; } .apiDocsNotice strong { color: #4b3b0a; font-size: 14px; } .apiDocsNotice p, .apiDocsBodyText { margin: 7px 0 0; color: #657382; font-size: 14px; line-height: 1.85; } .apiDocsEndpointLine { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; border: 1px solid #dce3e9; border-radius: 7px; background: #f7f9fa; } .apiDocsEndpointLine > span { color: #778695; font-size: 12px; font-weight: 750; } .apiDocsEndpointLine code { overflow: hidden; color: #20374c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .apiDocsEndpointLine button, .apiDocsCodeHead button { padding: 0; border: 0; color: #946b00; background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .apiDocsMethodBar { display: flex; gap: 13px; align-items: center; min-height: 50px; padding: 0 16px; border: 1px solid #d8e0e7; border-radius: 7px; background: #f8fafb; } .apiDocsMethodBar b { padding: 5px 8px; border-radius: 4px; color: #155d4c; background: #dff7ee; font-size: 11px; } .apiDocsMethodBar code { color: #172c40; font-size: 14px; font-weight: 750; } .apiDocsMethodBar span { margin-left: auto; color: #7d8994; font-size: 12px; } .apiDocsTableWrap { overflow-x: auto; border: 1px solid #dde4e9; border-radius: 7px; } .apiDocsTable { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; } .apiDocsTable th, .apiDocsTable td { padding: 13px 15px; border-bottom: 1px solid #e5eaee; color: #5f7080; text-align: left; line-height: 1.6; } .apiDocsTable th { color: #27394b; background: #f6f8f9; font-size: 12px; font-weight: 800; } .apiDocsTable tr:last-child td { border-bottom: 0; } .apiDocsTable code, .apiDocsFieldGrid code, .apiDocsErrorList code, .apiDocsSteps code, .apiDocSectionTitle code { padding: 2px 5px; border-radius: 4px; color: #8b6500; background: #fff5d7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; } .apiDocSection h3 { margin: 25px 0 10px; color: #213448; font-size: 14px; } .apiDocsCodeCard { overflow: hidden; border: 1px solid #253a4e; border-radius: 8px; background: #102131; } .apiDocsCodeHead { display: flex; justify-content: space-between; align-items: center; min-height: 37px; padding: 0 15px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #91a7ba; font-size: 11px; letter-spacing: .04em; } .apiDocsCodeHead button { color: #ffd25b; } .apiDocsCodeCard pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; color: #e8f0f6; font: 13px/1.72 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; } .apiDocsCodeCard code { font: inherit; white-space: pre; } .apiDocsFieldGrid, .apiDocsErrorList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 14px; } .apiDocsFieldGrid > div, .apiDocsErrorList > div { display: grid; gap: 8px; padding: 14px 15px; border: 1px solid #e0e6eb; border-radius: 7px; background: #fafbfc; } .apiDocsFieldGrid span, .apiDocsErrorList span { color: #6b7a88; font-size: 12px; line-height: 1.55; } .apiDocsErrorList b { color: #c13e45; font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; } .apiDocsSteps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: api-steps; } .apiDocsSteps li { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 20px; padding: 16px 0 16px 40px; border-bottom: 1px solid #e5eaee; counter-increment: api-steps; } .apiDocsSteps li:last-child { border-bottom: 0; } .apiDocsSteps li::before { position: absolute; top: 16px; left: 0; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #473500; background: #ffcf4b; content: counter(api-steps); font-size: 11px; font-weight: 900; } .apiDocsSteps b { color: #203448; font-size: 13px; } .apiDocsSteps span { color: #687886; font-size: 13px; line-height: 1.7; } @media (max-width: 900px) { .apiDocsHero { grid-template-columns: 1fr; gap: 30px; padding: 44px 38px; } .apiDocsStatusCard { max-width: 420px; } .apiDocsLayout { grid-template-columns: 1fr; } .apiDocsSideNav { position: static; display: flex; gap: 5px; overflow-x: auto; padding: 9px; } .apiDocsSideNav strong { display: none; } .apiDocsSideNav a { flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 640px) { .apiDocsPage { width: calc(100% - 24px); margin: 18px auto 50px; } .apiDocsHero { min-height: 0; padding: 35px 24px 28px; border-radius: 11px; } .apiDocsHero h1 { margin-top: 16px; font-size: 33px; letter-spacing: -.04em; } .apiDocsHeroCopy > p { font-size: 14px; line-height: 1.8; } .apiDocsActions { display: grid; grid-template-columns: 1fr 1fr; } .apiDocsStatusCard { padding: 18px; } .apiDocsTrustRow { grid-template-columns: 1fr; } .apiDocsTrustRow article { min-height: 76px; } .apiDocsLayout { gap: 14px; } .apiDocSection { padding: 27px 20px; border-radius: 9px; } .apiDocSectionTitle { gap: 12px; margin-bottom: 20px; } .apiDocSectionTitle h2 { font-size: 20px; } .apiDocsEndpointLine { grid-template-columns: 1fr auto; } .apiDocsEndpointLine > span { grid-column: 1 / -1; } .apiDocsMethodBar span { display: none; } .apiDocsFieldGrid, .apiDocsErrorList { grid-template-columns: 1fr; } .apiDocsCodeCard pre { padding: 16px; font-size: 12px; } .apiDocsSteps li { grid-template-columns: 1fr; gap: 5px; } } @media (max-width: 640px) { .networkResultHeader { min-height: 44px; padding: 0 12px; } .networkResultHeader strong, .networkResultCount, .networkResultCount b { font-size: 12px; } .networkResultSectionHead { min-height: 50px; padding: 9px 12px; align-items: center; } .networkResultSectionHead > div { display: flex; gap: 8px; align-items: center; } .networkResultSectionHead strong { font-size: 12px; } .networkResultSectionHead p { max-width: 125px; padding-top: 0; font-size: 10px; } .networkSectionBadge { min-height: 20px; padding: 0 6px; font-size: 10px; } .networkResultList { padding: 0 12px; } .networkResultCard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; min-height: 0; padding: 11px 2px; align-items: center; } .networkResultMain { min-width: 0; grid-column: 1; } .networkResultSource { width: 34px; height: 34px; flex: 0 0 34px; margin-right: 9px; border-radius: 9px; } .networkResultSource img { width: 20px; height: 20px; border-radius: 5px; } .networkResultTitle { font-size: 14px; line-height: 1.38; -webkit-line-clamp: 2; } .networkResultMeta { gap: 5px; margin-top: 4px; font-size: 11px; line-height: 1.4; } .networkInlineOrigin { min-height: 18px; padding: 0 5px; font-size: 9px; } .networkResultCard > .networkGetButton, .networkResultActions .networkGetButton { width: auto; min-width: 84px; height: 36px; margin: 0; padding: 0 9px; gap: 5px; border-radius: 6px; font-size: 12px; align-self: center; } .networkGetButton span { font-size: 13px; } .networkResultActions { display: block; margin: 0; grid-column: 2; align-self: center; } .networkResultActions .networkDetailButton { display: none; } .networkResultCard::before { left: -1px; } .networkResultSection--public { border-top-width: 6px; } } .networkSearchPage .networkSearchHero { position: relative; z-index: 3; } .networkSearchPage .networkWorkspace { position: relative; z-index: 1; } @media (max-width: 768px) { .networkSearchPage .networkSmartSearch .searchAssist { position: static; inset: auto; width: 100%; max-height: 260px; max-height: min(260px, 38svh); margin-top: 12px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: 0 9px 24px rgba(21, 28, 38, .1); } .networkSearchPage .searchAssistHeading { min-width: 0; } .networkSearchPage .searchAssistHeading small { overflow: hidden; min-width: 0; flex: 1 1 auto; text-overflow: ellipsis; white-space: nowrap; } .networkSearchPage .searchAssistHeading button { flex: 0 0 auto; } .networkSearchPage .searchAssistWords a, .networkSearchPage .searchAssistWords button { max-width: calc(50% - 4px); } } @media (max-width: 640px) { .networkResultList { padding-right: 8px; padding-left: 8px; } .networkResultCard { grid-template-columns: minmax(0, 1fr) 66px; gap: 4px 6px; padding: 8px 0; } .networkResultSource { width: 28px; height: 28px; flex: 0 0 28px; margin-right: 7px; border-radius: 7px; } .networkResultSource img { width: 17px; height: 17px; border-radius: 4px; } .networkResultTitle { font-size: 13px; line-height: 1.32; -webkit-line-clamp: 3; } .networkResultMeta { gap: 4px; margin-top: 3px; overflow: hidden; font-size: 10px; line-height: 1.3; white-space: nowrap; } .networkResultMeta i, .networkResultMeta span:nth-of-type(n + 2) { display: none; } .networkInlineOrigin { min-height: 16px; padding: 0 4px; font-size: 8px; } .networkResultCard > .networkGetButton, .networkResultActions .networkGetButton { width: 66px; min-width: 66px; height: 32px; padding: 0 5px; gap: 0; border-radius: 5px; font-size: 11px; } .networkGetButton span { display: none; } } @media (max-width: 380px) { .networkResultList { padding-right: 6px; padding-left: 6px; } .networkResultCard { grid-template-columns: minmax(0, 1fr) 62px; column-gap: 5px; } .networkResultTitle { font-size: 12.5px; } .networkResultCard > .networkGetButton, .networkResultActions .networkGetButton { width: 62px; min-width: 62px; font-size: 10px; } } .homeNoticeOverlay { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 20px; background: rgba(12, 22, 38, .58); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .homeNoticeOverlay[hidden] { display: none; } .homeNoticeOverlay.isVisible { opacity: 1; visibility: visible; } .homeNoticeDialog { position: relative; width: min(100%, 480px); max-height: min(680px, calc(100vh - 40px)); overflow: hidden; padding: 30px 30px 26px; border: 1px solid rgba(255, 183, 0, .28); border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(9, 20, 38, .28); color: #101828; text-align: center; transform: translateY(12px) scale(.98); transition: transform .18s ease; } .homeNoticeOverlay.isVisible .homeNoticeDialog { transform: translateY(0) scale(1); } .homeNoticeClose { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #f2f4f7; color: #667085; font: 24px/32px Arial, sans-serif; cursor: pointer; } .homeNoticeMark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 13px; border-radius: 17px; background: #ffb700; box-shadow: 0 9px 22px rgba(255, 183, 0, .3); color: #101828; font-size: 28px; font-weight: 900; } .homeNoticeEyebrow { margin-bottom: 6px; color: #b77900; font-size: 11px; font-weight: 800; letter-spacing: .16em; } .homeNoticeDialog h2 { margin: 0; font-size: 24px; line-height: 1.35; } .homeNoticeContent { max-height: min(42vh, 300px); margin: 18px 0 22px; overflow-y: auto; padding: 17px 18px; border-radius: 12px; background: #f7f9fc; color: #475467; font-size: 15px; line-height: 1.8; text-align: left; overflow-wrap: anywhere; } .homeNoticeConfirm { width: 100%; min-height: 46px; padding: 10px 18px; border: 1px solid #e5a600; border-radius: 10px; background: #ffb700; box-shadow: 0 8px 18px rgba(255, 183, 0, .22); color: #111827; font-size: 15px; font-weight: 800; cursor: pointer; } .homeNoticeClose:focus-visible, .homeNoticeConfirm:focus-visible { outline: 3px solid rgba(30, 128, 255, .28); outline-offset: 2px; } @media (max-width: 600px) { .homeNoticeOverlay { align-items: end; padding: 12px; } .homeNoticeDialog { width: 100%; max-height: calc(100vh - 24px); padding: 25px 18px 18px; border-radius: 18px; } .homeNoticeMark { width: 50px; height: 50px; margin-bottom: 10px; border-radius: 14px; font-size: 24px; } .homeNoticeDialog h2 { padding: 0 28px; font-size: 21px; } .homeNoticeContent { max-height: 38vh; margin: 14px 0 17px; padding: 14px; font-size: 14px; line-height: 1.7; } } @media (prefers-reduced-motion: reduce) { .homeNoticeOverlay, .homeNoticeDialog { transition: none; } } .detailExperience .detailBox { display: grid; width: min(1180px, calc(100% - 40px)); min-height: 0; grid-template-columns: minmax(0, 1fr) 282px; gap: 24px; align-items: start; } .detailExperience .detailBox > .left { width: 100%; min-width: 0; } .detailExperience .detailBox > .detailSidebar { position: sticky; top: 96px; width: auto; min-width: 0; margin: 48px 0 0; align-self: start; } .detailSideCard { margin-bottom: 14px; padding: 18px; border: 1px solid var(--duck-line, #e4e9f0); border-radius: 12px; background: #fff; box-shadow: 0 4px 18px rgba(24, 40, 62, .025); } .detailSideCard h2 { margin: 0; color: #162334; font-size: 15px; font-weight: 750; line-height: 1.5; } .detailQuickAccess { border-top: 3px solid #ffbd08; } .detailSideIdentity { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .detailSideIdentity > img { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; } .detailSideIdentity > div > span { display: block; margin-top: 2px; color: #8b96a5; font-size: 11px; } .detailSideStatus { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #8290a0; font-size: 11px; white-space: nowrap; } .detailSideStatus > i { width: 6px; height: 6px; border-radius: 50%; background: #98a5b1; } .detailSideStatus-healthy > i { background: #29a77a; } .detailSideStatus-warning > i { background: #d5962c; } .detailSideCode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; padding: 10px 12px; border: 1px dashed #e0e5eb; border-radius: 7px; background: #fafbfd; } .detailSideCode > span:first-child { color: #738297; font-size: 12px; } .detailSideCode > strong { color: #253950; font: 700 15px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; } .detailSideCode > span:last-child { margin-left: auto; color: #95a0ae; font-size: 10px; } .detailSideOpen { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 12px; border: 1px solid #f2b400; border-radius: 8px; background: #ffc20e; color: #272b32; font-size: 14px; font-weight: 700; } .detailSideOpen:hover { background: #f5b900; color: #142136; } .detailSideOpen > span { font-size: 17px; font-weight: 400; } .detailSideCopy { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: center; gap: 7px; margin-top: 7px; border: 1px solid #e5eaf0; border-radius: 7px; background: #fff; color: #617188; font: inherit; font-size: 12px; cursor: pointer; } .detailSideCopy:hover { background: #f8fafc; color: #23374f; } .detailSideCopy > i { font-size: 13px; } .detailPageNav { display: flex; gap: 3px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #edf0f4; } .detailPageNav > a { display: flex; flex: 1; min-height: 31px; align-items: center; justify-content: center; border-radius: 5px; color: #8290a1; font-size: 12px; white-space: nowrap; } .detailPageNav > a[aria-current="location"] { background: #fff7dd; color: #986900; font-weight: 650; } .detailPageNav > a:hover { background: #f6f8fb; color: #3e536b; } .detailSideHeading { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .detailSideHeading > a { color: #8b96a5; font-size: 12px; } .detailSideResources { margin-top: 6px; } .detailSideResource { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; border-bottom: 1px solid #f0f2f6; color: #334962; text-align: left; } .detailSideResource:last-child { padding-bottom: 4px; border-bottom: 0; } .detailSideIndex { flex: 0 0 21px; height: 21px; margin-top: 1px; border-radius: 6px; background: #f2f5f9; color: #8a97a7; font-size: 11px; font-weight: 650; line-height: 21px; text-align: center; } .detailSideResource:first-child .detailSideIndex { background: #fff4d1; color: #ac7c16; } .detailSideResourceBody { flex: 1; min-width: 0; } .detailSideResourceTitle { display: -webkit-box; overflow: hidden; font-size: 13px; font-weight: 550; line-height: 1.7; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .detailSideResourceMeta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; margin-top: 5px; color: #939ead; font-size: 10px; line-height: 1.5; } .detailSideResource:hover .detailSideResourceTitle { color: #9b6d00; } .detailSideEmpty { margin: 16px 0; color: #8b96a5; font-size: 12px; line-height: 1.7; } .detailSideChannel { display: flex; min-height: 32px; margin-top: 14px; padding-top: 12px; align-items: center; justify-content: space-between; border-top: 1px solid #edf0f4; color: #85621a; font-size: 12px; } .detailFaq { margin-top: 24px; padding: 26px 32px; border: 1px solid var(--duck-line, #e4e9f0); border-radius: 10px; background: #fff; } .detailFaqHeader h2 { margin: 0; color: #122239; font-size: 21px; font-weight: 800; line-height: 1.5; } .detailFaqHeader > p { margin: 6px 0 0; color: #8793a3; font-size: 12px; line-height: 1.8; } .detailQaItem { margin-top: 20px; padding-top: 20px; border-top: 1px solid #edf0f4; } .detailExperience .detailBox .detailFaqQuestion { display: block; position: static; margin: 0; padding: 0; color: #26384e; font-size: 15px; font-weight: 700; line-height: 1.7; text-align: left; } .detailExperience .detailBox .detailFaqQuestion::after { content: none; } .detailQaItem > p { margin: 8px 0 5px; color: #566b84; font-size: 14px; line-height: 1.95; overflow-wrap: anywhere; } .detailQaItem > small { color: #929dac; font-size: 11px; line-height: 1.7; } .detailExperience [id^="resource-"], .detailExperience #related-title { scroll-margin-top: 16px; } .detailPageNav a:focus-visible, .detailSideCard a:focus-visible { outline: 2px solid #d49a00; outline-offset: 3px; border-radius: 3px; } .detailSideCard button:focus-visible { outline: 2px solid #d49a00; outline-offset: 3px; } .detailExperience .detailBox .details .btns button.btn { cursor: pointer; font: inherit; } @media (min-width: 1001px) and (max-height: 780px) { .detailExperience .detailBox > .detailSidebar { position: static; } } @media (max-width: 1000px) { .detailExperience .detailBox { display: block; } .detailExperience .detailBox > .detailSidebar { display: none; } } @media (max-width: 768px) { .detailExperience .detailBox { width: calc(100% - 20px); } .detailFaq { margin-top: 18px; padding: 22px 20px; } .detailFaqHeader h2 { font-size: 19px; } .detailQaItem { margin-top: 17px; padding-top: 17px; } }