궁합 진행 설계도 모바일 수정

css/main.css

@@ -17870,6 +17870,11 @@ main .section--container .process--plan--wrap .content--wrap .process--wrap .pro
           justify-content: space-between;
 }
 
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side--title {
+  /*! 20250911 수정 */
+  display: none;
+}
+
 main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side {
   width: 123px;
   display: -webkit-box;
@@ -17886,6 +17891,11 @@ main .section--container .process--plan--wrap .content--wrap .process--wrap .pro
   position: relative;
 }
 
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side.mo {
+  /*! 20250911 수정 */
+  display: none;
+}
+
 main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side::after {
   content: '';
   display: inline-block;
@@ -17929,6 +17939,14 @@ main .section--container .process--plan--wrap .content--wrap .process--wrap .pro
   border-right: 3px dashed #ddee81;
 }
 
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side.right::after {
+  /*! 20250911 수정 */
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  left: auto;
+  right: calc(100% + 20px);
+}
+
 main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle {
   width: calc(100% - 300px);
   height: 410px;
@@ -18041,6 +18059,11 @@ main .section--container .process--plan--wrap .content--wrap .process--wrap .pro
   gap: 20px;
 }
 
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side--title {
+  /*! 20250911 수정 */
+  display: none;
+}
+
 main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side {
   width: 100%;
   display: -webkit-box;
@@ -18055,6 +18078,11 @@ main .section--container .process--plan--wrap .content--wrap .process--wrap .pro
           justify-content: center;
 }
 
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side.mo {
+  /*! 20250911 수정 */
+  display: none;
+}
+
 main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side .arrow {
   -webkit-box-flex: 1;
       -ms-flex: 1;
@@ -18153,6 +18181,11 @@ main .section--container .process--plan--wrap .content--wrap .process--wrap .pro
   color: #188345;
 }
 
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--txt span {
+  /*! 20250911 수정 */
+  display: none;
+}
+
 main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--blue--circle {
   color: #fff;
   letter-spacing: -0.18px;

css/media.css

@@ -1221,3 +1221,139 @@
     background-position: left 40px center;
   }
 }
