Kaynağa Gözat

문구 수정 및 신규 섹션 추가

DESKTOP-T61HUSC\user 1 ay önce
ebeveyn
işleme
c7fd99e258

+ 74 - 17
assets/css/media.css

@@ -89,10 +89,10 @@
     width: 100%;
     background-size: cover;
   }
-  main .section--container .mna--maching--wrap .txt--wrap {
+  main .section--container .mna--matching--wrap .txt--wrap {
     width: 40%;
   }
-  main .section--container .mna--maching--wrap .txt--wrap > h3 {
+  main .section--container .mna--matching--wrap .txt--wrap > h3 {
     font-size: 36px;
   }
   main .section--container .mna--free--wrap {
@@ -168,6 +168,42 @@
     width: calc(50% - 10px);
     padding: 40px 80px 60px 40px;
   }
+  main .section--container .mna--teaser--wrap {
+    gap: 20px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box {
+    padding: 50px 35px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box > h3 {
+    font-size: 30px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box .circle {
+    padding: 15px;
+    font-size: 15px;
+    margin-top: 30px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box > h4 {
+    margin-top: 30px;
+    margin-bottom: 25px;
+    font-size: 20px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box > ul > li {
+    font-size: 16px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box > ul > li > span {
+    font-size: 14px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box .desc {
+    margin-top: 35px;
+    font-size: 15px;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box > a {
+    padding: 18px 40px;
+    margin-top: 35px;
+  }
+  main .matching--section .section--container .title--wrap .title {
+    font-size: 35px;
+  }
   main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt > p {
     font-size: 14px;
     margin-bottom: 40px;
@@ -184,24 +220,24 @@
     padding: 60px 40px 60px 380px;
     background-position: left 20px bottom;
   }
-  main .section--container .mna--maching--wrap {
+  main .section--container .mna--matching--wrap {
     gap: 60px;
     flex-direction: column;
   }
-  main .section--container .mna--maching--wrap .txt--wrap {
+  main .section--container .mna--matching--wrap .txt--wrap {
     width: 100%;
     text-align: center;
   }
-  main .section--container .mna--maching--wrap .txt--wrap > h3 {
+  main .section--container .mna--matching--wrap .txt--wrap > h3 {
     margin-bottom: 60px;
   }
-  main .section--container .mna--maching--wrap .seq--wrap {
+  main .section--container .mna--matching--wrap .seq--wrap {
     width: 100%;
   }
-  main .section--container .mna--maching--wrap .seq--wrap .seq--box {
+  main .section--container .mna--matching--wrap .seq--wrap .seq--box {
     margin: 0 !important;
   }
-  main .section--container .mna--maching--wrap .seq--wrap .seq--box .seq--right {
+  main .section--container .mna--matching--wrap .seq--wrap .seq--box .seq--right {
     margin-left: auto;
   }
   main .section--container .mna--reason--wrap {
@@ -227,6 +263,16 @@
   main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .bubble b {
     font-size: 15px;
   }
+  main .section--container .mna--teaser--wrap {
+    flex-direction: column;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box {
+    width: 100%;
+    background-size: 20%;
+  }
+  main .section--container .mna--teaser--wrap .teaser--box.blue--type > a {
+    margin-top: 50px;
+  }
 }
 @media (max-width: 768px) {
   header .header--line--banner--wrap .inner--contents {
@@ -234,7 +280,8 @@
   }
   header .header--line--banner--wrap .inner--contents > p {
     text-align: left;
-    padding-left: 166px;
+    padding-left: 146px;
+    padding-right: 40px;
   }
   header .header--line--banner--wrap .inner--contents > p .mo {
     display: block;
@@ -288,29 +335,29 @@
     width: 82%;
     height: 300px;
   }
-  main .section--container .mna--maching--wrap {
+  main .section--container .mna--matching--wrap {
     margin-bottom: 80px;
   }
-  main .section--container .mna--maching--wrap .txt--wrap > h3 {
+  main .section--container .mna--matching--wrap .txt--wrap > h3 {
     font-size: 30px;
   }
-  main .section--container .mna--maching--wrap .txt--wrap > p {
+  main .section--container .mna--matching--wrap .txt--wrap > p {
     font-size: 16px;
   }
-  main .section--container .mna--maching--wrap .seq--wrap {
+  main .section--container .mna--matching--wrap .seq--wrap {
     gap: 20px;
   }
-  main .section--container .mna--maching--wrap .seq--wrap .seq--box {
+  main .section--container .mna--matching--wrap .seq--wrap .seq--box {
     padding: 30px 35px;
     gap: 20px;
   }
-  main .section--container .mna--maching--wrap .seq--wrap .seq--box .seq--left .numb {
+  main .section--container .mna--matching--wrap .seq--wrap .seq--box .seq--left .numb {
     font-size: 13px;
     width: 26px;
     margin-bottom: 15px;
     height: 26px;
   }
-  main .section--container .mna--maching--wrap .seq--wrap .seq--box .seq--left > p {
+  main .section--container .mna--matching--wrap .seq--wrap .seq--box .seq--left > p {
     font-size: 17px;
   }
   main .section--container .mna--free--wrap {
@@ -441,6 +488,16 @@
     top: 8px;
     left: 0px;
   }
+  main .section--container .mna--teaser--wrap {
+    margin-top: 35px;
+  }
+  main .matching--section .section--container {
+    padding-top: 60px;
+    padding-bottom: 80px;
+  }
+  main .matching--section .section--container .title--wrap .title {
+    font-size: 30px;
+  }
   main .main--visual--section .main--visual--wrap .main--visual--img {
     height: 650px;
   }
@@ -448,7 +505,7 @@
     max-width: 100%;
     width: 100%;
     object-fit: cover;
-    max-height: 100%;
+    height: 650px;
   }
   main .main--visual--section .main--visual--wrap .main--visual--img::before {
     height: 305px;

+ 162 - 18
assets/css/style.css

@@ -21,7 +21,6 @@ time, mark, audio, video {
   padding: 0;
   border: 0;
   font-size: 100%;
-  font: inherit;
   vertical-align: baseline;
 }
 
@@ -355,10 +354,10 @@ header .header--ham--wrap .header--ham--menu .ham--r ul li a.actv {
 }
 
 main {
-  padding-top: 180px !important;
+  padding-top: 170px !important;
 }
 main.actv {
-  padding-top: 100px !important;
+  padding-top: 90px !important;
 }
 main .main--visual--section {
   overflow: hidden;
@@ -558,6 +557,19 @@ main .blue--section .section--container {
   padding-top: 110px;
   padding-bottom: 80px;
 }
+main .matching--section {
+  background-image: url(../img/bg--matching.png);
+  background-size: cover;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+}
+main .matching--section .section--container {
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+main .matching--section .section--container .title--wrap .title {
+  font-size: 40px;
+}
 main .faq--section {
   background-color: #F8F8F8;
 }
@@ -688,16 +700,16 @@ main .section--container .mna--impor--wrap .desc--wrap p {
 main .section--container .mna--impor--wrap .desc--wrap p b {
   font-weight: 600;
 }
-main .section--container .mna--maching--wrap {
+main .section--container .mna--matching--wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 100px;
 }
-main .section--container .mna--maching--wrap .txt--wrap {
+main .section--container .mna--matching--wrap .txt--wrap {
   width: 367px;
 }
-main .section--container .mna--maching--wrap .txt--wrap > h3 {
+main .section--container .mna--matching--wrap .txt--wrap > h3 {
   color: #222;
   font-size: 40px;
   letter-spacing: -0.8px;
@@ -705,30 +717,30 @@ main .section--container .mna--maching--wrap .txt--wrap > h3 {
   line-height: 1.4;
   margin-bottom: 80px;
 }
-main .section--container .mna--maching--wrap .txt--wrap > h3 b {
+main .section--container .mna--matching--wrap .txt--wrap > h3 b {
   font-weight: 600;
 }
-main .section--container .mna--maching--wrap .txt--wrap > h3 b.color--blue {
+main .section--container .mna--matching--wrap .txt--wrap > h3 b.color--blue {
   color: #008cff;
 }
-main .section--container .mna--maching--wrap .txt--wrap > p {
+main .section--container .mna--matching--wrap .txt--wrap > p {
   color: #444;
   font-size: 18px;
   letter-spacing: -0.36px;
   line-height: 1.7;
   font-weight: 400;
 }
-main .section--container .mna--maching--wrap .seq--wrap {
+main .section--container .mna--matching--wrap .seq--wrap {
   display: flex;
   flex-direction: column;
   gap: 30px;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box {
   padding: 35px 40px;
   display: flex;
   gap: 40px;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box .numb {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box .numb {
   color: #008cff;
   font-size: 15px;
   font-weight: 800;
@@ -741,31 +753,31 @@ main .section--container .mna--maching--wrap .seq--wrap .seq--box .numb {
   border-radius: 50%;
   margin-bottom: 20px;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box p {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box p {
   color: #fff;
   font-size: 18px;
   line-height: 1.4;
   font-weight: 500;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(1) {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(1) {
   margin-right: 140px;
   border-radius: 40px 40px 10px 40px;
   background-color: #1a98ff;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(2) {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(2) {
   border-radius: 40px 40px 40px 10px;
   background-color: #8486FB;
   margin-left: auto;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(2) .numb {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(2) .numb {
   color: #8486FB;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(3) {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(3) {
   background-color: #7EC5FF;
   border-radius: 40px 40px 10px 40px;
   margin-right: auto;
 }
-main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(3) .numb {
+main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(3) .numb {
   color: #7EC5FF;
 }
 main .section--container .mna--free--wrap {
@@ -1398,6 +1410,138 @@ main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box >
   left: 20px;
   top: 10px;
 }
+main .section--container .mna--teaser--wrap {
+  margin-top: 60px;
+  display: flex;
+  gap: 40px;
+}
+main .section--container .mna--teaser--wrap .teaser--box {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  padding: 65px 60px;
+  line-height: 1.4;
+  border-radius: 30px;
+  background-color: #fff;
+  background-image: url(../img/img--matching1.svg);
+  background-repeat: no-repeat;
+  background-position: right top;
+}
+main .section--container .mna--teaser--wrap .teaser--box > h3 {
+  font-size: 35px;
+  color: #333;
+  letter-spacing: -0.7px;
+  font-weight: 400;
+}
+main .section--container .mna--teaser--wrap .teaser--box > h3 > b {
+  color: #7330FF;
+  font-weight: 700;
+}
+main .section--container .mna--teaser--wrap .teaser--box > h4 {
+  margin-top: 50px;
+  color: #333;
+  font-size: 25px;
+  font-weight: 500;
+  margin-bottom: 30px;
+  letter-spacing: -0.5px;
+}
+main .section--container .mna--teaser--wrap .teaser--box > h4 > b {
+  font-weight: 700;
+  color: #222;
+}
+main .section--container .mna--teaser--wrap .teaser--box .circle {
+  width: fit-content;
+  line-height: 1;
+  margin-top: 35px;
+  padding: 15px 25px;
+  border-radius: 100px;
+  color: #7330ff;
+  font-size: 16px;
+  font-weight: 400;
+  border: 1px dashed rgba(115, 48, 255, 0.5);
+}
+main .section--container .mna--teaser--wrap .teaser--box .circle b {
+  color: #7330ff;
+  font-weight: 800;
+}
+main .section--container .mna--teaser--wrap .teaser--box > ul {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+main .section--container .mna--teaser--wrap .teaser--box > ul > li {
+  padding-left: 25px;
+  position: relative;
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: -0.36px;
+}
+main .section--container .mna--teaser--wrap .teaser--box > ul > li::before {
+  content: "ㆍ";
+  top: 0;
+  left: 5px;
+  position: absolute;
+}
+main .section--container .mna--teaser--wrap .teaser--box > ul > li > b {
+  font-weight: 700;
+}
+main .section--container .mna--teaser--wrap .teaser--box > ul > li > span {
+  font-size: 17px;
+  font-weight: 500;
+}
+main .section--container .mna--teaser--wrap .teaser--box .desc {
+  margin-top: 40px;
+  font-weight: 400;
+  letter-spacing: -0.34px;
+  color: #555;
+  font-size: 17px;
+}
+main .section--container .mna--teaser--wrap .teaser--box > a {
+  margin-top: 60px;
+  padding: 20px 40px;
+  width: fit-content;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.36px;
+  background-color: #7330ff;
+  border-radius: 100px;
+  color: #fff;
+}
+main .section--container .mna--teaser--wrap .teaser--box > a > b {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: -0.28px;
+}
+main .section--container .mna--teaser--wrap .teaser--box > a > span {
+  letter-spacing: -0.28px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 400;
+}
+main .section--container .mna--teaser--wrap .teaser--box > a .ico {
+  width: 14px;
+  margin-left: 10px;
+  height: 14px;
+  background-image: url(../img/ico--btn--arrow2.svg);
+}
+main .section--container .mna--teaser--wrap .teaser--box.blue--type {
+  background-image: url(../img/img--matching2.svg);
+}
+main .section--container .mna--teaser--wrap .teaser--box.blue--type > h3 > b {
+  color: #008cff;
+}
+main .section--container .mna--teaser--wrap .teaser--box.blue--type .circle {
+  border: 1px dashed rgba(0, 140, 255, 0.5);
+  color: #008cff;
+}
+main .section--container .mna--teaser--wrap .teaser--box.blue--type .circle > b {
+  color: #008cff;
+}
+main .section--container .mna--teaser--wrap .teaser--box.blue--type > a {
+  margin-top: auto;
+  background-color: #008CFF;
+}
 
 footer {
   background-color: #111;

BIN
assets/img/bg--matching.png


+ 4 - 0
assets/img/ico--btn--arrow2.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.91669 7H11.0834" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 2.9165L11.0833 6.99984L7 11.0832" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 1
assets/img/img--free.svg


Dosya farkı çok büyük olduğundan ihmal edildi
+ 6 - 0
assets/img/img--matching1.svg


Dosya farkı çok büyük olduğundan ihmal edildi
+ 6 - 0
assets/img/img--matching2.svg


+ 76 - 5
assets/scss/media.scss

@@ -120,7 +120,7 @@
           }
         }
       }
-      .mna--maching--wrap{
+      .mna--matching--wrap{
         .txt--wrap{
           width: 40%;
           >h3{
@@ -207,6 +207,50 @@
         }
         gap: 20px;
       }
+      .mna--teaser--wrap{
+        gap: 20px;
+        .teaser--box{
+          padding: 50px 35px;
+          >h3{
+            font-size: 30px;
+          }
+          .circle{
+            padding: 15px;
+            font-size: 15px;
+            margin-top: 30px;
+          }
+          >h4{
+            margin-top: 30px;
+            margin-bottom: 25px;
+            font-size: 20px;
+          }
+          >ul{
+            >li{
+              font-size: 16px;
+              >span{
+                font-size: 14px;
+              }
+            }
+          }
+          .desc{
+            margin-top: 35px;
+            font-size: 15px;
+          }
+          >a{
+            padding: 18px 40px;
+            margin-top: 35px;
+          }
+        }
+      }
+    }
+    .matching--section{
+      .section--container{
+        .title--wrap{
+          .title{
+            font-size: 35px;
+          }
+        }
+      }
     }
     .main--visual--section{
       .main--visual--wrap{
@@ -242,7 +286,7 @@
         padding: 60px 40px 60px 380px;
         background-position: left 20px bottom;
       }
-      .mna--maching--wrap{
+      .mna--matching--wrap{
         gap: 60px;
         flex-direction: column;
         .txt--wrap{
@@ -291,6 +335,18 @@
           }
         }
       }
+      .mna--teaser--wrap{
+        flex-direction: column;
+        .teaser--box{
+          width: 100%;
+          background-size: 20%;
+          &.blue--type{
+            >a{
+              margin-top: 50px;
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -302,7 +358,8 @@
         justify-content: flex-start;
         >p{
           text-align: left;
-          padding-left: 166px;
+          padding-left: 146px;
+          padding-right: 40px;
           .mo{
             display: block;
           }
@@ -365,7 +422,7 @@
           height: 300px;
         }
       }
-      .mna--maching--wrap{
+      .mna--matching--wrap{
         margin-bottom: 80px;
         .txt--wrap{
           >h3{
@@ -556,6 +613,20 @@
           }
         }
       }
+      .mna--teaser--wrap{
+        margin-top: 35px;
+      }
+    }
+    .matching--section{
+      .section--container{
+        padding-top: 60px;
+        padding-bottom: 80px;
+        .title--wrap{
+          .title{
+            font-size: 30px;
+          }
+        }
+      }
     }
     .main--visual--section{
       .main--visual--wrap{
@@ -565,7 +636,7 @@
             max-width: 100%;
             width: 100%;
             object-fit: cover;
-            max-height: 100%;
+            height: 650px;
           }
           &::before{
             height: 305px;

+ 152 - 4
assets/scss/style.scss

@@ -23,7 +23,6 @@ time, mark, audio, video {
 	padding: 0;
 	border: 0;
 	font-size: 100%;
-	font: inherit;
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
@@ -361,9 +360,9 @@ header{
 }
 
 main{
-	  padding-top: 180px!important;
+	  padding-top: 170px!important;
   &.actv{
-    padding-top: 100px!important;
+    padding-top: 90px!important;
   }
   
   .main--visual--section{
@@ -556,6 +555,21 @@ main{
 			padding-bottom: 80px;
 		}
 	}
+	.matching--section{
+		background-image: url(../img/bg--matching.png);
+		background-size: cover;
+		background-attachment: fixed;
+		background-repeat: no-repeat;
+		.section--container{
+			padding-top: 100px;
+			padding-bottom: 100px;
+			.title--wrap{
+				.title{
+					font-size: 40px;
+				}
+			}
+		}
+	}
 	.faq--section{
 		background-color: #F8F8F8;
 	}
@@ -687,7 +701,7 @@ main{
 				}
 			}
 		}
-		.mna--maching--wrap{
+		.mna--matching--wrap{
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
@@ -1414,6 +1428,140 @@ main{
 				}
 			}
 		}
+		.mna--teaser--wrap{
+			margin-top: 60px;
+			display: flex;
+			gap: 40px;
+			.teaser--box{
+				width: 50%;
+				display: flex;
+				flex-direction: column;
+				padding: 65px 60px;
+				line-height: 1.4;
+				border-radius: 30px;
+				background-color: #fff;
+				background-image: url(../img/img--matching1.svg);
+				background-repeat: no-repeat;
+				background-position: right top;
+				>h3{
+					font-size: 35px;
+					color: #333;
+					letter-spacing: -0.7px;
+					font-weight: 400;
+					>b{
+						color: #7330FF;
+						font-weight: 700;
+					}
+				}
+				>h4{
+					margin-top: 50px;
+					color: #333;
+					font-size: 25px;
+					font-weight: 500;
+					margin-bottom: 30px;
+					letter-spacing: -0.5px;
+					>b{
+						font-weight: 700;
+						color: #222;
+					}
+				}
+				.circle{
+					width: fit-content;
+					line-height: 1;
+					margin-top: 35px;
+					padding: 15px 25px;
+					border-radius: 100px;
+					color: #7330ff;
+					font-size: 16px;
+					font-weight: 400;
+					border: 1px dashed rgba(115, 48, 255, 0.50);
+					b{
+						color: #7330ff;
+						font-weight: 800;
+					}
+				}
+				>ul{
+					display: flex;
+					flex-direction: column;
+					gap: 10px;
+					>li{
+						padding-left: 25px;
+						position: relative;
+						font-size: 18px;
+						font-weight: 500;
+						letter-spacing: -0.36px;
+						&::before{
+							content: 'ㆍ';
+							top: 0;
+							left: 5px;
+							position: absolute;
+						}
+						>b{
+							font-weight: 700;
+						}
+						>span{
+							font-size: 17px;
+							font-weight: 500;
+						}
+					}
+				}
+				.desc{
+					margin-top: 40px;
+					font-weight: 400;
+					letter-spacing: -0.34px;
+					color: #555;
+					font-size: 17px;
+				}
+				>a{
+					margin-top: 60px;
+					padding: 20px 40px;
+					width: fit-content;
+					font-size: 18px;
+					font-weight: 600;
+					letter-spacing: -0.36px;
+					background-color: #7330ff;
+					border-radius: 100px;
+					color: #fff;
+					>b{
+						color: #fff;
+						font-size: 14px;
+						font-weight: 700;
+						letter-spacing: -0.28px;
+					}
+					>span{
+						letter-spacing: -0.28px;
+						color: #fff;
+						font-size: 14px;
+						font-weight: 400;
+					}
+					.ico{
+						width: 14px;
+						margin-left: 10px;
+						height: 14px;
+						background-image: url(../img/ico--btn--arrow2.svg);
+					}
+				}
+				&.blue--type{
+					background-image: url(../img/img--matching2.svg);
+					>h3{
+						>b{
+							color: #008cff;
+						}
+					}
+					.circle{
+						border: 1px dashed rgba(0, 140, 255, 0.50);
+						color: #008cff;
+						>b{
+							color: #008cff;
+						}
+					}
+					>a{
+						margin-top: auto;
+						background-color: #008CFF;
+					}
+				}
+			}
+		}
 	}
 }
 

+ 37 - 5
index.html

@@ -190,13 +190,13 @@
                             <div class=desc--wrap>
                                 <h3>M&A에서 가장 중요한 매도자·매수자 매칭은 <br />
                                     <b>결혼 시 어떤 신랑과 어떤 신부를 만나느냐</b> 만큼 <br />중요합니다.</h3>
-                                <p>* 상대방을 못 만나면, 결혼을 못하는 것처럼 M&A도 못하게 됩니다.<br><b>결국 어렵게 의뢰받은 딜 정보 사장되게(사라지게) 됩니다.</b></p>
+                                <p>* 상대방을 못 만나면, 결혼을 못하는 것처럼 M&A도 못하게 됩니다.<br><b>결국 어렵게 의뢰받은 딜 정보 사장되게(사라지게) 됩니다.</b></p>
                             </div>
                         </div>
-                        <div class="mna--maching--wrap">
+                        <div class="mna--matching--wrap">
                             <div class="txt--wrap">
                                 <h3>세부마는 의뢰받은 <b>M&A 기업수 1만개 이상</b> 딜정보를 보유하고 있는 <b class="color--blue">압도적 1위 매도-매수 매칭조직</b>입니다.</h3>
-                                <p>세부마(SeBuMa)는 M&A자문조직에게 최적의 매칭을  만들어 드립니다.</p>
+                                <p>세부마(SeBuMa)는 M&A자문조직에게 최적의 매칭을 만들어 드립니다.</p>
                             </div>
                             <div class="seq--wrap">
                                 <div class="seq--box">
@@ -233,8 +233,8 @@
                                 <img src="./assets/img/img--free.svg" alt="">
                             </div>
                             <div class="desc--wrap">
-                                <h3>매칭 Free</h3>
-                                <p>거래소는 매칭을 위한 시스템 구축, 압도적 1위 딜 정보 축적, 매칭 요청 시 매칭을 위한 많은 기업분석, 시간/노력, 인건비 등의 실비용을 우선 부담.<br /><b>성공하면 자문 조직은 거래소에 매칭 fee 지급 (수령금액의 5%, 개인은 10%)</b></p>
+                                <h3>매칭 Fee</h3>
+                                <p>세부마는 매칭을 위한 시스템 구축, 압도적 1위 딜 정보 축적, 매칭 요청 시 매칭을 위한 많은 기업분석, 시간/노력, 인건비 등의 실비용을 우선 부담합니다.<br /><b>성공하면 자문 조직은 거래소에 매칭 fee 지급 (수령금액의 5%, 개인은 10%)</b></p>
                             </div>
                         </div>
                         <div class="mna--reason--wrap">
@@ -244,6 +244,38 @@
                     </div>
                 </section>
             </article>
+            <article>
+                <section class="matching--section">
+                    <div class="section--container">
+                        <div class="title--wrap">
+                            <h2 class="title">세부마는 M&A 희망 기업 수<br><b>1만개 이상 딜 정보 보유 (압도적 1위)</b></h2>
+                        </div>
+                        <div class="mna--teaser--wrap">
+                            <div class="teaser--box">
+                                <h3><b>매도 티저</b> 보유자는<br>매칭 신청하세요</h3>
+                                <p class="circle">자문 조직 <b>매도</b> 티저 ←> 세부마 <b>매수</b> 티저 매칭</p>
+                                <h4><b>세부마, 매수</b> 희망 기업 보유 현황</h4>
+                                <ul>
+                                    <li>수천 개의 매수 희망 기업 보유</li>
+                                    <li>매도 티저 금액 : <b>10억 ~ 3,000억</b> 가능<br><span>(100억 ~ 1,000억원 매수하려는 기업이 가장 많음)</span></li>
+                                </ul>
+                                <p class="desc">* 코스피, 코스닥, 중견 기업, 외감 법인 약 1,000개 기업 이상 보유</p>
+                                <a href="#"><b>매도</b> <span>티저 보유자</span><br>매칭 신청하기<i class="ico"></i></a>
+                            </div>
+                            <div class="teaser--box blue--type">
+                                <h3><b>매수 티저</b> 보유자는<br>매칭 신청하세요</h3>
+                                <p class="circle">자문 조직 <b>매수</b> 티저 ←> 세부마 <b>매도</b> 티저 매칭</p>
+                                <h4><b>세부마, 매도</b> 희망 기업 보유 현황</h4>
+                                <ul>
+                                    <li>수천 개의 매도 희망 기업 보유</li>
+                                    <li>매수 티저 금액 : <b>10억 ~ 1,000억</b> 가능</li>
+                                </ul>
+                                <a href="#"><b>매수</b> <span>티저 보유자</span><br>매칭 신청하기<i class="ico"></i></a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </article>
             <article>
                 <section class="blue--section">
                     <div class="section--container">

Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor