jhpark / cms_frontend star
최정임 최정임 01-14
250114 최정임 테마1,2 헤더1,2 추가
@485a941f8832d31954904de19b1b04042772ecf7
857ef6e
485a941
client/resources/css/common.css
--- client/resources/css/common.css
+++ client/resources/css/common.css
@@ -1,5 +1,6 @@
 
 @charset "utf-8";
 
 
+
 
 /* 마진 - 왼쪽 */
 
 .ml0 { margin-left: 0rem; }
 
 .ml5 { margin-left: 0.5rem; }
@@ -200,6 +201,59 @@
 
 .pb95 { padding-bottom: 9.5rem; }
 
 .pb100 { padding-bottom: 10rem; }
 
 
+:root {
 
+    --krds-white: #fff;
 
+    --krds-black: #000;
 
+    --krds-primary: #246BEB;
 
+    --krds-secondary: #003675;
 
+    --krds-point: #E71825;
 
+    --krds-danger: #EB003B;
 
+    --krds-warning: #FFB724;
 
+    --krds-success: #008A1E;
 
+    --krds-information: #2768FF;
 
+    --krds-primary-5: #EFF5FF;
 
+    --krds-primary-10: #D3E1FB;
 
+    --krds-primary-20: #A7C4F7;
 
+    --krds-primary-30: #7CA6F3;
 
+    --krds-primary-40: #5089EF;
 
+    --krds-primary-60: #1D56BC;
 
+    --krds-primary-70: #16408D;
 
+    --krds-primary-80: #0E2B5E;
 
+    --krds-primary-90: #07152F;
 
+    --krds-secondary-5: #EDF1F5;
 
+    --krds-secondary-10: #CDD7E4;
 
+    --krds-secondary-20: #B4C4D6;
 
+    --krds-secondary-30: #99B0CB;
 
+    --krds-secondary-40: #2A5C96;
 
+    --krds-secondary-60: #002B5E;
 
+    --krds-secondary-70: #002046;
 
+    --krds-secondary-80: #00162F;
 
+    --krds-secondary-90: #000B17;
 
+    --krds-point-5: #FDF2F3;
 
+    --krds-point-10: #FAD1D3;
 
+    --krds-point-20: #F5A3A8;
 
+    --krds-point-30: #F1747C;
 
+    --krds-point-40: #EC4651;
 
+    --krds-point-60: #B9131E;
 
+    --krds-point-70: #8B0E16;
 
+    --krds-point-80: #5C0A0F;
 
+    --krds-point-90: #2E0507;
 
+    --krds-gray-5: #F8F8F8;
 
+    --krds-gray-10: #F0F0F0;
 
+    --krds-gray-20: #E4E4E4;
 
+    --krds-gray-30: #D8D8D8;
 
+    --krds-gray-40: #C6C6C6;
 
+    --krds-gray-50: #8E8E8E;
 
+    --krds-gray-60: #717171;
 
+    --krds-gray-70: #555555;
 
+    --krds-gray-80: #2D2D2D;
 
+    --krds-gray-90: #1D1D1D;
 
+    --krds-fz-display-sm: 4rem;
 
+    --krds-fz-display-md: 5rem;
 
+    --krds-fz-display-lg: 6.6rem;
 
+    --krds-fz-heading-sm: 3.2rem;
 
+}
 
+
 
 /* 너비 */
 
 .w1400{
 
     width: 1400px;
@@ -305,7 +359,6 @@
 
 .chart-wrap{
 
     width: 100%;
 
     height: 363px;
 
-    border: 1px solid var(--dark);
 
     border-radius: 10px;
 
 }
@@ -350,4 +403,4 @@
 
     text-overflow: ellipsis;
 
     white-space: nowrap;
 
     overflow: hidden;
 
-  }
(파일 끝에 줄바꿈 문자 없음) 
+  }
857ef6e
485a941
client/resources/css/component.css
--- client/resources/css/component.css
+++ client/resources/css/component.css
@@ -16,7 +16,8 @@
 
     height: 100%;
 
     padding: 2rem;
 
     border-radius: 10px;
 
-    box-shadow: 0 0 5px var(--light);
 
+    border: 0.1rem solid var(--krds-gray-40);
 
+
 
 }
 
 
 .page-title {
 
485a941
client/resources/css/header.css (added)
+++ client/resources/css/header.css
@@ -0,0 +1,157 @@
+@charset "utf-8";
+.logo {
+    width: 150px;
+}
+.user-wrap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    font-size: 1.7rem;
+}
+
+.user-wrap header {
+    width: 100%;
+    background-color: #fff;
+    border-bottom: 1px solid #C6C6C6;
+    position: relative;
+    z-index: 2;
+    margin-bottom: 3rem;
+}
+
+.user-wrap header.company-header {
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    z-index: 2;
+    border-bottom: 1px solid #aaa;
+}
+.header-wrap{width: 1400px; margin: 0 auto;}
+.company-sub-menu {
+    background-color: rgba(0, 0, 0, 0.5)
+}
+
+.company-sub-menu li>a,
+.company-sub-menu li>p {
+    border: 1px solid #fff;
+    color: #fff;
+}
+
+.msub-menu {
+    display: none;
+}
+
+.msub-menu li>a,
+.msub-menu li>p {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 1rem;
+    font-size: 1.6rem;
+    text-align: left;
+}
+
+.msub-menu.show,
+.sub-menu.show {
+    display: block;
+}
+
+.msub-menu.show {
+    border-bottom: 1px solid #eee;
+}
+.main-menu{
+    &:hover{
+        &::before{
+            content: '';
+            position: absolute;
+            display: block;
+            top: 88px;
+            left: 0;
+            width: 100%;
+            height: 150px;
+            background: #fff;
+            z-index: 1;
+        }
+    }
+    
+}
+.main-menu>li>a,
+.main-menu>li>p {
+    display: block;
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+.main-menu > li {
+    position: relative; 
+    min-width: 160px;
+    &:hover {
+        &::after {
+            position: absolute;
+            bottom: calc(var(--krds-spacer-4) * -1);
+            left: 50%;
+            bottom: 0;
+            content: "";
+            transition: width 0.4s ease-in-out, height 0.4s ease-in-out; 
+            width: 0;
+            height: 0.4rem;
+            background-color: var(--green);
+            transform: translateX(-50%);
+        }
+    }
+
+    &:hover::after {
+        width: 100%; 
+    }
+}
+header.company-header .main-menu>li>a,
+header.company-header .main-menu>li>p {
+    color: var(--white);
+}
+
+
+
+.main-menu>li:hover>a,
+.main-menu>li:hover>p,
+.user-wrap header.company-header .main-menu>li:hover>a,
+.user-wrap header.company-header .main-menu>li:hover>p {
+    color: var(--green);
+}
+
+.pc-menu{
+
+}
+
+.sub-menu {
+    width: 100%;
+    height: 150px;
+    position: absolute;
+    background-color: #fff;
+    min-width: 160px;
+    z-index: 1;
+    display: none;
+    padding: 0 !important;
+    left: 0;
+    bottom: -1px;
+    transform: translateY(100%);
+}
+
+.sub-menu-inner{
+    display: block;
+    width: 100%;
+}
+
+.sub-menu li>a,
+.sub-menu li>p {
+    display: block;
+    width: 100%;
+    border-radius: 0 10px 0 10px;
+    padding: 1.3rem 0;
+    font-size: 1.6rem;
+    text-align: center;
+    font-weight: 700;
+    &:hover{
+        color: var(--green);
+    }
+}
+
+
+
 
485a941
client/resources/css/header_column.css (added)
+++ client/resources/css/header_column.css
@@ -0,0 +1,221 @@
+@charset "utf-8";
+.logo {
+    width: 150px;
+    height: 80px;
+}
+.user-wrap {
+    display: flex;
+    justify-content: space-between;
+    min-height: 100vh;
+    font-size: 1.7rem;
+}
+
+.user-wrap header {
+    width: 30rem;
+    padding: 2rem 0 0 2rem;
+    background-color: #fff;
+    border-right: 1px solid #C6C6C6;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    .header{
+        display: block;
+    }
+}
+.main-menu{display: block;
+    &::before{
+        
+    }
+    &:hover{
+    }
+    > li{padding: 2rem 0; height: 6rem;}
+}
+
+.main-menu>li>a,
+.main-menu>li>p {
+    display: block;
+    font-size: 1.8rem;
+    font-family: "yungju";
+    text-align: left;
+}
+
+header.company-header .main-menu>li>a,
+header.company-header .main-menu>li>p {
+    color: var(--white);
+}
+
+.main-menu>li.active>a,
+.main-menu>li.active>p {
+    border-bottom: 2px solid var(--green);
+    color: var(--green);
+}
+
+.main-menu>li:hover>a,
+.main-menu>li:hover>p,
+.user-wrap header.company-header .main-menu>li:hover>a,
+.user-wrap header.company-header .main-menu>li:hover>p {
+    color: var(--green);
+
+}
+
+.sub-menu {
+    position: absolute;
+    background-color: #fff;
+    min-width: 160px;
+    height: 100%;
+    z-index: 1;
+    display: none;
+    left: 30rem;
+    top: 0;
+    padding-top: 11rem;
+}
+
+.sub-menu-inner{
+    li{
+        /* max-width: 25%; */
+        padding-left: 10px;
+    }
+}
+
+.sub-menu li>a,
+.sub-menu li>p {
+    display: block;
+    width: 100%;
+    border-radius: 0 10px 0 10px;
+    padding: 1rem;
+    font-size: 1.6rem;
+    text-align: left;
+    font-weight: 600;
+    &:hover{
+        color: var(--green);
+    }
+}
+
+
+.company-sub-menu {
+    background-color: rgba(0, 0, 0, 0.5)
+}
+
+.company-sub-menu li>a,
+.company-sub-menu li>p {
+    border: 1px solid #fff;
+    color: #fff;
+}
+
+.msub-menu {
+    display: none;
+}
+
+.msub-menu li>a,
+.msub-menu li>p {
+    display: block;
+    width: 100%;
+    border: 0;
+    padding: 1rem;
+    font-size: 1.6rem;
+    text-align: left;
+}
+
+.msub-menu.show,
+.sub-menu.show {
+    display: block;
+}
+
+.msub-menu.show {
+    border-bottom: 1px solid #eee;
+}
+.sub-sub-menu{
+    padding: 0;
+}
+.sub-sub-menu>li{
+    padding: 0;
+    p{
+        padding: 1rem 0 1rem 2rem;
+        font-weight: 500;
+    }
+}
+.sub-sub-menu>li>a {
+    display: block;
+    width: 100%;
+    font-size: 1.6rem;
+    text-align: center;
+}
+
+.sub-menu>li>a:hover,
+.sub-sub-menu>li>a:hover {
+    background-color: var(--sky-green);
+}
+
+/* 
+.user-wrap nav ul.main-menu li{
+    position: relative;
+}
+.user-wrap ul.main-menu > li{
+    padding: 2rem 3.5rem;
+}
+.user-wrap ul.main-menu > li > a,
+.user-wrap ul.main-menu > li > p{
+    display: block;
+    font-size: 1.8rem;
+    font-family: "yungju";
+
+}
+
+.user-wrap ul.main-menu > li > p.active {
+   border-bottom: 3px solid var(--green);
+   color: var(--green);
+}
+
+
+.user-wrap nav ul.sub-menu {
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+    background-color: #fff;
+    z-index: 4;
+    bottom: -2px;
+    left: 0;
+    transform: translateY(100%);
+    transition: max-height 1.8s ease-in-out, opacity 0.5s ease-in-out;
+}
+
+.user-wrap nav ul.sub-menu li a {
+    display: block;
+    text-align: center;
+    font-size: 1.6rem;
+    padding: 5px 0;
+}
+
+.navbg {
+    overflow: hidden;
+    background-color: #fff;
+    border-bottom: 1px solid var(--sky-green);
+    box-shadow: 0 5px 10px var(--light);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100%);
+    width: 100%;
+    z-index: 3;
+    transition: height 0.6s ease-in-out;
+} */
+
+/* 메인 */
+
+.user-wrap .main-warp {
+    flex-grow: 1;
+    margin-left: 16rem;
+    margin-top: 3rem;
+}
+.user-info-wrap{margin-right: 2rem;}
+
+.page {
+    width: 100%;
+    height: 100vh;
+}
+
+.content-page {
+    width: 100%;
+    height: calc(100% - 66px);
+}(파일 끝에 줄바꿈 문자 없음)
857ef6e
485a941
client/resources/css/layout.css
--- client/resources/css/layout.css
+++ client/resources/css/layout.css
@@ -1,10 +1,4 @@
 
 @charset "utf-8";
 
