@@ -261,6 +268,7 @@
font-family: "PingFang SC", sans-serif;
/* max-width: 932px; */
margin: 0 auto;
+ position: relative;
}
.hero-section {
@@ -368,7 +376,7 @@
line-height: 32px;
letter-spacing: 1.2px;
display: flex;
- align-items: center;
+ align-items: flex-start;
gap: 16px;
}
.feature-description {
@@ -386,7 +394,7 @@
}
.solutions-content {
display: flex;
- gap: 16px;
+ gap: 24px;
}
.solutions-list {
display: flex;
@@ -398,7 +406,6 @@
text-align: left;
display: flex;
flex-direction: column;
- gap: 16px;
}
.solution-icon {
width: 92px;
@@ -406,12 +413,16 @@
padding-left: 16px;
}
.solution-title {
- font-size: 20px;
- line-height: 28px;
+ font-family: "PingFang SC";
+ font-size: 24px;
+ font-style: normal;
font-weight: 500;
+ line-height: 32px; /* 133.333% */
+ letter-spacing: 1.2px;
display: flex;
gap: 16px;
- align-items: center;
+ align-items: flex-start;
+ margin-bottom: 16px;
}
.solution-description {
font-size: 16px;
@@ -422,7 +433,6 @@
}
.solution-image-container {
width: 434px;
- height: 628px;
border-radius: 16px;
}
.solution-image {
@@ -473,7 +483,7 @@
letter-spacing: 1.2px;
display: flex;
gap: 16px;
- align-items: center;
+ align-items: flex-start;
}
.advantage-description {
font-size: 16px;
@@ -542,5 +552,49 @@
height: 20px;
background: #ff7bac;
flex-shrink: 0;
+ margin-top: 6px;
+}
+
+.grid-lines {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 932px;
+ height: 100%;
+ pointer-events: none;
+ z-index: 0;
+}
+
+.grid-lines .line {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+}
+
+.grid-lines .line.solid {
+ width: 1px;
+ background-color: rgba(0, 0, 0, 0.08);
+}
+
+.grid-lines .line.dashed {
+ width: 0;
+ border-left: 1px dotted rgba(0, 0, 0, 0.12);
+}
+
+.grid-lines .line-1 {
+ left: 0;
+}
+.grid-lines .line-2 {
+ left: 233px;
+}
+.grid-lines .line-3 {
+ left: 466px;
+}
+.grid-lines .line-4 {
+ left: 699px;
+}
+.grid-lines .line-5 {
+ right: 0;
}