figma_002

style.css

@@ -7,6 +7,7 @@ html, body, * {
 }
 .wrapper {
     max-width: 1320px;
+    height: 10000px;
 }
 
 /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */
@@ -148,7 +149,6 @@ html, body, * {
 /* ------------------------------------------------HEADER-BODY------------------------------------------------------ */
 
 .header_body {
-
 }
 .header_body_inner {
 }
@@ -159,7 +159,7 @@ html, body, * {
 }
 .header_body_heading {
     font-size: 55px;
-    font-weight: 700;
+    font-weight: 500;
     margin-right: 150px;
 }
 .header_body_heading svg {
@@ -194,86 +194,148 @@ html, body, * {
     height: 19px;
     margin: 0;
 }
-.header_body_row {
+.header_slider {
     display: flex;
-    justify-content: space-between;
+    height: 350px;
+    gap: 10px
 }
-.header_body_collumn {
-    margin: 0;
-    width: 100%;
+.slide {
 }
-.header_collumn_inner {
+.main {
+    flex: 50%;
     background: url("/images/header_body/seo_top_01.png") 100% / cover;
     border-radius: 30px;
-    height: 350px;
-    position: relative;
+    padding: 20px 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-bottom: 10px;
 }
-.header_collumn_row_top {
-    display: block;
-    margin: 0;
-}
-.header_row_first {
+.tags {
     display: flex;
     margin: 0;
-    max-width: 350px;
+    flex-direction: column;
 }
-.header_row_second {
+.row_first {
     display: flex;
+    flex-direction: row;
     margin: 0;
-    max-width: 300px;
+    margin-bottom: 8px;
 }
-.header_row_item {
+.row_second {
+    display: flex;
+    flex-direction: row;
     margin: 0;
-    margin-left: 20px;
-    margin-top: 20px;
-    background-color: #025DC873;
-    padding: 5px;
-    border-radius: 14px;
-    border: 1px solid #fff;
-    position: relative;
 }
-.header_item_link {
+.tags span {
     color: #fff;
-    white-space: nowrap;
+    padding: 8px;
+    background-color: #0C47A0;
+    border-radius: 16px;
+    border: 1px solid #fff;
+    margin: 0;
 }
-.header_item_area {
+.tags svg {
+    margin: auto 0;
     display: block;
     width: 10px;
     height: 10px;
-    background-color: #fff;
-    border-radius: 50%;
 }
-.header_collumn_row_bottom {
-    position: absolute;
-    bottom: 0;
-    left: 25px;
+.content {
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
-.header_row_title {
+.subtitle {
+    margin: 0;
+    color: #fff;
     display: flex;
     align-items: center;
-    color: #fff;
-    margin: 0;
+    justify-content: center;
     gap: 10px;
 }
-.header_row_img {
+.subtitle svg {
+    display: block;
+    width: 24px;
+    height: 24px;
 }
-.header_row_para {
+.index {
+    display: flex;
+    margin: 0;
+    height: 40px;
+    width: 40px;
+    background-color: #fff;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 18px;
 }
-.header_collumn_item {
+.index span {
+
 }
-.header_item_title {
+.slide_small {
+    background-color: #0C47A0;
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 5%;
+    height: 100%;
 }
-.header_item_inner {
+.slide_small_index {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    height: 40px;
+    width: 40px;
+    margin: 0;
+    background-color: #fff;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 18px;
+    margin-bottom: 10px;
 }
-.header_row_paras {
+.slide_small_title {
+    color: #fff;
+    transform: rotate(270deg);
+    font-weight: 500;
+    white-space: nowrap;
+    text-align: center;
+    vertical-align: middle;
 }
-.header_row_heading {
+.second {
+    background-color: #A5C6F6;
 }
-.header_heading_title {
+.slide_small_light {
 }
-.header_heading_text {
+.slide_card {
+    background: url("/images/header_body/seo_top_04.png") 100% / cover;
+    border-radius: 30px;
+    padding: 20px;
+    width: 17%;
 }
-.header_row_btn {
+.card-content {
+    background-color: oklch(45.034% 0.18646 260.482 / 0.259);
+    height: 100%;
+    border-radius: 30px;
+    padding: 15px;
+}
+.card-number {
+    display: flex;
+    height: 40px;
+    width: 40px;
+    margin: 0;
+    background-color: #fff;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 18px;
+}
+.btn {
 }
-.row_btn {
-}