-.user-wrap {
 
-    display: flex;
 
-    flex-direction: column;
 
-    min-height: 100vh;
 
-    font-size: 1.7rem;
 
-}
 
 
 .user-wrap header {
 
     width: 100%;
@@ -106,172 +100,3 @@
 
 .mobile-menu input:checked~ul.main-menu {
 
     width: 300px;
 
 }
 
-
 
-.main-menu>li>a,
 
-.main-menu>li>p {
 
-    display: block;
 
-    font-size: 1.8rem;
 
-    font-family: "yungju";
 
-}
 
-
 
-header.company-header .main-menu>li>a,
 
-header.company-header .main-menu>li>p {
 
-    color: var(--white);
 
-}
 
-
 
-
 
-.main-menu>li.active>a,
 
-.main-menu>li.active>p {
 
-    border-bottom: 2px solid var(--green);
 
-    color: var(--green);
 
-}
 
-
 
-.main-menu>li:hover>a,
 
-.main-menu>li:hover>p,
 
-.user-wrap header.company-header .main-menu>li:hover>a,
 
-.user-wrap header.company-header .main-menu>li:hover>p {
 
-    color: var(--green);
 
-}
 
-
 
-.sub-menu {
 
-    width: 100%;
 
-    position: absolute;
 
-    background-color: #fff;
 
-    border-bottom: 3px solid #333;
 
-    min-width: 160px;
 
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 
-    z-index: 1;
 
-    display: none;
 
-    left: 0;
 
-    bottom: 1px;
 
-    transform: translateY(100%);
 
-}
 
-
 
-
 
-
 
-.sub-menu li>a,
 
-.sub-menu li>p {
 
-    display: block;
 
-    width: 100%;
 
-    border: 1px solid #116300;
 
-    border-radius: 0 10px 0 10px;
 
-    padding: 1rem;
 
-    font-size: 1.6rem;
 
-    text-align: center;
 
-}
 
-
 
-
 
-.company-sub-menu {
 
-    background-color: rgba(0, 0, 0, 0.5)
 
-}
 
-
 
-.company-sub-menu li>a,
 
-.company-sub-menu li>p {
 
-    border: 1px solid #fff;
 
-    color: #fff;
 
-}
 
-
 
-.msub-menu {
 
-    display: none;
 
-}
 
-
 
-.msub-menu li>a,
 
-.msub-menu li>p {
 
-    display: block;
 
-    width: 100%;
 
-    border: 0;
 
-    padding: 1rem;
 
-    font-size: 1.6rem;
 
-    text-align: left;
 
-}
 
-
 
-.msub-menu.show,
 
-.sub-menu.show {
 
-    display: block;
 
-}
 
-
 
-.msub-menu.show {
 
-    border-bottom: 1px solid #eee;
 
-}
 
-
 
-.sub-sub-menu>li>a {
 
-    display: block;
 
-    width: 100%;
 
-    font-size: 1.6rem;
 
-    text-align: center;
 
-}
 
-
 
-.sub-menu>li>a:hover,
 
-.sub-sub-menu>li>a:hover {
 
-    background-color: var(--sky-green);
 
-}
 
-
 
-/* 
-.user-wrap nav ul.main-menu li{
 
-    position: relative;
 
-}
 
-.user-wrap ul.main-menu > li{
 
-    padding: 2rem 3.5rem;
 
-}
 
-.user-wrap ul.main-menu > li > a,
 
-.user-wrap ul.main-menu > li > p{
 
-    display: block;
 
-    font-size: 1.8rem;
 
-    font-family: "yungju";
 
-
 
-}
 
-
 
-.user-wrap ul.main-menu > li > p.active {
 
-   border-bottom: 3px solid var(--green);
 
-   color: var(--green);
 
-}
 
-
 
-
 
-.user-wrap nav ul.sub-menu {
 
-    overflow: hidden;
 
-    position: absolute;
 
-    width: 100%;
 
-    background-color: #fff;
 
-    z-index: 4;
 
-    bottom: -2px;
 
-    left: 0;
 
-    transform: translateY(100%);
 
-    transition: max-height 1.8s ease-in-out, opacity 0.5s ease-in-out;
 
-}
 
-
 
-.user-wrap nav ul.sub-menu li a {
 
-    display: block;
 
-    text-align: center;
 
-    font-size: 1.6rem;
 
-    padding: 5px 0;
 
-}
 
-
 
-.navbg {
 
-    overflow: hidden;
 
-    background-color: #fff;
 
-    border-bottom: 1px solid var(--sky-green);
 
-    box-shadow: 0 5px 10px var(--light);
 
-    position: absolute;
 
-    bottom: 0;
 
-    left: 0;
 
-    transform: translateY(100%);
 
-    width: 100%;
 
-    z-index: 3;
 
-    transition: height 0.6s ease-in-out;
 
-} */
 
-
 
-/* 메인 */
 
-
 
-.user-wrap .main-warp {
 
-    flex-grow: 1;
 
-}
 
-
 
-.page {
 
-    width: 100%;
 
-    height: 100vh;
 
-}
 
-
 
-.content-page {
 
-    width: 100%;
 
-    height: calc(100% - 66px);
 
-}
(파일 끝에 줄바꿈 문자 없음)
857ef6e
 
client/theme/nav/header1.css (deleted)
--- client/theme/nav/header1.css
@@ -1,0 +0,0 @@
 
485a941
client/theme/tema_v1/css/component.css (added)
+++ client/theme/tema_v1/css/component.css
@@ -0,0 +1,1008 @@
+@charset "utf-8";
+
+/* box */
+.content {
+    width: 100%;
+    height: 100%;
+}
+
+.row {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+.box {
+    background-color: var(--white);
+    height: 100%;
+    padding: 2rem;
+    border-radius: 10px;
+    border: 0.1rem solid var(--krds-gray-40);
+
+}
+
+.page-title {
+    font-size: 3rem;
+    font-weight: bold;
+    color: var(--green);
+}
+
+.admin-page-title {
+    font-size:1.8rem;
+    font-weight: bold;
+    color: var(--blue);
+}
+
+.admin-sec-title {
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: var(--blue);
+}
+
+.box-title {
+    font-size: 1.3rem;
+
+}
+
+.box-out-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    padding-bottom: 1rem;
+    a{
+        font-size: 1.4rem;
+    }
+}
+
+.box-content {
+    font-size: 2rem;
+    color: var(--blue);
+    font-family: "GmarketSans-B";
+}
+
+.chart-title {
+    font-size: 1.4rem;
+    font-weight: bold;
+}
+
+.content-box {
+    height: calc(100% - 48px);
+    /* background-color: aliceblue; */
+}
+
+.detail-bold {
+    font-size: 1.6rem;
+    font-weight: 700;
+}
+
+.detail-text {
+    font-size: 1.6rem;
+    font-weight: 400;
+}
+
+.date-text {
+    font-size: 1.4rem;
+    font-weight: 400;
+}
+
+.search-list {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: 1fr 1fr 1fr;
+     .img-wrap {
+        height: 20rem;
+        background-color: #EDF1F5;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        border-radius: inherit;
+        text-align: center;
+    }
+     .img-wrap.main_1 {
+        background-image: url(https://uiux.egovframe.go.kr/resources/img/guide/contents/main/img_main_1.png);
+    }
+    .conts-wrap {
+        display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-direction: column;
+    padding: 2.4rem 0 0 0 ;
+    gap: 1.2rem;
+    width: 100%;
+    color: var(--krds-gray-70);
+    }
+    .conts-wrap .tit {
+        font-size: 1.9rem;
+    }
+}
+
+/* btn */
+.small-btn {
+    width: 120px;
+    padding: 0.7rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 1.5rem;
+}
+
+.large-btn {
+    width: 100%;
+    padding: 0.5rem 0;
+    border-radius: 0.5rem;
+}
+
+.icon-btn {
+    padding: 0.5rem;
+    border-radius: 50%;
+}
+
+.close-btn {
+    font-size: 1.6rem;
+    font-weight: 900;
+}
+
+.logout-btn {
+    padding: 0.5rem 1rem;
+    color: var(--dark);
+    position: relative;
+    font-size: 1.6rem;
+}
+
+.logout-btn::before {
+    content: "";
+    width: 1px;
+    height: 10px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    background-color: #aaa;
+}
+
+.close-btn {
+    color: #d6def6;
+}
+
+.comment-btn {
+    width: 100%;
+    height: 6.5rem;
+    max-height: 6.5rem
+}
+
+.blue-btn,
+.blue-border-btn:hover {
+    background-color: var(--blue);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.red-btn,
+.red-border-btn:hover {
+    background-color: var(--red);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.green-btn,
+.green-border-btn:hover {
+    background-color: var(--green);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.orange-btn,
+.orange-border-btn:hover {
+    background-color: var(--orange);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.darkg-btn,
+.darkg-border-btn:hover {
+    background-color: var(--gray-dark);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.gray-btn,
+.gray-border-btn:hover {
+    background-color: #eee;
+    color: #333;
+    transition: all 0.3s ease-in-out;
+}
+
+
+.blue-border-btn {
+    border: 1px solid var(--blue);
+    color: var(--blue);
+    background-color: var(--white);
+}
+
+.red-border-btn {
+    border: 1px solid var(--red);
+    color: var(--red);
+    background-color: var(--white);
+}
+
+.green-border-btn {
+    border: 1px solid var(--green);
+    color: var(--green);
+    background-color: var(--white);
+}
+
+.orange-border-btn {
+    border: 1px solid var(--orange);
+    color: var(--orange);
+    background-color: var(--white);
+}
+
+.darkg-border-btn {
+    border: 1px solid var(--gray-dark);
+    color: var(--gray-dark);
+    background-color: var(--white);
+}
+
+.gray-border-btn {
+    border: 1px solid #aaa;
+    color: #aaa;
+    background-color: var(--white);
+}
+
+.white-border-btn {
+    border: 1px solid var(--white);
+    color: var(--white);
+    background-color: transparent;
+}
+
+.tp-btn {
+    background-color: transparent;
+    width: 15px;
+    height: 15px;
+    margin-left: 10px;
+}
+
+button:disabled {
+    background-color: #eee;
+    color: #333;
+}
+
+.del-icon-btn {
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--red);
+    color: var(--white);
+    border-radius: 50%;
+}
+
+.set-icon-btn {
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--darkG);
+    color: var(--white);
+    border-radius: 50%;
+}
+
+
+
+/* 모달 */
+.modal-wrapper {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 11000;
+}
+
+.modal-container {
+    background: #fff;
+    min-width: 500px;
+    width: 35%;
+    /* height: 80%; */
+    border-radius: 5px;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    padding: 20px;
+    box-sizing: border-box;
+    max-height: 95%;
+    min-height: 500px;
+}
+
+.modal-title {
+    width: 100%;
+    border-bottom: 1px solid #d4cccc;
+    padding: 10px 0;
+}
+
+.modal-subtitle {
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+.modal-content-monthly {
+    width: 100%;
+    padding: 20px 0;
+    overflow-y: auto;
+}
+
+.large-modal {
+    width: 90%;
+}
+
+.medium-modal {
+  width: 60%;
+}
+
+.small-modal {
+    min-width: 200px;
+    min-height: 200px;
+    max-width: 450px;
+    height: auto;
+    max-height: 50%;
+}
+
+.list-modal {
+    width: 80%;
+    height: 80%;
+}
+
+.alert-write {
+    font-size: 1.6rem;
+    line-height: 180%;
+}
+
+
+.modal-content-monthly::-webkit-scrollbar {
+    width: 10px;
+}
+
+.modal-content-monthly::-webkit-scrollbar-thumb {
+    background-color: #6b6b6b;
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+}
+
+.modal-content-monthly::-webkit-scrollbar-track {
+    background-color: #eee;
+    border-radius: 10px;
+    box-shadow: inset 0px 0px 5px white;
+}
+
+.modal-end {
+    width: 100%;
+    padding: 15px 0;
+}
+
+.alert-modal .modal-end button,
+.small-modal .modal-end button {
+    margin-left: 0;
+}
+
+.full-input,
+.full-select {
+    width: 100%;
+}
+
+.half-input,
+.half-select {
+    width: 50%;
+}
+
+
+/* table */
+.list-table .admin-list.list-table {
+    border-top: 1px solid var(--light);
+    border-bottom: 1px solid var(--light);
+}
+
+.admin-wrap .list-table thead th {
+    background-color: var(--teal);
+    padding: 10px 0;
+    font-family: "yungju";
+    font-size: 1.2rem;
+}
+
+.list-table tbody tr,
+.admin-list.list-table tbody tr,
+.form-table2 tr {
+    border-top: 1px solid var(--light);
+}
+
+.admin-wrap .list-table tbody td,
+.admin-list.list-table tbody td {
+    font-size: 1.2rem;
+}
+
+.list-table tbody tr:nth-child(even) {
+    background-color: var(--sky-green);
+
+}
+
+.admin-wrap .admin-list.list-table thead th {
+    background-color: var(--light);
+    font-family: "Pretendard-B";
+    font-size: 1.2rem;
+}
+
+.admin-list.list-table tbody tr:nth-child(even) {
+    background-color: var(--background-white);
+
+}
+
+.admin-style .form-table,
+.content-navigate {
+    border-top: 1px solid var(--gray-dark);
+    border-bottom: 1px solid var(--gray-dark);
+}
+
+.form-table {
+    border-top: 1px solid var(--green);
+    border-bottom: 1px solid var(--green);
+}
+
+.form-table2 {
+    border: 1px solid var(--light);
+}
+
+.form-table th,
+.form-table td,
+.form-table2 th,
+.form-table2 td {
+    padding: 1rem;
+    position: relative;
+}
+
+.form-table2 th {
+    background-color: var(--teal);
+    border-right: 1px solid var(--light);
+}
+
+.form-table-adm th {
+    background-color: var(--light);
+    border-right: 1px solid var(--white);
+}
+
+.admin-style .form-table2 th {
+    background-color: var(--light);
+    border-right: 1px solid var(--light);
+}
+
+.form-table-style .form-table {
+    border-top: none;
+    border-bottom: none;
+}
+
+.detail-table {
+    border-top: 2px solid var(--green);
+    border-bottom: 1px solid var(--green);
+}
+
+.cmmn-table tr td:nth-of-type(2) {
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+
+.cmmn-table2 tr td:nth-of-type(2),
+.cmmn-table2 tr td:nth-of-type(3) {
+    text-align: left;
+}
+.admin-list.faq-table tbody tr:nth-child(even),
+.list-table.faq-table tbody tr:nth-child(even) {
+    background-color: var(--white);
+}
+
+.admin-list.faq-table tbody tr.answer,
+.list-table.faq-table tbody tr.answer {
+    background-color: var(--sky-green);
+}
+
+
+.admin-detail {
+    border-top: 2px solid var(--light);
+    border-bottom: 1px solid var(--light);
+}
+
+.detail-table .detail-title{
+    background-color: var(--white);
+    border-bottom: 1px solid var(--green);
+}
+
+
+.admin-detail .detail-title {
+    background-color: var(--light);
+    border-bottom: 1px solid var(--blue);
+}
+
+.detail-title td {
+    padding: 2rem 1.5rem;
+}
+
+.detail-table-title {
+    font-size: 1.8rem;
+}
+
+.complex-table th {
+    border: 1px solid var(--white);
+}
+
+.content-navigate tr {
+    border-top: 1px solid var(--gray-dark);
+}
+
+.content-navigate tr td:nth-of-type(1) {
+    border-right: 1px solid var(--light);
+}
+
+
+
+/* 파일찾기 및 필수 */
+
+.form-table input[type="file"] {
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+}
+
+.filebox {
+    height: 4rem;
+}
+
+.filebox .upload-name {
+    display: inline-block;
+    padding: 0.7rem 1rem;
+    vertical-align: middle;
+    border: 1px solid #dddddd;
+    color: #999999;
+}
+
+.form-table label {
+    display: inline-block;
+}
+
+.essential {
+    font-size: 1.3rem;
+}
+
+.essential span {
+    color: var(--red);
+}
+
+.form-table th span,
+.form-table-style .form-table label.form-title,
+.form-table label.form-title {
+    position: relative;
+}
+
+.form-table th span::after,
+.form-table-style .form-table label.form-title::after,
+.form-table label.form-title::after {
+    content: "*";
+    color: var(--red);
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(100%, -50%);
+}
+
+
+
+
+/* 서치 */
+.search-bar {
+    position: relative;
+    .box{
+        position: relative;
+        margin: 0 auto;
+        height: 5.6rem;    
+        width: 54.8rem;
+        padding: 0;
+        border: 0;
+    }
+}
+
+.search-input{
+    
+        border-radius: 0.8rem;
+    border: 1px solid var(--krds-gray-60);
+        width: 100%;
+        height: 100%;
+    
+    
+}
+
+/* placeholder style */
+.search-input::-webkit-input-placeholder {
+	color: #999999;
+	
+}
+.search-input::-moz-placeholder {
+	color: #999999;
+}
+.search-input:-ms-input-placeholder {
+	color: #999999;
+}
+.search-input::-ms-input-placeholder {
+	color: #999999;
+}
+.search-input:focus {
+    border: 2px solid var(--krds-primary-40); /* 원하는 색상으로 변경 (예: 파란색) */
+    outline: none;  /* 포커스 시 outline 제거 (선택사항) */
+  }
+
+.search-button {
+    position: absolute;
+    top: 15px;
+    right: 1rem;
+}
+
+.search-icon {
+    color: #1d1d1d;
+}
+
+.condition-input {
+    border-left: 1px solid var(--dark);
+}
+
+/*PAGINATION*/
+
+.pagination-button-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+}
+
+.pagination-button-type a {
+    display: block;
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid var(--dark);
+    padding: 0 7px;
+    border-radius: 0.5rem;
+}
+
+/* 정우추가 */
+.pagination-button-type a.prev:after {
+    content: "\003C";
+    font-weight: 900;
+
+}
+
+.pagination-button-type a.next:after {
+    content: "\003E";
+    font-weight: 900;
+}
+
+.pagination-button-type a.first-page:after {
+    content: "\003C\003C";
+    font-weight: 900;
+
+}
+
+.pagination-button-type a.end-page:after {
+    content: "\003E\003E";
+    font-weight: 900;
+
+}
+
+.pagination-button-type a.active {
+    background-color: var(--green);
+    color: white;
+    cursor: default !important;
+}
+
+
+
+/* 페이지 템플릿 */
+.gall-img {
+    width: 100%;
+    height: 200px
+}
+
+.gall-img>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+/* 댓글 */
+.comment-zone {
+    background-color: var(--skyblue);
+    border-radius: 1rem;
+}
+
+.comment-zone2 {
+  background-color: var(--background-white);
+  border-radius: 1rem;
+}
+
+.comment-wrap {
+  padding: 16px;
+  background-color: var(--white);
+}
+
+
+
+.comment-item:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.parents-nodes {
+    padding-left: 8px;
+}
+
+.children-nodes {
+    padding-left: 8px;
+}
+
+.comment-user,
+.comment-text {
+    font-size: 1.3rem;
+}
+
+.comment-date {
+    color: var(--gray);
+    font-size: 1.2;
+}
+
+.reply-zone {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.reply-input {
+    border-radius: 50px;
+}
+
+.reply-btn {
+    position: absolute;
+    border-radius: 50px;
+    top: 50%;
+    right: 6px;
+    transform: translateY(-50%);
+}
+
+/* 팝업 */
+.popup-wrap {
+    height: 100vh;
+}
+
+.popup-container {
+    width: 100%;
+    height: calc(100vh - 50px);
+}
+
+/* 트리 */
+.p-tree {
+    padding: 0.5rem 1rem;
+}
+
+.node-name {
+    width: 100%;
+    font-size: 1.2rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+
+.selected {
+    border: 1px solid var(--blue);
+    border-radius: 0.3rem;
+}
+
+.ghost {
+    height: 15px;
+    color: transparent;
+    border: 1px dashed var(--blue);
+}
+
+.ghost * {
+    display: none;
+}
+
+/* 파일 목록 */
+.file-wrap p {
+  display: block;
+  width: calc(100% - 15px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.file-wrap button.del-btn {
+  width: 15px;
+}
+
+/* 목록형 공지사항 */
+.list_news ul {
+    overflow: hidden;
+}
+.list_news ul li.leli, .list_news ul li:nth-child(2n+1) {
+    margin-right: 4%;
+}
+.list_news ul li {
+    float: left;
+    position: relative;
+    width: 48%;
+    margin-bottom: 2px;
+}
+.list_news ul li a {
+    display: block;
+    float: left;
+    width: 100%;
+    vertical-align: middle;
+    padding: 0 80px 0 8px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 25px;
+    font-size: 15px;
+    color: #000;
+    font-weight: 400;
+}
+.list_news ul li span {
+    position: absolute;
+    right: 0;
+    top: 2px;
+    margin-right: 0;
+    text-align: right;
+    font-size: 15px;
+    color: #999;
+    font-family: 'gothic';
+    font-weight: 500;
+}
+.list_news ul li:before {
+    content: '';
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background-color: #62656A;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -1.5px;
+}
+
+ /* 메인 스와이퍼 슬라이드 */
+ .swiper-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  .swiper-wrapper{
+    
+  }
+  .swiper-slide{height: 20rem;}
+  .swiper-slide img {
+    width: 100%;
+    height: 100%;
+    background-color: #aaa;
+    text-align: center;
+  }
+.banner-zone {
+    position: relative;
+    .button {
+      font-size: 0;
+      border: none;
+      background-color: transparent;
+      width: 35px;
+      height: 35px;
+      border: 1px solid #ddd;
+      border-radius: 50%;
+      display: inline-block;
+      vertical-align: middle;
+      cursor: pointer;
+      position: absolute;
+      transition: all 0.1s;
+
+    }
+    .swiper-slide{height: 20rem;}
+    /* 이전 버튼 (prev) */
+    .swiper-button-prev {
+      &::after {
+        content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+        background-image: url(../img/prev.svg);
+        background-size: cover;
+        width: 9px;
+        height: 13px;
+        display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+      }
+    }
+  
+    /* 다음 버튼 (next) */
+    .swiper-button-next {
+      &::after {
+        content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+        background-image: url(../img/next.svg);
+        background-size: cover;
+        width: 9px;
+        height: 13px;
+        display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+      }
+    }
+    .button.stop{
+        &::after {
+            content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+            background-image: url(../img/stop.svg);
+            background-size: cover;
+            width: 9px;
+            height: 13px;
+            display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+          }
+    }
+    .button.play{
+        &::after {
+            content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+            background-image: url(../img/play.svg);
+            background-size: cover;
+            width: 9px;
+            height: 13px;
+            display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+          }
+    }
+  }
+  .quick-link {
+    display: flex
+;
+    width: 100%;
+    height: 145px;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 10px;
+    transition: height 0.4s;
+}
+  .quick-link li {
+    display: flex
+;
+    align-items: center;
+    flex-direction: column;
+    width: 20%;
+    padding: 22px 10px;
+    border-radius: 15px;
+    border: 1px solid #EEE;
+    background: #FFF;
+    transition: all 0.3s;
+    .link {
+        display: flex
+    ;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 144px;
+        color: #000;
+        text-align: center;
+    }
+    .icon.n1 {
+       background-image: url(../img/A00.svg);
+       width: 51px;
+       height: 50px;
+    }
+}(파일 끝에 줄바꿈 문자 없음)
857ef6e
485a941
client/theme/tema_v1/css/main.css (Renamed from client/theme/layout1/css/main.css)
--- client/theme/layout1/css/main.css
+++ client/theme/tema_v1/css/main.css
No changes
 
485a941
client/theme/tema_v1/css/style.css (added)
+++ client/theme/tema_v1/css/style.css
@@ -0,0 +1,255 @@
+@charset "utf-8";
+
+/* login */
+.logo {
+    width: 150px;
+}
+
+.login-wrap {
+    width: 25%;
+    border: 1px solid var(--light);
+    border-radius: 1.5rem;
+}
+
+.login-title {
+    font-size: 48px;
+    font-weight: 900;
+    color: var(--gray-dark);
+}
+
+.login-title.user-login {
+    color: var(--green);
+}
+
+input.login-input {
+    border: none;
+    border-bottom: 1px solid var(--gray);
+    border-radius: 0;
+}
+
+.login-label {
+    color: var(--gray-dark);
+    font-size: 1.6rem;
+}
+
+.find-zone p {
+    font-size: 1.6rem;
+    color: var(--gray);
+    position: relative;
+}
+
+.find-zone p:nth-of-type(1)::after {
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 1.5rem;
+    border-right: 1px solid var(--gray);
+    right: 0;
+    top: 50%;
+    transform: translate(100%, -50%);
+}
+
+.find-tab{
+    font-size: 2rem;
+    border: 1px solid var(--dark);
+    border-radius: 1rem;
+}
+
+.tab-active{
+    background-color: var(--teal);
+    color: var(--green);
+}
+
+
+/* intro */
+.intro-page {
+    width: 100%;
+    height: calc(100vh);
+    background-image: url(../img/intro_background.png);
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    background-size: auto;
+    padding: 215px 0;
+}
+
+.big-logo img {
+    margin: 0 auto;
+}
+
+.user-division {
+    height: calc(100% - 200px);
+    max-height: 300px;
+}
+
+.user-division>li>.division-item {
+    border-radius: 25px;
+    box-shadow: 0 0 10px var(--light);
+    position: relative;
+}
+
+.user-division>li>.division-item::after {
+    content: '';
+    position: absolute;
+    background-size: auto;
+    background-repeat: no-repeat;
+    bottom: 0;
+    transform: translateY(20%);
+    width: 192px;
+    height: 161px;
+}
+
+.user-division>li:nth-child(1)>.division-item::after {
+    background-image: url(../img/mascot_left.png);
+    right: 0;
+}
+
+.user-division>li:nth-child(2)>.division-item::after {
+    background-image: url(../img/mascot_left.png);
+    left: 0;
+    transform: translateY(20%) scaleX(-1);
+}
+
+.user-division>li>.division-item>img {
+    position: absolute;
+    bottom: 0;
+
+}
+
+.user-division>li:nth-child(1)>.division-item>img {
+    left: 30px;
+}
+
+.user-division>li:nth-child(2)>.division-item>img {
+    right: 30px;
+}
+
+.user-division>li>.division-item>p {
+    font-size: 4.7rem;
+}
+
+/* 공무원 공통 */
+details{
+    border-top: 3px solid var(--green);
+    border-bottom: 2px solid var(--green);
+}
+
+summary{
+    padding: 1rem;
+    background-color: var(--teal);
+    font-size: 1.8rem;
+    color: var(--green);
+
+}
+
+summary::-webkit-details-marker,
+summary::marker {
+    display: none;
+    content: "";
+}
+
+/* 공무원 메인 */
+.tab-nav>ul>li:first-child{
+    padding-left: 0;
+}
+.tab-nav>ul>li:last-child{
+    padding-right: 0;
+}
+.tab-nav>ul>li>p {
+    font-size: 1.8rem;
+    background-color: var(--krds-primary-5);
+    border: 1px solid var(--krds-primary);
+    color: #1D56BC;
+    border-radius: 1rem;
+    text-align: center;
+}
+
+.tab-nav>ul>li.activeTab>p {
+    background-color: var(--krds-primary);
+    border: 1px solid var(--krds-primary);
+    color: var(--krds-white);
+}
+
+.select-label {
+    font-size: 1.6rem;
+}
+
+.item-list>li,
+.summary-style {
+    font-size: 1.6rem;
+    position: relative;
+}
+
+.item-list>li::before,
+.summary-style::before{
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 5px;
+    height: 5px;
+    border-radius: 5px;
+    background-color: var(--green);
+}
+
+.summary-style::before{
+    transform: translateY(-50%);
+}
+
+.user-name {
+    font-size: 1.6rem;
+    padding: 0 1rem;
+    color: var(--dark);
+}
+/* 검색페이지 */
+.content-warp p{
+    width: 100%;
+    display: -webkit-box;
+    word-wrap: break-word;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+/* 기업전용 메인  */
+.background-img{
+    width: 100%;
+    height: 100%;
+    object-position: top center;
+}
+.call{
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+
+/* 에디터 이미지 */
+.detail-table img{
+    display: inline;
+}
+
+/* user페이지 퀵메뉴 */
+.quick-menu{
+    position: fixed;
+    top: 20%;
+    right: 0;
+    padding: 2rem;
+    border-radius: 1rem 0 0 1rem;
+    background-color: var(--sky-orange);
+    z-index: 10;
+}
+
+/* 검토사항 */
+.review-table tbody tr td:nth-child(3),
+.review-table tbody tr td:nth-child(4){
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+
+
+
+
+
 
485a941
client/theme/tema_v1/img/A00.svg (added)
+++ client/theme/tema_v1/img/A00.svg
@@ -0,0 +1,1 @@
+<svg width='51' height='50' viewBox='0 0 51 50' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='50' height='50' transform='translate(0.0714264)' fill='white'/><g filter='url(#filter0_d_176_28474)'><path d='M9.65163 14.3738H39.8908C40.9569 14.3738 41.8262 15.2431 41.8262 16.3092V36.7619C41.8262 37.828 40.9615 38.6974 39.8908 38.6974H9.65163C8.58555 38.6974 7.71622 37.8326 7.71622 36.7619V16.3092C7.71622 15.2431 8.58098 14.3738 9.65163 14.3738Z' fill='#FFE8F4' stroke='#636363' stroke-width='1.14488'/><path d='M24.8787 21.0039H30.2319' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M30.2319 21.0039H24.8787V25.5291H30.2319V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M30.2319 25.5293H24.8787V30.0545H30.2319V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 21.0039H24.8787' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M24.8787 21.0039H19.5208V25.5291H24.8787V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M24.8787 25.5293H19.5208V30.0545H24.8787V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M35.5898 25.5293H30.232V30.0545H35.5898V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M30.2319 30.0548H24.8786V34.58H30.2319V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M35.5898 30.0548H30.232V34.58H35.5898V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M35.5898 21.0039H30.232V25.5291H35.5898V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M24.8787 30.0548H19.5208V34.58H24.8787V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 25.5293H14.1629V30.0545H19.5208V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 21.0039H14.1629V25.5291H19.5208V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 30.0548H14.1629V34.58H19.5208V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M16.0299 17.5173C16.0299 18.3775 15.3298 19.0776 14.4696 19.0776C13.6095 19.0776 12.9094 18.3775 12.9094 17.5173V12.5208C12.9094 11.6606 13.6095 10.9606 14.4696 10.9606C15.3298 10.9606 16.0299 11.6606 16.0299 12.5208V17.5173Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M36.6377 17.5173C36.6377 18.3775 35.9377 19.0776 35.0775 19.0776C34.2173 19.0776 33.5173 18.3775 33.5173 17.5173V12.5208C33.5173 11.6606 34.2173 10.9606 35.0775 10.9606C35.9377 10.9606 36.6377 11.6606 36.6377 12.5208V17.5173Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/></g><defs><filter id='filter0_d_176_28474' x='2.96551' y='7.58257' width='46.3567' height='39.9834' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset dx='1.37266' dy='2.74531'/><feGaussianBlur stdDeviation='2.77546'/><feComposite in2='hardAlpha' operator='out'/><feColorMatrix type='matrix' values='0 0 0 0 0.879167 0 0 0 0 0.523837 0 0 0 0 0.822314 0 0 0 0.25 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_176_28474'/><feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_176_28474' result='shape'/></filter></defs></svg>
 
485a941
client/theme/tema_v1/img/next.svg (added)
+++ client/theme/tema_v1/img/next.svg
@@ -0,0 +1,1 @@
+<svg width='9' height='13' viewBox='0 0 9 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.29469 0.75853L7.73461 7.19857M1.26538 12.2415L7.73356 5.77329' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>
 
485a941
client/theme/tema_v1/img/play.svg (added)
+++ client/theme/tema_v1/img/play.svg
@@ -0,0 +1,1 @@
+<svg width='19' height='38' viewBox='0 0 19 38' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 38V0L19 20.7273L0 38Z' fill='black'/></svg>
 
485a941
client/theme/tema_v1/img/prev.svg (added)
+++ client/theme/tema_v1/img/prev.svg
@@ -0,0 +1,1 @@
+<svg width='9' height='13' viewBox='0 0 9 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.70531 0.75853L1.26539 7.19857M7.73462 12.2415L1.26644 5.77329' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>
 
485a941
client/theme/tema_v1/img/stop.svg (added)
+++ client/theme/tema_v1/img/stop.svg
@@ -0,0 +1,1 @@
+<svg width='7' height='13' viewBox='0 0 7 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 0.5V12.5M6 0.5V12.5' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>
 
485a941
client/theme/tema_v2/css/component.css (added)
+++ client/theme/tema_v2/css/component.css
@@ -0,0 +1,1233 @@
+@charset "utf-8";
+
+/* box */
+.content {
+    width: 100%;
+    height: 100%;
+}
+
+.row {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+.box {
+    background-color: var(--white);
+    padding: 2rem;
+    border-radius: 10px;
+    border: 0.1rem solid var(--krds-gray-40);
+
+}
+
+.page-title {
+    font-size: 3rem;
+    font-weight: bold;
+    color: var(--green);
+}
+
+.admin-page-title {
+    font-size:1.8rem;
+    font-weight: bold;
+    color: var(--blue);
+}
+
+.admin-sec-title {
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: var(--blue);
+}
+
+.box-title {
+    font-size: 1.3rem;
+
+}
+
+.box-out-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    padding-bottom: 1rem;
+    a{
+        font-size: 1.4rem;
+    }
+}
+
+.box-content {
+    font-size: 2rem;
+    color: var(--blue);
+    font-family: "GmarketSans-B";
+}
+
+.chart-title {
+    font-size: 1.4rem;
+    font-weight: bold;
+}
+
+.content-box {
+    height: calc(100% - 48px);
+    /* background-color: aliceblue; */
+}
+
+.detail-bold {
+    font-size: 1.6rem;
+    font-weight: 700;
+}
+
+.detail-text {
+    font-size: 1.6rem;
+    font-weight: 400;
+}
+
+.date-text {
+    font-size: 1.4rem;
+    font-weight: 400;
+}
+
+.search-list {
+    display: grid;
+    gap: 24px;
+    grid-template-columns: 1fr 1fr 1fr;
+     .img-wrap {
+        height: 20rem;
+        background-color: #EDF1F5;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        border-radius: inherit;
+        text-align: center;
+    }
+     .img-wrap.main_1 {
+        background-image: url(https://uiux.egovframe.go.kr/resources/img/guide/contents/main/img_main_1.png);
+    }
+    .conts-wrap {
+        display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-direction: column;
+    padding: 2.4rem 0 0 0 ;
+    gap: 1.2rem;
+    width: 100%;
+    color: var(--krds-gray-70);
+    }
+    .conts-wrap .tit {
+        font-size: 1.9rem;
+    }
+}
+
+/* btn */
+.small-btn {
+    width: 120px;
+    padding: 0.7rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 1.5rem;
+}
+
+.large-btn {
+    width: 100%;
+    padding: 0.5rem 0;
+    border-radius: 0.5rem;
+}
+
+.icon-btn {
+    padding: 0.5rem;
+    border-radius: 50%;
+}
+
+.close-btn {
+    font-size: 1.6rem;
+    font-weight: 900;
+}
+
+.logout-btn {
+    padding: 0.5rem 1rem;
+    color: var(--dark);
+    position: relative;
+    font-size: 1.6rem;
+}
+
+.logout-btn::before {
+    content: "";
+    width: 1px;
+    height: 10px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    background-color: #aaa;
+}
+
+.close-btn {
+    color: #d6def6;
+}
+
+.comment-btn {
+    width: 100%;
+    height: 6.5rem;
+    max-height: 6.5rem
+}
+
+.blue-btn,
+.blue-border-btn:hover {
+    background-color: var(--blue);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.red-btn,
+.red-border-btn:hover {
+    background-color: var(--red);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.green-btn,
+.green-border-btn:hover {
+    background-color: var(--green);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.orange-btn,
+.orange-border-btn:hover {
+    background-color: var(--orange);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.darkg-btn,
+.darkg-border-btn:hover {
+    background-color: var(--gray-dark);
+    color: var(--white);
+    transition: all 0.3s ease-in-out;
+}
+
+.gray-btn,
+.gray-border-btn:hover {
+    background-color: #eee;
+    color: #333;
+    transition: all 0.3s ease-in-out;
+}
+
+
+.blue-border-btn {
+    border: 1px solid var(--blue);
+    color: var(--blue);
+    background-color: var(--white);
+}
+
+.red-border-btn {
+    border: 1px solid var(--red);
+    color: var(--red);
+    background-color: var(--white);
+}
+
+.green-border-btn {
+    border: 1px solid var(--green);
+    color: var(--green);
+    background-color: var(--white);
+}
+
+.orange-border-btn {
+    border: 1px solid var(--orange);
+    color: var(--orange);
+    background-color: var(--white);
+}
+
+.darkg-border-btn {
+    border: 1px solid var(--gray-dark);
+    color: var(--gray-dark);
+    background-color: var(--white);
+}
+
+.gray-border-btn {
+    border: 1px solid #aaa;
+    color: #aaa;
+    background-color: var(--white);
+}
+
+.white-border-btn {
+    border: 1px solid var(--white);
+    color: var(--white);
+    background-color: transparent;
+}
+
+.tp-btn {
+    background-color: transparent;
+    width: 15px;
+    height: 15px;
+    margin-left: 10px;
+}
+
+button:disabled {
+    background-color: #eee;
+    color: #333;
+}
+
+.del-icon-btn {
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--red);
+    color: var(--white);
+    border-radius: 50%;
+}
+
+.set-icon-btn {
+    width: 25px;
+    height: 25px;
+    padding: 5px;
+    background-color: var(--darkG);
+    color: var(--white);
+    border-radius: 50%;
+}
+
+
+
+/* 모달 */
+.modal-wrapper {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 11000;
+}
+
+.modal-container {
+    background: #fff;
+    min-width: 500px;
+    width: 35%;
+    /* height: 80%; */
+    border-radius: 5px;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    padding: 20px;
+    box-sizing: border-box;
+    max-height: 95%;
+    min-height: 500px;
+}
+
+.modal-title {
+    width: 100%;
+    border-bottom: 1px solid #d4cccc;
+    padding: 10px 0;
+}
+
+.modal-subtitle {
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+.modal-content-monthly {
+    width: 100%;
+    padding: 20px 0;
+    overflow-y: auto;
+}
+
+.large-modal {
+    width: 90%;
+}
+
+.medium-modal {
+  width: 60%;
+}
+
+.small-modal {
+    min-width: 200px;
+    min-height: 200px;
+    max-width: 450px;
+    height: auto;
+    max-height: 50%;
+}
+
+.list-modal {
+    width: 80%;
+    height: 80%;
+}
+
+.alert-write {
+    font-size: 1.6rem;
+    line-height: 180%;
+}
+
+
+.modal-content-monthly::-webkit-scrollbar {
+    width: 10px;
+}
+
+.modal-content-monthly::-webkit-scrollbar-thumb {
+    background-color: #6b6b6b;
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+}
+
+.modal-content-monthly::-webkit-scrollbar-track {
+    background-color: #eee;
+    border-radius: 10px;
+    box-shadow: inset 0px 0px 5px white;
+}
+
+.modal-end {
+    width: 100%;
+    padding: 15px 0;
+}
+
+.alert-modal .modal-end button,
+.small-modal .modal-end button {
+    margin-left: 0;
+}
+
+.full-input,
+.full-select {
+    width: 100%;
+}
+
+.half-input,
+.half-select {
+    width: 50%;
+}
+
+
+/* table */
+.list-table .admin-list.list-table {
+    border-top: 1px solid var(--light);
+    border-bottom: 1px solid var(--light);
+}
+
+.admin-wrap .list-table thead th {
+    background-color: var(--teal);
+    padding: 10px 0;
+    font-family: "yungju";
+    font-size: 1.2rem;
+}
+
+.list-table tbody tr,
+.admin-list.list-table tbody tr,
+.form-table2 tr {
+    border-top: 1px solid var(--light);
+}
+
+.admin-wrap .list-table tbody td,
+.admin-list.list-table tbody td {
+    font-size: 1.2rem;
+}
+
+.list-table tbody tr:nth-child(even) {
+    background-color: var(--sky-green);
+
+}
+
+.admin-wrap .admin-list.list-table thead th {
+    background-color: var(--light);
+    font-family: "Pretendard-B";
+    font-size: 1.2rem;
+}
+
+.admin-list.list-table tbody tr:nth-child(even) {
+    background-color: var(--background-white);
+
+}
+
+.admin-style .form-table,
+.content-navigate {
+    border-top: 1px solid var(--gray-dark);
+    border-bottom: 1px solid var(--gray-dark);
+}
+
+.form-table {
+    border-top: 1px solid var(--green);
+    border-bottom: 1px solid var(--green);
+}
+
+.form-table2 {
+    border: 1px solid var(--light);
+}
+
+.form-table th,
+.form-table td,
+.form-table2 th,
+.form-table2 td {
+    padding: 1rem;
+    position: relative;
+}
+
+.form-table2 th {
+    background-color: var(--teal);
+    border-right: 1px solid var(--light);
+}
+
+.form-table-adm th {
+    background-color: var(--light);
+    border-right: 1px solid var(--white);
+}
+
+.admin-style .form-table2 th {
+    background-color: var(--light);
+    border-right: 1px solid var(--light);
+}
+
+.form-table-style .form-table {
+    border-top: none;
+    border-bottom: none;
+}
+
+.detail-table {
+    border-top: 2px solid var(--green);
+    border-bottom: 1px solid var(--green);
+}
+
+.cmmn-table tr td:nth-of-type(2) {
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+
+.cmmn-table2 tr td:nth-of-type(2),
+.cmmn-table2 tr td:nth-of-type(3) {
+    text-align: left;
+}
+.admin-list.faq-table tbody tr:nth-child(even),
+.list-table.faq-table tbody tr:nth-child(even) {
+    background-color: var(--white);
+}
+
+.admin-list.faq-table tbody tr.answer,
+.list-table.faq-table tbody tr.answer {
+    background-color: var(--sky-green);
+}
+
+
+.admin-detail {
+    border-top: 2px solid var(--light);
+    border-bottom: 1px solid var(--light);
+}
+
+.detail-table .detail-title{
+    background-color: var(--white);
+    border-bottom: 1px solid var(--green);
+}
+
+
+.admin-detail .detail-title {
+    background-color: var(--light);
+    border-bottom: 1px solid var(--blue);
+}
+
+.detail-title td {
+    padding: 2rem 1.5rem;
+}
+
+.detail-table-title {
+    font-size: 1.8rem;
+}
+
+.complex-table th {
+    border: 1px solid var(--white);
+}
+
+.content-navigate tr {
+    border-top: 1px solid var(--gray-dark);
+}
+
+.content-navigate tr td:nth-of-type(1) {
+    border-right: 1px solid var(--light);
+}
+
+
+
+/* 파일찾기 및 필수 */
+
+.form-table input[type="file"] {
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+}
+
+.filebox {
+    height: 4rem;
+}
+
+.filebox .upload-name {
+    display: inline-block;
+    padding: 0.7rem 1rem;
+    vertical-align: middle;
+    border: 1px solid #dddddd;
+    color: #999999;
+}
+
+.form-table label {
+    display: inline-block;
+}
+
+.essential {
+    font-size: 1.3rem;
+}
+
+.essential span {
+    color: var(--red);
+}
+
+.form-table th span,
+.form-table-style .form-table label.form-title,
+.form-table label.form-title {
+    position: relative;
+}
+
+.form-table th span::after,
+.form-table-style .form-table label.form-title::after,
+.form-table label.form-title::after {
+    content: "*";
+    color: var(--red);
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(100%, -50%);
+}
+
+
+
+
+/* 서치 */
+.search-bar {
+    position: relative;
+    .box{
+        position: relative;
+        margin: 0 auto;
+        height: 5.6rem;    
+        width: 54.8rem;
+        padding: 0;
+        border: 0;
+    }
+}
+
+.search-input{
+    
+        border-radius: 0.8rem;
+    border: 1px solid var(--krds-gray-60);
+        width: 100%;
+        height: 100%;
+    
+    
+}
+
+/* placeholder style */
+.search-input::-webkit-input-placeholder {
+	color: #999999;
+	
+}
+.search-input::-moz-placeholder {
+	color: #999999;
+}
+.search-input:-ms-input-placeholder {
+	color: #999999;
+}
+.search-input::-ms-input-placeholder {
+	color: #999999;
+}
+.search-input:focus {
+    border: 2px solid var(--krds-primary-40); /* 원하는 색상으로 변경 (예: 파란색) */
+    outline: none;  /* 포커스 시 outline 제거 (선택사항) */
+  }
+
+.search-button {
+    position: absolute;
+    top: 15px;
+    right: 1rem;
+}
+
+.search-icon {
+    color: #1d1d1d;
+}
+
+.condition-input {
+    border-left: 1px solid var(--dark);
+}
+
+/*PAGINATION*/
+
+.pagination-button-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+}
+
+.pagination-button-type a {
+    display: block;
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid var(--dark);
+    padding: 0 7px;
+    border-radius: 0.5rem;
+}
+
+/* 정우추가 */
+.pagination-button-type a.prev:after {
+    content: "\003C";
+    font-weight: 900;
+
+}
+
+.pagination-button-type a.next:after {
+    content: "\003E";
+    font-weight: 900;
+}
+
+.pagination-button-type a.first-page:after {
+    content: "\003C\003C";
+    font-weight: 900;
+
+}
+
+.pagination-button-type a.end-page:after {
+    content: "\003E\003E";
+    font-weight: 900;
+
+}
+
+.pagination-button-type a.active {
+    background-color: var(--green);
+    color: white;
+    cursor: default !important;
+}
+
+
+
+/* 페이지 템플릿 */
+.gall-img {
+    width: 100%;
+    height: 200px
+}
+
+.gall-img>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+/* 댓글 */
+.comment-zone {
+    background-color: var(--skyblue);
+    border-radius: 1rem;
+}
+
+.comment-zone2 {
+  background-color: var(--background-white);
+  border-radius: 1rem;
+}
+
+.comment-wrap {
+  padding: 16px;
+  background-color: var(--white);
+}
+
+
+
+.comment-item:not(:first-child) {
+  border-top: 1px solid #ddd;
+}
+
+.parents-nodes {
+    padding-left: 8px;
+}
+
+.children-nodes {
+    padding-left: 8px;
+}
+
+.comment-user,
+.comment-text {
+    font-size: 1.3rem;
+}
+
+.comment-date {
+    color: var(--gray);
+    font-size: 1.2;
+}
+
+.reply-zone {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.reply-input {
+    border-radius: 50px;
+}
+
+.reply-btn {
+    position: absolute;
+    border-radius: 50px;
+    top: 50%;
+    right: 6px;
+    transform: translateY(-50%);
+}
+
+/* 팝업 */
+.popup-wrap {
+    height: 100vh;
+}
+
+.popup-container {
+    width: 100%;
+    height: calc(100vh - 50px);
+}
+
+/* 트리 */
+.p-tree {
+    padding: 0.5rem 1rem;
+}
+
+.node-name {
+    width: 100%;
+    font-size: 1.2rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+
+.selected {
+    border: 1px solid var(--blue);
+    border-radius: 0.3rem;
+}
+
+.ghost {
+    height: 15px;
+    color: transparent;
+    border: 1px dashed var(--blue);
+}
+
+.ghost * {
+    display: none;
+}
+
+/* 파일 목록 */
+.file-wrap p {
+  display: block;
+  width: calc(100% - 15px);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.file-wrap button.del-btn {
+  width: 15px;
+}
+
+/* 목록형 공지사항 */
+.list_news {
+    flex-wrap: nowrap;
+}
+.list_news ul {
+    overflow: hidden;
+    
+}
+.list_news ul li.leli, .list_news ul li:nth-child(2n+1) {
+    margin-right: 4%;
+}
+.list_news ul li {
+    float: left;
+    position: relative;
+    width: 48%;
+    margin-bottom: 2px;
+}
+.list_news ul li a {
+    display: block;
+    float: left;
+    width: 100%;
+    vertical-align: middle;
+    padding: 0 80px 0 8px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 25px;
+    font-size: 15px;
+    color: #000;
+    font-weight: 400;
+}
+.list_news ul li span {
+    position: absolute;
+    right: 0;
+    top: 2px;
+    margin-right: 0;
+    text-align: right;
+    font-size: 15px;
+    color: #999;
+    font-family: 'gothic';
+    font-weight: 500;
+}
+.list_news ul li:before {
+    content: '';
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background-color: #62656A;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -1.5px;
+}
+
+ /* 메인 스와이퍼 슬라이드 */
+ .swiper-pagination{    bottom: 0;
+    left: 47%;}
+ .swiper-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+  .swiper-wrapper{
+    
+  }
+  .swiper-slide{height: 296px;}
+  .swiper-slide img {
+    width: 100%;
+    height: 100%;
+    background-color: #aaa;
+    text-align: center;
+  }
+.visual-zone {
+    position: relative;
+    .button {
+      font-size: 0;
+      border: none;
+      background-color: transparent;
+      width: 35px;
+      height: 35px;
+      border: 1px solid #ddd;
+      border-radius: 50%;
+      display: inline-block;
+      vertical-align: middle;
+      cursor: pointer;
+      position: absolute;
+      transition: all 0.1s;
+      z-index: 1;
+
+    }
+    .swiper-slide{height: 297px;}
+    /* 이전 버튼 (prev) */
+    .swiper-button-prev {
+      &::after {
+        content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+        background-image: url(../img/prev.svg);
+        background-size: cover;
+        width: 9px;
+        height: 13px;
+        display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+      }
+    }
+  
+    /* 다음 버튼 (next) */
+    .swiper-button-next {
+      &::after {
+        content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+        background-image: url(../img/next.svg);
+        background-size: cover;
+        width: 9px;
+        height: 13px;
+        display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+      }
+    }
+    .button.stop{
+        &::after {
+            content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+            background-image: url(../img/stop.svg);
+            background-size: cover;
+            width: 9px;
+            height: 13px;
+            display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+          }
+    }
+    .button.play{
+        &::after {
+            content: '';  /* content 속성을 추가하여 ::after 가상 요소를 제대로 표시 */
+            background-image: url(../img/play.svg);
+            background-size: cover;
+            width: 9px;
+            height: 13px;
+            display: block;  /* 이미지를 블록 요소로 만들어 크기 적용 */
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);  /* 이미지를 버튼 중앙에 배치 */
+          }
+    }
+  }
+  .quick-link {
+    display: flex
+;
+    width: 100%;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 10px;
+    transition: height 0.4s;
+}
+  .quick-link li {
+    display: flex
+;
+    align-items: center;
+    flex-direction: column;
+    width: 19%;
+    padding:  10px;
+    border-radius: 15px;
+    border: 1px solid #EEE;
+    background: #FFF;
+    transition: all 0.3s;
+    .link {
+        display: flex
+    ;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 144px;
+        color: #000;
+        text-align: center;
+    }
+    .icon.n1 {
+       background-image: url(../img/A00.svg);
+       width: 51px;
+       height: 50px;
+    }
+}
+
+.banner-zone{
+    padding: 32px 40px;
+    background-color: #081943;
+    border-radius: 16px;
+    -webkit-border-radius: 16px;
+    position: relative;
+    .btn_link {
+        position: absolute;
+        right: 40px;
+        top: 50%;
+        padding-right: 37px;
+        margin-top: -12px;
+        height: 24px;
+        line-height: 24px;
+        color: #fff;
+        font-size: 17px;
+        font-weight: 300;
+        background-image: url(../img/circle_arrow.png);
+        background-repeat: no-repeat;
+        background-position: right center;
+        font-family: 'Noto Sans KR';
+    }
+      .banner_txt {
+        color: #fff;
+    }
+    .banner_txt span {
+        display: block;
+        font-size: 20px;
+        font-weight: 300;
+        line-height: 20px;
+    }
+    .banner_txt span + span {
+        margin-top: 16px;
+    }
+    .banner_txt strong {
+        font-size: 28px;
+        line-height: 28px;
+    }
+}
+.best_service h4 {
+    font-weight: 300;
+    font-size: 24px;
+    line-height: 24px;
+    color: #26282c;
+    strong {
+        font-weight: 600;
+    }
+    span {
+        display: inline-block;
+        margin-right: 10px;
+        padding: 0 11px;
+        height: 24px;
+        line-height: 22px;
+        vertical-align: middle;
+        color: #fff;
+        font-weight: 600;
+        font-size: 16px;
+        background-color: #000;
+        border-radius: 10px;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        -ms-border-radius: 10px;
+        -o-border-radius: 10px;
+    }
+}
+.service_wrap {
+    position: relative;
+    margin-top: 21px;
+    overflow: hidden;
+    border: 1px solid #dde1e4;
+    border-radius: 16px;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    -ms-border-radius: 16px;
+    -o-border-radius: 16px;
+    .best1 {
+        background-color: #e2ffe9;
+    }
+    .label_tag {
+        display: inline-block;
+        padding: 0 10px;
+        height: 21px;
+        line-height: 21px;
+        font-size: 11px;
+        font-weight: 300;
+        border-radius: 10px;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        -ms-border-radius: 10px;
+        -o-border-radius: 10px;
+        margin-right: 3px;
+        vertical-align: top;
+    }
+    .label_tag.etc_tag {
+        border: 1px solid #3878a4;
+        color: #3878a4;
+    }
+    .label_tag.blue_tag {
+        border: 1px solid #5e6aca;
+        color: #5e6aca;
+    }
+    .label_tag.green_tag {
+        border: 1px solid #048528;
+        color: #048528;
+    }
+    .left_cont {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        padding: 30px 38px;
+        width: 50%;
+        min-height: 300px;
+        box-sizing: border-box;
+        .sub_info {
+            margin-top: 20px;
+            font-size: 14px;
+            font-weight: 300;
+            line-height: 20px;
+            color: #000;
+        }
+        .btn_set {
+            margin-top: 27px;
+            .btn_txt {
+                display: inline-block;
+                padding-right: 20px;
+                font-size: 13px;
+                font-weight: 300;
+                color: #000;
+                background-image: url(../img/img_service_05.png);
+                background-repeat: no-repeat;
+                background-position: right;
+                font-family: 'Noto Sans KR';
+            }
+        }
+        .simbol_img {
+            background-image: url(../img/img_service_05.png);
+            background-repeat: no-repeat;
+            position: absolute;
+            right: 0;
+            bottom: 26px;
+            width: 220px;
+            height: 220px;
+        }
+        h5 {
+            margin-top: 15px;
+            font-size: 28px;
+            font-weight: 600;
+            color: #000;
+        }
+    }
+    .right_cont {
+        padding: 8px 42px 20px 38px;
+        width: 50%;
+        margin-left: 50%;
+        box-sizing: border-box;
+        .product_list li + li {
+            border-top: 1px solid #ebeef0;
+        }
+        .btn_small {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            margin-top: -14px;
+        }
+        .product_list li {
+            padding: 24px 0 18px;
+            .pdt_info {
+                position: relative;
+                vertical-align: middle;
+            }
+            .pdt_info strong {
+                line-height: 21px;
+                margin-right: 10px;
+                font-size: 18px;
+                color: #000;
+            }
+            .pdt_info .pdt_simple_info {
+                padding-right: 80px;
+                margin-top: 9px;
+                font-size: 14px;
+                color: #696e76;
+                font-weight: 300;
+                line-height: 20px;
+            }
+        }
+        .product_list li .pdt_info a.btn_list_type {
+            display: block;
+            background-image: url(../img/btn_list_bullet.png);
+            background-repeat: no-repeat;
+            background-position: right center;
+        }
+    }
+    .btn_small {
+        display: inline-block;
+        padding: 0 17px 0 8px;
+        min-width: 76px;
+        height: 28px;
+        line-height: 28px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #fff;
+        background-image: url(../img/btn_bullet_white.png);
+        background-repeat: no-repeat;
+        background-position: right center;
+        box-sizing: border-box;
+        border-radius: 4px;
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        -ms-border-radius: 4px;
+        -o-border-radius: 4px;
+    }
+    .btn_small.btn_bg_green {
+        background-color: #0c834b;
+    }
+    .btn_small.btn_bg_blue {
+        background-color: #0b6bef;
+    }
+}(파일 끝에 줄바꿈 문자 없음)
857ef6e
485a941
client/theme/tema_v2/css/main.css (copied from client/theme/layout1/css/main.css)
--- client/theme/layout1/css/main.css
+++ client/theme/tema_v2/css/main.css
@@ -0,0 +1,0 @@
 
485a941
client/theme/tema_v2/css/style.css (added)
+++ client/theme/tema_v2/css/style.css
@@ -0,0 +1,247 @@
+@charset "utf-8";
+
+/* login */
+
+
+.login-wrap {
+    width: 25%;
+    border: 1px solid var(--light);
+    border-radius: 1.5rem;
+}
+
+.login-title {
+    font-size: 48px;
+    font-weight: 900;
+    color: var(--gray-dark);
+}
+
+.login-title.user-login {
+    color: var(--green);
+}
+
+input.login-input {
+    border: none;
+    border-bottom: 1px solid var(--gray);
+    border-radius: 0;
+}
+
+.login-label {
+    color: var(--gray-dark);
+    font-size: 1.6rem;
+}
+
+.find-zone p {
+    font-size: 1.6rem;
+    color: var(--gray);
+    position: relative;
+}
+
+.find-zone p:nth-of-type(1)::after {
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 1.5rem;
+    border-right: 1px solid var(--gray);
+    right: 0;
+    top: 50%;
+    transform: translate(100%, -50%);
+}
+
+.find-tab{
+    font-size: 2rem;
+    border: 1px solid var(--dark);
+    border-radius: 1rem;
+}
+
+.tab-active{
+    background-color: var(--teal);
+    color: var(--green);
+}
+
+
+/* intro */
+.intro-page {
+    width: 100%;
+    height: calc(100vh);
+    background-image: url(../img/intro_background.png);
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    background-size: auto;
+    padding: 215px 0;
+}
+
+.big-logo img {
+    margin: 0 auto;
+}
+
+.user-division {
+    height: calc(100% - 200px);
+    max-height: 300px;
+}
+
+.user-division>li>.division-item {
+    border-radius: 25px;
+    box-shadow: 0 0 10px var(--light);
+    position: relative;
+}
+
+.user-division>li>.division-item::after {
+    content: '';
+    position: absolute;
+    background-size: auto;
+    background-repeat: no-repeat;
+    bottom: 0;
+    transform: translateY(20%);
+    width: 192px;
+    height: 161px;
+}
+
+.user-division>li:nth-child(1)>.division-item::after {
+    background-image: url(../img/mascot_left.png);
+    right: 0;
+}
+
+.user-division>li:nth-child(2)>.division-item::after {
+    background-image: url(../img/mascot_left.png);
+    left: 0;
+    transform: translateY(20%) scaleX(-1);
+}
+
+.user-division>li>.division-item>img {
+    position: absolute;
+    bottom: 0;
+
+}
+
+.user-division>li:nth-child(1)>.division-item>img {
+    left: 30px;
+}
+
+.user-division>li:nth-child(2)>.division-item>img {
+    right: 30px;
+}
+
+.user-division>li>.division-item>p {
+    font-size: 4.7rem;
+}
+
+/* 공무원 공통 */
+details{
+    border-top: 3px solid var(--green);
+    border-bottom: 2px solid var(--green);
+}
+
+summary{
+    padding: 1rem;
+    background-color: var(--teal);
+    font-size: 1.8rem;
+    color: var(--green);
+
+}
+
+summary::-webkit-details-marker,
+summary::marker {
+    display: none;
+    content: "";
+}
+
+/* 공무원 메인 */
+.tab-nav>ul>li:first-child{
+    padding-left: 0;
+}
+.tab-nav>ul>li:last-child{
+    padding-right: 0;
+}
+.tab-nav>ul>li{height: 3.5rem; cursor: pointer;}
+.tab-nav>ul>li>p {
+    font-size: 1.8rem;
+    text-align: center;
+}
+
+.tab-nav>ul>li.activeTab>p {
+    color: #1D56BC;
+    border-bottom: 5px solid var(--krds-primary);
+}
+
+.select-label {
+    font-size: 1.6rem;
+}
+
+.item-list>li,
+.summary-style {
+    font-size: 1.6rem;
+    position: relative;
+}
+
+.item-list>li::before,
+.summary-style::before{
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 5px;
+    height: 5px;
+}
+
+.summary-style::before{
+    transform: translateY(-50%);
+}
+
+.user-name {
+    font-size: 1.6rem;
+    padding: 0 1rem;
+    color: var(--dark);
+}
+/* 검색페이지 */
+.content-warp p{
+    width: 100%;
+    display: -webkit-box;
+    word-wrap: break-word;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+/* 기업전용 메인  */
+.background-img{
+    width: 100%;
+    height: 100%;
+    object-position: top center;
+}
+.call{
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+
+/* 에디터 이미지 */
+.detail-table img{
+    display: inline;
+}
+
+/* user페이지 퀵메뉴 */
+.quick-menu{
+    position: fixed;
+    top: 20%;
+    right: 0;
+    padding: 2rem;
+    border-radius: 1rem 0 0 1rem;
+    background-color: var(--sky-orange);
+    z-index: 10;
+}
+
+/* 검토사항 */
+.review-table tbody tr td:nth-child(3),
+.review-table tbody tr td:nth-child(4){
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+
+
+
+
+
 
485a941
client/theme/tema_v2/img/A00.svg (added)
+++ client/theme/tema_v2/img/A00.svg
@@ -0,0 +1,1 @@
+<svg width='51' height='50' viewBox='0 0 51 50' fill='none' xmlns='http://www.w3.org/2000/svg'><rect width='50' height='50' transform='translate(0.0714264)' fill='white'/><g filter='url(#filter0_d_176_28474)'><path d='M9.65163 14.3738H39.8908C40.9569 14.3738 41.8262 15.2431 41.8262 16.3092V36.7619C41.8262 37.828 40.9615 38.6974 39.8908 38.6974H9.65163C8.58555 38.6974 7.71622 37.8326 7.71622 36.7619V16.3092C7.71622 15.2431 8.58098 14.3738 9.65163 14.3738Z' fill='#FFE8F4' stroke='#636363' stroke-width='1.14488'/><path d='M24.8787 21.0039H30.2319' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M30.2319 21.0039H24.8787V25.5291H30.2319V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M30.2319 25.5293H24.8787V30.0545H30.2319V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 21.0039H24.8787' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M24.8787 21.0039H19.5208V25.5291H24.8787V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M24.8787 25.5293H19.5208V30.0545H24.8787V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M35.5898 25.5293H30.232V30.0545H35.5898V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M30.2319 30.0548H24.8786V34.58H30.2319V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M35.5898 30.0548H30.232V34.58H35.5898V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M35.5898 21.0039H30.232V25.5291H35.5898V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M24.8787 30.0548H19.5208V34.58H24.8787V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 25.5293H14.1629V30.0545H19.5208V25.5293Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 21.0039H14.1629V25.5291H19.5208V21.0039Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M19.5208 30.0548H14.1629V34.58H19.5208V30.0548Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M16.0299 17.5173C16.0299 18.3775 15.3298 19.0776 14.4696 19.0776C13.6095 19.0776 12.9094 18.3775 12.9094 17.5173V12.5208C12.9094 11.6606 13.6095 10.9606 14.4696 10.9606C15.3298 10.9606 16.0299 11.6606 16.0299 12.5208V17.5173Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/><path d='M36.6377 17.5173C36.6377 18.3775 35.9377 19.0776 35.0775 19.0776C34.2173 19.0776 33.5173 18.3775 33.5173 17.5173V12.5208C33.5173 11.6606 34.2173 10.9606 35.0775 10.9606C35.9377 10.9606 36.6377 11.6606 36.6377 12.5208V17.5173Z' fill='white' stroke='#636363' stroke-width='1.14488' stroke-linecap='round' stroke-linejoin='round'/></g><defs><filter id='filter0_d_176_28474' x='2.96551' y='7.58257' width='46.3567' height='39.9834' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset dx='1.37266' dy='2.74531'/><feGaussianBlur stdDeviation='2.77546'/><feComposite in2='hardAlpha' operator='out'/><feColorMatrix type='matrix' values='0 0 0 0 0.879167 0 0 0 0 0.523837 0 0 0 0 0.822314 0 0 0 0.25 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_176_28474'/><feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_176_28474' result='shape'/></filter></defs></svg>
 
485a941
client/theme/tema_v2/img/btn_bullet_white.png (Binary) (added)
+++ client/theme/tema_v2/img/btn_bullet_white.png
Binary file is not shown
 
485a941
client/theme/tema_v2/img/btn_list_bullet.png (Binary) (added)
+++ client/theme/tema_v2/img/btn_list_bullet.png
Binary file is not shown
 
485a941
client/theme/tema_v2/img/circle_arrow.png (Binary) (added)
+++ client/theme/tema_v2/img/circle_arrow.png
Binary file is not shown
 
485a941
client/theme/tema_v2/img/img_service_05.png (Binary) (added)
+++ client/theme/tema_v2/img/img_service_05.png
Binary file is not shown
 
485a941
client/theme/tema_v2/img/next.svg (added)
+++ client/theme/tema_v2/img/next.svg
@@ -0,0 +1,1 @@
+<svg width='9' height='13' viewBox='0 0 9 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.29469 0.75853L7.73461 7.19857M1.26538 12.2415L7.73356 5.77329' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>
 
485a941
client/theme/tema_v2/img/play.svg (added)
+++ client/theme/tema_v2/img/play.svg
@@ -0,0 +1,1 @@
+<svg width='19' height='38' viewBox='0 0 19 38' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 38V0L19 20.7273L0 38Z' fill='black'/></svg>
 
485a941
client/theme/tema_v2/img/prev.svg (added)
+++ client/theme/tema_v2/img/prev.svg
@@ -0,0 +1,1 @@
+<svg width='9' height='13' viewBox='0 0 9 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.70531 0.75853L1.26539 7.19857M7.73462 12.2415L1.26644 5.77329' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>
 
485a941
client/theme/tema_v2/img/stop.svg (added)
+++ client/theme/tema_v2/img/stop.svg
@@ -0,0 +1,1 @@
+<svg width='7' height='13' viewBox='0 0 7 13' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 0.5V12.5M6 0.5V12.5' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>
857ef6e
485a941
client/views/index.html
--- client/views/index.html
+++ client/views/index.html
@@ -6,15 +6,33 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <meta name="description" content="Node Vue Web">
 
   <link rel="icon" href="../client/favicon.ico" />
 
+
 
+  <!-- 공통css -->
 
   <link rel="stylesheet" href="../client/resources/lib/swiper/swiper-bundle.min.css">
 
   <link rel="stylesheet" href="../client/resources/css/reset.css">
 
-  <link rel="stylesheet" href="../client/resources/css/layout.css">
 
   <link rel="stylesheet" href="../client/resources/css/grid.css">
 
-  <link rel="stylesheet" href="../client/resources/css/component.css">
 
   <link rel="stylesheet" href="../client/resources/css/common.css">
 
-  <link rel="stylesheet" href="../client/resources/css/style.css">
 
   <link rel="stylesheet" href="../client/resources/css/admin.css">
 
   <link rel="stylesheet" href="../client/resources/css/responsive.css">
 
+  <link rel="stylesheet" href="../client/resources/css/layout.css"> 
+
 
+  <!--위쪽 헤더 -->   
+  <!-- <link rel="stylesheet" href="../client/resources/css/header.css"> -->
 
+    <!--좌측 헤더 -->
 
+  <link rel="stylesheet" href="../client/resources/css/header_column.css">
 
+
 
+  <!-- v0 css -->
 
+  <link rel="stylesheet" href="../client/resources/css/component.css"> 
+  <link rel="stylesheet" href="../client/resources/css/style.css">
 
+
 
+  <!-- v1 css -->
 
+  <link rel="stylesheet" href="../client/theme/tema_v1/css/component.css">
 
+  <link rel="stylesheet" href="../client/theme/tema_v1/css/style.css">
 
+
 
+  <!-- v2 css -->
 
+  <link rel="stylesheet" href="../client/theme/tema_v2/css/component.css">
 
+  <link rel="stylesheet" href="../client/theme/tema_v2/css/style.css">
 
+ 
   <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
 
   <script src="../client/resources/lib/swiper/swiper-element-bundle.min.js"></script>
 
   <script type="text/javascript" charset="utf-8" src="../client/ckeditor/build/ckeditor.js"></script>
857ef6e
485a941
client/views/layout/UserHeader.vue
--- client/views/layout/UserHeader.vue
+++ client/views/layout/UserHeader.vue
@@ -6,8 +6,8 @@
 
         : ''
 
     "
 
   >
 
-    <div class="w1400">
 
-      <div class="flex justify-between align-center">
 
+    <div class="header-wrap">
 
+      <div class="flex justify-between align-center header">
 
         <div class="logo">
 
           <router-link
 
             :to="{ path: '/company/main.page' }"
@@ -24,8 +24,7 @@
 
             <img src="/client/resources/img/logo.png" alt="" />
 
           </router-link>
 
         </div>
 
-        <div class="flex justify-end align-center">
 
-          <div v-show="pageRole === 'company'" class="mobile-menu mr10">
 
+        <div v-show="pageRole === 'company'" class="mobile-menu mr10">
 
             <!-- <p class="white detail-text">문의전화</p> -->
 
             <p
 
               :class="
@@ -50,6 +49,9 @@
 
             </div>
 
           </div>
 
           <UserMenu />
 
+        <div class="flex justify-end align-center user-info-wrap">
 
+         
+         
           <div
 
             class="user-info pc-menu"
 
             v-if="this.$store.state.userType === 'government'"
857ef6e
485a941
client/views/layout/UserMenu.vue
--- client/views/layout/UserMenu.vue
+++ client/views/layout/UserMenu.vue
@@ -15,7 +15,7 @@
 
         <p class="text-ct">{{ mainMenu.menuNm }}</p>
 
         <ul
 
           v-if="mainMenu.childList.length > 0"
 
-          class="sub-menu pd30"
 
+          class="sub-menu "
 
           :class="{
 
             show: currentOpenIndex === index,
 
             'company-sub-menu':
@@ -23,25 +23,23 @@
 
               $route.path === '/company/main.page',
 
           }"
 
         >
 
-          <div class="w1400">
 
-            <div class="flex align-start" style="width: 100%">
 
+            <div class="sub-menu-inner" >
 
               <!-- 이벤트 버블링 현상을 막기 위해 click.stop으로 사용 -->
 
               <li
 
                 v-for="(subMenu, subIndex) in mainMenu.childList"
 
                 :key="subIndex"
 
-                class="gd-3"
 
                 @click.stop="selectSubMenu(index, subIndex, subMenu)"
 
               >
 
                 <p>{{ subMenu.menuNm }}</p>
 
                 <ul
 
-                  class="sub-sub-menu pl20"
 
+                  class="sub-sub-menu "
 
                   :class="{ show: currentOpenIndex === index }"
 
                 >
 
                   <!-- 이벤트 버블링 현상을 막기 위해 click.stop으로 사용 -->
 
                   <li
 
                     v-for="(subSubMenu, subSubIndex) in subMenu.childList"
 
                     :key="subSubIndex"
 
-                    class="pt10 pb10"
 
+                    class=""
 
                     @click.stop="
 
                       selectSubSubMenu(index, subIndex, subSubIndex, subSubMenu)
 
                     "
@@ -51,7 +49,6 @@
 
                 </ul>
 
               </li>
 
             </div>
 
-          </div>
 
         </ul>
 
       </li>
 
     </ul>
857ef6e
485a941
client/views/pages/AppRouter.js
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
@@ -48,7 +48,10 @@
 
         meta: { authrt: route.authrtList, typeId: route.contsId }
 
       }));
 
       return newRoutes;
 
-    }
 
+    }else {
 
+      store.commit("setStoreReset");
 
+      window.location = '/'
 
+    }    
   } catch (error) {
 
     return [];
 
   }
 
485a941
client/views/pages/user/government/main/Main_v0.vue (added)
+++ client/views/pages/user/government/main/Main_v0.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="content pt50 pb50">
+    <div class="w1400">
+      <div class="search-bar mb30">
+        <input
+          type="text"
+          class="full-input search-input"
+          placeholder="검색어를 입력하세요."
+          v-model="search.searchText"
+          @keyup.enter="totalSearch"
+        />
+        <button class="icon-button search-button" @click="totalSearch">
+          <svg-icon
+            type="mdi"
+            :path="this.$iconPath()"
+            class="search-icon"
+          ></svg-icon>
+        </button>
+      </div>
+      <div class="chart-zone mb30">
+        <div class="box">
+          <div class="tab-nav mb15">
+            <ul class="flex justify-between align-center">
+              <li
+                v-for="(item, idx) in codeList"
+                :key="idx"
+                :value="item.cd"
+                :class="{
+                  'point-font gd-4': true,
+                  activeTab: activeTab === item.cd,
+                }"
+                @click="showTab(item.cd)"
+              >
+                <p class="pd15">{{ item.cdNm }}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="tab-content">
+            <div>
+              <div class="flex justify-end align-center no-gutters mb15">
+                <div class="select-label gd-1 text-rg mr10">기간</div>
+                <div class="gd-2">
+                  <select
+                    class="full-select"
+                    v-model="searchKeyword"
+                    @change="fnCompanyInfo"
+                  >
+                    <option value="day">일별</option>
+                    <option value="month">월별</option>
+                    <option value="year">연도별</option>
+                  </select>
+                </div>
+              </div>
+              <div class="chart-wrap" ref="chartdiv">
+                <ClusteredColumnChart
+                  :chartData="chartData"
+                  columnX="stats_date"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="community-zone flex">
+        <div class="gd-6 pl0">
+          <div class="box">
+            <div class="box-inner-title flex justify-between align-center">
+              <p>공지사항</p>
+              <router-link
+                to="/government/BBS_MNG_000000000000027/list.page"
+                class="shortcuts flex align-center"
+              >
+                <p class="mr5">바로가기</p>
+                <svg-icon
+                  type="mdi"
+                  :width="15"
+                  :height="15"
+                  :path="this.$iconPath('mdiArrowRight')"
+                ></svg-icon>
+              </router-link>
+            </div>
+            <ul class="item-list" v-if="noticeTop5.length > 0">
+              <li
+                v-for="(notice, idx) in noticeTop5"
+                :key="idx"
+                class="flex justify-between align-center pt5 pl15 cursor"
+                @click="fnNoticeViewDetail(notice.bbsId)"
+              >
+                <p>{{ notice.bbsNm }}</p>
+                <p>{{ notice.regDt }}</p>
+              </li>
+            </ul>
+            <div v-else>
+              <p class="data-none text-ct">등록된 정보가 존재하지 않습니다.</p>
+            </div>
+          </div>
+        </div>
+        <div class="gd-6 pr0">
+          <div class="box">
+            <div class="box-inner-title flex justify-between align-center">
+              <p>기업정보</p>
+              <router-link
+                to="/government/companyInfo/list.page"
+                class="shortcuts flex align-center"
+              >
+                <p class="mr5">바로가기</p>
+                <svg-icon
+                  type="mdi"
+                  :width="15"
+                  :height="15"
+                  :path="this.$iconPath('mdiArrowRight')"
+                ></svg-icon>
+              </router-link>
+            </div>
+            <ul class="item-list" v-if="companyInfoList.length > 0">
+              <li
+                v-for="(item, idx) in companyInfoList"
+                :key="idx"
+                class="flex justify-between align-center pt5 pl15 cursor"
+                @click="fnCompanyInfoViewDetail(item.entId)"
+              >
+                <p>{{ item.entNm }}</p>
+                <p>{{ item.regDt }}</p>
+              </li>
+            </ul>
+            <div v-else>
+              <p class="data-none text-ct">등록된 정보가 존재하지 않습니다.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ClusteredColumnChart from "../../../../component/chart/ClusteredColumnChart.vue";
+import store from "../../../AppStore";
+
+// 통합검색 관련
+import queryParams from "../../../../../resources/js/queryParams";
+import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js";
+
+// API
+import { governmentMainProc } from "../../../../../resources/api/main";
+import { sysListByPageProc } from "../../../../../resources/api/popup";
+import { findFiveNotice } from "../../../../../resources/api/bbsCn";
+
+export default {
+  mixins: [queryParams],
+  components: {
+    ClusteredColumnChart: ClusteredColumnChart,
+  },
+  data() {
+    return {
+      search: { ...defaultTotalSearchParams },
+      mbrId: store.state.mbrId || null, // 사용자 아이디
+      roles: store.state.roles.map((auth) => auth.authority) || [], // 사용자 권한
+      menuType: store.state.userType || null, // 메뉴 타입
+
+      // 공지사항 top5
+      noticeTop5: [],
+
+      // 검색조건
+      codeList: [],
+      activeTab: "categoryTab",
+      searchKeyword: "day",
+
+      // 통계
+      chartData: [],
+
+      popupList: [],
+
+      // 기업정보
+      companyInfoList: [],
+    };
+  },
+  created() {
+    // 쿠키 초기화
+    const today = new Date();
+    let tomorrow = new Date(today.setDate(today.getDate() + 1));
+    tomorrow.setHours(0, 0, 0, 0);
+    tomorrow = new Date(tomorrow);
+    if (this.$cookies.get("popup") == null) {
+      this.$cookies.set("popup", [], tomorrow);
+    }
+
+    this.fnPopupList();
+    this.fnCompanyInfo();
+    this.fnFiveNotice();
+  },
+  methods: {
+    showTab: function (tabName) {
+      this.activeTab = tabName;
+      this.searchKeyword = "day";
+      this.fnCompanyInfo();
+    },
+
+    // 통합검색
+    totalSearch() {
+      if (this.search.searchText === "") {
+        alert("검색어를 입력해주세요.");
+        return;
+      }
+      this.search.mbrId = this.mbrId;
+      this.search.roles = this.roles;
+      this.search.menuType = this.menuType;
+      this.saveQueryParams("totalSearchQueryParams", this.search); // 검색조건 저장
+      this.$router.push({
+        path: "/government/search.page",
+      });
+    },
+
+    // 통계 조회
+    async fnCompanyInfo() {
+      let data = {
+        activeTab: this.activeTab,
+        searchKeyword: this.searchKeyword,
+      };
+      try {
+        const response = await governmentMainProc(data);
+        this.codeList = response.data.data.codeList;
+        this.chartData = response.data.data.governmentStats;
+        this.companyInfoList = response.data.data.companyInfo;
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+
+    // 기업정보 상세 조회
+    fnCompanyInfoViewDetail(entId) {
+      this.$router.push({
+        path: "/government/companyInfo/view.page",
+        query: { pageId: entId },
+      });
+    },
+
+    // 팝업조회(상세)
+    async fnPopupList() {
+      let data = {
+        pageType: this.$store.state.userType,
+      };
+      try {
+        const response = await sysListByPageProc(data);
+        let popupList = response.data.data;
+        if (popupList != null && popupList.length > 0) {
+          this.fnShowPopup(popupList);
+        }
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+    // 팝업 표시
+    fnShowPopup(popupList) {
+      for (let popup of popupList) {
+        let count = false;
+        const popupCookies = this.$cookies.get("popup");
+        if (popupCookies.length > 0) {
+          for (let cookie of popupCookies) {
+            if (popup.popupId == cookie) {
+              count = true;
+            }
+          }
+        }
+        if (!count) {
+          let size = "width=" + popup.wdthLen + ", height=" + popup.vrtcLen;
+          window.open(
+            "/cmmn/popup.page?popupId=" + popup.popupId,
+            "_blank",
+            size + ", scrollbars=no, resizable=no, toolbars=no, menubar=no"
+          );
+        }
+      }
+    },
+
+    // 공지사항 최신 5개 조회
+    async fnFiveNotice() {
+      try {
+        const params = {
+          bbsMngId: "BBS_MNG_000000000000004",
+        };
+        const response = await findFiveNotice(params);
+        this.noticeTop5 = response.data.data;
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+    // 공지사항 상세페이지 이동
+    fnNoticeViewDetail(bbsId) {
+      this.$router.push({
+        path: "/government/BBS_MNG_000000000000004/view.page",
+        query: {
+          pageId: bbsId,
+        },
+      });
+    },
+  },
+};
+</script>
 
485a941
client/views/pages/user/government/main/Main_v1.vue (added)
+++ client/views/pages/user/government/main/Main_v1.vue
@@ -0,0 +1,415 @@
+<template>
+  <div class="content main ">
+    <div class="w1400">
+      
+       <!-- 메인비쥬얼 슬라이드-->
+       <div class="community-zone mb30">
+        <div class="box-out-title flex justify-between align-center">
+          <p>메인비주얼</p>
+          <router-link to="/government/BBS_MNG_000000000000027/list.page" class=" flex align-center">
+            <p class="mr5">바로가기</p>
+            <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+          </router-link>
+        </div>
+        <div class="gall-zone">
+          <div class="swiper-container">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
+                <img :src="item.img" :alt="item.alt" />
+              </div>
+            </div>
+            <div class="swiper-pagination"></div>
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
+          </div>
+        </div>
+      </div>
+      <!-- 바로가기 -->
+      <div class="community-zone mb30">
+        <div class="box-out-title flex justify-between align-center">
+          <p>바로가기</p>
+        </div>
+        <ul class="quick-link">
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+        </ul>
+      </div>
+      <!-- 검색창 -->
+      <div class="community-zone mb30">
+        <div class="box-out-title flex justify-between align-center">
+          <p>통합검색</p>
+        </div>
+        <div class="search-bar text-ct">
+        <div class="box">
+          <input type="text" class="search-input" placeholder="검색어를 입력하세요." v-model="search.searchText"
+            @keyup.enter="totalSearch" />
+          <button class="icon-button search-button" @click="totalSearch">
+            <svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
+          </button>
+        </div>
+       </div>
+      </div>
+     
+      <!-- 카드뉴스 -->
+      <div class="community-zone mb30">
+        <div class=" ">
+          <div class="box-out-title flex justify-between align-center">
+            <p>카드뉴스</p>
+            <router-link to="/government/BBS_MNG_000000000000027/list.page" class="shortcuts flex align-center">
+              <p class="mr5">바로가기</p>
+              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+            </router-link>
+          </div>
+
+          <ul class="search-list">
+            <li class="li box">
+              <a href="component/component_02_01.html">
+                <div class="img-wrap main_1"></div>
+                <div class="conts-wrap">
+                  <h4 class="tit">컴포넌트</h4>
+                  <p class="desc">디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드</p>
+                  <div class="full-input flex justify-end">
+                    <div class="btn-wrap flex align-center">
+                      <p class="mr5">바로가기</p>
+                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li class="li box">
+              <a href="global/global_01.html">
+                <div class="img-wrap main_2"></div>
+                <div class="conts-wrap">
+                  <h4 class="tit">기본 패턴</h4>
+                  <p class="desc">핵심 서비스에서 공통으로 사용되는 과업을 기반으로 일관성있는 경험을 위한 기본 패턴 가이드</p>
+                  <div class="full-input flex justify-end">
+                    <div class="btn-wrap flex align-center">
+                      <p class="mr5">바로가기</p>
+                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li class="li box">
+              <a href="service/service_01_01.html">
+                <div class="img-wrap main_3"></div>
+                <div class="conts-wrap">
+                  <h4 class="tit">서비스 패턴</h4>
+                  <p class="desc">공공웹·앱에서 제공하는 핵심서비스에 대한 사용자 플로우 와 사용자 경험 설계의 가이드</p>
+                  <div class="full-input flex justify-end">
+                    <div class="btn-wrap flex align-center">
+                      <p class="mr5">바로가기</p>
+                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+     
+      <!-- 탭존 -->
+      <div class="chart-zone mb30">
+        <div class="box-out-title flex justify-between align-center">
+          <p>탭메뉴</p>
+        </div>
+        <div class="box">
+          <div class="tab-nav mb15">
+            <ul class="flex justify-between align-center">
+              <li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
+                ' gd-4': true,
+                activeTab: activeTab === item.cd,
+              }" @click="showTab(item.cd)">
+                <p class="pd15">{{ item.cdNm }}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="tab-content">
+            <div>
+              <div class="flex justify-end align-center no-gutters mb15">
+                <div class="select-label gd-1 text-rg mr10">기간</div>
+                <div class="gd-2">
+                  <select class="full-select" v-model="searchKeyword" @change="fnCompanyInfo">
+                    <option value="day">일별</option>
+                    <option value="month">월별</option>
+                    <option value="year">연도별</option>
+                  </select>
+                </div>
+              </div>
+              <div class="chart-wrap" ref="chartdiv">
+                <ClusteredColumnChart :chartData="chartData" columnX="stats_date" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 공지사항 및 배너 -->
+      <div class="community-zone flex">
+        <div class="gd-6 pl20">
+          <div class="box-out-title flex justify-between align-center">
+            <p>공지사항(목록형)</p>
+            <router-link to="/government/BBS_MNG_000000000000027/list.page" class=" flex align-center">
+              <p class="mr5">바로가기</p>
+              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+            </router-link>
+          </div>
+          <div class="box">
+            <div class="list_news clearfix">
+              <ul>
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li> 
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li> 
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1" title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li> 
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="gd-6 pr0">
+          <div class="box-out-title flex justify-between align-center">
+            <p>배너</p>
+            <router-link to="/government/companyInfo/list.page" class=" flex align-center">
+              <p class="mr5">바로가기</p>
+              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+            </router-link>
+          </div>
+          <div class="box">
+
+            <div class="banner-zone">
+          <div class="swiper-container">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
+                <img :src="item.img" :alt="item.alt" />
+              </div>
+            </div>
+            
+            <!-- <button @click="startAutoplay" type="button" class="button play" data-control="play" style="display: none;"><span>분야별 정보 슬라이드 재생</span></button>
+            <button @click="stopAutoplay" type="button" class="button stop hidden" data-control="stop" style=""><span>분야별 정보 슬라이드 정지</span></button> -->
+          </div>
+          <div class="swiper-pagination"></div>
+            <div class="swiper-button-prev button"></div>
+            <div class="swiper-button-next button"></div>
+        </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ClusteredColumnChart from "../../../../component/chart/ClusteredColumnChart.vue";
+import store from "../../../AppStore";
+
+// 통합검색 관련
+import queryParams from "../../../../../resources/js/queryParams";
+import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js";
+
+// API
+import { governmentMainProc } from "../../../../../resources/api/main";
+import { sysListByPageProc } from "../../../../../resources/api/popup";
+import { findFiveNotice } from "../../../../../resources/api/bbsCn";
+import Swiper from 'swiper';
+
+export default {
+  name: 'SwiperComponent',
+  mixins: [queryParams],
+  components: {
+    ClusteredColumnChart: ClusteredColumnChart,
+  },
+  data() {
+    return {
+      slides: [
+        { img: 'https://via.placeholder.com/600x300?text=Slide+1', alt: 'Slide 1' },
+        { img: 'https://via.placeholder.com/600x300?text=Slide+2', alt: 'Slide 2' },
+        { img: 'https://via.placeholder.com/600x300?text=Slide+3', alt: 'Slide 3' },
+      ],
+      search: { ...defaultTotalSearchParams },
+      mbrId: store.state.mbrId || null, // 사용자 아이디
+      roles: store.state.roles.map((auth) => auth.authority) || [], // 사용자 권한
+      menuType: store.state.userType || null, // 메뉴 타입
+
+      // 공지사항 top5
+      noticeTop5: [],
+
+      // 검색조건
+      codeList: [],
+      activeTab: "categoryTab",
+      searchKeyword: "day",
+
+      // 통계
+      chartData: [],
+
+      popupList: [],
+
+      // 기업정보
+      companyInfoList: [],
+    };
+  },
+  created() {
+    // 쿠키 초기화
+    const today = new Date();
+    let tomorrow = new Date(today.setDate(today.getDate() + 1));
+    tomorrow.setHours(0, 0, 0, 0);
+    tomorrow = new Date(tomorrow);
+    if (this.$cookies.get("popup") == null) {
+      this.$cookies.set("popup", [], tomorrow);
+    }
+
+    this.fnPopupList();
+    this.fnCompanyInfo();
+    this.fnFiveNotice();
+  },
+  methods: {
+
+
+    showTab: function (tabName) {
+      this.activeTab = tabName;
+      this.searchKeyword = "day";
+      this.fnCompanyInfo();
+    },
+
+    // 통합검색
+    totalSearch() {
+      if (this.search.searchText === "") {
+        alert("검색어를 입력해주세요.");
+        return;
+      }
+      this.search.mbrId = this.mbrId;
+      this.search.roles = this.roles;
+      this.search.menuType = this.menuType;
+      this.saveQueryParams("totalSearchQueryParams", this.search); // 검색조건 저장
+      this.$router.push({
+        path: "/government/search.page",
+      });
+    },
+
+    // 통계 조회
+    async fnCompanyInfo() {
+      let data = {
+        activeTab: this.activeTab,
+        searchKeyword: this.searchKeyword,
+      };
+      try {
+        const response = await governmentMainProc(data);
+        this.codeList = response.data.data.codeList;
+        this.chartData = response.data.data.governmentStats;
+        this.companyInfoList = response.data.data.companyInfo;
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+
+    // 기업정보 상세 조회
+    fnCompanyInfoViewDetail(entId) {
+      this.$router.push({
+        path: "/government/companyInfo/view.page",
+        query: { pageId: entId },
+      });
+    },
+
+    // 팝업조회(상세)
+    async fnPopupList() {
+      let data = {
+        pageType: this.$store.state.userType,
+      };
+      try {
+        const response = await sysListByPageProc(data);
+        let popupList = response.data.data;
+        if (popupList != null && popupList.length > 0) {
+          this.fnShowPopup(popupList);
+        }
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+    // 팝업 표시
+    fnShowPopup(popupList) {
+      for (let popup of popupList) {
+        let count = false;
+        const popupCookies = this.$cookies.get("popup");
+        if (popupCookies.length > 0) {
+          for (let cookie of popupCookies) {
+            if (popup.popupId == cookie) {
+              count = true;
+            }
+          }
+        }
+        if (!count) {
+          let size = "width=" + popup.wdthLen + ", height=" + popup.vrtcLen;
+          window.open(
+            "/cmmn/popup.page?popupId=" + popup.popupId,
+            "_blank",
+            size + ", scrollbars=no, resizable=no, toolbars=no, menubar=no"
+          );
+        }
+      }
+    },
+
+    // 공지사항 최신 5개 조회
+    async fnFiveNotice() {
+      try {
+        const params = {
+          bbsMngId: "BBS_MNG_000000000000004",
+        };
+        const response = await findFiveNotice(params);
+        this.noticeTop5 = response.data.data;
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+    // 공지사항 상세페이지 이동
+    fnNoticeViewDetail(bbsId) {
+      this.$router.push({
+        path: "/government/BBS_MNG_000000000000004/view.page",
+        query: {
+          pageId: bbsId,
+        },
+      });
+    },
+    stopAutoplay() {
+      if (this.swiperInstance) {
+        this.swiperInstance.autoplay.stop();
+      }
+    },
+    // 자동 슬라이드 전환 시작하기
+    startAutoplay() {
+      if (this.swiperInstance) {
+        this.swiperInstance.autoplay.start();
+        this.swiperInstance.update();
+      }
+    },
+  },
+  mounted() {
+    // Swiper 인스턴스 초기화
+    this.swiperInstance = new Swiper('.swiper-container', {
+      loop: true,  // 슬라이드 반복 여부
+      autoplay: {
+        delay: 2500,  // 2.5초마다 자동으로 슬라이드 전환
+        disableOnInteraction: false,  // 사용자가 슬라이드 조작 후에도 자동 전환 유지
+      },
+      pagination: {
+        el: '.swiper-pagination',  // 페이지네이션 요소
+        clickable: true,  // 페이지네이션 클릭 가능
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',  // 다음 버튼
+        prevEl: '.swiper-button-prev',  // 이전 버튼
+      },
+    });
+  }
+};
+</script>
 
485a941
client/views/pages/user/government/main/Main_v2.vue (added)
+++ client/views/pages/user/government/main/Main_v2.vue
@@ -0,0 +1,458 @@
+<template>
+  <div class="content main ">
+    <div class="w1400">
+      <!-- 공지사항 및 배너 -->
+      <div class="community-zone flex mb30">
+        <div class="gd-4 pr30">
+          <div class="box-out-title flex justify-between align-center">
+            <p>메인비주얼</p>
+            <router-link to="/government/companyInfo/list.page" class=" flex align-center">
+              <p class="mr5">바로가기</p>
+              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+            </router-link>
+          </div>
+          <div class="box">
+
+            <div class="visual-zone">
+              <div class="swiper-container">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide" v-for="(item, index) in slides" :key="index">
+                    <img :src="item.img" :alt="item.alt" />
+                  </div>
+                </div>
+
+                <!-- <button @click="startAutoplay" type="button" class="button play" data-control="play" style="display: none;"><span>분야별 정보 슬라이드 재생</span></button>
+            <button @click="stopAutoplay" type="button" class="button stop hidden" data-control="stop" style=""><span>분야별 정보 슬라이드 정지</span></button> -->
+              </div>
+              <div class="swiper-pagination"></div>
+              <div class="swiper-button-prev button"></div>
+              <div class="swiper-button-next button"></div>
+            </div>
+          </div>
+        </div>
+        <div class="gd-8 ">
+             <!-- 바로가기 -->
+      <div class="community-zone mb20">
+        <div class="box-out-title flex justify-between align-center">
+          <p>바로가기</p>
+        </div>
+        <ul class="quick-link">
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+          <li><a href="/yeyak.do" target="_blank" title="새창열림" class="link"><i class="icon n1"></i>통합예약</a></li>
+        </ul>
+      </div>
+          <div class="box-out-title flex justify-between align-center">
+            <p>공지사항(목록형)</p>
+            <router-link to="/government/BBS_MNG_000000000000027/list.page" class=" flex align-center">
+              <p class="mr5">바로가기</p>
+              <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+            </router-link>
+          </div>
+          <div class="box">
+            <div class="tab-nav mb15">
+            <ul class="flex align-center" style="gap: 30px;">
+              <li v-for="(item, idx) in codeList" :key="idx" :value="item.cd" :class="{
+                ' ': true,
+                activeTab: activeTab === item.cd,
+              }" @click="showTab(item.cd)">
+                <p >{{ item.cdNm }}</p>
+              </li>
+            </ul>
+          </div>
+          <div class="tab-content">
+            <div>
+              <div class="list_news flex justify-between">
+              <ul>
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
+                    title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li>
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
+                    title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li>
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
+                    title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li>
+              </ul>
+              <ul>
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
+                    title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li>
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
+                    title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li>
+                <li class="leli">
+                  <a href="/cop/bbs/BBSMSTR_000000000462/selectBoardArticle.do?nttId=B00000385086yu8gY8wc7ml1"
+                    title="천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)">천안청년센터 이음 매니저 채용 공고(청년인턴, 청년도전지원사업)</a>
+                  <span>2025.01.08</span>
+                </li>
+              </ul>
+            </div>
+            </div>
+          </div>
+            
+          </div>
+        </div>
+        
+      </div>
+
+   
+      <!-- 검색창 -->
+      <div class="community-zone mb30">
+        <div class="box-out-title flex justify-between align-center">
+          <p>통합검색</p>
+        </div>
+        <div class="search-bar text-ct">
+          <div class="box">
+            <input type="text" class="search-input" placeholder="검색어를 입력하세요." v-model="search.searchText"
+              @keyup.enter="totalSearch" />
+            <button class="icon-button search-button" @click="totalSearch">
+              <svg-icon type="mdi" :path="this.$iconPath()" class="search-icon"></svg-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- 배너 -->
+      <div class="community-zone mb30">
+        <div class="best_service">
+							<h4><span>BEST1</span><strong>대제목</strong> 1</h4>
+							<div class="service_wrap">
+								<div class="left_cont best1">
+									<span class="label_tag etc_tag">키워드</span>
+									<h5>부제목</h5>
+									<div class="sub_info">배너내용</div>
+									<div class="point_info"><strong>배너내용 강조</strong></div>
+									
+									<div class="btn_set">
+										<a href="" class="btn_small btn_bg_blue">신청하기</a>
+										
+									</div>
+									<div class="simbol_img"></div>
+								</div>
+								<div class="right_cont">
+									<ul class="product_list">
+										<li>
+											<div class="pdt_info">
+												<strong class="pdt_name">제목</strong>
+												<span class="label_tag blue_tag">키워드</span>
+												<div class="pdt_simple_info">
+													내용
+												</div>
+												<a href=""  class="btn_small btn_bg_green">바로가기</a>
+											</div>
+										</li>
+										<li>
+											<div class="pdt_info">
+												<strong class="pdt_name">제목</strong>
+												<span class="label_tag blue_tag">키워드</span>
+												<div class="pdt_simple_info">내용
+												</div>
+												<a href="" class="btn_small btn_bg_green">바로가기</a>
+											</div>
+										</li>
+										<li>
+											<div class="pdt_info">
+												<strong class="pdt_name">제목</strong><span class="label_tag green_tag">키워드</span><span class="label_tag blue_tag">키워드</span>
+												<div class="pdt_simple_info">내용</div>
+												<a href=""  class="btn_small btn_bg_blue">신청하기</a>
+											</div>
+										</li>
+									</ul>
+								</div>
+							</div>
+						</div>
+      </div>
+      
+      <!-- 카드뉴스 -->
+      <div class="community-zone mb30">
+        <div class=" ">
+          <div class="box-out-title flex justify-between align-center">
+            <p>카드뉴스</p>
+            
+          </div>
+
+          <ul class="search-list">
+            <li class="li box">
+              <a href="component/component_02_01.html">
+                <div class="img-wrap main_1"></div>
+                <div class="conts-wrap">
+                  <h4 class="tit">컴포넌트</h4>
+                  <p class="desc">디지털 정부서비스 UI를 구성하는 공통 요소 기반으로 일관성 있는 구현이 용이한 컴포넌트 가이드</p>
+                  <div class="full-input flex justify-end">
+                    <div class="btn-wrap flex align-center">
+                      <p class="mr5">바로가기</p>
+                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li class="li box">
+              <a href="global/global_01.html">
+                <div class="img-wrap main_2"></div>
+                <div class="conts-wrap">
+                  <h4 class="tit">기본 패턴</h4>
+                  <p class="desc">핵심 서비스에서 공통으로 사용되는 과업을 기반으로 일관성있는 경험을 위한 기본 패턴 가이드</p>
+                  <div class="full-input flex justify-end">
+                    <div class="btn-wrap flex align-center">
+                      <p class="mr5">바로가기</p>
+                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li class="li box">
+              <a href="service/service_01_01.html">
+                <div class="img-wrap main_3"></div>
+                <div class="conts-wrap">
+                  <h4 class="tit">서비스 패턴</h4>
+                  <p class="desc">공공웹·앱에서 제공하는 핵심서비스에 대한 사용자 플로우 와 사용자 경험 설계의 가이드</p>
+                  <div class="full-input flex justify-end">
+                    <div class="btn-wrap flex align-center">
+                      <p class="mr5">바로가기</p>
+                      <svg-icon type="mdi" :width="15" :height="15" :path="this.$iconPath('mdiArrowRight')"></svg-icon>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- 배너존 -->
+      <div class="chart-zone mb30">
+        <div class="box-out-title flex justify-between align-center">
+          <p>배너</p>
+        </div>
+        <div class="banner-zone">
+          <div class="banner_txt">
+								<span>해당페이지</span>
+								<!-- 230808 문구 수정 -->
+								<span class="b_txt"><strong>해당페이지</strong>을 이용해 보세요.</span>
+								<!-- // 230808 문구 수정 -->
+							</div>
+              <a href="" class="btn_link" title="새창열림">바로 체험하기</a>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import ClusteredColumnChart from "../../../../component/chart/ClusteredColumnChart.vue";
+import store from "../../../AppStore";
+
+// 통합검색 관련
+import queryParams from "../../../../../resources/js/queryParams";
+import { defaultTotalSearchParams } from "../../../../../resources/js/defaultTotalSearchParams.js";
+
+// API
+import { governmentMainProc } from "../../../../../resources/api/main";
+import { sysListByPageProc } from "../../../../../resources/api/popup";
+import { findFiveNotice } from "../../../../../resources/api/bbsCn";
+import Swiper from 'swiper';
+
+export default {
+  name: 'SwiperComponent',
+  mixins: [queryParams],
+  components: {
+    ClusteredColumnChart: ClusteredColumnChart,
+  },
+  data() {
+    return {
+      slides: [
+        { img: 'https://via.placeholder.com/600x300?text=Slide+1', alt: 'Slide 1' },
+        { img: 'https://via.placeholder.com/600x300?text=Slide+2', alt: 'Slide 2' },
+        { img: 'https://via.placeholder.com/600x300?text=Slide+3', alt: 'Slide 3' },
+      ],
+      search: { ...defaultTotalSearchParams },
+      mbrId: store.state.mbrId || null, // 사용자 아이디
+      roles: store.state.roles.map((auth) => auth.authority) || [], // 사용자 권한
+      menuType: store.state.userType || null, // 메뉴 타입
+
+      // 공지사항 top5
+      noticeTop5: [],
+
+      // 검색조건
+      codeList: [],
+      activeTab: "categoryTab",
+      searchKeyword: "day",
+
+      // 통계
+      chartData: [],
+
+      popupList: [],
+
+      // 기업정보
+      companyInfoList: [],
+    };
+  },
+  created() {
+    // 쿠키 초기화
+    const today = new Date();
+    let tomorrow = new Date(today.setDate(today.getDate() + 1));
+    tomorrow.setHours(0, 0, 0, 0);
+    tomorrow = new Date(tomorrow);
+    if (this.$cookies.get("popup") == null) {
+      this.$cookies.set("popup", [], tomorrow);
+    }
+
+    this.fnPopupList();
+    this.fnCompanyInfo();
+    this.fnFiveNotice();
+  },
+  methods: {
+
+
+    showTab: function (tabName) {
+      this.activeTab = tabName;
+      this.searchKeyword = "day";
+      this.fnCompanyInfo();
+    },
+
+    // 통합검색
+    totalSearch() {
+      if (this.search.searchText === "") {
+        alert("검색어를 입력해주세요.");
+        return;
+      }
+      this.search.mbrId = this.mbrId;
+      this.search.roles = this.roles;
+      this.search.menuType = this.menuType;
+      this.saveQueryParams("totalSearchQueryParams", this.search); // 검색조건 저장
+      this.$router.push({
+        path: "/government/search.page",
+      });
+    },
+
+    // 통계 조회
+    async fnCompanyInfo() {
+      let data = {
+        activeTab: this.activeTab,
+        searchKeyword: this.searchKeyword,
+      };
+      try {
+        const response = await governmentMainProc(data);
+        this.codeList = response.data.data.codeList;
+        this.chartData = response.data.data.governmentStats;
+        this.companyInfoList = response.data.data.companyInfo;
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+
+    // 기업정보 상세 조회
+    fnCompanyInfoViewDetail(entId) {
+      this.$router.push({
+        path: "/government/companyInfo/view.page",
+        query: { pageId: entId },
+      });
+    },
+
+    // 팝업조회(상세)
+    async fnPopupList() {
+      let data = {
+        pageType: this.$store.state.userType,
+      };
+      try {
+        const response = await sysListByPageProc(data);
+        let popupList = response.data.data;
+        if (popupList != null && popupList.length > 0) {
+          this.fnShowPopup(popupList);
+        }
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+    // 팝업 표시
+    fnShowPopup(popupList) {
+      for (let popup of popupList) {
+        let count = false;
+        const popupCookies = this.$cookies.get("popup");
+        if (popupCookies.length > 0) {
+          for (let cookie of popupCookies) {
+            if (popup.popupId == cookie) {
+              count = true;
+            }
+          }
+        }
+        if (!count) {
+          let size = "width=" + popup.wdthLen + ", height=" + popup.vrtcLen;
+          window.open(
+            "/cmmn/popup.page?popupId=" + popup.popupId,
+            "_blank",
+            size + ", scrollbars=no, resizable=no, toolbars=no, menubar=no"
+          );
+        }
+      }
+    },
+
+    // 공지사항 최신 5개 조회
+    async fnFiveNotice() {
+      try {
+        const params = {
+          bbsMngId: "BBS_MNG_000000000000004",
+        };
+        const response = await findFiveNotice(params);
+        this.noticeTop5 = response.data.data;
+      } catch (error) {
+        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
+      }
+    },
+    // 공지사항 상세페이지 이동
+    fnNoticeViewDetail(bbsId) {
+      this.$router.push({
+        path: "/government/BBS_MNG_000000000000004/view.page",
+        query: {
+          pageId: bbsId,
+        },
+      });
+    },
+    stopAutoplay() {
+      if (this.swiperInstance) {
+        this.swiperInstance.autoplay.stop();
+      }
+    },
+    // 자동 슬라이드 전환 시작하기
+    startAutoplay() {
+      if (this.swiperInstance) {
+        this.swiperInstance.autoplay.start();
+        this.swiperInstance.update();
+      }
+    },
+  },
+  mounted() {
+    // Swiper 인스턴스 초기화
+    this.swiperInstance = new Swiper('.swiper-container', {
+      loop: true,  // 슬라이드 반복 여부
+      autoplay: {
+        delay: 2500,  // 2.5초마다 자동으로 슬라이드 전환
+        disableOnInteraction: false,  // 사용자가 슬라이드 조작 후에도 자동 전환 유지
+      },
+      pagination: {
+        el: '.swiper-pagination',  // 페이지네이션 요소
+        clickable: true,  // 페이지네이션 클릭 가능
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',  // 다음 버튼
+        prevEl: '.swiper-button-prev',  // 이전 버튼
+      },
+    });
+  }
+};
+</script>
857ef6e
485a941
package-lock.json
--- package-lock.json
+++ package-lock.json
@@ -25,6 +25,7 @@
 
         "moment": "^2.30.1",
 
         "new-line": "^1.1.1",
 
         "pg": "8.8.0",
 
+        "swiper": "^5.3.7",
 
         "url-loader": "4.1.1",
 
         "vue": "3.2.40",
 
         "vue-cookies": "^1.8.4",
@@ -2422,6 +2423,21 @@
 
       "funding": {
 
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
 
       }
 
+    },
 
+    "node_modules/dom7": {
 
+      "version": "2.1.5",
 
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
 
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "ssr-window": "^2.0.0"
 
+      }
 
+    },
 
+    "node_modules/dom7/node_modules/ssr-window": {
 
+      "version": "2.0.0",
 
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
 
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
 
+      "license": "MIT"
 
     },
 
     "node_modules/domelementtype": {
 
       "version": "2.3.0",
@@ -4855,6 +4871,12 @@
 
         "node": ">= 10.x"
 
       }
 
     },
 
+    "node_modules/ssr-window": {
 
+      "version": "1.0.1",
 
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
 
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==",
 
+      "license": "MIT"
 
+    },
 
     "node_modules/statuses": {
 
       "version": "2.0.1",
 
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -4980,6 +5002,24 @@
 
       "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
 
       "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g=="
 
     },
 
+    "node_modules/swiper": {
 
+      "version": "5.3.7",
 
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.3.7.tgz",
 
+      "integrity": "sha512-BFpXllmUNj1k/Uz6FRW7ykZfUfeCpfqUZxOxeTFZKYy3gv/kOWULHjwy0xlQIJdsiVGF5nZgRG2VbVl6XWy3gw==",
 
+      "hasInstallScript": true,
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "dom7": "^2.1.3",
 
+        "ssr-window": "^1.0.1"
 
+      },
 
+      "engines": {
 
+        "node": ">= 4.7.0"
 
+      },
 
+      "funding": {
 
+        "type": "patreon",
 
+        "url": "https://www.patreon.com/vladimirkharlampidi"
 
+      }
 
+    },
 
     "node_modules/tapable": {
 
       "version": "2.2.1",
 
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
857ef6e
485a941
package.json
--- package.json
+++ package.json
@@ -20,6 +20,7 @@
 
     "moment": "^2.30.1",
 
     "new-line": "^1.1.1",
 
     "pg": "8.8.0",
 
+    "swiper": "^5.3.7",
 
     "url-loader": "4.1.1",
 
     "vue": "3.2.40",
 
     "vue-cookies": "^1.8.4",
Add a comment
List