diff --git a/css/aside.css b/css/aside.css
index a4e36fe..75195e1 100644
--- a/css/aside.css
+++ b/css/aside.css
@@ -66,13 +66,13 @@ aside .wrap ul.list > li:nth-child(5) h3::before{
  background-color: red;
 }
 aside .wrap ul.list > li:nth-child(6) h3::before{
- background-color: gold;
+ background-color: #7829EE;
 }
 aside .wrap ul.list > li:nth-child(7) h3::before{
  background-color: cyan;
 }
-aside .wrap ul.list > li:nth-child(9) h3::before{
- background-color:  brown;
+aside .wrap ul.list > li:nth-child(8) h3::before{
+ background-color:  #FF1A82;
 }
 aside .wrap ul.list > li h3 a {
   height: 100%;
@@ -118,7 +118,6 @@ aside .wrap ul.list > li:nth-child(8) h3 a::before{
   background-position-y: calc(-41px * 7);
 }
 aside .wrap ul.list > li div{
-  display: none;
 }
 aside .wrap ul.list > li ul.listsub {
   position: absolute;
@@ -167,13 +166,13 @@ aside .wrap ul.list > li:nth-child(5) ul.listsub::before{
   background-color: red;
 }
 aside .wrap ul.list > li:nth-child(6) ul.listsub::before{
-  background-color: gold;
+  background-color: #7829EE;
 }
 aside .wrap ul.list > li:nth-child(7) ul.listsub::before{
   background-color: cyan;
 }
 aside .wrap ul.list > li:nth-child(8) ul.listsub::before{
-  background-color:  brown;
+  background-color:  #FF1A82;
 }
 aside .wrap ul.list > li ul.listsub li {
   position: relative;
diff --git a/css/header.css b/css/header.css
index 96e29da..ca26b49 100644
--- a/css/header.css
+++ b/css/header.css
@@ -1,7 +1,24 @@
 header {
   position: relative;
-  transition: 1s;
 }
+.headerFix{
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  background-color: white;
+  top: 0;
+  animation-name: down;
+  animation-duration: 0.5s;
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-out;
+}
+@keyframes down{
+  100%{
+    top:-80px;
+  }
+}
+
 @keyframes headerdown{
   0%{
     transform: translateY(-40px);
@@ -27,15 +44,22 @@ header .wrap nav {
   align-items: center;
 }
 header.headerFix .wrap nav{
-grid-template-columns: auto auto auto; grid-template-rows: auto;
+grid-template-columns: auto auto auto; 
+grid-template-rows: auto;
 }
 header .wrap nav h1 {
   grid-column: 1 / span 2;
   justify-self: center;
   line-height: 2;
+  width: 100%;
+  height: 44px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
 }
 header.headerFix .wrap nav h1{
-grid-column: 1; justify-self: start;
+  grid-column: 1; 
+  justify-self: start;
 }
 header .wrap nav h1::before{
  content: "";  
@@ -48,7 +72,7 @@ header .wrap nav h1::before{
  top: 0;
 }
 header.headerFix .wrap nav h1::before{
-display: none;
+  display: none;
 }
 header .wrap nav h1:hover::before{
 } 
@@ -59,6 +83,7 @@ header .wrap nav h1 a {
   height: 25px;
   background-image: url(../img/logo_hitejinro.png);
   position: relative;
+  margin: 0 auto;
 }
 header .wrap nav h1 a span {
  
@@ -67,7 +92,6 @@ header .wrap nav ul.gnb{
   display: flex;
 }
 header.headerFix .wrap nav ul.gnb{
-  
   justify-self: center;
 }
 header .wrap nav ul.gnb li {
@@ -85,25 +109,87 @@ header .wrap nav ul.gnb li a:hover{
  
 }
 /* wgnb */
-header .wrap nav .wgnb{
+header .wrap nav .wgnb {
   display: block; 
   position: absolute;
-  width: 90%;
-  height: 100vh;
-  left: -90%;
-  top: 0;
+  width: 100%;
   background-color: white;
   z-index: 1;
-  padding: 20px 20px 0 20px;
+  padding: 0 20px 0 20px;
   box-sizing: border-box;
-  transition: 1s;
-/*   display: none; */
+  /* transition: 1s; */
+  left: 0;
+  top: 120px;
+  background-color: rgba(18,83,250,0.98);
+  display: none;
+  height: 240px;
 }
-.close{
-  
+header .wrap nav .wgnb *{
+  color: white;
+}
+header .wrap nav .wgnb .center{
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
 }
 .wgnbShow{
   left: 0 !important;
+  display: block !important;
+}
+.close{
+  display: block;
+  width: 32px;
+  height: 32px;
+  background-image: url(../img/close.svg);
+  background-size: contain;
+}
+header .wrap nav .wgnb .wsub{
+  /*! padding-left:30px; */
+  height: 240px;
+}
+header .wrap nav .wgnb .wsub:nth-child(2) ul.sub1{
+  grid-template-columns: repeat(4,1fr);
+  grid-template-rows: auto;
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1>li:nth-child(1){
+  grid-column: 2;
+  grid-row: 1;
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(1) div{
+  width: 80%;
+  font-size: 14px;
+
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(1) div a{
+   line-height: 1.4;
+   color: #ccc;
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1>li:nth-child(2){
+  grid-column: 3;
+  grid-row: 1;
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1>li:nth-child(3){
+  grid-column: 4;
+  grid-row: 1;
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(3) ul.sub2{
+  flex-direction: column;
+}
+header .wrap nav .wgnb .wsub{
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+header .wrap nav .wgnb h2{
+  /*! display: block; */
+  /*! line-height: 3; */
+  /*! cursor: pointer; */
+  /*! font-size: 19px; */
+  /*! display: flex; */
+  /*! justify-content: space-between; */
+  /*! align-items: center; */
+  /*! opacity: 0.7; */
 }
 header .wrap nav .wgnb >a{
   font-size: 0;
@@ -111,21 +197,15 @@ header .wrap nav .wgnb >a{
   height: 30px;
   background: url(../img/close.svg) no-repeat center /contain;
 }
-header .wrap nav .wgnb .center{
-
-}
-header .wrap nav .wgnb .wsub{
-  padding-left: 45px;
-}
 header .wrap nav .wgnb h2{
-  display: block;
-  line-height: 3;
-  cursor: pointer;
-  font-size: 19px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  opacity: 0.7;
+  /*! display: block; */
+  /*! line-height: 3; */
+  /*! cursor: pointer; */
+  /*! font-size: 19px; */
+  /*! display: flex; */
+  /*! justify-content: space-between; */
+  /*! align-items: center; */
+  /*! opacity: 0.7; */
 }
 header .wrap nav .wgnb h2::after{
   content: "";
@@ -141,23 +221,69 @@ header .wrap nav .wgnb h2.currentH2::after{
 .currentH2{
   color: blue;
 }
-header .wrap nav .wgnb ul{ 
-  display: none;
+header .wrap nav .wgnb .wsub ul.sub1{ 
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(3, 80px);
   text-align: left;
-  margin-left: -65px;
-  margin-right: -20px;
-  background-color: #eee;
-  padding-left: 65px;
 }
-header .wrap nav .wgnb ul li{
-  
+header .wrap nav .wgnb ul.sub1 >li{ 
+  transition: 0.3s;
+}
+header .wrap nav .wgnb ul.sub1 > li:nth-child(-n+3){
+  margin-left:-20px; 
+  padding-left: 20px;
+}
+header .wrap nav .wgnb ul.sub1 >li:hover{
+  background-color: rgba(11, 79, 184, 0.6);
+}
+header .wrap nav .wgnb ul.sub1 >li:nth-child(n+4){
+  border-left: 1px solid #ccc;
+  grid-row: 1 / span 3;
+}
+header .wrap nav .wgnb ul.sub1>li:nth-child(2){
+  grid-column: 1;
+  grid-row: 2;
+}
+header .wrap nav .wgnb ul.sub1>li:nth-child(3){
+  grid-column: 1;
+  grid-row: 3;
 }
-header .wrap nav .wgnb ul li a{
-  line-height: 3;
+header .wrap nav .wgnb ul.sub1>li>a{
   display: block;
+  line-height: 2.5;
+  padding-top: 20px;
 }
-header .wrap nav .wgnb ul li:not(:first-child)  a{
-  border-top: 1px solid #ccc;
+header .wrap nav .wgnb ul.sub1>li>a::before{
+  content: "";
+  display: block;
+  width: 20px;
+  border-top:1px solid #fff;
+}
+header .wrap nav .wgnb ul.sub1>li:nth-child(n+4) a{
+  padding-left: 20px;
+}
+header .wrap nav .wgnb ul.sub1>li:not(:first-child)>a{
+  padding-left: initial;
+}
+header .wrap nav .wgnb ul.sub2{
+
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(2) ul.sub2{
+  flex-wrap: wrap;
+}
+header .wrap nav .wsub:nth-child(2) ul.sub1 > li:nth-child(2) ul.sub2 li{
+  width: 40%;
+}
+
+header .wrap nav .wgnb ul.sub2 li{
+  
+}
+header .wrap nav .wgnb ul.sub2 li a{
+  color: #ccc;
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 300; 
 }
 /* 기타메뉴 */
 header .wrap nav ul.enb {
@@ -184,22 +310,3 @@ header .wrap nav ul.enb li a:hover {
 header .wrap nav ul.enb li:nth-child(1) a::after,header .wrap nav ul.enb li:nth-child(2) a::after{
  
 }
-.headerFix{
-  position: fixed;
-  z-index: 1;
-  width: 100%;
-  background-color: white;
-  top: 0;
-  animation-name: down;
-  animation-duration: 0.5s; 
-  animation-direction: reverse;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-out;
-}
-
-@keyframes down{
-  to{
-    top: -75px;
-    opacity: 0;
-  }
-}
\ No newline at end of file
diff --git a/css/responsive.css b/css/responsive.css
index 4f49db9..50d6ae6 100644
--- a/css/responsive.css
+++ b/css/responsive.css
@@ -2,7 +2,6 @@
 @media screen and (max-width:1440px){
 /*  헤더  */
   body{
-  
   padding-right: 100px;
 }
   header .wrap nav{
@@ -11,6 +10,8 @@
   }
   header .wrap nav h1{
     grid-column: 1;
+    grid-row: 1;
+    justify-self: auto;
   }
   header .wrap nav ul.gnb{
   grid-column: 1 / span 2;
@@ -18,10 +19,10 @@
   justify-self: center;
   }
   header .wrap nav ul.enb{
-  grid-column: 3;
-  grid-row: 1;
-  position: relative;
-  justify-self: center;
+    grid-column: 2;
+    grid-row: 1;
+    position: relative;
+    justify-self: end;
   }
 }
 
@@ -45,6 +46,88 @@
   header .wrap nav ul.enb{
     display: none;
   }
+  header .wrap nav .wgnb{
+  width: 80%;
+  height: 100vh;
+  left: -80%;
+  top: 0;
+   background-color: white;
+  transition: 1s;
+  display: block !important;
+  }
+
+  .wgnbShow{
+    left: 0 !important;
+    display: block !important;
+  }
+  header .wrap nav .wgnb >a{
+    font-size: 0;
+    width: 30px;
+    height: 30px;
+    background: url(../img/close.svg) no-repeat center /contain;
+  }
+  header .wrap nav .wgnb .wsub{
+    padding-left: 30px;
+    display: initial;
+    position: initial;
+  }
+  header .wrap nav .wgnb h2{
+    display: block;
+    line-height: 3;
+    cursor: pointer;
+    font-size: 19px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    opacity: 0.7;
+    color: #333;
+  }
+  header .wrap nav .wgnb h2::after{
+    content: "";
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background: url(../img/more_down.svg) no-repeat center /contain;
+    transition: 0.5s;
+  }
+  header .wrap nav .wgnb h2.currentH2::after{
+    transform: rotate(180deg);
+  }
+  .currentH2{
+    color: blue;
+  }
+  header .wrap nav .wgnb ul{ 
+    display: none;
+    text-align: left;
+    margin-left: -65px;
+    margin-right: -20px;
+    background-color: #eee;
+    padding-left: 65px;
+  }
+  header .wrap nav .wgnb .wsub ul.sub1{
+    display: initial;
+    display: none;
+  }
+  header .wrap nav .wgnb ul.sub2{   
+    display: none;
+  }
+  header .wrap nav .wgnb ul li{
+
+  }
+  header .wrap nav .wgnb ul.sub1 > li:nth-child(n+4){
+    border-left: none;
+  }
+  header .wrap nav .wgnb ul li a{
+    line-height: 3;
+    display: block;
+  }
+  header .wrap nav .wgnb ul.sub1 > li > a{
+  color: #333;
+  }
+  header .wrap nav .wgnb ul li:not(:first-child)  a{
+    border-top: 1px solid #ccc;
+  }
+/*  추가1  */
   header .wrap nav{
     grid-template-columns: auto 1fr auto;
     grid-template-rows: 50px;
@@ -69,7 +152,6 @@
   cursor: pointer;
   }
   #product ul.list{
-    
   grid-template-columns: auto auto auto;
   grid-template-rows: repeat(4, auto);
   row-gap: 20px;
@@ -116,41 +198,33 @@
     width: auto;
     display: block;
   }
-  aside .wrap ul.list > li div{
-    display: none;
-  }
-  aside .wrap ul.list > li ul.listsub{
-/*     display: none; */
-    position: static;
-    height: auto;
-    display: flex;
-    flex-wrap: wrap;
-    background-color: #eee;
+  aside .wrap ul.list{
+    text-align: left;
+    grid-template-rows: repeat(8,auto);
   }
   aside .wrap ul.list{
-  text-align: left;
-  grid-template-rows: repeat(8,auto);
+      text-align: left;
+      grid-template-rows: repeat(8,auto);
   }
-    aside .wrap ul.list > li h3::before{
+  aside .wrap ul.list > li h3::before{
     display: none;
   }
   aside .wrap ul.list > li h3{
-  height: auto;
+    height: initial;
   }
   aside .wrap ul.list > li h3 a{
   flex-direction: row;
   justify-content: left;
-  font-size: 20px;
-  line-height: 3.5;
+  line-height: 4;
+  font-size: 17px;
   color: #333;
-  position: relative;
   }
   aside .wrap ul.list > li:not(:first-child) h3 a{
     border-top: 1px solid #ccc;
   }
   aside .wrap ul.list > li h3 a::before{
-  background-image: url(../img/aside/gnb_brand_menu.m.png);
-  }
+    background-image: url(../img/aside/gnb_brand_menu.m.png);
+    }
   aside .wrap ul.list > li h3 a::after{
     content: "";
     background: url(../img/아이콘/plus.png) no-repeat center /contain;
@@ -160,6 +234,19 @@
     position: absolute;
     right: 0;
   }
+  aside .wrap ul.list > li div{
+    display: none;
+  }
+  aside .wrap ul.list > li ul.listsub{
+/*     display: none; */
+    position: static;
+    height: auto;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  aside .wrap ul.list > li ul.listsub::before{    
+    display: none;
+  }
   aside .wrap ul.list > li ul.listsub li{
   width: calc(100% / 3);
   }
@@ -169,32 +256,9 @@
   aside .wrap ul.list > li ul.listsub li a img{    
   width: 100%;
   }
-  aside .wrap ul.list > li ul.listsub::before{    
-  display: none;
-  }
-  .asideSliding{
-    right: 0%;
-  }
-/*  푸터  */
-  footer div.wrap{
-  padding-top: 20px;
-  }
-  footer div.wrap ul.fnb{
-  margin-bottom: 20px;
-  }
-  footer div.wrap ul.fnb li a{
-    
-  line-height: 2.2;
-  }
-  footer div.wrap address{
-    font-size: 15px;
-  }
-  footer .btop{
-    
-  right: 20px;
-  top: -245px;
-  }
 }
+
+
 /* ------------------768(960) --------------------*/
 @media screen and (max-width:768px){
 /*  버튼  */
@@ -228,7 +292,6 @@
   font-size: 20px;
   }
   #product ul.list li p{
-    
   font-size: 14px;
   letter-spacing: 0;
   padding: 5px 8px;
@@ -252,8 +315,7 @@
   footer div.wrap ul.fnb li ul.sublist{
     display: none !important;
   }
-
-    footer div.wrap ul.fnb{
+  footer div.wrap ul.fnb{
     text-align: left;
   }
   footer div.wrap ul.fnb{
@@ -263,7 +325,7 @@
     line-height: 2.2;
     font-size: 13px;
   }
-     footer div.wrap ul.fnb2{
+  footer div.wrap ul.fnb2{
     justify-content: center;
   }
   footer div.wrap ul.fnb2 li{
diff --git a/header.html b/header.html
new file mode 100644
index 0000000..ae5b821
--- /dev/null
+++ b/header.html
@@ -0,0 +1,194 @@
+
+<div class="wrap">
+      <nav>
+         <h1 class="h5">
+            <a href="" class="a">하이트진로</a>
+         </h1>
+         <ul class="gnb">
+            <li><a href="" class="a">COMPANY</a></li>
+            <li><a href="" class="a">SOCIAL & MEDIA</a></li>
+            <li><a href="" class="a">ESG</a></li>
+            <li><a href="" class="a">CUSTOMER CENTER</a></li>
+         </ul>
+         <ul class="enb">
+            <li><a href="" class="a">LOGIN</a></li>
+            <li><a href="" class="a">JOIN</a></li>
+            <li><a href="" class="a">RECRUIT</a></li>
+            <li><a href="" class="a">LANGUAGE</a></li>
+         </ul>
+         <div class="wgnb hide">
+            <div class="center">
+                  <div class="wsub">
+                     <h2 class="hide">COMPANY</h2>
+                     <ul class="sub1 text-center">
+                        <li><a href="">인사말</a></li>
+                        <li><a href="">경영철학</a></li>
+                        <li><a href="">연혁</a></li>
+                        <li>
+                              <a href="">Introduction</a>
+                              <ul class="sub2">
+                                 <li><a href="" class="block">CI</a></li>
+                                 <li><a href="" class="block">하이트진로 폰트</a></li>
+                                 <li><a href="" class="block">국제화</a></li>
+                                 <li><a href="" class="block">계열사안내</a></li>
+                              </ul>
+                        </li>
+                        <li>
+                              <a href="">Investment</a>
+                              <ul class="sub2">
+                                 <li><a href="" class="block">IR정보</a></li>
+                                 <li><a href="" class="block">전자공고</a></li>
+                                 <li><a href="" class="block">공시</a></li>
+                                 <li><a href="" class="block">공시정보 관리규정</a></li>
+                              </ul>
+                        </li>
+                        <li>
+                              <a href="">Location</a>
+                              <ul class="sub2">
+                                 <li><a href="" class="block">본사</a></li>
+                                 <li><a href="" class="block">지점</a></li>
+                                 <li><a href="" class="block">공장</a></li>
+                                 <li><a href="" class="block">계열사</a></li>
+                                 <li><a href="" class="block">해외법인</a></li>
+                              </ul>
+                        </li> 
+                        <li>
+                              <a href="">Factory</a>
+                              <ul class="sub2">
+                                 <li><a href="" class="block">공장소개</a></li>
+                                 <li><a href="" class="block">견학신청</a></li>
+                                 <li><a href="" class="block">신청상태</a></li>
+                              </ul>
+                        </li>      
+                        <li>
+                              <a href="">Recruit</a>
+                              <ul class="sub2">
+                                 <li><a href="" class="block">All about HITEJINRO</a></li>
+                                 <li><a href="" class="block">인재상</a></li>
+                                 <li><a href="" class="block">직무소개</a></li>
+                                 <li><a href="" class="block">채용절차</a></li>
+                                 <li><a href="" class="block">복리후생</a></li>
+                                 <li><a href="" class="block">채용공고</a></li>
+                                 <li><a href="" class="block">지원자도우미</a></li>
+                              </ul>
+                        </li> 
+                        <li>
+                              <a href="">Sports</a>
+                              <ul class="sub2">
+                                 <li><a href="" class="block">골프선수</a></li>
+                                 <li><a href="" class="block">골프대회</a></li>
+                                 <li><a href="" class="block">기타 스포츠</a></li>
+                              </ul>
+                        </li>
+                     </ul>
+                  </div>
+                  <div class="wsub">
+                     <h2 class="hide">SOCIAL & MEDIA</h2>
+                     <ul class=" sub1 text-center">
+                        <li>
+                              <a href="">Social board</a>
+                              <div class="sub2">
+                                 <a href="">
+                                    당신의 인생을 더 큰 즐거움과 에너지로
+                                    채우는 하이트진로의 다양한 소셜채널을
+                                    지금 바로 확인해 보세요! 
+                                 </a>   
+                              </div>
+                        </li>
+                        <li>
+                              <a href="">Media</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">공지사항</a></li>
+                                 <li><a href="" class="block">보도자료</a></li>
+                                 <li><a href="" class="block">광고 자료관</a></li>
+                                 <li><a href="" class="block">제품 자료관</a></li>
+                              </ul>
+                        </li>
+                        <li>
+                              <a href="">마케팅 성공사례</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">하이트 성공사례</a></li>
+                                 <li><a href="" class="block">참이슬 성공신화</a></li>
+                              </ul>
+                        </li>
+                     </ul>
+                  </div>
+                  <div class="wsub">
+                     <h2 class="hide">ESG</h2>
+                     <ul class="sub1 text-center">
+                        <li>
+                              <a href="">지속가능환경경영</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">Introduction</a></li>
+                                 <li><a href="" class="block">2050 to zerO!</a></li>
+                                 <li><a href="" class="block">CSV</a></li>
+                                 <li><a href="" class="block">Management</a></li>
+                              </ul> 
+                        </li>
+                        <li>
+                              <a href="">식품안전경영</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">경영방침</a></li>
+                                 <li><a href="" class="block">인증현황</a></li>
+                                 <li><a href="" class="block">Q-UP System</a></li>
+                              </ul> 
+                        </li>
+                        <li>
+                              <a href="">안전보건경영</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">경영방침 및 추진과제</a></li>
+                                 <li><a href="" class="block">인증현황</a></li>
+                                 <li><a href="" class="block">안전보건활동 현황</a></li>
+                              </ul> 
+                        </li>
+                        <li>
+                              <a href="">CSR</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">&Joy</a></li>
+                                 <li><a href="" class="block">분야별 사회공헌</a></li>
+                                 <li><a href="" class="block">꿈 바우처</a></li>
+                              </ul> 
+                        </li>
+                        <li>
+                              <a href="">Ethical Management</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">동반성장</a></li>
+                                 <li><a href="" class="block">청음고(부정제보)</a></li>
+                                 <li><a href="" class="block">공정거래자율준수</a></li>
+                              </ul> 
+                        </li>
+                        <li>
+                              <a href="">기업지배구조</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">이사회 현황</a></li>
+                                 <li><a href="" class="block">이사회 내 위원회 현황</a></li>
+                                 <li><a href="" class="block">정기 주주총회
+                                    의결권 행사 현황</a></li>
+                                 <li><a href="" class="block">ESG 평가 등급</a></li>
+                              </ul> 
+                        </li>
+                        <li>
+                              <a href="">지속가능경영보고서</a>
+                        </li>
+                     </ul>
+                  </div>
+                  <div class="wsub">
+                     <h2 class="hide">CUSTOMER CENTER</h2>
+                     <ul class="sub1 text-center">
+                        <li><a href="">FAQ</a></li>
+                        <li><a href="">Q&A</a></li>
+                        <li>
+                              <a href="">주류상식 가이드</a>
+                              <ul class="sub2 flex">
+                                 <li><a href="" class="block">맥주 가이드</a></li>
+                                 <li><a href="" class="block">소주 가이드</a></li>
+                              </ul>
+                        </li>
+                        <li><a href="">기타</a></li>
+                     </ul>
+                  </div>
+               </div>
+         </div>
+         <a href="" class="ham hide">전체메뉴</a>
+      </nav>
+</div>
\ No newline at end of file
diff --git a/index.html b/index.html
index d35de08..3b40c98 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,15 @@
     <link rel="stylesheet" href="css/aside.css">
     <link rel="stylesheet" href="css/footer.css">
     <link rel="stylesheet" href="css/responsive.css">
+    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
+    <script type="text/javascript">   
+        $(document).ready( function() {
+        
+            $("#top").load("header.html");  // 원하는 파일 경로를 삽입하면 된다
+            $("#footers").load("common/footer.html");  // 추가 인클루드를 원할 경우 이런식으로 추가하면 된다
+        
+        });
+        </script>
     <script src="https://code.jquery.com/jquery-3.7.0.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function(){
@@ -209,7 +218,7 @@
                     $(this).toggleClass("currentH2");
                     $(this).parent().siblings().children("h2").removeClass("currenH2");
                     $(this).next().slideToggle();
-                    $(this).parent().siblings().children("ul").slideUp();
+                    $(this).parent().siblings().children("ul.sub1").slideUp();
                 });
             //스크롤이벤트
             //변수지정>스크롤값지정>css스타일변경>클래스추가+css애니메이션(top값 조정))
@@ -238,6 +247,7 @@
                     $("footer .btop").removeClass("topFix");
                 }
 
+
                 //하단 탑버튼 페이지와 같이 이동
                 if($(window).scrollTop()>$("footer").offset().top-$(window).height()){
                     $("footer .btop").removeClass("topFix").css("opacity",1);
@@ -245,6 +255,28 @@
 
 
 
+            });
+            var wsubN; //변수선언
+            //대메뉴오버시 서브를 슬라이드 다운-2024.01.19
+            $("header .wrap nav ul.gnb li a").hover(function(){
+                    $("header .wrap nav .wgnb").stop().slideDown();
+                    //wsub를 보이게 하시오.
+                    wsubN=$(this).parent().index()+1; //마우스 올린 대상의 부모의 순번을 가져와서 넣어라.
+                    $("header .wrap nav .wgnb .wsub:nth-child("+wsubN+")").fadeIn();
+                    $("header .wrap nav .wgnb .wsub:not(:nth-child("+wsubN+"))").fadeOut();
+                });
+            $("header .wrap nav .wgnb").mouseleave(function(){
+                $(this).slideUp();
+            });
+
+            //h1에 마우스 진입하면 wgnb가 슬라이드업
+            $("header .wrap nav h1").mouseenter(function(){
+                $("header .wrap nav .wgnb").slideUp();
+            });
+
+            //top버튼을 클릭하면 실행하시오(문서를 애니메이트하시오)
+            $("footer .btop").click(function(){
+                $("html.body").animate({scrollTop:0},1000);
             });
             console.log($("footer").offset())
             });
@@ -343,13 +375,13 @@
         $(document).ready(function(){
             $("aside .wrap ul.list > li h3").hover(function(){
                 if($(window).width()>1200){
-                $("aside").addClass("sliding");
-                $(this).next().show();
-                $(this).parent().siblings().children(".listsub").hide();
-                $(this).addClass("current");
-                $(this).next().addClass("wide");
-                $(this).parent().siblings().children("h3").removeClass("current");
-                $(this).parent().siblings().children(".listsub").hide().removeClass("wide");
+                    $("aside").addClass("sliding");
+                    $(this).next().find(".listsub").show();
+                    $(this).parent().siblings().find(".listsub").hide();
+                    $(this).addClass("current");
+                    $(this).next().find(".listsub").addClass("wide");
+                    $(this).parent().siblings().children("h3").removeClass("current");
+                    $(this).parent().siblings().find(".listsub").hide().removeClass("wide");
                 }
             });
             //h3 a를 클릭하면 실행하시오
@@ -361,10 +393,11 @@
             });
             $("aside").mouseleave(function(){
                 $("aside").removeClass("sliding");
+                $("aside .wrap ul.list > li h3").removeClass("current");
             });
             // 브랜드 누르면 어사이드 보이기
-            $("header .wrap nav h2").click(function(){
-                $("aside").toggleClass("asideSliding");
+            $("header .wrap nav >h2.h4").click(function(){
+                $("aside").toggleClass("sliding");
                 $("header .wrap nav .wgnb").removeClass("wgnbShow");
             });
         });
@@ -373,86 +406,7 @@
 <body>
     
     <!-- 상단영역 -->
-   <header id="top">
-        <div class="wrap">
-            <nav>
-                <h1 class="h5">
-                    <a href="" class="a">하이트진로</a>
-                </h1>
-                <ul class="gnb">
-                    <li><a href="" class="a">COMPANY</a></li>
-                    <li><a href="" class="a">SOCIAL & MEDIA</a></li>
-                    <li><a href="" class="a">ESG</a></li>
-                    <li><a href="" class="a">CUSTOMER CENTER</a></li>
-                </ul>
-                <ul class="enb">
-                    <li><a href="" class="a">LOGIN</a></li>
-                    <li><a href="" class="a">JOIN</a></li>
-                    <li><a href="" class="a">RECRUIT</a></li>
-                    <li><a href="" class="a">LANGUAGE</a></li>
-                </ul>
-                <div class="wgnb hide">
-                    <div class="center">
-                        <div class="wsub">
-                            <h2 class="hide">COMPANY</h2>
-                            <ul class="text-center">
-                                <li><a href="">회사개요</a></li>
-                                <li><a href="">CEO 인사말</a></li>
-                                <li><a href="">가치체계</a></li>
-                                <li><a href="">연구소</a></li>
-                                <li><a href="">관계사</a></li>
-                                <li><a href="">사업장</a></li>
-                            </ul>
-                        </div>
-                        <div class="wsub">
-                            <h2 class="hide">제품소개</h2>
-                            <ul class="text-center">
-                                <li><a href="">제품정보</a></li>
-                                <li><a href="">주정</a></li>
-                                <li><a href="">석유화학</a></li>
-                                <li><a href="">Color Paste</a></li>
-                                <li><a href="">제품문의</a></li>
-                            </ul>
-                        </div>
-                        <div class="wsub">
-                            <h2 class="hide">지속가능경영</h2>
-                            <ul class="text-center">
-                                <li><a href="">정도경영</a></li>
-                                <li><a href="">환경경영</a></li>
-                                <li><a href="">품질경영</a></li>
-                            </ul>
-                        </div>
-                        <div class="wsub">
-                            <h2 class="hide">투자정보</h2>
-                            <ul class="text-center">
-                                <li><a href="">경영정보</a></li>
-                                <li><a href="">주가정보</a></li>
-                                <li><a href="">재무정보</a></li>
-                                <li><a href="">IR자료실</a></li>
-                            </ul>
-                        </div>
-                        <div class="wsub">
-                            <h2 class="hide">홍보센터</h2>
-                            <ul class="text-center">
-                                <li><a href="">KAI소식</a></li>
-                                <li><a href="">CI소개</a></li>
-                                <li><a href="">사회공헌</a></li>
-                            </ul>
-                        </div>
-                        <div class="wsub">
-                            <h2 class="hide">인재채용</h2>
-                            <ul class="text-center">
-                                <li><a href="">인사제도</a></li>
-                                <li><a href="">채용공고</a></li>
-                                <li><a href="">채용문의</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <a href="" class="ham hide">전체메뉴</a>
-            </nav>
-        </div>
-   </header>
+   <header id="top"> </header>
    <!-- 타이틀영역 -->
    <div id="subtitle" class="height-full">
         <div class="titleani wrap height-full">