You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1288 lines
28 KiB
1288 lines
28 KiB
@charset "UTF-8";
|
|
@property --ring-angle {
|
|
syntax: "<angle>";
|
|
inherits: false;
|
|
initial-value: 0deg;
|
|
}
|
|
@keyframes progressRing {
|
|
from {
|
|
--ring-angle: 0deg;
|
|
}
|
|
to {
|
|
--ring-angle: 360deg;
|
|
}
|
|
}
|
|
.main-product .s-btn {
|
|
min-width: 12.5rem;
|
|
min-height: 3.625rem;
|
|
padding: 0 2rem;
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
}
|
|
.main-product .s-btn--light {
|
|
color: var(--color-primary);
|
|
box-shadow: 0 0.5rem 1.5rem rgba(46, 53, 58, 0.06);
|
|
}
|
|
.main-product #p-intro,
|
|
.main-product #p-spec,
|
|
.main-product #p-download,
|
|
.main-product #p-related {
|
|
scroll-margin-top: 6rem;
|
|
}
|
|
|
|
.p-subnav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 110;
|
|
height: 5rem;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-bottom: 1px solid rgba(46, 53, 58, 0.1);
|
|
backdrop-filter: blur(0.9375rem);
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
|
|
}
|
|
.p-subnav.is-visible {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
visibility: visible;
|
|
}
|
|
.p-subnav__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 2.5rem;
|
|
height: 100%;
|
|
}
|
|
.p-subnav__title {
|
|
margin: 0;
|
|
flex-shrink: 0;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-24);
|
|
font-weight: 400;
|
|
line-height: var(--font-32);
|
|
white-space: nowrap;
|
|
}
|
|
.p-subnav__links {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex: 1;
|
|
gap: 5rem;
|
|
min-width: 0;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
.p-subnav__link {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
padding: 1.625rem 0;
|
|
color: rgba(46, 53, 58, 0.6);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 400;
|
|
line-height: var(--font-27);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: color var(--duration-fast) var(--easing);
|
|
}
|
|
.p-subnav__link::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 0.1875rem;
|
|
background: var(--color-primary);
|
|
transform: scaleX(0);
|
|
transform-origin: center;
|
|
transition: transform var(--duration-fast) var(--easing);
|
|
}
|
|
.p-subnav__link:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
.p-subnav__link.is-active {
|
|
color: var(--color-primary);
|
|
}
|
|
.p-subnav__link.is-active::after {
|
|
transform: scaleX(1);
|
|
}
|
|
.p-subnav__cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
min-width: 10rem;
|
|
height: 3rem;
|
|
padding: 0 1.5rem;
|
|
border: 1px solid var(--color-primary);
|
|
border-radius: 1.875rem;
|
|
background: transparent;
|
|
color: var(--color-primary);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-18);
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: color 0.25s ease, background 0.25s ease;
|
|
}
|
|
.p-subnav__cta:hover {
|
|
background: var(--color-primary);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
body.is-p-subnav .site-header {
|
|
transform: translateY(-100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.p-hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
padding-top: 13.25rem;
|
|
padding-bottom: 4.8125rem;
|
|
overflow: hidden;
|
|
background: linear-gradient(180deg, rgba(175, 181, 185, 0.3) 0%, rgba(175, 181, 185, 0) 100%);
|
|
}
|
|
.p-hero__mark {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 0;
|
|
transform: translate(-50%, -50%);
|
|
color: rgba(175, 181, 185, 0.15);
|
|
font-family: "MiSans VF";
|
|
font-size: 25rem;
|
|
font-weight: 630;
|
|
line-height: 33.125rem;
|
|
letter-spacing: 0px;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
.p-hero__inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
.p-hero .section__title {
|
|
text-align: center;
|
|
}
|
|
.p-hero__media {
|
|
position: relative;
|
|
width: min(27.125rem, 72vw);
|
|
margin-top: 1.5rem;
|
|
}
|
|
.p-hero__media img {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.p-intro {
|
|
padding-top: 6.25rem;
|
|
}
|
|
.p-intro__inner {
|
|
display: grid;
|
|
grid-template-columns: minmax(17.5rem, 40rem) minmax(0, 60rem);
|
|
gap: 1.875rem;
|
|
align-items: start;
|
|
padding-bottom: 6.25rem;
|
|
border-bottom: 1px solid rgb(223, 224, 226);
|
|
}
|
|
.p-intro__visual {
|
|
position: sticky;
|
|
top: calc(var(--header-h) + 6.25rem);
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
.p-intro__gallery {
|
|
width: 100%;
|
|
max-width: 40rem;
|
|
align-self: stretch;
|
|
min-width: 0;
|
|
aspect-ratio: 1;
|
|
background: var(--color-white);
|
|
overflow: hidden;
|
|
}
|
|
.p-intro__gallery .swiper-wrapper,
|
|
.p-intro__gallery .swiper-slide {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.p-intro__gallery .swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.p-intro__gallery img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
.p-intro__gallery-nav {
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
.p-intro__gallery-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
.p-intro__gallery-pagination .swiper-pagination-bullet {
|
|
position: relative;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin: 0;
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
}
|
|
.p-intro__gallery-pagination .swiper-pagination-bullet::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
background: conic-gradient(transparent var(--ring-angle), transparent var(--ring-angle));
|
|
mask: radial-gradient(farthest-side, transparent calc(100% - 0.1875rem - 0.5px), #000 calc(100% - 0.1875rem + 0.5px));
|
|
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.1875rem - 0.5px), #000 calc(100% - 0.1875rem + 0.5px));
|
|
}
|
|
.p-intro__gallery-pagination .swiper-pagination-bullet::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
border-radius: 50%;
|
|
background: rgb(175, 181, 185);
|
|
transform: translate(-50%, -50%);
|
|
transition: background var(--duration-normal) var(--easing);
|
|
}
|
|
.p-intro__gallery-pagination .swiper-pagination-bullet-active::before {
|
|
background: conic-gradient(var(--color-primary) var(--ring-angle), transparent var(--ring-angle));
|
|
animation: progressRing 3s linear forwards;
|
|
}
|
|
.p-intro__gallery-pagination .swiper-pagination-bullet-active::after {
|
|
background: var(--color-primary);
|
|
}
|
|
.p-intro__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5rem;
|
|
min-width: 0;
|
|
}
|
|
.p-intro__block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.5rem;
|
|
}
|
|
|
|
.p-advantage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
.p-advantage__card {
|
|
padding: 2.5rem;
|
|
border-radius: 1.875rem;
|
|
background: rgba(175, 181, 185, 0.15);
|
|
}
|
|
.p-advantage__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.p-advantage__title {
|
|
flex: 1;
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-28);
|
|
font-weight: 400;
|
|
line-height: var(--font-37);
|
|
}
|
|
.p-advantage__icon {
|
|
width: 2.8125rem;
|
|
height: 2.8125rem;
|
|
flex-shrink: 0;
|
|
color: var(--color-text);
|
|
}
|
|
.p-advantage__icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.p-advantage__desc {
|
|
margin: 0;
|
|
max-width: 45rem;
|
|
color: var(--color-text-muted);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 400;
|
|
line-height: var(--font-28);
|
|
}
|
|
|
|
.p-feature__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0 2.5rem;
|
|
}
|
|
.p-feature__item {
|
|
padding: 2.5rem 0;
|
|
border-top: 1px solid rgb(223, 224, 226);
|
|
}
|
|
.p-feature__value {
|
|
margin: 0 0 1rem;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-32);
|
|
font-weight: 400;
|
|
line-height: var(--font-64);
|
|
}
|
|
.p-feature__value span {
|
|
font-size: var(--font-48);
|
|
}
|
|
.p-feature__value--text {
|
|
font-size: var(--font-48);
|
|
}
|
|
.p-feature__label {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 400;
|
|
line-height: var(--font-28);
|
|
}
|
|
|
|
.p-spec {
|
|
padding-top: 6.25rem;
|
|
}
|
|
.p-spec__inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.5rem;
|
|
}
|
|
.p-spec__models {
|
|
position: sticky;
|
|
top: 5rem;
|
|
z-index: 5;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2rem 0;
|
|
background: var(--color-white);
|
|
border-bottom: 0.125rem solid rgb(223, 224, 226);
|
|
}
|
|
.p-spec__models-label {
|
|
min-width: 20rem;
|
|
flex-shrink: 0;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 400;
|
|
line-height: var(--font-28);
|
|
}
|
|
.p-spec__label-wrapper {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 1rem;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.p-spec__label {
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
min-width: 20rem;
|
|
padding: 1.125rem 0;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 400;
|
|
line-height: var(--font-28);
|
|
white-space: nowrap;
|
|
}
|
|
.p-spec__tabs {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
gap: 5rem;
|
|
border: 0;
|
|
}
|
|
.p-spec__tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
opacity: 0.5;
|
|
cursor: pointer;
|
|
transition: opacity 0.25s ease, color 0.25s ease;
|
|
}
|
|
.p-spec__tab.active {
|
|
opacity: 1;
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
}
|
|
.p-spec__tab:focus, .p-spec__tab:focus-visible, .p-spec__tab:hover {
|
|
color: inherit;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.p-spec__tab-media {
|
|
width: 7.5rem;
|
|
height: 7.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--color-white);
|
|
}
|
|
.p-spec__tab-media img {
|
|
width: auto;
|
|
max-width: 5rem;
|
|
display: block;
|
|
}
|
|
.p-spec__tab-name {
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-24);
|
|
font-weight: 400;
|
|
line-height: var(--font-32);
|
|
}
|
|
.p-spec__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.p-spec__subtitle {
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 500;
|
|
line-height: var(--font-27);
|
|
}
|
|
.p-spec__panels {
|
|
width: 100%;
|
|
}
|
|
.p-spec__table-wrap {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
.p-spec__col-label {
|
|
width: 20rem;
|
|
}
|
|
.p-spec__col-sub {
|
|
width: 10rem;
|
|
}
|
|
.p-spec__table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
.p-spec__table th,
|
|
.p-spec__table td {
|
|
padding: 1.25rem 1.5rem;
|
|
border: 1px solid rgb(223, 224, 226);
|
|
color: var(--color-text-muted);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-16);
|
|
font-weight: 400;
|
|
line-height: var(--font-21);
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.p-download {
|
|
padding-top: 6.25rem;
|
|
padding-bottom: 6.25rem;
|
|
}
|
|
.p-download__inner {
|
|
display: grid;
|
|
grid-template-columns: minmax(15rem, 40rem) minmax(0, 60rem);
|
|
gap: 1.875rem;
|
|
align-items: start;
|
|
}
|
|
.p-download__visual {
|
|
position: sticky;
|
|
top: calc(var(--header-h) + 6.25rem);
|
|
z-index: 5;
|
|
align-self: start;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
max-width: 40rem;
|
|
height: fit-content;
|
|
}
|
|
.p-download__visual img {
|
|
width: min(22.125rem, 70%);
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
.p-download__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.5rem;
|
|
min-width: 0;
|
|
}
|
|
.p-download__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
.p-download__item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
padding: 2.5rem;
|
|
border-radius: 1.25rem;
|
|
background: rgba(175, 181, 185, 0.15);
|
|
}
|
|
.p-download__name {
|
|
margin-bottom: 1rem;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-24);
|
|
font-weight: 400;
|
|
line-height: var(--font-32);
|
|
}
|
|
.p-download__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-16);
|
|
line-height: var(--font-21);
|
|
}
|
|
.p-download__meta-divider {
|
|
width: 1px;
|
|
height: 0.875rem;
|
|
flex-shrink: 0;
|
|
background: rgb(175, 181, 185);
|
|
}
|
|
.p-download__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
color: var(--color-text-muted);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-18);
|
|
line-height: var(--font-24);
|
|
transition: color var(--duration-fast) var(--easing);
|
|
}
|
|
.p-download__link svg {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
display: block;
|
|
}
|
|
.p-download__link:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
.p-download__link:hover path,
|
|
.p-download__link:hover stroke {
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.p-related {
|
|
padding-top: 6.25rem;
|
|
padding-bottom: 5.5rem;
|
|
border-top: 1px solid rgb(223, 224, 226);
|
|
}
|
|
.p-related__inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2.5rem;
|
|
}
|
|
.p-related__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
}
|
|
.p-related__swiper {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.p-related__card {
|
|
height: auto;
|
|
}
|
|
.p-related__link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
height: 100%;
|
|
padding: 2.5rem;
|
|
border-radius: 1.25rem;
|
|
background: rgba(175, 181, 185, 0.15);
|
|
transition: background var(--duration-normal) var(--easing);
|
|
}
|
|
.p-related__link:hover {
|
|
background: rgba(175, 181, 185, 0.22);
|
|
}
|
|
.p-related__media {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
background: transparent;
|
|
}
|
|
.p-related__media img {
|
|
width: auto;
|
|
max-width: 6.25rem;
|
|
max-height: 12.875rem;
|
|
display: block;
|
|
}
|
|
.p-related__foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid rgba(46, 53, 58, 0.1);
|
|
}
|
|
.p-related__name {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-20);
|
|
font-weight: 500;
|
|
line-height: var(--font-27);
|
|
}
|
|
.p-related__arrow {
|
|
width: 1rem;
|
|
height: 0.875rem;
|
|
flex-shrink: 0;
|
|
color: var(--color-primary);
|
|
}
|
|
.p-related__arrow svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.p-related__arrow path {
|
|
fill: currentColor;
|
|
}
|
|
.p-related__pagination {
|
|
position: static;
|
|
margin-top: 2.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
.p-related__pagination .swiper-pagination-bullet {
|
|
position: relative;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin: 0;
|
|
opacity: 1;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
}
|
|
.p-related__pagination .swiper-pagination-bullet::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIzMi4wMDAwMDAiIGhlaWdodD0iMzIuMDAwMDAwIiBmaWxsPSJub25lIiBjdXN0b21GcmFtZT0iIzAwMDAwMCI+Cgk8ZGVmcz4KCQk8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50X2N1c3RvbV9ncmFkaWVudF84Ij4KCQkJPHN0b3Agc3RvcC1jb2xvcj0icmdiKDIzOSw2Nyw1MykiIG9mZnNldD0iMCIgc3RvcC1vcGFjaXR5PSIxIiAvPgoJCQk8c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMjU1LDI1NSwyNTUpIiBvZmZzZXQ9IjEiIHN0b3Atb3BhY2l0eT0iMCIgLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxtYXNrIGlkPSJvdXRsaW5lX21hc2tfOCI+CgkJCTxwYXRoIGQ9Ik0xNiAzMkM3LjE2MzQ0IDMyIDAgMjQuODM2NiAwIDE2QzAgNy4xNjM0NCA3LjE2MzQ0IDAgMTYgMEMyNC44MzY2IDAgMzIgNy4xNjM0NCAzMiAxNkMzMiAyNC44MzY2IDI0LjgzNjYgMzIgMTYgMzJaTTMwIDE2QzMwIDguMjY4MDEgMjMuNzMyIDIgMTYgMkM4LjI2ODAxIDIgMiA4LjI2ODAxIDIgMTZDMiAyMy43MzIgOC4yNjgwMSAzMCAxNiAzMEMyMy43MzIgMzAgMzAgMjMuNzMyIDMwIDE2WiIgZmlsbD0icmdiKDI1NSwyNTUsMjU1KSIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgoJCTwvbWFzaz4KCTwvZGVmcz4KCTxjaXJjbGUgaWQ9IuakreWchiAxNjYiIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0icmdiKDE5NiwxOTYsMTk2KSIgZmlsbC1vcGFjaXR5PSIwIiAvPgoJPGNpcmNsZSBpZD0i5qSt5ZyGIDE2NiIgY3g9IjE2IiBjeT0iMTYiIHI9IjE1IiBzdHJva2U9InJnYigwLDAsMCkiIHN0cm9rZS1vcGFjaXR5PSIwIiBzdHJva2Utd2lkdGg9IjIuMDAwMDAwIiBjdXN0b21HcmFkaWVudD0idXJsKCNjdXN0b21fZ3JhZGllbnRfOCkiIC8+Cgk8ZyBpZD0iY3VzdG9tX2dyYWRpZW50XzgiIGFuZ3VsYXJHcmFkaWVudD0idXJsKCNwYWludF9jdXN0b21fZ3JhZGllbnRfOCk7IDMxLjAwMDAwMCAxNS4wMDAwMDAgMTUuMDAwMDAwIDE1LjAwMDAwMCAxNS4wMDAwMDAgLTEuMDAwMDAwIiBtYXNrPSJ1cmwoI291dGxpbmVfbWFza184KSI+CgkJPGc+CgkJCTxmb3JlaWduT2JqZWN0IHdpZHRoPSIzMi4wMDAwMDAiIGhlaWdodD0iMzIuMDAwMDAwIiB4PSIwLjAwMDAwMCIgeT0iMC4wMDAwMDAiPgoJCQkJPGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgc3R5bGU9ImJhY2tncm91bmQ6Y29uaWMtZ3JhZGllbnQoZnJvbSAwLjAwMDAwMGRlZywgcmdiKDIzOSw2Nyw1MykgMCUsIHJnYigyNTUsMjU1LDI1NSkgMTAwJSwgcmdiKDIzOSw2Nyw1MykgMTAwJSk7bWFzazpjb25pYy1ncmFkaWVudChmcm9tIDAuMDAwMDAwZGVnLCByZ2JhKDI1NSwyNTUsMjU1LDEpIDAlLCByZ2JhKDI1NSwyNTUsMjU1LDApIDEwMCUsIHJnYmEoMjU1LDI1NSwyNTUsMSkgMTAwJSk7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTsiIC8+CgkJCTwvZm9yZWlnbk9iamVjdD4KCQk8L2c+Cgk8L2c+Cjwvc3ZnPgo=") center/100% 100% no-repeat;
|
|
opacity: 0;
|
|
transition: opacity var(--duration-normal) var(--easing);
|
|
}
|
|
.p-related__pagination .swiper-pagination-bullet::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 0.5rem;
|
|
height: 0.5rem;
|
|
border-radius: 50%;
|
|
background: rgb(175, 181, 185);
|
|
transform: translate(-50%, -50%);
|
|
transition: background var(--duration-normal) var(--easing);
|
|
}
|
|
.p-related__pagination .swiper-pagination-bullet-active::before {
|
|
opacity: 1;
|
|
}
|
|
.p-related__pagination .swiper-pagination-bullet-active::after {
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
@media (max-width: 1439px) {
|
|
.main-product #p-intro,
|
|
.main-product #p-spec,
|
|
.main-product #p-download,
|
|
.main-product #p-related {
|
|
scroll-margin-top: 72Px;
|
|
}
|
|
.main-product .s-btn {
|
|
min-width: 180Px;
|
|
min-height: 52Px;
|
|
font-size: 18Px;
|
|
}
|
|
.p-subnav {
|
|
height: 64Px;
|
|
}
|
|
.p-subnav__inner {
|
|
gap: 24Px;
|
|
}
|
|
.p-subnav__title {
|
|
font-size: 18Px;
|
|
line-height: 26Px;
|
|
}
|
|
.p-subnav__links {
|
|
gap: 24Px;
|
|
justify-content: flex-start;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.p-subnav__links::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.p-subnav__link {
|
|
padding: 18Px 0;
|
|
font-size: 16Px;
|
|
line-height: 22Px;
|
|
}
|
|
.p-subnav__cta {
|
|
min-width: 132Px;
|
|
height: 40Px;
|
|
padding: 0 16Px;
|
|
font-size: 15Px;
|
|
}
|
|
.p-hero {
|
|
padding-top: 120Px;
|
|
padding-bottom: 56Px;
|
|
}
|
|
.p-hero__mark {
|
|
font-size: 220Px;
|
|
line-height: 1;
|
|
}
|
|
.p-hero__media {
|
|
width: min(360Px, 68vw);
|
|
}
|
|
.p-intro {
|
|
padding-top: 72Px;
|
|
}
|
|
.p-intro__inner {
|
|
grid-template-columns: 1fr;
|
|
gap: 40Px;
|
|
padding-bottom: 72Px;
|
|
}
|
|
.p-intro__visual {
|
|
position: static;
|
|
width: 100%;
|
|
align-items: stretch;
|
|
}
|
|
.p-intro__gallery {
|
|
width: 100%;
|
|
max-width: none;
|
|
align-self: stretch;
|
|
}
|
|
.p-intro__content {
|
|
gap: 48Px;
|
|
}
|
|
.p-intro__block {
|
|
gap: 32Px;
|
|
}
|
|
.p-feature__grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
.p-feature__item:nth-child(n) {
|
|
padding-left: 0;
|
|
padding-right: 24Px;
|
|
}
|
|
.p-feature__value {
|
|
font-size: 28Px;
|
|
line-height: 48Px;
|
|
}
|
|
.p-feature__value span {
|
|
font-size: 40Px;
|
|
}
|
|
.p-feature__value--text {
|
|
font-size: 40Px;
|
|
line-height: 48Px;
|
|
}
|
|
.p-feature__label {
|
|
font-size: 18Px;
|
|
line-height: 26Px;
|
|
}
|
|
.p-spec {
|
|
padding-top: 72Px;
|
|
}
|
|
.p-spec__models {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 16Px;
|
|
padding: 24Px 0;
|
|
}
|
|
.p-spec__models-label {
|
|
font-size: 18Px;
|
|
line-height: 26Px;
|
|
}
|
|
.p-spec__tabs {
|
|
flex: none;
|
|
justify-content: flex-start;
|
|
gap: 40Px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.p-spec__tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.p-spec__tab {
|
|
flex-shrink: 0;
|
|
gap: 12Px;
|
|
}
|
|
.p-spec__tab-name {
|
|
font-size: 20Px;
|
|
line-height: 28Px;
|
|
}
|
|
.p-spec__subtitle {
|
|
padding-top: 24Px;
|
|
padding-bottom: 24Px;
|
|
font-size: 18Px;
|
|
}
|
|
.p-spec__col-label {
|
|
width: 160Px;
|
|
}
|
|
.p-spec__col-sub {
|
|
width: 120Px;
|
|
}
|
|
.p-spec__table {
|
|
min-width: 560Px;
|
|
}
|
|
.p-spec__table th,
|
|
.p-spec__table td {
|
|
padding: 14Px 16Px;
|
|
font-size: 14Px;
|
|
line-height: 20Px;
|
|
}
|
|
.p-download {
|
|
padding-top: 72Px;
|
|
padding-bottom: 72Px;
|
|
}
|
|
.p-download__inner {
|
|
grid-template-columns: 1fr;
|
|
gap: 40Px;
|
|
}
|
|
.p-download__visual {
|
|
position: static;
|
|
min-height: 0;
|
|
order: -1;
|
|
padding: 16Px 0;
|
|
max-width: 100%;
|
|
}
|
|
.p-download__visual img {
|
|
width: min(280Px, 55%);
|
|
}
|
|
.p-related {
|
|
padding-top: 56Px;
|
|
padding-bottom: 80Px;
|
|
}
|
|
.p-related__header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 16Px;
|
|
}
|
|
.p-related .s-arrows {
|
|
display: none;
|
|
}
|
|
.p-related__link {
|
|
padding: 28Px;
|
|
}
|
|
.p-related__pagination {
|
|
margin-top: 32Px;
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
.main-product #p-intro,
|
|
.main-product #p-spec,
|
|
.main-product #p-download,
|
|
.main-product #p-related {
|
|
scroll-margin-top: 64Px;
|
|
}
|
|
.main-product .s-btn {
|
|
min-width: 160Px;
|
|
min-height: 48Px;
|
|
font-size: 16Px;
|
|
}
|
|
.p-subnav {
|
|
height: 56Px;
|
|
}
|
|
.p-subnav__title {
|
|
display: none;
|
|
}
|
|
.p-subnav__inner {
|
|
gap: 16Px;
|
|
}
|
|
.p-subnav__links {
|
|
gap: 20Px;
|
|
}
|
|
.p-subnav__link {
|
|
padding: 16Px 0;
|
|
font-size: 14Px;
|
|
line-height: 20Px;
|
|
}
|
|
.p-subnav__link::after {
|
|
height: 2Px;
|
|
}
|
|
.p-subnav__cta {
|
|
min-width: 0;
|
|
height: 36Px;
|
|
padding: 0 12Px;
|
|
font-size: 13Px;
|
|
}
|
|
.p-hero {
|
|
padding-top: 88Px;
|
|
padding-bottom: 40Px;
|
|
min-height: unset;
|
|
}
|
|
.p-hero__mark {
|
|
font-size: 96Px;
|
|
}
|
|
.p-hero__media {
|
|
display: none;
|
|
width: min(260Px, 82vw);
|
|
margin-top: 16Px;
|
|
}
|
|
.p-intro {
|
|
padding-top: 0;
|
|
}
|
|
.p-intro__inner {
|
|
gap: 36Px;
|
|
padding-bottom: 0;
|
|
}
|
|
.p-intro__content {
|
|
gap: 32Px;
|
|
}
|
|
.p-intro__block {
|
|
gap: 24Px;
|
|
}
|
|
.p-intro__gallery-pagination {
|
|
gap: 12Px;
|
|
}
|
|
.p-intro__gallery-pagination .swiper-pagination-bullet {
|
|
width: 28Px;
|
|
height: 28Px;
|
|
}
|
|
.p-advantage__card {
|
|
padding: 24Px;
|
|
border-radius: 20Px;
|
|
}
|
|
.p-advantage__head {
|
|
margin-bottom: 16Px;
|
|
}
|
|
.p-advantage__title {
|
|
font-size: 22Px;
|
|
line-height: 30Px;
|
|
}
|
|
.p-advantage__icon {
|
|
width: 36Px;
|
|
height: 36Px;
|
|
}
|
|
.p-advantage__desc {
|
|
font-size: 16Px;
|
|
line-height: 24Px;
|
|
}
|
|
.p-feature__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.p-feature__item {
|
|
padding: 24Px 0;
|
|
}
|
|
.p-feature__value, .p-feature__value--text {
|
|
font-size: 28Px;
|
|
line-height: 40Px;
|
|
margin-bottom: 12Px;
|
|
}
|
|
.p-feature__value span, .p-feature__value--text span {
|
|
font-size: 36Px;
|
|
}
|
|
.p-feature__label {
|
|
font-size: 16Px;
|
|
line-height: 24Px;
|
|
}
|
|
.p-spec {
|
|
padding-top: 48Px;
|
|
}
|
|
.p-spec__inner {
|
|
gap: 28Px;
|
|
}
|
|
.p-spec__models {
|
|
top: 56Px;
|
|
gap: 12Px;
|
|
padding: 16Px 0;
|
|
}
|
|
.p-spec__label-wrapper {
|
|
gap: 8Px;
|
|
}
|
|
.p-spec__label {
|
|
padding: 10Px 8Px;
|
|
min-width: unset;
|
|
}
|
|
.p-spec__tabs {
|
|
gap: 24Px;
|
|
justify-content: center;
|
|
}
|
|
.p-spec__tab-media {
|
|
width: 72Px;
|
|
height: 72Px;
|
|
}
|
|
.p-spec__tab-media img {
|
|
max-width: 52Px;
|
|
height: auto;
|
|
}
|
|
.p-spec__tab-name {
|
|
font-size: 16Px;
|
|
line-height: 22Px;
|
|
}
|
|
.p-spec__subtitle {
|
|
padding-top: 20Px;
|
|
padding-bottom: 16Px;
|
|
font-size: 16Px;
|
|
line-height: 22Px;
|
|
}
|
|
.p-spec__table {
|
|
min-width: 480Px;
|
|
}
|
|
.p-spec__table th,
|
|
.p-spec__table td {
|
|
padding: 10Px 12Px;
|
|
font-size: 13Px;
|
|
line-height: 18Px;
|
|
}
|
|
.p-download {
|
|
padding-top: 48Px;
|
|
padding-bottom: 48Px;
|
|
}
|
|
.p-download__content {
|
|
gap: 28Px;
|
|
}
|
|
.p-download__list {
|
|
gap: 16Px;
|
|
}
|
|
.p-download__item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 16Px;
|
|
padding: 24Px;
|
|
}
|
|
.p-download__name {
|
|
margin-bottom: 12Px;
|
|
font-size: 20Px;
|
|
line-height: 28Px;
|
|
}
|
|
.p-download__meta {
|
|
gap: 12Px;
|
|
font-size: 14Px;
|
|
line-height: 20Px;
|
|
}
|
|
.p-download__link {
|
|
font-size: 16Px;
|
|
line-height: 22Px;
|
|
}
|
|
.p-related {
|
|
padding-top: 40Px;
|
|
padding-bottom: 56Px;
|
|
}
|
|
.p-related__inner {
|
|
gap: 28Px;
|
|
}
|
|
.p-related__link {
|
|
padding: 24Px;
|
|
gap: 16Px;
|
|
}
|
|
.p-related__media img {
|
|
max-width: 80Px;
|
|
max-height: 160Px;
|
|
}
|
|
.p-related__foot {
|
|
padding-top: 16Px;
|
|
}
|
|
.p-related__name {
|
|
font-size: 18Px;
|
|
line-height: 24Px;
|
|
}
|
|
.p-related__pagination {
|
|
margin-top: 24Px;
|
|
gap: 12Px;
|
|
}
|
|
.p-related__pagination .swiper-pagination-bullet {
|
|
width: 28Px;
|
|
height: 28Px;
|
|
}
|
|
}
|
|
/* 选型表弹窗 */
|
|
.p-selection-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.p-selection-modal[hidden] {
|
|
display: none;
|
|
}
|
|
.p-selection-modal__overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(46, 53, 58, 0.5);
|
|
}
|
|
.p-selection-modal__dialog {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 87.5rem;
|
|
max-width: calc(100vw - 2 * var(--p-x));
|
|
max-height: calc(100vh - 7.5rem);
|
|
border-radius: 1.875rem;
|
|
background: var(--color-white);
|
|
overflow: hidden;
|
|
}
|
|
.p-selection-modal__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-shrink: 0;
|
|
padding: 1.5rem 2.5rem;
|
|
}
|
|
.p-selection-modal__title {
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-24);
|
|
font-weight: 400;
|
|
line-height: var(--font-32);
|
|
}
|
|
.p-selection-modal__close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
transition: background var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
|
|
}
|
|
.p-selection-modal__close:hover {
|
|
background: rgba(175, 181, 185, 0.15);
|
|
color: var(--color-primary);
|
|
}
|
|
.p-selection-modal__close svg {
|
|
display: block;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
.p-selection-modal__body {
|
|
min-height: 0;
|
|
padding-bottom: 3.125rem;
|
|
}
|
|
.p-selection-modal__table-wrap {
|
|
max-height: 37.5rem;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.p-selection-table {
|
|
width: 100%;
|
|
min-width: 82.5rem;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
}
|
|
.p-selection-table th,
|
|
.p-selection-table td {
|
|
min-height: 3.75rem;
|
|
padding: 1.25rem 1rem;
|
|
color: var(--color-text);
|
|
font-family: "MiSans VF", "PingFang SC", sans-serif;
|
|
font-size: var(--font-16);
|
|
font-weight: 400;
|
|
line-height: var(--font-21);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
.p-selection-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
font-weight: 500;
|
|
background: var(--color-white);
|
|
border-bottom: 0.125rem solid rgb(223, 224, 226);
|
|
}
|
|
.p-selection-table td {
|
|
border-right: 1px solid rgb(223, 224, 226);
|
|
border-bottom: 1px solid rgb(223, 224, 226);
|
|
}
|
|
.p-selection-table td:first-child {
|
|
border-left: 1px solid rgb(223, 224, 226);
|
|
}
|
|
.p-selection-table tbody tr:hover td {
|
|
background: rgba(175, 181, 185, 0.12);
|
|
}
|
|
|
|
@media (max-width: 1439px) {
|
|
.p-selection-modal__dialog {
|
|
border-radius: 20Px;
|
|
}
|
|
.p-selection-modal__head {
|
|
padding: 20Px 24Px;
|
|
}
|
|
.p-selection-modal__title {
|
|
font-size: 20Px;
|
|
line-height: 28Px;
|
|
}
|
|
.p-selection-table th,
|
|
.p-selection-table td {
|
|
padding: 16Px 12Px;
|
|
font-size: 15Px;
|
|
line-height: 20Px;
|
|
}
|
|
}
|