.title { font-size: 0.28571rem; font-weight: bold; line-height: 0.40179rem; color: #3F3F3F; text-align: center; }

.category { padding-top: 0.89286rem; padding-bottom: 0.44643rem; }

.category-list { display: flex; align-items: center; justify-content: space-between; margin-top: 0.35714rem; }

.category-item { width: 2.67857rem; height: 2.94643rem; background: #FFFFFF; transition: all 0.3s; padding: 0.35714rem 0.26786rem; text-align: center; cursor: pointer; }

.category-item:hover { box-shadow: 0 0.07143rem 0.35714rem rgba(96, 171, 255, 0.12); position: relative; z-index: 3; }

.category-item-icon { display: block; width: 0.71429rem; height: 0.71429rem; margin: 0 auto; }

.category-item-title { height: 0.25rem; font-size: 0.17857rem; font-weight: bold; line-height: 0.26786rem; margin-top: 0.28571rem; }

.category-item-hint { font-size: 0.14286rem; font-weight: 400; line-height: 0.25rem; color: #8A8A8A; margin-top: 0.17857rem; }

.content { background: #F5F7FA; padding-top: 0.89286rem; }

.gray-bg { background: #F5F7FA; padding-top: 0.71429rem; padding-bottom: 0.71429rem; }

.white-bg { background: #fff; padding-top: 0.71429rem; padding-bottom: 0.71429rem; }

.mixImgText { display: flex; align-items: center; justify-content: space-between; position: relative; }

.mixImgText .mtt-img { overflow: hidden; }

.mixImgText .mtt-img img { display: block; height: 100%; }

.mixImgText .mtt-title { font-size: 0.23214rem; font-weight: bold; color: #3F3F3F; }

.mixImgText .mtt-small-title { font-size: 0.14286rem; font-weight: 500; line-height: 0.21429rem; color: #3F3F3F; margin-top: 0.17857rem; }

.mixImgText .mtt-texts { margin-top: 0.25rem; }

.mixImgText .mtt-texts.noPoint .mtt-text { padding-left: 0; }

.mixImgText .mtt-texts.noPoint .mtt-text:before { display: none; }

.mixImgText .mtt-info { position: absolute; top: 50%; transform: translateY(-50%); left: 0; }

.mixImgText .mtt-img + .mtt-info { left: 6.16071rem; }

.mixImgText .mtt-info + .mtt-img { margin-left: auto; }

.mixImgText .mtt-text { font-size: 0.125rem; font-weight: 400; line-height: 0.19643rem; color: #8A8A8A; margin-top: 0.10714rem; position: relative; padding-left: 0.125rem; }

.mixImgText .mtt-text::before { content: ""; display: block; width: 0.03571rem; height: 0.03571rem; background: #3F3F3F; border-radius: 50%; opacity: 0.8; position: absolute; left: 0; top: 0.07143rem; }

.mixImgText .mtt-blue-title { font-size: 0.14286rem; font-weight: bold; line-height: 0.21429rem; color: #162EB3; margin-bottom: 0.08929rem; }

.mixImgText .black { color: black; }

.blue-text { color: #162eb3; }

.banner { width: 100%; height: 5.08929rem; padding-top: 1.78571rem; position: relative; }

.banner-img { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; }

.banner-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.banner .w-1200 { position: relative; z-index: 5; margin: 0 auto; }

.banner-title { font-size: 0.35714rem; font-weight: 500; color: #FFFFFF; line-height: 0.5rem; }

.banner-hint { font-size: 0.17857rem; font-weight: 400; color: #FFFFFF; line-height: 0.26786rem; margin-top: 0.26786rem; }

.banner-hint p { margin-top: 0.08929rem; }

.banner-btn { margin-top: 0.26786rem; }

.banner-btn button { width: 1.39286rem; height: 0.35714rem; background: rgba(255, 255, 255, 0.2); border-radius: 0.03571rem 0.03571rem 0.03571rem 0.03571rem; text-align: center; font-size: 0.125rem; font-weight: 400; color: #FFFFFF; transition: all 0.3s; cursor: pointer; }

.banner-btn button:hover { background-color: #162EB3; }

.banner-btn button span { margin-right: 0.125rem; }

.work-flow { background-color: #ffffff; padding-top: 0.82143rem; padding-bottom: 0.89286rem; }

.work-flow .tabs { display: flex; border-bottom: 0.00893rem solid #e5e5e5; align-items: center; justify-content: center; margin-top: 0.19643rem; position: relative; margin-bottom: 0.58929rem; }

.work-flow .tabs .tab-item { font-size: 0.14286rem; font-weight: 500; line-height: 0.28571rem; padding: 0.16071rem 0.78571rem; cursor: pointer; }

.work-flow .tabs .tab-item:hover, .work-flow .tabs .tab-item.active { color: #3755ff; }

.work-flow .tabs .tab-line { position: absolute; left: 0; width: 2.14286rem; height: 0.01786rem; background: #3755FF; transition: transform 0.3s; bottom: 0; }

.work-flow .mixImgText { justify-content: flex-start; }

.work-flow .mtt-img { width: 5.44643rem; height: 4.19643rem; margin-right: 0.66071rem; }

.architecture { background: #FFFFFF; box-shadow: 0 0.07143rem 0.71429rem rgba(96, 171, 255, 0.12); padding: 0.53571rem; margin-top: 0.28571rem; margin-bottom: 1.07143rem; position: relative; }

.architecture-arrow { position: absolute; color: #a4a4a5; font-size: 0.26786rem; }

.architecture .grid-row { width: 100%; display: grid; grid-gap: 0.14286rem 0.14286rem; position: relative; }

.architecture .show-name { padding-left: 0.42857rem !important; }

.architecture .grid-item { cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 0.14286rem; flex-wrap: wrap; }

.architecture .table-name { width: 0.14286rem; font-size: 0.14286rem; font-weight: bold; line-height: 0.21429rem; color: #333333; word-break: break-all; position: absolute; left: 0.14286rem; top: 50%; transform: translateY(-50%); }

.architecture .affix { position: absolute; height: 0.16071rem; background: #162EB3; box-shadow: 0 0.02679rem 0.05357rem rgba(22, 46, 179, 0.18); opacity: 1; font-size: 0.10714rem; font-weight: 400; line-height: 0.16071rem; padding: 0 0.07143rem; color: #ffffff; left: 0; top: 0; z-index: 5; }

.architecture .column-start-1 { grid-column-start: 1; }

.architecture .row-start-1 { grid-row-start: 1; }

.architecture .column-end-1 { grid-column-end: 1; }

.architecture .row-end-1 { grid-row-end: 1; }

.architecture .column-start-2 { grid-column-start: 2; }

.architecture .row-start-2 { grid-row-start: 2; }

.architecture .column-end-2 { grid-column-end: 2; }

.architecture .row-end-2 { grid-row-end: 2; }

.architecture .column-start-3 { grid-column-start: 3; }

.architecture .row-start-3 { grid-row-start: 3; }

.architecture .column-end-3 { grid-column-end: 3; }

.architecture .row-end-3 { grid-row-end: 3; }

.architecture .column-start-4 { grid-column-start: 4; }

.architecture .row-start-4 { grid-row-start: 4; }

.architecture .column-end-4 { grid-column-end: 4; }

.architecture .row-end-4 { grid-row-end: 4; }

.architecture .column-start-5 { grid-column-start: 5; }

.architecture .row-start-5 { grid-row-start: 5; }

.architecture .column-end-5 { grid-column-end: 5; }

.architecture .row-end-5 { grid-row-end: 5; }

.architecture .column-start-6 { grid-column-start: 6; }

.architecture .row-start-6 { grid-row-start: 6; }

.architecture .column-end-6 { grid-column-end: 6; }

.architecture .row-end-6 { grid-row-end: 6; }

.architecture .column-start-7 { grid-column-start: 7; }

.architecture .row-start-7 { grid-row-start: 7; }

.architecture .column-end-7 { grid-column-end: 7; }

.architecture .row-end-7 { grid-row-end: 7; }

.architecture .column-start-8 { grid-column-start: 8; }

.architecture .row-start-8 { grid-row-start: 8; }

.architecture .column-end-8 { grid-column-end: 8; }

.architecture .row-end-8 { grid-row-end: 8; }

.architecture .gray-item { background-color: rgba(245, 245, 247, 0.6); font-size: 0.14286rem; transition: background-color 0.3s; }

.architecture .gray-item:hover, .architecture .gray-item.hover { background-color: #162eb3; color: #ffffff; }

.architecture .gray-item:hover .affix, .architecture .gray-item.hover .affix { background-color: #ffffff; color: #162eb3; }

.architecture .gray-item:hover .table-name, .architecture .gray-item.hover .table-name { color: #ffffff; }

.architecture .white-item { background: #FFFFFF; font-size: 0.125rem; font-weight: 400; line-height: 0.17857rem; color: #333333; }

.architecture-arrow { width: 0.28571rem; display: inline-block; height: 0.05357rem; position: absolute; z-index: 5; }

.architecture-arrow:after { content: ""; width: 0.23214rem; height: 0.00893rem; background-color: #aaaaaa; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.architecture-arrow:before { content: ""; display: block; border: 0.02679rem solid #aaaaaa; border-color: transparent transparent transparent #aaaaaa; position: absolute; top: 50%; right: 0.02679rem; transform: translateY(-50%); }

h3.small-title { font-size: 0.125rem; font-weight: 400; line-height: 0.21429rem; color: #333333; margin: 0.17857rem auto 0; text-align: center; }

.flex-architecture { background: #FAFAFA; padding: 0; align-items: center; justify-content: center; display: flex; margin-bottom: 0; }

.download { padding-top: 0.89286rem; padding-bottom: 0.89286rem; }

.download-list { width: 10.71429rem; margin: 0.35714rem auto 0; display: flex; align-items: center; justify-content: space-between; gap: 0.89286rem; }

.download-item { cursor: pointer; display: block; }

.download-item-block { width: 1.42857rem; height: 1.42857rem; background: #FFFFFF; box-shadow: 0.01786rem 0.01786rem 0.125rem 0.00893rem rgba(180, 212, 241, 0.3); border-radius: 0.05357rem; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }

.download-item-text { font-size: 0.16071rem; font-weight: normal; color: #444444; margin-top: 0.17857rem; text-align: center; transition: transform 0.3s; }

.download-item-text span { display: block; }

.download-item-text span:nth-child(2) { transform: scale3d(0, 0, 0) translateY(0); }

.download-item .hover-down-icon, .download-item .app-download { display: block; background-size: cover; background-repeat: no-repeat; transition: transform 0.3s; }

.download-item .windows-icon { width: 0.32143rem; height: 0.32143rem; background-image: url("../images/download/windows-icon.png"); }

.download-item .mac-icon { width: 0.40179rem; height: 0.40179rem; background-image: url("../images/download/mac-icon.png"); }

.download-item .apple-icon { width: 0.32143rem; height: 0.36607rem; background-image: url("../images/download/apple-icon.png"); }

.download-item .android-icon { width: 0.38393rem; height: 0.44643rem; background-image: url("../images/download/android-icon.png"); }

.download-item .oblique-icon { width: 0.57143rem; height: 0.50893rem; position: absolute; right: 0; top: 0; }

.download-item .oblique-down { background-image: url("../images/download/hear-icon-1.png"); }

.download-item .oblique-code { background-image: url("../images/download/hear-icon-2.png"); }

.download-item .app-download { width: 0.23214rem; height: 0.28571rem; background-image: url("../images/download/down-icon.png"); transform: scale3d(0, 0, 0); }

.download-item .hear-comp { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; top: 0; left: 0; }

.download-item .qrcode { display: block; background-size: cover; background-repeat: no-repeat; transition: transform 0.3s; width: 0.89286rem; height: 0.89286rem; transform: scale3d(0, 0, 0); position: relative; }

.download-item .qrcode img { display: block; width: 100%; height: 100%; }

.download-item .qrcode .down-logo { display: block; width: 0.21429rem; height: 0.21429rem; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); z-index: 3; background: url("../images/download/logo-icon.png"); background-size: cover; }

.download-item:hover .app-download, .download-item:hover .qrcode { transform: scale3d(1, 1, 1); }

.download-item:hover .hover-down-icon { transform: scale3d(0, 0, 0); }

.download-item:hover .oblique-icon { transform: translate3d(0.53571rem, -0.53571rem, 0); }

.download-item:hover .download-item-text span:nth-child(1) { transform: scale3d(0, 0, 0); }

.download-item:hover .download-item-text span:nth-child(2) { transform: scale3d(1, 1, 1) translateY(-100%); }