Commit @5931a9364474ddeb69a7373be071775b95ae45f2

mycoms 2024-04-05

240405 김하영

@5931a9364474ddeb69a7373be071775b95ae45f2

e768fe7

5931a93

resources/css/reset.css

--- resources/css/reset.css

+++ resources/css/reset.css


 	font-family: 'Pretendard';
 	font-weight: 900;
 	font-display: swap;
-	src: local('Pretendard Black'), url(../font/woff2/Pretendard-Black.woff2) format('woff2'), url(../font/woff/Pretendard-Black.woff) format('woff');
+	src: local('Pretendard Black'), url(../font/Pretendard-Black.woff2) format('woff2'), url(../font/Pretendard-Black.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 800;
 	font-display: swap;
-	src: local('Pretendard ExtraBold'), url(../font/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraBold.woff) format('woff');
+	src: local('Pretendard ExtraBold'), url(../font/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/Pretendard-ExtraBold.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 700;
 	font-display: swap;
-	src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/woff/Pretendard-Bold.woff) format('woff');
+	src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/Pretendard-Bold.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 600;
 	font-display: swap;
-	src: local('Pretendard SemiBold'), url(../font/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../font/woff/Pretendard-SemiBold.woff) format('woff');
+	src: local('Pretendard SemiBold'), url(../font/Pretendard-SemiBold.woff2) format('woff2'), url(../font/Pretendard-SemiBold.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 500;
 	font-display: swap;
-	src: local('Pretendard Medium'), url(../font/woff2/Pretendard-Medium.woff2) format('woff2'), url(../font/woff/Pretendard-Medium.woff) format('woff');
+	src: local('Pretendard Medium'), url(../font/Pretendard-Medium.woff2) format('woff2'), url(../font/Pretendard-Medium.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 400;
 	font-display: swap;
-	src: local('Pretendard Regular'), url(../font/woff2/Pretendard-Regular.woff2) format('woff2'), url(../font/woff/Pretendard-Regular.woff) format('woff');
+	src: local('Pretendard Regular'), url(../font/Pretendard-Regular.woff2) format('woff2'), url(../font/Pretendard-Regular.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 300;
 	font-display: swap;
-	src: local('Pretendard Light'), url(../font/woff2/Pretendard-Light.woff2) format('woff2'), url(../font/woff/Pretendard-Light.woff) format('woff');
+	src: local('Pretendard Light'), url(../font/Pretendard-Light.woff2) format('woff2'), url(../font/Pretendard-Light.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 200;
 	font-display: swap;
-	src: local('Pretendard ExtraLight'), url(../font/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraLight.woff) format('woff');
+	src: local('Pretendard ExtraLight'), url(../font/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/Pretendard-ExtraLight.woff) format('woff');
 }
 
 @font-face {
 	font-family: 'Pretendard';
 	font-weight: 100;
 	font-display: swap;
-	src: local('Pretendard Thin'), url(../font/woff2/Pretendard-Thin.woff2) format('woff2'), url(../font/woff/Pretendard-Thin.woff) format('woff');
+	src: local('Pretendard Thin'), url(../font/Pretendard-Thin.woff2) format('woff2'), url(../font/Pretendard-Thin.woff) format('woff');
 }
 
 @font-face {

e768fe7

5931a93

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


     .slide-solution .portfolio-text {
         padding: 0rem 1rem;
     }
-    #contentHeadquarter{
-        height: 350px;
+
+    #contentHeadquarter,
+    #contentDaeguBranch {
+        height: 350px !important;
     }
-    #map1,#map2 {
+
+    #map1,
+    #map2 {
         width: 100% !important;
     }
 
     .box:hover {
         transform: scale(1);
+    }
+
+    .box-wrap-title {
+        font-size: 1.3rem !important;
+        font-weight: 800;
+        margin-bottom: 0px;
+    }
+
+    .etc-wrap-text p {
+        padding: 11px 10px;
     }
 
     .header-area {

 
     .marketing-wrapper {
         width: 100%;
-        padding: 1rem;
+        padding: 1rem 1rem 2rem 1rem;
         margin: 0 auto;
     }
 

         font-size: 1.8rem;
     }
 
- 
+
 
     .root_daum_roughmap_landing {
         width: 100% !important;

     }
 
     .map-btn {
-        justify-content: space-between;
+        justify-content: center;
     }
 
     .map-btn button {

 
     .about-wrap {
         width: 100%;
-      padding: 9rem 2rem;
+        padding: 9rem 2rem;
     }
-    .container{
+
+    .container {
         width: 100%;
     }
+
     .about-title-sub {
         font-size: 1.2rem;
     }

     .about-area p {
         font-size: 1.2rem;
     }
-    .month-text p{
+
+    .month-text p {
         font-size: 1.2rem;
     }
 

     .slideTextDtail div div {
         display: none;
     }
-    .about-title{
+
+    .about-title {
         margin-bottom: 1rem !important;
     }
 

     .taken-area img,
     .traffic-area img,
     .ai-area img {
-        opacity: 0;
+        width: 100%;
+        height: 100px !important;
+        object-fit: contain !important;
+        margin-bottom: 2rem;
     }
-    
+
 
     .taken-box {
         width: 100%;
-        /* flex-direction: column; */
+        margin-bottom: 2rem;
+        flex-direction: column;
         gap: 5px;
     }
 

     }
 
 
-    .solution-title::after, .traffic-title::after, .ai-title::after, .meta-title::after, .smart-title::after{
+    .solution-title::after,
+    .traffic-title::after,
+    .ai-title::after,
+    .meta-title::after,
+    .smart-title::after {
         display: none;
     }
-    .solution-area {
 
-        gap: 40px !important;
-        height: calc(100% - 141.61px) !important;
+    .solution-area {
+        width: 100%;
+        grid-template-columns: 1fr;
     }
 
     .solution-text-box {

         gap: 0px !important;
     }
 
-    .solution-text-box div div p{
+    .solution-text-box div div p {
         width: 100%;
-    
-        /* flex-direction: row; */
     }
-    .etc-wrap-text,.box-wrap{
+
+    .etc-wrap-text,
+    .box-wrap {
         width: 100%;
-            flex-direction: column;
+        flex-direction: column;
     }
-    .etc-wrap-text div,.box-wrap div{
+
+    .etc-wrap-text div,
+    .box-wrap div {
         width: 100%;
         border-radius: 5px;
         border: 1px solid #333333;
         margin-bottom: 5px;
     }
-    .box-wrap div{
-        padding: 2rem 0;
+
+    .box-wrap div {
+        padding: 1rem;
     }
-    .etc-wrap-text div img,.box-wrap div img{
-        display: none;
+    .traffic-video{
+        width: 90%;
+        padding: 1rem;
     }
-    .etc-wrap-text p,.box-wrap p{
+    .traffic-video p{
         font-size: 1rem;
+    }
+    .traffic-button button{
+        padding: 7px 46px;
+        font-size: 1.2rem;
+        margin-bottom: 2rem;
+    }
+    .traffic-button{
+        justify-content: center;
+    }
+    .etc-wrap-text p,
+    .box-wrap p {
+        font-size: 1rem;
+    }
+    .swiper-slide img{
+        width: 100%;
+        height: 100px !important;
+        object-fit: contain !important;
+        /* height: 100px !important; */
     }
     .text-box-title::after {
         left: -5px;
         top: -1px;
     }
-
-    .traffic-button {
+    .solution-text-box{
         display: none;
     }
-
-    .traffic-area {
-        display: none;
-    }
-
-    .solution-web-box {
-        display: none;
-    }
-
+  
 
 
     .logo {

         grid-template-columns: 1fr 1fr;
     }
 
-    .taken-wrap-box {
+    /* .taken-wrap-box {
         height: 74%;
-    }
+    } */
 
     .customized-wrap-title {
         margin-top: 50px;
-        margin-bottom: 1rem ;
+        margin-bottom: 1rem;
     }
 
     .etc-wrap-title h1 {
         padding-top: 0rem;
     }
-    .etc-box-title{
+
+    .etc-box-title {
         font-weight: 900;
         text-align: center !important;
         font-size: 2.2rem !important;
     }
-    .etc-box p{
+
+    .etc-box p {
         text-align: left;
     }
 

         object-fit: contain;
     }
 
-  
+
     .box-wrap div p {
         padding: 1px;
         margin-bottom: 0rem !important;
         font-size: 1rem !important;
     }
-    .etc-box-title{
-        font-weight: 900;
+
+    .etc-box-title {
+        font-weight: 700;
         text-align: center !important;
         font-size: 2.2rem !important;
     }
+
     .box-wrap div div {
         display: none;
         height: 37% !important;

 
     .etc-wrap-title h1,
     .customized-wrap-title h1 {
-        font-size: 1.5rem !important;
+        font-size: 2.5rem !important;
     }
 
     .etc-wrap-title p,

         display: grid;
         grid-template-columns: 1fr;
         justify-content: center;
-        gap: 1px;
+        gap: 5px;
     }
 
     .box1,

         font-size: 1.8rem;
     }
 
-   
+
 
     .root_daum_roughmap_landing {
         width: 100% !important;

     }
 
     .map-btn {
-        justify-content: space-between;
+        justify-content: center;
     }
 
     .map-btn button {
-        width: 49%;
+        /* width: 49%; */
         font-size: 1.2rem;
     }
 

         padding-top: 5rem;
         margin-bottom: 0rem !important;
     }
-    .etc-wrap-text,.box-wrap{
+
+    .etc-wrap-text,
+    .box-wrap {
         width: 100%;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 5px;
     }
-    .etc-grid-box{
+
+    .etc-grid-box {
         grid-template-columns: 1fr 1fr;
     }
 
     /* .etc-grid-box p{height: 100px !important;} */
 
-    .etc-wrap-text div,.box-wrap div{
+    .etc-wrap-text div,
+    .box-wrap div {
         width: 100%;
         border-radius: 5px;
         margin-bottom: 5px;
     }
-    .etc-wrap-text div img,.box-wrap div img{
+
+    .etc-wrap-text div img,
+    .box-wrap div img {
         width: 100% !important;
     }
-    .box-wrap div{
+
+    .box-wrap div {
         padding: 2rem 0;
     }
-   
-    .etc-wrap-text p,.box-wrap p{
+
+    .etc-wrap-text p,
+    .box-wrap p {
         font-size: 1rem;
         /* height: 50px; */
     }

     .box-grid {
         grid-template-columns: 1fr 1fr 1fr !important;
     }
-    .box-wrap div div p{
+
+    .box-wrap div div p {
         font-size: 1.1rem !important;
     }
 
- 
-   
+
+
 
     .etc-wrap-title h1,
     .customized-wrap-title h1 {
-        font-size: 1.5rem !important;
+        font-size: 2.8rem !important;
     }
 
     .etc-wrap-title p,

 
     .etc-box-title {
         margin-bottom: 0px;
+        font-size: 1.3rem !important;
+        font-weight: 600;
     }
 
-    .etc-box-title p {
-        padding-left: 0px;
-    }
 
     .etc-box p {
         padding-left: 0px;

         grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
         justify-content: center;
         gap: 1px;
+    }
+
+    .slide-solution .text-area {
+        padding: 6rem 2rem;
+    }
+
+    #map1,
+    #map2 {
+        width: 100% !important;
     }
 
     .box1,

 }
 
 @media all and (min-width:768px) and (max-width:1366px) {
-    html {
-        font-size: 9px;
-    }
-
-    .wrapper {
-        display: block;
-    }
-
-    .main-warp {
-        flex-grow: 0;
-    }
-
-    .swiper {
-        height: 100%;
-    }
-
-
-    .swiper-slide>.flex>.col-6 {
-        flex: 0 0 100%;
-        max-width: 100%;
-    }
-
-    .swiper-slide>.flex>.col-6>.box {
-        height: 50vh;
-    }
-
     * {
         padding: 0;
         margin: 0;

         font-size: 2.2rem !important;
     }
 
+
     .solution-title p,
     .traffic-title p,
     .ai-title p,
     .meta-title p,
     .smart-title p,
     .etc-wrap-title p {
-        font-size: 1.5rem;
+        font-size: 2.5rem;
     }
 
     .sub-text,
     .solution-sub-text {
-        font-size: 1.5rem !important;
+        font-size: 1rem !important;
     }
+
 
     .solution-box {
         width: 100%;
         height: calc(100% - 182px) !important;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        justify-content: center;
+        flex-direction: column;
+        flex-wrap: wrap !important;
+        align-items: center;
+        justify-content: space-between;
     }
 
-    .box1,
-    .box2,
-    .box3,
-    .box4,
-    .box5,
-    .box6 {
+    .slide-solution .text-area {
+        padding: 6rem 2rem;
+    }
+
+    .slide-solution .portfolio-text {
+        padding: 0rem 1rem;
+    }
+
+    #contentHeadquarter {
         width: 100%;
+        height: 350px;
     }
 
-    .box2,
-    .box4 {
-        transform: translateY(0px);
-    }
-
-    .solution-box div {
-        /* height: 50px !important; */
-        /* background-size: 20px; */
+    #map1,
+    #map2 {
+        width: 100% !important;
     }
 
     .box:hover {
         transform: scale(1);
+    }
+
+    .box-wrap-title {
+        font-size: 1.3rem !important;
+        font-weight: 800;
+        margin-bottom: 0px;
+    }
+
+    .etc-wrap-text p {
+        padding: 11px 10px;
     }
 
     .header-area {

         font-size: 1.2rem !important;
     }
 
-    nav {
-        display: none;
-    }
-
     nav>ul {
         background-color: #fff;
         border-bottom: 1px solid #333;

         color: #333;
         height: 29px;
         width: 29px;
-    }
-
-    .solution-web-box {
-        display: grid !important;
-        grid-template-columns: 1fr 1fr;
     }
 
     .swiper {

         padding: 10px;
     }
 
+    .sub-text-area {
+        margin-bottom: 1rem !important;
+    }
+
     .marketing-wrapper {
         width: 100%;
-        padding: 1rem;
+        padding: 1rem 1rem 2rem 1rem;
         margin: 0 auto;
     }
 

         font-size: 1.8rem;
     }
 
-    #contentDaeguBranch {
-        width: 100%;
-        height: 100%;
-    }
+
 
     .root_daum_roughmap_landing {
         width: 100% !important;

     }
 
     .map-btn {
-        justify-content: space-between;
+        justify-content: center;
     }
 
     .map-btn button {
-        width: 40%;
+        /* width: 40%; */
         font-size: 1.2rem;
     }
 

     .footer-text div p,
     .footer-text p {
         width: 100%;
+        font-size: 1.2rem;
         padding-left: 0px !important;
     }
 
     .about-wrap {
         width: 100%;
-        padding: 0px;
-        padding-top: 50px;
+        padding: 9rem 2rem;
+    }
+
+    .container {
+        width: 100%;
     }
 
     .about-title-sub {

     .about-area {
         flex-wrap: nowrap;
         width: 100%;
-        height: 10%;
-        flex-direction: column;
+        /* height: 10%; */
+        margin-bottom: 10px !important;
+        /* flex-direction: column; */
         gap: 10px !important;
-    }
-
-    .about-area p {
-        font-size: 1.2rem;
-    }
-
-    .about-radius,
-    .about-radius-bottom,
-    .about-radius-right,
-    .about-radius-left,
-    .about-radius-bottom-left,
-    .about-radius-bottom-right {
-        width: 100%;
-        height: 100%;
-        padding: 0.5rem;
-        border-radius: 5px !important;
     }
 
     .about-radius-left::after,

         display: none;
     }
 
-    .about-title {
-        margin-top: 60px;
-        height: 20%;
-        margin-bottom: 1rem !important;
+    .about-area p {
+        font-size: 1.2rem;
     }
+
+    .month-text p {
+        font-size: 1.2rem;
+    }
+
+
+
 
     .about-text {
         font-size: 1.5rem;
     }
 
     .silde-box {
-        height: 60%;
-        display: flex;
-        flex-direction: column;
+        /* height: 75%; */
+        /* display: flex; */
+        /* flex-direction: column; */
     }
 
-    .silde-box .accordion {
+    /* .silde-box .accordion {
         height: 10px;
         padding: 0.5rem;
-    }
-
-    .silde-box .slideImg {
-        display: none;
+    } */
+    .about-vision-box {
+        flex-wrap: nowrap;
     }
 
     .slideText {

     }
 
 
-
     .about img {
         width: 100%;
         height: 100%;

         height: 200px;
     }
 
-    .about-vision-box img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-    }
 
     .timeline {
         width: 100%;

 
     .years {
         display: flex;
+        justify-content: space-between;
         width: 100%;
         border-bottom: 1px solid #333;
     }

 
     .taken-area {
         width: 100%;
-        height: 60% !important;
+        height: 0% !important;
         align-items: start;
         gap: 5px !important;
     }
 
-    .taken-area img,
-    .traffic-area img,
-    .ai-area img {
-        height: 20px;
-    }
 
-    .solution-title,
-    .traffic-title,
-    .ai-title,
-    .meta-title,
-    .smart-title {
-        height: 15%;
-        padding-top: 5rem;
-        margin-bottom: 0rem !important;
-    }
 
     .taken-box {
         width: 100%;

         justify-content: start;
     }
 
-    .solution-area-two {
-        height: calc(100% - 490.05px) !important;
 
-        .solution-area {
+    .solution-title::after,
+    .traffic-title::after,
+    .ai-title::after,
+    .meta-title::after,
+    .smart-title::after {
+        display: none;
+    }
 
-            gap: 40px !important;
-            height: calc(100% - 141.61px) !important;
-        }
+    /* .solution-area {
 
-        .solution-text-box {
-            padding: 10px 15px !important;
-        }
+        gap: 40px !important;
+        height: calc(100% - 141.61px) !important;
+    } */
+    .solution-area {
+        width: 100%;
+        grid-template-columns: 1fr;
+    }
 
-        .solution-text-box p {
-            padding-left: 5px;
-        }
+    .solution-text-box {
+        padding: 10px 15px !important;
+    }
 
-        .solution-text-box div {
-            gap: 0px !important;
-        }
+    .solution-text-box p {
+        padding-left: 5px;
+    }
 
-        .solution-text-box div div {
-            flex-direction: row;
-        }
+    .solution-text-box div {
+        gap: 0px !important;
+    }
 
-        .text-box-title::after {
-            left: -5px;
-            top: -1px;
-        }
+    .solution-text-box div div p {
+        width: 100%;
+    }
 
-        .traffic-button {
-            display: none;
-        }
+    .etc-wrap-text {
+        width: 100%;
+        height: 50%;
 
-        .traffic-area {
-            display: none;
-        }
+    }
 
-        .solution-web-box {
-            display: none;
-        }
+    .visuali .etc-wrap-text,
+    .dataanalysis .etc-wrap-text,
+    .customized .box-wrap {
+        display: grid;
+        gap: 10px;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    .etc-grid-box {
+        flex-wrap: nowrap;
+    }
+
+    .smart .etc-wrap-text .smart-img {
+        width: 50%;
+    }
+
+    .etc-wrap-text img {
+        width: 90%;
+        height: 60%;
+    }
+
+    .etc-wrap-text p,
+    .box-wrap p {
+        padding: 10px !important;
+        font-size: 1.2rem !important;
+    }
+
+    .box-wrap-title {
+        font-size: 1.5rem !important;
+    }
+
+    .text-box-title::after {
+        left: -5px;
+        top: -1px;
+    }
+
+    .solution .swiper-slide img {
+        height: 130px !important;
+
+    }
+
+    .swiper-slide img {
+        margin: 0 auto;
+    }
+
+    .traffic-button {
+        padding: 2rem 0;
+        justify-content: center;
+    }
+
+    .traffic-area img {
+        height: 130px !important;
+    }
+
+    .logo {
+        width: 50% !important;
+        height: 14px !important;
+        background-size: cover;
+    }
+
+    .mobil-wrap {
+        width: 50%;
+    }
+
+    .mobil-wrap button {
+        width: 100%;
+        text-align: right;
+    }
+
+    .box:hover,
+    .box-wrap div img:hover {
+        transform: scale(1);
+    }
+
+    .visual-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
 
 
 
-        .logo {
-            width: 50% !important;
-            height: 14px !important;
-            background-size: cover;
-        }
+    .customized-wrap-title {
+        margin-top: 50px;
+        margin-bottom: 1rem;
+    }
 
-        .mobil-wrap {
-            width: 50%;
-        }
+    .etc-wrap-title h1 {
+        padding-top: 0rem;
+    }
 
-        .mobil-wrap button {
-            width: 100%;
-            text-align: right;
-        }
+    .etc-box-title {
+        font-weight: 900;
+        text-align: center !important;
+        font-size: 2.2rem !important;
+    }
 
-        .box:hover,
-        .box-wrap div img:hover {
-            transform: scale(1);
-        }
+    .etc-box p {
+        text-align: left;
+    }
 
-        .customized-wrap-title,
-        .etc-wrap-title {
-            margin-top: 50px;
-            margin-bottom: 1rem;
-            height: 100%;
-        }
-
-        .etc-wrap-title h1 {
-            padding-top: 0rem;
-        }
-
-        .box-wrap {
-            width: 100% !important;
-            height: 100%;
-            gap: 10px !important;
-            margin-bottom: 0px;
-
-            /* flex-direction: column; */
-        }
-
-        .box-wrap img {
-            width: 100%;
-            padding-bottom: 0rem !important;
-            object-fit: contain;
-            height: 77px !important;
-        }
-
-        .box-wrap div {
-            height: 100%;
-        }
-
-        .box-wrap div p {
-            padding: 1px;
-            margin-bottom: 0rem !important;
-            font-size: 1rem !important;
-        }
-
-        .box-wrap div div {
-            display: none;
-            height: 37% !important;
-        }
-
-        .etc-wrap-title h1,
-        .customized-wrap-title h1 {
-            font-size: 1.5rem !important;
-        }
-
-        .etc-wrap-title p,
-        .customized-wrap-title p {
-            font-size: 1.2rem !important;
-        }
-
-        .etc-wrap-title {
-            margin-bottom: 10px !important;
-        }
-
-        .customized-box {
-            width: 100%;
-            display: grid;
-            gap: 10px;
-            grid-template-columns: 1fr 1fr 1fr 1fr;
-        }
-
-        .customized-box div {
-            width: 100%;
-
-            margin-bottom: 10px;
-        }
-
-        .customized-box p {
-            font-size: 1.1rem !important;
-        }
-
-        .customized-box div img {
-            width: 100%;
-        }
-
-        .etc-box-title {
-            margin-bottom: 0px;
-        }
-
-        .etc-box-title p {
-            padding-left: 0px;
-        }
-
-        .etc-box p {
-            padding-left: 0px;
-        }
-
-        .solution-box {
-            width: 100%;
-            height: calc(100% - 182px) !important;
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-            justify-content: end;
-            gap: 1px;
-        }
-
-        .box1,
-        .box2,
-        .box3,
-        .box4,
-        .box5,
-        .box6 {
-            width: 100%;
-            background-size: cover;
-            text-shadow: 1px 1px 1px #33333350;
-        }
-
-        .box2,
-        .box4 {
-            transform: translateY(0px);
-        }
+    .box-grid {
+        grid-template-columns: 1fr 1fr 1fr !important;
+    }
 
 
+    .box-wrap img {
+        width: 100%;
+        padding-bottom: 0rem !important;
+        object-fit: contain;
+    }
+
+
+    .box-wrap div p {
+        padding: 1px;
+        margin-bottom: 0rem !important;
+        font-size: 1rem !important;
+    }
+
+    .etc-box-title {
+        font-weight: 700;
+        text-align: center !important;
+        font-size: 2.2rem !important;
+    }
+
+    .box-wrap div div {
+        display: none;
+        height: 37% !important;
+    }
+
+    .etc-wrap-title h1,
+    .customized-wrap-title h1 {
+        font-size: 2.5rem !important;
+    }
+
+    .etc-wrap-title p,
+    .customized-wrap-title p {
+        font-size: 1.2rem !important;
+    }
+
+    .etc-wrap-title {
+        /* height: 100%; */
+        margin-bottom: 10px !important;
+    }
+
+    .customized-box {
+        width: 100%;
+        display: grid;
+        gap: 10px;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .customized-box div {
+        width: 100%;
+
+        margin-bottom: 10px;
+    }
+
+    .customized-box p {
+        font-size: 1.1rem !important;
+    }
+
+    .customized-box div img {
+        width: 79%;
+    }
+
+    .etc-box-title {
+        margin-bottom: 0px;
+    }
+
+    .etc-box-title p {
+        padding-left: 0px;
+    }
+
+    .etc-box p {
+        padding-left: 0px;
+    }
+
+    .solution-box {
+        width: 100%;
+        height: calc(100% - 182px) !important;
+        display: grid;
+        grid-template-columns: 1fr;
+        justify-content: center;
+        gap: 1px;
+    }
+
+    .box1,
+    .box2,
+    .box3,
+    .box4,
+    .box5,
+    .box6 {
+        width: 100%;
+        font-size: 1.2rem;
+        background-size: cover;
+        background-position: center;
+        padding: 10px !important;
+    }
+
+    .box2,
+    .box4 {
+        transform: translateY(0px);
     }
 }

e768fe7

5931a93

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


     height: 100%;
     margin: auto;
     align-content: center;
-    padding-top: 6rem;
+    padding-top: 12rem;
     text-align: center;
 }
 

 
 .solution-text {
     font-size: 4.5rem;
-    font-weight: 900;
+    font-weight: 700;
     opacity: 0;
 }
 

     animation-name: fadeIn;
     animation-duration: 1s;
     animation-fill-mode: both;
+}
+
+.solution-ani {
+    opacity: 0;
+    cursor: pointer;
+    animation-name: fadeIn;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+}
+
+.solution-ani:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.solution-ani:nth-child(2) {
+    animation-delay: 0.3s;
+}
+
+.solution-ani:nth-child(3) {
+    animation-delay: 0.5s;
+}
+.solution-ani:nth-child(4) {
+    animation-delay: 0.7s;
+}
+
+.solution-ani:nth-child(5) {
+    animation-delay: 0.9s;
+}
+
+.solution-ani:nth-child(6) {
+    animation-delay: 1s;
+}
+.solution-ani:nth-child(7) {
+    animation-delay: 1.2s;
+}
+.solution-ani:nth-child(8) {
+    animation-delay: 1.4s;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 .solution-text.active {

 .ivory-box div p:nth-child(1) {
     color: #242a30;
 }
-
+.traffic-btn:hover{
+    transform: scale(1.1);
+    transition: all 0.5s ease;
+}
 .hvr-grow {
     display: inline-block;
     vertical-align: middle;

 
 .portfolio-text {
     font-size: 4.5rem;
-    font-weight: 900;
+    font-weight: 700;
     position: relative;
     text-align: left;
 }

 .map-text {
     text-align: center;
     font-size: 4rem;
-    font-weight: 900;
+    font-weight: 700;
     position: relative;
 }
 

     padding: 10px 15px 10px 35px;
     border-radius: 30px;
     font-size: 1.4rem;
+    font-family: 'Pretendard';
+
     font-weight: 600;
     color: #213F99;
     background: url(../img/common/location-dot-solid.svg) no-repeat 15px center / 15px;

 }
 
 .address-tile {
+    text-align: left;
     font-size: 2.5rem;
     font-weight: 600;
     color: #213F99;
+    padding-left: 29px;
     width: 150px;
     position: relative;
 }

 
 .marketing-wrap-title h1 {
     font-size: 5rem;
-    font-weight: 900;
+    font-weight: 700;
     font-family: 'Pretendard';
     position: relative;
 }

 
 .marketing-area p {
     margin-bottom: 10px;
+    font-weight: 600;
 }
 
 .marketing-area p span {

 
 
 .accordion {
-    height: 550px;
+    height: 100%;
     padding: 2rem;
     cursor: pointer;
     flex: 1;

 }
 
 .slideImg {
-    padding: 2rem;
+    margin-bottom: 10px;
     width: 100%;
     opacity: 0;
 }

 .etc-box p{
     text-align: left;
 }
-
+.Portfolio{
+    margin: auto;
+    align-content: center;
+    padding-top: 6rem;
+    text-align: center;
+}
 .etc-box p {
     font-size: 1.5rem;
     line-height: 2;

     transform: translate(-50% ,-50%);
     left: 50%;
     z-index: 111;
-    width: 500px;
+    width: 50%;
     /* height: 600px; */
     padding: 3rem;
     background-color: #FFFFFF;

e768fe7

5931a93

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


 <body>
     <div class="header">
         <div class="header-area flex justify-between align-center">
-            <div class="logo"></div>
+            <a href="/views/main.html" class="logo"></a>
             <div class="mobil-wrap">
                 <button class="mobile-menu-button">☰</button>
                 <button class="mobile-menu-button-close" style="display: none;">x</button>

             link.classList.remove('clicked');
         }
     });
+
     var logoDiv = document.querySelector('.logo');
 
-    logoDiv.addEventListener('click', function () {
+logoDiv.addEventListener('click', function () {
+    var currentLocation = window.location.pathname;
+    if (currentLocation === '/main.html' || currentLocation === '/') {
+        // 현재 위치가 메인 페이지인 경우, 페이지를 새로고침하거나 현재 위치를 유지
+        window.location.href = '/';
+    } else {
+        // 다른 페이지에 있는 경우, 메인 페이지로 이동
         window.location.href = '../main.html';
-    });
+    }
+});
 
-    logoDiv.style.cursor = 'pointer';
-
+logoDiv.style.cursor = 'pointer';
     $('.mobile-menu-button').click(function () {
         $('.mobil-menu').show();
         $('.mobile-menu-button-close').show();

e768fe7

5931a93

views/main.html

--- views/main.html

+++ views/main.html


                     <div class="main-wrap">
                         <div class="text-area flex align-end main-text">
                             <div>
-                                <img src="../resources/img/common/mouse.png" alt="">
+                                <!-- <img src="../resources/img/common/mouse.png" alt=""> -->
                             </div>
                         </div>
                     </div>

             </div>
             <div class="swiper-slide">
                 <div class="slide-wrap  slide-back scale-in-br">
-                    <div class="text-area slide-section flex align-center justify-center">
+                    <div class="text-area slide-section flex align-center justify-center pb60">
                         <div style="height: 20%;">
                             <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
                                     class="text-event">혁신으로 선도</span>합니다.</p>

             </div>
             <div class="swiper-slide">
                 <div class="slide-wrap pt90 pb90 slide-solution">
-                    <div class="  flex align-center" style="align-content: center; width: 100%;">
-                        <div style="width: 1200px; margin: 0 auto;">
-                            <p class="portfolio-text mb10 ">PORTFOLIO</p>
+                    <div class=" Portfolio flex align-center" style="align-content: center; width: 100%;">
+                        <div style="width: 1200px; margin: auto;">
+                            <p class="portfolio-text mb20 ">PORTFOLIO</p>
                         </div>
-                        <div class="swiper innerSwiper" >
+                        <div class="swiper innerSwiper">
                             <div class="swiper-wrapper">
                                 <div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
                                     <img src="../resources/img/common/innerimg-1.png" alt="">

             </div>
             <div class="swiper-slide">
                 <div class="slide-wrap pt60 pb60 slide-solution gradient-bottom ">
-                    <div class=" text-area pb60 flex align-center justify-center" style="height: 100%; align-content: center;">
+                    <div class=" text-area pb60 flex align-center justify-center"
+                        style="height: 100%; align-content: center;">
                         <div style="width: 100%;" class="sub-text-area">
                             <p class="map-text ">오시는길</p>
                         </div>

                         </div>
                         <div>
 
-                            <div id="contentHeadquarter" style="height: 350px;">
+                            <div id="contentHeadquarter" style="height: 500px;">
                                 <div id="map1" style="width:1200px;height:100%;"></div>
                                 <div class="address-box flex">
                                     <p class="address-tile">본사</p>

                                     </p>
                                 </div>
                             </div>
-                            <div id="contentDaeguBranch" style="display: none;">
-                                <div id="map2" style="width:1200px;height:350px;"></div>
+                            <div id="contentDaeguBranch" style="display: none; height: 500px;">
+                                <div id="map2" style="width:1200px;height:100%;"></div>
                                 <div class="address-box flex">
                                     <p class="address-tile">대구지사</p>
                                     <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>

     //   지사 지도
     var mapContainer2 = document.getElementById('map2'),
         mapOption2 = {
-            center: new kakao.maps.LatLng(35.835332450870354,128.68246038604707),
+            center: new kakao.maps.LatLng(35.835332450870354, 128.68246038604707),
             level: 4,
         };
     var map2 = new kakao.maps.Map(mapContainer2, mapOption2);

     function resizeMap() {
         var mapContainer2 = document.getElementById('map2');
         mapContainer2.style.width = '1200px';
-        mapContainer2.style.height = '350px';
+        mapContainer2.style.height = '500px';
     }
 
     function relayout() {

     }
 
     $(document).ready(function () {
+        document.getElementById('btnHeadquarter').classList.add('on');
+
         $("#btnHeadquarter").click(function () {
             $("#btnHeadquarter").addClass('on');
             $("#btnDaeguBranch").removeClass('on');

 
         });
     });
+    function initSwiper() {
+    if (window.innerWidth < 768) {
+        // 화면 너비가 768px 미만일 때, 스와이퍼 초기화하지 않음
+        // 여기에서 모바일 환경을 위한 코드를 추가할 수 있습니다.
+
+    } else {
+        // 화면 너비가 768px 이상일 때만 스와이퍼 초기화
+        var swiper1 = new Swiper(".mySwiper", {
+            direction: "vertical",
+            slidesPerView: 1,
+            spaceBetween: 40,
+            speed: 700,
+            mousewheel: true,
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true,
+            },
+            on: {
+                slideChangeTransitionEnd: function () {
+                    // 슬라이드 변경 시 동작하는 코드
+                },
+                slideChange: function () {
+                    // 다른 슬라이드로 변경될 때 실행되는 코드
+                },
+                reachEnd: function () {
+                    // 스와이퍼의 끝에 도달했을 때 실행되는 코드
+                },
+            }
+        });
+    }
+}
+
+// 초기 스와이퍼 설정
+initSwiper();
+
+// 화면 크기가 변경될 때마다 스와이퍼 초기화 여부를 재검사
+window.addEventListener('resize', function() {
+    // 이미 초기화된 스와이퍼가 있다면 파괴
+    if (typeof swiper1 !== 'undefined' && swiper1 !== null) {
+        swiper1.destroy();
+        swiper1 = null;
+    }
+    initSwiper(); // 스와이퍼 다시 초기화
+});
 
     var swiper1 = new Swiper(".mySwiper", {
         direction: "vertical",

 
         }
     });
+    if (window.innerWidth >= 768) {
+    // 화면 너비가 768px 이상일 때만 스와이퍼 초기화
+    var mySwiper = new Swiper('.swiper-container', {
+        // 스와이퍼 옵션 설정
+    });
+}
     window.addEventListener('wheel', function (event) {
         if (event.deltaY < 0) {
             swiper1.mousewheel.enable();

 
         boxes.forEach(box => {
             setTimeout(() => {
-                box.style.display = 'block'; // 박스를 보이게 합니다.
-                box.style.animationDelay = `${delay}s`; // 애니메이션 지연 시간을 설정합니다.
-                delay += 0.3; // 다음 박스가 나타나기까지의 지연 시간을 증가시킵니다.
-            }, delay * 3000); // setTimeout은 밀리초 단위를 사용합니다.
+                box.style.display = 'block';
+                box.style.animationDelay = `${delay}s`;
+                delay += 0.3;
+            }, delay * 3000);
         });
     });
     // 헤더,푸터 불러오기

             div.style.cursor = 'pointer';
         });
     });
-
 
 
 

e768fe7

5931a93

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="taken-wrap  slide-solution slide-wrap">
-                    <div class="text-area flex">
-                        <div class="about-title mb20" style="width: 100%;">
-                            <p class="mb20">Business</p>
-                            <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
-                                해결합니다.</p>
-                        </div>
-                        <div class="container silde-box">
-                            <div class="accordion"
-                                style="background-image: url(../../resources/img/common/about-img1.png);">
-                                <div class="slideText  pl20">
-                                    <p class="accordion-num"><span>01.</span> AI Solution</p>
-                                    <p>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 style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
-                                            통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
-                                    </div>
-                                    <div class=" flex justify-between" style="flex-wrap: nowrap;">
-                                        <div style="width: 20%;">
-                                            <p>[대표사례]</p>
-                                        </div>
-                                        <div class=" flex justify-between accordion-box">
-                                            <p>·도로 위험 감지 시스템</p>
-                                            <p>·경로 최적화 서비스</p>
-                                            <p>·안개 감지 시스템</p>
-                                            <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
-                                        </div>
-                                    </div>
-                                </div>
-
-
+                <div class="text-area flex align-center justify-center pb60">
+                    <div class="about-title mb20" style="width: 100%;">
+                        <p class="mb20">Business</p>
+                        <p class="mb20 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  pl20">
+                                <p class="accordion-num"><span>01.</span> AI Solution</p>
+                                <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
                             </div>
-                            <div class="accordion "
-                                style="background-image: url(../../resources/img/common/about-img2.png);">
-                                <div class="slideText  pl20">
-                                    <p class="accordion-num"><span>02.</span> System Design</p>
-                                    <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
-                                </div>
-                                <div class="slideImg">
-                                    <img src="../../resources/img/common/about-img-bg02.png" alt="">
-                                </div>
-                                <div class="slideTextDtail">
-                                    <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
-                                        통해 고객사 최적화 UI 도출 </p>
-                                    <div class=" flex justify-start" style="flex-wrap: nowrap;">
-                                        <div style="width: 20%;">
-                                            <p>[대표사례]</p>
-                                        </div>
-                                        <div class="flex-column">
-                                            <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
-                                            <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
-                                            <p>· 경로 최적화 서비스</p>
-                                            <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
-                                        </div>
-                                    </div>
-                                </div>
+                            <div class="slideImg">
+                                <img src="../../resources/img/common/about-img-db.png" alt="">
                             </div>
-                            <div class="accordion"
-                                style="background-image: url(../../resources/img/common/about-img3.png);">
-                                <div class="slideText pl20">
-                                    <p class="accordion-num"><span>03.</span> Data Science </p>
-                                    <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
+                            <div class="slideTextDtail">
+                                <div>
+                                    <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
+                                    <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
+                                    <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
+                                        통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</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 style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
-                                        수요기관 및 기업 확장
-                                    </p>
-                                    <div class=" flex justify-start" style="flex-wrap: nowrap;">
-                                        <div style="width: 20%;">
-                                            <p>[대표사례]</p>
-                                        </div>
-                                        <div class="flex-column">
-                                            <p>· 데이터 품질관리 컨설팅</p>
-                                            <p>· AI 안전통합 횡단보도 플랫폼</p>
-                                        </div>
+                                <div class=" flex justify-between" style="flex-wrap: nowrap;">
+                                    <div style="width: 20%;">
+                                        <p>[대표사례]</p>
+                                    </div>
+                                    <div class=" flex justify-between accordion-box">
+                                        <p>·도로 위험 감지 시스템</p>
+                                        <p>·경로 최적화 서비스</p>
+                                        <p>·안개 감지 시스템</p>
+                                        <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
                                     </div>
                                 </div>
                             </div>
 
 
                         </div>
+                        <div class="accordion "
+                            style="background-image: url(../../resources/img/common/about-img2.png);">
+                            <div class="slideText  pl20">
+                                <p class="accordion-num"><span>02.</span> System Design</p>
+                                <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
+                            </div>
+                            <div class="slideImg">
+                                <img src="../../resources/img/common/about-img-bg02.png" alt="">
+                            </div>
+                            <div class="slideTextDtail">
+                                <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
+                                    통해 고객사 최적화 UI 도출 </p>
+                                <div class=" flex justify-start" style="flex-wrap: nowrap;">
+                                    <div style="width: 20%;">
+                                        <p>[대표사례]</p>
+                                    </div>
+                                    <div class="flex-column">
+                                        <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
+                                        <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
+                                        <p>· 경로 최적화 서비스</p>
+                                        <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion"
+                            style="background-image: url(../../resources/img/common/about-img3.png);">
+                            <div class="slideText pl20">
+                                <p class="accordion-num"><span>03.</span> Data Science </p>
+                                <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</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 style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
+                                    수요기관 및 기업 확장
+                                </p>
+                                <div class=" flex justify-start" style="flex-wrap: nowrap;">
+                                    <div style="width: 20%;">
+                                        <p>[대표사례]</p>
+                                    </div>
+                                    <div class="flex-column">
+                                        <p>· 데이터 품질관리 컨설팅</p>
+                                        <p>· AI 안전통합 횡단보도 플랫폼</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
                     </div>
                 </div>
 
 
             </div>
             <div class="swiper-slide about">
-                <div class="taken-wrap slide-wrap ">
-                    <div class="text-area flex">
-                        <div class="about-title mb20" style="width: 100%;">
-                            <p class="mb20">Vision</p>
-                            <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
-                                매출을 확대해 나갑니다.
-                            </p>
-                        </div>
-                        <div class="flex justify-center about-vision-box">
-                            <img src="../../resources/img/common/about-img5.png" alt="">
-                            <img src="../../resources/img/common/about-img4.png" alt="">
-                        </div>
+                <div class="text-area flex pb60">
+                    <div class="about-title mb20" style="width: 100%;">
+                        <p class="mb20">Vision</p>
+                        <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
+                            매출을 확대해 나갑니다.
+                        </p>
+                    </div>
+                    <div class="flex justify-center about-vision-box">
+                        <img src="../../resources/img/common/about-img5.png" alt="">
+                        <img src="../../resources/img/common/about-img4.png" alt="">
                     </div>
                 </div>
             </div>

 
     .container {
         width: 1200px;
+        height: 70%;
         display: flex;
         flex-wrap: nowrap;
         border-radius: 20px;

e768fe7

5931a93

views/pages/Customized.html

--- views/pages/Customized.html

+++ views/pages/Customized.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60 slide-section flex align-center">
+    <div class=" text-area pb60 slide-section flex align-center customized">
 
 
         <div class="flex justify-between" style="gap: 10px; width: 100%;">

                 <p>각 산업 영역에 대한 품부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에 따라 최적화된 방법론을 적용하여 고객의 Vision을 실현 시킵니다.</p>
             </div>
             <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
-                <div>
+                <div class="solution-ani">
                     <img src="../../resources/img/common/custom-img.png" alt="">
                     <p>상주시 데이터 활용 <br>기본계획 수립</p>
                 </div>
-                <div>
+                <div class="solution-ani">
                     <img src="../../resources/img/common/custom-img2.png" alt="">
                     <p>영천시 데이터 활용 <br>기본계획 수립</p>
                 </div>
-                <div>
+                <div class="solution-ani">
                     <img src="../../resources/img/common/custom-img3.png" alt="">
                     <p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
                 </div>
-                <div>
+                <div class="solution-ani">
                     <img src="../../resources/img/common/custom-img4.png" alt="">
                     <p>영천시 공공데이터 <br>품질관리</p>
                 </div>

e768fe7

5931a93

views/pages/Data.html

--- views/pages/Data.html

+++ views/pages/Data.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area  slide-section flex align-center">
+    <div class=" text-area pb60  slide-section flex align-center">
 
 
-            <div class="flex justify-between" style="gap: 10px; width: 100%;">
-                <div class="etc-wrap-title ">
+            <div class="flex justify-between " style="gap: 10px; width: 100%;">
+                <div class="etc-wrap-title pb20">
                     <h1 class="mb20 ">데이터분석을 통한 인사이트 도출</h1>
                     <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
                 </div>
                 <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
-                    <div class="">
+                    <div class="solution-ani">
                         <img src="../../resources/img/common/data-img1.png" alt="">
                         <p>구미시 주요 이슈 및 민원 분석</p>
                     </div>
-                    <div class="">
+                    <div class="solution-ani">
                         <img src="../../resources/img/common/data-img2.png" alt="">
                         <p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
                     </div>
-                    <div class="">
+                    <div class="solution-ani">
                         <img src="../../resources/img/common/data-img3.png" alt="">
                         <p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
                     </div>

e768fe7

5931a93

views/pages/DataAnalysis.html

--- views/pages/DataAnalysis.html

+++ views/pages/DataAnalysis.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60 slide-section flex align-center">
 
 
-        <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
-            <div class="etc-wrap-title mb20">
-                <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
-                <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
+    <div class="text-area pb60 slide-section flex align-center dataanalysis" style="gap: 10px;  height: 100%;">
+        <div class="etc-wrap-title mb20">
+            <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
+            <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
+        </div>
+        <div class="flex justify-between align-end etc-wrap-text">
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
+                <p>도로 위험 감지 시스템</p>
             </div>
-            <div class="flex justify-between align-end etc-wrap-text">
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
-                    <p>도로 위험 감지 시스템</p>
-                </div>
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
-                    <p>안개 감지 플랫폼</p>
-                </div>
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
-                    <p>이동경로 최적화 서비스</p>
-                </div>
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
-                    <p>횡단보도 및 내비게이션 연계 플랫폼</p>
-                </div>
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
-                    <p>전력데이터 관리 시스템</p>
-                </div>
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
-                    <p>금형 부품 데이터 관리 플랫폼</p>
-                </div>
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
-                    <p>제조 데이터 관리 시스템</p>
-                </div>
-                <div class="">
-                    <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
-                    <p>메타데이터 관리 시스템</p>
-                </div>
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
+                <p>안개 감지 플랫폼</p>
+            </div>
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
+                <p>이동경로 최적화 서비스</p>
+            </div>
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
+                <p>횡단보도 및 내비게이션 연계 플랫폼</p>
+            </div>
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
+                <p>전력데이터 관리 시스템</p>
+            </div>
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
+                <p>금형 부품 데이터 관리 플랫폼</p>
+            </div>
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
+                <p>제조 데이터 관리 시스템</p>
+            </div>
+            <div class="solution-ani">
+                <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
+                <p>메타데이터 관리 시스템</p>
             </div>
         </div>
-
     </div>
+
     <div id="footer"></div>
 
 </body>

         padding: 0;
     }
 
-  
+
 
     .box-wrap div img {
-        border: 1px solid ;
+        border: 1px solid;
         padding-bottom: 2rem;
     }
 

e768fe7

5931a93

views/pages/Etc.html

--- views/pages/Etc.html

+++ views/pages/Etc.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60 slide-section flex align-center">
+    <div class=" text-area pb60 slide-section flex align-center etc">
 
 
 

                     <h1 class="mb20">기타사례</h1>
                 </div>
                 <div class="flex justify-between box-wrap etc-grid-box" style="width: 100%; gap: 20px; ">
-                    <div class="etc-box">
+                    <div class="etc-box solution-ani">
                             <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>
                     </div>
-                    <div class="etc-box">
+                    <div class="etc-box solution-ani">
                             <img src="../../resources/img/common/etc-img2.png" alt="">
                             <p class="etc-box-title">AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
                             <p>- AI 디지털교과서 통합지원센터 홈페이지 프로토타입 개발 및 운영</p>

e768fe7

5931a93

views/pages/Marketing.html

--- views/pages/Marketing.html

+++ views/pages/Marketing.html


 
         });
     });
-
-
-
+    
+    
     $(function () {
         $("#header").load("../layout/Header.html");
         $("#footer").load("../layout/footer.html");
         $("#footer").show();
-
+        
     });
+    
     document.addEventListener('DOMContentLoaded', function () {
         var newsDivs = document.querySelectorAll('div[data-url]');
 

             div.style.cursor = 'pointer';
         });
     });
-
 
 </script>
 

         display: block;
         object-fit: cover;
     }
+
+    /* .marketing-area{
+        cursor: pointer;
+    } */
 </style>
 
 </html>

5931a93

views/pages/SmartCtiy copy.html (added)

+++ views/pages/SmartCtiy copy.html

...	...	@@ -0,0 +1,180 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+
	4	+<head>
	5	+ <meta charset="UTF-8">
	6	+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	+ <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	+ <link rel="stylesheet" href="../../resources/css/reset.css">
	11	+ <link rel="stylesheet" href="../../resources/css/style.css">
	12	+ <link rel="stylesheet" href="../../resources/css/component.css">
	13	+ <link rel="stylesheet" href="../../resources/css/common.css">
	14	+ <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	+
	16	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	+
	18	+
	19	+
	20	+ <title>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+
	26	+
	27	+ <div class="text-area pb60 slide-section flex align-center" style="gap: 10px; height: 100%;">
	28	+ <div class="etc-wrap-title mb20">
	29	+ <h1 class="mb20">스마트시티 솔루션 공급</h1>
	30	+ <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
	31	+ 제공합니다.</p>
	32	+ </div>
	33	+ <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap;">
	34	+ <div class="">
	35	+ <img src="../../resources/img/common/smart-img1.png" alt="">
	36	+ <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
	37	+ <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
	38	+ <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
	39	+ </div>
	40	+ <div class="">
	41	+ <img src="../../resources/img/common/smart-img2.png" alt="">
	42	+ <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
	43	+ <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
	44	+ <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
	45	+ </div>
	46	+ <div class="">
	47	+ <img src="../../resources/img/common/smart-img3.png" alt="">
	48	+ <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
	49	+ <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
	50	+ <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
	51	+ </div>
	52	+
	53	+ </div>
	54	+
	55	+ </div>
	56	+
	57	+ <div id="footer"></div>
	58	+
	59	+</body>
	60	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	61	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	62	+<script>
	63	+
	64	+ $(document).ready(function () {
	65	+ $("#btnHeadquarter").click(function () {
	66	+ $("#btnHeadquarter").addClass('on');
	67	+ $("#btnDaeguBranch").removeClass('on');
	68	+ $("#contentDaeguBranch").hide();
	69	+
	70	+ $("#contentHeadquarter").show();
	71	+ });
	72	+
	73	+ $("#btnDaeguBranch").click(function () {
	74	+ $("#btnDaeguBranch").addClass('on');
	75	+ $("#btnHeadquarter").removeClass('on');
	76	+
	77	+ $("#contentHeadquarter").hide();
	78	+
	79	+ $("#contentDaeguBranch").show();
	80	+
	81	+
	82	+
	83	+
	84	+
	85	+ });
	86	+ });
	87	+
	88	+
	89	+
	90	+ $(function () {
	91	+ $("#header").load("../layout/Header.html");
	92	+ $("#footer").load("../layout/footer.html");
	93	+ $("#footer").show();
	94	+
	95	+ });
	96	+
	97	+</script>
	98	+
	99	+<style scoped>
	100	+ /* 스크롤바 없애기 */
	101	+ body {
	102	+ -ms-overflow-style: none;
	103	+ /* 인터넷 익스플로러 */
	104	+ scrollbar-width: none;
	105	+ /* 파이어폭스 */
	106	+ }
	107	+
	108	+ ::-webkit-scrollbar {
	109	+ display: none;
	110	+ }
	111	+
	112	+ #header {
	113	+ position: fixed;
	114	+ top: 0;
	115	+ z-index: 3;
	116	+ border-bottom: 1px solid #ced4da;
	117	+ background-color: white;
	118	+ }
	119	+
	120	+ #header .header .logo {
	121	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	122	+ width: 200px;
	123	+ background-size: contain;
	124	+ height: 25px;
	125	+
	126	+
	127	+ }
	128	+
	129	+ #header .header nav li a {
	130	+ color: #333;
	131	+
	132	+ }
	133	+
	134	+
	135	+
	136	+ html,
	137	+ body {
	138	+ position: relative;
	139	+ height: 100%;
	140	+ font-family: 'Pretendard';
	141	+
	142	+ }
	143	+
	144	+ body {
	145	+ background: linear-gradient(#d7e2ff9d, #fff, #fff);
	146	+ font-family: 'Pretendard';
	147	+ font-size: 14px;
	148	+ color: #000;
	149	+ margin: 0;
	150	+ padding: 0;
	151	+ }
	152	+
	153	+ .box-wrap {
	154	+ flex-wrap: nowrap;
	155	+ }
	156	+
	157	+ .box-wrap-title {
	158	+ text-align: center;
	159	+ font-size: 2rem;
	160	+ font-weight: 600;
	161	+ }
	162	+
	163	+ .box-wrap div {
	164	+ width: 100%;
	165	+ }
	166	+
	167	+ .box-wrap div img {
	168	+ width: 100%;
	169	+ padding-bottom: 2rem;
	170	+ }
	171	+
	172	+ .box-wrap div div p {
	173	+ height: 20%;
	174	+ text-align: left;
	175	+ font-size: 1.5rem;
	176	+ line-height: 1.5;
	177	+ }
	178	+</style>
	179	+
	180	+</html>(No newline at end of file)

e768fe7

5931a93

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html

...	...	@@ -22,46 +22,38 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class=" text-area pb60 slide-section flex align-center">
26	25
27	26
28		- <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
29		- <div class="etc-wrap-title mb20">
30		- <h1 class="mb20">스마트시티 솔루션 공급</h1>
31		- <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
32		- 제공합니다.</p>
	27	+ <div class="text-area pb60 slide-section flex align-center smart" style="gap: 10px; height: 100%;">
	28	+ <div class="etc-wrap-title mb20">
	29	+ <h1 class="mb20">스마트시티 솔루션 공급</h1>
	30	+ <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
	31	+ 제공합니다.</p>
	32	+ </div>
	33	+ <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap;">
	34	+ <div class="solution-ani">
	35	+ <img src="../../resources/img/common/smart-img1.png" alt="">
	36	+ <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
	37	+ <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
	38	+ <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
33	39	</div>
34		- <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
35		- <div class="pd10">
36		- <img src="../../resources/img/common/smart-img1.png" alt="">
37		- <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
38		- <div>
39		- <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
40		- <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
41		- </div>
42		- </div>
43		- <div class="pd10">
44		- <img src="../../resources/img/common/smart-img2.png" alt="">
45		- <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
46		- <div>
47		- <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
48		- <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
49		- </div>
50		- </div>
51		- <div class="pd10">
52		- <img src="../../resources/img/common/smart-img3.png" alt="">
53		- <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
54		- <div>
55		- <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
56		- <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
57		- </div>
58		- </div>
59		-
	40	+ <div class="smart-img solution-ani">
	41	+ <img src="../../resources/img/common/smart-img2.png" alt="">
	42	+ <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
	43	+ <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
	44	+ <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
	45	+ </div>
	46	+ <div class="solution-ani">
	47	+ <img src="../../resources/img/common/smart-img3.png" alt="">
	48	+ <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
	49	+ <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
	50	+ <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
60	51	</div>
61	52
62	53	</div>
63	54
64	55	</div>
	56	+
65	57	<div id="footer"></div>
66	58
67	59	</body>
...	...	@@ -164,24 +156,23 @@
164	156
165	157	.box-wrap-title {
166	158	text-align: center;
167		- font-size: 2rem;
168		- font-weight: 600;
	159	+ font-size: 2rem !important;
	160	+ font-weight: 700;
169	161	}
170	162
171		- .box-wrap div {
	163	+ .etc-wrap-text {
172	164	width: 100%;
173	165	}
174	166
175		- .box-wrap div img {
176		- width: 100%;
	167	+ .etc-wrap-text div img {
177	168	padding-bottom: 2rem;
178	169	}
179	170
180		- .box-wrap div div p {
181		- height: 20%;
182		- text-align: left;
	171	+ .etc-wrap-text div p {
	172	+ padding: 1rem 3rem;
	173	+
	174	+ /* text-align: left; */
183	175	font-size: 1.5rem;
184		- line-height: 1.5;
185	176	}
186	177	</style>
187	178

e768fe7

5931a93

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html


     <div class="swiper mySwiper">
         <div class="swiper-wrapper">
             <div class="swiper-slide">
-                <div class=" text-area pb60 slide-section flex align-center">
+                <div class=" text-area pb60 slide-section flex align-center solution">
 
                     <div class="solution-title">
                         <p>Taken BI Manager v1.0</p>

                         </div>
                         <div class="traffic-area flex align-end justify-end solution-web-box"
                             style="height: 100%; width: 100%;">
-                            <div class="flex justify-end traffic-button">
-                                <button class="traffic-btn">영상보기</button>
+                            <div class="flex justify-end traffic-button ">
+                                <button class="traffic-btn ">영상보기</button>
                             </div>
 
                             <img src="../../resources/img/common/traffic-img.png" alt="" style="height: 356px;">

e768fe7

5931a93

views/pages/Visualization.html

--- views/pages/Visualization.html

+++ views/pages/Visualization.html


 
 <body>
     <div id="header"></div>
-    <div class=" text-area pb60 slide-section flex align-center">
+    <div class=" text-area pb60 slide-section flex align-center visuali">
 
 
-        <div class=" flex justify-between  align-center" style="gap: 10px; width: 100%; height: 100%; align-content: center;">
-            <div class="etc-wrap-title ">
+        <div class=" flex justify-between  align-center"
+            style="gap: 10px; width: 100%; height: 100%; align-content: center;">
+            <div class="etc-wrap-title mb20">
                 <h1 class="mb20">시각화 서비스 시스템 구축</h1>
                 <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
             </div>
             <div class="etc-wrap-text flex justify-between">
 
-                <div class="">
+                <div class="solution-ani">
                     <img src="../../resources/img/common/visual-img1.png" alt="">
                     <p>영천시 지역별 인구 추이 분석</p>
                 </div>
-                <div class="">
+                <div class="solution-ani">
                     <img src="../../resources/img/common/visual-img2.png" alt="">
                     <p>포항시 지역별 인구 추이 분석</p>
                 </div>
-                <div class="">
+                <div class="solution-ani">
                     <img src="../../resources/img/common/visual-img3.png" alt="">
                     <p>스마트 제조 공정관리 모니터링 플랫폼</p>
                 </div>
 
-                <div class="">
+                <div class="solution-ani">
                     <img src="../../resources/img/common/visual-img4.png" alt="">
                     <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
                 </div>
-                <div class="">
+                <div class="solution-ani">
                     <img src="../../resources/img/common/visual-img5.png" alt="">
                     <p>시니어 스마트 케어 모니터링 플랫폼</p>
                 </div>
-                <div class="">
+                <div class="solution-ani">
                     <img src="../../resources/img/common/visual-img6.png" alt="">
                     <p>공정 및 외부 환경 관제 시각화</p>
                 </div>
-                <div class="">
+                <div class="solution-ani">
                     <img src="../../resources/img/common/visual-img7.png" alt="">
                     <p>상주시 부서별 재정 분석</p>
                 </div>
             </div>
         </div>
-    </div>
-
     </div>
     <div id="footer"></div>
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -5,7 +5,7 @@
5	5	height: 100%;
6	6	margin: auto;
7	7	align-content: center;
8		- padding-top: 6rem;
	8	+ padding-top: 12rem;
9	9	text-align: center;
10	10	}
11	11
...	...	@@ -125,7 +125,7 @@
125	125
126	126	.solution-text {
127	127	font-size: 4.5rem;
128		- font-weight: 900;
	128	+ font-weight: 700;
129	129	opacity: 0;
130	130	}
131	131
...	...	@@ -200,6 +200,53 @@
200	200	animation-name: fadeIn;
201	201	animation-duration: 1s;
202	202	animation-fill-mode: both;
	203	+}
	204	+
	205	+.solution-ani {
	206	+ opacity: 0;
	207	+ cursor: pointer;
	208	+ animation-name: fadeIn;
	209	+ animation-duration: 1s;
	210	+ animation-fill-mode: both;
	211	+}
	212	+
	213	+.solution-ani:nth-child(1) {
	214	+ animation-delay: 0s;
	215	+}
	216	+
	217	+.solution-ani:nth-child(2) {
	218	+ animation-delay: 0.3s;
	219	+}
	220	+
	221	+.solution-ani:nth-child(3) {
	222	+ animation-delay: 0.5s;
	223	+}
	224	+.solution-ani:nth-child(4) {
	225	+ animation-delay: 0.7s;
	226	+}
	227	+
	228	+.solution-ani:nth-child(5) {
	229	+ animation-delay: 0.9s;
	230	+}
	231	+
	232	+.solution-ani:nth-child(6) {
	233	+ animation-delay: 1s;
	234	+}
	235	+.solution-ani:nth-child(7) {
	236	+ animation-delay: 1.2s;
	237	+}
	238	+.solution-ani:nth-child(8) {
	239	+ animation-delay: 1.4s;
	240	+}
	241	+
	242	+@keyframes fadeIn {
	243	+ from {
	244	+ opacity: 0;
	245	+ }
	246	+
	247	+ to {
	248	+ opacity: 1;
	249	+ }
203	250	}
204	251
205	252	.solution-text.active {
...	...	@@ -357,7 +404,10 @@
357	404	.ivory-box div p:nth-child(1) {
358	405	color: #242a30;
359	406	}
360		-
	407	+.traffic-btn:hover{
	408	+ transform: scale(1.1);
	409	+ transition: all 0.5s ease;
	410	+}
361	411	.hvr-grow {
362	412	display: inline-block;
363	413	vertical-align: middle;
...	...	@@ -444,7 +494,7 @@
444	494
445	495	.portfolio-text {
446	496	font-size: 4.5rem;
447		- font-weight: 900;
	497	+ font-weight: 700;
448	498	position: relative;
449	499	text-align: left;
450	500	}
...	...	@@ -511,7 +561,7 @@
511	561	.map-text {
512	562	text-align: center;
513	563	font-size: 4rem;
514		- font-weight: 900;
	564	+ font-weight: 700;
515	565	position: relative;
516	566	}
517	567
...	...	@@ -533,6 +583,8 @@
533	583	padding: 10px 15px 10px 35px;
534	584	border-radius: 30px;
535	585	font-size: 1.4rem;
	586	+ font-family: 'Pretendard';
	587	+
536	588	font-weight: 600;
537	589	color: #213F99;
538	590	background: url(../img/common/location-dot-solid.svg) no-repeat 15px center / 15px;
...	...	@@ -558,9 +610,11 @@
558	610	}
559	611
560	612	.address-tile {
	613	+ text-align: left;
561	614	font-size: 2.5rem;
562	615	font-weight: 600;
563	616	color: #213F99;
	617	+ padding-left: 29px;
564	618	width: 150px;
565	619	position: relative;
566	620	}
...	...	@@ -876,7 +930,7 @@
876	930
877	931	.marketing-wrap-title h1 {
878	932	font-size: 5rem;
879		- font-weight: 900;
	933	+ font-weight: 700;
880	934	font-family: 'Pretendard';
881	935	position: relative;
882	936	}
...	...	@@ -930,6 +984,7 @@
930	984
931	985	.marketing-area p {
932	986	margin-bottom: 10px;
	987	+ font-weight: 600;
933	988	}
934	989
935	990	.marketing-area p span {
...	...	@@ -1107,7 +1162,7 @@
1107	1162
1108	1163
1109	1164	.accordion {
1110		- height: 550px;
	1165	+ height: 100%;
1111	1166	padding: 2rem;
1112	1167	cursor: pointer;
1113	1168	flex: 1;
...	...	@@ -1157,7 +1212,7 @@
1157	1212	}
1158	1213
1159	1214	.slideImg {
1160		- padding: 2rem;
	1215	+ margin-bottom: 10px;
1161	1216	width: 100%;
1162	1217	opacity: 0;
1163	1218	}
...	...	@@ -1328,7 +1383,12 @@
1328	1383	.etc-box p{
1329	1384	text-align: left;
1330	1385	}
1331		-
	1386	+.Portfolio{
	1387	+ margin: auto;
	1388	+ align-content: center;
	1389	+ padding-top: 6rem;
	1390	+ text-align: center;
	1391	+}
1332	1392	.etc-box p {
1333	1393	font-size: 1.5rem;
1334	1394	line-height: 2;
...	...	@@ -1360,7 +1420,7 @@
1360	1420	transform: translate(-50% ,-50%);
1361	1421	left: 50%;
1362	1422	z-index: 111;
1363		- width: 500px;
	1423	+ width: 50%;
1364	1424	/* height: 600px; */
1365	1425	padding: 3rem;
1366	1426	background-color: #FFFFFF;

...	...	@@ -3,63 +3,63 @@
3	3	font-family: 'Pretendard';
4	4	font-weight: 900;
5	5	font-display: swap;
6		- src: local('Pretendard Black'), url(../font/woff2/Pretendard-Black.woff2) format('woff2'), url(../font/woff/Pretendard-Black.woff) format('woff');
	6	+ src: local('Pretendard Black'), url(../font/Pretendard-Black.woff2) format('woff2'), url(../font/Pretendard-Black.woff) format('woff');
7	7	}
8	8
9	9	@font-face {
10	10	font-family: 'Pretendard';
11	11	font-weight: 800;
12	12	font-display: swap;
13		- src: local('Pretendard ExtraBold'), url(../font/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraBold.woff) format('woff');
	13	+ src: local('Pretendard ExtraBold'), url(../font/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/Pretendard-ExtraBold.woff) format('woff');
14	14	}
15	15
16	16	@font-face {
17	17	font-family: 'Pretendard';
18	18	font-weight: 700;
19	19	font-display: swap;
20		- src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/woff/Pretendard-Bold.woff) format('woff');
	20	+ src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/Pretendard-Bold.woff) format('woff');
21	21	}
22	22
23	23	@font-face {
24	24	font-family: 'Pretendard';
25	25	font-weight: 600;
26	26	font-display: swap;
27		- src: local('Pretendard SemiBold'), url(../font/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../font/woff/Pretendard-SemiBold.woff) format('woff');
	27	+ src: local('Pretendard SemiBold'), url(../font/Pretendard-SemiBold.woff2) format('woff2'), url(../font/Pretendard-SemiBold.woff) format('woff');
28	28	}
29	29
30	30	@font-face {
31	31	font-family: 'Pretendard';
32	32	font-weight: 500;
33	33	font-display: swap;
34		- src: local('Pretendard Medium'), url(../font/woff2/Pretendard-Medium.woff2) format('woff2'), url(../font/woff/Pretendard-Medium.woff) format('woff');
	34	+ src: local('Pretendard Medium'), url(../font/Pretendard-Medium.woff2) format('woff2'), url(../font/Pretendard-Medium.woff) format('woff');
35	35	}
36	36
37	37	@font-face {
38	38	font-family: 'Pretendard';
39	39	font-weight: 400;
40	40	font-display: swap;
41		- src: local('Pretendard Regular'), url(../font/woff2/Pretendard-Regular.woff2) format('woff2'), url(../font/woff/Pretendard-Regular.woff) format('woff');
	41	+ src: local('Pretendard Regular'), url(../font/Pretendard-Regular.woff2) format('woff2'), url(../font/Pretendard-Regular.woff) format('woff');
42	42	}
43	43
44	44	@font-face {
45	45	font-family: 'Pretendard';
46	46	font-weight: 300;
47	47	font-display: swap;
48		- src: local('Pretendard Light'), url(../font/woff2/Pretendard-Light.woff2) format('woff2'), url(../font/woff/Pretendard-Light.woff) format('woff');
	48	+ src: local('Pretendard Light'), url(../font/Pretendard-Light.woff2) format('woff2'), url(../font/Pretendard-Light.woff) format('woff');
49	49	}
50	50
51	51	@font-face {
52	52	font-family: 'Pretendard';
53	53	font-weight: 200;
54	54	font-display: swap;
55		- src: local('Pretendard ExtraLight'), url(../font/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/woff/Pretendard-ExtraLight.woff) format('woff');
	55	+ src: local('Pretendard ExtraLight'), url(../font/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/Pretendard-ExtraLight.woff) format('woff');
56	56	}
57	57
58	58	@font-face {
59	59	font-family: 'Pretendard';
60	60	font-weight: 100;
61	61	font-display: swap;
62		- src: local('Pretendard Thin'), url(../font/woff2/Pretendard-Thin.woff2) format('woff2'), url(../font/woff/Pretendard-Thin.woff) format('woff');
	62	+ src: local('Pretendard Thin'), url(../font/Pretendard-Thin.woff2) format('woff2'), url(../font/Pretendard-Thin.woff) format('woff');
63	63	}
64	64
65	65	@font-face {

...	...	@@ -28,7 +28,7 @@
28	28	<div class="main-wrap">
29	29	<div class="text-area flex align-end main-text">
30	30	<div>
31		- <img src="../resources/img/common/mouse.png" alt="">
	31	+ <!-- <img src="../resources/img/common/mouse.png" alt=""> -->
32	32	</div>
33	33	</div>
34	34	</div>
...	...	@@ -36,7 +36,7 @@
36	36	</div>
37	37	<div class="swiper-slide">
38	38	<div class="slide-wrap slide-back scale-in-br">
39		- <div class="text-area slide-section flex align-center justify-center">
	39	+ <div class="text-area slide-section flex align-center justify-center pb60">
40	40	<div style="height: 20%;">
41	41	<p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
42	42	class="text-event">혁신으로 선도</span>합니다.</p>
...	...	@@ -82,11 +82,11 @@
82	82	</div>
83	83	<div class="swiper-slide">
84	84	<div class="slide-wrap pt90 pb90 slide-solution">
85		- <div class=" flex align-center" style="align-content: center; width: 100%;">
86		- <div style="width: 1200px; margin: 0 auto;">
87		- <p class="portfolio-text mb10 ">PORTFOLIO</p>
	85	+ <div class=" Portfolio flex align-center" style="align-content: center; width: 100%;">
	86	+ <div style="width: 1200px; margin: auto;">
	87	+ <p class="portfolio-text mb20 ">PORTFOLIO</p>
88	88	</div>
89		- <div class="swiper innerSwiper" >
	89	+ <div class="swiper innerSwiper">
90	90	<div class="swiper-wrapper">
91	91	<div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
92	92	<img src="../resources/img/common/innerimg-1.png" alt="">
...	...	@@ -151,7 +151,8 @@
151	151	</div>
152	152	<div class="swiper-slide">
153	153	<div class="slide-wrap pt60 pb60 slide-solution gradient-bottom ">
154		- <div class=" text-area pb60 flex align-center justify-center" style="height: 100%; align-content: center;">
	154	+ <div class=" text-area pb60 flex align-center justify-center"
	155	+ style="height: 100%; align-content: center;">
155	156	<div style="width: 100%;" class="sub-text-area">
156	157	<p class="map-text ">오시는길</p>
157	158	</div>
...	...	@@ -161,7 +162,7 @@
161	162	</div>
162	163	<div>
163	164
164		- <div id="contentHeadquarter" style="height: 350px;">
	165	+ <div id="contentHeadquarter" style="height: 500px;">
165	166	<div id="map1" style="width:1200px;height:100%;"></div>
166	167	<div class="address-box flex">
167	168	<p class="address-tile">본사</p>
...	...	@@ -169,8 +170,8 @@
169	170	</p>
170	171	</div>
171	172	</div>
172		- <div id="contentDaeguBranch" style="display: none;">
173		- <div id="map2" style="width:1200px;height:350px;"></div>
	173	+ <div id="contentDaeguBranch" style="display: none; height: 500px;">
	174	+ <div id="map2" style="width:1200px;height:100%;"></div>
174	175	<div class="address-box flex">
175	176	<p class="address-tile">대구지사</p>
176	177	<p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
...	...	@@ -221,7 +222,7 @@
221	222	// 지사 지도
222	223	var mapContainer2 = document.getElementById('map2'),
223	224	mapOption2 = {
224		- center: new kakao.maps.LatLng(35.835332450870354,128.68246038604707),
	225	+ center: new kakao.maps.LatLng(35.835332450870354, 128.68246038604707),
225	226	level: 4,
226	227	};
227	228	var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
...	...	@@ -238,7 +239,7 @@
238	239	function resizeMap() {
239	240	var mapContainer2 = document.getElementById('map2');
240	241	mapContainer2.style.width = '1200px';
241		- mapContainer2.style.height = '350px';
	242	+ mapContainer2.style.height = '500px';
242	243	}
243	244
244	245	function relayout() {
...	...	@@ -246,6 +247,8 @@
246	247	}
247	248
248	249	$(document).ready(function () {
	250	+ document.getElementById('btnHeadquarter').classList.add('on');
	251	+
249	252	$("#btnHeadquarter").click(function () {
250	253	$("#btnHeadquarter").addClass('on');
251	254	$("#btnDaeguBranch").removeClass('on');
...	...	@@ -266,6 +269,50 @@
266	269
267	270	});
268	271	});
	272	+ function initSwiper() {
	273	+ if (window.innerWidth < 768) {
	274	+ // 화면 너비가 768px 미만일 때, 스와이퍼 초기화하지 않음
	275	+ // 여기에서 모바일 환경을 위한 코드를 추가할 수 있습니다.
	276	+
	277	+ } else {
	278	+ // 화면 너비가 768px 이상일 때만 스와이퍼 초기화
	279	+ var swiper1 = new Swiper(".mySwiper", {
	280	+ direction: "vertical",
	281	+ slidesPerView: 1,
	282	+ spaceBetween: 40,
	283	+ speed: 700,
	284	+ mousewheel: true,
	285	+ pagination: {
	286	+ el: ".swiper-pagination",
	287	+ clickable: true,
	288	+ },
	289	+ on: {
	290	+ slideChangeTransitionEnd: function () {
	291	+ // 슬라이드 변경 시 동작하는 코드
	292	+ },
	293	+ slideChange: function () {
	294	+ // 다른 슬라이드로 변경될 때 실행되는 코드
	295	+ },
	296	+ reachEnd: function () {
	297	+ // 스와이퍼의 끝에 도달했을 때 실행되는 코드
	298	+ },
	299	+ }
	300	+ });
	301	+ }
	302	+}
	303	+
	304	+// 초기 스와이퍼 설정
	305	+initSwiper();
	306	+
	307	+// 화면 크기가 변경될 때마다 스와이퍼 초기화 여부를 재검사
	308	+window.addEventListener('resize', function() {
	309	+ // 이미 초기화된 스와이퍼가 있다면 파괴
	310	+ if (typeof swiper1 !== 'undefined' && swiper1 !== null) {
	311	+ swiper1.destroy();
	312	+ swiper1 = null;
	313	+ }
	314	+ initSwiper(); // 스와이퍼 다시 초기화
	315	+});
269	316
270	317	var swiper1 = new Swiper(".mySwiper", {
271	318	direction: "vertical",
...	...	@@ -325,6 +372,12 @@
325	372
326	373	}
327	374	});
	375	+ if (window.innerWidth >= 768) {
	376	+ // 화면 너비가 768px 이상일 때만 스와이퍼 초기화
	377	+ var mySwiper = new Swiper('.swiper-container', {
	378	+ // 스와이퍼 옵션 설정
	379	+ });
	380	+}
328	381	window.addEventListener('wheel', function (event) {
329	382	if (event.deltaY < 0) {
330	383	swiper1.mousewheel.enable();
...	...	@@ -337,10 +390,10 @@
337	390
338	391	boxes.forEach(box => {
339	392	setTimeout(() => {
340		- box.style.display = 'block'; // 박스를 보이게 합니다.
341		- box.style.animationDelay = `${delay}s`; // 애니메이션 지연 시간을 설정합니다.
342		- delay += 0.3; // 다음 박스가 나타나기까지의 지연 시간을 증가시킵니다.
343		- }, delay * 3000); // setTimeout은 밀리초 단위를 사용합니다.
	393	+ box.style.display = 'block';
	394	+ box.style.animationDelay = `${delay}s`;
	395	+ delay += 0.3;
	396	+ }, delay * 3000);
344	397	});
345	398	});
346	399	// 헤더,푸터 불러오기
...	...	@@ -406,7 +459,6 @@
406	459	div.style.cursor = 'pointer';
407	460	});
408	461	});
409		-
410	462
411	463
412	464

...	...	@@ -63,117 +63,113 @@
63	63	</div>
64	64	</div>
65	65	<div class="swiper-slide">
66		- <div class="taken-wrap slide-solution slide-wrap">
67		- <div class="text-area flex">
68		- <div class="about-title mb20" style="width: 100%;">
69		- <p class="mb20">Business</p>
70		- <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
71		- 해결합니다.</p>
72		- </div>
73		- <div class="container silde-box">
74		- <div class="accordion"
75		- style="background-image: url(../../resources/img/common/about-img1.png);">
76		- <div class="slideText pl20">
77		- <p class="accordion-num"><span>01.</span> AI Solution</p>
78		- <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
79		- </div>
80		- <div class="slideImg">
81		- <img src="../../resources/img/common/about-img-db.png" alt="">
82		- </div>
83		- <div class="slideTextDtail">
84		- <div>
85		- <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
86		- <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
87		- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
88		- 통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
89		- </div>
90		- <div class=" flex justify-between" style="flex-wrap: nowrap;">
91		- <div style="width: 20%;">
92		- <p>[대표사례]</p>
93		- </div>
94		- <div class=" flex justify-between accordion-box">
95		- <p>·도로 위험 감지 시스템</p>
96		- <p>·경로 최적화 서비스</p>
97		- <p>·안개 감지 시스템</p>
98		- <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
99		- </div>
100		- </div>
101		- </div>
102		-
103		-
	66	+ <div class="text-area flex align-center justify-center pb60">
	67	+ <div class="about-title mb20" style="width: 100%;">
	68	+ <p class="mb20">Business</p>
	69	+ <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
	70	+ 해결합니다.</p>
	71	+ </div>
	72	+ <div class="container silde-box">
	73	+ <div class="accordion flex justify-between"
	74	+ style="background-image: url(../../resources/img/common/about-img1.png);">
	75	+ <div class="slideText pl20">
	76	+ <p class="accordion-num"><span>01.</span> AI Solution</p>
	77	+ <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
104	78	</div>
105		- <div class="accordion "
106		- style="background-image: url(../../resources/img/common/about-img2.png);">
107		- <div class="slideText pl20">
108		- <p class="accordion-num"><span>02.</span> System Design</p>
109		- <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
110		- </div>
111		- <div class="slideImg">
112		- <img src="../../resources/img/common/about-img-bg02.png" alt="">
113		- </div>
114		- <div class="slideTextDtail">
115		- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
116		- 통해 고객사 최적화 UI 도출 </p>
117		- <div class=" flex justify-start" style="flex-wrap: nowrap;">
118		- <div style="width: 20%;">
119		- <p>[대표사례]</p>
120		- </div>
121		- <div class="flex-column">
122		- <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
123		- <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
124		- <p>· 경로 최적화 서비스</p>
125		- <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
126		- </div>
127		- </div>
128		- </div>
	79	+ <div class="slideImg">
	80	+ <img src="../../resources/img/common/about-img-db.png" alt="">
129	81	</div>
130		- <div class="accordion"
131		- style="background-image: url(../../resources/img/common/about-img3.png);">
132		- <div class="slideText pl20">
133		- <p class="accordion-num"><span>03.</span> Data Science </p>
134		- <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
	82	+ <div class="slideTextDtail">
	83	+ <div>
	84	+ <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
	85	+ <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
	86	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
	87	+ 통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
135	88	</div>
136		- <div class="slideImg">
137		- <img src="../../resources/img/common/about-img-bg03.png" alt="">
138		- </div>
139		- <div class="slideTextDtail">
140		- <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
141		- <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
142		- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
143		- 수요기관 및 기업 확장
144		- </p>
145		- <div class=" flex justify-start" style="flex-wrap: nowrap;">
146		- <div style="width: 20%;">
147		- <p>[대표사례]</p>
148		- </div>
149		- <div class="flex-column">
150		- <p>· 데이터 품질관리 컨설팅</p>
151		- <p>· AI 안전통합 횡단보도 플랫폼</p>
152		- </div>
	89	+ <div class=" flex justify-between" style="flex-wrap: nowrap;">
	90	+ <div style="width: 20%;">
	91	+ <p>[대표사례]</p>
	92	+ </div>
	93	+ <div class=" flex justify-between accordion-box">
	94	+ <p>·도로 위험 감지 시스템</p>
	95	+ <p>·경로 최적화 서비스</p>
	96	+ <p>·안개 감지 시스템</p>
	97	+ <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
153	98	</div>
154	99	</div>
155	100	</div>
156	101
157	102
158	103	</div>
	104	+ <div class="accordion "
	105	+ style="background-image: url(../../resources/img/common/about-img2.png);">
	106	+ <div class="slideText pl20">
	107	+ <p class="accordion-num"><span>02.</span> System Design</p>
	108	+ <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
	109	+ </div>
	110	+ <div class="slideImg">
	111	+ <img src="../../resources/img/common/about-img-bg02.png" alt="">
	112	+ </div>
	113	+ <div class="slideTextDtail">
	114	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
	115	+ 통해 고객사 최적화 UI 도출 </p>
	116	+ <div class=" flex justify-start" style="flex-wrap: nowrap;">
	117	+ <div style="width: 20%;">
	118	+ <p>[대표사례]</p>
	119	+ </div>
	120	+ <div class="flex-column">
	121	+ <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
	122	+ <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
	123	+ <p>· 경로 최적화 서비스</p>
	124	+ <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
	125	+ </div>
	126	+ </div>
	127	+ </div>
	128	+ </div>
	129	+ <div class="accordion"
	130	+ style="background-image: url(../../resources/img/common/about-img3.png);">
	131	+ <div class="slideText pl20">
	132	+ <p class="accordion-num"><span>03.</span> Data Science </p>
	133	+ <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
	134	+ </div>
	135	+ <div class="slideImg">
	136	+ <img src="../../resources/img/common/about-img-bg03.png" alt="">
	137	+ </div>
	138	+ <div class="slideTextDtail">
	139	+ <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
	140	+ <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
	141	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
	142	+ 수요기관 및 기업 확장
	143	+ </p>
	144	+ <div class=" flex justify-start" style="flex-wrap: nowrap;">
	145	+ <div style="width: 20%;">
	146	+ <p>[대표사례]</p>
	147	+ </div>
	148	+ <div class="flex-column">
	149	+ <p>· 데이터 품질관리 컨설팅</p>
	150	+ <p>· AI 안전통합 횡단보도 플랫폼</p>
	151	+ </div>
	152	+ </div>
	153	+ </div>
	154	+ </div>
	155	+
	156	+
159	157	</div>
160	158	</div>
161	159
162	160
163	161	</div>
164	162	<div class="swiper-slide about">
165		- <div class="taken-wrap slide-wrap ">
166		- <div class="text-area flex">
167		- <div class="about-title mb20" style="width: 100%;">
168		- <p class="mb20">Vision</p>
169		- <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
170		- 매출을 확대해 나갑니다.
171		- </p>
172		- </div>
173		- <div class="flex justify-center about-vision-box">
174		- <img src="../../resources/img/common/about-img5.png" alt="">
175		- <img src="../../resources/img/common/about-img4.png" alt="">
176		- </div>
	163	+ <div class="text-area flex pb60">
	164	+ <div class="about-title mb20" style="width: 100%;">
	165	+ <p class="mb20">Vision</p>
	166	+ <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
	167	+ 매출을 확대해 나갑니다.
	168	+ </p>
	169	+ </div>
	170	+ <div class="flex justify-center about-vision-box">
	171	+ <img src="../../resources/img/common/about-img5.png" alt="">
	172	+ <img src="../../resources/img/common/about-img4.png" alt="">
177	173	</div>
178	174	</div>
179	175	</div>
...	...	@@ -653,6 +649,7 @@
653	649
654	650	.container {
655	651	width: 1200px;
	652	+ height: 70%;
656	653	display: flex;
657	654	flex-wrap: nowrap;
658	655	border-radius: 20px;

...	...	@@ -22,7 +22,7 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class=" text-area pb60 slide-section flex align-center">
	25	+ <div class=" text-area pb60 slide-section flex align-center customized">
26	26
27	27
28	28	<div class="flex justify-between" style="gap: 10px; width: 100%;">
...	...	@@ -31,19 +31,19 @@
31	31	<p>각 산업 영역에 대한 품부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에 따라 최적화된 방법론을 적용하여 고객의 Vision을 실현 시킵니다.</p>
32	32	</div>
33	33	<div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
34		- <div>
	34	+ <div class="solution-ani">
35	35	<img src="../../resources/img/common/custom-img.png" alt="">
36	36	<p>상주시 데이터 활용 <br>기본계획 수립</p>
37	37	</div>
38		- <div>
	38	+ <div class="solution-ani">
39	39	<img src="../../resources/img/common/custom-img2.png" alt="">
40	40	<p>영천시 데이터 활용 <br>기본계획 수립</p>
41	41	</div>
42		- <div>
	42	+ <div class="solution-ani">
43	43	<img src="../../resources/img/common/custom-img3.png" alt="">
44	44	<p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
45	45	</div>
46		- <div>
	46	+ <div class="solution-ani">
47	47	<img src="../../resources/img/common/custom-img4.png" alt="">
48	48	<p>영천시 공공데이터 <br>품질관리</p>
49	49	</div>

...	...	@@ -22,24 +22,24 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class=" text-area slide-section flex align-center">
	25	+ <div class=" text-area pb60 slide-section flex align-center">
26	26
27	27
28		- <div class="flex justify-between" style="gap: 10px; width: 100%;">
29		- <div class="etc-wrap-title ">
	28	+ <div class="flex justify-between " style="gap: 10px; width: 100%;">
	29	+ <div class="etc-wrap-title pb20">
30	30	<h1 class="mb20 ">데이터분석을 통한 인사이트 도출</h1>
31	31	<p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
32	32	</div>
33	33	<div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
34		- <div class="">
	34	+ <div class="solution-ani">
35	35	<img src="../../resources/img/common/data-img1.png" alt="">
36	36	<p>구미시 주요 이슈 및 민원 분석</p>
37	37	</div>
38		- <div class="">
	38	+ <div class="solution-ani">
39	39	<img src="../../resources/img/common/data-img2.png" alt="">
40	40	<p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
41	41	</div>
42		- <div class="">
	42	+ <div class="solution-ani">
43	43	<img src="../../resources/img/common/data-img3.png" alt="">
44	44	<p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
45	45	</div>

...	...	@@ -22,51 +22,49 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class=" text-area pb60 slide-section flex align-center">
26	25
27	26
28		- <div class="text-area flex justify-between " style="gap: 10px; width: 100%; height: 100%;">
29		- <div class="etc-wrap-title mb20">
30		- <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
31		- <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
	27	+ <div class="text-area pb60 slide-section flex align-center dataanalysis" style="gap: 10px; height: 100%;">
	28	+ <div class="etc-wrap-title mb20">
	29	+ <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
	30	+ <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
	31	+ </div>
	32	+ <div class="flex justify-between align-end etc-wrap-text">
	33	+ <div class="solution-ani">
	34	+ <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
	35	+ <p>도로 위험 감지 시스템</p>
32	36	</div>
33		- <div class="flex justify-between align-end etc-wrap-text">
34		- <div class="">
35		- <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
36		- <p>도로 위험 감지 시스템</p>
37		- </div>
38		- <div class="">
39		- <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
40		- <p>안개 감지 플랫폼</p>
41		- </div>
42		- <div class="">
43		- <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
44		- <p>이동경로 최적화 서비스</p>
45		- </div>
46		- <div class="">
47		- <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
48		- <p>횡단보도 및 내비게이션 연계 플랫폼</p>
49		- </div>
50		- <div class="">
51		- <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
52		- <p>전력데이터 관리 시스템</p>
53		- </div>
54		- <div class="">
55		- <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
56		- <p>금형 부품 데이터 관리 플랫폼</p>
57		- </div>
58		- <div class="">
59		- <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
60		- <p>제조 데이터 관리 시스템</p>
61		- </div>
62		- <div class="">
63		- <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
64		- <p>메타데이터 관리 시스템</p>
65		- </div>
	37	+ <div class="solution-ani">
	38	+ <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
	39	+ <p>안개 감지 플랫폼</p>
	40	+ </div>
	41	+ <div class="solution-ani">
	42	+ <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
	43	+ <p>이동경로 최적화 서비스</p>
	44	+ </div>
	45	+ <div class="solution-ani">
	46	+ <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
	47	+ <p>횡단보도 및 내비게이션 연계 플랫폼</p>
	48	+ </div>
	49	+ <div class="solution-ani">
	50	+ <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
	51	+ <p>전력데이터 관리 시스템</p>
	52	+ </div>
	53	+ <div class="solution-ani">
	54	+ <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
	55	+ <p>금형 부품 데이터 관리 플랫폼</p>
	56	+ </div>
	57	+ <div class="solution-ani">
	58	+ <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
	59	+ <p>제조 데이터 관리 시스템</p>
	60	+ </div>
	61	+ <div class="solution-ani">
	62	+ <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
	63	+ <p>메타데이터 관리 시스템</p>
66	64	</div>
67	65	</div>
68		-
69	66	</div>
	67	+
70	68	<div id="footer"></div>
71	69
72	70	</body>
...	...	@@ -163,10 +161,10 @@
163	161	padding: 0;
164	162	}
165	163
166		-
	164	+
167	165
168	166	.box-wrap div img {
169		- border: 1px solid ;
	167	+ border: 1px solid;
170	168	padding-bottom: 2rem;
171	169	}
172	170

...	...	@@ -124,15 +124,15 @@
124	124
125	125	});
126	126	});
127		-
128		-
129		-
	127	+
	128	+
130	129	$(function () {
131	130	$("#header").load("../layout/Header.html");
132	131	$("#footer").load("../layout/footer.html");
133	132	$("#footer").show();
134		-
	133	+
135	134	});
	135	+
136	136	document.addEventListener('DOMContentLoaded', function () {
137	137	var newsDivs = document.querySelectorAll('div[data-url]');
138	138
...	...	@@ -144,7 +144,6 @@
144	144	div.style.cursor = 'pointer';
145	145	});
146	146	});
147		-
148	147
149	148	</script>
150	149
...	...	@@ -223,6 +222,10 @@
223	222	display: block;
224	223	object-fit: cover;
225	224	}
	225	+
	226	+ /* .marketing-area{
	227	+ cursor: pointer;
	228	+ } */
