gnb 원뎁스

kr/assets/css/common.scss

@@ -731,7 +731,8 @@ video::-webkit-media-controls {
 
   z-index: 101;
   overflow-x: clip;
-  background-color: transparent;
+  // background-color: transparent;
+  background-color: #fff;
 
   @media (max-width: 1240px) {
     padding: 0 1.5rem;
@@ -741,6 +742,36 @@ video::-webkit-media-controls {
     // height: 5.6rem;
   }
 
+  body.scroll-ing & {
+    .headerInner {
+      transform: translateY(-100%);
+      transition: transform 0.3s ease-in-out;
+    }
+  }
+  body.scroll-down & {
+    .headerInner {
+      transform: translateY(-100%);
+      transition: transform 0.3s ease-in-out;
+    }
+  }
+  body.scroll-up & {
+    .headerInner {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      padding: 0 1.5rem;
+      transform: translateY(0);
+      background-color: #fff;
+      transition: transform 0.3s ease-in-out;
+    }
+    .mobileOpenMenu {
+      position: fixed;
+      top: 5.6rem;
+    }
+  }
+
   &.menu-open {
     & ~ .pageTitle {
       z-index: 0 !important;
@@ -845,6 +876,7 @@ video::-webkit-media-controls {
     max-width: 120rem;
     height: 8rem;
     margin: 0 auto;
+    flex-wrap: wrap;
 
     @media (max-width: 1120px) {
       height: 5.6rem;
@@ -853,6 +885,7 @@ video::-webkit-media-controls {
     @media (min-width: 1240px) {
       max-width: 100%;
       padding: 0 1.5rem;
+      flex-wrap: nowrap;
     }
 
     @media (min-width: 1920px) {
@@ -916,7 +949,7 @@ video::-webkit-media-controls {
           align-items: center;
           font-size: 2rem;
           font-weight: 600;
-          color: #ffffff;
+          // color: #ffffff;
 
           .logoImg {
             background-size: contain;
@@ -1263,7 +1296,7 @@ video::-webkit-media-controls {
               padding: 0 2rem;
               font-size: 1.6rem;
               font-weight: 600;
-              color: #ffffff;
+              color: #05141f;
               white-space: nowrap;
 
               @media (max-width: 1220px) {
@@ -1545,7 +1578,7 @@ video::-webkit-media-controls {
           }
 
           span {
-            color: #fff;
+            color: #05141f;
             font-size: 1.4rem;
             font-weight: 400;
             // min-width: 2.2rem;
@@ -1880,7 +1913,7 @@ video::-webkit-media-controls {
             position: absolute;
             width: 1.8rem;
             height: 0.2rem;
-            background-color: #fff;
+            background-color: #000;
             top: 0;
             content: "";
           }
@@ -1889,13 +1922,60 @@ video::-webkit-media-controls {
             position: absolute;
             width: 1.8rem;
             height: 0.2rem;
-            background-color: #fff;
+            background-color: #000;
             bottom: 0;
             content: "";
           }
         }
       }
     }
+
+    .mobileOpenMenu {
+      display: block;
+      position: absolute;
+      top: 5.6rem;
+      left: 0;
+      width: 100%;
+      height: 5rem;
+      padding-top: 0.4rem;
+      background-color: #fff;
+      border-top: 1px solid #dedede;
+      &.hBoder {
+        border-bottom: 1px solid #dedede;
+      }
+      .menu {
+        overflow-x: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        height: 100%;
+        padding: 0 2rem;
+        gap: 2rem;
+        li {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          border-bottom: 0.4rem solid transparent;
+
+          &.active {
+            border-bottom: 0.4rem solid #000;
+          }
+        }
+        a {
+          font-size: 1.6rem;
+          font-weight: 400;
+          color: #05141f;
+        }
+      }
+      @media (min-width: 1120px) {
+        display: none;
+      }
+    }
   }
 }