수정 요청사항 반영

css/media.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @media (max-width: 1200px) {
   header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap {
     padding: 20px;
@@ -195,6 +196,7 @@
     padding-right: 20px;
   }
 }
+
 @media (max-width: 1000px) {
   main .section--container .four--strategy--wrap .strategy--cont3 .box {
     background-size: 20%;
@@ -353,6 +355,7 @@
     right: 30px;
   }
 }
+
 @media (max-width: 768px) {
   .mb--80 {
     margin-bottom: 40px !important;
@@ -528,7 +531,6 @@
         flex-wrap: wrap;
     row-gap: 60px;
     -webkit-column-gap: 15px;
-       -moz-column-gap: 15px;
             column-gap: 15px;
   }
   main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle {
@@ -539,7 +541,7 @@
     position: relative;
   }
   main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(2)::after {
-    content: "";
+    content: '';
     position: absolute;
     width: 1px;
     height: 30px;
@@ -795,7 +797,7 @@
     position: relative;
   }
   main .section--container .all--progress--wrap .step--section .inner--grid .grid:last-child::after {
-    content: "";
+    content: '';
     display: inline-block;
     background: rgba(46, 204, 113, 0.5);
     position: absolute;
@@ -854,6 +856,7 @@
     font-size: 14px;
   }
 }
