mycoms 2024-04-15
240415 김하영
@50a1eb0eabf9d0b0c437df0d6dcc1d17bb8b78aa
resources/css/reset.css
--- resources/css/reset.css
+++ resources/css/reset.css
@@ -61,27 +61,15 @@
 	font-display: swap;
 	src: local('Pretendard Thin'), url(../font/Pretendard-Thin.woff2) format('woff2'), url(../font/Pretendard-Thin.woff) format('woff');
 }
-
 @font-face {
-    font-family: "GmarketSansM";
-    src: url("/client/resources/font/GmarketSansMedium.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
+	font-family: 'MontserratBlack';
+    src: url('../font/Montserrat-Black.ttf') format('truetype');
+}
+@font-face {
+	font-family: 'MontserratBolde';
+    src: url('../font/Montserrat-Bold.ttf') format('truetype');
 }
 
-@font-face {
-    font-family: "GmarketSansL";
-    src: url("/client/resources/font/GmarketSansLight.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "GmarketSansB";
-    src: url("/client/resources/font/GmarketSansBold.woff") format("woff");
-    font-weight: bold;
-    font-style: normal;
-}
 
 * {
     padding: 0;
resources/css/responsive.css
--- resources/css/responsive.css
+++ resources/css/responsive.css
@@ -247,7 +247,7 @@
     }
 
     .box-wrap-title {
-        font-size: 1.3rem !important;
+        font-size: 1.5rem !important;
         font-weight: 800;
         margin-bottom: 0px;
     }
@@ -291,9 +291,10 @@
     .text-area {
         width: 100% !important;
         height: 100% !important;
-        padding: 12rem 2rem;
+        padding: 6rem 2rem;
     }
-
+    .year span{
+display: none;    }
     .innerSwiper-title {
         font-size: 1.7rem;
     }
@@ -319,6 +320,7 @@
 
     .portfolio-text {
         padding-left: 2rem;
+        margin-bottom: 1rem;
     }
 
     .marketing-wrap-title h1::after {
@@ -327,14 +329,14 @@
         background-size: 20px;
         transform: translateX(-50%);
     }
-
+  
     .marketing-area {
         width: 100%;
         grid-template-columns: 1fr;
     }
 
     .marketing-title {
-        font-size: 1.8rem;
+        font-size: 1.8rem !important;
     }
 
     .gradient-bottom {
@@ -400,9 +402,9 @@
         width: 100%;
     }
 
-    #footer {
+    footer {
         width: 100%;
-        padding: 20px;
+        padding: 20px !important;
     }
 
     .footer-wrap {
@@ -429,12 +431,14 @@
         padding: 9rem 2rem;
     }
 
-    #footer img {
-        width: 100px !important;
+    footer img {
+        width: 50% !important;
+        height: 50%;
     }
 
     .container {
         width: 100%;
+        height: 70% !important;
     }
 
     .about-title-sub {
@@ -554,6 +558,7 @@
     }
 
     .about-vision-box img {
+        width: 100%;
         height: 150px;
         display: block;
         object-fit: contain;
@@ -570,7 +575,7 @@
     }
 
     .active-year {
-        font-size: 2rem;
+        font-size: 3rem;
     }
 
     .contents {
@@ -691,22 +696,23 @@
     }
 
     #smart .box-wrap-title {
-        display: block !important;
+        font-size: 1.6rem !important;
         font-weight: 600 !important;
+        word-break: keep-all;
+
     }
 
     #etc .etc-box-title {
-        display: block !important;
         font-weight: 600 !important;
         width: 100%;
     }
 
     #smart .etc-wrap-text div p,
     #etc .etc-box p {
-        font-size: 1rem;
+        font-size: 1.4rem;
         padding: 0px;
-        font-weight: 200;
-        display: none;
+        text-align: center;
+        font-weight: 400;
     }
 
     .solution-area {
@@ -729,6 +735,8 @@
 
     .solution-text-box div div p {
         width: 100%;
+        margin-left: 3px;
+        padding-left: 1.2rem;
     }
 
     .etc-wrap-text,
@@ -750,9 +758,7 @@
     }
 
 
-    .box-wrap div {
-        padding: 1rem;
-    }
+  
 
     .traffic-video {
         width: 90%;
@@ -779,8 +785,9 @@
 
     .etc-wrap-text p,
     .box-wrap p {
-        font-size: 1.5rem;
+        font-size: 1.6rem;
         margin-bottom: 2rem;
+        font-weight: 500;
     }
 
 
@@ -832,11 +839,6 @@
         padding-top: 0rem;
     }
 
-    .etc-box-title {
-        font-weight: 900;
-        text-align: center !important;
-        font-size: 2.2rem !important;
-    }
 
     .etc-box p {
         text-align: left;
@@ -846,7 +848,10 @@
         grid-template-columns: 1fr 1fr 1fr !important;
     }
 
-
+.etc-box{
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}
     .box-wrap img {
         width: 100%;
         padding-bottom: 0rem !important;
@@ -860,23 +865,37 @@
     .smart-title {
         margin-bottom: 10px !important;
     }
-
+    .year{
+        font-size: 2rem;
+    }
     .box-wrap div p {
         text-align: center;
         margin: 0 auto;
-        padding: 1px;
+        word-break: keep-all;
+        font-weight: 400 !important;
+        padding: 10px 0 !important;
         margin-bottom: 0rem !important;
-        font-size: 1.5rem !important;
     }
-
+    .etc-text-deco p::after{
+        display: none;
+    }
+    .solution-deco p{
+        margin-left: 0.4rem;
+    }
+.traffic-img-box{
+    width: 100% !important;
+}
+.traffic-img-box img{
+    width: 100% !important;
+    object-fit: cover !important;
+}
     .etc-box-title {
         font-weight: 700;
         text-align: center !important;
-        font-size: 2.2rem !important;
+        font-size: 1.6rem !important;
     }
 
     .box-wrap div div {
-        display: none;
         height: 37% !important;
     }
 
@@ -1021,6 +1040,13 @@
         width: 100%;
         text-align: right;
     }
+    .traffic-img-box{
+        width: 100% !important;
+    }
+    .traffic-img-box img{
+        width: 100% !important;
+        object-fit: cover !important;
+    }
 
     summary::-webkit-details-marker {
         display: none;
@@ -1143,13 +1169,16 @@
         background-color: #fff;
     }
 
-
+    .traffic-img-box img{
+        width: 100% !important;
+        object-fit: cover !important;
+    }
 
     .solution-text,
     .portfolio-text,
     .map-text,
     .about-title p:nth-child(1) {
-        font-size: 2.5rem !important;
+        font-size: 2.7rem !important;
         padding-bottom: 1rem;
     }
 
@@ -1163,24 +1192,27 @@
     .ai-title p,
     .meta-title p,
     .smart-title p {
-        font-size: 2.3rem;
+        font-size: 2.5rem;
         margin: 1rem;
         word-break: keep-all;
     }
 
     .sub-text,
     .solution-sub-text {
-        font-size: 1.3rem !important;
+        font-size: 1.8rem !important;
         margin-bottom: 0rem;
+        word-break: keep-all;
     }
-
+    .accordion-sub-text{
+        font-size: 1.6rem !important;
+    }
     .marketing-wrap-title h1 {
         font-size: 3rem;
     }
 
     .accordion.active .accordion-num,
     .accordion.active .accordion-num span {
-        font-size: 2rem;
+        font-size: 2.5rem;
     }
 
     .history-box {
@@ -1231,13 +1263,13 @@
     }
 
     .box p:nth-child(1) {
-        font-size: 1.4rem;
+        font-size: 1.8rem;
         font-weight: 600;
     }
 
     .box p {
         font-weight: 300;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
     }
 
 
@@ -1273,11 +1305,12 @@
     }
 
     .innerSwiper-title {
-        font-size: 1.7rem;
+        font-size: 1.9rem;
     }
 
     .innerSwiper-text {
-        font-size: 1.3rem;
+        word-break: keep-all;
+        font-size: 1.5rem;
     }
 
     .innerSwiper .swiper-slide {
@@ -1310,7 +1343,9 @@
         width: 100%;
         grid-template-columns: 1fr;
     }
-
+    .month{
+        width: 100%;
+    }
     .marketing-title {
         font-size: 1.8rem;
     }
@@ -1353,12 +1388,12 @@
     .address-tile {
         width: 100%;
         text-align: center;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
         padding-left: 0px;
     }
 
     .address-subtitle {
-        font-size: 1.1rem !important;
+        font-size: 1.4rem !important;
     }
 
     .address-tile::after {
@@ -1371,16 +1406,17 @@
 
     .map-btn button {
         /* width: 40%; */
-        font-size: 1.2rem;
+        font-size: 1.5rem;
+        font-weight: 500;
     }
 
     .address-box {
         width: 100%;
     }
 
-    #footer {
+    footer {
         width: 100%;
-        padding: 20px;
+        padding: 20px !important;
     }
 
     .footer-wrap {
@@ -1393,8 +1429,8 @@
 
     .footer-text div p,
     .footer-text p {
-        width: 100%;
-        font-size: 1.2rem !important;
+        width: 100% !important;
+        font-size: 1.3rem !important;
         padding-left: 0px !important;
     }
 
@@ -1406,10 +1442,13 @@
         width: 100%;
         padding: 9rem 2rem;
     }
-
-    #footer img {
+.etc-box{
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}
+    /* footer img {
         width: 100px !important;
-    }
+    } */
 
     .container {
         width: 100%;
@@ -1434,7 +1473,7 @@
     }
 
     .month-text p {
-        font-size: 1.2rem;
+        font-size: 1.6rem;
     }
 
     .about-radius,
@@ -1481,9 +1520,9 @@
         padding: 10px;
     }
 
