figma_001

style.css

@@ -4,36 +4,37 @@ html, body, * {
   font-size: 14px;
   color: #393939;
   margin: 0 auto;
-  max-width: 1600px;
 }
 .wrapper {
-    margin: 0 60px;
+    max-width: 1320px;
 }
 
 /* -------------------------------------------------------------HEADER-TOP--------------------------------------------------------------------- */
 
 .header_top {
-    display: flex;
-    flex-direction: row;
-    margin: 0 50px;
-    justify-content: space-between;
-    margin-bottom: 100px;
-}
-.header_top_inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 15px 0;
-    flex-direction: column;
+    margin-top: 20px;
+    margin-right: 60px;
+    margin-left: 60px;
+    margin-bottom: 30px;
+}
+.header_top_inner {
+    margin: 20px 0;
+    margin: 0 auto;
+    width: 100%;
 }
 .header_top_wrapper {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+}
+.header_top_list {
+    display: flex;  
 }
 .logo_link {
-margin: 0;
-transition: all .3s;
+    margin: 0;
+    margin-left: 10px;
+    transition: all .3s;
 }
 .logo_link:hover {
     transform: scale(1.05);
@@ -43,17 +44,12 @@ transition: all .3s;
 }
 .header_nav_top {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
     white-space: nowrap;
     background-color: #F4F4F4;
     border-radius: 16px;
 }
 .header_top_item {
-    display: block;
     padding: 10px 16px;
-    color: #000;
-    text-decoration: none;
     position: relative;
     border-radius: 16px;
 }
@@ -83,8 +79,7 @@ transition: all .3s;
 .header_call {
     display: flex;
     margin: 0;
-    justify-content: center;
-    align-items: center;
+    white-space: nowrap;
     gap: 20px;
 }
 .header_call_tel {
@@ -95,10 +90,11 @@ transition: all .3s;
     transition: all .3s;
 }
 .header_call_tel:hover {
-    transform: scale(1.1);
+    transform: scale(1.07);
     color: #0C47A0;
 }
 .header_call_tel svg{
+    display: block;
     width: 18px;
     height: 18px;
 }
@@ -114,7 +110,7 @@ transition: all .3s;
     transition: all .3s;
 }
 .header_call_btn:hover {
-    transform: scale(1.1);
+    transform: scale(1.07);
 }
 .header_call_btn svg {
     display: block;
@@ -132,12 +128,14 @@ transition: all .3s;
     justify-content: space-between;
     background-color: #F4F4F4;
     border-radius: 16px;
+    width: 100%;
 }
 .header_nav_item {
-    margin: 0;
-    display: flex;
+    display: block;
+    justify-content: space-between;
+    align-items: center;
     white-space: nowrap;
-    padding: 10px 20px;
+    padding: 10px 16px;
 }
 .header_nav_link {
     transition: all .1s;
@@ -150,57 +148,112 @@ transition: all .3s;
 /* ------------------------------------------------HEADER-BODY------------------------------------------------------ */
 
 .header_body {
+
 }
 .header_body_inner {
 }
 .header_body_top {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 30px;
 }
 .header_body_heading {
-    display: block;
-    margin: 0;
-    display: flex;
-    justify-content: center;
-    font-size: 30px;
+    font-size: 55px;
     font-weight: 700;
-    color: #393939;
-    max-width: 60%;
-    flex-direction: column;
+    margin-right: 150px;
 }
 .header_body_heading svg {
-    display: block;
-    margin: 0;
+    text-align: center;
+    vertical-align: middle;
 }
 .header_header_img {
-    display: block;
+    text-align: center;
+    vertical-align: middle;
     height: 32px;
     width: 90px;
     background: linear-gradient(to right, #0C47A0, #8FECFC);
     border-radius: 30px;
-    margin: 0;
 }
 .header_body_about {
     max-width: 20%;
-    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 40px;
+}
+.header_about_text {
+    font-weight: 500;
+    margin-top: 5px;
+}
+.header_body_about span {
+    color: #939393;
 }
 .header_about_img {
+    display: block;
+    width: 19px;
+    height: 19px;
+    margin: 0;
 }
 .header_body_row {
+    display: flex;
+    justify-content: space-between;
 }
 .header_body_collumn {
+    margin: 0;
+    width: 100%;
+}
+.header_collumn_inner {
+    background: url("/images/header_body/seo_top_01.png") 100% / cover;
+    border-radius: 30px;
+    height: 350px;
+    position: relative;
 }
 .header_collumn_row_top {
+    display: block;
+    margin: 0;
+}
+.header_row_first {
+    display: flex;
+    margin: 0;
+    max-width: 350px;
+}
+.header_row_second {
+    display: flex;
+    margin: 0;
+    max-width: 300px;
 }
 .header_row_item {
+    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 {
+    color: #fff;
+    white-space: nowrap;
 }
 .header_item_area {
+    display: block;
+    width: 10px;
+    height: 10px;
+    background-color: #fff;
+    border-radius: 50%;
 }
 .header_collumn_row_bottom {
+    position: absolute;
+    bottom: 0;
+    left: 25px;
 }
 .header_row_title {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    margin: 0;
+    gap: 10px;
 }
 .header_row_img {
 }