226	229	</style>
227	230
228	231	</html> (No newline at end of file)

...	...	@@ -25,7 +25,7 @@
25	25	<div class="swiper mySwiper">
26	26	<div class="swiper-wrapper">
27	27	<div class="swiper-slide">
28		- <div class=" text-area pb60 slide-section flex align-center">
	28	+ <div class=" text-area pb60 slide-section flex align-center solution">
29	29
30	30	<div class="solution-title">
31	31	<p>Taken BI Manager v1.0</p>
...	...	@@ -115,8 +115,8 @@
115	115	</div>
116	116	<div class="traffic-area flex align-end justify-end solution-web-box"
117	117	style="height: 100%; width: 100%;">
118		- <div class="flex justify-end traffic-button">
119		- <button class="traffic-btn">영상보기</button>
	118	+ <div class="flex justify-end traffic-button ">
	119	+ <button class="traffic-btn ">영상보기</button>
120	120	</div>
121	121
122	122	<img src="../../resources/img/common/traffic-img.png" alt="" style="height: 356px;">

...	...	@@ -22,49 +22,48 @@
22	22
23	23	<body>
24	24	<div id="header"></div>
25		- <div class=" text-area pb60 slide-section flex align-center">
	25	+ <div class=" text-area pb60 slide-section flex align-center visuali">
