mycoms 2024-03-29
240329 김하영
@9f39c7e20e6ebb2f1db128a8313f16f7f8b1f250
 
resources/css/font.css (deleted)
--- resources/css/font.css
@@ -1,27 +0,0 @@
-@font-face {
-    font-family: 'Pretendard';
-    src: url('../font/PretendardVariable.woff2') format('woff');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "GmarketSansM";
-    src: url("/client/resources/font/GmarketSansMedium.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "GmarketSansL";
-    src: url("/client/resources/font/GmarketSansLight.woff") format("woff");
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "GmarketSansB";
-    src: url("/client/resources/font/GmarketSansBold.woff") format("woff");
-    font-weight: bold;
-    font-style: normal;
-}(No newline at end of file)
resources/css/reset.css
--- resources/css/reset.css
+++ resources/css/reset.css
@@ -1,4 +1,31 @@
 @charset "utf-8";
+@font-face {
+    font-family: 'Pretendard';
+    src: url('../font/PretendardVariable.woff2') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "GmarketSansM";
+    src: url("/client/resources/font/GmarketSansMedium.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "GmarketSansL";
+    src: url("/client/resources/font/GmarketSansLight.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "GmarketSansB";
+    src: url("/client/resources/font/GmarketSansBold.woff") format("woff");
+    font-weight: bold;
+    font-style: normal;
+}
 
 * {
     padding: 0;
resources/css/style.css
--- resources/css/style.css
+++ resources/css/style.css
@@ -1,21 +1,58 @@
 @charset "utf-8";
+.text-area {
+    width: 1200px;
+    height: 100%;
+    margin: auto;
+    text-align: center;
+}
 
 #header.active {
-border-bottom: 1px solid #ced4da;
-background-color: white;
+    border-bottom: 1px solid #ced4da;
+    background-color: white;
 }
-#header.active .header nav li a{
-    color: #333;
 
+#header.active .header nav li a {
+    color: #333;
+    
 }
-#header.active .header .logo{
+#header.active .header  nav ul li ul.dropdown {
+    background-color: #fff;
+}
+
+#header.active .header .logo {
     background: url(../img/component/logo-color.png) no-repeat;
     width: 200px;
     background-size: contain;
     height: 25px;
 
-   
+
 }
+.slide-back{
+    background: url(../img/common/main-2.png)no-repeat;
+    width: 0;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+    opacity: 0;
+}
+.slide-back.active{
+    animation: slideIn 1s forwards;
+    overflow: hidden;
+
+}
+
+@keyframes slideIn {
+    from {
+      width: 0;
+      opacity: 0;
+    }
+    to {
+        width: 100%;
+        opacity: 1;
+    }
+  }
+
+
 .text-event {
     position: relative;
     z-index: 3;
@@ -31,8 +68,10 @@
     height: 23px;
     z-index: -1;
     margin: 5px 0 0;
-    transition: all 0.4s ease-in-out;
-    transition-duration: 0.3s;
+    transition: all 1s ease-in-out;
+    transition-duration: 1s;
+    animation-delay: 1s;
+
     opacity: 0;
     background-color: #fce5bf;
 }
@@ -52,29 +91,87 @@
     opacity: 1;
     -webkit-animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
     animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    animation-delay: 0.5s;
+    animation-delay: 1s;
 }
-
+.sub-text-area{
+    text-align: center;
+}
 .solution-text {
     font-size: 4.5rem;
     font-weight: 900;
     opacity: 0;
 }
+.box1,.box2,.box3,.box4,.box5,.box6{
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    background-size: cover;
+    padding:214px 10px 10px 10px;
+    color: #fff;
+   
+    text-align: left;
+}
+.box2,.box4{
+    transform: translateY(30px);
+}
+.box1{
+    background: url(../img/common/img-box1.png) no-repeat;
+
+}
+.box2{
+    background: url(../img/common/img-box2.png) no-repeat;
+    
+}
+.box3{
+    background: url(../img/common/img-box3.png) no-repeat;
+  
+}
+.box4{
+    background: url(../img/common/img-box4.png) no-repeat;
+ 
+}
+.box5{
+    background: url(../img/common/img-box5.png) no-repeat;
+ 
+}
+.box6{
+    background: url(../img/common/img-box6.png) no-repeat;
+
+}
+.box{
+    opacity: 0;
+    cursor: pointer;
+}
+.box:hover{
+    transform: scale(1.1);
+    transition: all 0.5s ease;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  
+  .box.active {
+    animation-name: fadeIn;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+  }
 
 .solution-text.active {
 
     -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
     animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
 
-    
+
 }
-.solution-sub-text{
+
+.solution-sub-text {
     opacity: 0;
 }
-.solution-sub-text.active{
-    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
-    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
-    animation-delay: 0.5s;
+
+.solution-sub-text.active {
+    -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
+    animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
 }
 
 
@@ -84,7 +181,7 @@
     width: 100%;
     height: 320px;
     text-align: center;
-    
+
 }
 
 .pink-box img,
@@ -117,9 +214,9 @@
 
 .pink-box {
     background: url(../img/common/box2.png) no-repeat;
-    width: 208px;
+    width: 228px;
     height: 330px;
-    background-size: 208px 330px;
+    background-size: 228px 330px;
     transform: translateY(-40px);
 }
 
@@ -129,11 +226,19 @@
 
 }
 
+.pink-box div {
+    transform: translateY(-40px);
+}
+
+/* .pink-box img {
+    transform: translateY(-60px);
+} */
+
 .yellow-box {
     background: url(../img/common/box4.png) no-repeat;
     width: 353px;
     height: 203px;
-    background-size: contain;
+    background-size: 353px 203px;
     transform: translateY(-40px);
 }
 
@@ -141,17 +246,32 @@
     color: #a2a185;
 }
 
