+ 머지 작업

app/assets/scss/media.scss

@@ -205,8 +205,10 @@
         }
         .patents--wrap{
           .patents--list{
+            column-gap: 16px;
             .patents{
               gap: 12px;
+              width: calc((100% - 48px) / 4);
               .img--wrap{
                 height: 300px;
               }
@@ -214,6 +216,9 @@
           }
         }
         .news--wrap{
+          >h3{
+            font-size: 24px;
+          }
           .news--list{
             .news{
               gap: 20px;
@@ -229,6 +234,9 @@
           }
         }
         .sns--wrap{
+          >h3{
+            font-size: 24px;
+          }
           .sns--list{
             gap: 16px;
             .sns{
@@ -302,6 +310,20 @@
             height: 300px;
           }
         }
+        .view--wrap {
+          .view--title{
+            >h3{
+              font-size: 28px;
+            }
+          }
+          .link--wrap{
+            .link{
+              >h5{
+                width: calc(100% - 200px);
+              }
+            }
+          }
+        }
       }
     }
   }
@@ -365,6 +387,12 @@
 }
 
 @media(max-width: 768px){
+  br{
+    &.mobile{
+      display: block!important;
+    }
+  }
+
   #top--visual {
     .inner--content {
       >h1 {
@@ -373,6 +401,11 @@
       nav {
         >ul{
           >li{
+            margin-right: 41px;
+            padding: 20px 0;
+            &::after{
+              right: -21px;
+            }
             a{
               font-size: 13px;
             }
@@ -384,14 +417,38 @@
 
   main {
     section {
+      &.map--section{
+        padding: 0;
+      }
+      &.vision--section{
+        background-attachment: scroll;
+        .sub--container{
+          padding: 50px 0 77px;
+        }
+      }
       &.mission--section {
+        gap: 40px;
+        padding: 50px 20px 0;
         .title--wrap {
+          flex-direction: column;
+          align-items: center;
+          gap: 16px;
+          text-align: center;
           .mission--title {
-            font-size: 30px;
+            font-size: 22px;
           }
 
           .mission--desc {
-            font-size: 20px;
+            font-size: 18px;
+          }
+        }
+        .mission--img--wrap{
+          gap: 8px;
+          margin-left: 0;
+          flex-wrap: wrap;
+          width: 100%;
+          .img--wrap{
+            width: calc(50% - 4px);
           }
         }
       }
@@ -400,70 +457,168 @@
         .sub--container {
           .title--wrap {
             .title {
-              font-size: 36px;
+              font-size: 24px;
             }
           }
         }
       }
+      &.values--section{
+        .sub--container{
+          padding: 50px 0;
+        }
+      }
 
       .sub--container {
-        padding-left: 20px !important;
-        padding-right: 20px !important;
+        padding: 50px 20px;
+
+        &.type2{
+          padding: 50px 20px 60px;
+        }
+        &.type3{
+          padding: 50px 20px 60px;
+        }
+        &.type4{
+          padding: 80px 20px 60px;
+        }
+
+        .pagination--wrap{
+          margin-top: 30px;
+          >button{
+            width: 24px;
+            height: 24px;
+            background-position: center;
+            background-size: 100%;
+          }
+          .numbs{
+            button{
+              font-size: 14px;
+            }
+          }
+        }
+
+        .tab--wrap{
+          gap: 8px;
+          margin: 28px 0 40px;
+          a{
+            padding: 11px 24px;
+            font-size: 14px;
+          }
+        }
 
         .title--wrap {
           .logo--wrap {
-            img {
-              width: 146px;
-            }
+            margin-bottom: 28px;
           }
 
           .title {
-            font-size: 30px;
+            font-size: 22px;
           }
 
           .sub--title {
-            font-size: 20px;
+            margin-top: 20px;
+            font-size: 16px;
+          }
+
+          .sub--title2{
+            font-size: 16px;
           }
         }
 
         .vision--wrap {
+          gap: 16px;
+          >span{
+            font-size: 16px;
+          }
           >p {
-            font-size: 30px;
+            font-size: 22px;
+          }
+        }
+
+        .product--img--wrap{
+          &.web{
+            display: none;
+          }
+          &.mobile{
+            display: flex;
+          }
+          gap: 12px;
+          .img--top{
+            gap: 12px;
+            flex-direction: column;
+            width: 100%;
+            img{
+              width: 100%;
+            }
+          }
+          .img--bot{
+            gap: 12px;
+            flex-direction: column;
+            width: 100%;
+            img{
+              width: 100%;
+            }
           }
         }
 
         .values--card--wrap {
+          flex-direction: column;
+          gap: 12px;
           .card {
+            width: 100%;
+            padding: 20px;
+            min-height: 172px;
+            .ico{
+              width: 36px;
+              height: 36px;
+              margin-bottom: 12px;
+              background-size: 100%;
+            }
             dt {
-              font-size: 20px;
+              font-size: 18px;
+              margin-bottom: 4px;
+            }
+            dd{
+              font-size: 14px;
             }
           }
         }
 
         .history--desc--wrap {
+          margin-top: 40px;
           .history--desc {
-            &.left--type {
-              padding-right: 0;
+            flex-direction: column;
+            margin-bottom: 40px;
+            gap: 20px;
+            &.right--type{
+              flex-direction: column-reverse;
             }
-
-            &.left--type2 {
-              padding-right: 0;
+            .desc--box--wrap{
+              flex-direction: column;
+              gap: 20px;
+              .desc--wrap{
+                width: 100%;
+              }
             }
 
-            &.right--type {
-              padding-left: 0;
+            .img--wrap{
+              min-width: 0!important;
+              width: 100%;
+              img{
+                width: 100%;
+              }
             }
 
             .desc--wrap {
+              gap: 16px;
               >p {
-                font-size: 18px !important;
+                font-size: 16px !important;
               }
             }
 
             .desc--box--wrap {
               .desc--wrap {
                 >div {
-                  font-size: 20px;
+                  font-size: 18px;
                 }
               }
             }
@@ -471,70 +626,107 @@
         }
 
         .history--graph--wrap {
+          flex-direction: column;
+          gap: 40px;
           .txt--wrap {
-            width: 35%;
-            min-width: 200px;
-            font-size: 30px;
+            width: 100%;
+            text-align: center;
+            min-width: 100%;
+            font-size: 22px;
           }
 
           .graph--wrap {
-            width: 65%;
+            width: 100%;
+            .graph--box{
+              gap: 20px;
+              .deco--box{
+                .dot{
+                  top: 9px;
+                }
+              }
+              .history--box{
+                padding-bottom: 40px;
+                width: calc(100% - 27px);
+                gap: 24px;
+                >ul{
+                  gap: 24px;
+                  >li{
+                    >div{
+                      flex-direction: column;
+                      gap: 8px;
+                      >span{
+                      }
+                    }
+                  }
+                }
+                .year{
+                  font-size: 20px;
+                }
+              }
+            }
+          }
+        }
 
+        .partners--wrap{
+          gap: 8px;
+          margin-top: 40px;
+          .partners{
+            width: calc(50% - 4px);
           }
         }
 
         .catalog--wrap {
-          gap: 40px;
-
+          margin-top: 40px;
           .catalog {
-            gap: 40px;
+            gap: 28px;
+            flex-direction: column;
 
             .img--wrap {
-              width: 50%;
-              min-width: 0;
+              width: 100%;
+              img{
+                width: 100%;
+              }
             }
 
             .download--wrap {
-              width: 50%;
-              gap: 18px;
+              width: 100%;
 
               >p {
-                font-size: 24px;
+                font-size: 20px;
               }
             }
           }
         }
 
         .materials--wrap {
+          gap: 40px;
           .materials--box {
-            gap: 40px;
+            gap: 20px;
+            flex-direction: column;
+
+            &.reverse{
+              flex-direction: column-reverse;
+            }
 
             .img--wrap {
-              width: 40%;
+              width: 100%;
               min-width: 0;
-
-              img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-              }
             }
 
             .desc--wrap {
-              width: 60%;
-              gap: 12px;
+              width: 100%;
 
               >h4 {
-                font-size: 24px;
+                font-size: 20px;
               }
 
               >h5 {
-                font-size: 18px;
+                font-size: 16px;
               }
 
               >ul {
                 >li {
-                  font-size: 15px;
+                  font-size: 14px;
                 }
               }
             }
@@ -542,73 +734,132 @@
         }
 
         .life--cycle--wrap {
-          gap: 16px;
-
-          .cycle {
-            gap: 16px;
-
+          margin-top: 40px;
+          .mobile--cycle{
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
             .img--wrap {
+              width: 100%;
+              position: relative;
+              img{
+                width: 100%;
+              }
               .txt {
+                position: absolute;
+                color: #fff;
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                bottom: 0;
+                left: 0;
+                width: 100%;
                 padding: 16px;
-
                 span {
                   font-size: 16px;
+                  font-weight: 800;
                 }
-
+  
                 p {
+                  font-weight: 700;
                   font-size: 16px;
                 }
               }
             }
           }
+          .cycle {
+            display: none;
+          }
         }
 
         .patents--wrap {
           .patents--list {
             .patents {
-              gap: 12px;
-
+              h4{
+                font-size: 14px;
+              }
               .img--wrap {
-                height: 300px;
+                height: 210px;
               }
             }
           }
         }
 
         .news--wrap {
+          >h3{
+            font-size: 20px;
+            margin-bottom: 12px;
+          }
+          margin-top: 40px;
           .news--list {
             .news {
               gap: 20px;
 
               .news--title--wrap {
+                justify-content: space-between;
                 h4 {
-                  font-size: 18px;
+                  font-size: 16px;
                 }
 
                 span {
-                  font-size: 15px;
+                  font-size: 14px;
                 }
               }
+              .news--thumb--wrap{
+                width: 80px;
+                height: 80px;
+                min-width: 80px;
+              }
             }
           }
         }
 
         .sns--wrap {
+          margin-top: 40px;
+          >h3{
+            margin-bottom: 12px;
+            font-size: 20px;
+          }
           .sns--list {
-            gap: 16px;
+            gap: 12px;
 
             .sns {
-              width: calc((100% - 48px) / 4);
+              width: calc((100% - 36px) / 4);
 
               .txt--wrap {
+                padding: 12px;
                 >h4 {
-                  font-size: 16px;
+                  font-size: 14px;
                 }
               }
 
               &:hover {
                 .txt--wrap {
-                  min-height: 110px;
+                  min-height: 100px;
+                }
+              }
+            }
+          }
+        }
+
+        .search--wrap{
+          margin: 32px 0 20px;
+          >button{
+            width: 108px;
+            padding-left: 12px;
+            padding-right: 40px;
+            font-size: 15px;
+          }
+          >div{
+            &.inline-flex{
+              width: calc(100% - 116px);
+              input{
+                width: 100%;
+                font-size: 15px;
+                padding-left: 12px;
+                padding-right: 40px;
+                &::placeholder{
+                  font-size: 15px;
                 }
               }
             }
@@ -618,49 +869,58 @@
         .notice--wrap {
           .notice--list {
             .notice {
-              gap: 40px;
-              padding: 20px;
-
+              gap: 12px;
+              flex-direction: column;
+              padding: 12px 0;
+              align-items: start;
               h4 {
-                font-size: 18px;
-                width: calc(100% - 180px);
+                font-size: 16px;
+                width: 100%;
               }
 
               .news--index {
-                font-size: 15px;
+                display: none;
               }
 
               .news--date {
-                font-size: 15px;
+                font-size: 14px;
               }
             }
           }
         }
 
         .faq--wrap {
+          margin-top: 40px;
           .border-default {
             .flex {
               >button {
-                padding: 20px;
+                padding: 20px 8px;
+
+                .iconify{
+                  width: 24px;
+                  height: 24px;
+                  background-size: 100%;
+                }
 
                 .text-start {
-                  font-size: 18px;
+                  font-size: 16px;
+                  padding-left: 28px;
 
                   &::before {
-                    font-size: 20px;
+                    font-size: 18px;
                   }
                 }
               }
             }
 
             .overflow-hidden {
-              padding: 20px 60px 20px 20px;
+              padding: 20px 40px 20px 8px;
 
               .text-sm {
-                font-size: 16px;
-
+                font-size: 14px;
+                padding-left: 28px;
                 &::before {
-                  font-size: 20px;
+                  font-size: 18px;
                 }
               }
             }
@@ -668,20 +928,81 @@
         }
 
         .location--wrap {
+          margin-bottom: 40px;
           h4 {
-            font-size: 24px;
+            font-size: 20px;
+            margin-bottom: 8px;
           }
 
           .map {
-            font-size: 15px;
+            font-size: 14px;
+            .ico{
+              width: 16px;
+              height: 16px;
+              background-size: 100%;
+            }
           }
 
           .call {
-            font-size: 15px;
+            font-size: 14px;
+            margin-top: 8px;
+            .ico {
+              width: 16px;
+              background-size: 100%;
+              height: 16px;
+            }
           }
 
           .location--map {
-            height: 300px;
+            height: 200px;
+            margin-top: 20px;
+          }
+        }
+
+        .view--wrap {
+          .view--title {
+            padding-bottom: 28px;
+            >h3 {
+              font-size: 24px;
+              margin-bottom: 12px;
+            }
+            .view--info{
+              flex-wrap: wrap;
+              row-gap: 4px;
+              .mobile{
+                display: none;
+              }
+              .bar{
+                margin: 0 8px;
+              }
+              >p{
+                font-size: 14px;
+                &:first-child{
+                  width: 100%;
+                }
+              }
+            }
+          }
+          .view--cont{
+            p{
+              font-size: 16px;
+            }
+          }
+
+          .view--cont{
+            margin-bottom: 28px;
+            padding: 28px 0;
+          }
+        
+          .link--wrap {
+            display: none;
+          }
+          .btn--wrap {
+            >a {
+              font-size: 14px;
+              width: 108px;
+              height: 40px;
+            }
           }
         }
       }
@@ -689,16 +1010,102 @@
   }
 
   #out--container {
+    padding-top: 50px;
+    padding-bottom: 60px;
     .out--container {
       .m--title {
-        font-size: 36px;
+        font-size: 24px;
+        margin-bottom: 30px;
       }
 
       .form--contents--wrap {
+        margin-top: 0;
+        padding-top: 28px;
+        gap: 20px;
+        .contact-form{
+          gap: 28px;
+        }
         .form--contents {
+          margin-bottom: 0;
+          input[type="text"], input[type="email"]{
+            font-size: 15px;
+          }
+          &.half--cont{
+            width: 100%;
+            max-width: 100%;
+          }
           h3 {
+            font-size: 15px;
             &.privacy--title {
-              font-size: 20px;
+              margin-bottom: 16px!important;
+            }
+          }
+          .qna--radio--group{
+            fieldset{
+              >div{
+                >div{
+                  &:nth-of-type(2){
+                    label{
+                      font-size: 15px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .tel-group{
+        button{
+          padding-left: 12px;
+          font-size: 15px;
+        }
+      }
+      .note-placeholder{
+        font-size: 15px;
+      }
+      .privacy-box{
+        .privacy-content{
+          padding: 16px 24px 16px 16px;
+          height: 240px;
+          font-size: 14px;
+          margin-bottom: 16px;
+        }
+        .agree-check{
+          flex-direction: column;
+          gap: 12px;
+          align-items: start;
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 540px){
+  main{
+    section{
+      .sub--container{
+        .tab--wrap{
+          &.patents{
+            width: calc(100% + 20px);
+            justify-content: start;
+            overflow-x: auto;
+          }
+        }
+        .patents--wrap{
+          .patents--list{
+            .patents{
+              width: calc(50% - 8px);
+            }
+          }
+        }
+        .sns--wrap{
+          .sns--list{
+            width: calc(100% + 20px);
+            overflow-x: auto;
+            .sns{
+              min-width: 128px;
+              width: 128px;
             }
           }
         }

app/assets/scss/style.scss

@@ -6,6 +6,12 @@ body{
     }
 }
 
+br{
+    &.mobile{
+        display: none!important
+    }
+}
+
 // 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;
@@ -959,6 +965,9 @@ main{
                 }
             }
             .product--img--wrap{
+                &.mobile{
+                    display: none;
+                }
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -1257,6 +1266,7 @@ main{
                 justify-content: end;
                 position: relative;
                 gap: 8px;
+                z-index: 1;
                 >button{
                     width: 120px;
                     box-shadow: none;
@@ -1373,6 +1383,9 @@ main{
                 }
             }
             .life--cycle--wrap{
+                .mobile--cycle{
+                    display: none;
+                }
                 display: flex;
                 flex-direction: column;
                 gap: 20px;
@@ -1433,8 +1446,10 @@ main{
                         h4{
                             color: #1f2128;
                             font-size: 16px;
+                            width: 100%;
                             font-weight: 500;
                             overflow: hidden;
+                            text-align: left;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 3;
@@ -1539,6 +1554,7 @@ main{
                         .news--date {
                             color: #515973;
                             font-size: 16px;
+                            white-space: nowrap;
                             font-weight: 400;
                         }
                     }

app/assets/scss/sub.scss

@@ -36,6 +36,7 @@
       bottom:0px;
       left:50%;
       transform: translateX(-50%);
+      z-index: 9;
       >ul{
         display: flex;
         align-items: center;
@@ -44,6 +45,7 @@
           position: relative;
           padding:24px 0px;
           margin-right:81px;
+          z-index: 8;
           
           &:last-child{
             margin-right:0px;
@@ -94,7 +96,7 @@
             top:60px;
             left:50%;
             transform: translateX(-50%);
-            background: #fff;            
+            background: #fff;
             box-shadow: 0 8px 16px 0 rgba(31, 33, 40, 0.12);
             padding:16px;
             max-height: 0;
@@ -102,7 +104,8 @@
             opacity: 0;
             visibility: hidden;
             transition: all 0.3s ease;
-
+            z-index: 10;
+            
             &.show {
               max-height: 200px;
               opacity: 1;
@@ -215,9 +218,12 @@
         select,
         textarea {
           width: 100%;
-          padding: 10px;          
+          padding: 10px 16px;          
           border-radius: 0px;
-          font-size: 14px;
+          font-size: 16px;
+          &::placeholder{
+            color: #b6bbcc;
+          }
         }
 
         h3 {
@@ -306,8 +312,9 @@
                     color:#B6BBCC;
                     font-size: 16px;
                     font-style: normal;
-                    font-weight: 400;                    
+                    font-weight: 400;
                     &.actv{
+                      font-weight: 500;                    
                       color:#1F2128;
                     }
                   }
@@ -322,11 +329,13 @@
     .tel-group {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 4px;
       button{
         height:40px;
         width:100%;
+        font-size: 16px;
         max-width:calc( (100% / 3) - 20px);
+        padding-left: 16px;
       }
       > div{
         width:100%;
@@ -387,11 +396,21 @@
         }
       }            
     }
+    .note-placeholder{
+      color: #b6bbcc;
+      padding: 16px;
+    }
+    .summernote-wrapper{
+      p{
+        margin-bottom: 0;
+      }
+    }
   }
 }
 
 
 
+
 // 라디오 디자인 초기화
 .agree-radio-group{
   fieldset{

app/pages/company/history.vue

@@ -12,7 +12,10 @@
         <div class="history--desc--wrap">
           <div class="history--desc left--type">
             <div class="img--wrap">
-              <img src="/img/img--history1.png" alt="" />
+              <picture>
+                <source media="(max-width: 768px)" srcset="/img/img--history1--mo.png">
+                <img src="/img/img--history1.png" alt="">
+              </picture>
             </div>
             <div class="desc--wrap">
               <p>
@@ -40,12 +43,18 @@
               </p>
             </div>
             <div class="img--wrap">
-              <img src="/img/img--history2.png" alt="" />
+              <picture>
+                <source media="(max-width: 768px)" srcset="/img/img--history2--mo.png">
+                <img src="/img/img--history2.png" alt="">
+              </picture>
             </div>
           </div>
           <div class="history--desc left--type2">
             <div class="img--wrap">
-              <img src="/img/img--history3.png" alt="" />
+              <picture>
+                <source media="(max-width: 768px)" srcset="/img/img--history3--mo.png">
+                <img src="/img/img--history3.png" alt="">
+              </picture>
             </div>
             <div class="desc--wrap">
               <p>
@@ -67,7 +76,10 @@
           </div>
           <div class="history--desc top--type">
             <div class="img--wrap">
-              <img src="/img/img--history4.png" alt="" />
+              <picture>
+                <source media="(max-width: 768px)" srcset="/img/img--history4--mo.png">
+                <img src="/img/img--history4.png" alt="">
+              </picture>
             </div>
             <div class="desc--box--wrap">
               <div class="desc--wrap">

app/pages/company/intro.vue

@@ -22,10 +22,7 @@
       <div class="sub--container">
         <div class="vision--wrap">
           <span>Vision</span>
-          <p>
-            모두 함께 보존하고 가꾸어 나아가야 할 <br />푸른빛 미래 환경에 기여하는 친환경
-            기업을 꿈꿉니다.
-          </p>
+          <p>모두 함께 보존하고 <br class="mobile" />가꾸어 나아가야 할 <br />푸른빛 미래 환경에 기여하는 <br class="mobile" />친환경 기업을 꿈꿉니다.</p>
         </div>
       </div>
     </section>
@@ -57,14 +54,9 @@
       <div class="sub--container">
         <div class="title--wrap">
           <h3 class="title">Production Facilities</h3>
-          <p class="sub--title2">
-            그린웨일 글로벌은 독자적으로 특허받은 친환경 소재 개발 기술과 이를 구현할
-            다양한 설비를 바탕으로, <br />차세대 바이오 플라스틱을 만들어갑니다. 또한
-            R&D에 특화된 역량을 바탕으로 글로벌 대기업과의 공동 개발이 가능하여,
-            <br />고객이 원하는 맞춤형 친환경 솔루션을 제공합니다.
-          </p>
+          <p class="sub--title2">그린웨일 글로벌은 독자적으로 특허받은 친환경 소재 개발 기술과 이를 구현할 다양한 설비를 바탕으로, <br />차세대 바이오 플라스틱을 만들어갑니다. <br class="mobile" />또한 R&D에 특화된 역량을 바탕으로 글로벌 대기업과의 공동 개발이 가능하여, <br />고객이 원하는 맞춤형 친환경 솔루션을 제공합니다.</p>
         </div>
-        <div class="product--img--wrap">
+        <div class="product--img--wrap web">
           <div class="img--top">
             <div class="img--wrap">
               <img src="/img/img--product1.png" alt="생산 시설" />
@@ -82,6 +74,24 @@
             </div>
           </div>
         </div>
+        <div class="product--img--wrap mobile">
+          <div class="img--top">
+            <div class="img--wrap">
+              <img src="/img/img--product1--mo.png" alt="생산 시설">
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--product2--mo.png" alt="생산 시설">
+            </div>
+          </div>
+          <div class="img--bot">
+            <div class="img--wrap">
+              <img src="/img/img--product3--mo.png" alt="생산 시설">
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--product4--mo.png" alt="생산 시설">
+            </div>
+          </div>
+        </div>
       </div>
     </section>
     <section class="values--section">

app/pages/contact/location.vue

@@ -4,17 +4,16 @@
     <section class="title--section">
       <div class="sub--container">
         <div class="title--wrap">
-          <h2 class="title">
-            그린웨일글로벌은 대한민국 <strong>서울</strong>에 본사를 두고 있으며
-            <br /><strong>베트남</strong>, <strong>미국</strong>,
-            <strong>폴란드</strong> 지사를 통해 글로벌 사업을 추진 중입니다.
-          </h2>
+          <h2 class="title">그린웨일글로벌은 <br class="mobile"/>대한민국 <strong>서울</strong>에 본사를 두고 있으며 <br /><strong>베트남</strong>, <strong>미국</strong>, <strong>폴란드</strong> 지사를 통해 <br class="mobile"/>글로벌 사업을 추진 중입니다.</h2>
         </div>
       </div>
     </section>
     <section class="map--section">
       <div class="map--wrap">
-        <img src="/img/img--location.svg" alt="" />
+        <picture>
+          <source media="(max-width: 768px)" srcset="/img/img--location--mo.svg">
+          <img src="/img/img--location.svg" alt="">
+        </picture>
       </div>
     </section>
     <section class="location--section">

app/pages/contact/noticeView.vue

@@ -7,7 +7,7 @@
             <h3>{{ noticeData.title }}</h3>
             <div class="view--info">
               <p>{{ noticeData.name }}</p>
-              <span class="bar"></span>
+              <span class="bar mobile"></span>
               <p>{{ noticeData.regdate }}</p>
               <span class="bar"></span>
               <p>조회수 : {{ noticeData.viewcnt }}</p>
@@ -20,20 +20,28 @@
             <NuxtLink to="/contact/notice">목록</NuxtLink>
           </div>
           <div class="link--wrap">
-            <NuxtLink v-if="prevData && prevData.board_idx" :to="`/contact/noticeView?idx=${prevData.board_idx}`" class="link">
+            <NuxtLink
+              v-if="prevData && prevData.board_idx"
+              :to="`/contact/noticeView?idx=${prevData.board_idx}`"
+              class="link"
+            >
               <p>이전글</p>
               <h5>{{ prevData.title }}</h5>
-              <span>{{ prevData.regdate || '-' }}</span>
+              <span>{{ prevData.regdate || "-" }}</span>
             </NuxtLink>
             <div v-if="!prevData || !prevData.board_idx" class="link">
               <p>이전글</p>
               <h5>이전글이 없습니다.</h5>
               <span>-</span>
             </div>
-            <NuxtLink v-if="nextData && nextData.board_idx" :to="`/contact/noticeView?idx=${nextData.board_idx}`" class="link">
+            <NuxtLink
+              v-if="nextData && nextData.board_idx"
+              :to="`/contact/noticeView?idx=${nextData.board_idx}`"
+              class="link"
+            >
               <p>다음글</p>
               <h5>{{ nextData.title }}</h5>
-              <span>{{ nextData.regdate || '-' }}</span>
+              <span>{{ nextData.regdate || "-" }}</span>
             </NuxtLink>
             <div v-if="!nextData || !nextData.board_idx" class="link">
               <p>다음글</p>
@@ -50,115 +58,118 @@
   </main>
 </template>
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-
-const route = useRoute()
-const idx = route.query.idx
-
-console.log("현재 라우트:", route)
-console.log("받은 idx:", idx)
-
-const loading = ref(true)
-const noticeData = ref({
-  title: '',
-  name: '',
-  regdate: '',
-  viewcnt: 0,
-  contents: ''
-})
-const nextData = ref(null)
-const prevData = ref(null)
-
-let scrollObserver = null
-
-// 공지사항 상세 데이터 가져오기
-const fetchNoticeDetail = async () => {
-  try {
-    loading.value = true
-    
-    const currentIdx = route.query.idx
-    if (!currentIdx) {
-      throw new Error('게시글 ID가 없습니다.')
+  import { ref, onMounted, onUnmounted, watch } from "vue";
+
+  const route = useRoute();
+  const idx = route.query.idx;
+
+  console.log("현재 라우트:", route);
+  console.log("받은 idx:", idx);
+
+  const loading = ref(true);
+  const noticeData = ref({
+    title: "",
+    name: "",
+    regdate: "",
+    viewcnt: 0,
+    contents: "",
+  });
+  const nextData = ref(null);
+  const prevData = ref(null);
+
+  let scrollObserver = null;
+
+  // 공지사항 상세 데이터 가져오기
+  const fetchNoticeDetail = async () => {
+    try {
+      loading.value = true;
+
+      const currentIdx = route.query.idx;
+      if (!currentIdx) {
+        throw new Error("게시글 ID가 없습니다.");
+      }
+
+      // POST 방식으로 파라미터 전달 (수정됨 - 2025-01-17)
+      console.log("POST 요청 전송 중:", { boardId: "notice", boardIdx: currentIdx });
+      const response = await $postForm("/board_view", {
+        boardId: "notice",
+        boardIdx: currentIdx,
+      });
+
+      console.log("받은 상세 데이터:", response);
+
+      if (response && response.success && response.view) {
+        noticeData.value = {
+          title: response.view.title || "",
+          name: response.view.name || "그린웨일글로벌(주)",
+          regdate: response.view.regdate || "",
+          viewcnt: response.view.viewcnt || 0,
+          contents: response.view.contents || "",
+        };
+
+        // 이전글/다음글 데이터
+        nextData.value = response.next;
+        prevData.value = response.prev;
+
+        console.log("nextData:", nextData.value);
+        console.log("prevData:", prevData.value);
+      } else {
+        throw new Error("게시글을 찾을 수 없습니다.");
+      }
+    } catch (error) {
+      console.error("공지사항 상세 데이터 로드 실패:", error);
+      alert("게시글을 불러올 수 없습니다.");
+      navigateTo("/contact/notice");
+    } finally {
+      loading.value = false;
     }
-    
-    // POST 방식으로 파라미터 전달 (수정됨 - 2025-01-17)
-    console.log('POST 요청 전송 중:', {boardId: 'notice', boardIdx: currentIdx})
-    const response = await $postForm('/board_view', {
-      boardId: 'notice', 
-      boardIdx: currentIdx
-    })
-    
-    console.log("받은 상세 데이터:", response)
-    
-    if (response && response.success && response.view) {
-      noticeData.value = {
-        title: response.view.title || '',
-        name: response.view.name || '그린웨일글로벌(주)',
-        regdate: response.view.regdate || '',
-        viewcnt: response.view.viewcnt || 0,
-        contents: response.view.contents || ''
+  };
+
+  // URL 파라미터 변경 감지를 위한 watcher 추가
+  watch(
+    () => route.query.idx,
+    (newIdx) => {
+      if (newIdx) {
+        fetchNoticeDetail();
       }
-      
-      // 이전글/다음글 데이터
-      nextData.value = response.next
-      prevData.value = response.prev
-      
-      console.log("nextData:", nextData.value)
-      console.log("prevData:", prevData.value)
-    } else {
-      throw new Error('게시글을 찾을 수 없습니다.')
     }
-  } catch (error) {
-    console.error('공지사항 상세 데이터 로드 실패:', error)
-    alert('게시글을 불러올 수 없습니다.')
-    navigateTo('/contact/notice')
-  } finally {
-    loading.value = false
-  }
-}
-
-// URL 파라미터 변경 감지를 위한 watcher 추가
-watch(() => route.query.idx, (newIdx) => {
-  if (newIdx) {
-    fetchNoticeDetail()
-  }
-})
-
-onMounted(() => {
-  // 데이터 로드
-  fetchNoticeDetail()
-  
-  // 헤더 스타일 처리
-  const header = document.querySelector('.header--wrap')
-  if (header) {
-    header.classList.add('white')
-
-    // MutationObserver로 클래스 변경 감지 및 방지
-    scrollObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          if (!header.classList.contains('white')) {
-            header.classList.add('white')
+  );
+
+  onMounted(() => {
+    // 데이터 로드
+    fetchNoticeDetail();
+
+    // 헤더 스타일 처리
+    const header = document.querySelector(".header--wrap");
+    if (header) {
+      header.classList.add("white");
+
+      // MutationObserver로 클래스 변경 감지 및 방지
+      scrollObserver = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && mutation.attributeName === "class") {
+            if (!header.classList.contains("white")) {
+              header.classList.add("white");
+            }
           }
-        }
-      })
-    })
-
-    scrollObserver.observe(header, {
-      attributes: true,
-      attributeFilter: ['class']
-    })
-  }
-})
-
-onUnmounted(() => {
-  const header = document.querySelector('.header--wrap')
-  if (header) {
-    header.classList.remove('white')
-  }
-
-  if (scrollObserver) {
-    scrollObserver.disconnect()
-  }
-})
-</script>
+        });
+      });
+
+      scrollObserver.observe(header, {
+        attributes: true,
+        attributeFilter: ["class"],
+      });
+    }
+  });
+
+  onUnmounted(() => {
+    const header = document.querySelector(".header--wrap");
+    if (header) {
+      header.classList.remove("white");
+    }
+
+    if (scrollObserver) {
+      scrollObserver.disconnect();
+    }
+  });
+</script>

app/pages/products/solutions.vue

@@ -14,17 +14,14 @@
           <NuxtLink to="/products/solutions" class="active">Solutions</NuxtLink>
         </div>
         <div class="materials--wrap">
-          <div class="materials--box">
+          <div class="materials--box reverse">
             <div class="desc--wrap">
-              <h4>Ecoist®-Terra</h4>
-              <h5>"자연으로 돌아가는 플라스틱"</h5>
+              <h4>Fashion & Cosmetics</h4>
+              <h5>"스타일과 아름다움에 지속가능함을 더합니다"</h5>
               <ul>
-                <li>
-                  자연 속에서 분해되는 생분해성 소재(PBAT, PLA, PHA 등)와 카사바 전분 기반
-                  TPS를 컴파운딩한 소재로, 환경에 남지 않고 스스로 사라지는 친환경
-                  대안입니다.
+                <li>의류 포장봉투, 옷걸이, 화장품 용기, 쿠션 케이스, 샴푸·스킨·로션 패키징
                 </li>
-                <li>농업, 식품, 일회용품 등에 적합합니다.</li>
+                <li>의류부터 뷰티 제품까지, 스타일을 표현하는 모든 제품에 자연으로 돌아가는 소재를 적용하여 플라스틱 폐기물을 줄이고 브랜드의 친환경 가치를 높입니다.</li>
               </ul>
               <div class="tag--wrap">
                 <span>#사출</span>
@@ -61,7 +58,7 @@
               </div>
             </div>
           </div>
-          <div class="materials--box">
+          <div class="materials--box reverse">
             <div class="desc--wrap">
               <h4>Food & Beverage</h4>
               <h5>"매일 버려지는 것을 자연으로 되돌립니다"</h5>
@@ -110,7 +107,7 @@
               </div>
             </div>
           </div>
-          <div class="materials--box">
+          <div class="materials--box reverse">
             <div class="desc--wrap">
               <h4>Electronics & Robotics</h4>
               <h5>"기술의 진보에 자연을 담습니다"</h5>

app/pages/technology/facilities.vue

@@ -68,6 +68,50 @@
               </div>
             </div>
           </div>
+          <div class="mobile--cycle">
+            <div class="img--wrap">
+              <img src="/img/img--cycle1--mo.png" alt="">
+              <div class="txt">
+                <span>01</span>
+                <p>카사바와 옥수수를 재배 및 수확합니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle2--mo.png" alt="">
+              <div class="txt">
+                <span>02</span>
+                <p>수확한 작물에서 레진을 제작합니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle3--mo.png" alt="">
+              <div class="txt">
+                <span>03</span>
+                <p>그린웨일글로벌만의 혁신기술로 친환경 플라스틱을 생산합니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle4--mo.png" alt="">
+              <div class="txt">
+                <span>04</span>
+                <p>사용이 다해진 제품은 매립되어 생분해가 되거나, 수거하여 재활용할 수 있습니다. 소각되더라도 순수 플라스틱 대비 현저하게 적은 탄소를 배출하며, 유해물질이 없습니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle5--mo.png" alt="">
+              <div class="txt">
+                <span>05</span>
+                <p>생분해성 플라스틱의 경우, 미생물이 친환경 플라스틱을 분해하여 청정하고 무해한 흙이 됩니다.</p>
+              </div>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--cycle6--mo.png" alt="">
+              <div class="txt">
+                <span>06</span>
+                <p>청정한 흙 속에서 작물이 자라나는 선순환 고리가  만들어집니다.</p>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </section>

app/pages/technology/patents.vue

@@ -10,12 +10,37 @@
             <br />그 기술력을 입증받았습니다.
           </h2>
         </div>
-        <div class="tab--wrap">
-          <a @click="filterByCategory('all')" :class="{ active: selectedCategory === 'all' }" href="javascript:void(0)">전체</a>
-          <a @click="filterByCategory('technology1')" :class="{ active: selectedCategory === 'technology1' }" href="javascript:void(0)">특허증</a>
-          <a @click="filterByCategory('technology2')" :class="{ active: selectedCategory === 'technology2' }" href="javascript:void(0)">인증서</a>
-          <a @click="filterByCategory('technology3')" :class="{ active: selectedCategory === 'technology3' }" href="javascript:void(0)">성적서</a>
-          <a @click="filterByCategory('technology4')" :class="{ active: selectedCategory === 'technology4' }" href="javascript:void(0)">MSD&TDS</a>
+        <div class="tab--wrap patents">
+          <a
+            @click="filterByCategory('all')"
+            :class="{ active: selectedCategory === 'all' }"
+            href="javascript:void(0)"
+            >전체</a
+          >
+          <a
+            @click="filterByCategory('technology1')"
+            :class="{ active: selectedCategory === 'technology1' }"
+            href="javascript:void(0)"
+            >특허증</a
+          >
+          <a
+            @click="filterByCategory('technology2')"
+            :class="{ active: selectedCategory === 'technology2' }"
+            href="javascript:void(0)"
+            >인증서</a
+          >
+          <a
+            @click="filterByCategory('technology3')"
+            :class="{ active: selectedCategory === 'technology3' }"
+            href="javascript:void(0)"
+            >성적서</a
+          >
+          <a
+            @click="filterByCategory('technology4')"
+            :class="{ active: selectedCategory === 'technology4' }"
+            href="javascript:void(0)"
+            >MSD&TDS</a
+          >
         </div>
         <div class="patents--wrap">
           <div class="patents--list">
@@ -39,6 +64,132 @@
                 </div>
               </template>
             </UModal>
+            <UModal
+              v-model:open="isModalOpen"
+              title="특허 / 인증 크게보기"
+              :close="false"
+            >
+              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
+                <div class="img--wrap">
+                  <img src="/img/top_ban_technology.jpg" alt="" />
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template #content>
+                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <div class="modal--img--container">
+                  <img :src="selectedImage" alt="" />
+                </div>
+              </template>
+            </UModal>
+            <UModal
+              v-model:open="isModalOpen"
+              title="특허 / 인증 크게보기"
+              :close="false"
+            >
+              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
+                <div class="img--wrap">
+                  <img src="/img/top_ban_technology.jpg" alt="" />
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template #content>
+                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <div class="modal--img--container">
+                  <img :src="selectedImage" alt="" />
+                </div>
+              </template>
+            </UModal>
+            <UModal
+              v-model:open="isModalOpen"
+              title="특허 / 인증 크게보기"
+              :close="false"
+            >
+              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
+                <div class="img--wrap">
+                  <img src="/img/top_ban_technology.jpg" alt="" />
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template #content>
+                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <div class="modal--img--container">
+                  <img :src="selectedImage" alt="" />
+                </div>
+              </template>
+            </UModal>
+            <UModal
+              v-model:open="isModalOpen"
+              title="특허 / 인증 크게보기"
+              :close="false"
+            >
+              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
+                <div class="img--wrap">
+                  <img src="/img/top_ban_technology.jpg" alt="" />
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template #content>
+                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <div class="modal--img--container">
+                  <img :src="selectedImage" alt="" />
+                </div>
+              </template>
+            </UModal>
+            <UModal
+              v-model:open="isModalOpen"
+              title="특허 / 인증 크게보기"
+              :close="false"
+            >
+              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
+                <div class="img--wrap">
+                  <img src="/img/top_ban_technology.jpg" alt="" />
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template #content>
+                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <div class="modal--img--container">
+                  <img :src="selectedImage" alt="" />
+                </div>
+              </template>
+            </UModal>
+            <UModal
+              v-model:open="isModalOpen"
+              title="특허 / 인증 크게보기"
+              :close="false"
+            >
+              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
+                <div class="img--wrap">
+                  <img src="/img/top_ban_technology.jpg" alt="" />
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template #content>
+                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <div class="modal--img--container">
+                  <img :src="selectedImage" alt="" />
+                </div>
+              </template>
+            </UModal>
+            <UModal
+              v-model:open="isModalOpen"
+              title="특허 / 인증 크게보기"
+              :close="false"
+            >
+              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
+                <div class="img--wrap">
+                  <img src="/img/top_ban_technology.jpg" alt="" />
+                </div>
+                <h4>플라스틱 감축 소재 인증서</h4>
+              </UButton>
+              <template #content>
+                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <div class="modal--img--container">
+                  <img :src="selectedImage" alt="" />
+                </div>
+              </template>
+            </UModal>
           </div>
           <div class="pagination--wrap">
             <UButton
@@ -77,7 +228,7 @@
   const loading = ref(true);
   const patentsData = ref([]);
   const totalCount = ref(0);
-  const selectedCategory = ref('all');
+  const selectedCategory = ref("all");
   const allPatentsData = ref([]); // 전체 데이터 저장용
   const navigation = ref([
     {
@@ -107,9 +258,9 @@
   const fetchAllPatents = async () => {
     try {
       loading.value = true;
-      const apis = ['technology1', 'technology2', 'technology3', 'technology4'];
+      const apis = ["technology1", "technology2", "technology3", "technology4"];
       let allData = [];
-      
+
       for (const api of apis) {
         const response = await $postForm(`/board_list/${api}`, {
           boardId: api,
@@ -117,7 +268,7 @@
           searchKind: "",
           searchKeyword: "",
         });
-        
+
         if (response && response.success && response.list) {
           const categoryName = getCategoryName(api);
           const categoryData = response.list.map((item, index) => ({
@@ -131,7 +282,7 @@
           allData = [...allData, ...categoryData];
         }
       }
-      
+
       patentsData.value = allData;
       totalCount.value = allData.length;
     } catch (error) {
@@ -186,12 +337,12 @@
   // 카테고리 이름 맵핑
   const getCategoryName = (apiName) => {
     const categoryMap = {
-      'technology1': '특허증',
-      'technology2': '인증서', 
-      'technology3': '성적서',
-      'technology4': 'MSD&TDS'
+      technology1: "특허증",
+      technology2: "인증서",
+      technology3: "성적서",
+      technology4: "MSD&TDS",
     };
-    return categoryMap[apiName] || '기타';
+    return categoryMap[apiName] || "기타";
   };
 
   // 기본 더미 데이터 설정
@@ -214,19 +365,19 @@
   const filterByCategory = async (category) => {
     selectedCategory.value = category;
     currentPage.value = 1;
-    
-    if (category === 'all') {
+
+    if (category === "all") {
       await fetchAllPatents();
     } else {
       await fetchPatentsByCategory(category);
     }
   };
 
-  // 페이지네이션 로직 
+  // 페이지네이션 로직
   const currentPage = ref(1);
   const itemsPerPage = 8;
   const backendPageSize = 20;
-  
+
   const totalPages = computed(() => Math.ceil(totalCount.value / itemsPerPage));
 
   const paginatedPatents = computed(() => {
@@ -238,7 +389,9 @@
   const needToFetchData = (targetPage) => {
     const startIndex = (targetPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage - 1;
-    return endIndex >= patentsData.value.length && patentsData.value.length < totalCount.value;
+    return (
+      endIndex >= patentsData.value.length && patentsData.value.length < totalCount.value
+    );
   };
 
   const goToPage = (page) => {