.page-header .page-header__wrapper {
    height: 100%;
    align-items: unset;
}

.page-header__nav .nav {
    height: 100%;
}

.page-header__nav .nav-item {
    display: flex;
    align-items: center;
    position: relative;
}

.page-header:not(.scrolled) .page-header__nav .nav-item:hover {
    color: #fff;
}

.page-header__nav .nav-item .inner-text {
    position: relative;
    z-index: 1;
}

.page-header__nav .nav-item::after {
    content: "";
    width: 0;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: calc(14 * var(--rpx));
    background: #fff;
    transition: .5s linear;
}

.page-header__nav .nav-item:hover::after {
    width: 100%;
}

.page-header__fun {
    align-self: center;
}

.page-banner {
    height: clamp(calc(300 * var(--rpx)), 25vw, calc(480 * var(--rpx)));
}

.page-banner .page-banner__content {
    --t: clamp(calc(40 * var(--rpx)), 3.64583vw, calc(70 * var(--rpx)));
    top: unset;
    left: 0;
    bottom: var(--t);
    transform: unset;
}

.layer-chip {
    padding-bottom: 0;
}

.layer-chip .layer-header {
    padding-bottom: calc(60 * var(--rpx));
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.ship-list {
    --c: 6;
    --g: calc(20 * var(--rpx));
    --w: calc((100% - (var(--g) * (var(--c) - 1))) / var(--c));
    gap: var(--g);
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(60 * var(--rpx));
}

.ship-item {
    width: var(--w);
    aspect-ratio: 250 / 278;
    position: relative;
}

.ship-item .ship-item__content {
    text-align: left;
    top: calc(20 * var(--rpx));
    left: calc(20 * var(--rpx));
    position: absolute;
}

.ship-item .ship-item__content .inner-text {
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ship-item .ship-item__content .chart {
    color: #fff;
    font-size: var(--font-size-50);
    font-weight: 500;
    line-height: calc(56 / 50);
    transform-origin: left top;
    transition: .3s linear;
}

.ship-item:hover .ship-item__content .chart {
    transform: scale(2);
}

.ship-item .ship-item__content .word {
    color: rgba(255, 255, 255, .5);
    font-size: var(--font-size-20);
    font-weight: 600;
    line-height: 1;
    transition: .3s linear;
}

.ship-item:hover .ship-item__content .word {
    transform: translateY(100%);
    opacity: -1;
}

.ship-item .ship-item__content .border {
    width: 8em;
    aspect-ratio: 92 / 122;
}

.layer-chip .layer-main {
    background: #f9fafb;
    padding: calc(45 * var(--rpx)) 0 calc(130 * var(--rpx));
}

.product-filter-form {
    max-width: 640px;
    width: 100%;
    display: block;
    margin: auto;
}

.product-filter-form .content {
    padding: 10px;
    gap: calc(10 * var(--rpx));
    border-radius: 2px;
    background: #f1f2f5;
}

.product-filter-form .input-field {
    margin-top: 0;
}

.product-filter-form .input-field__content {
    background-color: #fff;
}

.product-filter-form .input-field__value {
    color: #252525;
}

.product-filter-form .input-field__after {
    padding-right: calc(12 * var(--rpx));
}

.product-filter-form .search {
    flex: 6 0 0;
}

.product-filter-form .search .icon img {
    filter: url(#overlay-263e8b);
}


.product-filter-form .filter {
    flex: 4 0 0;
}

.product-filter-form .filter select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    border-radius: 0;
}

.product-filter-form .filter .icon {
    --l: calc(20 * var(--rpx));
    width: var(--l);
    height: var(--l);
    border-radius: 50%;
    background: #f1f2f5;
}

.product-filter-form .filter .icon img {
    width: 50%;
    filter: url(#primary-overlay);
}

.product-filter-form .btn {
    min-width: calc(80 * var(--rpx));
    border-radius: inherit;
    line-height: calc(40 * var(--rpx));
    background: #263E8B;
    cursor: pointer;
}

.product-table {
    max-height: calc(740 * var(--rpx));
    margin-top: calc(35 * var(--rpx));
    overflow: auto;
}

.product-table .product-table__content {
    width: max-content;
    min-width: 100%;
    background: #fff;
}

.product-table table {
    width: 100%;
}

.product-table thead {
    background: rgba(0, 56, 236, 0.15);
}

.product-table thead td {
    color: #263e8b;
    font-weight: 700;
    padding: calc(12 * var(--rpx)) calc(20 * var(--rpx));
}

.product-table tbody tr {
    transition: .3s linear;
    border-top: 1px solid #d7d7d7;
}

.product-table tbody tr:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    border-color: transparent;
}

.product-table tbody td {
    font-weight: 300;
    padding: calc(20 * var(--rpx)) calc(20 * var(--rpx));
    vertical-align: middle;
}

.product-table .td-content {
    max-width: calc(200 * var(--rpx));
    gap: calc(10 * var(--rpx)) 0;
}

.product-table .td-content .product-img {
    width: calc(110 * var(--rpx));
    margin: 0 calc(8 * var(--rpx));
}

.product-table .td-content .product-name {
    width: 100%;
    text-align: center;
}

.product-table .td-content .product-name::before {
    content: '';
    height: 1px;
    background: linear-gradient(90.00deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    display: block;
}

.layer-application {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

.layer-application .layer-header {
    --x: max(var(--space-16), calc((100vw - var(--max-content-width)) / 2));
    --p-t: clamp(calc(40 * var(--rpx)), 5.2083vw, calc(100 * var(--rpx)));
    width: calc(778 / 1920 * 100vw);
    padding-top: var(--p-t);
    padding-left: var(--x);
    background: rgba(255, 255, 255, 1);
}

.layer-application .layer-main {
    width: calc((1920 - 778) / 1920 * 100vw);
}

.layer-application .layer-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.layer-application .layer-bg img {
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    opacity: -1;
    object-fit: cover;
    object-position: right center;
    position: absolute;
    inset: 0;
}

.layer-application .layer-bg img.active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
    transition: 2s linear;
}

.layer-application .application-list {
    margin-top: calc(50 * var(--rpx));
}

.layer-application .application-item {
    --p-l: clamp(var(--space-16), 2.60416vw, calc(50 * var(--rpx)));
    padding-left: var(--p-l);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    position: relative;
}

.layer-application .application-item.active {
    border-color: transparent;
}

.layer-application .application-item::before {
    content: '';
    width: 100%;
    height: 0;
    background: var(--primary-foreground);
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s linear;
    z-index: 1;
}

.layer-application .application-item.active::before {
    height: 100%;
    top: unset;
    bottom: 0;
}

.layer-application .application-item .application-item__content {
    --g: clamp(8px, 2.60416vw, calc(50 * var(--rpx)));
    height: calc(80 * var(--rpx));
    justify-content: flex-start;
    gap: 0 var(--g);
    position: relative;
    z-index: 2;
}

.layer-application .application-item .application-name {
    font-weight: 300;
    transition: color .3s linear;
}

.layer-application .application-item .application-item__icon {
    width: calc(44 * var(--rpx));
    height: calc(34 * var(--rpx));
}

.layer-application .application-item.active .application-item__icon,
.layer-application .application-item:hover .application-item__icon {
    filter: url(#white-overlay);
}

.layer-application .application-item.active .application-name,
.layer-application .application-item:hover .application-name {
    color: #fff;
}

.layer-application .application-swiper {
    width: 100%;
}

.layer-application .application-swiper::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.layer-application .application-swiper .swiper-wrapper {
    position: relative;
    z-index: 2;
}

.layer-application .application-swiper .application-box {
    position: relative;
}

.layer-application .application-swiper .application-box__content {
    --y: clamp(calc(30 * var(--rpx)), 3.385416vw, calc(65 * var(--rpx)));
    --x: clamp(12px, 3.9583vw, calc(76 * var(--rpx)));
    color: #fff;
    padding: var(--y) var(--x);
    position: relative;
    z-index: 1;
}

.layer-application .application-swiper .application-box__content .title {
    font-size: var(--font-size-48);
    line-height: calc(72 / 48);
}

.layer-application .application-swiper .application-box__content .btn {
    min-width: calc(160 * var(--rpx));
    margin-top: calc(30 * var(--rpx));
}

.layer-technological {
    padding-bottom: calc(90 * var(--rpx));
}

.layer-technological .layer-main {
    --p-t: clamp(calc(40 * var(--rpx)), 6.77083vw, calc(130 * var(--rpx)));
    padding-top: var(--p-t);
}

.layer-technological .edge-swiper__content {
    --x: max(var(--space-16), calc((100vw - var(--max-content-width)) / 2));
    margin-left: var(--x);
}

.layer-technological .edge-swiper__content .swiper-wrapper {
    gap: 0 calc(40 * var(--rpx));
}

.layer-technological .edge-box {
    width: calc(372 * var(--rpx));
    aspect-ratio: 372 / 480;
    position: relative;
}

.layer-technological .edge-box__content {
    --x: calc(40 * var(--rpx));
    --y: calc(40 * var(--rpx));
    color: #fff;
    position: absolute;
    inset: 0;
}

.layer-technological .edge-box__content>.inner-text {
    font-size: var(--font-size-28);
    font-weight: 500;
    position: absolute;
    top: var(--y);
    left: var(--x);
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.layer-technological .edge-box__content:hover>.inner-text {
    transform: scale(0);
}

.layer-technological .edge-box__wrapper {
    height: 100%;
    padding: var(--y) var(--x);
    position: relative;
    z-index: 2;
    opacity: -1;
}

.layer-technological .edge-box__wrapper:hover {
    opacity: 1;
}

.layer-technological .edge-box__wrapper .icon {
    width: calc(68 * var(--rpx));
    height: calc(80 * var(--rpx));
    transform: scale(0);
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.layer-technological .edge-box__wrapper:hover .icon {
    transform: scale(1);
}

.layer-technological .edge-box__wrapper .edge-name {
    font-size: var(--font-size-24);
    margin-top: calc(50 * var(--rpx));
    transform: translateY(100%);
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
    text-align: center;
}

.layer-technological .edge-box__wrapper:hover .edge-name {
    transform: translateY(0);
}

.layer-technological .edge-box__wrapper .link {
    background: #fff;
    margin-top: calc(32 * var(--rpx));
    transform: translateY(100%);
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.layer-technological .edge-box__wrapper:hover .link {
    transform: translateY(0);
}

.layer-technological .edge-box__bg {
    width: 100%;
    height: 100%;
}

.layer-technological .edge-box::after {
    content: '';
    width: 100%;
    height: 100%;
    background: #263E8B;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: -1;
    transition: .3s ease-in-out;
}

.layer-technological .edge-box:hover::after {
    opacity: 1;
}

.swiper-fun {
    --m-t: clamp(calc(60 * var(--rpx)), 7.0833333vw, calc(136 * var(--rpx)));
    max-width: 360px;
    width: calc(100% - var(--space-16) * 2);
    margin: var(--m-t) auto 0;
    gap: 0 calc(20 * var(--rpx));
    position: relative;
}

.swiper-fun .swiper-btn {
    border: 1px solid rgba(5, 5, 5, .25);
    transition: .3s linear;
}

.swiper-fun .swiper-btn img {
    width: calc(12 * var(--rpx));
}

.swiper-fun .swiper-btn:active {
    background-color: var(--primary-foreground);
    border-color: transparent;
}

.swiper-fun .swiper-btn:active img {
    filter: url(#white-overlay);
}

.swiper-fun .prev-btn img {
    transform: rotate(180deg);
}

.swiper-fun .swiper-progress {
    height: 2px;
    background: rgba(5, 5, 5, .25);
    overflow: hidden;
}

.swiper-fun .swiper-progress__content {
    width: 0;
    height: 100%;
    background: #050505;
}

.layer-series {
    padding-bottom: 0;
}

.layer-series .layer-header__content {
    --p-t: clamp(calc(60 * var(--rpx)), 4.6875vw, calc(90 * var(--rpx)));
    gap: 0 calc(86 * var(--rpx));
    padding-bottom: var(--p-t);
}

.layer-series .ship-box {
    font-size: var(--font-size-100);
    height: 3em;
    aspect-ratio: 2 / 1;
    position: relative;
}

.layer-series .ship-box .chart {
    font-size: calc(2 * var(--font-size-100));
    font-weight: 900;
    color: rgba(38, 62, 139, .2);
    line-height: calc(81 / 100);
}

.layer-series .ship-box .word {
    font-size: var(--font-size-100);
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(38, 62, 139, .08);
    line-height: calc(81 / 100);
}

.layer-series .ship-box .border {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.layer-series .layer-header__section .desc {
    font-size: var(--font-size-18);
    font-weight: 300;
}

.layer-series .layer-main {
    --p-t: clamp(calc(30 * var(--rpx)), 4.6875vw, calc(90 * var(--rpx)));
    --p-b: clamp(calc(60 * var(--rpx)), 7.8125vw, calc(150 * var(--rpx)));
    padding-top: var(--p-t);
    padding-bottom: var(--p-b);
    background: #f9fafb;
}

.layer-series .layer-main .product-filter-form {
    margin-right: 0;
}

.layer-product-detail {
    padding-top: calc(80 * var(--rpx));
    padding-bottom: calc(55 * var(--rpx));
}

.layer-product-detail .product-box .product-box__header {
    color: #263E8B;
    padding: calc(32 * var(--rpx)) var(--space-16);
    background: linear-gradient(180.00deg, rgba(160.11, 166.19, 184.42, 0.23), rgba(241, 242, 245, 1) 100%);
    gap: 0 calc(116 * var(--rpx));
}

.layer-product-detail .product-box .product-img {
    width: calc(282 * var(--rpx));
    aspect-ratio: 282 / 273;
}

.layer-product-detail .product-box .product-box__section {
    height: 100%;
}

.layer-product-detail .product-box .product-name .label {
    font-size: var(--font-size-14);
    font-weight: 300;
}

.layer-product-detail .product-box .product-name .value {
    font-size: var(--font-size-28);
    line-height: 1;
    font-weight: 500;
}

.layer-product-detail .product-box .feature-box {
    font-size: var(--font-size-18);
    margin-top: calc(34 * var(--rpx));
}

.layer-product-detail .product-box .feature-list {
    margin-top: calc(16 * var(--rpx));
    gap: calc(20 * var(--rpx));
}

.layer-product-detail .product-box .feature-item {
    --l: calc(60 * var(--rpx));
    width: var(--l);
    height: var(--l);
    background: #fff;
    transition: .8s ease-in-out;
}

.layer-product-detail .product-box .feature-item:hover {
    background: #263E8B;
}

.layer-product-detail .product-box .feature-item:hover img {
    filter: url(#white-overlay);
}

.layer-product-detail .product-box__content {
    border: 1px solid rgba(228, 229, 235, 1);
    padding: calc(50 * var(--rpx)) var(--space-16) calc(50 * var(--rpx));
}

.layer-product-detail .product-box__content .cell {
    padding: calc(16 * var(--rpx)) 0;
    font-weight: 300;
    position: relative;
}

.layer-product-detail .product-box__content .cell .label {
    --m-r: clamp(calc(20 * var(--rpx)), 6.8125vw, calc(150 * var(--rpx)));
    width: calc(120 * var(--rpx));
    margin-right: var(--m-r);
    color: rgba(37, 37, 37, 5);
}

.layer-product-detail .product-box__content .cell::after {
    content: '';
    width: 100%;
    height: 1px;
    max-width: 840px;
    background: rgba(0, 0, 0, .1);
    position: absolute;
    left: 0;
    bottom: 0;
}

.layer-applicable {
    padding-top: calc(55 * var(--rpx));
    padding-bottom: calc(110 * var(--rpx));
}

.layer-applicable .layer-header .title {
    text-align: center;
}

.layer-applicable .layer-main {
    padding-top: calc(80 * var(--rpx));
}

.layer-applicable .applicable-swiper__content {
    --x: max(var(--space-16), calc((100vw - var(--max-content-width)) / 2));
    margin-left: var(--x);
}

.layer-applicable .swiper-wrapper {
    --g: clamp(var(--space-16), 2.0833vw, calc(40 * var(--rpx)));
    gap: 0 var(--g);
}

.layer-applicable .applicable-box {
    width: calc(600 * var(--rpx));
    aspect-ratio: 600 / 480;
    position: relative;
}

.layer-applicable .applicable-box__content {
    color: #fff;
    padding: calc(50 * var(--rpx)) calc(60 * var(--rpx));
    position: absolute;
    inset: 0;
    z-index: 1;
}

.layer-applicable .applicable-box__content .title {
    font-size: var(--font-size-48);
    font-weight: 500;
}

.layer-applicable .applicable-box__content .desc {
    font-size: var(--font-size-18);
    font-weight: 300;
    margin-top: calc(36 * var(--rpx));
    transform: translateY(100%);
    opacity: 0;
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.layer-applicable .applicable-box__content:hover .desc {
    transform: translateY(0);
    opacity: 1;
}

.layer-applicable .applicable-box__content .btn {
    min-width: calc(160 * var(--rpx));
    border-color: #263E8B;
    background: #263E8B;
    margin: auto 0 0 auto;
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.layer-applicable .applicable-box__content:hover .btn {
    border-color: currentColor;
    background: transparent;
}

.layer-applicable .applicable-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #263E8B;
    opacity: 0;
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.layer-applicable .applicable-box:hover::after {
    opacity: 1;
}

.layer-help {
    padding: calc(130 * var(--rpx)) 0;
    position: relative;
}

.layer-help .help-section {
    color: #fff;
    text-align: center;
}

.layer-help .help-section .title {
    font-size: var(--font-size-38);
}

.layer-help .help-section .desc {
    font-size: var(--font-size-18);
    margin-top: calc(14 * var(--rpx));
}

.layer-help .help-section .btn {
    min-width: calc(196 * var(--rpx));
    margin: calc(24 * var(--rpx)) auto 0;
}

.layer-help .layer-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.layer-help .layer-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.filter {
    position: relative;
    cursor: pointer;
    user-select: none;
    height: 100%;
}

.filter-curr {
    overflow: hidden;
    height: 100%;
}

.filter .filter-btn {
    height: 40px;
    font-size: 14px;
    line-height: 1;
    transition: 0.3s;
    padding-left: 10px;
    padding-right: 10px;
    gap: 30px;
    background-color: #fff;
}

.filter .filter-curr-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.filter-choose .filter-btn {
    text-align: center;
}

.filter .icon {
    --lay-icon-w: 20px;
    background-color: #f1f2f5;
}

.filter-choose {
    border-radius: 5px;
    width: 100%;
    position: absolute;
    top: 100%;
    right: 0;
    transform: translateY(10px);
    z-index: 999;
    background-color: var(--theme-bg-color);
    transition: 0.3s;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px rgba(71, 52, 26, 0.1);
    visibility: hidden;
    z-index: 999;
}

.filter-choose .filter-choose-btn+.filter-choose-btn {
    border-top: 1px solid #e5e5e5;
}

.filter-choose .filter-choose-btn:hover {
    background-color: var(--primary);
    color: #fff !important;
}

.filter.active .filter-choose {
    opacity: 1;
    transform: translateY(5px);
    visibility: visible;
}

/* amlogic迁移样式start */
.table-wrap {
    overflow-x: auto;
    margin-top: calc(35 * var(--rpx));
    padding-bottom: 10px;
    min-height: 50vh;
    max-height: 80vh;
    overflow-y: auto;
}

.table-wrap table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0px 0px 10px 0px rgba(71, 52, 26, 0.1);
    background-color: #fff;
}

.table-wrap thead {
    position: sticky;
    top: -1px;
    left: 0;
    background: #d6dff8;
    z-index: 1;
}

.table-wrap thead td {
    color: var(--primary);
    font-weight: 700;
}

.table-wrap tbody tr {
    transition: .3s linear;
    border-top: 1px solid #d7d7d7;
}

.table-wrap td {
    width: 150px;
    padding: 20px;
}

.table-wrap td:nth-child(7),
.table-wrap td:nth-child(12) {
    width: 240px;
}

.table-wrap td:first-child {
    border-left: 0;
}

.table-wrap td:last-child {
    border-right: 0;
}

.table-wrap tbody td {
    transition: 0.3s;
    word-break: break-all;
    font-weight: 300;
}

.table-wrap .product-model .txt {
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    gap: 20px;
    text-align: center;
}

.table-wrap tbody tr:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    border-color: transparent;
}

.product-info-parameter p {
    padding: calc(16 * var(--rpx)) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.product-info-parameter span {
    display: block;
    width: 20%;
    margin-right: max(30px, 10%);
    opacity: 0.5;
    flex-shrink: 0;
}

/* amlogic迁移样式end */


.applicable-box__bg {
    height: 100%;
}

.applicable-box__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1440px) {
    .ship-item .ship-item__content .border {
        width: 6em;
    }
}

@media screen and (max-width: 960px) {
    .ship-list {
        --c: 3;
    }
}

@media screen and (max-width: 750px) {
    .layer-application .layer-content {
        display: block;
    }

    .layer-application .layer-header {
        width: 100%;
        padding-right: var(--space-16);
        background: rgba(255, 255, 255, .8);
    }

    .layer-application .layer-main {
        width: 100%;
    }

    .layer-application .application-list {
        --c: 2;
        --g: calc(20 * var(--rpx));
        --w: calc((100% - (var(--g) * (var(--c) - 1))) / var(--c));
        display: flex;
        flex-wrap: wrap;
        gap: var(--g);
    }

    .layer-application .application-item {
        width: var(--w);
    }

    .ship-list {
        --c: 2;
    }

    .ship-item .ship-item__content .border {
        width: 9em;
    }

    .layer-series .layer-header__content {
        flex-wrap: wrap;
    }

    .layer-series .ship-box {
        width: 100%;
    }

    .layer-applicable .applicable-box {
        width: calc(100vw - var(--space-16) * 2);
    }
}