UIUX수정

assets/css/common.css

@@ -642,12 +642,58 @@ video::-webkit-media-controls {
   width: 100%;
   z-index: 101;
   overflow-x: clip;
+  background-color: transparent;
+  transition: background-color 0.2s ease-in-out;
 }
 @media (max-width: 1240px) {
   .hederWarp_n {
     padding: 0 2rem;
   }
 }
+.hederWarp_n.menu-open {
+  background-color: #fff;
+}
+.hederWarp_n.menu-open .headerInner .gnb .logoWrap a {
+  color: #05141f;
+}
+.hederWarp_n.menu-open .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1 {
+  color: #05141f;
+}
+.hederWarp_n.menu-open .headerInner .gnb .menuWarp .menuBg {
+  opacity: 1;
+}
+.hederWarp_n.menu-open .headerInner .func .carlist .carItem span {
+  color: #05141f;
+}
+.hederWarp_n.menu-open .headerInner .func .carlist .carItem::after {
+  content: "";
+  display: block;
+  width: 2.5rem;
+  height: 0.8rem;
+  margin-top: -0.4rem;
+  background: url("../images/common/icon-tbarrow.svg") center right no-repeat;
+  background-size: 1.2rem;
+}
+.hederWarp_n.menu-open .headerInner .func .carlist.on a::after {
+  transform: rotate(-180deg);
+  background-position-x: left;
+}
+.hederWarp_n.menu-open .headerInner .func .userLogin > a {
+  border: 1px solid rgba(5, 20, 31, 0.3);
+  color: #05141f;
+  transition: 0.3s;
+}
+.hederWarp_n.menu-open .headerInner .func .userLogin > a:hover {
+  border: 1px solid rgb(5, 20, 31);
+}
+@media (max-width: 1024px) {
+  .hederWarp_n.menu-open .headerInner .func .moblieMenu .burgur .top-line {
+    background-color: #000;
+  }
+  .hederWarp_n.menu-open .headerInner .func .moblieMenu .burgur .bot-line {
+    background-color: #000;
+  }
+}
 .hederWarp_n .headerInner {
   display: flex;
   justify-content: space-between;
@@ -849,7 +895,7 @@ video::-webkit-media-controls {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .carlistItem {
     position: absolute;
     display: none;
-    z-index: 1;
+    z-index: 10;
     width: 100%;
     top: 5.6rem;
     border-bottom: 1px solid #dedede;
@@ -892,6 +938,10 @@ video::-webkit-media-controls {
     margin-top: 1rem;
   }
 }
+.hederWarp_n .headerInner .gnb .menuWarp .menuBg {
+  transition: all 0.2s ease-in-out;
+  background-color: #fff;
+}
 @media (min-width: 1024px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menuBg {
     display: block;
@@ -900,7 +950,8 @@ video::-webkit-media-controls {
     left: 0;
     right: 0;
     z-index: 1;
-    background-color: #fff;
+    height: 0;
+    opacity: 0;
     border-top: 1px solid #DEDEDE;
   }
 }
@@ -910,12 +961,12 @@ video::-webkit-media-controls {
 }
 @media (min-width: 1024px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap.info {
-    display: block !important;
+    display: block;
     width: 27rem;
   }
 }
 .hederWarp_n .headerInner .gnb .menuWarp .menu.open li .menuDepth2Wrap h3 {
-  margin-bottom: 3.6rem;
+  margin-bottom: 2.8rem;
 }
 @media (min-width: 1024px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(1) .menuDepth2Wrap {
@@ -943,6 +994,9 @@ video::-webkit-media-controls {
     display: block;
     margin-left: 0;
     margin-top: 2rem;
+    overflow: hidden;
+    overflow-y: auto;
+    height: 63vh;
   }
 }
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap {
@@ -969,7 +1023,7 @@ video::-webkit-media-controls {
     position: relative;
     justify-content: flex-start;
     height: initial;
-    padding: 1rem 0;
+    padding: 1.3rem 0;
     color: #000000;
   }
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower::after {
@@ -982,6 +1036,9 @@ video::-webkit-media-controls {
     background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
     transition: transform 0.2s ease;
   }
+  .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower.on {
+    margin-bottom: 0.3rem;
+  }
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower.on::after {
     content: "";
     position: absolute;
@@ -991,16 +1048,19 @@ video::-webkit-media-controls {
     transform: rotate(270deg);
     background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
   }
+  .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth1.lower.on ~ .menuDepth2Wrap {
+    margin-bottom: 1rem;
+  }
 }
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap {
   position: absolute;
-  display: none;
+  display: block;
   width: 100%;
   min-width: 11rem;
   top: 7.9rem;
   left: 50%;
   transform: translate(-50%, 0);
-  padding: 4rem 2rem 6rem;
+  padding: 4rem 2rem 5rem;
 }
 @media (max-width: 1024px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap {
@@ -1050,7 +1110,7 @@ video::-webkit-media-controls {
   font-size: 1.4rem;
   font-weight: 400;
   color: #9ea1a2;
-  padding: 0.9rem 0;
+  padding: 0.8rem 0;
 }
 .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a.active {
   color: #05141f;
@@ -1060,7 +1120,7 @@ video::-webkit-media-controls {
 }
 @media (max-width: 1024px) {
   .hederWarp_n .headerInner .gnb .menuWarp .menu .menuDepth1Wrap .menuDepth2Wrap ul .menuDepth2 a {
-    padding: 1rem 0;
+    padding: 0.6rem 0;
   }
 }
 .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
@@ -1068,18 +1128,22 @@ video::-webkit-media-controls {
 }
 @media (max-width: 1024px) {
   .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
-    display: block;
-    padding: 0 2rem;
-    margin-top: 3rem;
+    display: flex;
+    position: absolute;
+    bottom: 3.2rem;
+    left: 0;
+    right: 0;
   }
   .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu a {
     display: block;
-    width: 100%;
-    padding: 1rem 0;
-    font-size: 1.6rem;
+    padding: 0 2rem;
+    font-size: 1.4rem;
     font-weight: 600;
     color: #676767;
   }
+  .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu a + a {
+    border-left: 1px solid #dedede;
+  }
 }
 .hederWarp_n .headerInner .gnb .menuWarp .loginBtn {
   display: none;