메인 반응형 완료

app/assets/scss/media.scss

@@ -5,6 +5,71 @@
     }
   }
   main{
+    .main--visual--wrap{
+      .main--swiper--wrap{
+        .main--swiper{
+          .visual--img{
+            .txt--wrap{
+              h2{
+                font-size: 40px;
+              }
+            }
+            .img--wrap{
+              img{
+                height: 80vh;
+              }
+            }
+          }
+        }
+      }
+    }
+    .main--content--wrap{
+      .swiper--container{
+        .title--wrap{
+          >h2{
+            font-size: 30px;
+          }
+        }
+      }
+      .main--container{
+        padding-left: 20px!important;
+        padding-right: 20px!important;
+        .title--wrap{
+          >h2{
+            font-size: 30px;
+          }
+        }
+        .content--wrap{
+          .img--card--wrap{
+            gap: 16px;
+            .card{
+              width: 33%;
+            }
+          }
+          .square--card--wrap{
+            gap: 16px;
+            .card{
+              width: calc((100% - 32px) / 3);
+              dt{
+                font-size: 20px;
+              }
+            }
+          }
+          .number--card--wrap{
+            .card{
+              padding: 0;
+              .card--title{
+                .number--wrap{
+                  .number{
+                    font-size: 50px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
     section{
       .sub--container{
         &.type3{
@@ -416,6 +481,178 @@
   }
 
   main {
+    .main--visual--wrap{
+      .main--swiper--wrap{
+        .main--swiper{
+          .visual--img{
+            .txt--wrap{
+              h2{
+                font-size: 32px;
+              }
+            }
+            .img--wrap{
+              img{
+                height: 520px;
+              }
+            }
+          }
+        }
+        .swiper--control--wrap{
+          .pagination--wrap{
+            .current{
+              font-size: 13px;
+            }
+            .total{
+              font-size: 13px;
+            }
+          }
+          .swiper--btn--wrap{
+            .swiper--btn--prev{
+              display: none;
+            }
+            .swiper--btn--next{
+              display: none;
+            }
+          }
+        }
+      }
+    }
+    .main--content--wrap{
+      .main--container{
+        padding: 50px 20px;
+        .title--wrap{
+          .green--title{
+            font-size: 16px;
+          }
+          .sub--title{
+            font-size: 16px;
+          }
+          >h2{
+            font-size: 22px;
+          }
+        }
+        .content--wrap{
+          .img--card--wrap{
+            gap: 12px;
+            flex-direction: column;
+            .card{
+              width: 100%;
+            }
+          }
+          .square--card--wrap{
+            gap: 12px;
+            .card{
+              width: 100%;
+              padding: 16px 20px;
+              min-height: 120px;
+              dt{
+                font-size: 18px;
+              }
+              dd{
+                font-size: 14px;
+              }
+            }
+          }
+          .number--card--wrap{
+            gap: 40px;
+            flex-direction: column;
+            .card{
+              width: 100%;
+              gap: 20px;
+              .ico{
+                width: 40px;
+                height: 40px;
+                background-size: 100%;
+              }
+              .card--title{
+                gap: 4px;
+                .circle{
+                  font-size: 14px;
+                  padding: 3px 8px;
+                }
+                .number--wrap{
+                  .number{
+                    font-size: 40px;
+                  }
+                  .percent{
+                    font-size: 40px;
+                  }
+                }
+                .sub--txt{
+                  font-size: 16px;
+                }
+              }
+              .card--desc{
+                li{
+                  .nation{
+                    font-size: 13px;
+                    line-height: 1.8;
+                  }
+                }
+              }
+            }
+          }
+          .news--card--wrap{
+            flex-direction: column;
+            .news{
+              width: 100%;
+              gap: 12px;
+              padding-top: 12px;
+              .news--title{
+                font-size: 18px;
+              }
+              .news--cont{
+                font-size: 14px;
+              }
+              .news--date{
+                font-size: 14px;
+              }
+            }
+          }
+        }
+      }
+      .swiper--container{
+        padding: 50px 0;
+        .title--wrap{
+          .green--title {
+            font-size: 16px;
+          }
+        
+          .sub--title {
+            font-size: 16px;
+          }
+        
+          >h2 {
+            font-size: 22px;
+            padding: 0 20px;
+          }
+        }
+        .item--swiper--wrap{
+          .item--swiper{
+            .item--img{
+              gap: 8px;
+            }
+          }
+        }
+        .marquee--wrap{
+          .marquee{
+            gap: 20px;
+            .logo--wrap{
+              width: 140px;
+              height: 84px;
+            }
+          }
+        }
+      }
+      .black--btn--wrap{
+        .black--btn{
+          width: 108px;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+        }
+      }
+    }
     section {
       &.map--section{
         padding: 0;

app/assets/scss/style.scss

@@ -441,6 +441,7 @@ main{
                     position: relative;
                     .txt--wrap{
                         width: 100%;
+                        padding: 20px;
                         text-align: center;
                         height: 100%;
                         display: flex;
@@ -601,6 +602,7 @@ main{
                         width: calc((100% - 40px) / 3);
                         padding: 20px 24px 60px 24px;
                         display: flex;
+                        align-self: stretch;
                         flex-direction: column;
                         gap: 8px;
                         border: 1px solid rgba(255, 255, 255, 0.30);

app/components/header.vue

@@ -69,10 +69,10 @@
                             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>
+                            <li><NuxtLink @click="closeMobileMenu" to="/company/intro">회사소개</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/company/history">회사연혁</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/company/partners">협력업체</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/company/catalog">회사소개자료</NuxtLink></li>
                         </ul>
                     </li>
                     <li>
@@ -80,8 +80,8 @@
                             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>
+                            <li><NuxtLink @click="closeMobileMenu" to="/products/materials">Materials</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/products/solutions">Solutions</NuxtLink></li>
                         </ul>
                     </li>
                     <li>
@@ -89,8 +89,8 @@
                             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>
+                            <li><NuxtLink @click="closeMobileMenu" to="/technology/facilities">시설</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/technology/patents">특허 / 인증</NuxtLink></li>
                         </ul>
                     </li>
                     <li>
@@ -98,8 +98,8 @@
                             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>
+                            <li><NuxtLink @click="closeMobileMenu" to="/media/news">환경뉴스</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/media/press">보도자료</NuxtLink></li>
                         </ul>
                     </li>
                     <li>
@@ -107,10 +107,10 @@
                             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>
+                            <li><NuxtLink @click="closeMobileMenu" to="/contact/notice">공지사항</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/contact/faq">FAQ</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/contact/support">고객센터</NuxtLink></li>
+                            <li><NuxtLink @click="closeMobileMenu" to="/contact/location">오시는길</NuxtLink></li>
                         </ul>
                     </li>
                 </ul>
@@ -173,6 +173,11 @@ const toggleAccordion = (section) => {
   }
 }
 
+const closeMobileMenu = () => {
+  isMobileMenuOpen.value = false
+  activeAccordion.value = null
+}
+
 const handleClickOutside = (event) => {
   if (langWrap.value && !langWrap.value.contains(event.target)) {
     isLangOpen.value = false

app/components/itemSlide.vue

@@ -8,7 +8,7 @@
         <h2 class="mb-[28px]">그린웨일글로벌의 친환경 바이오플라스틱을 통해 만든 <br />다양한 제품들을 소개합니다.</h2>
       </div>
       <div class="black--btn--wrap mb-[40px]">
-        <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
+        <NuxtLink class="black--btn" to="/products/materials">더보기<i class="ico"></i></NuxtLink>
       </div>
       <div class="item--swiper--wrap">
         <swiper
@@ -22,6 +22,22 @@
             delay: 2000,
             disableOnInteraction: false,
           }"
+          :breakpoints="{
+            '0': {
+              slidesPerView: 1.2,
+              centeredSlides: true,
+              slidesOffsetBefore: '0',
+            },
+            '768': {
+              slidesPerView: 3.1,
+              slidesOffsetBefore: '-0',
+            },
+            '1280': {
+              slidesPerView: 4,
+              spaceBetween: 20,
+              slidesOffsetBefore: '-50',
+            }
+          }"
           :modules="modules"
         >
           <swiper-slide class="item--img">

app/components/mainVisual.vue

@@ -21,15 +21,15 @@
         }"
       >
         <swiper-slide class="visual--img">
-          <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
+          <div class="txt--wrap"><h2>친환경산업의 <br class="mobile" />미래를 선도하는 <br>그린웨일글로벌</h2></div>
           <div class="img--wrap"><img src="/img/main1.png" /></div>
         </swiper-slide>
         <swiper-slide class="visual--img">
-          <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
+          <div class="txt--wrap"><h2>친환경산업의 <br class="mobile" />미래를 선도하는 <br>그린웨일글로벌</h2></div>
           <div class="img--wrap"><img src="/img/main2.png" /></div>
         </swiper-slide>
         <swiper-slide class="visual--img">
-          <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
+          <div class="txt--wrap"><h2>친환경산업의 <br class="mobile" />미래를 선도하는 <br>그린웨일글로벌</h2></div>
           <div class="img--wrap"><img src="/img/main3.png" /></div>
         </swiper-slide>
       </swiper>
@@ -69,7 +69,7 @@
 
   const onSwiper = (swiper) => {
     swiperInstance.value = swiper
-    totalSlides.value = document.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)').length
+    totalSlides.value = swiper.slides.filter(slide => !slide.classList.contains('swiper-slide-duplicate')).length
     swiper.on('slideChange', () => {
       currentSlide.value = swiper.realIndex + 1
     })

app/components/marqueeContent.vue

@@ -7,7 +7,7 @@
         </h3>
         <h2 class="mb-[28px]">국내외 주요 기업과 단체가 <br/> 그린웨일글로벌과 함께 하고 있습니다.</h2>
         <div class="black--btn--wrap mb-[40px]">
-          <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
+          <NuxtLink class="black--btn" to="/company/partners">더보기<i class="ico"></i></NuxtLink>
         </div>
       </div>
       <div class="marquee--wrap">

app/pages/index.vue

@@ -6,7 +6,7 @@
         <div class="title--wrap mb-[40px]">
           <h3 class="green--title">Brand Story</h3>
           <p class="sub--title">연간 4억톤 이상 폐기물이 버려져<br> 우리의 지구 환경에 많은 악영향을 주고 있습니다.</p>
-          <h2>그린웨일글로벌은 자연물질을 플라스틱으로 생성하여 <br>환경오염을 방지하는 신개념 친환경 미래를 만들어 갈 것입니다.</h2>
+          <h2>그린웨일글로벌은 자연물질을 <br class="mobile">플라스틱으로 생성하여 <br>환경오염을 방지하는 신개념 <br class="mobile">친환경 미래를 만들어 갈 것입니다.</h2>
         </div>
         <div class="content--wrap">
           <div class="img--card--wrap">
@@ -15,7 +15,7 @@
             <div class="card"><img src="/img/main--card3.png" alt="그린웨일글로벌"></div>
           </div>
           <div class="black--btn--wrap">
-            <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
+            <NuxtLink class="black--btn" to="/company/intro">더보기<i class="ico"></i></NuxtLink>
           </div>
         </div>
       </div>
@@ -24,7 +24,7 @@
       <div class="main--container">
         <div class="title--wrap mb-[40px]">
           <h3 class="green--title">Technology</h3>
-          <h2>그린웨일글로벌은 <br />자연에서 얻은 바이오매스를 독자적 기술로 친환경 소재로 바꾸어, <br />생분해성·재활용·바이오 플라스틱을 통해 <br />지구를 지키는 미래를 만들어갑니다.</h2>
+          <h2>그린웨일글로벌은 <br />자연에서 얻은 바이오매스를 <br class="mobile" />독자적 기술로 친환경 소재로 바꾸어, <br />생분해성·재활용·바이오 플라스틱을 통해 <br />지구를 지키는 미래를 만들어갑니다.</h2>
         </div>
         <div class="content--wrap">
           <div class="square--card--wrap">
@@ -50,7 +50,7 @@
             </dl>
           </div>
           <div class="black--btn--wrap">
-            <NuxtLink class="black--btn blur--type" to="/">더보기<i class="ico"></i></NuxtLink>
+            <NuxtLink class="black--btn blur--type" to="/technology/facilities">더보기<i class="ico"></i></NuxtLink>
           </div>
         </div>
       </div>
@@ -172,24 +172,24 @@
         </div>
         <div class="content--wrap">
           <div class="news--card--wrap">
-            <NuxtLink to="" class="news">
+            <NuxtLink to="/media/news" class="news">
               <h4 class="news--title">4천억 규모 녹색펀드 첫 투자 대상 선정. 친환경 플라스틱 '3개 1호' 달성</h4>
               <p class="news--cont">그린웨일글로벌은 환경부가 조성한 4000억원 규모의 '녹색인프라 해외수출 지원펀드'의 첫 투자 대상으로 선정됐다고 11일 밝혔다. 동시에 기술보증기금으로부터 친환경 플라스틱 소재 산 SFMK솔루션에서 진행중인 숙박업소 기반 스마트 커머스 플랫폼 누루GO(NURUGO)와 생분해성 친환경 소재 전문 기업 그린웨일글로벌(Green Whale Global)이 “누르고, 줄이고, 연결 </p>
               <span class="news--date">2025.07.11</span>
             </NuxtLink>
-            <NuxtLink to="" class="news">
+            <NuxtLink to="/media/news" class="news">
               <h4 class="news--title">SFMK솔루션 - 그린웨일글로벌, '누르고 줄이고 연결하다' 슬로건 아래 MOU 체결</h4>
               <p class="news--cont">SFMK솔루션에서 진행중인 숙박업소 기반 스마트 커머스 플랫폼 누루GO(NURUGO)와 생분해성 친환경 소재 전문 기업 그린웨일글로벌(Green Whale Global)이 “누르고, 줄이고, 연결하다' 슬로건 아래 MOU</p>
               <span class="news--date">2025.07.01</span>
             </NuxtLink>
-            <NuxtLink to="" class="news">
+            <NuxtLink to="/media/news" class="news">
               <h4 class="news--title">그린웨일글로벌, 실로암인더스트리와 친환경 제품 위탁생산 협약 체결 그린웨일글로벌, 실로암인더스트리와 친환경 제품 위탁생산 협약 체결</h4>
               <p class="news--cont">친환경 소재 전문기업 그린웨일글로벌(대표 윤태균)이 지난 15일, 시각장애인 근로자들의 고용안정과 친환경 산업 활성화를 위한 의미 있는 협력을 발표했다. 그린웨일글로벌은 실로암인더스트리와 어쩌고</p>
               <span class="news--date">2025.05.30</span>
             </NuxtLink>
           </div>
           <div class="black--btn--wrap">
-            <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
+            <NuxtLink class="black--btn" to="/media/news">더보기<i class="ico"></i></NuxtLink>
           </div>
         </div>
       </div>