탑버튼 추가, 반응형 진행중

css/main.css

@@ -16068,6 +16068,99 @@ body {
   margin-right: 500px !important;
 }
 
+@media (max-width: 1200px) {
+  main .section--container {
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+  }
+  main .section--container .title--wrap.big > h2 {
+    font-size: 36px;
+  }
+  main .section--container .title--wrap > h2 {
+    font-size: 30px;
+  }
+  main .section--container .growth--logic--wrap {
+    gap: 20px;
+  }
+  main .section--container .growth--logic--wrap .title--box {
+    width: calc((100% - 120px) / 3 + 80px);
+  }
+  main .section--container .growth--logic--wrap .title--box h2 {
+    font-size: 36px;
+  }
+  main .section--container .growth--logic--wrap .logic--box {
+    padding: 40px 35px 40px;
+  }
+  main .section--container .growth--logic--wrap .logic--box.special {
+    width: calc((100% - 120px) / 3 + 80px);
+  }
+  main .section--container .best--service--wrap {
+    gap: 20px;
+  }
+  main .section--container .best--service--wrap .service--box {
+    width: calc((100% - 40px) / 3);
+    padding: 20px 25px 40px;
+  }
+  main .section--container .best--service--wrap .service--box h3 {
+    font-size: 18px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+  main .section--container .now--box--wrap .box--top .box > p {
+    font-size: 16px;
+  }
+  main .section--container .now--box--wrap .box--bot {
+    gap: 20px;
+  }
+}
+@media (max-width: 768px) {
+  .mb--80 {
+    margin-bottom: 40px !important;
+  }
+  br.web {
+    display: none;
+  }
+  main .section--container.p--120 {
+    padding: 60px 0;
+  }
+  main .section--container.p--100 {
+    padding: 60px 0;
+  }
+  main .section--container .title--wrap.big > h2 {
+    font-size: 30px;
+    margin-bottom: 30px;
+  }
+  main .section--container .title--wrap.big > p {
+    font-size: 15px;
+  }
+  main .section--container .best--service--wrap {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  main .section--container .best--service--wrap .service--box {
+    width: 100%;
+  }
+  main .section--container .best--service--wrap .service--box h3 br {
+    display: none;
+  }
+  main .section--container .now--box--wrap .box--bot {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  main .section--container .now--box--wrap .box--bot .box {
+    width: 100%;
+  }
+  main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--title > p {
+    font-size: 15px;
+  }
+  main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--content > p {
+    font-size: 15px;
+  }
+}
 section {
   overflow-x: hidden;
 }
@@ -16798,9 +16891,6 @@ main .section--container .now--box--wrap .box--top .box {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -16835,7 +16925,9 @@ main .section--container .now--box--wrap .box--bot .box {
       -ms-flex-align: center;
           align-items: center;
   height: 120px;
-  background-size: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: right bottom;
   background-image: url(../img/bg--now1.svg);
 }
 main .section--container .now--box--wrap .box--bot .box:last-child {
@@ -16936,6 +17028,10 @@ main .section--container .best--service--wrap .service--box {
   position: relative;
   width: calc((100% - 80px) / 3);
 }
+main .section--container .best--service--wrap .service--box .service--img img {
+  width: 70%;
+  max-width: 140px;
+}
 main .section--container .best--service--wrap .service--box:nth-child(2) .service--numb {
   background-image: url(../img/numb--service2.svg);
 }
@@ -16946,7 +17042,9 @@ main .section--container .best--service--wrap .service--box .service--numb {
   position: absolute;
   right: 0;
   display: inline-block;
-  width: 100px;
+  width: 25%;
+  max-width: 100px;
+  background-size: 100%;
   height: 100px;
   background-repeat: no-repeat;
   background-position: top right;
@@ -18087,4 +18185,25 @@ main .section--container .family--business--wrap .family--table--wrap table tr t
   top: 10px;
   left: 0;
   position: absolute;
+}
+
+.top--btn {
+  background-color: #2ECC71;
+  border-radius: 50%;
+  position: fixed;
+  right: 30px;
+  width: 70px;
+  cursor: pointer;
+  height: 70px;
+  bottom: 30px;
+  z-index: 100;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url(../img/ico--top.svg);
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+}
+.top--btn.actv {
+  opacity: 1;
 }

css/media.css

@@ -0,0 +1,120 @@
+@media (max-width: 1200px) {
+  main .section--container {
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+  }
+  main .section--container .title--wrap.big > h2 {
+    font-size: 36px;
+  }
+  main .section--container .title--wrap > h2 {
+    font-size: 30px;
+  }
+  main .section--container .growth--logic--wrap {
+    gap: 20px;
+  }
+  main .section--container .growth--logic--wrap .title--box {
+    width: calc((100% - 120px) / 3 + 80px);
+  }
+  main .section--container .growth--logic--wrap .title--box h2 {
+    font-size: 36px;
+  }
+  main .section--container .growth--logic--wrap .logic--box {
+    padding: 40px 35px 40px;
+  }
+  main .section--container .growth--logic--wrap .logic--box.special {
+    width: calc((100% - 120px) / 3 + 80px);
+  }
+  main .section--container .best--service--wrap {
+    gap: 20px;
+  }
+  main .section--container .best--service--wrap .service--box {
+    width: calc((100% - 40px) / 3);
+    padding: 20px 25px 40px;
+  }
+  main .section--container .best--service--wrap .service--box h3 {
+    font-size: 18px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+  main .section--container .now--box--wrap .box--top .box > p {
+    font-size: 16px;
+  }
+  main .section--container .now--box--wrap .box--bot {
+    gap: 20px;
+  }
+}
+@media (max-width: 768px) {
+  .mb--80 {
+    margin-bottom: 40px !important;
+  }
+  br.web {
+    display: none;
+  }
+  main .section--container.p--120 {
+    padding: 60px 0;
+  }
+  main .section--container.p--100 {
+    padding: 60px 0;
+  }
+  main .section--container .title--wrap.big > h2 {
+    font-size: 30px;
+    margin-bottom: 30px;
+  }
+  main .section--container .title--wrap.big > p {
+    font-size: 15px;
+  }
+  main .section--container .best--service--wrap {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  main .section--container .best--service--wrap .service--box {
+    width: 100%;
+  }
+  main .section--container .best--service--wrap .service--box h3 br {
+    display: none;
+  }
+  main .section--container .now--box--wrap .box--bot {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  main .section--container .now--box--wrap .box--bot .box {
+    width: 100%;
+  }
+  main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--title > p {
+    font-size: 15px;
+  }
+  main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--content > p {
+    font-size: 15px;
+  }
+}
+@media (max-width: 500px) {
+  main .section--container .now--box--wrap .box--top {
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    gap: 20px;
+    margin-bottom: 50px;
+  }
+  main .section--container .now--box--wrap .box--top .box {
+    width: 100%;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    gap: 20px;
+  }
+  main .section--container .now--box--wrap .box--top .box .box--img {
+    width: 80px;
+    min-width: 80px;
+  }
+  main .section--container .now--box--wrap .box--top .box .box--img img {
+    width: 100%;
+  }
+  main .section--container .now--box--wrap .box--top .box > p {
+    width: calc(100% - 120px);
+    text-align: left;
+  }
+}

css/sub.css

@@ -16067,6 +16067,62 @@ body {
   margin-right: 500px !important;
 }
 
+@media (max-width: 1200px) {
+  main .section--container {
+    padding-left: 20px !important;
+    padding-right: 20px !important;
+  }
+  main .section--container .title--wrap.big > h2 {
+    font-size: 36px;
+  }
+  main .section--container .title--wrap > h2 {
+    font-size: 30px;
+  }
+  main .section--container .growth--logic--wrap {
+    gap: 20px;
+  }
+  main .section--container .growth--logic--wrap .title--box {
+    width: calc((100% - 120px) / 3 + 80px);
+  }
+  main .section--container .growth--logic--wrap .title--box h2 {
+    font-size: 36px;
+  }
+  main .section--container .growth--logic--wrap .logic--box {
+    padding: 40px 35px 40px;
+  }
+  main .section--container .growth--logic--wrap .logic--box.special {
+    width: calc((100% - 120px) / 3 + 80px);
+  }
+  main .section--container .best--service--wrap {
+    gap: 20px;
+  }
+  main .section--container .best--service--wrap .service--box {
+    width: calc((100% - 40px) / 3);
+    padding: 20px 25px 40px;
+  }
+  main .section--container .best--service--wrap .service--box h3 {
+    font-size: 18px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+}
+@media (max-width: 768px) {
+  main .section--container .best--service--wrap {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  main .section--container .best--service--wrap .service--box {
+    width: 100%;
+  }
+  main .section--container .best--service--wrap .service--box h3 br {
+    display: none;
+  }
+  main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--title > p {
+    font-size: 16px;
+  }
+}
 main .main--impt--search--section {
   background: #F9F9F9;
 }
@@ -17354,7 +17410,6 @@ main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--content >
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
-  line-height: 100%; /* 16px */
   letter-spacing: -0.32px;
 }
 main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--content::before {

img/ico--top.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19V5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12L12 5L19 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

index.html

@@ -7,6 +7,7 @@
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">  
   <link rel="stylesheet" href="./css/main.css" />
   <link rel="stylesheet" href="./css/sub.css" />
+  <link rel="stylesheet" href="./css/media.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
@@ -160,8 +161,8 @@
           <div class="title--wrap big le">
             <h2>매도기업, 매수기업의 M&A 성공<br>
             <strong>M&A 궁합이 책임지겠습니다!</strong></h2>
-            <p>M&A를 통해 세상은 빠르게 발전하는데 왜 대부분의 기업들은 M&A 활용을 잘하지 못할까요?<br> 많은 기업들이 매각을 못해서 하루아침에 도산하고, 법정관리 절차를 밟다가 무너지고 잘나가는 기업도 매수타이밍, 매도타이밍을 놓쳐서 <br>
-            M&A로 무장한 외국기업에 뒤처지고 위험에 처하곤 합니다. <br>세계적으로나 국내에서나 시가총액 1위부터 수 백위까지 잘나가는 기업은 대부분 M&A로 커왔으며, 지금도 물밑에서는 치열한 M&A 싸움이 <br>
+            <p>M&A를 통해 세상은 빠르게 발전하는데 왜 대부분의 기업들은 M&A 활용을 잘하지 못할까요?<br> 많은 기업들이 매각을 못해서 하루아침에 도산하고, 법정관리 절차를 밟다가 무너지고 잘나가는 기업도 매수타이밍, 매도타이밍을 놓쳐서 <br class="web">
+            M&A로 무장한 외국기업에 뒤처지고 위험에 처하곤 합니다. <br>세계적으로나 국내에서나 시가총액 1위부터 수 백위까지 잘나가는 기업은 대부분 M&A로 커왔으며, 지금도 물밑에서는 치열한 M&A 싸움이 <br class="web">
             벌어지고 있습니다.</p>
           </div>
         </div>
@@ -1651,7 +1652,7 @@
     </article>
   </main>
 
-
+  <div class="top--btn"></div>
 
   <footer>
     <section>

js/common.js

@@ -133,6 +133,22 @@
         nextEl: ".reason--swiper .btn--wrap .next--btn",
         prevEl: ".reason--swiper .btn--wrap .prev--btn",
       },
+      breakpoints: {
+        0: {
+          slidesPerView: 1.2,
+          spaceBetween: 20,
+        },
+        768: {
+          slidesPerView: 3,
+        },
+        1201: {
+          slidesPerView: 4,
+          spaceBetween: 40,
+        },
+        1801: {
+          slidesPerView: 5,
+        }
+      }
     });
 
     // play/pause 버튼 기능

scss/main.scss

@@ -589,7 +589,6 @@ main{
           gap: 40px;
           width: 33.333%;
           display: flex;
-          justify-content: center;
           flex-direction: column;
           align-items: center;
           text-align: center;
@@ -613,7 +612,9 @@ main{
           display: flex;
           align-items: center;
           height: 120px;
-          background-size: 100%;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: right bottom;
           background-image: url(../img/bg--now1.svg);
           &:last-child{
             background-image: url(../img/bg--now2.svg);
@@ -706,6 +707,12 @@ main{
         border-radius: 25px;
         position: relative;
         width: calc((100% - 80px) / 3);
+        .service--img{
+          img{
+            width: 70%;
+            max-width: 140px;
+          }
+        }
         &:nth-child(2){
           .service--numb{
             background-image: url(../img/numb--service2.svg);
@@ -720,7 +727,9 @@ main{
           position: absolute;
           right: 0;
           display: inline-block;
-          width: 100px;
+          width: 25%;
+          max-width: 100px;
+          background-size: 100%;
           height: 100px;
           background-repeat: no-repeat;
           background-position: top right;
@@ -1769,4 +1778,24 @@ main{
       }
     }
   }
+}
+
+.top--btn{
+  background-color: #2ECC71;
+  border-radius: 50%;
+  position: fixed;
+  right: 30px;
+  width: 70px;
+  cursor: pointer;
+  height: 70px;
+  bottom: 30px;
+  z-index: 100;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url(../img/ico--top.svg);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  &.actv{
+    opacity: 1;
+  }
 }

scss/media.scss

@@ -0,0 +1,159 @@
+
+@media(max-width: 1200px){
+  main{
+    .section--container{
+      padding-left: 20px!important;
+      padding-right: 20px!important;
+      .title--wrap{
+        &.big{
+          >h2{
+            font-size: 36px;
+          }
+        }
+        >h2{
+          font-size: 30px;
+        }
+      }
+      .growth--logic--wrap{
+        gap: 20px;
+        .title--box{
+          width: calc((100% - 120px) / 3 + 80px);
+          h2{
+            font-size: 36px;
+          }
+        }
+        .logic--box{
+          padding: 40px 35px 40px;
+          &.special{
+            width: calc((100% - 120px) / 3 + 80px);
+          }
+        }
+      }
+      .best--service--wrap{
+        gap: 20px;
+        .service--box{
+          width: calc((100% - 40px) / 3);
+          padding: 20px 25px 40px;
+          h3{
+            font-size: 18px;
+            margin-top: 30px;
+            margin-bottom: 20px;
+          }
+        }
+      }
+      .now--box--wrap{
+        .box--top{
+          .box{
+            >p{
+              font-size: 16px;
+            }
+          }
+        }
+        .box--bot{
+          gap: 20px;
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 768px){
+  .mb--80{
+    margin-bottom: 40px!important;
+  }
+  br{
+    &.web{
+      display: none;
+    }
+  }
+  main{
+    .section--container{
+      &.p--120{
+        padding: 60px 0;
+      }
+      &.p--100{
+        padding: 60px 0;
+      }
+      .title--wrap{
+        &.big{
+          >h2{
+            font-size: 30px;
+            margin-bottom: 30px;
+          }
+          >p{
+            font-size: 15px;
+          }
+        }
+      }
+      .best--service--wrap{
+        flex-direction: column;
+        .service--box{
+          width: 100%;
+          h3{
+            br{
+              display: none;
+            }
+          }
+        }
+      }
+      .now--box--wrap{
+        .box--bot{
+          flex-direction: column;
+          .box{
+            width: 100%;
+          }
+        }
+      }
+    }
+    .faq--wrapper{
+      .inner--contents{
+        .faq--list--wrap{
+          ul{
+            li{
+              .faq--item--title{
+                >p{
+                  font-size: 15px;
+                }
+              }
+              .faq--item--content{
+                >p{
+                  font-size: 15px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 500px){
+  main{
+    .section--container{
+      .now--box--wrap{
+        .box--top{
+          flex-wrap: wrap;
+          gap: 20px;
+          margin-bottom: 50px;
+          .box{
+            width: 100%;
+            flex-direction: row;
+            gap: 20px;
+            .box--img{
+              width: 80px;
+              min-width: 80px;
+              img{
+                width: 100%;
+              }
+            }
+            >p{
+              width: calc(100% - 120px);
+              text-align: left;
+            }
+          }
+        }
+      }
+    }
+  }
+}

scss/sub.scss

@@ -1219,7 +1219,6 @@ main{
                 font-size: 16px;
                 font-style: normal;
                 font-weight: 400;
-                line-height: 100%; /* 16px */
                 letter-spacing: -0.32px;
               }
               &::before{