+
 @media (max-width: 500px) {
   header .header--line--banner--wrap .inner--contents h3 {
     font-size: 16px;
@@ -904,7 +907,7 @@
     position: relative;
   }
   main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(3)::after {
-    content: "";
+    content: '';
     position: absolute;
     width: 1px;
     height: 30px;
@@ -1109,4 +1112,112 @@
   main .faq--wrapper .inner--contents .section--title {
     font-size: 24px;
   }
-}
+}
+
+/*! 20250904 수정 */
+@media (max-width: 1000px) {
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    padding-bottom: 0;
+    gap: 20px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .process--circle {
+    width: 100%;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    width: 100%;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap .arrow {
+    background-repeat: no-repeat;
+    background-position: right 15px center;
+    display: inline-block;
+    height: 71px;
+    width: 33px;
+    background-color: #f9f9f9;
+    margin: 0;
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+    background-image: url(../img/ico--rainbow--arrow3.svg);
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap .arrow:last-child {
+    background-position: left 15px center;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont {
+    padding-top: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title {
+    padding-bottom: 15px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle.web {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle.mo {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar.mo2 {
+    display: block;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar.mo2::after {
+    -webkit-transform: rotate(225deg);
+            transform: rotate(225deg);
+    left: 0;
+    right: auto;
+  }
+}
+
+@media (max-width: 500px) {
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title {
+    width: 100%;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle.web {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle.mo {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(3)::before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background-image: url(../img/ico--bar.svg);
+    display: inline-block;
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+    position: absolute;
+    top: calc(100% + 32px);
+    left: calc(50% - 4.5px);
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar.mo2 {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap .arrow {
+    height: 44px;
+    background-size: contain;
+    background-position: right 40px center;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap .arrow:last-child {
+    background-position: left 40px center;
+  }
+}

css/mixin.css

@@ -0,0 +1 @@
+/* No CSS */

css/reset.css

@@ -16065,4 +16065,4 @@ body {
 
 .mr--500 {
   margin-right: 500px !important;
-}
+}

img/ico--arrow.svg

@@ -0,0 +1,14 @@
+<svg width="33" height="20" viewBox="0 0 33 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_141_10)">
+<path d="M7 -119L7 -4.22141e-06L2.38498e-07 -4.30488e-06L16.5 20L33 -3.91136e-06L27 -3.98291e-06L27 -99L338.837 -99L330.781 -109L338.837 -119L7 -119ZM342.064 -119L334.01 -109L342.064 -99L346.225 -99L338.169 -109L346.225 -119L342.064 -119ZM349.453 -119L341.397 -109L349.453 -99L353.612 -99L345.557 -109L353.612 -119L349.453 -119ZM356.825 -119L348.77 -109L348.785 -109L356.841 -99L361 -99L352.945 -109L361 -119L356.825 -119Z" fill="url(#paint0_linear_141_10)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_141_10" x1="224" y1="-105.296" x2="212.262" y2="-74.2923" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6A00"/>
+<stop offset="1" stop-color="#2ECC71"/>
+</linearGradient>
+<clipPath id="clip0_141_10">
+<rect width="33" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

img/ico--bar.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.485291 0.485352L12.4853 0.485352V12.4854C12.4853 12.4854 9.79902 9.79906 6.48531 6.48535C3.1716 3.17164 0.485291 0.485352 0.485291 0.485352Z" fill="#2ECC71"/>
+</svg>

img/ico--rainbow--arrow7.svg

@@ -0,0 +1,15 @@
+<svg width="263" height="20" viewBox="0 0 263 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_141_14)">
+<rect width="263" height="20" fill="white"/>
+<path d="M-91 -4.22141e-06L-91 119L-98 119L-81.5 139L-65 119L-71 119L-71 20L240.837 20L232.781 10L240.837 -2.64293e-07L-91 -4.22141e-06ZM244.064 -2.25805e-07L236.01 10L244.064 20L248.225 20L240.169 10L248.225 -1.76195e-07L244.064 -2.25805e-07ZM251.453 -1.37695e-07L243.397 10L251.453 20L255.612 20L247.557 10L255.612 -8.80978e-08L251.453 -1.37695e-07ZM258.825 -4.9784e-08L250.77 10L250.785 10L258.841 20L263 20L254.945 10L263 0L258.825 -4.9784e-08Z" fill="url(#paint0_linear_141_14)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_141_14" x1="126" y1="13.7042" x2="114.262" y2="44.7077" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6A00"/>
+<stop offset="1" stop-color="#2ECC71"/>
+</linearGradient>
+<clipPath id="clip0_141_14">
+<rect width="263" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

img/ico--rainbow--arrow8.svg

@@ -0,0 +1,15 @@
+<svg width="263" height="20" viewBox="0 0 263 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_141_14)">
+<rect width="263" height="20" transform="translate(263 20) rotate(-180)" fill="white"/>
+<path d="M354 -4.22141e-06L354 119L361 119L344.5 139L328 119L334 119L334 20L22.1631 20L30.2187 10L22.1631 -2.64292e-07L354 -4.22141e-06ZM18.9355 -2.25804e-07L26.9902 10L18.9355 20L14.7754 20L22.831 10L14.7754 -1.76194e-07L18.9355 -2.25804e-07ZM11.5469 -1.37695e-07L19.6025 10L11.5469 20L7.38768 20L15.4433 10L7.38768 -8.8097e-08L11.5469 -1.37695e-07ZM4.17479 -4.97836e-08L12.2305 10L12.2148 10L4.15917 20L-1.28632e-05 20L8.05467 10L-1.31017e-05 0L4.17479 -4.97836e-08Z" fill="url(#paint0_linear_141_14)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_141_14" x1="137" y1="13.7042" x2="148.738" y2="44.7077" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6A00"/>
+<stop offset="1" stop-color="#2ECC71"/>
+</linearGradient>
+<clipPath id="clip0_141_14">
+<rect width="263" height="20" fill="white" transform="translate(263 20) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>

index.html

@@ -471,6 +471,7 @@
               <h2><strong>M&A 궁합</strong> 진행 설계도</h2>
               <p>M&A에서 매수기업 (매수자)과 매도기업 간의 궁합이 잘 맞으면, 진행도 순탄하고, M&A 후에도 기업의 높은 성장, 가치 극대화를 달성합니다.</p>
             </div>
+            <!-- 20250904 수정 : S -->
             <div class="content--wrap">
               <h3><i class="ico"></i> M&A궁합 진행 방향</h3>
               <div class="direct--wrap mb--110">
@@ -484,19 +485,42 @@
                   <p>속 궁합</p>
                 </div>
                 <span class="bar mo"></span>
-                <div class="circle">
+                <div class="circle web">
                   <i class="ico"></i>
                   <p>기업 성장력 제고</p>
                 </div>
-                <span class="bar mo2"></span>
-                <div class="circle">
+                <span class="bar mo"></span>
+                <div class="circle web">
                   <i class="ico"></i>
                   <p>기업 가치 극대화 실현</p>
                 </div>
+                <div class="circle mo">
+                  <i class="ico"></i>
+                  <p>기업 가치 극대화 실현</p>
+                </div>
+                <span class="bar mo2"></span>
+                <div class="circle mo">
+                  <i class="ico"></i>
+                  <p>기업 성장력 제고</p>
+                </div>
               </div>
               <div class="process--wrap">
                 <div class="process--title">
-                  매수자 (매수 기업) + 매도자 (매도 기업)
+                  <div class="arrow">
+                    <span class="arrow--tail"></span>
+                    <span class="arrow--bar"></span>
+                  </div>
+                  <div class="process--circle">
+                    매수자 (매수 기업) + 매도자 (매도 기업)
+                  </div>
+                  <div class="arrow right">
+                    <span class="arrow--tail"></span>
+                    <span class="arrow--bar"></span>
+                  </div>
+                  <div class="arrow--wrap">
+                    <div class="arrow"></div>
+                    <div class="arrow"></div>
+                  </div>
                 </div>
                 <div class="process--cont">
                   <div class="process--top">
@@ -578,6 +602,7 @@
                 </div>
               </div>
             </div>
+            <!-- 20250904 수정 : E -->
           </div>
         </div>
       </section>

scss/main.scss

@@ -1237,33 +1237,90 @@ main{
             border-bottom: 3px dashed #2ecc71;
           }
         }
+
         .process--wrap{
+          /*! 20250904 수정 : S */
           .process--title{
-            position: relative;
-            padding: 25px 30px;
-            text-align: center;
-            width: fit-content;
-            background-image: url(../img/bg--process.svg);
-            background-repeat: no-repeat;
-            background-size: cover;
-            color: #222;
-            font-size: 16px;
-            margin: 12px auto;
-            border-radius: 1000px;
-            letter-spacing: -0.16px;
-            font-weight: 600;
-            &::after{
-              content: '';
-              width: calc(100% + 24px);
-              height: calc(100% + 24px);
-              border: 5px solid #DDEE81;
-              position: absolute;
-              display: inline-block;
-              border-radius: inherit;
-              top: -12px;
-              left: -12px;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            .process--circle{
+              position: relative;
+              padding: 25px 30px;
+              text-align: center;
+              width: fit-content;
+              background-image: url(../img/bg--process.svg);
+              background-repeat: no-repeat;
+              background-size: cover;
+              color: #222;
+              font-size: 16px;
+              margin: 12px auto;
+              border-radius: 1000px;
+              letter-spacing: -0.16px;
+              font-weight: 600;
+              &::after{
+                content: '';
+                width: calc(100% + 24px);
+                height: calc(100% + 24px);
+                border: 5px solid #DDEE81;
+                position: absolute;
+                display: inline-block;
+                border-radius: inherit;
+                top: -12px;
+                left: -12px;
+              }
+            }
+            .arrow{
+              flex: 1;
+              margin-left: 53px;
+              margin-right: 25px;
+              height: 20px;
+              background-color: #2ecc71;
+              position: relative;
+              .arrow--bar{
+                width: 100%;
+                display: inline-block;
+                background-position: right center;
+                background-repeat: no-repeat;
+                width: 100%;
+                height: 20px;
+                background-image: url(../img/ico--rainbow--arrow7.svg);
+              }
+              .arrow--tail{
+                display: inline-block;
+                position: absolute;
+                width: 20px;
+                height: 110px;
+                top: 0;
+                left: 0;
+                background-color: #2ECC71;
+                background-repeat: no-repeat;
+                &::before{
+                  content: '';
+                  position: absolute;
+                  bottom: -20px;
+                  left: -6.5px;
+                  width: 33px;
+                  height: 20px;
+                  background-image: url(../img/ico--arrow.svg);
+                }
+              }
+              &.right{
+                margin-right: 53px;
+                margin-left: 25px;
+                .arrow--bar{
+                  background-position: left center;
+                  background-image: url(../img/ico--rainbow--arrow8.svg);
+                }
+                .arrow--tail{
+                  left: auto;
+                  right: 0;
+                }
+              }
             }
           }
+          /*! 20250904 수정 : E */
           .process--cont{
             padding-top: 60px;
             .process--top{
@@ -3360,4 +3417,48 @@ footer{
   &.actv{
     opacity: 1;
   }
+}
+
+/*! 20250904 수정 */
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar{
+  position: relative;
+  &::after{
+    position: absolute;
+    right: 0;
+    content: '';
+    display: inline-block;
+    background-image: url(../img/ico--bar.svg);
+    width: 12px;
+    height: 12px;
+    background-repeat: no-repeat;
+    transform: rotate(45deg);
+    top: -4.5px;
+  }
+  &.mo2{
+    display: none;
+  }
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle{
+  &:nth-of-type(2){
+    &::before{
+      content: '';
+      width: 12px;
+      height: 12px;
+      background-image: url(../img/ico--bar.svg);
+      display: inline-block;
+      transform: rotate(135deg);
+      position: absolute;
+      top: calc(100% + 32px);
+      left: calc(50% - 4.5px);
+    }
+  }
+  &.mo{
+    display: none;
+    &:nth-of-type(5){    
+      background-color: #188345;
+    }
+  }
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap{
+  display: none;
 }

scss/media.scss

@@ -1391,4 +1391,106 @@
       }
     }
   }
+}
+
+/*! 20250904 수정 */
+
+@media(max-width: 1000px){
+  main .section--container .process--plan--wrap .content--wrap .process--wrap{
+    .process--title{
+      display: flex;
+      flex-direction: column;
+      padding-bottom: 0;
+      gap: 20px;
+      .process--circle{
+        width: 100%;
+      }
+      .arrow {
+        display: none;
+      }
+      .arrow--wrap{
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        .arrow{
+          background-repeat: no-repeat;
+          background-position: right 15px center;
+          display: inline-block;
+          height: 71px;
+          width: 33px;
+          background-color: #f9f9f9;
+          margin: 0;
+          transform: rotate(180deg);
+          background-image: url(../img/ico--rainbow--arrow3.svg);
+          &:last-child{
+            background-position: left 15px center;
+          }
+        }
+      }
+    }
+    .process--cont{
+      padding-top: 0;
+    }
+  }
+}
+@media(max-width: 768px){
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title{
+    padding-bottom: 15px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle{
+    &.web{
+      display: none;
+    }
+    &.mo{
+      display: flex;
+    }
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar{
+    &.mo2{
+      display: block;
+      &::after{
+        transform: rotate(225deg);
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+}
+
+@media(max-width: 500px){
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title{
+    width: 100%;
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle{
+    &.web{
+      display: flex;
+    }
+    &.mo{
+      display: none;
+    }
+    &:nth-of-type(3){
+      &::before{
+        content: '';
+        width: 12px;
+        height: 12px;
+        background-image: url(../img/ico--bar.svg);
+        display: inline-block;
+        transform: rotate(135deg);
+        position: absolute;
+        top: calc(100% + 32px);
+        left: calc(50% - 4.5px);
+      }
+    }
+  }
+  main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar.mo2{
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap .arrow{
+    height: 44px;
+    background-size: contain;
+    background-position: right 40px center;
+    &:last-child{
+      background-position: left 40px center;
+    }
+  }
 }