+
+/*! 20250911 수정 */
+@media (max-width: 768px) {
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    gap: 30px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .arrow {
+    display: inline-block;
+    width: 33px;
+    height: 71px;
+    background-image: url(../img/ico--rainbow--arrow4.svg);
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side--title {
+    display: block;
+    font-size: 18px;
+    font-weight: 600;
+    color: #000;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side--title strong {
+    font-weight: 600;
+    color: #ff4d00;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side {
+    height: 60px;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    gap: 10px;
+    width: 100%;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side.web {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side.mo {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side .circle {
+    width: 120px;
+    padding: 20px 12px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side .line {
+    width: auto;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    border-right: none;
+    border-bottom: 3px dashed #ddee81;
+    height: 50%;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot {
+    padding-top: 30px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side--title {
+    display: block;
+    font-size: 18px;
+    font-weight: 600;
+    color: #000;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side--title strong {
+    font-weight: 600;
+    color: #ff4d00;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side {
+    height: 60px;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    gap: 10px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side .line {
+    height: 50%;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    width: auto;
+    border-color: #ddee81;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side .circle {
+    border-color: #DDEE81;
+    width: 120px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side .circle::after {
+    display: none !important;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side.web {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side.mo {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--txt span {
+    display: inline-block;
+  }
+}
+
+@media (max-width: 500px) {
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .arrow {
+    width: 20px;
+    height: 44px;
+    background-size: contain;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side {
+    height: 50px;
+    gap: 5px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side .circle {
+    width: 100px;
+    padding: 15px 5px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side::after {
+    display: none;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side {
+    height: 50px;
+    gap: 5px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side .circle {
+    width: 100px;
+    padding: 15px 5px;
+  }
+  main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--bot .process--side .line {
+    display: block;
+  }
+}

index.html

@@ -522,8 +522,10 @@
                     <div class="arrow"></div>
                   </div>
                 </div>
+                <!-- 20250911 수정 : S -->
                 <div class="process--cont">
                   <div class="process--top">
+                    <div class="process--side--title">① 3가지의 <strong>결합</strong></div>
                     <div class="process--side">
                       <div class="circle">사람과 <strong>사람</strong></div>
                       <span class="line"></span>
@@ -531,6 +533,8 @@
                       <span class="line"></span>
                       <div class="circle">기업과 <strong>기업</strong></div>
                     </div>
+                    <span class="arrow"></span>
+                    <div class="process--side--title">② 3가지의 <strong>매칭</strong></div>
                     <div class="process--circle">
                       <div class="circle">
                         <i class="ico"></i>
@@ -545,16 +549,32 @@
                         <p>3가지의 <strong>Flow</strong></p>
                       </div>
                     </div>
-                    <div class="process--side right">
-                      <div class="circle"><strong>효율과</strong> 진행</div>
+                    <div class="process--side web right">
+                      <div class="circle"><strong>효율적</strong> 진행</div>
                       <span class="line"></span>
                       <div class="circle"><strong>전략적</strong> 진행</div>
                       <span class="line"></span>
                       <div class="circle"><strong>가치창출</strong> 진행</div>
                     </div>
+                    <div class="process--side mo right">
+                      <div class="circle"><strong>감성적</strong> 매칭</div>
+                      <span class="line"></span>
+                      <div class="circle"><strong>논리적</strong> 매칭</div>
+                      <span class="line"></span>
+                      <div class="circle"><strong>비즈니스</strong> 매칭</div>
+                    </div>
+                    <span class="arrow"></span>
                   </div>
                   <div class="process--bot">
-                    <div class="process--side">
+                    <div class="process--side--title">③ 3가지의 <strong>Flow</strong></div>
+                    <div class="process--side mo">
+                      <div class="circle"><strong>효율적</strong> 진행</div>
+                      <span class="line"></span>
+                      <div class="circle"><strong>전략적</strong> 진행</div>
+                      <span class="line"></span>
+                      <div class="circle"><strong>가치창출</strong> 진행</div>
+                    </div>
+                    <div class="process--side web">
                       <div class="arrow"></div>
                       <div class="circle"><strong>감성적</strong> 매칭</div>
                       <span class="line"></span>
@@ -565,7 +585,7 @@
                     </div>
                     <span class="line"></span>
                     <div class="process--txt">
-                      <strong>9</strong> PROCESS
+                      <strong>9</strong> PROCESS <span>(①+②+③)</span>
                     </div>
                     <span class="line"></span>
                     <div class="process--blue--circle">
@@ -600,6 +620,7 @@
                     </div>
                   </div>
                 </div>
+                <!-- 20250911 수정 : E -->
               </div>
             </div>
             <!-- 20250904 수정 : E -->

scss/main.scss

@@ -1327,6 +1327,10 @@ main{
               display: flex;
               align-items: center;
               justify-content: space-between;
+              .process--side--title{
+                /*! 20250911 수정 */
+                display: none;
+              }
               .process--side{
                 width: 123px;
                 display: flex;
@@ -1334,6 +1338,10 @@ main{
                 flex-direction: column;
                 justify-content: center;
                 position: relative;
+                &.mo{
+                  /*! 20250911 수정 */
+                  display: none;
+                }
                 &::after{
                   content: '';
                   display: inline-block;
@@ -1375,7 +1383,12 @@ main{
                   border-right: 3px dashed #ddee81;
                 }
                 &.right{
-
+                  &::after{
+                     /*! 20250911 수정 */
+                    transform: rotate(180deg);
+                    left: auto;
+                    right: calc(100% + 20px);
+                  }
                 }
               }
               .process--circle{
@@ -1464,12 +1477,20 @@ main{
               justify-content: center;
               align-items: center;
               gap: 20px;
+              .process--side--title{
+                /*! 20250911 수정 */
+                display: none;
+              }
               .process--side{
                 width: 100%;
                 display: flex;
                 gap: 15px;
                 align-items: center;
                 justify-content: center;
+                &.mo{
+                  /*! 20250911 수정 */
+                  display: none;
+                }
                 .arrow{
                   flex: 1;
                   margin-left: 53px;
@@ -1554,6 +1575,10 @@ main{
                 strong{
                   color: #188345;
                 }
+                span{
+                  /*! 20250911 수정 */
+                  display: none;
+                }
               }
               .process--blue--circle{
                 color: #fff;

scss/media.scss

@@ -1493,4 +1493,154 @@
       background-position: left 40px center;
     }
   }
+}
+
+/*! 20250911 수정 */
+@media(max-width: 768px){
+  main {
+    .section--container{
+      .process--plan--wrap {
+        .content--wrap {
+          .process--wrap {
+            .process--cont {
+              .process--top{
+                flex-direction: column;
+                gap: 30px;
+                .arrow{
+                  display: inline-block;
+                  width: 33px;
+                  height: 71px;
+                  background-image: url(../img/ico--rainbow--arrow4.svg);
+                }
+                .process--side--title{
+                  display: block;
+                  font-size: 18px;
+                  font-weight: 600;
+                  color: #000;
+                  strong{
+                    font-weight: 600;
+                    color: #ff4d00;
+                  }
+                }
+                .process--side{
+                  height: 60px;
+                  flex-direction: row;
+                  gap: 10px;
+                  width: 100%;
+                  &.web{
+                    display: none;
+                  }
+                  &.mo{
+                    display: flex;
+                  }
+                  .circle{
+                    width: 120px;
+                    padding: 20px 12px;
+                  }
+                  .line{
+                    width: auto;
+                    flex: 1;
+                    border-right: none;
+                    border-bottom: 3px dashed #ddee81;
+                    height: 50%;
+                  }
+                }
+                .process--circle{
+                  display: none;
+                }
+              }
+              .process--bot{
+                padding-top: 30px;
+                .process--side--title{
+                  display: block;
+                  font-size: 18px;
+                  font-weight: 600;
+                  color: #000;
+                  strong{
+                    font-weight: 600;
+                    color: #ff4d00;
+                  }
+                }
+                .process--side{
+                  height: 60px;
+                  align-items: flex-start;
+                  gap: 10px;
+                  .line{
+                    height: 50%;
+                    flex: 1;
+                    width: auto;
+                    border-color: #ddee81;
+                  }
+                  .circle{
+                    border-color: #DDEE81;
+                    width: 120px;
+                    &::after{
+                      display: none!important;
+                    }
+                  }
+                  &.web{
+                    display: none;
+                  }
+                  &.mo{
+                    display: flex;
+                  }
+                }
+                .process--txt{
+                  span{
+                    display: inline-block;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    } 
+  }
+}
+
+@media(max-width: 500px){
+  main {
+    .section--container{
+      .process--plan--wrap {
+        .content--wrap {
+          .process--wrap {
+            .process--cont {
+              .process--top{
+                .arrow{
+                  width: 20px;
+                  height: 44px;
+                  background-size: contain;
+                }
+                .process--side{
+                  height: 50px;
+                  gap: 5px;
+                  .circle{
+                    width: 100px;
+                    padding: 15px 5px;
+                  }
+                  &::after{
+                    display: none;
+                  }
+                }
+              }
+              .process--bot{
+                .process--side{
+                  height: 50px;
+                  gap: 5px;
+                  .circle{
+                    width: 100px;
+                    padding: 15px 5px;
+                  }
+                  .line{
+                    display: block;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    }
 }