+.yellow-box div {
+    transform: translateY(-100px);
+}
+
+.yellow-box img {
+    transform: translateY(-80px);
+}
 
 .blue-box {
     background: url(../img/common/box5.png) no-repeat;
-    width: 306px;
+    width: 280px;
     height: 204px;
-    background-size: 306px 204px;
+    background-size: 280px 204px;
     transform: translateY(-40px);
 }
 
 .blue-box div p:nth-child(1) {
     color: #386ea5;
+}
+
+.blue-box div {
+    transform: translateY(-100px);
+}
+
+.blue-box img {
+    transform: translateY(-60px);
 }
 
 .purple-box {
@@ -166,14 +286,25 @@
     color: #80649b;
 }
 
-.ivory-box {
-   background: url(../img/common/box1.png) no-repeat;
-   width: 335px;
+.purple-box div {
+    transform: translateY(-60px);
 }
+
+.purple-box img {
+    transform: translateY(-50px);
+}
+
+.ivory-box {
+    background: url(../img/common/box1.png) no-repeat;
+    width: 305px;
+    background-size: contain;
+}
+
 .ivory-box div {
     transform: translateY(-30px);
 
 }
+
 .ivory-box img {
     transform: translateY(-40px);
 }
@@ -198,7 +329,7 @@
 .hvr-grow:focus,
 .hvr-grow:active {
     -webkit-transform: scale(1.1);
-    transform: scale(1.1);
+    transform: scale(1.0);
 }
 
 .focus-in-contract {
@@ -224,70 +355,352 @@
 
 @keyframes tracking-in-expand {
     0% {
-      letter-spacing: -0.5em;
-      opacity: 0;
+        letter-spacing: -0.5em;
+        opacity: 0;
     }
+
     40% {
-      opacity: 0.6;
+        opacity: 0.6;
     }
+
     100% {
-      opacity: 1;
+        opacity: 1;
     }
-  }
-  @keyframes tracking-in-contract {
+}
+
+@keyframes tracking-in-contract {
     0% {
-      letter-spacing: 1em;
-      opacity: 0;
+        letter-spacing: 1em;
+        opacity: 0;
     }
+
     40% {
-      opacity: 0.6;
+        opacity: 0.6;
     }
+
     100% {
-      letter-spacing: normal;
-      opacity: 1;
+        letter-spacing: normal;
+        opacity: 1;
     }
-  }
-  
+}
 
 
 
 
 .portfolio {
-    /* padding: 100px 30px; */
+    padding: 100px 30px;
     height: 100%;
-    width: 100%;
-    
-
 }
 
-.portfolio-title {
-    font-size: 8rem;
-    color: #fff;
-    font-weight: bold;
-    text-align: center;
-    margin-bottom: 1.5rem;
+.portfolio.on {
+    animation-duration: 3s;
+    animation-name: slidein;
+}
+
+.portfolio-text {
+    font-size: 4.5rem;
+    font-weight: 900;
+    position: relative;
+    text-align: left;
 }
 
 .portfolio-title span {
     color: transparent;
     -webkit-text-stroke: 1px white;
 }
-.innerSwiper {
-    /* background-color: #000; */
-    width: 100%;
+
+.innerSwiper{
+    height: 100%;
 }
 .innerSwiper .swiper-slide {
     text-align: center;
-    border: 1px solid blue;
     font-size: 18px;
-
+    display: block;
 }
 
 .innerSwiper .swiper-slide img {
-    display: block;
     width: 100%;
-    height: 60%;
+    height: 100%;
     background-color: #fff;
     object-fit: cover;
     margin-bottom: 20px;
+    background-color: #F8F9FA;
+    border-radius: 10px;
+    box-shadow: 2px 2px 5px #5454541b;
+
+    padding: 30px 30px;
+}
+
+
+
+
+/* .slide1 ,.slide2,.slide3,.slide4,.slide5,.slide6{
+    border-radius: 10px;
+    width: 100%;
+    height: 400px;
+    box-shadow: 2px 2px 5px #5454541b;
+    background-color: #F8F9FA;
+
+} */
+
+ 
+.innerSwiper-textBox{
+    height: 160px;
+    padding: 15px 0 0 0;
+}
+.innerSwiper-title,.innerSwiper-text{
+
+    font-family: 'Pretendard';
+}
+.innerSwiper-title{
+    font-size: 2.7rem;
+    font-weight: 600;
+    padding: 0  0 10px 0;
+}
+
+
+.map-text{
+    text-align: center;
+    font-size: 4rem;
+    font-weight: 900;
+    position: relative;
+}
+.map-text::after{
+    content: "";
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: url(../img/common/address.png) no-repeat;
+    width: 30px;
+    height: 30px;
+    background-size: contain;
+
+}
+.map-btn button {
+    border: 1px solid #213F99;
+    padding: 10px 15px 10px 35px;
+    border-radius: 30px;
+    font-size: 1.4rem;
+    font-weight: 600;
+    color: #213F99;
+    background: url(../img/common/location-dot-solid.svg) no-repeat 15px center / 15px;
+    background-color: #FFFFFF;
+}
+
+.map-btn button.on {
+    background: url(../img/common/location-dot-solid-w.svg) no-repeat 15px center / 15px, #213F99; 
+    color: #FFFFFF; 
+}
+.address-box{
+    border: 2px solid #213F99;
+    box-shadow: 5px 5px 0px #213F99;
+    transform: translateY(-30px);
+    position: relative;
+    background-color: #fff;
+    width: 90%;
+    margin: 0 auto;
+    z-index: 5;
+    border-radius: 10px;
+    padding: 12px 30px;
+}
+.address-tile{
+    font-size: 2.5rem;
+    font-weight: 600;
+    color: #213F99;
+    width: 150px;
+    position: relative;
+}
+.address-tile::after{
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 20px;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+
+    background: url(../img/common/location-dot-solid.svg)no-repeat;
+}
+.address-subtitle{
+    padding: 5px 0;
+}
+.map{
+    box-shadow: 2px 2px 10px #3333333d;
+}
+
+
+/* .scale-in-br {
+	-webkit-animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+@keyframes scale-in-br {
+    0% {
+      -webkit-transform: scale(0);
+              transform: scale(0);
+      -webkit-transform-origin: 100% 100%;
+              transform-origin: 100% 100%;
+      opacity: 1;
+    }
+    100% {
+      -webkit-transform: scale(1);
+              transform: scale(1);
+      -webkit-transform-origin: 100% 100%;
+              transform-origin: 100% 100%;
+      opacity: 1;
+    }
+  }
+   */
+
+
+
+  
+footer {
+    width: 100%;
+    height: 100px;
+    padding: 30px;
+    position: relative;
+    bottom: 0;
+    transition: all 0.5s;
+    z-index: 9999;
+    opacity: 0;
+    background-color: #333;
+}
+
+footer.on {
+    opacity: 1;
+    display: block;
+}
+
+footer>.footer-wrap {
+    color: #fff;
+}
+
+.footer-wrap .info {
+    flex: 0 0 80%;
+    display: flex;
+    align-items: flex-start;
+}
+
+.footer-wrap .info address {
+    margin-right: 10%;
+}
+
+.footer-wrap .logo {
+    flex: 0 0 20%;
+}
+.ft-logo{
+    padding: 1rem 0;
+
+}
+.footer-title {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: #f9f9f9;
+    margin-bottom: 10px;
+}
+
+address p:last-of-type,
+.contact div p {
+    margin-bottom: 5px;
+}
+
+address p:last-of-type,
+.contact div p:last-of-type {
+    margin-bottom: 0;
+}
+
+
+/* solution page */
+.solution-title{
+    width: 100%;
+    position: relative;
+}
+.solution-title::after{
+    content: '';
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    background: url(../img/common/solution-after-img-1.png) no-repeat;
+    background-size: 30px ;
+    width: 30px;
+    height: 30px;
+}
+.solution-title p{
+    font-size: 3.5rem;
+    font-weight: bold;
+    font-family: 'Pretendard';
+
+    text-align: center;
+}
+.taken-area{
+    width: 100%;
+    height: 100%;
+}
+.text-after p{
+    position: relative;
+}
+.text-after p::after{
+    content: '·';
+    position: absolute;
+    top: -5px;
+    left: 6px;
+    font-size: 2rem;
+}
+.taken-conteiner p{
+    text-align: left;
+    font-family: 'Pretendard';
+    margin-bottom: 10px;
+}
+.taken-area img{
+    width: 90%;
+    /* padding: 0 30px ; */
+    
+}
+.taken-area p{
+    font-size: 1.4rem;
+    font-weight: 600;
+    padding-left: 20px;
+}
+
+.taken-box{
+    width: 100%;
+    flex-wrap: nowrap;
+    gap: 30px;
+}
+.taken-box p{
+    width: 100%;
+    font-family: 'Pretendard';
+    background-color: #F8F9FA;
+    padding: 13px;
+    font-size: 1.5rem;
+    border-radius: 10px;
+}
+.solution-text-box{
+    width: 100%;
+    padding: 15px 40px;
+    border-radius: 10px;
+    box-shadow: 2px 2px 5px #3e3e3e30;
+}
+.solution-text-box p{
+    font-weight: 500;
+    font-size: 1.4rem;
+    padding-left: 20px;
+}
+.text-box-title{
+    font-family: 'Pretendard';
+    position: relative;
+    font-weight: 600;
+    font-size: 2rem;
+    text-align: left;
+}
+.text-box-title::after{
+    position: absolute;
+    content: '';
+    top: 5px;
+    left: -20px;
+    background: url(../img/common/solution-arrow.png) no-repeat;
+    width: 10px;
+    height: 10px;
+    background-size: 10px;
 }
(No newline at end of file)
 
resources/img/common/address.png (Binary) (added)
+++ resources/img/common/address.png
Binary file is not shown
 
resources/img/common/img-box1.png (Binary) (added)
+++ resources/img/common/img-box1.png
Binary file is not shown
 
resources/img/common/img-box2.png (Binary) (added)
+++ resources/img/common/img-box2.png
Binary file is not shown
 
resources/img/common/img-box3.png (Binary) (added)
+++ resources/img/common/img-box3.png
Binary file is not shown
 
resources/img/common/img-box4.png (Binary) (added)
+++ resources/img/common/img-box4.png
Binary file is not shown
 
resources/img/common/img-box5.png (Binary) (added)
+++ resources/img/common/img-box5.png
Binary file is not shown
 
resources/img/common/innerimg-1.png (Binary) (added)
+++ resources/img/common/innerimg-1.png
Binary file is not shown
 
resources/img/common/innerimg-2.png (Binary) (added)
+++ resources/img/common/innerimg-2.png
Binary file is not shown
 
resources/img/common/innerimg-3.png (Binary) (added)
+++ resources/img/common/innerimg-3.png
Binary file is not shown
 
resources/img/common/innerimg-4.png (Binary) (added)
+++ resources/img/common/innerimg-4.png
Binary file is not shown
 
resources/img/common/innerimg-5.png (Binary) (added)
+++ resources/img/common/innerimg-5.png
Binary file is not shown
 
resources/img/common/innerimg-6.png (Binary) (added)
+++ resources/img/common/innerimg-6.png
Binary file is not shown
 
resources/img/common/location-dot-solid-w.svg (added)
+++ resources/img/common/location-dot-solid-w.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>(No newline at end of file)
 
resources/img/common/location-dot-solid.svg (added)
+++ resources/img/common/location-dot-solid.svg
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#213f99" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>(No newline at end of file)
 
resources/img/common/main-2.png (Binary) (added)
+++ resources/img/common/main-2.png
Binary file is not shown
resources/img/common/main.png (Binary)
--- resources/img/common/main.png
+++ resources/img/common/main.png
Binary file is not shown
 
resources/img/common/solution-after-img-1.png (Binary) (added)
+++ resources/img/common/solution-after-img-1.png
Binary file is not shown
 
resources/img/common/solution-arrow.png (Binary) (added)
+++ resources/img/common/solution-arrow.png
Binary file is not shown
 
resources/img/common/solution-img1.png (Binary) (added)
+++ resources/img/common/solution-img1.png
Binary file is not shown
views/layout/Header.html
--- views/layout/Header.html
+++ views/layout/Header.html
@@ -9,10 +9,23 @@
             <div class="logo"></div>
             <nav>
                 <ul>
-                    <li><a href="">About Us · Business</a></li>
-                    <li><a href="">Solution</a></li>
-                    <li><a href="">Portfolio</a></li>
-                    <li><a href="">Marketing</a></li>
+                    <li>
+                        <a href="#">About Us</a>
+                      
+                    </li>
+                    <li><a href="../../views/pages/Solution.html">Solution</a></li>
+                    <li>
+                        <a href="#">Portfolio</a>
+                        <ul class="dropdown ">
+                            <li><a href="#">Data</a></li>
+                            <li><a href="#">Visualization</a></li>
+                            <li><a href="#">Smart City</a></li>
+                            <li><a href="#">Data Analysis</a></li>
+                            <li><a href="#">Customized Consulting</a></li>
+                            <li><a href="#">ETC</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="#">Marketing</a></li>
                 </ul>
             </nav>
         </div>
@@ -37,18 +50,48 @@
     .header-area {
         width: 100%;
         margin: 0 auto;
-        padding: 20px 30px 15px 30px;
+        padding: 10px 30px 7px 30px;
     }
 
 
     nav ul li {
-        margin-left: 140px;
+        width: 200px;
         display: inline-block;
+        position: relative;
     }
 
     nav ul li a {
         color: white;
         font-size: 1.5rem;
+        display: block;
+        padding: 8px;
+        text-align: center;
+    }
+
+
+    nav ul li ul.dropdown {
+        display: none;
+        position: absolute;
+        top: 35px;
+        right: 0;
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+        /* height: 100px; */
+        background-color: #f9f9f943;
+        transition:  0.3rem ease;
+        z-index: 1;
+    }
+
+    nav ul li:hover ul.dropdown {
+        display: block;
+    }
+
+
+    nav ul li ul.dropdown li a {
+        display: block;
+        color: #ffffff;
+        text-decoration: none;
     }
 </style>
 
views/main.html
--- views/main.html
+++ views/main.html
@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
-    <link rel="stylesheet" href="../../resources/css/font.css">
     <link rel="stylesheet" href="../../resources/css/reset.css">
     <link rel="stylesheet" href="../../resources/css/style.css">
     <link rel="stylesheet" href="../../resources/css/component.css">
     <link rel="stylesheet" href="../../resources/css/common.css">
     <link rel="stylesheet" href="../../resources/css/responsive.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
 
 
     <title>TAKENSOFT</title>
@@ -20,14 +21,13 @@
 <body>
     <div id="header"></div>
     <!-- Swiper -->
-    <div class="swiper mySwiper">
+    <div class="swiper mySwiper main-wrapper">
         <div class="swiper-wrapper">
             <div class="swiper-slide">
                 <div class="slide-wrap">
                     <div class="main-wrap">
                         <div class="text-area flex align-end main-text">
                             <div>
-                                <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
                                 <img src="../resources/img/common/mouse.png" alt="">
                             </div>
                         </div>
@@ -35,95 +35,188 @@
                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="slide-wrap pt60">
-                    <div class="text-area slide-section">
-                        <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
-                                class="text-event">혁신으로 선도</span>합니다.</p>
-                        <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
+                <div class="slide-wrap  slide-back scale-in-br">
+                    <div class="text-area slide-section flex align-center justify-center">
+                        <div style="height: 20%;">
+                            <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
+                                    class="text-event">혁신으로 선도</span>합니다.</p>
+                            <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="swiper-slide gradient-back">
-                <div class="slide-wrap pt60 slide-solution">
-                    <div class=" text-area flex align-center" style="height: 100%;">
-                        <div style="width: 100%;" class="sub-text-area">
+                <div class="slide-wrap  slide-solution flex align-center">
+                    <div class=" text-area " style="height: 70%;">
+                        <div style="width: 100%;" class="sub-text-area mb50">
                             <p class=" solution-text pb30">테이큰 소프트는</p>
-                            <!-- <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
+                            <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
                                 스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
-                            </p> -->
+                            </p>
                         </div>
-                        <div class="flex justify-end  solution-box " style="height: calc(100% - 84px);">
-                            <div style="height: 50%;">
-                                <div class="ivory-box hvr-grow cursor mr50">
-                                    <img src="../resources/img/common/healthCare.png" alt="">
-                                    <div>
-                                        <p class="mb15">헬스케어 분야</p>
-                                        <p>시니어 스마트 케어 모니터링 플랫폼</p>
-                                    </div>
-                                </div>
-                                <div class="pink-box hvr-grow cursor">
-                                    <img class="mb30" src="../resources/img/common/DATA.png" alt="">
-                                    <div>
-                                        <p class="mb15">데이터관리분야</p>
-                                        <p>데이터 관리 솔루션 Taken BI Manager</p>
-                                    </div>
-                                </div>
+                        <div id="container" class="flex solution-box"
+                            style="height: calc(100% - 126px); flex-wrap: nowrap;">
+                            <div class="box box1" style="display: none;">
+                                <p class="mb15">데이터관리분야</p>
+                                <p>데이터 관리 솔루션 Taken BI Manager</p>
                             </div>
-                            <div>
-                                <div class="purple-box hvr-grow cursor">
-                                    <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
-                                    <div>
-                                        <p class="mb15">스마트팩토리 분야</p>
-                                        <p>제조기업 공정 관리 모니터링 서비스</p>
-                                    </div>
-                                </div>
-                                <div class="yellow-box hvr-grow cursor">
-                                    <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
-                                    <div>
-                                        <p class="mb15">스마트시티 분야</p>
-                                        <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
-                                    </div>
-                                </div>
-                                <div class="blue-box hvr-grow cursor">
-                                    <img class="mb30" src="../resources/img/common/mobility.png" alt="">
-                                    <div>
-                                        <p class="mb15">모빌리티 분야</p>
-                                        <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
-                                    </div>
-                                </div>
-
+                            <div class="box box2" style="display: none;">
+                                <p class="mb15">스마트시티 분야</p>
+                                <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
                             </div>
-                           
+                            <div class="box box3" style="display: none;">
+                                <p class="mb15">모빌리티 분야</p>
+                                <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
+                            </div>
+                            <div class="box box4" style="display: none;">
+                                <p class="mb15">스마트팩토리 분야</p>
+                                <p>제조기업 공정 관리 모니터링 서비스</p>
+                            </div>
+                            <div class="box box5" style="display: none;">
+                                <p class="mb15">헬스케어 분야</p>
+                                <p>시니어 스마트 케어 모니터링 플랫폼</p>
+                            </div>
                         </div>
                     </div>
 
                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="portfolio">
-                    <div class="swiper innerSwiper">
-                        <div class="swiper-wrapper flex mt60">
-                            <div class="swiper-slide">Slide 1</div>
-                            <div class="swiper-slide">Slide 2</div>
-                            <div class="swiper-slide">Slide 3</div>
-                            <div class="swiper-slide">Slide 4</div>
-                            <div class="swiper-slide">Slide 5</div>
-                            <div class="swiper-slide">Slide 6</div>
-                            <div class="swiper-slide">Slide 7</div>
-                            <div class="swiper-slide">Slide 8</div>
-                            <div class="swiper-slide">Slide 9</div>
+                <div class="slide-wrap pt60 slide-solution">
+                    <div class="  flex align-center">
+                        <div style="width: 1200px; margin: 0 auto;">
+                            <p class="portfolio-text pb60">PORTFOLIO</p>
                         </div>
-                        <div class="swiper-button-next"></div>
-                        <div class="swiper-button-prev"></div>
-                        <div class="swiper-pagination"></div>
+                        <div class="swiper innerSwiper" style="height: calc(100% - 113px);">
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide ">
+                                    <img src="../resources/img/common/innerimg-1.png" alt="">
+                                    <div class=" innerSwiper-textBox">
+                                        <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
+                                        <p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능
+                                            기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
+                                    </div>
+
+                                </div>
+                                <div class="swiper-slide ">
+                                    <img src="../resources/img/common/innerimg-2.png" alt="">
+                                    <div class=" innerSwiper-textBox">
+                                        <p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
+                                        <p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을
+                                            구축합니다.</p>
+                                    </div>
+
+                                </div>
+                                <div class="swiper-slide ">
+                                    <img src="../resources/img/common/innerimg-3.png" alt="">
+                                    <div class=" innerSwiper-textBox">
+                                        <p class="innerSwiper-title">스마트시티 솔루션 공급</p>
+                                        <p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획,
+                                            개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p>
+                                    </div>
+
+                                </div>
+                                <div class="swiper-slide ">
+                                    <img src="../resources/img/common/innerimg-4.png" alt="">
+                                    <div class=" innerSwiper-textBox">
+                                        <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
+                                        <p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
+                                    </div>
+
+                                </div>
+                                <div class="swiper-slide ">
+                                    <img src="../resources/img/common/innerimg-5.png" alt="">
+                                    <div class=" innerSwiper-textBox">
+                                        <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
+                                        <p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라
+                                            최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p>
+                                    </div>
+
+                                </div>
+                                <div class="swiper-slide ">
+                                    <img src="../resources/img/common/innerimg-6.png" alt="">
+                                    <div class=" innerSwiper-textBox">
+                                        <p class="innerSwiper-title">기타사례</p>
+                                        <p class="innerSwiper-title"></p>
+
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </div>
                     </div>
+
                 </div>
+
+            </div>
+            <div class="swiper-slide">
+                <div class="slide-wrap pt60 slide-solution gradient-bottom flex align-center justify-center">
+                    <div class=" text-area " style="height: 100%;">
+                        <div style="width: 100%;" class="sub-text-area">
+                            <p class="map-text pb20">오시는길</p>
+                        </div>
+                        <div style="width: 100%;" class="flex justify-end map-btn pd10">
+                            <button id="btnHeadquarter">본사</button>
+                            <button id="btnDaeguBranch" onclick="relayout()">대구 지사</button>
+                        </div>
+                        <div id="contentHeadquarter">
+                            <div>
+
+                                <div id="daumRoughmapContainer1711609730266"
+                                    class="root_daum_roughmap root_daum_roughmap_landing map"></div>
+
+                                <script charset="UTF-8" class="daum_roughmap_loader_script"
+                                    src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
+
+                                <!-- 3. 실행 스크립트 -->
+                                <script charset="UTF-8">
+                                    new daum.roughmap.Lander({
+                                        "timestamp": "1711609730266",
+                                        "key": "2ipvd",
+                                        "mapWidth": "1200",
+                                        "mapHeight": "500"
+                                    }).render();
+                                </script>
+                            </div>
+                            <div class="address-box flex">
+                                <p class="address-tile">본사</p>
+                                <p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)</p>
+                            </div>
+                        </div>
+                        <div id="contentDaeguBranch" style="display: none;">
+                            <div>
+
+                                <div id="daumRoughmapContainer1711610549858"
+                                    class="root_daum_roughmap root_daum_roughmap_landing map"></div>
+
+                                <!-- 3. 실행 스크립트 -->
+                                <script charset="UTF-8">
+                                    new daum.roughmap.Lander({
+                                        "timestamp": "1711610549858",
+                                        "key": "2ipvq",
+                                        "mapWidth": "1200",
+                                        "mapHeight": "500"
+                                    }).render();
+
+                                </script>
+                                <div class="address-box flex">
+                                    <p class="address-tile">대구지사</p>
+                                    <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+
 
             </div>
 
         </div>
-    </div>
-    <div id="footer" style="border: 0px;"></div>
+        <div id="footer"></div>
+
+
 
 
 
@@ -132,27 +225,46 @@
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
+
 <script>
+    $(document).ready(function () {
+        $("#btnHeadquarter").click(function () {
+            $("#btnHeadquarter").addClass('on');
+            $("#btnDaeguBranch").removeClass('on');
+            $("#contentDaeguBranch").hide();
+
+            $("#contentHeadquarter").show();
+        });
+
+        $("#btnDaeguBranch").click(function () {
+            $("#btnDaeguBranch").addClass('on');
+            $("#btnHeadquarter").removeClass('on');
+
+            $("#contentHeadquarter").hide();
+
+            $("#contentDaeguBranch").show();
+
+
+
+
+
+        });
+    });
 
     var swiper1 = new Swiper(".mySwiper", {
         direction: "vertical",
         slidesPerView: 1,
-        spaceBetween: 30,
+        spaceBetween: 40,
         speed: 700,
         mousewheel: true,
         pagination: {
             el: ".swiper-pagination",
             clickable: true,
         }, on: {
+            // fromEdge: function () {
+            //     document.querySelector('#footer').classList.add('on');
 
-            reachEnd: function () {
-                swiper1.mousewheel.disable();
-                $("#footer").show();
-            },
-            fromEdge: function () {
-                swiper1.mousewheel.enable();
-                $("#footer").hide();
-            },
+            // },
             slideChange: function () {
                 var currentIndex = this.realIndex;
                 if (currentIndex === 0) {
@@ -160,55 +272,98 @@
                 } else {
                     $('#header').addClass('active');
                 }
+
+                if (this.activeIndex === 5) {
+                    document.querySelector('footer').classList.add('on');
+                } else {
+                    document.querySelector('footer').classList.remove('on');
+                }
+
             },
 
             slideChangeTransitionEnd: function () {
                 if (this.activeIndex === 1) {
                     $('.text-event').addClass('active');
                     $('.sub-text').addClass('active');
+                    $('.slide-back').addClass('active');
                 } else {
                     $('.text-event').removeClass('active');
                     $('.sub-text').removeClass('active');
+                    $('.slide-back').removeClass('active');
                 }
                 if (this.activeIndex === 2) {
                     $('.solution-text').addClass('active');
                     $('.solution-sub-text').addClass('active');
+                    $('.box').addClass('active');
                 } else {
                     $('.solution-text').removeClass('active');
                     $('.solution-sub-text').removeClass('active');
+                    $('.box').removeClass('active');
+
                 }
             },
 
-
         }
     });
+    window.addEventListener('load', () => {
+        const boxes = document.querySelectorAll('.box');
+        let delay = 0.6;
 
-
+        boxes.forEach(box => {
+            setTimeout(() => {
+                box.style.display = 'block'; // 박스를 보이게 합니다.
+                box.style.animationDelay = `${delay}s`; // 애니메이션 지연 시간을 설정합니다.
+                delay += 0.3; // 다음 박스가 나타나기까지의 지연 시간을 증가시킵니다.
+            }, delay * 3000); // setTimeout은 밀리초 단위를 사용합니다.
+        });
+    });
     // 헤더,푸터 불러오기
     $(function () {
         $("#header").load("layout/header.html");
         $("#footer").load("layout/footer.html");
-        $("#footer").hide();
-    });
+        // $("#footer").hide();
 
+    });
     var innerSwiper = new Swiper(".innerSwiper", {
-        slidesPerView: 10,
-        loop: true,
+        slidesPerView: 3,
         spaceBetween: 30,
         centeredSlides: true,
+
         autoplay: {
-            // delay: 1000,
+            delay: 0,
             disableOnInteraction: false,
         },
-        pagination: {
-            el: ".swiper-pagination",
-            clickable: true,
-        },
-        navigation: {
-            nextEl: ".swiper-button-next",
-            prevEl: ".swiper-button-prev",
-        },
+        loop: true,
+        speed: 5000,
+        activeIndexChange: function () {
+
+        }, on: {
+            init: function () {
+                // Swiper 초기화 시 첫 번째 슬라이드 설정
+                let firstTextBox = this.slides[0].querySelector('.innerSwiper-textBox');
+                if (firstTextBox) firstTextBox.classList.add('active');
+            },
+            // activeIndexChange: function () {
+            //     // 모든 텍스트 박스에서 'active' 클래스 제거
+            //     this.slides.forEach(slide => {
+            //         let textBox = slide.querySelector('.innerSwiper-textBox');
+            //         if (textBox) textBox.classList.remove('active');
+            //     });
+            //     // 현재 활성화된 슬라이드의 텍스트 박스에 'active' 클래스 추가
+            //     let currentTextBox = this.slides[this.activeIndex].querySelector('.innerSwiper-textBox');
+            //     if (currentTextBox) currentTextBox.classList.add('active');
+            // }
+        }
     });
