헤더 서브메뉴 추가

css/main.css

@@ -16243,7 +16243,7 @@ header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  width: 30%;
+  width: 25%;
   height: 58px;
 }
 header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .logo a {
@@ -16253,7 +16253,7 @@ header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap
   width: 100%;
 }
 header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .txt {
-  width: 70%;
+  width: calc(70% - 20px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -16283,20 +16283,24 @@ header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap
 header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .txt p:last-child span {
   font-weight: 700;
 }
+header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .ham--btn {
+  display: none;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cline y1='11' x2='22' y2='11' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='18' x2='22' y2='18' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='4' x2='22' y2='4' stroke='black' stroke-width='2'%3E%3C/line%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 22px 22px;
+  background-position: center;
+  cursor: pointer;
+}
+header .header--contents--wrap .header--contents.actv .header--gnb--wrap .sub--wrap {
+  max-height: 500px;
+}
 header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  -webkit-transition: left linear 0.2s;
-  transition: left linear 0.2s;
-}
-header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap.actv > ul li > ul {
-  display: none;
-  top: 52px;
-  pointer-events: auto;
-  -webkit-transform: translateX(-50%) translateY(0px);
-          transform: translateX(-50%) translateY(0px);
-  opacity: 1;
 }
 header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul {
   width: 100%;
@@ -16361,8 +16365,137 @@ header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap >
   font-weight: 700;
   letter-spacing: -0.34px;
 }
-header .header--wrap {
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap {
+  max-height: 0;
+  -webkit-transition: max-height 0.3s;
+  transition: max-height 0.3s;
+  overflow: hidden;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul {
+  max-width: 1200px;
+  padding-bottom: 10px;
+  margin: 0 auto;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul li {
+  width: 20%;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul li a {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  line-height: 1;
+  font-size: 16px;
+  font-weight: 400;
+  padding: 10px 0;
+}
+header .header--ham--wrap {
+  background-color: #ffffff;
+  position: fixed;
+  left: 100%;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  z-index: 10001;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+header .header--ham--wrap.actv {
+  left: 0%;
+}
+header .header--ham--wrap .header--ham--top {
+  background-color: #2ecc71;
+  padding: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+header .header--ham--wrap .header--ham--top .logo--wrap {
+  display: inline-block;
+  max-width: 210px;
+  width: 25%;
+}
+header .header--ham--wrap .header--ham--top .logo--wrap img {
+  width: 100%;
+}
+header .header--ham--wrap .header--ham--top .login--menu {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 20px;
+}
+header .header--ham--wrap .header--ham--top .login--menu .ico--user {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-image: url(../img/ico_user.svg);
+}
+header .header--ham--wrap .header--ham--top .login--menu .ico--close {
+  display: inline-block;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+  background-image: url(../img/ico_close2.svg);
+}
+header .header--ham--wrap .header--ham--menu {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+header .header--ham--wrap .header--ham--menu .ham--l {
   position: relative;
+  width: 51%;
+  height: calc(100vh - 84px);
+  overflow-y: auto;
+  background-color: #F5F5F5;
+}
+header .header--ham--wrap .header--ham--menu .ham--l ul {
+  padding: 0;
+  margin-bottom: 0;
+}
+header .header--ham--wrap .header--ham--menu .ham--l ul li {
+  list-style: none;
+  cursor: pointer;
+  padding: 30px 10px;
+  color: #222222;
+  line-height: 1;
+  letter-spacing: -0.3px;
+  border-bottom: 1px solid #E3E3E3;
+  font-weight: 400;
+  background-color: #F5F5F5;
+  font-size: 15px;
+  text-align: center;
+}
+header .header--ham--wrap .header--ham--menu .ham--l ul li.actv {
+  background-color: #ffffff;
+}
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login {
+  text-decoration: none;
+  color: #555;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 50px 0;
+  line-height: 1;
+  letter-spacing: -0.32px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -16372,40 +16505,49 @@ header .header--wrap {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  text-align: center;
+  gap: 12px;
 }
-header .header--wrap:after {
-  -webkit-transition: all ease-in-out 0.3s;
-  transition: all ease-in-out 0.3s;
-  content: "";
-  display: block;
-  height: 0px;
-  width: 100%;
-  background: #fff;
-  position: absolute;
-  top: 166px;
-  left: 0px;
-  border-top: 1px solid #ebebeb;
-  z-index: -1;
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login .ico {
+  width: 16px;
+  height: 16px;
 }
-
-.header--dim {
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login .ico.login {
+  background-image: url(../img/ico_login.svg);
+}
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login .ico.logout {
+  background-image: url(../img/ico_logout.svg);
+}
+header .header--ham--wrap .header--ham--menu .ham--r {
+  width: 49%;
+  padding: 0 15px;
+  height: calc(100vh - 84px);
+  overflow-y: auto;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul {
+  padding: 0;
   display: none;
-  width: 100%;
-  height: 0px;
-  position: fixed;
-  top: 270px;
-  left: 0px;
-  background: #fff;
-  border-top: 1px solid #eee;
-  z-index: 900;
 }
-.header--dim.actv {
+header .header--ham--wrap .header--ham--menu .ham--r ul.actv {
   display: block;
-  height: 300px;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul li {
+  list-style: none;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul li a {
+  width: 100%;
+  font-size: 15px;
+  display: inline-block;
+  color: #222222;
+  line-height: 1;
+  padding: 30px 15px;
+  letter-spacing: -0.3px;
+  border-bottom: 1px solid #F6F6F6;
+  text-decoration: none;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul li a.actv {
+  color: #315BFF;
+  font-weight: 500;
 }
 
 main {

css/media.css

@@ -11,6 +11,12 @@
   header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li a {
     font-size: 16px;
   }
+  header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul li:nth-child(1) {
+    width: 26%;
+  }
+  header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul li:nth-child(2), header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul li:nth-child(3) {
+    width: 30%;
+  }
   main .section--container {
     padding-left: 20px !important;
     padding-right: 20px !important;
@@ -395,10 +401,12 @@
     font-size: 14px;
   }
   header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap {
-    gap: 20px;
+    gap: 0px;
   }
   header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .txt {
+    padding-left: 15px;
     gap: 5px;
+    width: calc(70% - 10px);
   }
   header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .txt p {
     font-size: 14px;
@@ -406,29 +414,40 @@
   header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .txt p:last-child {
     font-size: 15px;
   }
+  header .header--contents--wrap .header--contents .header--logo--wrap .logo--wrap .ham--btn {
+    display: block;
+  }
   header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul {
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
   }
   header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li {
-    width: 50%;
+    display: none;
   }
   header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li:nth-child(1) {
     width: 30%;
+    display: block;
   }
   header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li:nth-child(2), header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li:nth-child(3) {
     width: 35%;
+    display: block;
   }
   header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li a {
     font-size: 15px;
     height: 45px;
     line-height: 45px;
   }
+  header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap {
+    display: none !important;
+  }
+  header .header--ham--wrap {
+    display: block !important;
+  }
   main {
-    padding-top: 290px !important;
+    padding-top: 245px !important;
   }
   main.actv {
-    padding-top: 190px !important;
+    padding-top: 145px !important;
   }
   main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt {
     gap: 20px;

img/ico_close2.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="M18 6L6 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

index.html

@@ -34,18 +34,14 @@
               <p>M&A궁합이 M&A진행을 방해하고 있는 <span>허들을 없앴습니다.</span></p>
               <p>이제부터 편한 마음으로 <span>나와 궁합이 잘 맞는 상대방</span>을 만나보세요!</p>
             </div>
+            <div class="ham--btn"></div>
           </div>
         </div>
         <div class="header--gnb--wrap">
           <div class="gnb--wrap">
-            <!-- <div class="header--dim"></div> -->
             <ul>
               <li>
                 <a href="#">M&A 상담신청</a>
-                <ul>
-                  <li><a href="#">서브메뉴</a></li>
-                  <li><a href="#">서브메뉴</a></li>
-                </ul>
               </li>
               <li>
                 <a href="#">매도자님께 ★꿈 실현</a>
@@ -54,9 +50,86 @@
                 <a href="#">매수자님께 ★꿈 실현</a>
               </li>
               <li><a href="#">주요 내용</a></li>
-              <li><a href="#">문의 사항</a></li>
+              <li><a href="#">문의/신청</a></li>
             </ul>
           </div>
+          <div class="sub--wrap">
+            <ul>
+              <li>
+                <a href="#">기업매도 상담신청</a>
+                <a href="#">기업매수 상담신청</a>
+              </li>
+              <li></li>
+              <li></li>
+              <li>
+                <a href="#">M&A의뢰 6가지 이유</a>
+                <a href="#">M&A와 궁합</a>
+                <a href="#">차별화 전략</a>
+                <a href="#">M&A궁합의 탁월성</a>
+                <a href="#">가업승계형 M&A전략</a>
+                <a href="#">전문인력</a>
+                <a href="#">FAQ</a>
+              </li>
+              <li>
+                <a href="#">가업승계 문의</a>
+                <a href="#">회생기업 문의</a>
+                <a href="#">이멜 문의</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="header--ham--wrap">
+      <div class="header--ham--top">
+        <a href="/" class="logo--wrap">
+          <img src="./img/header_logo.svg" alt="M&A 궁합">
+        </a>
+        <div class="login--menu">
+          <div class="ico--close"></div>
+        </div>
+      </div>
+      <div class="header--ham--menu">
+        <div class="ham--l">
+          <ul>
+            <li class="menu--1 actv">M&A 상담 신청</li>
+            <li class="menu--2">매도자님께 ★꿈 실현</li>
+            <li class="menu--3">매수자님께 ★꿈 실현</li>
+            <li class="menu--4">주요 내용</li>
+            <li class="menu--5">문의/신청</li>            
+          </ul>
+        </div>
+        <div class="ham--r">
+          <ul class="menu--sub--1 actv">            
+            <li><a href="#">기업매도 상담신청</a></li>
+            <li><a href="#">기업매수 상담신청</a></li>
+          </ul>
+          <ul class="menu--sub--2">
+            <li><a href="#">매도자님께 ★꿈 실현</a></li>
+          </ul>
+          <ul class="menu--sub--3">
+            <li><a href="#">매수자님께 ★꿈 실현</a></li>
+          </ul>
+          <ul class="menu--sub--4">
+            <li><a href="#">M&A의뢰 6가지 이유</a></li>
+            <li><a href="#">M&A와 궁합</a></li>
+            <li><a href="#">차별화 전략</a></li>
+            <li><a href="#">M&A궁합의 탁월성</a></li>
+            <li><a href="#">가업승계형 M&A전략</a></li>
+            <li><a href="#">전문인력</a></li>
+            <li><a href="#">FAQ</a></li>
+          </ul>
+          <ul class="menu--sub--5">
+            <li>
+              <a href="#">가업승계 문의</a>
+            </li>    
+            <li>
+              <a href="#">회생기업 문의</a>
+            </li>   
+            <li>
+              <a href="#">이멜 문의</a>
+            </li>           
+          </ul>         
         </div>
       </div>
     </div>

js/common.js

@@ -1,22 +1,32 @@
   $(function(){
-    $("header .header--bottom .header--contents").on("mouseenter", function(e){
-      if(e.type == "mouseenter"){
-        $("header, .header--menu--dim").addClass("actv");
-      }
-    });
-
     $(".header--line--banner--wrap .close--btn").on("click", function(){
       $(".header--line--banner--wrap").addClass("actv");
       $("main").addClass("actv");
     });
 
-    $(".header--menu--dim, .header--top").on("mouseenter", function(e){
-      if(e.type == "mouseenter"){
-        $("header, .header--menu--dim").removeClass("actv");
-      }
+    $(".header--contents").on("mouseenter", function(){
+       $(this).addClass("actv");
     })
-    $("header").on("mouseleave", function(){
-      $("header").removeClass("actv");
+    $(".header--contents").on("mouseleave", function(){
+      $(this).removeClass("actv");
+    });
+
+    $(".ham--btn").on("click", function(){
+      $(".header--ham--wrap").addClass("actv");
+    });
+
+    $(".header--ham--wrap .ico--close").on("click", function(){
+      $(".header--ham--wrap").removeClass("actv");
+    });
+
+    $('.ham--l li').each(function (index) {
+      $(this).on('click', function () {
+        $('.ham--l li').removeClass('actv');
+        $(this).addClass('actv');
+
+        $('.ham--r ul').removeClass('actv');
+        $('.ham--r ul').eq(index).addClass('actv');
+      });
     });
 
     const swiper = new Swiper('.main--visual', {
@@ -211,16 +221,6 @@
       $(window).scrollTop(0);
     });
 
-    $(".gnb--wrap").on("mouseenter mouseleave", function(e){      
-      if(e.type == "mouseenter"){
-        $(this).addClass("actv");
-        $(".header--dim").addClass("actv");
-      }else{
-        $(this).removeClass("actv");
-        $(".header--dim").removeClass("actv");
-      }      
-    });
-
     // FAQ 아코디언 기능    
     
     $(".faq--item--title").on("click", function(){

scss/main.scss

@@ -124,7 +124,7 @@ header{
             max-width: 210px;
             display: flex;
             align-items: center;
-            width: 30%;
+            width: 25%;
             height: 58px;
             a{
               display: inline-block;
@@ -134,7 +134,7 @@ header{
             }
           }
           .txt{
-            width: 70%;
+            width: calc(70% - 20px);
             display: flex;
             flex-direction: column;
             gap: 15px;
@@ -157,6 +157,24 @@ header{
               }
             }
           }
+          .ham--btn{
+            display: none;
+            width: 30px;
+            min-width: 30px;
+            height: 30px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cline y1='11' x2='22' y2='11' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='18' x2='22' y2='18' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='4' x2='22' y2='4' stroke='black' stroke-width='2'%3E%3C/line%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-size: 22px 22px;
+            background-position: center;
+            cursor: pointer;
+          }
+        }
+      }
+      &.actv{
+        .header--gnb--wrap{
+          .sub--wrap{
+            max-height: 500px;
+          }
         }
       }
       .header--gnb--wrap{
@@ -164,20 +182,6 @@ header{
           width: 100%;
           max-width: 1200px;
           margin: 0 auto;
-          transition: left linear .2s;      
-          &.actv{
-            >ul{
-              li{
-                >ul{
-                  display: none;
-                  top:52px;
-                  pointer-events: auto;
-                  transform: translateX(-50%) translateY(0px);   
-                  opacity: 1;
-                }
-              }
-            }    
-          }
           >ul{
             width: 100%;
             @include flex-center;
@@ -230,48 +234,172 @@ header{
             }
           }
         }
+        .sub--wrap{
+          max-height: 0;
+          transition: max-height 0.3s;
+          overflow: hidden;
+          >ul{
+            max-width: 1200px;
+            padding-bottom: 10px;
+            margin: 0 auto;
+            width: 100%;
+            display: flex;
+            li{
+              width: 20%;
+              a{
+                display: inline-block;
+                text-align: center;
+                width: 100%;
+                line-height: 1;
+                font-size: 16px;
+                font-weight: 400;
+                padding: 10px 0;
+              }
+            }
+          }
+        }
       }
     }
   }
-  .header--wrap{
-    position: relative;
+
+  .header--ham--wrap{
+    background-color: #ffffff;
+    position: fixed;
+    left: 100%;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    transition: all 0.3s;
+    z-index: 10001;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;    
-    &:after{
-      transition: all ease-in-out .3s;
-      content: "";
-      display: block;
-      height:0px;
-      width:100%;
-      background: #fff;
-      position: absolute;
-      top: 166px;
-      left:0px;
-      border-top:1px solid #ebebeb;
-      z-index: -1;      
+    flex-direction: column;
+    &.actv{
+      left: 0%;
+    }
+    .header--ham--top{
+      background-color: #2ecc71;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .logo--wrap{
+        display: inline-block;
+        max-width: 210px;
+        width: 25%;
+        img{
+          width: 100%;
+        }
+      }
+      .login--menu{
+        display: flex;
+        gap: 20px;
+        .ico--user{
+          display: inline-block;
+          width: 24px;
+          height: 24px;
+          background-repeat: no-repeat;
+          background-image: url(../img/ico_user.svg);
+        }
+        .ico--close{
+          display: inline-block;
+          cursor: pointer;
+          background-repeat: no-repeat;
+          width: 24px;
+          height: 24px;
+          background-image: url(../img/ico_close2.svg);
+        }
+      }
+    }
+    .header--ham--menu{
+      display: flex;
+      .ham--l{
+        position: relative;
+        width: 51%;
+        height: calc(100vh - 84px);
+        overflow-y: auto;
+        background-color: #F5F5F5;
+        ul{
+          padding: 0;
+          margin-bottom: 0;
+          li{
+            list-style: none;
+            cursor: pointer;
+            padding: 30px 10px;
+            color: #222222;
+            line-height: 1;
+            letter-spacing: -0.3px;
+            border-bottom: 1px solid #E3E3E3;
+            font-weight: 400;
+            background-color: #F5F5F5;
+            font-size: 15px;
+            text-align: center;
+            &.actv{
+              background-color: #ffffff;;
+            }
+          }
+        }
+        .menu--login{
+          text-decoration: none;
+          color: #555;
+          width: 100%;
+          font-size: 16px;
+          font-weight: 500;
+          margin: 50px 0;
+          line-height: 1;
+          letter-spacing: -0.32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          gap: 12px;
+          .ico{
+            width: 16px;
+            height: 16px;
+            &.login{
+              background-image: url(../img/ico_login.svg);
+            }
+            &.logout{
+              background-image: url(../img/ico_logout.svg);
+            }
+          }
+        }
+      }
+      .ham--r{
+        width: 49%;
+        padding: 0 15px;
+        height: calc(100vh - 84px);
+        overflow-y: auto;
+        ul{
+          padding: 0;
+          display: none;
+          &.actv{
+            display: block;
+          }
+          li{
+            list-style: none;
+            a{
+              width: 100%;
+              font-size: 15px;
+              display: inline-block;
+              color: #222222;
+              line-height: 1;
+              padding: 30px 15px;
+              letter-spacing: -0.3px;
+              border-bottom: 1px solid #F6F6F6;
+              text-decoration: none;
+              &.actv{
+                color: #315BFF;
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
 }
 
-.header--dim{
-  &.actv{
-    display: block;
-    height:300px;
-  }
-  display: none;
-  width:100%;
-  height: 0px;
-  position: fixed;
-  top:270px;
-  left:0px;
-  background:#fff;
-  border-top:1px solid #eee;
-  z-index: 900;
-}
-
 main{
   padding-top: 270px!important;
   &.actv{

scss/media.scss

@@ -24,6 +24,19 @@
               }
             }
           }
+          .sub--wrap{
+            >ul{
+              li{
+                &:nth-child(1){
+                  width: 26%;
+                }
+                &:nth-child(2),
+                &:nth-child(3){
+                  width: 30%;
+                }
+              }
+            }
+          }
         }
       }
     }
@@ -500,9 +513,11 @@
       .header--contents{
         .header--logo--wrap{
           .logo--wrap{
-            gap: 20px;
+            gap: 0px;
             .txt{
+              padding-left: 15px;
               gap: 5px;
+              width: calc(70% - 10px);
               p{
                 font-size: 14px;
                 &:last-child{
@@ -510,6 +525,9 @@
                 }
               }
             }
+            .ham--btn{
+              display: block;
+            }
           }
         }
         .header--gnb--wrap{
@@ -519,12 +537,14 @@
               li{
                 &:nth-child(1){
                   width: 30%;
+                  display: block;
                 }
                 &:nth-child(2),
                 &:nth-child(3){
                   width: 35%;
+                  display: block;
                 }
-                width: 50%;
+                display: none;
                 a{
                   font-size: 15px;
                   height: 45px;
@@ -533,14 +553,20 @@
               }
             }
           }
+          .sub--wrap{
+            display: none!important;
+          }
         }
       }
     }
+    .header--ham--wrap{
+      display: block!important;
+    }
   }
   main{
-    padding-top: 290px!important;
+    padding-top: 245px!important;
     &.actv{
-      padding-top: 190px!important;
+      padding-top: 145px!important;
     }
     .main--visual--section{
       .main--visual--wrap{