인증서 프리뷰 모달 작업중

app/assets/scss/style.scss

@@ -19,6 +19,21 @@
         background-attachment: fixed;
         background-size: contain;
     }
+    &.products{
+        background: url(/img/top_ban_products.jpg) no-repeat;
+        background-attachment: fixed;
+        background-size: contain;
+    }
+    &.technology{
+        background: url(/img/top_ban_technology.jpg) no-repeat;
+        background-attachment: fixed;
+        background-size: contain;
+    }
+    &.media{
+        background: url(/img/top_ban_media.jpg) no-repeat;
+        background-attachment: fixed;
+        background-size: contain;
+    }
 }
 
 .header--wrap{
@@ -952,11 +967,298 @@ main{
                 margin-top: 80px;
                 .partners{
                     background-color: #f6f8ff;
-                    display: flex;
-                    height: 152px;
                     width: calc((100% - 60px) / 4);
                 }
             }
+            .catalog--wrap{
+                display: flex;
+                flex-direction: column;
+                gap: 80px;
+                margin-top: 80px;
+                .catalog{
+                    display: flex;
+                    gap: 80px;
+                    .img--wrap{
+                        min-width: 412px;
+                    }
+                    .download--wrap{
+                        display: flex;
+                        flex-direction: column;
+                        gap: 20px;
+                        justify-content: center;
+                        width: calc(100% - 492px);
+                        >p{
+                            color: #1f2128;
+                            font-size: 28px;
+                            font-weight: 800;
+                        }
+                        .btn--wrap{
+                            display: flex;
+                            gap: 8px;
+                            .download--btn{
+                                cursor: pointer;
+                                display: flex;
+                                gap: 8px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                padding: 8px 12px 8px 16px;
+                                border-radius: 24px;
+                                color: #fff;
+                                background-color: #1f2128;
+                                .ico{
+                                    width: 24px;
+                                    height: 24px;
+                                    background-image: url(/img/ico--download.svg);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .tab--wrap{
+                margin: 60px 0 80px;
+                display: flex;
+                justify-content: center;
+                gap: 12px;
+                a{
+                    line-height: 1;
+                    padding: 14px 32px;
+                    color: #78809b;
+                    font-size: 16px;
+                    font-weight: 700;
+                    border-radius: 24px;
+                    background-color: #eff1fb;
+                    &.active{
+                        color: #00a654;
+                        background-color: #fff;
+                        border: 1px solid #00A654;
+                    }
+                }
+            }
+            .materials--wrap{
+                display: flex;
+                flex-direction: column;
+                gap: 80px;
+                .materials--box{
+                    display: flex;
+                    gap: 80px;
+                    .img--wrap{
+                        min-width: 490px;
+                    }
+                    .desc--wrap{
+                        display: flex;
+                        flex-direction: column;
+                        gap: 16px;
+                        justify-content: center;
+                        >h4{
+                            color: #1f2128;
+                            font-size: 28px;
+                            font-weight: 800;
+                        }
+                        >h5{
+                            color: #00a654;
+                            font-size: 20px;
+                            font-weight: 700;
+                        }
+                        >ul{
+                            display: flex;
+                            flex-direction: column;
+                            gap: 8px;
+                            >li{
+                                color: #1f2128;
+                                font-size: 16px;
+                                font-weight: 400;
+                            }
+                        }
+                        .tag--wrap{
+                            display: flex;
+                            gap: 4px;
+                            span{
+                                background-color: #EFF1FB;
+                                color: #515973;
+                                padding: 3px 8px;
+                                font-weight: 500;
+                                font-size: 14px;
+                            }
+                        }
+                        .btn--wrap{
+                            margin-top: 16px;
+                            a{
+                                padding: 11px 12px 11px 16px;
+                                color: #1f2128;
+                                font-size: 14px;
+                                font-weight: 700;
+                                display: flex;
+                                gap: 8px;
+                                border-radius: 24px;
+                                width: fit-content;
+                                border: 1px solid #515973;
+                                .ico{
+                                    width: 20px;
+                                    height: 20px;
+                                    background-image: url(/img/ico--arrow.svg);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .life--cycle--wrap{
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+                margin-top: 80px;
+                .cycle{
+                    display: flex;
+                    gap: 20px;
+                    .img--wrap{
+                        position: relative;
+                        .txt{
+                            position: absolute;
+                            bottom: 0;
+                            width: 100%;
+                            padding: 20px;
+                            display: flex;
+                            gap: 4px;
+                            flex-direction: column;
+                            left: 0;
+                            span{
+                                color: #fff;
+                                font-weight: 800;
+                                font-size: 20px;
+                            }
+                            p{
+                                color: #fff;
+                                font-size: 20px;
+                                font-weight: 700;
+                            }
+                        }
+                    }
+                }
+            }
+            .patents--wrap{
+                .patents--list{
+                    display: flex;
+                    flex-wrap: wrap;
+                    column-gap: 20px;
+                    row-gap: 40px;
+                    .patents{
+                        background-color: transparent;
+                        cursor: pointer;
+                        padding: 0;
+                        display: flex;
+                        flex-direction: column;
+                        gap: 16px;
+                        width: calc((100% - 60px) / 4);
+                        .img--wrap{                            
+                            border: 1px solid #E0E4F2;
+                            img{
+                                width: 100%;
+                            }
+                        }
+                        h4{
+                            color: #1f2128;
+                            font-size: 16px;
+                            font-weight: 500;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 3;
+                            -webkit-box-orient: vertical;
+                        }
+                    }
+                }
+            }
+            .news--wrap{
+                margin-top: 80px;
+                .news--list{
+                    display: flex;
+                    flex-direction: column;
+                    border-top: 1px solid #1f2128;
+                    .news{
+                        display: flex;
+                        gap: 40px;
+                        justify-content: space-between;
+                        border-bottom: 1px solid #e0e4f2;
+                        transition: all 0.3s;
+                        padding: 20px 0;
+                        &:hover{
+                            background-color: #F6F8FF;
+                        }
+                        .news--title--wrap{
+                            display: flex;
+                            flex-direction: column;
+                            gap: 12px;
+                            h4{
+                                color: #1f2128;
+                                font-size: 20px;
+                                font-weight: 500;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                display: -webkit-box;
+                                -webkit-line-clamp: 2;
+                                -webkit-box-orient: vertical;
+                            }
+                            span{
+                                color: #515973;
+                                font-size: 16px;
+                                font-weight: 400;
+                            }
+                        }
+                        .news--thumb--wrap{
+                            width: 160px;
+                            height: 100px;
+                            min-width: 160px;
+                            img{
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                            }
+                        }
+                    }
+                }
+            }
+            .pagination--wrap{
+                margin-top: 48px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 8px;
+                >button{
+                    width: 28px;
+                    height: 28px;
+                    background-image: url(/img/ico--paging--arrow.svg);
+                    background-color: transparent;
+                    cursor: pointer;
+                    &.prev--btn{
+                        transform: rotate(180deg);
+                    }
+                }
+                .numbs{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 8px;
+                    button{
+                        cursor: pointer;
+                        color: #515973;
+                        font-size: 16px;
+                        font-weight: 500;
+                        background-color: transparent;
+                        border-radius: 50%;
+                        width: 28px;
+                        height: 28px;
+                        transition: all 0.3s;
+                        &:hover{
+                            background-color: #EFF1FB;
+                        }
+                        &.active{
+                            color: #fff;
+                            background-color: #00a654;
+                        }
+                    }
+                }
+            }
         }
     }
 }
@@ -1073,4 +1375,5 @@ main{
             }
         }
     }
-}
+}
+

app/components/header.vue

@@ -10,6 +10,7 @@
                             <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 class="menu--item">

app/pages/company/catalog.vue

@@ -0,0 +1,58 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">저희 회사에 대한 이해를 돕기 위해 <br /><strong>카탈로그와 회사 소개서를 준비했습니다.</strong></h2>
+        </div>
+        <div class="catalog--wrap">
+          <div class="catalog">
+            <div class="img--wrap">
+              <img src="/img/img--catalog1.png" alt="">
+            </div>
+            <div class="download--wrap">
+              <p>카탈로그 다운로드</p>
+              <div class="btn--wrap">
+                <UButton class="download--btn">한글<i class="ico"></i></UButton>
+                <UButton class="download--btn">영문<i class="ico"></i></UButton>
+                <UButton class="download--btn">폴란드어<i class="ico"></i></UButton>
+              </div>
+            </div>
+          </div>
+          <div class="catalog">
+            <div class="img--wrap">
+              <img src="/img/img--catalog2.png" alt="">
+            </div>
+            <div class="download--wrap">
+              <p>회사 소개서 다운로드</p>
+              <div class="btn--wrap">
+                <UButton class="download--btn">한글<i class="ico"></i></UButton>
+                <UButton class="download--btn">영문<i class="ico"></i></UButton>
+                <UButton class="download--btn">폴란드어<i class="ico"></i></UButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("company")
+const title = ref("Company")
+const navigation = ref([
+  { name: "Company",
+    link: "/company/catalog" ,
+    gnbList : [
+      { name: "회사소개", link: "/company/intro" },
+      { name: "회사연혁", link: "/company/history" },
+      { name: "협력업체", link: "/company/partners" },
+      { name: "회사소개자료", link: "/company/catalog"}
+    ]
+  },
+  { name: "회사소개자료", link: "/company/catalog" }
+])
+</script>

app/pages/company/history.vue

@@ -420,7 +420,8 @@ const navigation = ref([
     gnbList : [
       { name: "회사소개", link: "/company/intro" },
       { name: "회사연혁", link: "/company/history" },
-      { name: "협력업체", link: "/company/partners" }
+      { name: "협력업체", link: "/company/partners" },
+      { name: "회사소개자료", link: "/company/catalog"}
     ]
   },
   { name: "회사연혁", link: "/company/history" }

app/pages/company/intro.vue

@@ -107,7 +107,8 @@ const navigation = ref([
     gnbList : [
       { name: "회사소개", link: "/company/intro" },
       { name: "회사연혁", link: "/company/history" },
-      { name: "협력업체", link: "/company/partners" }
+      { name: "협력업체", link: "/company/partners" },
+      { name: "회사소개자료", link: "/company/catalog"}
     ]
   },
   { name: "회사소개", link: "/company/intro" }

app/pages/company/partners.vue

@@ -7,7 +7,108 @@
           <h2 class="title">그린웨일글로벌과 함께 하고 있는 <br /><strong>파트너들을 소개합니다.</strong></h2>
         </div>
         <div class="partners--wrap">
-          <div class="partners"></div>
+          <div class="partners">
+            <img src="/img/logo--partners1.svg" alt="HYUNDAI">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners2.svg" alt="CJ HDC biosol">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners3.svg" alt="SHINSEGAE">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners4.svg" alt="OJC">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners5.svg" alt="OTTERBOX">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners6.svg" alt="emis">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners7.svg" alt="LG디스플레이">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners8.svg" alt="MARIBUMI Starchtech">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners9.svg" alt="VINAMILK">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners10.svg" alt="금강종합산업">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners11.svg" alt="Gong cha">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners12.svg" alt="EENK">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners13.svg" alt="Peace">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners14.svg" alt="easyGreen">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners15.svg" alt="acecook">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners16.svg" alt="cocospack">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners17.svg" alt="rapportlabs">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners18.svg" alt="asill">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners19.svg" alt="rohto">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners20.svg" alt="wonlim">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners21.svg" alt="DHL Express">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners22.svg" alt="STAND OIL">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners23.svg" alt="posco international">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners24.svg" alt="musinsa">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners25.svg" alt="trim mate">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners26.svg" alt="polifolia">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners27.svg" alt="daehyun">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners28.svg" alt="queenit">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners29.svg" alt="투디엠">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners30.svg" alt="SBGlobal">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners31.svg" alt="han thuy company">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners32.svg" alt="top run total solution">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners33.svg" alt="open yy">
+          </div>
+          <div class="partners">
+            <img src="/img/logo--partners34.svg" alt="사회복지법인 실로암시각장애인복지회">
+          </div>
         </div>
       </div>
     </section>
@@ -24,7 +125,8 @@ const navigation = ref([
     gnbList : [
       { name: "회사소개", link: "/company/intro" },
       { name: "회사연혁", link: "/company/history" },
-      { name: "협력업체", link: "/company/partners" }
+      { name: "협력업체", link: "/company/partners" },
+      { name: "회사소개자료", link: "/company/catalog"}
     ]
   },
   { name: "협력업체", link: "/company/partners" }

app/pages/media/news.vue

@@ -0,0 +1,134 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">친환경 플라스틱과 관련한 <br />
+            <strong>새로운 소식들을 전해드립니다.</strong></h2>
+        </div>
+        <div class="news--wrap">
+          <div class="news--list">
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--news.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+            <NuxtLink to="/" class="news">
+              <div class="news--title--wrap">
+                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
+                <span>2025.07.11</span>
+              </div>
+              <div class="news--thumb--wrap">
+                <img src="/img/img--cycle--center.png" alt="">
+              </div>
+            </NuxtLink>
+          </div>
+          <div class="pagination--wrap">
+            <UButton class="prev--btn" disabled></UButton>
+            <div class="numbs">
+              <UButton class="active">1</UButton>
+              <UButton>2</UButton>
+              <UButton>3</UButton>
+              <UButton>4</UButton>
+              <UButton>5</UButton>
+            </div>
+            <UButton class="next--btn"></UButton>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("media")
+const title = ref("Media")
+const navigation = ref([
+  { name: "Media",
+    link: "/media/news" ,
+    gnbList : [
+      { name: "환경뉴스", link: "/media/news" },
+      { name: "보도자료", link: "/media/press" },
+    ]
+  },
+  { name: "환경뉴스", link: "/media/news" }
+])
+</script>

app/pages/media/press.vue

@@ -0,0 +1,99 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">그린웨일글로벌은 까다롭기로 유명한 <br />
+            <strong>친환경 플라스틱 관련 미국 특허 및 유럽 인증을 획득</strong>하여 <br />그 기술력을 입증받았습니다.</h2>
+        </div>
+        <div class="tab--wrap">
+          <NuxtLink to="/" class="active">전체</NuxtLink>
+          <NuxtLink to="/" class="">특허증</NuxtLink>
+          <NuxtLink to="/" class="">인증서</NuxtLink>
+          <NuxtLink to="/" class="">성적서</NuxtLink>
+          <NuxtLink to="/" class="">MSD&TDS</NuxtLink>
+        </div>
+        <div class="patents--wrap">
+          <div class="patents--list">
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>플라스틱 감축 소재 인증서</h4>
+            </div>
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>Korea Eco-Label EL724 Certificate: Biodegradable Resin & Products</h4>
+            </div>
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>플라스틱 감축 소재 인증서</h4>
+            </div>
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>플라스틱 감축 소재 인증서</h4>
+            </div>
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>Korea Eco-Label EL724 Certificate: Biodegradable Resin & Products</h4>
+            </div>
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>플라스틱 감축 소재 인증서</h4>
+            </div>
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>플라스틱 감축 소재 인증서</h4>
+            </div>
+            <div class="patents">
+              <div class="img--wrap">
+                <img src="/img/img--patents.png" alt="">
+              </div>
+              <h4>플라스틱 감축 소재 인증서</h4>
+            </div>
+          </div>
+          <div class="pagination--wrap">
+            <UButton class="prev--btn" disabled></UButton>
+            <div class="numbs">
+              <UButton class="active">1</UButton>
+              <UButton>2</UButton>
+              <UButton>3</UButton>
+              <UButton>4</UButton>
+              <UButton>5</UButton>
+            </div>
+            <UButton class="next--btn"></UButton>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("technology")
+const title = ref("Technology")
+const navigation = ref([
+  { name: "Technology",
+    link: "/technology/patents" ,
+    gnbList : [
+      { name: "시설", link: "/technology/facilities" },
+      { name: "특허 / 인증", link: "/technology/patents" },
+    ]
+  },
+  { name: "특허 / 인증", link: "/technology/patents" }
+])
+</script>

app/pages/products/materials.vue

@@ -0,0 +1,101 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">그린 지구를 만드는 그린웨일글로벌의 <br />
+            <strong>탄소저감형 바이오 플라스틱 제품 및 서비스를 소개합니다.</strong></h2>
+        </div>
+        <div class="tab--wrap">
+          <NuxtLink to="/products/materials" class="active">Materials</NuxtLink>
+          <NuxtLink to="/products/solutions">Solutions</NuxtLink>
+        </div>
+        <div class="materials--wrap">
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--materials1.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Ecoist®-Terra</h4>
+              <h5>"자연으로 돌아가는 플라스틱"</h5>
+              <ul>
+                <li>자연 속에서 분해되는 생분해성 소재(PBAT, PLA, PHA 등)와 카사바 전분 기반 TPS를 컴파운딩한 소재로, 환경에 남지 않고 스스로 사라지는 친환경 대안입니다.
+                </li>
+                <li>농업, 식품, 일회용품 등에 적합합니다.</li>
+              </ul>
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--materials2.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Ecoist®-Revo</h4>
+              <h5>"되살아나는 플라스틱"</h5>
+              <ul>
+                <li>사용 후 버려진 플라스틱을 다시 살려낸 재활용 소재 기반 원료입니다.</li>
+                <li>PCR(Post-Consumer Recycled)과  바이오매스를 활용해 순수 플라스틱 사용량을 줄임으로써 탄소 배출을 줄이고 순환경제에 기여합니다.</li>
+              </ul>
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--materials3.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Ecoist®-Nova</h4>
+              <h5>"새로운 세대의 바이오 폴리머"</h5>
+              <ul>
+                <li>카사바, 사탕수수, 옥수수 등 식물에서 유래한 Bio-PE, Bio-PP 등으로 구성된 차세대 바이오 플라스틱입니다. </li>
+                <li>석유 기반 원료를 대체하면서 기존 플라스틱과 유사한 물성을 구현합니다.</li>
+              </ul>
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--materials4.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Ecoist®-Boost</h4>
+              <h5>"강화 & 성능 향상"</h5>
+              <ul>
+                <li>기초 바이오매스 소재인 TPS에 기능성 첨가제를 결합한 마스터배치입니다.</li>
+                <li>재활용 플라스틱의 물성을 보완하거나, 기존 제품에 탄소 저감 효과를 더할 수 있습니다.</li>
+              </ul>
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--materials5.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Halastic®</h4>
+              <h5>"세계 최초 할랄 인증 친환경 바이오플라스틱"</h5>
+              <ul>
+                <li>중동 지역 진출 제품들의 패키징 솔루션을 위해 세계 최초로 할랄 인증을 받은 소재를 개발하였습니다.</li>
+                <li>할라스틱은 식품·의료·생활·뷰티 산업 전반에서 이슬람 국가들의 종교적 가치는 물론, 글로벌 친환경 기준까지 충족하는 솔루션입니다.</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("products")
+const title = ref("Products")
+const navigation = ref([
+  { name: "Products",
+    link: "/products/materials" ,
+    gnbList : [
+      { name: "Materials", link: "/products/materials" },
+      { name: "Solutions", link: "/products/solutions" },
+    ]
+  },
+  { name: "Materials", link: "/products/materials" }
+])
+</script>

app/pages/products/solutions.vue

@@ -0,0 +1,157 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">그린 지구를 만드는 그린웨일글로벌의 <br />
+            <strong>탄소저감형 바이오 플라스틱 제품 및 서비스를 소개합니다.</strong></h2>
+        </div>
+        <div class="tab--wrap">
+          <NuxtLink to="/products/materials">Materials</NuxtLink>
+          <NuxtLink to="/products/solutions" class="active">Solutions</NuxtLink>
+        </div>
+        <div class="materials--wrap">
+          <div class="materials--box">
+            <div class="desc--wrap">
+              <h4>Ecoist®-Terra</h4>
+              <h5>"자연으로 돌아가는 플라스틱"</h5>
+              <ul>
+                <li>자연 속에서 분해되는 생분해성 소재(PBAT, PLA, PHA 등)와 카사바 전분 기반 TPS를 컴파운딩한 소재로, 환경에 남지 않고 스스로 사라지는 친환경 대안입니다.
+                </li>
+                <li>농업, 식품, 일회용품 등에 적합합니다.</li>
+              </ul>
+              <div class="tag--wrap">
+                <span>#사출</span>
+                <span>#압출</span>
+              </div>
+              <div class="btn--wrap">
+                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--solutions1.png" alt="">
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--solutions2.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Health & Pharmaceutical</h4>
+              <h5>"건강을 위한 선택에도 친환경이 함께합니다"</h5>
+              <ul>
+                <li>건강기능식품 용기, 약통, 영양제 케이스, 보건용 패키징
+                </li>
+                <li>인체와 환경에 안전한 바이오 기반 소재로, 의료·건강 제품의 신뢰도를 높이는 친환경 대안을 제시합니다.</li>
+              </ul>
+              <div class="tag--wrap">
+                <span>#사출</span>
+                <span>#압출</span>
+              </div>
+              <div class="btn--wrap">
+                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
+              </div>
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="desc--wrap">
+              <h4>Food & Beverage</h4>
+              <h5>"매일 버려지는 것을 자연으로 되돌립니다"</h5>
+              <ul>
+                <li>빨대, 커틀러리, 식품 용기, 트레이, 피자 세이버, 과일 포장실망</li>
+                <li>음식과 함께 사라지는 생분해성 소재로, 일회용 플라스틱 사용을 최소화합니다.</li>
+              </ul>
+              <div class="tag--wrap">
+                <span>#사출</span>
+                <span>#압출</span>
+              </div>
+              <div class="btn--wrap">
+                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--solutions3.png" alt="">
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--solutions4.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Household & Smart Living</h4>
+              <h5>"생활의 모든 순간을 친환경으로 바꿉니다"</h5>
+              <ul>
+                <li>문구류, 반려동물 배변 봉투, 페인트통, 부탄가스 캡, 멀칭필름, 모종 트레이, 가습기, 가전 포장재</li>
+                <li>일상용품부터 소형 가전까지, 생활 전반에 적용 가능한 친환경 소재로 폐기물을 줄이고 지속가능한 라이프스타일을 만듭니다.</li>
+              </ul>
+              <div class="tag--wrap">
+                <span>#사출</span>
+                <span>#압출</span>
+              </div>
+              <div class="btn--wrap">
+                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
+              </div>
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="desc--wrap">
+              <h4>Electronics & Robotics</h4>
+              <h5>"기술의 진보에 자연을 담습니다"</h5>
+              <ul>
+                <li>전자기기 케이스, 리모컨 커버, 드론 외장재, 로봇 커버</li>
+                <li>고기능성이 요구되는 전자 및 로봇 분야에서도 탄소 저감과 내열성 등 기술적 요건을 충족하며 지속가능한 대안을 제시합니다.</li>
+              </ul>
+              <div class="tag--wrap">
+                <span>#사출</span>
+                <span>#압출</span>
+              </div>
+              <div class="btn--wrap">
+                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--solutions5.png" alt="">
+            </div>
+          </div>
+          <div class="materials--box">
+            <div class="img--wrap">
+              <img src="/img/img--solutions6.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <h4>Mobility & Construction</h4>
+              <h5>"이동과 공간, 모두 탄소를 줄입니다"</h5>
+              <ul>
+                <li>자동차 부품, 전기차 내장재, 단열재, 몰딩 부자재, 건축 완충 부품</li>
+                <li>모빌리티와 건축 산업 전반에 적용 가능한 고기능성 친환경 소재로, 제조현장의 탄소배출과 플라스틱 사용을 획기적으로 줄입니다.</li>
+              </ul>
+              <div class="tag--wrap">
+                <span>#사출</span>
+                <span>#압출</span>
+              </div>
+              <div class="btn--wrap">
+                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("products")
+const title = ref("Products")
+const navigation = ref([
+  { name: "Products",
+    link: "/products/solutions" ,
+    gnbList : [
+      { name: "Materials", link: "/products/materials" },
+      { name: "Solutions", link: "/products/solutions" },
+    ]
+  },
+  { name: "Solutions", link: "/products/solutions" }
+])
+</script>

app/pages/technology/facilities.vue

@@ -0,0 +1,82 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">그린웨일글로벌의 <br />
+            <strong>탄소 저감형 원료의 라이프 사이클을 소개합니다.</strong></h2>
+        </div>
+        <div class="life--cycle--wrap">
+          <div class="cycle">
+            <div class="img--wrap">
+              <img src="/img/img--cycle1.png" alt="">
+              <div class="txt">
+                <span>01</span>
+                <p>카사바와 옥수수를 재배 및 수확합니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle2.png" alt="">
+              <div class="txt">
+                <span>02</span>
+                <p>수확한 작물에서 레진을 제작합니다.</p>
+              </div>
+            </div>
+          </div>
+          <div class="cycle">
+            <div class="img--wrap">
+              <img src="/img/img--cycle6.png" alt="">
+              <div class="txt">
+                <span>06</span>
+                <p>청정한 흙 속에서 작물이 자라나는 선순환 고리가  만들어집니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle--center.png" alt="">
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle3.png" alt="">
+              <div class="txt">
+                <span>03</span>
+                <p>그린웨일글로벌만의 혁신기술로 친환경 플라스틱을 생산합니다.</p>
+              </div>
+            </div>
+          </div>
+          <div class="cycle">
+            <div class="img--wrap">
+              <img src="/img/img--cycle5.png" alt="">
+              <div class="txt">
+                <span>05</span>
+                <p>생분해성 플라스틱의 경우, 미생물이 친환경 플라스틱을 분해하여 청정하고 무해한 흙이 됩니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle4.png" alt="">
+              <div class="txt">
+                <span>04</span>
+                <p>사용이 다해진 제품은 매립되어 생분해가 되거나, 수거하여 재활용할 수 있습니다. 소각되더라도 순수 플라스틱 대비 현저하게 적은 탄소를 배출하며, 유해물질이 없습니다.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("technology")
+const title = ref("Technology")
+const navigation = ref([
+  { name: "Technology",
+    link: "/technology/facilities" ,
+    gnbList : [
+      { name: "시설", link: "/technology/facilities" },
+      { name: "특허 / 인증", link: "/technology/patents" },
+    ]
+  },
+  { name: "시설", link: "/technology/facilities" }
+])
+</script>

app/pages/technology/patents.vue

@@ -0,0 +1,62 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">그린웨일글로벌은 까다롭기로 유명한 <br />
+            <strong>친환경 플라스틱 관련 미국 특허 및 유럽 인증을 획득</strong>하여 <br />그 기술력을 입증받았습니다.</h2>
+        </div>
+        <div class="tab--wrap">
+          <NuxtLink to="/" class="active">전체</NuxtLink>
+          <NuxtLink to="/" class="">특허증</NuxtLink>
+          <NuxtLink to="/" class="">인증서</NuxtLink>
+          <NuxtLink to="/" class="">성적서</NuxtLink>
+          <NuxtLink to="/" class="">MSD&TDS</NuxtLink>
+        </div>
+        <div class="patents--wrap">
+          <div class="patents--list">
+            <UModal title="히이" close-ico>
+              <UButton class="patents">
+                <div class="img--wrap">
+                  <img src="/img/img--patents.png" alt="">
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template>
+                
+              </template>
+            </UModal>
+          </div>
+          <div class="pagination--wrap">
+            <UButton class="prev--btn" disabled></UButton>
+            <div class="numbs">
+              <UButton class="active">1</UButton>
+              <UButton>2</UButton>
+              <UButton>3</UButton>
+              <UButton>4</UButton>
+              <UButton>5</UButton>
+            </div>
+            <UButton class="next--btn"></UButton>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("technology")
+const title = ref("Technology")
+const navigation = ref([
+  { name: "Technology",
+    link: "/technology/patents" ,
+    gnbList : [
+      { name: "시설", link: "/technology/facilities" },
+      { name: "특허 / 인증", link: "/technology/patents" },
+    ]
+  },
+  { name: "특허 / 인증", link: "/technology/patents" }
+])
+</script>

package-lock.json

@@ -8,10 +8,10 @@
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/ui": "^3.3.4",
-        "gsap": "^3.13.0",
         "@vueup/vue-quill": "^1.2.0",
         "axios": "^1.12.2",
         "bootstrap": "^4.6.2",
+        "gsap": "^3.13.0",
         "jquery": "^3.7.1",
         "nuxt": "^4.1.2",
         "pretendard": "^1.3.9",

public/img/ico--arrow.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_66660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_66660)">
+<path d="M13.8558 10.625H3.75V9.375H13.8558L9.10898 4.62819L9.99998 3.75L16.25 9.99998L9.99998 16.25L9.10898 15.3718L13.8558 10.625Z" fill="#1F2128"/>
+</g>
+</svg>

public/img/ico--download.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_65217" 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_65217)">
+<path d="M4.5 20.5V19H19.5V20.5H4.5ZM12 16.6538L7.34625 12L8.4 10.9462L11.25 13.7963V3.5H12.75V13.7963L15.6 10.9462L16.6538 12L12 16.6538Z" fill="white"/>
+</g>
+</svg>

public/img/ico--paging--arrow.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_67345" 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_67345)">
+<path d="M12.0791 20.5961L10.8496 19.3666L16.2163 13.9999L10.8496 8.63327L12.0791 7.40381L18.6752 13.9999L12.0791 20.5961Z" fill="#515973"/>
+</g>
+</svg>

sh.exe.stackdump

@@ -0,0 +1,7 @@
+Stack trace:
+Frame     Function  Args
+00829A98  61008A48 (61258639, 612586ED, 00000000, 00000000)
+00829AB8  6109BC2F (612586ED, 00000001, 00000000, 00000000)
+00829AE8  6109BD70 (00829B24, 00829AF0, 00000000, 00000000)
+00829C88  6109D4AD (00000000, 00000000, 00000000, 00000000)
+End of stack trace