+
+    // Swiper 인스턴스 초기화
+    // mySwiper.init();
+
+
+
+
+
+
 
 
 
@@ -220,9 +375,25 @@
 
 
 <style scoped>
-    #footer {
-        display: none;
+    #header {
+        position: fixed;
+        top: 0;
+        z-index: 3;
     }
+
+
+    /* #footer {
+        position: relative;
+        height: 100px;
+        z-index: 10000;
+    }
+
+    #footer.on {
+        opacity: 1;
+        display: block;
+    } */
+
+
 
     html,
     body {
@@ -252,11 +423,6 @@
     }
 
 
-    #header {
-        position: fixed;
-        top: 0;
-        z-index: 1;
-    }
 
     .slide-wrap {
         width: 100%;
@@ -271,13 +437,7 @@
         background-position: bottom;
     }
 
-    .text-area {
-        width: 1200px;
-        height: 100%;
-        margin: auto;
-        text-align: center;
-    }
-
+  
     .main-text {
 
         padding-bottom: 50px;
@@ -309,9 +469,7 @@
         font-weight: 900;
     }
 
-    .slide-section {
-        padding-top: 330px;
-    }
+
 
     .text-main {
         font-weight: 600;
@@ -321,11 +479,19 @@
 
     }
 
-    .sub-text-area {
-        text-align: left;
+    .text-main span {
+        color: #F29600;
+
+
     }
-    .gradient-back{
-        background: linear-gradient(#e9ebff , #fff, #fff);
+
+
+    .gradient-back {
+        background: linear-gradient(#e9ebff, #fff, #fff);
+    }
+
+    .gradient-bottom {
+        background: linear-gradient(#fff, #fff, #e9ebff);
     }
 
     .slide-solution {
@@ -333,6 +499,7 @@
         font-family: 'Pretendard';
 
     }
+
 </style>
 
 </html>
(No newline at end of file)
 
views/pages/AboutUs.html (added)
+++ views/pages/AboutUs.html
@@ -0,0 +1,0 @@
 
views/pages/Solution.html (added)
+++ views/pages/Solution.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="../../resources/css/reset.css">
+    <link rel="stylesheet" href="../../resources/css/style.css">
+    <link rel="stylesheet" href="../../resources/css/component.css">
+    <link rel="stylesheet" href="../../resources/css/common.css">
+    <link rel="stylesheet" href="../../resources/css/responsive.css">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+
+
+    <title>Solution</title>
+</head>
+
+<body>
+    <div id="header"></div>
+    <div class="swiper mySwiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <div class="taken-wrap slide-wrap ">
+                <div class="text-area flex">
+                    <div class="solution-title mb50">
+                        <p>Taken BI Manager v1.0</p>
+                    </div>
+                    <div class="flex justify-between" style="flex-wrap: nowrap; gap: 20px;">
+                        <div class="taken-area flex align-end ">
+                            <img src="../../resources/img/common/solution-img1.png" alt="" >
+                            <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
+                                <p>데이터 수집,저장,관리</p>
+                                <p>솔루션 제공 기반 맞춤형 서비스</p>
+                            </div>
+                        </div>
+                        <div class="taken-area taken-conteiner " style="gap: 20px;">
+                            <div class="text-after">
+                                <p>데이터  수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
+                                <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화 서비스를 제공합니다.</p>
+                                <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
+                            </div>
+                            <div class="solution-text-box mb20">
+                                <h3 class="text-box-title mb10">주요기능</h3>
+                                <p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
+                                <p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
+                                <p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
+                            </div>
+                            <div class="solution-text-box">
+                                <h3 class="text-box-title mb10">특장점</h3>
+                                <div  class="flex " style="gap: 30px;">
+                                    <div class="flex-column">
+                                        <p>- DB 연계형 데이터 수집 서비스</p>
+                                        <p>- 데이터 시각화 시스템</p>
+                                    </div>
+                                    <div class="flex-column">
+                                        <p>- 데이터 저장/관리 시스템</p>
+                                        <p>- 관리 서비스 시스템</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+          </div>
+          <div class="swiper-slide">asdfasdfsdf 2</div>
+          <div class="swiper-slide">Slide 3</div>
+          <div class="swiper-slide">Slide 4</div>
+          <div class="swiper-slide">Slide 5</div>
+          <div class="swiper-slide">Slide 6</div>
+          <div class="swiper-slide">Slide 7</div>
+          <div class="swiper-slide">Slide 8</div>
+          <div class="swiper-slide">Slide 9</div>
+        </div>
+        
+      </div>
+  
+    <div id="footer"></div>
+
+
+
+
+
+
+</body>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+
+<script>
+ var swiper = new Swiper(".mySwiper", {
+      direction: "vertical",
+      slidesPerView: 1,
+      spaceBetween: 30,
+      mousewheel: true,
+
+    });
+
+
+</script>
+
+
+
+
+<style scoped>
+    html,
+    body {
+      position: relative;
+      height: 100%;
+    }
+
+    body {
+      background: #eee;
+      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+      font-size: 14px;
+      color: #000;
+      margin: 0;
+      padding: 0;
+    }
+
+    .swiper {
+      width: 100%;
+      height: 100%;
+    }
+
+    .swiper-slide {
+      text-align: center;
+      font-size: 18px;
+      background: linear-gradient(#f8f9fa,#fff,#fff);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .swiper-slide img {
+      display: block;
+      object-fit: cover;
+    }
+
+    
+</style>
+
+</html>(No newline at end of file)
Add a comment
List