-    .slideText p:last-child,
+    
     .slideTextDtail p {
-        font-size: 1.2rem;
+        font-size: 1.5rem;
     }
 
     .slideText p:first-child {
@@ -1502,15 +1541,18 @@
 
     .solution-web-box img {
         width: 100%;
+
         object-fit: contain !important;
         height: 200px !important;
-        margin-bottom: 0px !important;
+        margin-bottom: 20px !important;
     }
-
+.history-area{
+    gap: 0px !important;
+}
 
     .month-text img {
         width: 100px !important;
-        height: 150px;
+        height: 215px;
     }
 
     
@@ -1556,7 +1598,7 @@
 
     .taken-wrap-box {
         width: 100% !important;
-        gap: 10px !important;
+        gap: 40px !important;
         flex-direction: column;
     }
 
@@ -1669,7 +1711,7 @@
 
     #smart .etc-wrap-text div p,
     #etc .etc-box p {
-        font-size: 1rem;
+        font-size: 2rem !important;
         padding: 0px;
         font-weight: 200;
         display: none;
@@ -1714,10 +1756,10 @@
         margin-bottom: 5px;
     }
 
-
-    .box-wrap div {
-        padding: 1rem;
+    .etc-wrap-text div{
+        flex-wrap: wrap !important;
     }
+   
 
     .traffic-video {
         width: 90%;
@@ -1731,7 +1773,7 @@
 
     .traffic-button button {
         padding: 7px 46px;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
     }
 
     .taken-area p {
@@ -1744,7 +1786,7 @@
 
     .etc-wrap-text p,
     .box-wrap p {
-        font-size: 1.5rem;
+        font-size: 2rem;
         margin-bottom: 2rem;
     }
 
@@ -1823,15 +1865,15 @@
     .ai-title,
     .meta-title,
     .smart-title {
-        margin-bottom: 10px !important;
+        margin-bottom: 40px !important;
     }
 
     .box-wrap div p {
         text-align: center;
         margin: 0 auto;
-        padding: 1px;
+        padding: 10px 0;
         margin-bottom: 0rem !important;
-        font-size: 1.5rem !important;
+        font-size: 2rem !important;
     }
 
     .etc-box-title {
@@ -1847,13 +1889,14 @@
 
     .etc-wrap-title h1,
     .customized-wrap-title h1 {
-        font-size: 2.3rem !important;
+        padding: 3rem 0 0 0;
+        font-size: 2.8rem !important;
         word-break: keep-all;
     }
 
     .etc-wrap-title p,
     .customized-wrap-title p {
-        font-size: 1.5rem !important;
+        font-size: 2rem !important;
         margin-bottom: 2rem;
     }
 
@@ -1929,7 +1972,7 @@
         font-size: 1.5rem;
         background-size: cover;
         background-position: center;
-        padding: 10px !important;
+        padding: 15px !important;
     }
 
     .box2,
@@ -2376,7 +2419,6 @@
         align-items: start;
         gap: 5px !important;
     }
-
 
 
     .taken-box {
resources/css/style.css
--- resources/css/style.css
+++ resources/css/style.css
@@ -8,14 +8,17 @@
     /* padding-top: 12rem; */
     text-align: center;
 }
-.content{
+
+.content {
     -ms-overflow-style: none;
     /* 인터넷 익스플로러 */
     scrollbar-width: none;
 }
-.month{
+
+.month {
     margin-right: 3rem;
 }
+
 .mobil-wrap {
     display: none;
 }
@@ -79,14 +82,16 @@
     from {
         width: 0;
         opacity: 0;
-        transform: scaleX(0); /* 애니메이션 시작 시 요소의 가로 크기를 0으로 설정 */
+        transform: scaleX(0);
+        /* 애니메이션 시작 시 요소의 가로 크기를 0으로 설정 */
         transform-origin: center;
     }
 
     to {
         width: 100%;
         opacity: 1;
-        transform: scaleX(1); /* 애니메이션 종료 시 요소의 가로 크기를 원래대로 복원 */
+        transform: scaleX(1);
+        /* 애니메이션 종료 시 요소의 가로 크기를 원래대로 복원 */
         transform-origin: center;
     }
 }
@@ -124,6 +129,7 @@
 
 .sub-text {
     opacity: 0;
+    font-size: 2.4rem;
 }
 
 .sub-text.active {
@@ -142,7 +148,8 @@
     font-weight: 700;
     opacity: 0;
 }
-.map-wrap{
+
+.map-wrap {
     box-shadow: 2px 2px 15px #1c1c1c3a;
 }
 
@@ -162,7 +169,8 @@
     font-size: 1.6rem;
 }
 
-.box-area{
+.box-area {
+    font-weight: 600;
     font-size: 2.3rem;
     margin-bottom: 1.3rem;
 }
@@ -288,7 +296,7 @@
     opacity: 0;
     font-size: 2rem;
     margin-bottom: 2rem;
-	font-family: 'Pretendard';
+    font-family: 'Pretendard';
 }
 
 .solution-sub-text.active {
@@ -539,7 +547,7 @@
 
 
 
-.innerSwiper-text{
+.innerSwiper-text {
     font-size: 2rem;
 }
 
@@ -553,13 +561,12 @@
 .innerSwiper .swiper-slide img {
     display: block;
     width: 100%;
-    height: 80%;
     background-color: #F8F9FA;
     object-fit: scale-down;
     /* padding: 4rem; */
     border-radius: 10px;
     box-shadow: 2px 2px 5px #5454541b;
-    margin-bottom: 20px;
+    margin-bottom: 40px;
 }
 
 .portfolio-text {
@@ -567,9 +574,9 @@
     font-weight: 700;
     text-align: left;
 }
+
 .innerSwiper-textBox {
     height: 160px;
-    padding: 15px 0 0 0;
 }
 
 .innerSwiper-title,
@@ -607,12 +614,10 @@
 
 .map-btn button {
     border: 1px solid #213F99;
-    padding: 10px 15px 10px 35px;
+    padding: 10px 15px 10px 45px;
     border-radius: 30px;
-    font-size: 1.4rem;
+    font-size: 2.1rem;
     font-family: 'Pretendard';
-
-    font-weight: 600;
     color: #213F99;
     background: url(../img/common/location-dot-solid.svg) no-repeat 15px center / 15px;
     background-color: #FFFFFF;
@@ -661,6 +666,7 @@
 .address-subtitle {
     padding: 5px 0;
     font-size: 2rem;
+    font-weight: 500;
 }
 
 .map {
@@ -671,9 +677,9 @@
 
 
 
-#footer {
+footer {
     width: 100%;
-    padding: 30px;
+    padding: 40px;
     position: relative;
     bottom: -10%;
     left: 0;
@@ -682,9 +688,10 @@
     background-color: #333;
 }
 
-#footer img {
+footer img {
     text-align: left !important;
-    width: 200px !important;
+    width: 300px !important;
+    height: 36px;
     padding: 0px !important;
 }
 
@@ -839,11 +846,11 @@
 }
 
 
-.taken-area p {
-    font-size: 1.7rem;
-    margin-top: 1rem;
+.text-after p {
+    font-size: 1.8rem;
     font-weight: 600;
     padding-left: 20px;
+    margin-top: 1rem;
 }
 
 .taken-box {
@@ -852,24 +859,27 @@
     gap: 30px;
 }
 
+.text-after span {
+    font-weight: 900;
+}
+
 .taken-box p {
     width: 100%;
     font-family: 'Pretendard';
     background-color: #F8F9FA;
-    padding: 13px;
+    padding: 14px;
     text-align: center;
     font-size: 2rem;
     border-radius: 10px;
     font-weight: 600;
     z-index: 2;
 }
-.solution-ani img {
-    margin-bottom: 2rem;
-}
+
+
 
 .solution-text-box {
     width: 100%;
-    padding: 15px 30px;
+    padding: 15px 18px 15px 45px;
     border-radius: 10px;
     background-color: #fff;
     box-shadow: 2px 2px 5px #3e3e3e30;
@@ -877,24 +887,52 @@
 
 .solution-text-box p {
     font-weight: 500;
-    font-size: 1.5rem;
-    padding-left: 20px;
+    margin-top: 1rem;
+    font-size: 1.6rem;
+    position: relative;
 }
-.text-box p{
+
+.solution-deco p {
+    margin-left: 1.8rem;
+
+}
+
+.solution-deco-sub p {
+    position: relative;
+    padding-left: 15px;
+}
+
+.solution-deco-sub p::after {
+    content: '-';
+    position: absolute;
+    top: 0%;
+    left: -1%;
+}
+
+.solution-deco p::after {
+    content: '-';
+    position: absolute;
+    top: 0%;
+    left: -4%;
+}
+
+.text-box p {
     font-size: 1.6rem;
     margin-bottom: 1.7rem;
     text-align: left;
-    word-break: keep-all;
+    padding: 0 10px;
+    /* word-break: -all; */
 }
 
-.box-wrap-title{
+.box-wrap-title {
     font-size: 2.4rem !important;
-    font-weight: 500;
+    font-weight: 600;
     text-align: center !important;
     font-family: 'Pretendard';
 
 }
-.visuali-text p{
+
+.visuali-text p {
     font-size: 2.1rem;
     word-break: keep-all;
     font-weight: 500;
@@ -923,6 +961,7 @@
 
 .traffic-button {
     width: 100%;
+    padding-bottom: 6rem;
 }
 
 .traffic-button button {
@@ -965,7 +1004,7 @@
 }
 
 .traffic-area img {
-    width: 80%;
+    width: 100%;
     background-size: cover;
 }
 
@@ -1036,13 +1075,14 @@
 
 .marketing-area img {
     width: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 25px;
     border-radius: 20px;
 }
 
 .marketing-area p {
-    margin-bottom: 10px;
+    margin-bottom: 17px;
     font-weight: 600;
+    font-size: 1.6rem;
 }
 
 .marketing-area p span {
@@ -1052,10 +1092,16 @@
 }
 
 .marketing-title {
-    font-size: 2rem;
+    font-size: 2.4rem !important ;
+    font-weight: 800 !important;
+    margin-bottom: 20px !important;
+    font-family: 'Pretendard';
+
 }
 
 .marketing-date {
+    font-size: 1.6rem;
+    font-weight: 400 !important;
     text-align: right;
 }
 
@@ -1071,7 +1117,8 @@
     background: linear-gradient(#fff, #fff, #d7e2ff);
 
 }
-.about-title-sub{
+
+.about-title-sub {
     font-size: 2.4rem;
 }
 
@@ -1174,6 +1221,11 @@
     animation-delay: 0.8s;
 }
 
+.about-sub-text {
+    word-break: keep-all;
+    font-size: 1.5rem;
+}
+
 .about-text {
     text-align: center;
     color: #213F99;
@@ -1221,10 +1273,13 @@
     }
 }
 
+.accordion-text p {
+    font-size: 1.5rem !important;
+}
 
 .accordion {
     height: 100%;
-    padding: 2rem;
+    padding: 1rem 4rem;
     cursor: pointer;
     flex: 1;
     justify-content: space-between;
@@ -1240,7 +1295,7 @@
 
 .slideText p:first-child {
     font-size: 3rem;
-    font-family: "GmarketSansB";
+    font-family: "GmarketSansBold";
     font-weight: bold;
     font-style: normal;
     z-index: 5;
@@ -1266,10 +1321,19 @@
 .slideText p:last-child,
 .slideTextDtail p {
     margin-bottom: 1rem;
-    font-size: 1.5rem;
     opacity: 0;
     color: #333;
 }
+
+.slideText p:last-child {
+    font-size: 2.1rem;
+
+}
+
+.slideTextDtail p {
+    font-size: 1.8rem;
+}
+
 
 .slideImg {
     margin-bottom: 10px;
@@ -1280,7 +1344,6 @@
 .slideImg img {
     border-radius: 1rem;
     width: 100%;
-    height: 250px !important;
 }
 
 
@@ -1302,20 +1365,45 @@
     z-index: 1;
 }
 
-.accordion.active .accordion-num
- {
+.accordion.active .accordion-num {
     color: #80649b;
+    font-size: 3.6rem;
+	font-family: 'MontserratBolde';
+
+    font-weight: bold;
+
+}
+
+.accordion.active .accordion-num-red {
+    color: #FA665D;
     font-size: 3rem;
     font-weight: 700;
 }
-.accordion.active .accordion-num span{
-    color:#b1a1c3;
+
+.accordion.active .accordion-num-red span {
+    color: #FCB0AE !important;
 }
+
+.accordion.active .accordion-num span {
+    color: #b1a1c3;
+    font-size: 3.6rem;
+    font-weight: bold;
+	font-family: 'MontserratBolde';
+}
+
 .accordion.active p,
 .slideTextDtail.active p {
     opacity: 1;
     color: #333;
     /* transition: opacity 0.3s ease-in 0.4s; */
+}
+
+.accordion-sub-text {
+    color: #80649b !important;
+}
+
+.accordion-sub-red {
+    color: #FA665D !important;
 }
 
 .accordion-box p {
@@ -1329,7 +1417,7 @@
 }
 
 .about-vision-box img {
-    /* width: 40%; */
+    width: 40%;
     /* padding: 30px; */
     object-fit: contain !important;
 
@@ -1361,20 +1449,22 @@
 }
 
 .year {
-    width: 200px;
+    width: 220px;
     color: #D6DEF6;
     font-weight: 900;
-    font-size: 2rem;
+    font-size: 2.5rem;
     transition: all 0.2s ease;
     padding: 2rem 0;
 }
 
 .year span {
-    font-size: 2rem;
+    font-size: 2.4rem;
     font-weight: 900;
 
 }
-
+.traffic-img-box{
+    width: 100%;
+}
 .active-year {
     font-size: 7rem;
     font-weight: 900;
@@ -1388,7 +1478,7 @@
 
 
 .month-text img {
-    border: 1px solid #808080;
+    border: 1px solid #b1b1b1;
     padding: 5px;
     width: 120px;
     margin-right: 1rem;
@@ -1399,7 +1489,7 @@
 
 .active-year {
     color: #213F99;
-    font-weight: bold;
+    font-weight: 900;
     cursor: default;
 }
 
@@ -1441,7 +1531,7 @@
 }
 
 .etc-box-title {
-    font-weight: 600;
+    font-weight: 700;
     text-align: center !important;
     font-size: 2.4rem !important;
 }
@@ -1459,8 +1549,7 @@
 
 .etc-box p {
     font-size: 1.6rem;
-    line-height: 2;
-    padding-left: 2rem;
+    line-height: 1.5;
 }
 
 #contentDaeguBranch {
@@ -1472,7 +1561,8 @@
     display: none;
 }
 
-.video-wrap,.di {
+.video-wrap,
+.di {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -1521,9 +1611,25 @@
     font-size: 1.9rem;
 }
 
-.analysis-text img{
+.analysis-text img {
     height: 80%;
 }
-.analysis-text p{
- font-size: 2rem;
+
+.analysis-text p {
+    height: 50px;
+    font-size: 2rem;
+    padding: 0 10px;
+    word-break: keep-all;
+    font-weight: 500;
+}
+.etc-text-deco p{
+    position: relative;
+    margin-left: 5px;
+}
+.etc-text-deco p::after{
+    content: '-';
+    position: absolute;
+    top: 0;
+    left: -1%;
+
 }
(No newline at end of file)
 
resources/font/GmarketSansBold.woff (Binary) (deleted)
--- resources/font/GmarketSansBold.woff
Binary file is not shown
 
resources/font/GmarketSansLight.woff (Binary) (deleted)
--- resources/font/GmarketSansLight.woff
Binary file is not shown
 
resources/font/GmarketSansMedium.woff (Binary) (deleted)
--- resources/font/GmarketSansMedium.woff
Binary file is not shown
 
resources/font/Montserrat-Black.ttf (Binary) (added)
+++ resources/font/Montserrat-Black.ttf
Binary file is not shown
 
resources/font/Montserrat-BlackItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-BlackItalic.ttf
Binary file is not shown
 
resources/font/Montserrat-Bold.ttf (Binary) (added)
+++ resources/font/Montserrat-Bold.ttf
Binary file is not shown
 
resources/font/Montserrat-BoldItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-BoldItalic.ttf
Binary file is not shown
 
resources/font/Montserrat-ExtraBold.ttf (Binary) (added)
+++ resources/font/Montserrat-ExtraBold.ttf
Binary file is not shown
 
resources/font/Montserrat-ExtraBoldItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-ExtraBoldItalic.ttf
Binary file is not shown
 
resources/font/Montserrat-ExtraLight.ttf (Binary) (added)
+++ resources/font/Montserrat-ExtraLight.ttf
Binary file is not shown
 
resources/font/Montserrat-ExtraLightItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-ExtraLightItalic.ttf
Binary file is not shown
 
resources/font/Montserrat-Italic.ttf (Binary) (added)
+++ resources/font/Montserrat-Italic.ttf
Binary file is not shown
 
resources/font/Montserrat-Light.ttf (Binary) (added)
+++ resources/font/Montserrat-Light.ttf
Binary file is not shown
 
resources/font/Montserrat-LightItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-LightItalic.ttf
Binary file is not shown
 
resources/font/Montserrat-Medium.ttf (Binary) (added)
+++ resources/font/Montserrat-Medium.ttf
Binary file is not shown
 
resources/font/Montserrat-MediumItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-MediumItalic.ttf
Binary file is not shown
 
resources/font/Montserrat-Regular.ttf (Binary) (added)
+++ resources/font/Montserrat-Regular.ttf
Binary file is not shown
 
resources/font/Montserrat-SemiBold.ttf (Binary) (added)
+++ resources/font/Montserrat-SemiBold.ttf
Binary file is not shown
 
resources/font/Montserrat-SemiBoldItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-SemiBoldItalic.ttf
Binary file is not shown
 
resources/font/Montserrat-Thin.ttf (Binary) (added)
+++ resources/font/Montserrat-Thin.ttf
Binary file is not shown
 
resources/font/Montserrat-ThinItalic.ttf (Binary) (added)
+++ resources/font/Montserrat-ThinItalic.ttf
Binary file is not shown
resources/img/common/traffic-img.png (Binary)
--- resources/img/common/traffic-img.png
+++ resources/img/common/traffic-img.png
Binary file is not shown
resources/img/component/logo-w.png (Binary)
--- resources/img/component/logo-w.png
+++ resources/img/component/logo-w.png
Binary file is not shown
views/index.html
--- views/index.html
+++ views/index.html
@@ -174,6 +174,7 @@
         }
 
         .innerSwiper {
+            height: 75%;
             transition-timing-function: linear;
         }
     </style>
@@ -245,9 +246,9 @@
                 </div>
             </div>
             <div class="swiper-slide portfolio-zone">
-                <div class=" Portfolio pt120 pb60 flex align-center" style="align-content: center; width: 100%; ">
-                    <div style="width: 1200px; margin: auto; ">
-                        <p class="portfolio-text pt120 mb20 ">PORTFOLIO</p>
+                <div class=" Portfolio pt60 pb60 flex align-center" style="align-content: center; width: 100%; ">
+                    <div style="width: 1200px; margin: auto; " class="pt120">
+                        <p class="portfolio-text  mb70 ">PORTFOLIO</p>
                     </div>
                     <div class="swiper innerSwiper">
                         <div class="swiper-wrapper">
@@ -555,7 +556,7 @@
     });
     var innerswiper = new Swiper(".innerSwiper", {
         slidesPerView: 3,
-        spaceBetween: 30,
+        spaceBetween: 60,
         autoplay: {
             delay: 0,
             disableOnInteraction: false,
@@ -576,7 +577,7 @@
             // 화면의 넓이가 640px 이상일 때
             640: {
                 slidesPerView: 3,
-                spaceBetween: 40
+                spaceBetween: 60
             }
         },
     });
views/pages/AboutUs.html
--- views/pages/AboutUs.html
+++ views/pages/AboutUs.html
@@ -71,7 +71,7 @@
 
         .container {
             width: 1200px;
-            height: 70%;
+            height: 80%;
             display: flex;
             flex-wrap: nowrap;
             border-radius: 20px;
@@ -116,6 +116,11 @@
         .month-text p {
             word-break: keep-all;
         }
+        .month-text span{
+            color: #b1b1b1;
+            font-size: 2.5rem;
+            margin-right: 1rem;
+        }
     </style>
 
     <title>TAKENSOFT</title>
@@ -146,7 +151,7 @@
 
                             <div class="about-radius-right solution-ani">
                                 <p class="about-text">생각</p>
-                                <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
+                                <p class="about-sub-text">가치를 찾기 위한 유연한 사고방식</p>
                             </div>
                         </div>
                         <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
@@ -164,26 +169,26 @@
                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="text-area flex align-center justify-center pb60 pt120" style="align-content: center;">
-                    <div class="about-title mb20" style="width: 100%;">
+                <div class="text-area flex align-center justify-center pb60 pt90" style="align-content: center;">
+                    <div class="about-title mb40" style="width: 100%;">
                         <p class="mb20">Business</p>
-                        <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
+                        <p class=" about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
                             해결합니다.</p>
                     </div>
                     <div class="container silde-box">
-                        <div class="accordion flex justify-between"
-                            style="background-image: url(../../resources/img/common/about-img1.png);">
-                            <div class="slideText  ">
+                        <div class="accordion flex justify-between "
+                            style="background: url(../../resources/img/common/about-img1.png) no-repeat; background-size: cover;">
+                            <div class="slideText">
                                 <p class="accordion-num mb10"><span>01.</span> AI Solution</p>
-                                <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
+                                <p class="accordion-sub-text">AI 기술 종합 관리를 통한 솔루션 구현</p>
                             </div>
                             <div class="slideImg">
                                 <img src="../../resources/img/common/about-img-db.png" alt="">
                             </div>
                             <div class="slideTextDtail">
                                 <div>
-                                    <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
-                                    <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
+                                    <p><span>·</span> 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
+                                    <p><span>·</span> 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
                                     <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
                                         통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
                                 </div>
@@ -191,11 +196,15 @@
                                     <div style="width: 20%;">
                                         <p>[대표사례]</p>
                                     </div>
-                                    <div class=" flex justify-between accordion-box">
-                                        <p>·도로 위험 감지 시스템</p>
-                                        <p>·경로 최적화 서비스</p>
-                                        <p>·안개 감지 시스템</p>
-                                        <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
+                                    <div class="flex accordion-text" style="flex-wrap: nowrap; width: 100%;">
+                                        <div class="flex-column " style="width: 60%;">
+                                            <p><span>·</span>도로 위험 감지 시스템</p>
+                                            <p><span>·</span>안개 감지 시스템</p>
+                                        </div>
+                                        <div class="flex-column " style="width: 100%;">
+                                            <p><span>·</span>경로 최적화 서비스</p>
+                                            <p><span>·</span>위치 기반 기자재 관리 및 모니터링 서비스</p>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -204,9 +213,9 @@
                         </div>
                         <div class="accordion "
                             style="background-image: url(../../resources/img/common/about-img2.png);">
-                            <div class="slideText  ">
-                                <p class="accordion-num mb10"><span>02.</span> System Design</p>
-                                <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
+                            <div class="slideText">
+                                <p class="accordion-num mb10 accordion-num-red" ><span>02.</span> System Design</p>
+                                <p class="accordion-sub-red">고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
                             </div>
                             <div class="slideImg">
                                 <img src="../../resources/img/common/about-img-bg02.png" alt="">
@@ -218,11 +227,11 @@
                                     <div style="width: 20%;">
                                         <p>[대표사례]</p>
                                     </div>
-                                    <div class="flex-column">
-                                        <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
-                                        <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
-                                        <p>· 경로 최적화 서비스</p>
-                                        <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
+                                    <div class="flex-column  accordion-text">
+                                        <p><span>·</span>정부혁신 웹사이트 기능개선 및 유지관리 </p>
+                                        <p><span>·</span>스마트 팩토리 공정 관리 모니터링 서비스</p>
+                                        <p><span>·</span>경로 최적화 서비스</p>
+                                        <p><span>·</span>시니어 스마트 케어 모니터링 플랫폼</p>
                                     </div>
                                 </div>
                             </div>
@@ -231,14 +240,14 @@
                             style="background-image: url(../../resources/img/common/about-img3.png);">
                             <div class="slideText ">
                                 <p class="accordion-num mb10"><span>03.</span> Data Science </p>
-                                <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
+                                <p class="accordion-sub-text">수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
                             </div>
                             <div class="slideImg">
                                 <img src="../../resources/img/common/about-img-bg03.png" alt="">
                             </div>
                             <div class="slideTextDtail">
-                                <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
-                                <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
+                                <p><span>·</span>데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
+                                <p><span>·</span>기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
                                 <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
                                     수요기관 및 기업 확장
                                 </p>
@@ -246,9 +255,9 @@
                                     <div style="width: 20%;">
                                         <p>[대표사례]</p>
                                     </div>
-                                    <div class="flex-column">
-                                        <p>· 데이터 품질관리 컨설팅</p>
-                                        <p>· AI 안전통합 횡단보도 플랫폼</p>
+                                    <div class="flex-column  accordion-text">
+                                        <p><span>·</span>데이터 품질관리 컨설팅</p>
+                                        <p><span>·</span>AI 안전통합 횡단보도 플랫폼</p>
                                     </div>
                                 </div>
                             </div>
@@ -278,19 +287,19 @@
                 <div style="width: 100%; height: 100%; flex-wrap: nowrap;" class="flex ">
 
 
-                    <div class="text-area flex pb60 pt120" style="align-content: center;">
+                    <div class="text-area flex  pt120" style="align-content: center;">
 
                         <div class="about-title mb20" style="width: 100%;">
                             <p>History</p>
                         </div>
-                        <div class="flex history-area" style="height: 100%; width: 100%; gap: 100px;">
+                        <div class="flex history-area" style="height: 80%; width: 100%; gap: 100px;">
 
                             <div class="years" id="years">
-                                <div class="year tab active-year" data-year="section1">2021</div>
-                                <div class="year tab" data-year="section2">2022</div>
-                                <div class="year tab" data-year="section3">2023</div>
+                                <div class="year tab active-year" data-year="section1">2021 <span>년</span></div>
+                                <div class="year tab" data-year="section2">2022 <span>년</span></div>
+                                <div class="year tab" data-year="section3">2023 <span>년</span></div>
                             </div>
-                            <div style="align-content: center; overflow-y: auto; height: 100%;" class="history-box">
+                            <div style="align-content: center; overflow-y: auto; height: 90%;" class="history-box">
 
                                 <div class="test">
 
@@ -299,32 +308,32 @@
 
                                             <p class="month ">5월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 주식회사 테이큰 소프트 설립</p>
-                                                <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
+                                                <p><span>·</span>주식회사 테이큰 소프트 설립</p>
+                                                <p><span>·</span>영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
 
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">10월</p>
                                             <div class="month-text text-section" style="text-align: left;">
-                                                <p>· 소프트웨어 기업 등록</p>
+                                                <p><span>·</span>소프트웨어 기업 등록</p>
                                                 <img src="../../resources/img/common/history-img1.png" alt="">
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">11월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
-                                                <p>· Taken BI Manager v1.0 저작권 등록</p>
+                                                <p><span>·</span>김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
+                                                <p><span>·</span>Taken BI Manager v1.0 저작권 등록</p>
                                                 <img src="../../resources/img/common/history-img2.png" alt="">
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">12월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
-                                                <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
-                                                <p>· 도로 모니터링 시스템 저작권 등록</p>
+                                                <p><span>·</span>어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
+                                                <p><span>·</span>Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
+                                                <p><span>·</span>도로 모니터링 시스템 저작권 등록</p>
                                                 <div class="flex">
                                                     <img src="../../resources/img/common/history-img31.png" alt="">
                                                     <img src="../../resources/img/common/history-img32.png" alt="">
@@ -342,57 +351,57 @@
                                         <div class="flex">
                                             <p class="month ">1월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
+                                                <p><span>·</span>구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">3월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 기업부설연구소 설립</p>
+                                                <p><span>·</span>기업부설연구소 설립</p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">4월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
+                                                <p><span>·</span>상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">5월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
-                                                <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
+                                                <p><span>·</span>대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
+                                                <p><span>·</span>영천시 공공데이터 품질관리 용역 (영천시)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">7월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
+                                                <p><span>·</span>영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">9월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
+                                                <p><span>·</span>상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">10월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
+                                                <p><span>·</span>데이터 관리 및 분석 솔루션 구매 (상주시) </p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">12월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
-                                                <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
-                                                <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
-                                                <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p>
-                                                <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
-                                                <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
-                                                <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
-                                                <p>· 경로 생성 기술 관련 출원사실증명 </p>
+                                                <p><span>·</span>데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
+                                                <p><span>·</span>상주시 데이터 활용 기본계획 용역 (상주시) </p>
+                                                <p><span>·</span>스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
+                                                <p><span>·</span>행정정보 데이터 백업테이프 구입 (영주시) </p>
+                                                <p><span>·</span>행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
+                                                <p><span>·</span>SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
+                                                <p><span>·</span>한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
+                                                <p><span>·</span>경로 생성 기술 관련 출원사실증명 </p>
                                                 <img src="../../resources/img/common/history-img4.png" alt="">
 
                                             </div>
@@ -404,9 +413,9 @@
                                         <div class="flex">
                                             <p class="month ">1월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
-                                                <p>· 복약지도 장치 및 방법 출원사실증명 </p>
-                                                <p>· Traffic Agent 저작권 등록 </p>
+                                                <p><span>·</span>행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
+                                                <p><span>·</span>복약지도 장치 및 방법 출원사실증명 </p>
+                                                <p><span>·</span>Traffic Agent 저작권 등록 </p>
 
                                                 <div class="flex">
                                                     <img src="../../resources/img/common/history-img51.png" alt="">
@@ -418,22 +427,22 @@
                                         <div class="flex">
                                             <p class="month ">2월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
-                                                <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
+                                                <p><span>·</span>한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
+                                                <p><span>·</span>대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">3월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
+                                                <p><span>·</span>AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">4월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
-                                                <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
-                                                <p>· 기업부설연구소 인정서 획득 </p>
+                                                <p><span>·</span>G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
+                                                <p><span>·</span>포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
+                                                <p><span>·</span>기업부설연구소 인정서 획득 </p>
                                                 <img src="../../resources/img/common/history-img6.png" alt="">
 
                                             </div>
@@ -441,13 +450,13 @@
                                         <div class="flex">
                                             <p class="month ">5월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
+                                                <p><span>·</span>영천시 맞춤형 데이터 분석사업 (영천시) </p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">6월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
+                                                <p><span>·</span>정보통신공사업 면허 획득, 벤처기업 인증 </p>
                                                 <div class="flex">
                                                     <img src="../../resources/img/common/history-img71.png" alt="">
                                                     <img src="../../resources/img/common/history-img72.png" alt="">
@@ -457,24 +466,24 @@
                                         <div class="flex">
                                             <p class="month ">7월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
-                                                <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
+                                                <p><span>·</span>공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
+                                                <p><span>·</span>정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">8월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
-                                                <p>· 메타버스 기술 관련 출원사실증명</p>
+                                                <p><span>·</span>SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
+                                                <p><span>·</span>메타버스 기술 관련 출원사실증명</p>
                                                 <img src="../../resources/img/common/history-img8.png" alt="">
                                             </div>
                                         </div>
                                         <div class="flex">
                                             <p class="month ">9월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
-                                                <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
-                                                <p>· 시니어 케어 시스템 저작권 등록</p>
+                                                <p><span>·</span>한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
+                                                <p><span>·</span>SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
+                                                <p><span>·</span>시니어 케어 시스템 저작권 등록</p>
                                                 <img src="../../resources/img/common/history-img9.png" alt="">
 
                                             </div>
@@ -482,8 +491,8 @@
                                         <div class="flex">
                                             <p class="month ">11월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· 한기술평가 우수기업 인증 (T-5)</p>
-                                                <p>· 통합 모빌리티 솔루션 저작권 등록</p>
+                                                <p><span>·</span>한기술평가 우수기업 인증 (T-5)</p>
+                                                <p><span>·</span>통합 모빌리티 솔루션 저작권 등록</p>
                                                 <div class="flex">
                                                     <img src="../../resources/img/common/history-img100.png" alt="">
                                                     <img src="../../resources/img/common/history-img101.png" alt="">
@@ -493,11 +502,11 @@
                                         <div class="flex">
                                             <p class="month ">12월</p>
                                             <div class="month-text" style="text-align: left;">
-                                                <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
-                                                <p>· 구미시 키워드 분석 용역 (구미시)</p>
-                                                <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
-                                                <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
-                                                <p>· AI 횡단보도 기술 관련 출원사실증명</p>
+                                                <p><span>·</span>DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
+                                                <p><span>·</span>구미시 키워드 분석 용역 (구미시)</p>
+                                                <p><span>·</span>AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
+                                                <p><span>·</span>구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
+                                                <p><span>·</span>AI 횡단보도 기술 관련 출원사실증명</p>
                                                 <img src="../../resources/img/common/history-img110.png" alt="">
 
 
views/pages/Customized.html
--- views/pages/Customized.html
+++ views/pages/Customized.html
@@ -20,7 +20,7 @@
         footer {
     width: 100%;
     /* height: 300px; */
-    padding: 30px;
+    padding: 40px;
     /* opacity: 0; */
     /* display: none; */
     position: relative;
@@ -104,8 +104,8 @@
     }
 
     .box-wrap p {
-        padding-top: 1rem;
         font-size: 2.1rem;
+        font-weight: 500;
     }
     .dropdown {
         background-color: #fff !important;
@@ -129,19 +129,19 @@
                 <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
                     <div class="solution-ani">
                         <img src="../../resources/img/common/custom-img.png" alt="">
-                        <p>상주시 데이터 활용 <br>기본계획 수립</p>
+                        <p class="mt30">상주시 데이터 활용 <br>기본계획 수립</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/custom-img2.png" alt="">
-                        <p>영천시 데이터 활용 <br>기본계획 수립</p>
+                        <p class="mt30">영천시 데이터 활용 <br>기본계획 수립</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/custom-img3.png" alt="">
-                        <p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
+                        <p class="mt30">포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/custom-img4.png" alt="">
-                        <p>영천시 공공데이터 <br>품질관리</p>
+                        <p class="mt30">영천시 공공데이터 <br>품질관리</p>
                     </div>
                 </div>
             </div>
@@ -153,7 +153,7 @@
                     <img src="../../resources/img/component/logo-w.png" alt="">
                 </div>
                 <hr>
-                <div class="footer-text pt10">
+                <div class="footer-text pt10 pb40">
                     <div class="flex justify-between ">
     
                         <p>대표자 ) 임상현</p>
@@ -166,7 +166,7 @@
                     <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
                     <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
                 </div>
-                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
+                <p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
             </div>
         </footer>
     </div>
views/pages/Data.html
--- views/pages/Data.html
+++ views/pages/Data.html
@@ -18,7 +18,7 @@
         footer {
             width: 100%;
             /* height: 300px; */
-            padding: 30px;
+            padding: 40px;
             /* opacity: 0; */
             /* display: none; */
             position: relative;
@@ -90,14 +90,11 @@
             width: 100%;
         }
 
-        .box-wrap div img {
-            padding-bottom: 2rem;
-        }
 
         .box-wrap div p {
-            font-size: 2rem;
+            font-size: 2.1rem;
             font-weight: 600;
-            padding: 10px 20px;
+            padding: 0 40px;
         }
 
         .dropdown {
@@ -111,28 +108,28 @@
 
 <body>
     <div id="header"></div>
-    <div style=" display: flex; flex-direction: column;background: linear-gradient(#f8f9fa, #fff, #fff) !important;">
+    <div style=" display: flex; flex-direction: column; background: linear-gradient(#d7e2ff9d, #fff, #fff) !important;">
 
         <div class=" text-area pb60 pt120  slide-section flex align-center " id="Data" style="height: 100vh;">
 
 
             <div class="flex justify-between " style="gap: 10px; width: 100%;">
-                <div class="etc-wrap-title pb20">
-                    <h1 class="mb20 pt40">데이터분석을 통한 인사이트 도출</h1>
+                <div class="etc-wrap-title pb50">
+                    <h1 class="mb20">데이터분석을 통한 인사이트 도출</h1>
                     <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
                 </div>
                 <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
                     <div class="solution-ani">
                         <img src="../../resources/img/common/data-img1.png" alt="">
-                        <p>구미시 주요 이슈 및 민원 분석</p>
+                        <p class="mt30">구미시 주요 이슈 및 민원 분석</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/data-img2.png" alt="">
-                        <p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
+                        <p class="mt30">영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/data-img3.png" alt="">
-                        <p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
+                        <p class="mt30">김천시 무더위 쉼터 선정 위한 데이터 분석</p>
                     </div>
 
                 </div>
@@ -146,7 +143,7 @@
                     <img src="../../resources/img/component/logo-w.png" alt="">
                 </div>
                 <hr>
-                <div class="footer-text pt10">
+                <div class="footer-text pt10 pb40">
                     <div class="flex justify-between ">
     
                         <p>대표자 ) 임상현</p>
@@ -159,7 +156,7 @@
                     <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
                     <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
                 </div>
-                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
+                <p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
             </div>
         </footer>
     </div>
views/pages/DataAnalysis.html
--- views/pages/DataAnalysis.html
+++ views/pages/DataAnalysis.html
@@ -19,7 +19,7 @@
         footer {
             width: 100%;
             /* height: 300px; */
-            padding: 30px;
+            padding: 40px;
             /* opacity: 0; */
             /* display: none; */
             position: relative;
@@ -103,9 +103,8 @@
 <body>
     <div id="header"></div>
 
-    <div style="        background: linear-gradient(#f8f9fa, #fff, #fff);
+    <div style="        background: linear-gradient(#d7e2ff9d, #fff, #fff);
     ">
-
 
         <div class="text-area pb60 pt120 slide-section flex align-center " id="dataanalysis"
             style="gap: 10px;  height: 100vh; align-content: center;">
@@ -113,42 +112,42 @@
                 <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
                 <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
             </div>
-            <div class="flex justify-between align-end etc-wrap-text analysis-text" style="gap: 60px;">
+            <div class="flex justify-between align-end etc-wrap-text analysis-text" style="gap: 30px;">
                 <div style="width: 100%; gap: 30px; flex-wrap: nowrap;" class="flex align-end">
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
-                        <p>도로 위험 감지 시스템</p>
+                        <p class="mt30">도로 위험 감지 시스템</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
-                        <p>안개 감지 플랫폼</p>
+                        <p class="mt30">안개 감지 플랫폼</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
-                        <p>이동경로 최적화 서비스</p>
+                        <p class="mt30">이동경로 최적화 서비스</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
-                        <p>횡단보도 및 내비게이션 연계 플랫폼</p>
+                        <p class="mt30">횡단보도 및 내비게이션 연계 플랫폼</p>
                     </div>
 
                 </div>
                 <div style="width: 100%; gap: 30px; flex-wrap: nowrap;" class="flex align-end">
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
-                        <p>전력데이터 관리 시스템</p>
+                        <p class="mt30">전력데이터 관리 시스템</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
-                        <p>금형 부품 데이터 관리 플랫폼</p>
+                        <p class="mt30">금형 부품 데이터 관리 플랫폼</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
-                        <p>제조 데이터 관리 시스템</p>
+                        <p class="mt30">제조 데이터 관리 시스템</p>
                     </div>
                     <div class="solution-ani">
                         <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
-                        <p>메타데이터 관리 시스템</p>
+                        <p class="mt30">메타데이터 관리 시스템</p>
                     </div>
 
                 </div>
@@ -160,7 +159,7 @@
                     <img src="../../resources/img/component/logo-w.png" alt="">
                 </div>
                 <hr>
-                <div class="footer-text pt10">
+                <div class="footer-text pt10 pb40">
                     <div class="flex justify-between ">
     
                         <p>대표자 ) 임상현</p>
@@ -173,7 +172,7 @@
                     <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
                     <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
                 </div>
-                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
+                <p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
             </div>
         </footer>
     </div>
views/pages/Etc.html
--- views/pages/Etc.html
+++ views/pages/Etc.html
@@ -104,6 +104,10 @@
         .dropdown {
             background-color: #fff !important;
         }
+        .etc-text-deco p{
+            padding-left: 10px;
+            margin-bottom: 10px;
+        }
     </style>
     
 
@@ -121,19 +125,25 @@
                 <div class="etc-wrap-title mb30 pt60">
                     <h1 class="mb20">기타사례</h1>
                 </div>
-                <div class="flex justify-between box-wrap etc-grid-box" style="width: 100%; gap: 20px; ">
-                    <div class="etc-box solution-ani">
+                <div class="flex justify-between box-wrap etc-grid-box" style="width: 100%; gap: 30px; flex-wrap: nowrap;">
+                    <div class="etc-box solution-ani" style="margin-left: 70px;">
                         <img src="../../resources/img/common/etc-img.png" alt="">
-                        <p class="etc-box-title">정부혁신 웹사이트 기능개선 및 유지관리</p>
-                        <p>- 혁신24 웹사이트 UI/UX 개선 및 검색 알고리즘 기능 개선 등을 통한 유지관리</p>
-                        <p>- 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
-                        <p>- 홈페이지 검색 기능 강화와 직관적인 UI/UX 디자인을 적용하여 정보 접근성 개선</p>
+                        <p class="etc-box-title pd20">정부혁신 웹사이트 기능개선 및 유지관리</p>
+                        <div class="etc-text-deco">
+
+                            <p> 혁신24 웹사이트 UI/UX 개선 및 검색 알고리즘 기능 개선 등을 통한 유지관리</p>
+                            <p> 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
+                            <p> 홈페이지 검색 기능 강화와 직관적인 UI/UX 디자인을 적용하여 정보 접근성 개선</p>
+                        </div>
                     </div>
-                    <div class="etc-box solution-ani">
+                    <div class="etc-box solution-ani"style="margin-right: 70px;">
                         <img src="../../resources/img/common/etc-img2.png" alt="">
-                        <p class="etc-box-title">AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
-                        <p>- AI 디지털교과서 통합지원센터 홈페이지 프로토타입 개발 및 운영</p>
-                        <p>- AI 디지털교과서 개발사 및 에듀테크 기업의 특성을 고려한 다양한 개발 지원 모델 개발</p>
+                        <p class="etc-box-title pt20 pb20">AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
+                        <div class="etc-text-deco">
+
+                            <p> AI 디지털교과서 통합지원센터 홈페이지 프로토타입 개발 및 운영</p>
+                            <p> AI 디지털교과서 개발사 및 에듀테크 기업의 특성을 고려한 다양한 개발 지원 모델 개발</p>
+                        </div>
                     </div>
 
                 </div>
views/pages/Marketing.html
--- views/pages/Marketing.html
+++ views/pages/Marketing.html
@@ -104,7 +104,7 @@
     <div id="header"></div>
 
     <div class=" marketing-wrapper pb100">
-        <div class="marketing-wrap-title mb70">
+        <div class="marketing-wrap-title mb50">
             <h1>Marketing</h1>
         </div>
         <div class="marketing-area ">
views/pages/SmartCtiy.html
--- views/pages/SmartCtiy.html
+++ views/pages/SmartCtiy.html
@@ -19,7 +19,7 @@
         footer {
             width: 100%;
             /* height: 300px; */
-            padding: 30px;
+            padding: 40px;
             /* opacity: 0; */
             /* display: none; */
             position: relative;
@@ -86,15 +86,15 @@
             flex-wrap: nowrap;
         }
 
-  
+
 
         .etc-wrap-text {
             width: 100%;
         }
 
-   
 
-   
+
+
         .dropdown {
             background-color: #fff !important;
         }
@@ -118,23 +118,29 @@
                     제공합니다.</p>
             </div>
             <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap; gap: 30px;">
-                <div class="solution-ani text-box">
+                <div class="solution-ani text-box ">
                     <img src="../../resources/img/common/smart-img3.png" alt="">
-                    <p class="box-wrap-title mb20">AI 안전통합 횡단보도 플랫폼</p>
-                    <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
-                    <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
+                    <p class="box-wrap-title mb20 mt20">AI 안전통합 횡단보도 플랫폼</p>
+                    <div class="etc-text-deco">
+                        <p> 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
+                        <p> 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
+                    </div>
                 </div>
                 <div class=" solution-ani text-box">
                     <img src="../../resources/img/common/smart-img2.png" alt="">
-                    <p class="box-wrap-title mb20">시니어 스마트 케어 모니터링 서비스</p>
-                    <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
-                    <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
+                    <p class="box-wrap-title mb20 mt20">시니어 스마트 케어 모니터링 서비스</p>
+                    <div class="etc-text-deco">
+                        <p> 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
+                        <p> IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
+                    </div>
                 </div>
                 <div class="solution-ani text-box">
                     <img src="../../resources/img/common/smart-img1.png" alt="">
-                    <p class="box-wrap-title mb20">전력 에너지 모니터링 시스템</p>
-                    <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
-                    <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
+                    <p class="box-wrap-title mb20 mt20">전력 에너지 모니터링 시스템</p>
+                    <div class="etc-text-deco">
+                        <p> 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
+                        <p> 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
+                    </div>
                 </div>
 
             </div>
@@ -147,9 +153,9 @@
                     <img src="../../resources/img/component/logo-w.png" alt="">
                 </div>
                 <hr>
-                <div class="footer-text pt10">
+                <div class="footer-text pt10 pb40">
                     <div class="flex justify-between ">
-    
+
                         <p>대표자 ) 임상현</p>
                         <p style="width: 17.5%;">FAX ) 053-811-1701</p>
                     </div>
@@ -160,7 +166,7 @@
                     <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
                     <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
                 </div>
-                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
+                <p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
             </div>
         </footer>
     </div>
views/pages/Solution.html
--- views/pages/Solution.html
+++ views/pages/Solution.html
@@ -93,7 +93,6 @@
             display: block;
             width: 100%;
             object-fit: cover;
-            padding: 5rem 0 1.9rem 0;
             z-index: 3;
         }
         .dropdown {
@@ -112,13 +111,13 @@
                 <div class=" text-area pb60 pt120 slide-section flex align-center solution"
                     style="align-content: center;">
 
-                    <div class="solution-title mb60">
+                    <div class="solution-title mb40">
                         <p>Taken BI Manager v1.0</p>
                     </div>
-                    <div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 20px;">
+                    <div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 30px;">
                         <div class="taken-area taken-conteiner flex align-end solution-web-box"
-                            style="gap: 20px; height: 100%; width: 50%;">
-                            <img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
+                            style="gap: 30px; height: 100%; width: 50%;">
+                            <img src="../../resources/img/common/solution-img1.png" alt="" >
                             <div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
                                 <p>데이터 수집,저장,관리</p>
                                 <p>솔루션 제공 기반 맞춤형 서비스</p>
@@ -130,24 +129,24 @@
                                 <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
                                 <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
                                     서비스를 제공합니다.</p>
-                                <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
+                                <P>데이터의 <span>수집 / 관리 / 분석 / 시각화 4가지 기능</span>을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
                             </div>
-                            <div class="solution-text-box">
-                                <h3 class="text-box-title mb10 ml30">주요기능</h3>
-                                <p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
-                                <p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
-                                <p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
+                            <div class="solution-text-box solution-deco">
+                                <h3 class="text-box-title ">주요기능</h3>
+                                <p> File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
+                                <p> 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
+                                <p> 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
                             </div>
-                            <div class="solution-text-box">
-                                <h3 class="text-box-title  ml30">특장점</h3>
-                                <div class="flex " style="gap: 10px; flex-wrap: nowrap;">
+                            <div class="solution-text-box solution-deco-sub">
+                                <h3 class="text-box-title  ">특장점</h3>
+                                <div class="flex " style="gap: 80px; flex-wrap: nowrap;">
                                     <div class="flex-column">
-                                        <p>- DB 연계형 데이터 수집 서비스</p>
-                                        <p>- 데이터 시각화 시스템</p>
+                                        <p class=""> DB 연계형 데이터 수집 서비스</p>
+                                        <p class=""> 데이터 시각화 시스템</p>
                                     </div>
                                     <div class="flex-column">
-                                        <p>- 데이터 저장/관리 시스템</p>
-                                        <p>- 관리 서비스 시스템</p>
+                                        <p class=""> 관리 서비스 시스템</p>
+                                        <p class=""> 데이터 저장/관리 시스템</p>
                                     </div>
                                 </div>
                             </div>
@@ -158,7 +157,7 @@
             <div class="swiper-slide">
                 <div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
 
-                    <div class="traffic-title mb20">
+                    <div class="traffic-title">
                         <p>Traffic Agent</p>
                     </div>
                     <div class="flex justify-end traffic-button ">
@@ -174,38 +173,40 @@
                         </div>
                     </div>
 
-                    <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; ">
+                    <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 30px; ">
 
                         <div class="taken-area taken-conteiner flex align-end  solution-after" style="height: 100%;">
                             <div class="text-after mb20">
                                 <p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
 
                             </div>
-                            <div class="flex solution-area" style="gap: 20px; ">
+                            <div class="flex solution-area" style="gap: 23px; ">
 
-                                <div class="solution-text-box " style="padding: 15px 33px; ">
-                                    <h3 class="text-box-title mb10 ml30">주요기능</h3>
-                                    <p>- 스마트폰 사용자로부터 실시간 위치 정보를 수집</p>
-                                    <p>- 반복 이동 거리에 대한 교통상황 정보 비교 분석</p>
-                                    <p>- 안개 발생시 도로교통위험 상황 분석 AI 모델을 탑재한 모니터링 시스템</p>
-                                    <p>- 도로교통 위험 상황분석 및 AI 모델을 활용하여 안개 감지 및 위험 경고 알림 기능 탑재</p>
+                                <div class="solution-text-box solution-deco">
+                                    <h3 class="text-box-title ">주요기능</h3>
+                                    <p> 스마트폰 사용자로부터 실시간 위치 정보를 수집</p>
+                                    <p> 반복 이동 거리에 대한 교통상황 정보 비교 분석</p>
+                                    <p> 안개 발생시 도로교통위험 상황 분석 AI 모델을 탑재한 모니터링 시스템</p>
+                                    <p> 도로교통 위험 상황분석 및 AI 모델을 활용하여 안개 감지 및 위험 경고 알림 기능 탑재</p>
                                 </div>
-                                <div class="solution-text-box">
-                                    <h3 class="text-box-title  ml30">특장점</h3>
+                                <div class="solution-text-box solution-deco">
+                                    <h3 class="text-box-title  ">특장점</h3>
 
-                                    <p>- 머신 러닝 및 활동 기반 교통 모형 활용 이동 패턴 분석</p>
-                                    <p>- 이동 거리 및 이동 시간 바탕 최적 경로 추천 기능</p>
-                                    <p>- 위치정보 공유 및 검색 기능</p>
+                                    <p> 머신 러닝 및 활동 기반 교통 모형 활용 이동 패턴 분석</p>
+                                    <p> 이동 거리 및 이동 시간 바탕 최적 경로 추천 기능</p>
+                                    <p> 위치정보 공유 및 검색 기능</p>
 
 
                                 </div>
                             </div>
                         </div>
                         <div class="traffic-area flex align-end justify-end solution-web-box"
-                            style="height: 100%; width: 100%;">
+                            style="height: 100%; width: 100%; gap: 19px;">
 
+                            <div class=" traffic-img-box">
+                                <img src="../../resources/img/common/traffic-img.png" alt="" style="height: 370px; ">
 
-                            <img src="../../resources/img/common/traffic-img.png" alt="" style="height: 356px;">
+                            </div>
                             <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
                                 <p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>
                                 <p>반복 이동 거리에 대한<br> 교통상황 정보 비교 분석</p>
@@ -233,8 +234,8 @@
                             <video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
                         </div>
                     </div>
-                    <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; ">
-                        <div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
+                    <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 30px; ">
+                        <div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%; gap: 20px;">
 
                             <img src="../../resources/img/common/ai-img.png" alt="">
                             <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
@@ -242,29 +243,29 @@
                                 <p>GIS 기반 통합 관제<br> 시스템 구축</p>
                             </div>
                         </div>
-                        <div class="taken-area taken-conteiner flex  align-end" style="gap: 20px; width: 100%;">
+                        <div class="taken-area taken-conteiner flex  align-end" style="gap: 23px; width: 100%;">
 
                             <div class="text-after solution-area-two">
                                 <p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
                             </div>
-                            <div class="solution-text-box ">
-                                <h3 class="text-box-title mb10 ml30">주요기능</h3>
+                            <div class="solution-text-box  solution-deco">
+                                <h3 class="text-box-title">주요기능</h3>
 
-                                <p>- 운전자를 위한 내비게이션 안내 서비스 제공</p>
-                                <p>- 특정 이벤트 (무단횡단,우회전 감지) 발생시 플랫폼에서 이벤트 발생 정보 확인 기능</p>
-                                <p>- 최적의 실시간 관제 서비스 구축 및 원격지 장비 관리 효율화</p>
-                                <p>- 원격지 제어 관리 시스템 지원(음성 제어, 음원 선택기능, 데이터 전송 제어,원격 리셋 가능) </p>
+                                <p> 운전자를 위한 내비게이션 안내 서비스 제공</p>
+                                <p> 특정 이벤트(무단횡단,우회전 감지)발생시 플랫폼에서 이벤트 발생 정보 확인 기능</p>
+                                <p> 최적의 실시간 관제 서비스 구축 및 원격지 장비 관리 효율화</p>
+                                <p> 원격지 제어 관리 시스템 지원(음성 제어, 음원 선택기능, 데이터 전송 제어,원격 리셋 가능) </p>
                             </div>
-                            <div class="solution-text-box">
-                                <h3 class="text-box-title  ml30">특장점</h3>
-                                <div class="flex" style=" flex-wrap: nowrap;">
+                            <div class="solution-text-box solution-deco-sub">
+                                <h3 class="text-box-title">특장점</h3>
+                                <div class="flex" style=" flex-wrap: nowrap; gap:20px;">
                                     <div class="flex-column">
-                                        <p>- 횡단보도 관제 분석 시스템 구축</p>
-                                        <p>- 현장모니터링 화면 구성</p>
+                                        <p class="pl10"> 횡단보도 관제 분석 시스템 구축</p>
+                                        <p class="pl10"> 현장모니터링 화면 구성</p>
                                     </div>
                                     <div class="flex-column">
-                                        <p>- 모니터링 대시보드 구축(데이터 분석 시각화)</p>
-                                        <p>- GIS 기반 관제 화면 구성</p>
+                                        <p class="pl10"> 모니터링 대시보드 구축(데이터 분석 시각화)</p>
+                                        <p class="pl10"> GIS 기반 관제 화면 구성</p>
                                     </div>
                                 </div>
                             </div>
@@ -283,7 +284,7 @@
 
                     <div class="video-wrap video-wrap3">
                         <div class="traffic-video">
-                            <div class="flex justify-between  viedeo-text-box">
+                            <div class="flex justify-between  viedeo-text-box pb10">
                                 <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
                                 <p class="close-btn3">x</p>
                             </div>
@@ -291,25 +292,25 @@
                                 controls></video>
                         </div>
                     </div>
-                    <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px;">
+                    <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 30px;">
 
-                        <div class="taken-area taken-conteiner flex align-end " style="gap: 20px;">
+                        <div class="taken-area taken-conteiner flex align-end " style="gap: 23px;">
                             <div class="text-after ">
                                 <p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
 
                             </div>
-                            <div class="solution-text-box" style="padding: 15px 33px;">
-                                <h3 class="text-box-title mb10 ml30">주요기능</h3>
-                                <p>- 가상현실의 인터페이스와 물리공간 간의 AI 기반으로 상호작용 및 서비스 지원</p>
-                                <p>- 사용자의 이동데이터(걸음수)를 연동한 WEB기반 메타버스 플랫폼</p>
-                                <p>- 물리공간,가상공간 데이터를 연결하여 음성 및 문자를 활용한 온/오프라인 소통</p>
+                            <div class="solution-text-box solution-deco">
+                                <h3 class="text-box-title ">주요기능</h3>
+                                <p> 가상현실의 인터페이스와 물리공간 간의 AI 기반으로 상호작용 및 서비스 지원</p>
+                                <p> 사용자의 이동데이터(걸음수)를 연동한 WEB기반 메타버스 플랫폼</p>
+                                <p> 물리공간,가상공간 데이터를 연결하여 음성 및 문자를 활용한 온/오프라인 소통</p>
                             </div>
-                            <div class="solution-text-box">
-                                <h3 class="text-box-title  ml30">특장점</h3>
+                            <div class="solution-text-box solution-deco">
+                                <h3 class="text-box-title ">특장점</h3>
 
-                                <p>- 3D 기반의 가상공간 제공 서비스(3차원 공간 정보 데이터 구현)</p>
-                                <p>- 실시간 채팅 및 방명록 기능 탑재</p>
-                                <p>- 이동데이터를 수집하여 걸음 수 측정을 통한 위치 공유 서비스</p>
+                                <p> 3D 기반의 가상공간 제공 서비스(3차원 공간 정보 데이터 구현)</p>
+                                <p> 실시간 채팅 및 방명록 기능 탑재</p>
+                                <p> 이동데이터를 수집하여 걸음 수 측정을 통한 위치 공유 서비스</p>
 
 
                             </div>
@@ -330,35 +331,35 @@
 
                     <div class=" text-area pb60 pt120 slide-section flex align-center" style="align-content: center;">
 
-                        <div class="smart-title mb30" style="word-break: keep-all;">
+                        <div class="smart-title mb60" style="word-break: keep-all;">
                             <p>스마트제조 데이터 모니터링 서비스</p>
                         </div>
                         <div class="flex justify-between align-end taken-wrap-box"
-                            style="flex-wrap: nowrap; gap: 20px;">
+                            style="flex-wrap: nowrap; gap: 30px;">
                             <div class="smart-area flex align-end solution-web-box " style="height: 100%; width: 100%;">
 
-                                <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
+                                <img src="../../resources/img/common/smart-img.png" alt="" class="mb40">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
                                     <p>공정상의 데이터를 수집<br>데이터 활용 체계 마련</p>
                                     <p>웹 및 앱 모니터링<br> 시스템 구축</p>
                                 </div>
                             </div>
-                            <div class="taken-area taken-conteiner flex " style="gap: 20px;  height: 100%;">
+                            <div class="taken-area taken-conteiner flex " style="gap: 23px;  height: 100%;">
 
                                 <div class="text-after">
                                     <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
                                 </div>
-                                <div class="solution-text-box">
-                                    <h3 class="text-box-title mb10 ml30">주요기능</h3>
-                                    <p>- 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
-                                    <p>- 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
-                                    <p>- 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
+                                <div class="solution-text-box solution-deco">
+                                    <h3 class="text-box-title ">주요기능</h3>
+                                    <p> 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
+                                    <p> 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
+                                    <p> 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
                                 </div>
-                                <div class="solution-text-box">
-                                    <h3 class="text-box-title  ml30">특장점</h3>
-                                    <p>- 반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
-                                    <p>- 이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
-                                    <p>- 현재 공정 과정 모니터링 기능</p>
+                                <div class="solution-text-box solution-deco" >
+                                    <h3 class="text-box-title ">특장점</h3>
+                                    <p> 반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
+                                    <p> 이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
+                                    <p> 현재 공정 과정 모니터링 기능</p>
                                 </div>
                             </div>
                         </div>
views/pages/Visualization.html
--- views/pages/Visualization.html
+++ views/pages/Visualization.html
@@ -19,7 +19,7 @@
         footer {
             width: 100%;
             /* height: 300px; */
-            padding: 30px;
+            padding: 40px;
             /* opacity: 0; */
             /* display: none; */
             position: relative;
@@ -138,15 +138,15 @@
 
                         <div class="solution-ani">
                             <img src="../../resources/img/common/visual-img1.png" alt="">
-                            <p>영천시 지역별 인구 추이 분석</p>
+                            <p class="mt20">영천시 지역별 인구 추이 분석</p>
                         </div>
                         <div class="solution-ani">
                             <img src="../../resources/img/common/visual-img2.png" alt="">
-                            <p>포항시 지역별 인구 추이 분석</p>
+                            <p class="mt20">포항시 지역별 인구 추이 분석</p>
                         </div>
                         <div class="solution-ani">
                             <img src="../../resources/img/common/visual-img3.png" alt="">
-                            <p>스마트 제조 공정관리 모니터링 플랫폼</p>
+                            <p class="mt20">스마트 제조 공정관리 모니터링 플랫폼</p>
                         </div>
 
                     </div>
@@ -155,19 +155,19 @@
 
                         <div class="solution-ani">
                             <img src="../../resources/img/common/visual-img4.png" alt="">
-                            <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
+                            <p class="mt20">전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
                         </div>
                         <div class="solution-ani">
                             <img src="../../resources/img/common/visual-img5.png" alt="">
-                            <p>시니어 스마트 케어 모니터링 플랫폼</p>
+                            <p class="mt20">시니어 스마트 케어 모니터링 플랫폼</p>
                         </div>
                         <div class="solution-ani">
                             <img src="../../resources/img/common/visual-img6.png" alt="">
-                            <p>공정 및 외부 환경 관제 시각화</p>
+                            <p class="mt20">공정 및 외부 환경 관제 시각화</p>
                         </div>
                         <div class="solution-ani">
                             <img src="../../resources/img/common/visual-img7.png" alt="">
-                            <p>상주시 부서별 재정 분석</p>
+                            <p class="mt20">상주시 부서별 재정 분석</p>
                         </div>
                     </div>
                 </div>
@@ -179,7 +179,7 @@
                     <img src="../../resources/img/component/logo-w.png" alt="">
                 </div>
                 <hr>
-                <div class="footer-text pt10">
+                <div class="footer-text pt10 pb40">
                     <div class="flex justify-between ">
     
                         <p>대표자 ) 임상현</p>
@@ -192,7 +192,7 @@
                     <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
                     <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
                 </div>
-                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
+                <p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
             </div>
         </footer>
     </div>
Add a comment
List