26	26
27	27
28		- <div class=" flex justify-between align-center" style="gap: 10px; width: 100%; height: 100%; align-content: center;">
29		- <div class="etc-wrap-title ">
	28	+ <div class=" flex justify-between align-center"
	29	+ style="gap: 10px; width: 100%; height: 100%; align-content: center;">
	30	+ <div class="etc-wrap-title mb20">
30	31	<h1 class="mb20">시각화 서비스 시스템 구축</h1>
31	32	<p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
32	33	</div>
33	34	<div class="etc-wrap-text flex justify-between">
34	35
35		- <div class="">
	36	+ <div class="solution-ani">
36	37	<img src="../../resources/img/common/visual-img1.png" alt="">
37	38	<p>영천시 지역별 인구 추이 분석</p>
38	39	</div>
39		- <div class="">
	40	+ <div class="solution-ani">
40	41	<img src="../../resources/img/common/visual-img2.png" alt="">
41	42	<p>포항시 지역별 인구 추이 분석</p>
42	43	</div>
43		- <div class="">
	44	+ <div class="solution-ani">
44	45	<img src="../../resources/img/common/visual-img3.png" alt="">
45	46	<p>스마트 제조 공정관리 모니터링 플랫폼</p>
46	47	</div>
47	48
48		- <div class="">
	49	+ <div class="solution-ani">
49	50	<img src="../../resources/img/common/visual-img4.png" alt="">
50	51	<p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
51	52	</div>
52		- <div class="">
	53	+ <div class="solution-ani">
53	54	<img src="../../resources/img/common/visual-img5.png" alt="">
54	55	<p>시니어 스마트 케어 모니터링 플랫폼</p>
55	56	</div>
56		- <div class="">
	57	+ <div class="solution-ani">
57	58	<img src="../../resources/img/common/visual-img6.png" alt="">
58	59	<p>공정 및 외부 환경 관제 시각화</p>
59	60	</div>
60		- <div class="">
	61	+ <div class="solution-ani">
61	62	<img src="../../resources/img/common/visual-img7.png" alt="">
62	63	<p>상주시 부서별 재정 분석</p>
63	64	</div>
64	65	</div>
65	66	</div>
66		- </div>
67		-
68	67	</div>
69	68	<div id="footer"></div>
70	69

Delete comment