퀵 메뉴 스타일 변경, 반응형 추가

about.html

@@ -544,6 +544,9 @@
       </div>
       <div class="quick--global">
         <div class="global--bubble">
+          <div class="global--title">
+            <i class="ico"></i><h4>NETWORK</h4>
+          </div>
           <div class="global--list">
             <a href="#">MJ holdings limited</a>
             <a href="#">MJ logistics (HK) limited</a>

air.html

@@ -297,6 +297,9 @@
       </div>
       <div class="quick--global">
         <div class="global--bubble">
+          <div class="global--title">
+            <i class="ico"></i><h4>NETWORK</h4>
+          </div>
           <div class="global--list">
             <a href="#">MJ holdings limited</a>
             <a href="#">MJ logistics (HK) limited</a>

assets/css/media.css

@@ -379,6 +379,13 @@
     background-size: 26px 26px;
     background-color: rgba(255, 255, 255, 0.7);
   }
+  main .quick--menu--wrap > div.quick--contact .contact--bubble {
+    top: 5px;
+  }
+  main .quick--menu--wrap > div.quick--global .global--bubble::after {
+    width: 60px;
+    height: 60px;
+  }
   main .quick--menu--wrap > button {
     margin-top: 10px;
     background-size: 20px 20px;
@@ -549,6 +556,35 @@
   main .sub--container .org--wrap .org--cont .org--group--box .org--box {
     width: 100%;
   }
+  main .quick--menu--wrap > div.quick--contact .contact--bubble {
+    font-size: 15px;
+    font-weight: 300;
+  }
+  main .quick--menu--wrap > div.quick--global .global--bubble {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    top: auto;
+    left: 0;
+    height: 50vh;
+    border-radius: 40px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 45px 35px;
+  }
+  main .quick--menu--wrap > div.quick--global .global--bubble::after {
+    display: none;
+  }
+  main .quick--menu--wrap > div.quick--global .global--bubble .global--title {
+    margin-bottom: 30px;
+  }
+  main .quick--menu--wrap > div.quick--global .global--bubble .global--list {
+    height: calc(50vh - 145px);
+  }
+  main .quick--menu--wrap > div.quick--global .global--bubble .global--list a {
+    font-size: 15px;
+    font-weight: 300;
+  }
 }
 @media (max-width: 500px) {
   .container .image--section .section--container .map--wrap .map--dot--box .map--dots {

assets/css/sub.css

@@ -625,7 +625,7 @@ main .quick--menu--wrap > div {
   height: 70px;
   position: relative;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: background-color 0.3s;
   border: 1px solid rgba(54, 55, 63, 0.5);
   background-image: url(../img/ico--quick1.svg);
 }
@@ -637,12 +637,12 @@ main .quick--menu--wrap > div.quick--contact .contact--bubble {
   pointer-events: none;
   transition: opacity 0.3s;
   position: absolute;
-  top: 0;
+  top: 15px;
   right: calc(100% + 20px);
-  padding: 24px 30px;
+  padding: 15px 25px;
   background-color: #EC3237;
   border-radius: 50px;
-  font-size: 22px;
+  font-size: 17px;
   color: #fff;
   font-weight: 600;
   line-height: 1;
@@ -654,7 +654,7 @@ main .quick--menu--wrap > div.quick--contact .contact--bubble::after {
   background-image: url(../img/ico--bubble.svg);
   position: absolute;
   right: -12px;
-  top: 18px;
+  top: 7px;
   background-size: 100%;
   background-repeat: no-repeat;
   width: 28px;
@@ -675,14 +675,34 @@ main .quick--menu--wrap > div.quick--global .global--bubble {
   position: absolute;
   top: 0;
   right: calc(100% + 20px);
-  width: 435px;
+  width: 350px;
   padding: 25px 20px;
   border-radius: 20px;
   background-color: #EC3237;
 }
+main .quick--menu--wrap > div.quick--global .global--bubble .global--title {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+main .quick--menu--wrap > div.quick--global .global--bubble .global--title .ico {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-image: url(../img/ico--global.svg);
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+main .quick--menu--wrap > div.quick--global .global--bubble .global--title h4 {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1;
+}
 main .quick--menu--wrap > div.quick--global .global--bubble .global--list {
-  height: 350px;
-  padding: 0 20px;
+  height: 300px;
+  padding: 0 25px;
   overflow-y: scroll;
 }
 main .quick--menu--wrap > div.quick--global .global--bubble .global--list::-webkit-scrollbar {
@@ -706,8 +726,9 @@ main .quick--menu--wrap > div.quick--global .global--bubble .global--list a {
   pointer-events: none;
   text-decoration: none;
   display: inline-block;
+  width: 100%;
   margin-bottom: 15px;
-  font-size: 20px;
+  font-size: 17px;
   font-weight: 600;
   color: #fff;
 }
@@ -719,7 +740,7 @@ main .quick--menu--wrap > div.quick--global .global--bubble .global--list a::bef
   border-radius: 50%;
   background-color: #fff;
   top: 8px;
-  left: -15px;
+  left: -20px;
   position: absolute;
 }
 main .quick--menu--wrap > div.quick--global .global--bubble .global--list a:last-child {

assets/scss/media.scss

@@ -484,6 +484,19 @@
         height: 60px;
         background-size: 26px 26px;
         background-color: rgba(255, 255, 255, 0.70);
+        &.quick--contact{
+          .contact--bubble{
+            top: 5px;
+          }
+        }
+        &.quick--global{
+          .global--bubble{
+            &::after{
+              width: 60px;
+              height: 60px;
+            }
+          }
+        }
       }
       >button{
         margin-top: 10px;
@@ -722,6 +735,43 @@
         }
       }
     }
+    .quick--menu--wrap{
+      >div{
+        &.quick--contact{
+          .contact--bubble{
+            font-size: 15px;
+            font-weight: 300;
+          }
+        }
+        &.quick--global{
+          .global--bubble{
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            top: auto;
+            left: 0;
+            height: 50vh;
+            border-radius: 40px;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            padding: 45px 35px;
+            &::after{
+              display: none;
+            }
+            .global--title{
+              margin-bottom: 30px;
+            }
+            .global--list{
+              height: calc(50vh - 145px);
+              a{
+                font-size: 15px;
+                font-weight: 300;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
 

assets/scss/sub.scss

@@ -655,7 +655,7 @@ main{
       height: 70px;
       position: relative;
       cursor: pointer;
-      transition: all 0.3s;
+      transition: background-color 0.3s;
       border: 1px solid rgba(54, 55, 63, 0.50);
       background-image: url(../img/ico--quick1.svg);
       &.quick--contact{
@@ -669,12 +669,12 @@ main{
           pointer-events: none;
           transition: opacity 0.3s;
           position: absolute;
-          top: 0;
+          top: 15px;
           right: calc(100% + 20px);
-          padding: 24px 30px;
+          padding: 15px 25px;
           background-color: #EC3237;
           border-radius: 50px;
-          font-size: 22px;
+          font-size: 17px;
           color: #fff;
           font-weight: 600;
           line-height: 1;
@@ -685,7 +685,7 @@ main{
             background-image: url(../img/ico--bubble.svg);
             position: absolute;
             right: -12px;
-            top: 18px;
+            top: 7px;
             background-size: 100%;
             background-repeat: no-repeat;
             width: 28px;
@@ -709,13 +709,33 @@ main{
           position: absolute;
           top: 0;
           right: calc(100% + 20px);
-          width: 435px;
+          width: 350px;
           padding: 25px 20px;
           border-radius: 20px;
           background-color: #EC3237;
+          .global--title{
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 20px;
+            .ico{
+              display: inline-block;
+              width: 24px;
+              height: 24px;
+              background-image: url(../img/ico--global.svg);
+              background-size: 100%;
+              background-repeat: no-repeat;
+            }
+            h4{
+              color: #fff;
+              font-size: 20px;
+              font-weight: 700;
+              line-height: 1;
+            }
+          }
           .global--list{
-            height: 350px;
-            padding: 0 20px;
+            height: 300px;
+            padding: 0 25px;
             overflow-y: scroll;
             &::-webkit-scrollbar {
               width: 8px;
@@ -738,8 +758,9 @@ main{
               pointer-events: none;
               text-decoration: none;
               display: inline-block;
+              width: 100%;
               margin-bottom: 15px;
-              font-size: 20px;
+              font-size: 17px;
               font-weight: 600;
               color: #fff;
               &::before{
@@ -750,7 +771,7 @@ main{
                 border-radius: 50%;
                 background-color: #fff;
                 top: 8px;
-                left: -15px;
+                left: -20px;
                 position: absolute;
               }
               &:last-child{