사전진행 반응형 완료

css/main.css

@@ -18812,15 +18812,202 @@ main .section--container .all--progress--wrap .step--section .inner--grid .grid
   font-weight: 700;
   letter-spacing: -0.3px;
 }
+main .section--container .all--progress--wrap .progress--section .progress--title .step--label {
+  display: block;
+  position: relative;
+  color: #222;
+  font-size: 25px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
 main .section--container .all--progress--wrap .progress--section .progress--container {
   overflow: hidden;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
   width: 1200px;
-  height: 401px;
+  height: 316px;
   margin: 0 auto;
 }
+main .section--container .all--progress--wrap .progress--section .progress--container.mo {
+  display: none;
+  overflow: visible;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+  gap: 40px;
+  height: auto;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box {
+  padding: 15px 30px 15px 20px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 100px;
+  border: 1px solid rgba(46, 204, 113, 0.6);
+  background: #FFF;
+  -webkit-box-shadow: 0 0 15px 0 rgba(46, 204, 113, 0.3);
+          box-shadow: 0 0 15px 0 rgba(46, 204, 113, 0.3);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 30px;
+  position: relative;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .ico {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #2ecc71;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .ico.ico1 {
+  background-image: url(../img/blk_03.svg);
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .ico.ico2 {
+  background-image: url(../img/blk_02.svg);
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .ico.ico3 {
+  background-image: url(../img/blk_04.svg);
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .ico.ico4 {
+  background-image: url(../img/blk_01.svg);
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .progress--txt {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 10px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .progress--txt span {
+  color: #191919;
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: -0.34px;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .progress--txt strong {
+  color: #191919;
+  line-height: 1;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.34px;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(1)::after {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  content: "";
+  bottom: -18px;
+  left: -5px;
+  background-color: #ffd034;
+  position: absolute;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(2)::before {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  content: "";
+  top: -14px;
+  right: -6px;
+  background-color: #ac7fe2;
+  position: absolute;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(2)::before {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  content: "";
+  top: -14px;
+  right: -6px;
+  background-color: #ac7fe2;
+  position: absolute;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(2)::after {
+  display: inline-block;
+  width: 95px;
+  height: 95px;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  content: "";
+  top: 23px;
+  right: -40px;
+  background-image: url(../img/blue_ic01.svg);
+  position: absolute;
+  z-index: -1;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(3)::before {
+  display: inline-block;
+  width: 61px;
+  height: 61px;
+  content: "";
+  left: -30px;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  z-index: -1;
+  top: 60%;
+  background-image: url(../img/purple_ic01.svg);
+  position: absolute;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(3)::after {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  content: "";
+  left: -22px;
+  bottom: -50px;
+  background-color: #59d8c8;
+  position: absolute;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(4)::before {
+  display: inline-block;
+  width: 79px;
+  height: 79px;
+  content: "";
+  right: -30px;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  z-index: -1;
+  top: 60%;
+  background-image: url(../img/clovar_ic.svg);
+  position: absolute;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:nth-child(4)::after {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  content: "";
+  top: 4px;
+  right: -18px;
+  background-color: #f96ba5;
+  position: absolute;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:last-child {
+  margin-top: 62px;
+}
+main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:last-child::after {
+  content: "";
+  left: calc(50% - 80px);
+  bottom: 100%;
+  width: 160px;
+  height: 82px;
+  position: absolute;
+  background-size: 100%;
+  background-image: url(../img/man_arrow_bg.svg);
+  display: inline-block;
+}
 main .section--container .all--progress--wrap .progress--section .progress--container * {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -18829,31 +19016,15 @@ main .section--container .all--progress--wrap .progress--section .progress--step
   position: absolute;
   width: 110px;
   height: 266px;
-  top: 0;
+  top: 10px;
   left: 0;
   font-size: 0px;
   z-index: 27;
 }
-main .section--container .all--progress--wrap .progress--section .progress--step.step--01 .step--label {
-  display: block;
-  position: relative;
-  height: 25px;
-  margin: 0 0 0 0;
-  color: #222222;
-  font-family: Pretendard, var(--default-font-family);
-  font-size: 25px;
-  font-weight: 700;
-  line-height: 25px;
-  text-align: left;
-  white-space: nowrap;
-  letter-spacing: -0.5px;
-  z-index: 27;
-}
 main .section--container .all--progress--wrap .progress--section .progress--step.step--01 .step--circle {
   position: relative;
   width: 110px;
   height: 110px;
-  margin: 71px 0 0 0;
   background: rgba(46, 204, 113, 0.1);
   z-index: 3;
   overflow: visible auto;
@@ -18914,8 +19085,8 @@ main .section--container .all--progress--wrap .progress--section .progress--step
   position: absolute;
   width: 222px;
   height: 162px;
-  top: 85px;
-  left: 978px;
+  top: 0px;
+  right: 0;
   z-index: 28;
 }
 main .section--container .all--progress--wrap .progress--section .progress--step.step--06 .step--arrow {
@@ -18923,7 +19094,7 @@ main .section--container .all--progress--wrap .progress--section .progress--step
   width: 160px;
   height: 82px;
   margin: 0 0 0 32px;
-  background: url(../img/man_arrow_bg.png) no-repeat center;
+  background: url(../img/man_arrow_bg.svg) no-repeat center;
   background-size: cover;
   z-index: 28;
 }
@@ -19004,7 +19175,7 @@ main .section--container .all--progress--wrap .progress--section .progress--step
   position: absolute;
   width: 313px;
   height: 308px;
-  top: 93px;
+  top: 8px;
   left: 365px;
   z-index: 29;
 }
@@ -19118,7 +19289,7 @@ main .section--container .all--progress--wrap .progress--section .progress--step
   position: absolute;
   width: 228px;
   height: 218px;
-  top: 136px;
+  top: 51px;
   left: 180px;
   z-index: 30;
 }
@@ -19209,7 +19380,7 @@ main .section--container .all--progress--wrap .progress--section .progress--step
   position: absolute;
   width: 252.5px;
   height: 154px;
-  top: 190px;
+  top: 105px;
   left: 726px;
   z-index: 32;
 }
@@ -19323,7 +19494,7 @@ main .section--container .all--progress--wrap .progress--section .progress--step
   position: absolute;
   width: 70px;
   height: 199px;
-  top: 116px;
+  top: 31px;
   left: 110px;
   z-index: 31;
 }
@@ -19360,7 +19531,7 @@ main .section--container .all--progress--wrap .progress--section .step--line.lin
   position: absolute;
   width: 47px;
   height: 108px;
-  top: 159.5px;
+  top: 74.5px;
   left: 679px;
   background: url(../img/line_04.svg) no-repeat center;
   background-size: cover;

css/media.css

@@ -170,6 +170,14 @@
   main .section--container .impt--list--wrap ul {
     gap: 20px;
   }
+  main .section--container .all--progress--wrap .progress--section .progress--container.web {
+    display: none;
+  }
+  main .section--container .all--progress--wrap .progress--section .progress--container.mo {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
   main .mna--reason--wrap .swiper-slide .reason--box {
     padding: 25px 25px 40px;
   }
@@ -349,6 +357,9 @@
   .mb--50 {
     margin-bottom: 30px !important;
   }
+  .mb--60 {
+    margin-bottom: 30px !important;
+  }
   .pb--80 {
     padding-bottom: 40px !important;
   }
@@ -680,9 +691,21 @@
   main .section--container .all--progress--wrap .month--text--contents .month--gap > span:nth-of-type(2) {
     font-size: 18px;
   }
-  main .section--container .all--progress--wrap .progress--section .progress--step.step--01 .step--label {
+  main .section--container .all--progress--wrap .progress--section .progress--title .step--label {
     font-size: 18px;
   }
+  main .section--container .all--progress--wrap .progress--section .progress--container.mo {
+    gap: 20px;
+  }
+  main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box:last-child {
+    margin-top: 82px;
+  }
+  main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .progress--txt span {
+    font-size: 15px;
+  }
+  main .section--container .all--progress--wrap .progress--section .progress--container.mo .progress--box .progress--txt strong {
+    font-size: 16px;
+  }
   main .section--container .all--progress--wrap .compatibility--inner--conls {
     padding: 20px 25px 30px 25px;
   }

index.html

@@ -1155,9 +1155,11 @@
             </div>
   
             <div class="progress--section pt--120 pb--100">
-              <div class="progress--container">
+              <div class="progress--title mb--60">
+                <span class="step--label">사전 진행</span>
+              </div>
+              <div class="progress--container web">
                 <div class="progress--step step--01">
-                  <span class="step--label">사전 진행</span>
                   <div class="step--circle">
                     <div class="step--circle--inner"><div class="step--circle--core"></div></div>
                   </div>
@@ -1217,6 +1219,43 @@
                   <div class="step--badge badge--clover"></div>
                 </div>
               </div>
+              <div class="progress--container mo">
+                <div class="progress--box">
+                  <i class="ico ico1"></i>
+                  <div class="progress--txt">
+                    <span>M&A궁합에</span>
+                    <strong>M&A 의뢰</strong>
+                  </div>
+                </div>
+                <div class="progress--box">
+                  <i class="ico ico1"></i>
+                  <div class="progress--txt">
+                    <span>M&A궁합</span>
+                    <strong>담당자가 전화 연락</strong>
+                  </div>
+                </div>
+                <div class="progress--box">
+                  <i class="ico ico2"></i>
+                  <div class="progress--txt">
+                    <strong>M&A 상담</strong>
+                    <span>(미팅 또는 화상미팅)</span>
+                  </div>
+                </div>
+                <div class="progress--box">
+                  <i class="ico ico3"></i>
+                  <div class="progress--txt">
+                    <strong>진행 여부 결정</strong>
+                    <span>(진행 or 드롭)</span>
+                  </div>
+                </div>
+                <div class="progress--box">
+                  <i class="ico ico4"></i>
+                  <div class="progress--txt">
+                    <span>M&A진행결정시</span>
+                    <strong>중개자문계약체결</strong>
+                  </div>
+                </div>
+              </div>
             </div>
   
             <div class="step--section pb--100">

scss/main.scss

@@ -2370,14 +2370,200 @@ main{
         $color_1: #222222;
         $color_2: #191919;
         $font-family_1: Pretendard, var(--default-font-family);
+
+        .progress--title{
+          .step--label {
+            display: block;
+            position: relative;
+            color: #222;
+            font-size: 25px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+          }
+        }
+
   
         .progress--container {
           overflow: hidden;
           box-sizing: border-box;
           position: relative;
           width: 1200px;
-          height: 401px;
+          height: 316px;
           margin: 0 auto;
+          &.mo{
+            display: none;
+            overflow: visible;
+            flex-direction: column;
+            width: 100%;
+            gap: 40px;
+            height: auto;
+            .progress--box{
+              padding: 15px 30px 15px 20px;
+              align-items: center;
+              border-radius: 100px;
+              border: 1px solid rgba(46, 204, 113, 0.60);
+              background: #FFF;
+              box-shadow: 0 0 15px 0 rgba(46, 204, 113, 0.30);
+              display: flex;
+              gap: 30px;
+              position: relative;
+              .ico{
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                background-color: #2ecc71;
+                background-position: center;
+                background-repeat: no-repeat;
+                &.ico1{
+                  background-image: url(../img/blk_03.svg);
+                }
+                &.ico2{
+                  background-image: url(../img/blk_02.svg);
+                }
+                &.ico3{
+                  background-image: url(../img/blk_04.svg);
+                }
+                &.ico4{
+                  background-image: url(../img/blk_01.svg);
+                }
+              }
+              .progress--txt{
+                display: flex;
+                gap: 10px;
+                flex-direction: column;
+                span{
+                  color: #191919;
+                  font-size: 17px;
+                  font-weight: 400;
+                  line-height: 1;
+                  letter-spacing: -0.34px;
+                }
+                strong{
+                  color: #191919;
+                  line-height: 1;
+                  font-size: 18px;
+                  font-weight: 700;
+                  letter-spacing: -0.34px;
+                }
+              }
+              &:nth-child(1){
+                &::after{
+                  display: inline-block;
+                  width: 12px;
+                  height: 12px;
+                  border-radius: 50%;
+                  content: '';
+                  bottom: -18px;
+                  left: -5px;
+                  background-color: #ffd034;
+                  position: absolute;
+                }
+              }
+              &:nth-child(2){
+                &::before{
+                  display: inline-block;
+                  width: 12px;
+                  height: 12px;
+                  border-radius: 50%;
+                  content: '';
+                  top: -14px;
+                  right: -6px;
+                  background-color: #ac7fe2;
+                  position: absolute;
+                }
+                &::before{
+                  display: inline-block;
+                  width: 12px;
+                  height: 12px;
+                  border-radius: 50%;
+                  content: '';
+                  top: -14px;
+                  right: -6px;
+                  background-color: #ac7fe2;
+                  position: absolute;
+                }
+                &::after{
+                  display: inline-block;
+                  width: 95px;
+                  height: 95px;
+                  background-size: 100%;
+                  background-repeat: no-repeat;
+                  content: '';
+                  top: 23px;
+                  right: -40px;
+                  background-image: url(../img/blue_ic01.svg);
+                  position: absolute;
+                  z-index: -1;
+                }
+              }
+              &:nth-child(3){
+                &::before{
+                  display: inline-block;
+                  width: 61px;
+                  height: 61px;
+                  content: '';
+                  left: -30px;
+                  background-size: 100%;
+                  background-repeat: no-repeat;
+                  z-index: -1;
+                  top: 60%;
+                  background-image: url(../img/purple_ic01.svg);
+                  position: absolute;
+                }
+                &::after{
+                  display: inline-block;
+                  width: 12px;
+                  height: 12px;
+                  border-radius: 50%;
+                  content: '';
+                  left: -22px;
+                  bottom: -50px;
+                  background-color: #59d8c8;
+                  position: absolute;
+                }
+              }
+              &:nth-child(4){
+                &::before{
+                  display: inline-block;
+                  width: 79px;
+                  height: 79px;
+                  content: '';
+                  right: -30px;
+                  background-size: 100%;
+                  background-repeat: no-repeat;
+                  z-index: -1;
+                  top: 60%;
+                  background-image: url(../img/clovar_ic.svg);
+                  position: absolute;
+                }
+                &::after{
+                  display: inline-block;
+                  width: 12px;
+                  height: 12px;
+                  border-radius: 50%;
+                  content: '';
+                  top: 4px;
+                  right: -18px;
+                  background-color: #f96ba5;
+                  position: absolute;
+                }
+              }
+              &:last-child{
+                margin-top: 62px;
+                &::after{
+                  content: '';
+                  left: calc(50% - 80px);
+                  bottom: 100%;
+                  width: 160px;
+                  height: 82px;
+                  position: absolute;
+                  background-size: 100%;
+                  background-image: url(../img/man_arrow_bg.svg);
+                  display: inline-block;
+                }
+              }
+            }
+          }
           * {
             box-sizing: border-box;
           }
@@ -2388,32 +2574,15 @@ main{
           position: absolute;
           width: 110px;
           height: 266px;
-          top: 0;
+          top: 10px;
           left: 0;
           font-size: 0px;
           z-index: 27;
           
-          .step--label {
-            display: block;
-            position: relative;
-            height: 25px;
-            margin: 0 0 0 0;
-            color: $color_1;
-            font-family: $font-family_1;
-            font-size: 25px;
-            font-weight: 700;
-            line-height: 25px;
-            text-align: left;
-            white-space: nowrap;
-            letter-spacing: -0.5px;
-            z-index: 27;
-          }
-          
           .step--circle {
             position: relative;
             width: 110px;
             height: 110px;
-            margin: 71px 0 0 0;
             background: rgba(46, 204, 113, 0.1);
             z-index: 3;
             overflow: visible auto;
@@ -2481,8 +2650,8 @@ main{
           position: absolute;
           width: 222px;
           height: 162px;
-          top: 85px;
-          left: 978px;
+          top: 0px;
+          right: 0;
           z-index: 28;
           
           .step--arrow {
@@ -2490,7 +2659,7 @@ main{
             width: 160px;
             height: 82px;
             margin: 0 0 0 32px;
-            background: url(../img/man_arrow_bg.png) no-repeat center;
+            background: url(../img/man_arrow_bg.svg) no-repeat center;
             background-size: cover;
             z-index: 28;
           }
@@ -2573,7 +2742,7 @@ main{
           position: absolute;
           width: 313px;
           height: 308px;
-          top: 93px;
+          top: 8px;
           left: 365px;
           z-index: 29;
           
@@ -2692,7 +2861,7 @@ main{
           position: absolute;
           width: 228px;
           height: 218px;
-          top: 136px;
+          top: 51px;
           left: 180px;
           z-index: 30;
           
@@ -2784,7 +2953,7 @@ main{
           position: absolute;
           width: 252.5px;
           height: 154px;
-          top: 190px;
+          top: 105px;
           left: 726px;
           z-index: 32;
           
@@ -2901,7 +3070,7 @@ main{
           position: absolute;
           width: 70px;
           height: 199px;
-          top: 116px;
+          top: 31px;
           left: 110px;
           z-index: 31;
           
@@ -2943,7 +3112,7 @@ main{
           position: absolute;
           width: 47px;
           height: 108px;
-          top: 159.5px;
+          top: 74.5px;
           left: 679px;
           background: url(../img/line_04.svg) no-repeat center;
           background-size: cover;

scss/media.scss

@@ -230,6 +230,18 @@
           gap: 20px;
         }
       }
+      .all--progress--wrap{
+        .progress--section{
+          .progress--container{
+            &.web{
+              display: none;
+            }
+            &.mo{
+              display: flex;
+            }
+          }
+        }
+      }
     }
     .mna--reason--wrap{
       .swiper-slide{
@@ -440,6 +452,9 @@
   .mb--50{
     margin-bottom: 30px!important;
   }
+  .mb--60{
+    margin-bottom: 30px!important;
+  }
   .pb--80{
     padding-bottom: 40px!important;
   }
@@ -812,10 +827,26 @@
           }
         }
         .progress--section{
-          .progress--step{
-            &.step--01{
-              .step--label{
-                font-size: 18px;
+          .progress--title{
+            .step--label{
+              font-size: 18px;
+            }
+          }
+          .progress--container{
+            &.mo{
+              gap: 20px;
+              .progress--box{
+                &:last-child{
+                  margin-top: 82px;
+                }
+                .progress--txt{
+                  span{
+                    font-size: 15px;
+                  }
+                  strong{
+                    font-size: 16px;
+                  }
+                }
               }
             }
           }