반응형 진행중

app/assets/scss/media.scss

@@ -1,3 +1,708 @@
-@media(max-width: 1080px){
-  
+@media(max-width: 1280px){
+  .header--wrap{
+    .header--container{
+      padding: 0 20px;
+    }
+  }
+  main{
+    section{
+      .sub--container{
+        &.type3{
+          padding: 100px 20px 120px;
+        }
+        .partners--wrap{
+          gap: 12px;
+          .partners{
+            width: calc((100% - 36px) / 4);
+          }
+        }
+      }
+    }
+  }
+  .footer--wrap{
+    .footer--container{
+      padding: 40px 20px 60px;
+    }
+  }
+}
+
+@media(max-width: 1060px){
+  #top--visual{
+    height: 300px;
+    .inner--content{
+      max-height: 300px;
+      min-height: 300px;
+      >h1{
+        font-size: 36px;
+      }
+    }
+  }
+  .header--wrap{
+    .header--container{
+      height: 60px;
+      .logo--wrap{
+        width: 123px;
+        height: 32px;
+      }
+      .menu--wrap{
+        display: none;
+      }
+      .lang--wrap{
+        display: none;
+      }
+      .ham--wrap{
+        display: block;
+      }
+    }
+  }
+  main{
+    section{
+      &.mission--section{
+        .title--wrap{
+          .mission--title{
+            font-size: 30px;
+          }
+          .mission--desc{
+            font-size: 20px;
+          }
+        }
+      }
+      &.notice--section{
+        .sub--container{
+          .title--wrap{
+            .title{
+              font-size: 36px;
+            }
+          }
+        }
+      }
+      .sub--container{
+        padding-left: 20px!important;
+        padding-right: 20px!important;
+        .title--wrap{
+          .logo--wrap{
+            img{
+              width: 146px;
+            }
+          }
+          .title{
+            font-size: 30px;
+          }
+          .sub--title{
+            font-size: 20px;
+          }
+        }
+        .vision--wrap{
+          >p{
+            font-size: 30px;
+          }
+        }
+        .values--card--wrap{
+          .card{
+            dt{
+              font-size: 20px;
+            }
+          }
+        }
+        .history--desc--wrap{
+          .history--desc{
+            &.left--type{
+              padding-right: 0;
+            }
+            &.left--type2{
+              padding-right: 0;
+            }
+            &.right--type{
+              padding-left: 0;
+            }
+            .desc--wrap{
+              >p{
+                font-size: 18px!important;
+              }
+            }
+            .desc--box--wrap{
+              .desc--wrap{
+                >div{
+                  font-size: 20px;
+                }
+              }
+            }
+          }
+        }
+        .history--graph--wrap{
+          .txt--wrap{
+            width: 35%;
+            min-width: 200px;
+            font-size: 30px;
+          }
+          .graph--wrap{
+            width: 65%;
+
+          }
+        }
+        .catalog--wrap{
+          gap: 40px;
+          .catalog{
+            gap: 40px;
+            .img--wrap{
+              width: 50%;
+              min-width: 0;
+            }
+            .download--wrap{
+              width: 50%;
+              gap: 18px;
+              >p{
+                font-size: 24px;
+              }
+            }
+          }
+        }
+        .materials--wrap{
+          .materials--box{
+            gap: 40px;
+            .img--wrap{
+              width: 40%;
+              min-width: 0;
+              img{
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+            .desc--wrap{
+              width: 60%;
+              gap: 12px;
+              >h4{
+                font-size: 24px;
+              }
+              >h5{
+                font-size: 18px;
+              }
+              >ul{
+                >li{
+                  font-size: 15px;
+                }
+              }
+            }
+          }
+        }
+        .life--cycle--wrap{
+          gap: 16px;
+          .cycle{
+            gap: 16px;
+            .img--wrap{
+              .txt{
+                padding: 16px;
+                span{
+                  font-size: 16px;
+                }
+                p{
+                  font-size: 16px;
+                }
+              }
+            }
+          }
+        }
+        .patents--wrap{
+          .patents--list{
+            .patents{
+              gap: 12px;
+              .img--wrap{
+                height: 300px;
+              }
+            }
+          }
+        }
+        .news--wrap{
+          .news--list{
+            .news{
+              gap: 20px;
+              .news--title--wrap{
+                h4{
+                  font-size: 18px;
+                }
+                span{
+                  font-size: 15px;
+                }
+              }
+            }
+          }
+        }
+        .sns--wrap{
+          .sns--list{
+            gap: 16px;
+            .sns{
+              width: calc((100% - 48px) / 4);
+              .txt--wrap{
+                >h4{
+                  font-size: 16px;
+                }
+              }
+              &:hover{
+                .txt--wrap{
+                  min-height: 110px;
+                }
+              }
+            }
+          }
+        }
+        .notice--wrap{
+          .notice--list{
+            .notice{
+              gap: 40px;
+              padding: 20px;
+              h4{
+                font-size: 18px;
+                width: calc(100% - 180px);
+              }
+              .news--index{
+                font-size: 15px;
+              }
+              .news--date{
+                font-size: 15px;
+              }
+            }
+          }
+        }
+        .faq--wrap{
+          .border-default{
+            .flex{
+              >button{
+                padding: 20px;
+                .text-start{
+                  font-size: 18px;
+                  &::before{
+                    font-size: 20px;
+                  }
+                }
+              }
+            }
+            .overflow-hidden{
+              padding: 20px 60px 20px 20px;
+              .text-sm{
+                font-size: 16px;
+                &::before{
+                  font-size: 20px;
+                }
+              }
+            }
+          }
+        }
+        .location--wrap{
+          h4{
+            font-size: 24px;
+          }
+          .map{
+            font-size: 15px;
+          }
+          .call{
+            font-size: 15px;
+          }
+          .location--map{
+            height: 300px;
+          }
+        }
+      }
+    }
+  }
+  #out--container{
+    .out--container{
+      padding: 0 20px;
+      .m--title{
+        font-size: 36px;
+      }
+      .form--contents--wrap{
+        .form--contents{
+          h3{
+            &.privacy--title{
+              font-size: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer--wrap{
+    .footer--container{
+      .footer--top{
+        .menu--wrap{
+          display: none;
+        }
+      }
+      .footer--bot{
+        margin-top: 20px;
+        .info--list{
+          row-gap: 4px;
+          li{
+            font-size: 13px;
+            &:nth-of-type(1), &:nth-of-type(2){
+              width: 100%;
+            }
+          }
+          .bar{
+            display: none;
+            &.mobile{
+              display: inline-block;
+            }
+          }
+        }
+        .copyright{
+          flex-direction: column;
+          align-items: start;
+          span{
+            font-size: 13px;
+          }
+          a{
+            font-size: 13px;
+          }
+          .bar{
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 768px){
+  #top--visual {
+    .inner--content {
+      >h1 {
+        font-size: 24px;
+      }
+      nav {
+        >ul{
+          >li{
+            a{
+              font-size: 13px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  main {
+    section {
+      &.mission--section {
+        .title--wrap {
+          .mission--title {
+            font-size: 30px;
+          }
+
+          .mission--desc {
+            font-size: 20px;
+          }
+        }
+      }
+
+      &.notice--section {
+        .sub--container {
+          .title--wrap {
+            .title {
+              font-size: 36px;
+            }
+          }
+        }
+      }
+
+      .sub--container {
+        padding-left: 20px !important;
+        padding-right: 20px !important;
+
+        .title--wrap {
+          .logo--wrap {
+            img {
+              width: 146px;
+            }
+          }
+
+          .title {
+            font-size: 30px;
+          }
+
+          .sub--title {
+            font-size: 20px;
+          }
+        }
+
+        .vision--wrap {
+          >p {
+            font-size: 30px;
+          }
+        }
+
+        .values--card--wrap {
+          .card {
+            dt {
+              font-size: 20px;
+            }
+          }
+        }
+
+        .history--desc--wrap {
+          .history--desc {
+            &.left--type {
+              padding-right: 0;
+            }
+
+            &.left--type2 {
+              padding-right: 0;
+            }
+
+            &.right--type {
+              padding-left: 0;
+            }
+
+            .desc--wrap {
+              >p {
+                font-size: 18px !important;
+              }
+            }
+
+            .desc--box--wrap {
+              .desc--wrap {
+                >div {
+                  font-size: 20px;
+                }
+              }
+            }
+          }
+        }
+
+        .history--graph--wrap {
+          .txt--wrap {
+            width: 35%;
+            min-width: 200px;
+            font-size: 30px;
+          }
+
+          .graph--wrap {
+            width: 65%;
+
+          }
+        }
+
+        .catalog--wrap {
+          gap: 40px;
+
+          .catalog {
+            gap: 40px;
+
+            .img--wrap {
+              width: 50%;
+              min-width: 0;
+            }
+
+            .download--wrap {
+              width: 50%;
+              gap: 18px;
+
+              >p {
+                font-size: 24px;
+              }
+            }
+          }
+        }
+
+        .materials--wrap {
+          .materials--box {
+            gap: 40px;
+
+            .img--wrap {
+              width: 40%;
+              min-width: 0;
+
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+
+            .desc--wrap {
+              width: 60%;
+              gap: 12px;
+
+              >h4 {
+                font-size: 24px;
+              }
+
+              >h5 {
+                font-size: 18px;
+              }
+
+              >ul {
+                >li {
+                  font-size: 15px;
+                }
+              }
+            }
+          }
+        }
+
+        .life--cycle--wrap {
+          gap: 16px;
+
+          .cycle {
+            gap: 16px;
+
+            .img--wrap {
+              .txt {
+                padding: 16px;
+
+                span {
+                  font-size: 16px;
+                }
+
+                p {
+                  font-size: 16px;
+                }
+              }
+            }
+          }
+        }
+
+        .patents--wrap {
+          .patents--list {
+            .patents {
+              gap: 12px;
+
+              .img--wrap {
+                height: 300px;
+              }
+            }
+          }
+        }
+
+        .news--wrap {
+          .news--list {
+            .news {
+              gap: 20px;
+
+              .news--title--wrap {
+                h4 {
+                  font-size: 18px;
+                }
+
+                span {
+                  font-size: 15px;
+                }
+              }
+            }
+          }
+        }
+
+        .sns--wrap {
+          .sns--list {
+            gap: 16px;
+
+            .sns {
+              width: calc((100% - 48px) / 4);
+
+              .txt--wrap {
+                >h4 {
+                  font-size: 16px;
+                }
+              }
+
+              &:hover {
+                .txt--wrap {
+                  min-height: 110px;
+                }
+              }
+            }
+          }
+        }
+
+        .notice--wrap {
+          .notice--list {
+            .notice {
+              gap: 40px;
+              padding: 20px;
+
+              h4 {
+                font-size: 18px;
+                width: calc(100% - 180px);
+              }
+
+              .news--index {
+                font-size: 15px;
+              }
+
+              .news--date {
+                font-size: 15px;
+              }
+            }
+          }
+        }
+
+        .faq--wrap {
+          .border-default {
+            .flex {
+              >button {
+                padding: 20px;
+
+                .text-start {
+                  font-size: 18px;
+
+                  &::before {
+                    font-size: 20px;
+                  }
+                }
+              }
+            }
+
+            .overflow-hidden {
+              padding: 20px 60px 20px 20px;
+
+              .text-sm {
+                font-size: 16px;
+
+                &::before {
+                  font-size: 20px;
+                }
+              }
+            }
+          }
+        }
+
+        .location--wrap {
+          h4 {
+            font-size: 24px;
+          }
+
+          .map {
+            font-size: 15px;
+          }
+
+          .call {
+            font-size: 15px;
+          }
+
+          .location--map {
+            height: 300px;
+          }
+        }
+      }
+    }
+  }
+
+  #out--container {
+    .out--container {
+      .m--title {
+        font-size: 36px;
+      }
+
+      .form--contents--wrap {
+        .form--contents {
+          h3 {
+            &.privacy--title {
+              font-size: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
 }

app/assets/scss/style.scss

@@ -1,5 +1,11 @@
 @import "pretendard/dist/web/static/pretendard.css";
 
+body{
+    &:has(.mobile--header--wrap.active){
+        overflow: hidden;
+    }
+}
+
 // SCSS watching test
 * {
     font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
@@ -62,6 +68,11 @@
                     color: #1f2128;
                 }
             }
+            .ham--wrap{
+                >button{
+                    background-image: url(/img/ico--ham--black.svg);
+                }
+            }
         }
     }
     .header--container{
@@ -77,6 +88,9 @@
             width: 138px;
             background-image: url(/img/header--logo.svg);
             font-size: 0;
+            background-repeat: no-repeat;
+            background-size: 100%;
+            background-position: center;
             height: 36px;
         }
         .menu--wrap{
@@ -230,6 +244,184 @@
                 }
             }
         }
+        .ham--wrap{
+            display: none;
+            >button{
+                transition: all 0.3s;
+                background-color: transparent;
+                background-image: url(/img/ico--ham.svg);
+                width: 28px;
+                height: 28px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+.mobile--header--wrap{
+    position: fixed;
+    left: 100%;
+    transition: all 0.3s;
+    top: 60px;
+    width: 100%;
+    height: calc(100vh - 60px);
+    background-color: #fff;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    &.active{
+        left: 0;
+    }
+    .mobile--menu--wrap{
+        width: 100%;
+        height: calc(100% - 72px);
+        padding-top: 14px;
+        overflow-y: auto;
+        >ul{
+            >li{
+                >div{
+                    color: #1f2128;
+                    font-size: 18px;
+                    cursor: pointer;
+                    font-weight: 700;
+                    display: flex;
+                    justify-content: space-between;
+                    padding: 14px 20px;
+                    .ico{
+                        width: 24px;
+                        height: 24px;
+                        transition: all 0.3s;
+                        background-image: url(/img/ico--ham--arrow.svg);
+                    }
+                    &.active{
+                        .ico{
+                            transform: rotate(180deg);
+                        }
+                    }
+                }
+                >ul{
+                    background-color: #f6f8ff;
+                    display: flex;
+                    flex-direction: column;
+                    max-height: 0;
+                    overflow: hidden;
+                    transition: max-height 0.3s ease;
+                    &.active{
+                        max-height: 400px;
+                    }
+                    >li{
+                        >a{
+                            width: 100%;
+                            padding: 10px 28px;
+                            display: inline-block;
+                            color: #1f2128;
+                            font-size: 16px;
+                            font-weight: 500;
+                        }
+                        &:first-child{
+                            >a{
+                                padding-top: 20px;
+                            }
+                        }
+                        &:last-child{
+                            >a{
+                                padding-bottom: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .mobile--lang--wrap{
+        height: 72px;
+        border-top: 1px solid #e0e4f2;
+        padding: 16px 20px;
+        .lang--wrap {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            position: relative;
+            cursor: pointer;
+    
+            .ico {
+                transition: all 0.3s;
+                width: 24px;
+                height: 24px;
+                background-image: url(/img/ico--lang--black.svg);
+            }
+    
+            >p {
+                transition: all 0.3s;
+                color: #1f2128;
+                line-height: 1;
+                font-size: 16px;
+                font-weight: 700;
+            }
+    
+            .select--wrap {
+                opacity: 0;
+                pointer-events: none;
+                position: absolute;
+                bottom: 36px;
+                left: 0;
+                width: 180px;
+                height: 240px;
+                padding: 16px;
+                overflow-y: scroll;
+                background-color: #fff;
+                box-shadow: 0 8px 16px 0 rgba(31, 33, 40, 0.12);
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+    
+                li {
+                    color: #515973;
+                    font-size: 14px;
+                    font-weight: 700;
+    
+                    &:hover {
+                        color: #00a654;
+                    }
+    
+                    &.active {
+                        color: #00a654;
+                    }
+                }
+    
+                // 스크롤바 커스터마이징
+                &::-webkit-scrollbar {
+                    width: 4px;
+                }
+    
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+    
+                &::-webkit-scrollbar-thumb {
+                    background-color: #b6bbcc;
+                    border-radius: 4px;
+                }
+    
+                &::-webkit-scrollbar-thumb:hover {
+                    background-color: #a0a4b8;
+                }
+            }
+    
+            &.active {
+                >p {
+                    color: #00A654;
+                }
+    
+                .ico {
+                    background-image: url(/img/ico--lang--green.svg);
+                }
+    
+                .select--wrap {
+                    opacity: 1;
+                    pointer-events: all;
+                }
+            }
+        }
     }
 }
 
@@ -904,6 +1096,7 @@ main{
                 }
             }
             .history--graph--wrap{
+                overflow: hidden;
                 display: flex;
                 .txt--wrap{
                     text-align: center;
@@ -1040,6 +1233,7 @@ main{
             .tab--wrap{
                 margin: 60px 0 80px;
                 display: flex;
+                width: 100%;
                 justify-content: center;
                 gap: 12px;
                 a{
@@ -1313,7 +1507,7 @@ main{
                     .notice {
                         display: flex;
                         justify-content: space-between;
-                        border-bottom: 1px solid #e0e4f2;
+                        border-bottom: 1px solid #b6bbcc;
                         transition: all 0.3s;
                         align-items: center;
                         padding: 28px 20px;
@@ -1633,6 +1827,7 @@ main{
                 .location--map{
                     width: 100%;
                     margin-top: 28px;
+                    height: 360px;
                 }
             }
             .pagination--wrap{

app/assets/scss/sub.scss

@@ -256,7 +256,8 @@
             gap:0px;
             >div{
               display: flex;                            
-              min-width:101px;
+              // min-width:101px;
+              width: 25%;
               height:36px;
               position: relative;
               >div{

app/components/footer.vue

@@ -57,7 +57,7 @@
                   <li>사무실 : 서울시 강남구 언주로 650 한국건설기술인협회 신관 2층</li>
                   <span class="bar"></span>
                   <li>대표이사 : 윤태균</li>
-                  <span class="bar"></span>
+                  <span class="bar mobile"></span>
                   <li>사업자번호 : 861-88-01187</li>
                 </ul>
                 <ul class="info--list mt-[4px]">

app/components/header.vue

@@ -1,6 +1,6 @@
 <template>
     <header>
-        <div class="header--wrap" :class="{ 'white': isScrolled }">
+        <div class="header--wrap" :class="{ 'white': isScrolled || isMobileMenuOpen }">
             <div class="header--container">
                 <NuxtLink class="logo--wrap" to="/">그린웨일글로벌</NuxtLink>
                 <ul class="menu--wrap">
@@ -56,6 +56,78 @@
                         <li>French</li>
                     </ul>
                 </div>
+                <div class="ham--wrap" :class="{ 'active': isMobileMenuOpen }">
+                    <UButton @click="toggleMobileMenu"></UButton>
+                </div>
+            </div>
+        </div>
+        <div class="mobile--header--wrap" :class="{ 'active': isMobileMenuOpen }">
+            <div class="mobile--menu--wrap">
+                <ul>
+                    <li>
+                        <div @click="toggleAccordion('company')" :class="{ 'active': activeAccordion === 'company' }">
+                            Company<i class="ico"></i>
+                        </div>
+                        <ul :class="{ 'active': activeAccordion === 'company' }">
+                            <li><NuxtLink to="/company/intro">회사소개</NuxtLink></li>
+                            <li><NuxtLink to="/company/history">회사연혁</NuxtLink></li>
+                            <li><NuxtLink to="/company/partners">협력업체</NuxtLink></li>
+                            <li><NuxtLink to="/company/catalog">회사소개자료</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div @click="toggleAccordion('products')" :class="{ 'active': activeAccordion === 'products' }">
+                            Products<i class="ico"></i>
+                        </div>
+                        <ul :class="{ 'active': activeAccordion === 'products' }">
+                            <li><NuxtLink to="/products/materials">Materials</NuxtLink></li>
+                            <li><NuxtLink to="/products/solutions">Solutions</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div @click="toggleAccordion('technology')" :class="{ 'active': activeAccordion === 'technology' }">
+                            Technology<i class="ico"></i>
+                        </div>
+                        <ul :class="{ 'active': activeAccordion === 'technology' }">
+                            <li><NuxtLink to="/technology/facilities">시설</NuxtLink></li>
+                            <li><NuxtLink to="/technology/patents">특허 / 인증</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div @click="toggleAccordion('media')" :class="{ 'active': activeAccordion === 'media' }">
+                            Media<i class="ico"></i>
+                        </div>
+                        <ul :class="{ 'active': activeAccordion === 'media' }">
+                            <li><NuxtLink to="/media/news">환경뉴스</NuxtLink></li>
+                            <li><NuxtLink to="/media/press">보도자료</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div @click="toggleAccordion('contact')" :class="{ 'active': activeAccordion === 'contact' }">
+                            Contact<i class="ico"></i>
+                        </div>
+                        <ul :class="{ 'active': activeAccordion === 'contact' }">
+                            <li><NuxtLink to="/contact/notice">공지사항</NuxtLink></li>
+                            <li><NuxtLink to="/contact/faq">FAQ</NuxtLink></li>
+                            <li><NuxtLink to="/contact/support">고객센터</NuxtLink></li>
+                            <li><NuxtLink to="/contact/location">오시는길</NuxtLink></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="mobile--lang--wrap">
+                <div class="lang--wrap" :class="{ 'active': isLangOpen2 }" @click="toggleLang2" ref="langWrap2">
+                    <i class="ico"></i>
+                    <p>KR</p>
+                    <ul class="select--wrap">
+                        <li>Arabic</li>
+                        <li>Chinese (Simplified)</li>
+                        <li>Chinese (Traditional)</li>
+                        <li>English</li>
+                        <li>Esperanto</li>
+                        <li>French</li>
+                    </ul>
+                </div>
             </div>
         </div>
     </header>
@@ -66,29 +138,62 @@ import { ref, onMounted, onUnmounted } from 'vue'
 
 const isScrolled = ref(false)
 const isLangOpen = ref(false)
+const isLangOpen2 = ref(false)
+const isMobileMenuOpen = ref(false)
+const activeAccordion = ref(null)
 const langWrap = ref(null)
+const langWrap2 = ref(null)
 
 const handleScroll = () => {
-  isScrolled.value = window.scrollY > 0
+  // 모바일 메뉴가 열려있으면 스크롤 위치와 상관없이 white 클래스 유지
+  if (isMobileMenuOpen.value) {
+    isScrolled.value = true
+  } else {
+    isScrolled.value = window.scrollY > 0
+  }
 }
 
 const toggleLang = () => {
   isLangOpen.value = !isLangOpen.value
 }
 
+const toggleLang2 = () => {
+  isLangOpen2.value = !isLangOpen2.value
+}
+
+const toggleMobileMenu = () => {
+  isMobileMenuOpen.value = !isMobileMenuOpen.value;
+}
+
+const toggleAccordion = (section) => {
+  if (activeAccordion.value === section) {
+    activeAccordion.value = null
+  } else {
+    activeAccordion.value = section
+  }
+}
+
 const handleClickOutside = (event) => {
   if (langWrap.value && !langWrap.value.contains(event.target)) {
     isLangOpen.value = false
   }
 }
 
+const handleClickOutside2 = (event) => {
+  if (langWrap2.value && !langWrap2.value.contains(event.target)) {
+    isLangOpen2.value = false
+  }
+}
+
 onMounted(() => {
   window.addEventListener('scroll', handleScroll)
   document.addEventListener('click', handleClickOutside)
+  document.addEventListener('click', handleClickOutside2)
 })
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll)
   document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('click', handleClickOutside2)
 })
 </script>

app/pages/contact/location.vue

@@ -20,28 +20,28 @@
           <p class="map"><i class="ico"></i>서울시 강남구 언주로 650 한국건설기술인협회 신관 2층 그린웨일글로벌 (06098)</p>
           <p class="call"><i class="ico"></i>02-3447-8801 ~ 8802</p>
           <div class="location--map">
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12658.81751592391!2d127.02545755395572!3d37.51488995282799!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca58e2a1fd187%3A0xc1499b8d314042e3!2z6re466aw7Juo7J286riA66Gc67KM!5e0!3m2!1sko!2skr!4v1758783859462!5m2!1sko!2skr" width="100%" height="360" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12658.81751592391!2d127.02545755395572!3d37.51488995282799!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca58e2a1fd187%3A0xc1499b8d314042e3!2z6re466aw7Juo7J286riA66Gc67KM!5e0!3m2!1sko!2skr!4v1758783859462!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>
         </div>
         <div class="location--wrap">
           <h4>베트남 지사</h4>
           <p class="map"><i class="ico"></i>GREEN WHALE GLOBAL VIET NAM CO., LTD. <br />Factory C_1B_C4_B & C_1B_C4_C, Lot C_1B_CN, My Phuoc 3 Industrial Park, Thoi Hoa Ward, Ho Chi Minh City, Vietnam</p>
           <div class="location--map">
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3914.9270000355136!2d106.64953687682507!3d11.11881475278132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3174cbf1e4323149%3A0x2e0d6ec6374c122!2sGREEN%20WHALE%20GLOBAL%20VN!5e0!3m2!1sko!2skr!4v1758784019302!5m2!1sko!2skr" width="100%" height="360" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3914.9270000355136!2d106.64953687682507!3d11.11881475278132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3174cbf1e4323149%3A0x2e0d6ec6374c122!2sGREEN%20WHALE%20GLOBAL%20VN!5e0!3m2!1sko!2skr!4v1758784019302!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>
         </div>
         <div class="location--wrap">
           <h4>미국 지사</h4>
           <p class="map"><i class="ico"></i>6940 Beach BLVD Suite D-705, Buena Park, CA 90621</p>
           <div class="location--map">
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3313.141775200663!2d-118.00045382288198!3d33.860236927841896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dd2beae3bac651%3A0xff71b496867d91ce!2s6940%20Beach%20Blvd%20Suite%20D-705%2C%20Buena%20Park%2C%20CA%2090621%20%EB%AF%B8%EA%B5%AD!5e0!3m2!1sko!2skr!4v1758784090236!5m2!1sko!2skr" width="100%" height="360" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3313.141775200663!2d-118.00045382288198!3d33.860236927841896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dd2beae3bac651%3A0xff71b496867d91ce!2s6940%20Beach%20Blvd%20Suite%20D-705%2C%20Buena%20Park%2C%20CA%2090621%20%EB%AF%B8%EA%B5%AD!5e0!3m2!1sko!2skr!4v1758784090236!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>
         </div>
         <div class="location--wrap">
           <h4>폴란드 지사</h4>
           <p class="map"><i class="ico"></i>Grzybowska 5A; 00-132 Warszawa </p>
           <div class="location--map">
-            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2443.361090190472!2d20.99811167761218!3d52.23682465715538!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc89aa175c97%3A0xd75cd4ed676d6904!2zR3J6eWJvd3NrYSA1QSwgMDAtMTMyIFdhcnN6YXdhLCDtj7TrnoDrk5w!5e0!3m2!1sko!2skr!4v1758784112008!5m2!1sko!2skr" width="100%" height="360" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2443.361090190472!2d20.99811167761218!3d52.23682465715538!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc89aa175c97%3A0xd75cd4ed676d6904!2zR3J6eWJvd3NrYSA1QSwgMDAtMTMyIFdhcnN6YXdhLCDtj7TrnoDrk5w!5e0!3m2!1sko!2skr!4v1758784112008!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
           </div>
         </div>
       </div>

public/img/ico--ham--arrow.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_3977" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_3977)">
+<path d="M12.0001 15.5248L6.3501 9.8498L7.4001 8.7998L12.0001 13.3998L16.6001 8.7998L17.6501 9.8498L12.0001 15.5248Z" fill="#1F2128"/>
+</g>
+</svg>

public/img/ico--ham--black.svg

@@ -0,0 +1,8 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_3917" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
+<rect width="28" height="28" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_3917)">
+<path d="M4.0835 8.16699V6.41699H23.9168V8.16699H4.0835ZM4.0835 21.5837V19.8337H23.9168V21.5837H4.0835ZM4.0835 14.8753V13.1253H23.9168V14.8753H4.0835Z" fill="#1F2128"/>
+</g>
+</svg>

public/img/ico--ham.svg

@@ -0,0 +1,8 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_65833" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
+<rect width="28" height="28" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_65833)">
+<path d="M4.08325 8.16699V6.41699H23.9166V8.16699H4.08325ZM4.08325 21.5837V19.8337H23.9166V21.5837H4.08325ZM4.08325 14.8753V13.1253H23.9166V14.8753H4.08325Z" fill="white"/>
+</g>
+</svg>