diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 37170a8b..92c9f8c8 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -1,652 +1,687 @@
 // background img
-.background-bord{
-    position: absolute;
-    top: 46px;
-    left: 0;
-    width: 100%;
-    height: 280px;
-    background: url(../../public/static/images/main/main_background.png)no-repeat center;
-    background-size: cover;
-    z-index: 0;
+.background-bord {
+  position: absolute;
+  top: 46px;
+  left: 0;
+  width: 100%;
+  height: 280px;
+  background: url(../../public/static/images/main/main_background.png) no-repeat center;
+  background-size: cover;
+  z-index: 0;
 }
 
 // main-wrap
-.main-contents{
-    position: relative;
-    z-index: 1;
-    padding-bottom: 15px;
+.main-contents {
+  position: relative;
+  z-index: 1;
+  padding-bottom: 15px;
 }
 
 // contents
-.store-id-wrap{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 33.5px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    background-color: rgba(255, 255, 255, 0.05);
-    .store-id-title{
-        position: relative;
-        padding-left: 32px;
-        font-size: 13px;
-        color: #fff;
-        &::before{
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 0;
-            transform: translateY(-50%);
-            width: 20px;
-            height: 20px;
-            background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
-        }
-    }
-    .store-arr{
-        display: block;
-        width: 7px;
-        height: 10px;
-        background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
-    }
-    .store-id-name{
-        font-size: 16px;
-        color: #fff;
-        font-weight: 600;
+.store-id-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 33.5px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: rgba(255, 255, 255, 0.05);
+  .store-id-title {
+    position: relative;
+    padding-left: 32px;
+    font-size: 13px;
+    color: #fff;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      background: url(../../public/static/images/main/id_icon.svg) no-repeat center;
     }
+  }
+  .store-arr {
+    display: block;
+    width: 7px;
+    height: 10px;
+    background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
+  }
+  .store-id-name {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 600;
+  }
 }
 
 // main-search-form
-.main-search-wrap{
+.main-search-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 45px 0;
+  .search-raido-wrap {
     display: flex;
     align-items: center;
-    justify-content: center;
-    padding: 45px 0;
-    .search-raido-wrap{
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        margin-right: 30px;
-    }
+    gap: 16px;
+    margin-right: 30px;
+  }
 }
-.search-input-box{
-    display: flex;
-    align-items: center;
-    width: 580px;
-    height: 45px;
-    border-radius: 100px;
-    padding: 0 20px;
-    border: 1px solid rgba(255, 255, 255, 0.30);
-    background: rgba(31, 31, 31, 0.30);
-    .main-search{
-        flex: 1;
-        height: 100%;
-        font-size: 13px;
-        color: #fff;
-        background-color: transparent;
-        outline: none;
-        border: none;
-        font-family: 'Noto Sans JP', sans-serif;
-    }
-    .search-icon{
-        width: 20px;
-        height: 100%;
-        background-image: url(../../public/static/images/main/main_search.svg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 21px 21px;
-    }
+.search-input-box {
+  display: flex;
+  align-items: center;
+  width: 580px;
+  height: 45px;
+  border-radius: 100px;
+  padding: 0 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(31, 31, 31, 0.3);
+  .main-search {
+    flex: 1;
+    height: 100%;
+    font-size: 13px;
+    color: #fff;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    font-family: 'Noto Sans JP', sans-serif;
+  }
+  .search-icon {
+    width: 20px;
+    height: 100%;
+    background-image: url(../../public/static/images/main/main_search.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 21px 21px;
+  }
 }
 
 // main-contents-inner
-.main-product-list-wrap{
-    max-width: 1400px;
-    margin: 0 auto;
-    .main-product-list{
+.main-product-list-wrap {
+  max-width: 1400px;
+  margin: 0 auto;
+  .main-product-list {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 24px;
+    .product-item {
+      display: flex;
+      flex-direction: column;
+      padding: 40px;
+      border-radius: 6px;
+      background: #fff;
+      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+      &.item01 {
+        flex: 1;
+        max-height: 400px;
+      }
+      &.item02 {
+        flex: none;
+        width: 451px;
+        max-height: 400px;
+      }
+      &.item03 {
+        flex: 1;
+      }
+      &.item04 {
+        flex: none;
+        width: 351px;
+      }
+      &.item05 {
+        flex: none;
+        width: 451px;
+      }
+      .product-item-title-wrap {
         display: flex;
-        gap: 24px;
-        margin-bottom: 24px;
-        .product-item{
+        align-items: center;
+        .product-item-title {
+          display: flex;
+          align-items: center;
+          font-size: 16px;
+          color: #101010;
+          font-weight: 600;
+          .item-logo {
+            display: block;
+            width: 40px;
+            height: 40px;
+            border-radius: 50px;
+            background: #14324f;
+            margin-right: 12px;
+            background-repeat: no-repeat;
+            background-size: 22px 22px;
+            background-position: center;
+            &.ico01 {
+              background-image: url(../../public/static/images/main/product_ico01.svg);
+            }
+            &.ico02 {
+              background-image: url(../../public/static/images/main/product_ico02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/main/product_ico03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/main/product_ico04.svg);
+            }
+            &.ico05 {
+              background-image: url(../../public/static/images/main/product_ico05.svg);
+            }
+          }
+        }
+        .more-btn {
+          display: block;
+          width: 20px;
+          height: 20px;
+          margin-left: auto;
+          background: url(../../public/static/images/main/more_btn.svg) no-repeat center;
+        }
+      }
+      .product-item-content {
+        margin-top: 30px;
+        overflow: hidden;
+        .recently-list {
+          .recently-item {
+            border: 1px solid #f2f2f2;
+            background-color: transparent;
+            padding: 29.9px 20px;
+            margin-bottom: 5px;
+            cursor: pointer;
+            .item-inner {
+              display: flex;
+              align-items: center;
+              span {
+                position: relative;
+                display: block;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+                padding: 0 10px;
+                &.time {
+                  padding-left: 22px;
+                  &::before {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 14px;
+                    height: 14px;
+                    background: url(../../public/static/images/main/clock.svg) no-repeat center;
+                    background-size: cover;
+                  }
+                }
+                &:after {
+                  content: '';
+                  position: absolute;
+                  top: 50%;
+                  right: 0;
+                  transform: translateY(-50%);
+                  width: 1px;
+                  height: 10px;
+                  background-color: #bbb;
+                }
+                &:last-child {
+                  &:after {
+                    display: none;
+                  }
+                }
+              }
+            }
+            &:last-child {
+              margin-bottom: 5px;
+            }
+          }
+        }
+        .notice-box {
+          height: 100%;
+          overflow-y: auto;
+          .notice-day {
+            font-size: 13px;
+            color: #666;
+            font-weight: 400;
+            margin-bottom: 7px;
+          }
+          .notice-title {
+            font-size: 14px;
+            color: #101010;
+            font-weight: 600;
+            margin-bottom: 25px;
+            line-height: 24px;
+            word-break: keep-all;
+          }
+          .notice-contents {
+            font-size: 12px;
+            color: #666;
+            font-weight: 400;
+            line-height: 22px;
+            span {
+              position: relative;
+              display: block;
+              padding-left: 10px;
+              &::before {
+                content: '';
+                position: absolute;
+                top: 10px;
+                left: 3px;
+                width: 3px;
+                height: 3px;
+                border-radius: 100%;
+                background-color: #666;
+              }
+            }
+          }
+          &::-webkit-scrollbar {
+            width: 4px; /* 스크롤바의 너비 */
+          }
+          &::-webkit-scrollbar-thumb {
+            background: #697c8f; /* 스크롤바의 색상 */
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent; /*스크롤바 뒷 배경 색상*/
+          }
+        }
+        .faq-item {
+          position: relative;
+          margin-bottom: 10px;
+          cursor: pointer;
+          .faq-item-inner {
             display: flex;
-            flex-direction: column;
-            padding: 40px;
-            border-radius: 6px;
-            background: #FFF;
-            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            &.item01{flex: 1; max-height: 400px;}
-            &.item02{flex: none; width: 451px; max-height: 400px;}
-            &.item03{flex: 1;}
-            &.item04{flex: none; width: 351px;}
-            &.item05{flex: none; width: 451px;}
-            .product-item-title-wrap{
-                display: flex;
-                align-items: center;
-                .product-item-title{
-                    display: flex;
-                    align-items: center;
-                    font-size: 16px;
-                    color: #101010;
-                    font-weight: 600;
-                    .item-logo{
-                        display: block;
-                        width: 40px;
-                        height: 40px;
-                        border-radius: 50px;
-                        background: #14324F;
-                        margin-right: 12px;
-                        background-repeat: no-repeat;
-                        background-size: 22px 22px;
-                        background-position: center;
-                        &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
-                        &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
-                        &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
-                        &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
-                        &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
-                    }
-                }
-                .more-btn{
-                    display: block;
-                    width: 20px;
-                    height: 20px;
-                    margin-left: auto;
-                    background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
-                }
+            align-items: center;
+
+            .faq-num {
+              flex: none;
+              padding: 7px 12.5px;
+              font-size: 13px;
+              color: #101010;
+              font-weight: 600;
+              border-radius: 110px;
+              border: 1px solid rgba(242, 242, 242, 0.95);
+              margin-right: 20px;
             }
-            .product-item-content{
-                margin-top: 30px;
-                overflow: hidden;
-                .recently-list{
-                    .recently-item{
-                        border: 1px solid #F2F2F2;
-                        background-color: transparent;
-                        padding: 29.9px 20px;
-                        margin-bottom: 5px;
-                        cursor: pointer;
-                        .item-inner{
-                            display: flex;
-                            align-items: center;
-                            span{
-                                position: relative;
-                                display: block;
-                                font-size: 13px;
-                                color: #101010;
-                                font-weight: 400;
-                                padding: 0 10px;
-                                &.time{
-                                    padding-left: 22px;
-                                    &::before{
-                                        content: '';
-                                        position: absolute;
-                                        top: 50%;
-                                        left: 0;
-                                        transform: translateY(-50%);
-                                        width: 14px;
-                                        height: 14px;
-                                        background:url(../../public/static/images/main/clock.svg)no-repeat center;
-                                        background-size: cover;
-                                    }
-                                }
-                                &:after{
-                                    content: '';
-                                    position: absolute;
-                                    top: 50%;
-                                    right: 0;
-                                    transform: translateY(-50%);
-                                    width: 1px;
-                                    height: 10px;
-                                    background-color: #BBB;
-                                }
-                                &:last-child{
-                                    &:after{
-                                        display: none;
-                                    }
-                                }
-                            }
-                        }
-                        &:last-child{
-                            margin-bottom: 5px;
-                        }
-                    }
-                }
-                .notice-box{
-                    height: 100%;
-                    overflow-y: auto;
-                    .notice-day{
-                        font-size: 13px;
-                        color: #666;
-                        font-weight: 400;
-                        margin-bottom: 7px;
-                    }
-                    .notice-title{
-                        font-size: 14px;
-                        color: #101010;
-                        font-weight: 600;
-                        margin-bottom: 25px;
-                        line-height: 24px;
-                        word-break: keep-all;
-                    }
-                    .notice-contents{
-                        font-size: 12px;
-                        color: #666;
-                        font-weight: 400;
-                        line-height: 22px;
-                        span{
-                            position: relative;
-                            display: block;
-                            padding-left: 10px;
-                            &::before{
-                                content: '';
-                                position: absolute;
-                                top: 10px;
-                                left: 3px;
-                                width: 3px;
-                                height: 3px;
-                                border-radius: 100%;
-                                background-color: #666;
-                            }
-                        }
-                    }
-                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
-                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
-                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
-                }
-                .faq-item{
-                    position: relative;
-                    margin-bottom: 10px;
-                    cursor: pointer;
-                    .faq-item-inner{
-                        display: flex;
-                        align-items: center;
-                        
-                        .faq-num{
-                            flex: none;
-                            padding: 7px 12.5px;
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 600;
-                            border-radius: 110px;
-                            border: 1px solid rgba(242, 242, 242, 0.95);
-                            margin-right: 20px;
-                        }
-                        .faq-title{
-                            width: 0;
-                            flex: 1 1 auto;
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 500;
-                            padding-right: 96px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
-                        .faq-day{
-                            position: absolute;
-                            top: 50%;
-                            right: 0;
-                            transform: translateY(-50%);
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 400;
-                        }
-                    }
-                    &:last-child{
-                        margin-bottom: 0;
-                    }
-                }
-                .data-download-wrap{
-                    width: 100%;
-                    .data-down{
-                        display: block;
-                        width: 100%;
-                        padding: 20px;
-                        text-align: left;
-                        border-radius: 4px;
-                        background-color: #697C8F;
-                        margin-bottom: 5px;
-                        transition: background .17s ease-in-out;
-                        span{
-                            position: relative;
-                            display: block;
-                            padding-right: 30px;
-                            font-size: 13px;
-                            color: #fff;
-                            font-weight: 400;
-                            &:after{
-                                content: '';
-                                position: absolute;
-                                top: 50%;
-                                right: 0;
-                                transform: translateY(-50%);
-                                width: 18px;
-                                height: 16px;
-                                background: url(../../public/static/images/main/download.svg)no-repeat center;
-                                background-size: cover;
-                            }
-                        }
-                        &:last-child{
-                            margin-bottom: 0;
-                        }
-                        &:hover{
-                            background-color: #859eb6;
-                        }
-                    }
-                }
-                .contact-info-list{
-                    padding: 25px 30px;
-                    border-radius: 4px;
-                    background-color: #F4F4F7;
-                    .info-item{
-                        display: flex;
-                        align-items: center;
-                        padding: 15px 0;
-                        border-bottom: 1px solid #fff;
-                        &:first-child{padding-top: 0;}
-                        &:last-child{padding-bottom: 0; border: none;}
-                        .icon-box{
-                            display: flex;
-                            margin-right: 12px;
-                        }
-                        .infor-data{
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 500;
-                        }
-                    }
-                }
+            .faq-title {
+              width: 0;
+              flex: 1 1 auto;
+              font-size: 13px;
+              color: #101010;
+              font-weight: 500;
+              padding-right: 96px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
             }
-        }
-        &:last-child{
+            .faq-day {
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              font-size: 13px;
+              color: #101010;
+              font-weight: 400;
+            }
+          }
+          &:last-child {
             margin-bottom: 0;
+          }
         }
+        .data-download-wrap {
+          width: 100%;
+          .data-down {
+            display: block;
+            width: 100%;
+            padding: 20px;
+            text-align: left;
+            border-radius: 4px;
+            background-color: #697c8f;
+            margin-bottom: 5px;
+            transition: background 0.17s ease-in-out;
+            span {
+              position: relative;
+              display: block;
+              padding-right: 30px;
+              font-size: 13px;
+              color: #fff;
+              font-weight: 400;
+              &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+                width: 18px;
+                height: 16px;
+                background: url(../../public/static/images/main/download.svg) no-repeat center;
+                background-size: cover;
+              }
+            }
+            &:last-child {
+              margin-bottom: 0;
+            }
+            &:hover {
+              background-color: #859eb6;
+            }
+          }
+        }
+        .contact-info-list {
+          padding: 25px 30px;
+          border-radius: 4px;
+          background-color: #f4f4f7;
+          .info-item {
+            display: flex;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid #fff;
+            &:first-child {
+              padding-top: 0;
+            }
+            &:last-child {
+              padding-bottom: 0;
+              border: none;
+            }
+            .icon-box {
+              display: flex;
+              margin-right: 12px;
+            }
+            .infor-data {
+              font-size: 13px;
+              color: #101010;
+              font-weight: 500;
+            }
+          }
+        }
+      }
     }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 // loginpage
-.login-wrap{
-    position: relative;
+.login-wrap {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: url(../../public/static/images/main/login_bg.png) no-repeat center;
+  background-size: cover;
+  .login-inner {
+    max-width: 500px;
     width: 100%;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    background: url(../../public/static/images/main/login_bg.png) no-repeat center;
-    background-size: cover;
-    .login-inner{
-        max-width: 500px;
-        width: 100%;
-        margin: 0 auto;
-        .login-logo{
-            display: block;
-            margin-bottom: 25px;
+    margin: 0 auto;
+    .login-logo {
+      display: block;
+      margin-bottom: 25px;
+    }
+    .login-input-frame {
+      padding: 40px 50px;
+      border-radius: 6px;
+      background: rgba(255, 255, 255, 0.97);
+      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+      .login-frame-tit {
+        font-size: 18px;
+        color: #364864;
+        font-weight: 400;
+        padding-bottom: 30px;
+        border-bottom: 1px solid #e5e9ef;
+        span {
+          display: block;
+          font-weight: 600;
+          margin-bottom: 5px;
         }
-        .login-input-frame{
-            padding: 40px 50px;
-            border-radius: 6px;
-            background: rgba(255, 255, 255, 0.97);
-            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            .login-frame-tit{
-                font-size: 18px;
-                color: #364864;
-                font-weight: 400;
-                padding-bottom: 30px;
-                border-bottom: 1px solid #E5E9EF;
-                span{
-                    display: block;
-                    font-weight: 600;
-                    margin-bottom: 5px;
-                }
-                &.pw-reset{
-                    font-size: 13px;
-                }
-            }
-            .login-input-wrap{
-                margin-top: 30px;
-                .login-area{
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    border: 1px solid #E5E9EF;
-                    height: 45px;
-                    padding-left: 40px;
-                    padding-right: 15px;
-                    margin-bottom: 15px;
-                    .login-input{
-                        flex: 1;
-                        height: 100%;
-                        background-color: transparent;
-                        font-size: 13px;
-                        font-weight: 400;
-                        color: #6c819c;
-                        &::placeholder{
-                            font-size: 13px;
-                            font-weight: 400;
-                            color: #D1D7E0;
-                        }
-                    }
-                    &::before{
-                        content: '';
-                        position: absolute;
-                        top: 50%;
-                        left: 15px;
-                        transform: translateY(-50%);
-                        width: 10px;
-                        height: 12px;
-                        background-size: cover;
-                    }
-                    button{
-                        width: 20px;
-                        height: 100%;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                    }
-                    &.id{
-                        &::before{
-                            background: url(../../public/static/images/main/login_id.svg)no-repeat center;
-                        }
-                        .id-delete{
-                            background-image: url(../../public/static/images/main/id_delete.svg);
-                            background-size: 17px 17px;
-                        }
-                    }
-                    &.email{
-                        &::before{
-                            background: url(../../public/static/images/main/login_email.svg)no-repeat center;
-                            width: 12px;
-                            height: 9px;
-                        }
-                        .id-delete{
-                            background-image: url(../../public/static/images/main/id_delete.svg);
-                            background-size: 17px 17px;
-                        }
-                    }
-                    &.password{
-                        margin-bottom: 20px;
-                        &::before{
-                            background: url(../../public/static/images/main/login_password.svg)no-repeat center;
-                        }
-                        .password-hidden{
-                            background-image: url(../../public/static/images/main/password_hidden.svg);
-                            background-size: 19px 13px;
-                            &.visible{
-                                background-image: url(../../public/static/images/main/password_visible.svg);
-                            }
-                        }
-                    }
-                }
-                .login-btn{
-                    display: block;
-                    width: 100%;
-                    height: 45px;
-                    background-color: #5C6773;
-                    color: #fff;
-                    font-size: 15px;
-                    font-weight: 600;
-                    border-radius: 4px;
-                    transition: background .15s ease-in-out;
-                    &:hover{
-                        background-color: #717e8d;
-                    }
-                    &.light{
-                        background-color: #fff;
-                        border: 1px solid #5C6773;
-                        color: #5C6773;
-                    }
-                }
-                .login-btn-box{
-                    margin-bottom: 20px;
-                }
-                .pwreset-btn-box{
-                    display: flex;
-                }
-                .reset-password{
-                    width: 100%;
-                    text-align: center;
-                    button{ 
-                        position: relative;
-                        font-size: 13px;
-                        color: #364864;
-                        font-weight: 400;
-                        padding-right: 16px;
-                        &::before{
-                            content: '';
-                            position: absolute;
-                            top: calc(50% + 1px);
-                            right: 0;
-                            transform: translateY(-50%);
-                            width: 6px;
-                            height: 8px;
-                            background: url(../../public/static/images/main/login-arr.svg)no-repeat center;
-                        }
-                    }
-                }
-            }
+        &.pw-reset {
+          font-size: 13px;
         }
-        .login-guide-wrap{
-            position: relative;
-            margin-left: 10px;
-            margin-top: 30px;
-            padding-left: 15px;
+      }
+      .login-input-wrap {
+        margin-top: 30px;
+        .login-area {
+          position: relative;
+          display: flex;
+          align-items: center;
+          border: 1px solid #e5e9ef;
+          height: 45px;
+          padding-left: 40px;
+          padding-right: 15px;
+          margin-bottom: 15px;
+          .login-input {
+            flex: 1;
+            height: 100%;
+            background-color: transparent;
             font-size: 13px;
-            color: #fff;
-            line-height: 24px;
-            a{
-                color: #fff;
-                font-weight: 600;
-                text-decoration: underline;
+            font-weight: 400;
+            color: #6c819c;
+            &::placeholder {
+              font-size: 13px;
+              font-weight: 400;
+              color: #d1d7e0;
             }
-            span{
-                position: absolute;
-                top: 0;
-                left: 0;
+          }
+          &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 15px;
+            transform: translateY(-50%);
+            width: 10px;
+            height: 12px;
+            background-size: cover;
+          }
+          button {
+            width: 20px;
+            height: 100%;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+          &.id {
+            &::before {
+              background: url(../../public/static/images/main/login_id.svg) no-repeat center;
             }
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
+          &.email {
+            &::before {
+              background: url(../../public/static/images/main/login_email.svg) no-repeat center;
+              width: 12px;
+              height: 9px;
+            }
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
+          &.password {
+            margin-bottom: 20px;
+            &::before {
+              background: url(../../public/static/images/main/login_password.svg) no-repeat center;
+            }
+            .password-hidden {
+              background-image: url(../../public/static/images/main/password_hidden.svg);
+              background-size: 19px 13px;
+              &.visible {
+                background-image: url(../../public/static/images/main/password_visible.svg);
+              }
+            }
+          }
         }
+        .login-btn {
+          display: block;
+          width: 100%;
+          height: 45px;
+          background-color: #5c6773;
+          color: #fff;
+          font-size: 15px;
+          font-weight: 600;
+          border-radius: 4px;
+          transition: background 0.15s ease-in-out;
+          &:hover {
+            background-color: #717e8d;
+          }
+          &.light {
+            background-color: #fff;
+            border: 1px solid #5c6773;
+            color: #5c6773;
+          }
+        }
+        .login-btn-box {
+          margin-bottom: 20px;
+        }
+        .pwreset-btn-box {
+          display: flex;
+        }
+        .reset-password {
+          width: 100%;
+          text-align: center;
+          button {
+            position: relative;
+            font-size: 13px;
+            color: #364864;
+            font-weight: 400;
+            padding-right: 16px;
+            &::before {
+              content: '';
+              position: absolute;
+              top: calc(50% + 1px);
+              right: 0;
+              transform: translateY(-50%);
+              width: 6px;
+              height: 8px;
+              background: url(../../public/static/images/main/login-arr.svg) no-repeat center;
+            }
+          }
+        }
+      }
     }
-    .login-copyright{
-        position: absolute;
-        bottom: 40px;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 11px;
+    .login-guide-wrap {
+      position: relative;
+      margin-left: 10px;
+      margin-top: 30px;
+      padding-left: 15px;
+      font-size: 13px;
+      color: #fff;
+      line-height: 24px;
+      a {
         color: #fff;
-        font-weight: 500;
+        font-weight: 600;
+        text-decoration: underline;
+      }
+      span {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
     }
+  }
+  .login-copyright {
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    color: #fff;
+    font-weight: 500;
+  }
 }
 
-.d-check-box{
-    &.login{
-        margin-bottom: 25px;
-        label{
-            padding-left: 20px;
-            color: #364864;
-            &:before{
-                width: 22px;
-                height: 22px;
-                top: -1px;
-                border-color: #A8B6C7;
-                border-radius: 3px;
-                transition: background .05s ease-in-out;
-            }
-        }
+.d-check-box {
+  &.login {
+    margin-bottom: 25px;
+    label {
+      padding-left: 20px;
+      color: #364864;
+      &:before {
+        width: 22px;
+        height: 22px;
+        top: -1px;
+        border-color: #a8b6c7;
+        border-radius: 3px;
+        transition: background 0.05s ease-in-out;
+      }
     }
-    input[type=checkbox]:checked + label::before{
-        border-color: #A8B6C7;
-        background-color: #A8B6C7;
+    input[type='checkbox']:checked + label::before {
+      border-color: #a8b6c7;
+      background-color: #a8b6c7;
     }
-    input[type=checkbox]:checked + label::after{
-        border-color: #fff;
-        width: 7px;
-        height: 11px;
-        top: -2px;
-        left: 1px;
+    input[type='checkbox']:checked + label::after {
+      border-color: #fff;
+      width: 7px;
+      height: 11px;
+      top: -2px;
+      left: 1px;
     }
+  }
 }
 
 // 회원가입
-.center-page-wrap{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+.center-page-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f4f4f7;
+  overflow-x: hidden;
+  .center-page-inner {
     width: 100%;
-    min-height: 100vh;
-    background-color: #F4F4F7;
-    overflow-x: hidden;
-    .center-page-inner{
-        width: 100%;
-        max-width: 1720px;
-        margin: 0 auto;
-        .center-page-tit{
-            font-size: 18px;
-            font-weight: 600;
-            color: #101010;
-            margin-bottom: 24px;
-        }
-        .sub-table-box{
-            &.signup{
-                margin-bottom: 20px;
-            }
-        }
-        .sign-up-btn-wrap{
-            display: flex;
-            justify-content: flex-end;
-        }
-        &.complete{
-            max-width: 1000px;
-        }
+    max-width: 1720px;
+    margin: 0 auto;
+    .center-page-tit {
+      font-size: 18px;
+      font-weight: 600;
+      color: #101010;
+      margin-bottom: 24px;
     }
-    
+    .sub-table-box {
+      &.signup {
+        margin-bottom: 20px;
+      }
+    }
+    .sign-up-btn-wrap {
+      display: flex;
+      justify-content: flex-end;
+    }
+    &.complete {
+      max-width: 1000px;
+    }
+  }
 }
 
 // 회원가입 완료
-.complete-box-wrap{
-    padding: 72px 80px;
-    .complete-tit{
-        font-size: 18px;
-        font-weight: 600;
-        color: #101010;
-        margin-bottom: 17px;
+.complete-box-wrap {
+  padding: 72px 80px;
+  .complete-tit {
+    font-size: 18px;
+    font-weight: 600;
+    color: #101010;
+    margin-bottom: 17px;
+  }
+  .complete-txt {
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    margin-bottom: 27px;
+  }
+  .complete-email-wrap {
+    padding: 36px 30px;
+    border-radius: 2px;
+    background: #f4f4f7;
+    margin-bottom: 20px;
+    .email-info {
+      font-size: 13px;
+      font-weight: 400;
+      color: #000;
+      span {
+        color: #204af4;
+        font-weight: 500;
+      }
     }
-    .complete-txt{
-        font-size: 13px;
-        font-weight: 400;
-        color: #101010;
-        margin-bottom: 27px;
-    }
-    .complete-email-wrap{
-        padding: 36px 30px;
-        border-radius: 2px;
-        background: #F4F4F7;
-        margin-bottom: 20px;
-        .email-info{
-            font-size: 13px;
-            font-weight: 400;
-            color: #000;
-            span{
-                color: #204AF4;
-                font-weight: 500;
-            }
-        }
-    }
-    .complete-btn{
-        display: flex;
-        justify-content: flex-end;
-    }
-}
\ No newline at end of file
+  }
+  .complete-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}