Commit @9f39c7e20e6ebb2f1db128a8313f16f7f8b1f250

mycoms 2024-03-29

240329 김하영

@9f39c7e20e6ebb2f1db128a8313f16f7f8b1f250

90afc40

resources/css/font.css (deleted)

--- resources/css/font.css

...	...	@@ -1,27 +0,0 @@
	1	-@font-face {
	2	- font-family: 'Pretendard';
	3	- src: url('../font/PretendardVariable.woff2') format('woff');
	4	- font-weight: 400;
	5	- font-style: normal;
	6	-}
	7	-
	8	-@font-face {
	9	- font-family: "GmarketSansM";
	10	- src: url("/client/resources/font/GmarketSansMedium.woff") format("woff");
	11	- font-weight: normal;
	12	- font-style: normal;
	13	-}
	14	-
	15	-@font-face {
	16	- font-family: "GmarketSansL";
	17	- src: url("/client/resources/font/GmarketSansLight.woff") format("woff");
	18	- font-weight: normal;
	19	- font-style: normal;
	20	-}
	21	-
	22	-@font-face {
	23	- font-family: "GmarketSansB";
	24	- src: url("/client/resources/font/GmarketSansBold.woff") format("woff");
	25	- font-weight: bold;
	26	- font-style: normal;
	27	-}(No newline at end of file)

90afc40

9f39c7e

resources/css/reset.css

--- resources/css/reset.css

+++ resources/css/reset.css

...	...	@@ -1,4 +1,31 @@
1	1	@charset "utf-8";
	2	+@font-face {
	3	+ font-family: 'Pretendard';
	4	+ src: url('../font/PretendardVariable.woff2') format('woff');
	5	+ font-weight: 400;
	6	+ font-style: normal;
	7	+}
	8	+
	9	+@font-face {
	10	+ font-family: "GmarketSansM";
	11	+ src: url("/client/resources/font/GmarketSansMedium.woff") format("woff");
	12	+ font-weight: normal;
	13	+ font-style: normal;
	14	+}
	15	+
	16	+@font-face {
	17	+ font-family: "GmarketSansL";
	18	+ src: url("/client/resources/font/GmarketSansLight.woff") format("woff");
	19	+ font-weight: normal;
	20	+ font-style: normal;
	21	+}
	22	+
	23	+@font-face {
	24	+ font-family: "GmarketSansB";
	25	+ src: url("/client/resources/font/GmarketSansBold.woff") format("woff");
	26	+ font-weight: bold;
	27	+ font-style: normal;
	28	+}
2	29
3	30	* {
4	31	padding: 0;

90afc40

9f39c7e

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


 @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;

     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;
 }

     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;
 }
 
 

     width: 100%;
     height: 320px;
     text-align: center;
-    
+
 }
 
 .pink-box img,

 
 .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);
 }
 

 
 }
 
+.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);
 }
 

     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 {

     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);
 }

 .hvr-grow:focus,
 .hvr-grow:active {
     -webkit-transform: scale(1.1);
-    transform: scale(1.1);
+    transform: scale(1.0);
 }
 
 .focus-in-contract {

 
 @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;
 }

9f39c7e

resources/img/common/address.png (Binary) (added)

+++ resources/img/common/address.png

Binary file is not shown

9f39c7e

resources/img/common/img-box1.png (Binary) (added)

+++ resources/img/common/img-box1.png

Binary file is not shown

9f39c7e

resources/img/common/img-box2.png (Binary) (added)

+++ resources/img/common/img-box2.png

Binary file is not shown

9f39c7e

resources/img/common/img-box3.png (Binary) (added)

+++ resources/img/common/img-box3.png

Binary file is not shown

9f39c7e

resources/img/common/img-box4.png (Binary) (added)

+++ resources/img/common/img-box4.png

Binary file is not shown

9f39c7e

resources/img/common/img-box5.png (Binary) (added)

+++ resources/img/common/img-box5.png

Binary file is not shown

9f39c7e

resources/img/common/innerimg-1.png (Binary) (added)

+++ resources/img/common/innerimg-1.png

Binary file is not shown

9f39c7e

resources/img/common/innerimg-2.png (Binary) (added)

+++ resources/img/common/innerimg-2.png

Binary file is not shown

9f39c7e

resources/img/common/innerimg-3.png (Binary) (added)

+++ resources/img/common/innerimg-3.png

Binary file is not shown

9f39c7e

resources/img/common/innerimg-4.png (Binary) (added)

+++ resources/img/common/innerimg-4.png

Binary file is not shown

9f39c7e

resources/img/common/innerimg-5.png (Binary) (added)

+++ resources/img/common/innerimg-5.png

Binary file is not shown

9f39c7e

resources/img/common/innerimg-6.png (Binary) (added)

+++ resources/img/common/innerimg-6.png

Binary file is not shown

9f39c7e

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)

9f39c7e

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)

9f39c7e

resources/img/common/main-2.png (Binary) (added)

+++ resources/img/common/main-2.png

Binary file is not shown

90afc40

9f39c7e

resources/img/common/main.png (Binary)

--- resources/img/common/main.png

+++ resources/img/common/main.png

Binary file is not shown

9f39c7e

resources/img/common/solution-after-img-1.png (Binary) (added)

+++ resources/img/common/solution-after-img-1.png

Binary file is not shown

9f39c7e

resources/img/common/solution-arrow.png (Binary) (added)

+++ resources/img/common/solution-arrow.png

Binary file is not shown

9f39c7e

resources/img/common/solution-img1.png (Binary) (added)

+++ resources/img/common/solution-img1.png

Binary file is not shown

90afc40

9f39c7e

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


             <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>

     .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>
 

90afc40

9f39c7e

views/layout/footer.html

--- views/layout/footer.html

+++ views/layout/footer.html


 <!DOCTYPE html>
 <html lang="en">
 
-<!-- 헤더 -->
 <body>
     <footer>
         <div class="footer-wrap">

     </footer>
 </body>
 <style>
+ 
     footer {
         background-color: #1e1e1e;
+        height: calc(100vh - 919px);
         width: 100%;
         border: 0px;
         padding: 60px 0;
+        position: fixed;         
+        bottom: 0;
+        left: 0;
+        border: 1px solid red;
     }
     .footer-wrap{
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 1200px;
         margin: 0 auto;
     }

90afc40

9f39c7e

views/main.html

--- views/main.html

+++ views/main.html


     <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>

 <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>

                 </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>
+
+
 
 
 

 <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) {

                 } 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();
+
+
+
+
+
+
 
 
 

 
 
 <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 {

     }
 
 
-    #header {
-        position: fixed;
-        top: 0;
-        z-index: 1;
-    }
 
     .slide-wrap {
         width: 100%;

         background-position: bottom;
     }
 
-    .text-area {
-        width: 1200px;
-        height: 100%;
-        margin: auto;
-        text-align: center;
-    }
-
+  
     .main-text {
 
         padding-bottom: 50px;

         font-weight: 900;
     }
 
-    .slide-section {
-        padding-top: 330px;
-    }
+
 
     .text-main {
         font-weight: 600;

 
     }
 
-    .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 {

         font-family: 'Pretendard';
 
     }
+
 </style>
 
 </html>

9f39c7e

views/pages/AboutUs.html (added)

+++ views/pages/AboutUs.html

@@ -0,0 +1,0 @@

9f39c7e

views/pages/Solution.html (added)

+++ views/pages/Solution.html

...	...	@@ -0,0 +1,148 @@
	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>Solution</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+ <div class="swiper mySwiper">
	26	+ <div class="swiper-wrapper">
	27	+ <div class="swiper-slide">
	28	+ <div class="taken-wrap slide-wrap ">
	29	+ <div class="text-area flex">
	30	+ <div class="solution-title mb50">
	31	+ <p>Taken BI Manager v1.0</p>
	32	+ </div>
	33	+ <div class="flex justify-between" style="flex-wrap: nowrap; gap: 20px;">
	34	+ <div class="taken-area flex align-end ">
	35	+ <img src="../../resources/img/common/solution-img1.png" alt="" >
	36	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	37	+ <p>데이터 수집,저장,관리</p>
	38	+ <p>솔루션 제공 기반 맞춤형 서비스</p>
	39	+ </div>
	40	+ </div>
	41	+ <div class="taken-area taken-conteiner " style="gap: 20px;">
	42	+ <div class="text-after">
	43	+ <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
	44	+ <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화 서비스를 제공합니다.</p>
	45	+ <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
	46	+ </div>
	47	+ <div class="solution-text-box mb20">
	48	+ <h3 class="text-box-title mb10">주요기능</h3>
	49	+ <p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
	50	+ <p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
	51	+ <p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
	52	+ </div>
	53	+ <div class="solution-text-box">
	54	+ <h3 class="text-box-title mb10">특장점</h3>
	55	+ <div class="flex " style="gap: 30px;">
	56	+ <div class="flex-column">
	57	+ <p>- DB 연계형 데이터 수집 서비스</p>
	58	+ <p>- 데이터 시각화 시스템</p>
	59	+ </div>
	60	+ <div class="flex-column">
	61	+ <p>- 데이터 저장/관리 시스템</p>
	62	+ <p>- 관리 서비스 시스템</p>
	63	+ </div>
	64	+ </div>
	65	+ </div>
	66	+ </div>
	67	+ </div>
	68	+ </div>
	69	+ </div>
	70	+ </div>
	71	+ <div class="swiper-slide">asdfasdfsdf 2</div>
	72	+ <div class="swiper-slide">Slide 3</div>
	73	+ <div class="swiper-slide">Slide 4</div>
	74	+ <div class="swiper-slide">Slide 5</div>
	75	+ <div class="swiper-slide">Slide 6</div>
	76	+ <div class="swiper-slide">Slide 7</div>
	77	+ <div class="swiper-slide">Slide 8</div>
	78	+ <div class="swiper-slide">Slide 9</div>
	79	+ </div>
	80	+
	81	+ </div>
	82	+
	83	+ <div id="footer"></div>
	84	+
	85	+
	86	+
	87	+
	88	+
	89	+
	90	+</body>
	91	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	92	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	93	+
	94	+
	95	+<script>
	96	+ var swiper = new Swiper(".mySwiper", {
	97	+ direction: "vertical",
	98	+ slidesPerView: 1,
	99	+ spaceBetween: 30,
	100	+ mousewheel: true,
	101	+
	102	+ });
	103	+
	104	+
	105	+</script>
	106	+
	107	+
	108	+
	109	+
	110	+<style scoped>
	111	+ html,
	112	+ body {
	113	+ position: relative;
	114	+ height: 100%;
	115	+ }
	116	+
	117	+ body {
	118	+ background: #eee;
	119	+ font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	120	+ font-size: 14px;
	121	+ color: #000;
	122	+ margin: 0;
	123	+ padding: 0;
	124	+ }
	125	+
	126	+ .swiper {
	127	+ width: 100%;
	128	+ height: 100%;
	129	+ }
	130	+
	131	+ .swiper-slide {
	132	+ text-align: center;
	133	+ font-size: 18px;
	134	+ background: linear-gradient(#f8f9fa,#fff,#fff);
	135	+ display: flex;
	136	+ justify-content: center;
	137	+ align-items: center;
	138	+ }
	139	+
	140	+ .swiper-slide img {
	141	+ display: block;
	142	+ object-fit: cover;
	143	+ }
	144	+
	145	+
	146	+</style>
	147	+
	148	+</html>(No newline at end of file)

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,21 +1,58 @@
1	1	@charset "utf-8";
	2	+.text-area {
	3	+ width: 1200px;
	4	+ height: 100%;
	5	+ margin: auto;
	6	+ text-align: center;
	7	+}
2	8
3	9	#header.active {
4		-border-bottom: 1px solid #ced4da;
5		-background-color: white;
	10	+ border-bottom: 1px solid #ced4da;
	11	+ background-color: white;
6	12	}
7		-#header.active .header nav li a{
8		- color: #333;
9	13
	14	+#header.active .header nav li a {
	15	+ color: #333;
	16	+
10	17	}
11		-#header.active .header .logo{
	18	+#header.active .header nav ul li ul.dropdown {
	19	+ background-color: #fff;
	20	+}
	21	+
	22	+#header.active .header .logo {
12	23	background: url(../img/component/logo-color.png) no-repeat;
13	24	width: 200px;
14	25	background-size: contain;
15	26	height: 25px;
16	27
17		-
	28	+
18	29	}
	30	+.slide-back{
	31	+ background: url(../img/common/main-2.png)no-repeat;
	32	+ width: 0;
	33	+ height: 100%;
	34	+ background-position: center;
	35	+ background-size: cover;
	36	+ opacity: 0;
	37	+}
	38	+.slide-back.active{
	39	+ animation: slideIn 1s forwards;
	40	+ overflow: hidden;
	41	+
	42	+}
	43	+
	44	+@keyframes slideIn {
	45	+ from {
	46	+ width: 0;
	47	+ opacity: 0;
	48	+ }
	49	+ to {
	50	+ width: 100%;
	51	+ opacity: 1;
	52	+ }
	53	+ }
	54	+
	55	+
19	56	.text-event {
20	57	position: relative;
21	58	z-index: 3;
...	...	@@ -31,8 +68,10 @@
31	68	height: 23px;
32	69	z-index: -1;
33	70	margin: 5px 0 0;
34		- transition: all 0.4s ease-in-out;
35		- transition-duration: 0.3s;
	71	+ transition: all 1s ease-in-out;
	72	+ transition-duration: 1s;
	73	+ animation-delay: 1s;
	74	+
36	75	opacity: 0;
37	76	background-color: #fce5bf;
38	77	}
...	...	@@ -52,29 +91,87 @@
52	91	opacity: 1;
53	92	-webkit-animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
54	93	animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
55		- animation-delay: 0.5s;
	94	+ animation-delay: 1s;
56	95	}
57		-
	96	+.sub-text-area{
	97	+ text-align: center;
	98	+}
58	99	.solution-text {
59	100	font-size: 4.5rem;
60	101	font-weight: 900;
61	102	opacity: 0;
62	103	}
	104	+.box1,.box2,.box3,.box4,.box5,.box6{
	105	+ width: 100%;
	106	+ height: 100%;
	107	+ border-radius: 20px;
	108	+ background-size: cover;
	109	+ padding:214px 10px 10px 10px;
	110	+ color: #fff;
	111	+
	112	+ text-align: left;
	113	+}
	114	+.box2,.box4{
	115	+ transform: translateY(30px);
	116	+}
	117	+.box1{
	118	+ background: url(../img/common/img-box1.png) no-repeat;
	119	+
	120	+}
	121	+.box2{
	122	+ background: url(../img/common/img-box2.png) no-repeat;
	123	+
	124	+}
	125	+.box3{
	126	+ background: url(../img/common/img-box3.png) no-repeat;
	127	+
	128	+}
	129	+.box4{
	130	+ background: url(../img/common/img-box4.png) no-repeat;
	131	+
	132	+}
	133	+.box5{
	134	+ background: url(../img/common/img-box5.png) no-repeat;
	135	+
	136	+}
	137	+.box6{
	138	+ background: url(../img/common/img-box6.png) no-repeat;
	139	+
	140	+}
	141	+.box{
	142	+ opacity: 0;
	143	+ cursor: pointer;
	144	+}
	145	+.box:hover{
	146	+ transform: scale(1.1);
	147	+ transition: all 0.5s ease;
	148	+}
	149	+@keyframes fadeIn {
	150	+ from { opacity: 0; }
	151	+ to { opacity: 1; }
	152	+ }
	153	+
	154	+ .box.active {
	155	+ animation-name: fadeIn;
	156	+ animation-duration: 1s;
	157	+ animation-fill-mode: both;
	158	+ }
63	159
64	160	.solution-text.active {
65	161
66	162	-webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
67	163	animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
68	164
69		-
	165	+
70	166	}
71		-.solution-sub-text{
	167	+
	168	+.solution-sub-text {
72	169	opacity: 0;
73	170	}
74		-.solution-sub-text.active{
75		- -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
76		- animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
77		- animation-delay: 0.5s;
	171	+
	172	+.solution-sub-text.active {
	173	+ -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	174	+ animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
78	175	}
79	176
80	177
...	...	@@ -84,7 +181,7 @@
84	181	width: 100%;
85	182	height: 320px;
86	183	text-align: center;
87		-
	184	+
88	185	}
89	186
90	187	.pink-box img,
...	...	@@ -117,9 +214,9 @@
117	214
118	215	.pink-box {
119	216	background: url(../img/common/box2.png) no-repeat;
120		- width: 208px;
	217	+ width: 228px;
121	218	height: 330px;
122		- background-size: 208px 330px;
	219	+ background-size: 228px 330px;
123	220	transform: translateY(-40px);
124	221	}
125	222
...	...	@@ -129,11 +226,19 @@
129	226
130	227	}
131	228
	229	+.pink-box div {
	230	+ transform: translateY(-40px);
	231	+}
	232	+
	233	+/* .pink-box img {
	234	+ transform: translateY(-60px);
	235	+} */
	236	+
132	237	.yellow-box {
133	238	background: url(../img/common/box4.png) no-repeat;
134	239	width: 353px;
135	240	height: 203px;
136		- background-size: contain;
	241	+ background-size: 353px 203px;
137	242	transform: translateY(-40px);
138	243	}
139	244
...	...	@@ -141,17 +246,32 @@
141	246	color: #a2a185;
142	247	}
143	248
	249	+.yellow-box div {
	250	+ transform: translateY(-100px);
	251	+}
	252	+
	253	+.yellow-box img {
	254	+ transform: translateY(-80px);
	255	+}
144	256
145	257	.blue-box {
146	258	background: url(../img/common/box5.png) no-repeat;
147		- width: 306px;
	259	+ width: 280px;
148	260	height: 204px;
149		- background-size: 306px 204px;
	261	+ background-size: 280px 204px;
150	262	transform: translateY(-40px);
151	263	}
152	264
153	265	.blue-box div p:nth-child(1) {
154	266	color: #386ea5;
	267	+}
	268	+
	269	+.blue-box div {
	270	+ transform: translateY(-100px);
	271	+}
	272	+
	273	+.blue-box img {
	274	+ transform: translateY(-60px);
155	275	}
156	276
157	277	.purple-box {
...	...	@@ -166,14 +286,25 @@
166	286	color: #80649b;
167	287	}
168	288
169		-.ivory-box {
170		- background: url(../img/common/box1.png) no-repeat;
171		- width: 335px;
	289	+.purple-box div {
	290	+ transform: translateY(-60px);
172	291	}
	292	+
	293	+.purple-box img {
	294	+ transform: translateY(-50px);
	295	+}
	296	+
	297	+.ivory-box {
	298	+ background: url(../img/common/box1.png) no-repeat;
	299	+ width: 305px;
	300	+ background-size: contain;
	301	+}
	302	+
173	303	.ivory-box div {
174	304	transform: translateY(-30px);
175	305
176	306	}
	307	+
177	308	.ivory-box img {
178	309	transform: translateY(-40px);
179	310	}
...	...	@@ -198,7 +329,7 @@
198	329	.hvr-grow:focus,
199	330	.hvr-grow:active {
200	331	-webkit-transform: scale(1.1);
201		- transform: scale(1.1);
	332	+ transform: scale(1.0);
202	333	}
203	334
204	335	.focus-in-contract {
...	...	@@ -224,70 +355,352 @@
224	355
225	356	@keyframes tracking-in-expand {
226	357	0% {
227		- letter-spacing: -0.5em;
228		- opacity: 0;
	358	+ letter-spacing: -0.5em;
	359	+ opacity: 0;
229	360	}
	361	+
230	362	40% {
231		- opacity: 0.6;
	363	+ opacity: 0.6;
232	364	}
	365	+
233	366	100% {
234		- opacity: 1;
	367	+ opacity: 1;
235	368	}
236		- }
237		- @keyframes tracking-in-contract {
	369	+}
	370	+
	371	+@keyframes tracking-in-contract {
238	372	0% {
239		- letter-spacing: 1em;
240		- opacity: 0;
	373	+ letter-spacing: 1em;
	374	+ opacity: 0;
241	375	}
	376	+
242	377	40% {
243		- opacity: 0.6;
	378	+ opacity: 0.6;
244	379	}
	380	+
245	381	100% {
246		- letter-spacing: normal;
247		- opacity: 1;
	382	+ letter-spacing: normal;
	383	+ opacity: 1;
248	384	}
249		- }
250		-
	385	+}
251	386
252	387
253	388
254	389
255	390	.portfolio {
256		- /* padding: 100px 30px; */
	391	+ padding: 100px 30px;
257	392	height: 100%;
258		- width: 100%;
259		-
260		-
261	393	}
262	394
263		-.portfolio-title {
264		- font-size: 8rem;
265		- color: #fff;
266		- font-weight: bold;
267		- text-align: center;
268		- margin-bottom: 1.5rem;
	395	+.portfolio.on {
	396	+ animation-duration: 3s;
	397	+ animation-name: slidein;
	398	+}
	399	+
	400	+.portfolio-text {
	401	+ font-size: 4.5rem;
	402	+ font-weight: 900;
	403	+ position: relative;
	404	+ text-align: left;
269	405	}
270	406
271	407	.portfolio-title span {
272	408	color: transparent;
273	409	-webkit-text-stroke: 1px white;
274	410	}
275		-.innerSwiper {
276		- /* background-color: #000; */
277		- width: 100%;
	411	+
	412	+.innerSwiper{
	413	+ height: 100%;
278	414	}
279	415	.innerSwiper .swiper-slide {
280	416	text-align: center;
281		- border: 1px solid blue;
282	417	font-size: 18px;
283		-
	418	+ display: block;
284	419	}
285	420
286	421	.innerSwiper .swiper-slide img {
287		- display: block;
288	422	width: 100%;
289		- height: 60%;
	423	+ height: 100%;
290	424	background-color: #fff;
291	425	object-fit: cover;
292	426	margin-bottom: 20px;
	427	+ background-color: #F8F9FA;
	428	+ border-radius: 10px;
	429	+ box-shadow: 2px 2px 5px #5454541b;
	430	+
	431	+ padding: 30px 30px;
	432	+}
	433	+
	434	+
	435	+
	436	+
	437	+/* .slide1 ,.slide2,.slide3,.slide4,.slide5,.slide6{
	438	+ border-radius: 10px;
	439	+ width: 100%;
	440	+ height: 400px;
	441	+ box-shadow: 2px 2px 5px #5454541b;
	442	+ background-color: #F8F9FA;
	443	+
	444	+} */
	445	+
	446	+
	447	+.innerSwiper-textBox{
	448	+ height: 160px;
	449	+ padding: 15px 0 0 0;
	450	+}
	451	+.innerSwiper-title,.innerSwiper-text{
	452	+
	453	+ font-family: 'Pretendard';
	454	+}
	455	+.innerSwiper-title{
	456	+ font-size: 2.7rem;
	457	+ font-weight: 600;
	458	+ padding: 0 0 10px 0;
	459	+}
	460	+
	461	+
	462	+.map-text{
	463	+ text-align: center;
	464	+ font-size: 4rem;
	465	+ font-weight: 900;
	466	+ position: relative;
	467	+}
	468	+.map-text::after{
	469	+ content: "";
	470	+ position: absolute;
	471	+ top: -40px;
	472	+ left: 50%;
	473	+ transform: translateX(-50%);
	474	+ background: url(../img/common/address.png) no-repeat;
	475	+ width: 30px;
	476	+ height: 30px;
	477	+ background-size: contain;
	478	+
	479	+}
	480	+.map-btn button {
	481	+ border: 1px solid #213F99;
	482	+ padding: 10px 15px 10px 35px;
	483	+ border-radius: 30px;
	484	+ font-size: 1.4rem;
	485	+ font-weight: 600;
	486	+ color: #213F99;
	487	+ background: url(../img/common/location-dot-solid.svg) no-repeat 15px center / 15px;
	488	+ background-color: #FFFFFF;
	489	+}
	490	+
	491	+.map-btn button.on {
	492	+ background: url(../img/common/location-dot-solid-w.svg) no-repeat 15px center / 15px, #213F99;
	493	+ color: #FFFFFF;
	494	+}
	495	+.address-box{
	496	+ border: 2px solid #213F99;
	497	+ box-shadow: 5px 5px 0px #213F99;
	498	+ transform: translateY(-30px);
	499	+ position: relative;
	500	+ background-color: #fff;
	501	+ width: 90%;
	502	+ margin: 0 auto;
	503	+ z-index: 5;
	504	+ border-radius: 10px;
	505	+ padding: 12px 30px;
	506	+}
	507	+.address-tile{
	508	+ font-size: 2.5rem;
	509	+ font-weight: 600;
	510	+ color: #213F99;
	511	+ width: 150px;
	512	+ position: relative;
	513	+}
	514	+.address-tile::after{
	515	+ position: absolute;
	516	+ content: '';
	517	+ top: 50%;
	518	+ left: 20px;
	519	+ transform: translateY(-50%);
	520	+ width: 20px;
	521	+ height: 20px;
	522	+
	523	+ background: url(../img/common/location-dot-solid.svg)no-repeat;
	524	+}
	525	+.address-subtitle{
	526	+ padding: 5px 0;
	527	+}
	528	+.map{
	529	+ box-shadow: 2px 2px 10px #3333333d;
	530	+}
	531	+
	532	+
	533	+/* .scale-in-br {
	534	+ -webkit-animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	535	+ animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	536	+}
	537	+@keyframes scale-in-br {
	538	+ 0% {
	539	+ -webkit-transform: scale(0);
	540	+ transform: scale(0);
	541	+ -webkit-transform-origin: 100% 100%;
	542	+ transform-origin: 100% 100%;
	543	+ opacity: 1;
	544	+ }
	545	+ 100% {
	546	+ -webkit-transform: scale(1);
	547	+ transform: scale(1);
	548	+ -webkit-transform-origin: 100% 100%;
	549	+ transform-origin: 100% 100%;
	550	+ opacity: 1;
	551	+ }
	552	+ }
	553	+ */
	554	+
	555	+
	556	+
	557	+
	558	+footer {
	559	+ width: 100%;
	560	+ height: 100px;
	561	+ padding: 30px;
	562	+ position: relative;
	563	+ bottom: 0;
	564	+ transition: all 0.5s;
	565	+ z-index: 9999;
	566	+ opacity: 0;
	567	+ background-color: #333;
	568	+}
	569	+
	570	+footer.on {
	571	+ opacity: 1;
	572	+ display: block;
	573	+}
	574	+
	575	+footer>.footer-wrap {
	576	+ color: #fff;
	577	+}
	578	+
	579	+.footer-wrap .info {
	580	+ flex: 0 0 80%;
	581	+ display: flex;
	582	+ align-items: flex-start;
	583	+}
	584	+
	585	+.footer-wrap .info address {
	586	+ margin-right: 10%;
	587	+}
	588	+
	589	+.footer-wrap .logo {
	590	+ flex: 0 0 20%;
	591	+}
	592	+.ft-logo{
	593	+ padding: 1rem 0;
	594	+
	595	+}
	596	+.footer-title {
	597	+ font-size: 1.6rem;
	598	+ font-weight: 700;
	599	+ color: #f9f9f9;
	600	+ margin-bottom: 10px;
	601	+}
	602	+
	603	+address p:last-of-type,
	604	+.contact div p {
	605	+ margin-bottom: 5px;
	606	+}
	607	+
	608	+address p:last-of-type,
	609	+.contact div p:last-of-type {
	610	+ margin-bottom: 0;
	611	+}
	612	+
	613	+
	614	+/* solution page */
	615	+.solution-title{
	616	+ width: 100%;
	617	+ position: relative;
	618	+}
	619	+.solution-title::after{
	620	+ content: '';
	621	+ position: absolute;
	622	+ top: -40px;
	623	+ left: 50%;
	624	+ background: url(../img/common/solution-after-img-1.png) no-repeat;
	625	+ background-size: 30px ;
	626	+ width: 30px;
	627	+ height: 30px;
	628	+}
	629	+.solution-title p{
	630	+ font-size: 3.5rem;
	631	+ font-weight: bold;
	632	+ font-family: 'Pretendard';
	633	+
	634	+ text-align: center;
	635	+}
	636	+.taken-area{
	637	+ width: 100%;
	638	+ height: 100%;
	639	+}
	640	+.text-after p{
	641	+ position: relative;
	642	+}
	643	+.text-after p::after{
	644	+ content: '·';
	645	+ position: absolute;
	646	+ top: -5px;
	647	+ left: 6px;
	648	+ font-size: 2rem;
	649	+}
	650	+.taken-conteiner p{
	651	+ text-align: left;
	652	+ font-family: 'Pretendard';
	653	+ margin-bottom: 10px;
	654	+}
	655	+.taken-area img{
	656	+ width: 90%;
	657	+ /* padding: 0 30px ; */
	658	+
	659	+}
	660	+.taken-area p{
	661	+ font-size: 1.4rem;
	662	+ font-weight: 600;
	663	+ padding-left: 20px;
	664	+}
	665	+
	666	+.taken-box{
	667	+ width: 100%;
	668	+ flex-wrap: nowrap;
	669	+ gap: 30px;
	670	+}
	671	+.taken-box p{
	672	+ width: 100%;
	673	+ font-family: 'Pretendard';
	674	+ background-color: #F8F9FA;
	675	+ padding: 13px;
	676	+ font-size: 1.5rem;
	677	+ border-radius: 10px;
	678	+}
	679	+.solution-text-box{
	680	+ width: 100%;
	681	+ padding: 15px 40px;
	682	+ border-radius: 10px;
	683	+ box-shadow: 2px 2px 5px #3e3e3e30;
	684	+}
	685	+.solution-text-box p{
	686	+ font-weight: 500;
	687	+ font-size: 1.4rem;
	688	+ padding-left: 20px;
	689	+}
	690	+.text-box-title{
	691	+ font-family: 'Pretendard';
	692	+ position: relative;
	693	+ font-weight: 600;
	694	+ font-size: 2rem;
	695	+ text-align: left;
	696	+}
	697	+.text-box-title::after{
	698	+ position: absolute;
	699	+ content: '';
	700	+ top: 5px;
	701	+ left: -20px;
	702	+ background: url(../img/common/solution-arrow.png) no-repeat;
	703	+ width: 10px;
	704	+ height: 10px;
	705	+ background-size: 10px;
293	706	} (No newline at end of file)

...	...	@@ -6,12 +6,13 @@
6	6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	7	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
8	8	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
9		- <link rel="stylesheet" href="../../resources/css/font.css">
10	9	<link rel="stylesheet" href="../../resources/css/reset.css">
11	10	<link rel="stylesheet" href="../../resources/css/style.css">
12	11	<link rel="stylesheet" href="../../resources/css/component.css">
13	12	<link rel="stylesheet" href="../../resources/css/common.css">
14	13	<link rel="stylesheet" href="../../resources/css/responsive.css">
	14	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	15	+
15	16
16	17
17	18	<title>TAKENSOFT</title>
...	...	@@ -20,14 +21,13 @@
20	21	<body>
21	22	<div id="header"></div>
22	23	<!-- Swiper -->
23		- <div class="swiper mySwiper">
	24	+ <div class="swiper mySwiper main-wrapper">
24	25	<div class="swiper-wrapper">
25	26	<div class="swiper-slide">
26	27	<div class="slide-wrap">
27	28	<div class="main-wrap">
28	29	<div class="text-area flex align-end main-text">
29	30	<div>
30		- <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
31	31	<img src="../resources/img/common/mouse.png" alt="">
32	32	</div>
33	33	</div>
...	...	@@ -35,95 +35,188 @@
35	35	</div>
36	36	</div>
37	37	<div class="swiper-slide">
38		- <div class="slide-wrap pt60">
39		- <div class="text-area slide-section">
40		- <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
41		- class="text-event">혁신으로 선도</span>합니다.</p>
42		- <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
	38	+ <div class="slide-wrap slide-back scale-in-br">
	39	+ <div class="text-area slide-section flex align-center justify-center">
	40	+ <div style="height: 20%;">
	41	+ <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
	42	+ class="text-event">혁신으로 선도</span>합니다.</p>
	43	+ <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
	44	+ </div>
43	45	</div>
44	46	</div>
45	47	</div>
46	48	<div class="swiper-slide gradient-back">
47		- <div class="slide-wrap pt60 slide-solution">
48		- <div class=" text-area flex align-center" style="height: 100%;">
49		- <div style="width: 100%;" class="sub-text-area">
	49	+ <div class="slide-wrap slide-solution flex align-center">
	50	+ <div class=" text-area " style="height: 70%;">
	51	+ <div style="width: 100%;" class="sub-text-area mb50">
50	52	<p class=" solution-text pb30">테이큰 소프트는</p>
51		- <!-- <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
	53	+ <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
52	54	스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
53		- </p> -->
	55	+ </p>
54	56	</div>
55		- <div class="flex justify-end solution-box " style="height: calc(100% - 84px);">
56		- <div style="height: 50%;">
57		- <div class="ivory-box hvr-grow cursor mr50">
58		- <img src="../resources/img/common/healthCare.png" alt="">
59		- <div>
60		- <p class="mb15">헬스케어 분야</p>
61		- <p>시니어 스마트 케어 모니터링 플랫폼</p>
62		- </div>
63		- </div>
64		- <div class="pink-box hvr-grow cursor">
65		- <img class="mb30" src="../resources/img/common/DATA.png" alt="">
66		- <div>
67		- <p class="mb15">데이터관리분야</p>
68		- <p>데이터 관리 솔루션 Taken BI Manager</p>
69		- </div>
70		- </div>
	57	+ <div id="container" class="flex solution-box"
	58	+ style="height: calc(100% - 126px); flex-wrap: nowrap;">
	59	+ <div class="box box1" style="display: none;">
	60	+ <p class="mb15">데이터관리분야</p>
	61	+ <p>데이터 관리 솔루션 Taken BI Manager</p>
71	62	</div>
72		- <div>
73		- <div class="purple-box hvr-grow cursor">
74		- <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
75		- <div>
76		- <p class="mb15">스마트팩토리 분야</p>
77		- <p>제조기업 공정 관리 모니터링 서비스</p>
78		- </div>
79		- </div>
80		- <div class="yellow-box hvr-grow cursor">
81		- <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
82		- <div>
83		- <p class="mb15">스마트시티 분야</p>
84		- <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
85		- </div>
86		- </div>
87		- <div class="blue-box hvr-grow cursor">
88		- <img class="mb30" src="../resources/img/common/mobility.png" alt="">
89		- <div>
90		- <p class="mb15">모빌리티 분야</p>
91		- <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
92		- </div>
93		- </div>
94		-
	63	+ <div class="box box2" style="display: none;">
	64	+ <p class="mb15">스마트시티 분야</p>
	65	+ <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
95	66	</div>
96		-
	67	+ <div class="box box3" style="display: none;">
	68	+ <p class="mb15">모빌리티 분야</p>
	69	+ <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
	70	+ </div>
	71	+ <div class="box box4" style="display: none;">
	72	+ <p class="mb15">스마트팩토리 분야</p>
	73	+ <p>제조기업 공정 관리 모니터링 서비스</p>
	74	+ </div>
	75	+ <div class="box box5" style="display: none;">
	76	+ <p class="mb15">헬스케어 분야</p>
	77	+ <p>시니어 스마트 케어 모니터링 플랫폼</p>
	78	+ </div>
97	79	</div>
98	80	</div>
99	81
100	82	</div>
101	83	</div>
102	84	<div class="swiper-slide">
103		- <div class="portfolio">
104		- <div class="swiper innerSwiper">
105		- <div class="swiper-wrapper flex mt60">
106		- <div class="swiper-slide">Slide 1</div>
107		- <div class="swiper-slide">Slide 2</div>
108		- <div class="swiper-slide">Slide 3</div>
109		- <div class="swiper-slide">Slide 4</div>
110		- <div class="swiper-slide">Slide 5</div>
111		- <div class="swiper-slide">Slide 6</div>
112		- <div class="swiper-slide">Slide 7</div>
113		- <div class="swiper-slide">Slide 8</div>
114		- <div class="swiper-slide">Slide 9</div>
	85	+ <div class="slide-wrap pt60 slide-solution">
	86	+ <div class=" flex align-center">
	87	+ <div style="width: 1200px; margin: 0 auto;">
	88	+ <p class="portfolio-text pb60">PORTFOLIO</p>
115	89	</div>
116		- <div class="swiper-button-next"></div>
117		- <div class="swiper-button-prev"></div>
118		- <div class="swiper-pagination"></div>
	90	+ <div class="swiper innerSwiper" style="height: calc(100% - 113px);">
	91	+ <div class="swiper-wrapper">
	92	+ <div class="swiper-slide ">
	93	+ <img src="../resources/img/common/innerimg-1.png" alt="">
	94	+ <div class=" innerSwiper-textBox">
	95	+ <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
	96	+ <p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능
	97	+ 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
	98	+ </div>
	99	+
	100	+ </div>
	101	+ <div class="swiper-slide ">
	102	+ <img src="../resources/img/common/innerimg-2.png" alt="">
	103	+ <div class=" innerSwiper-textBox">
	104	+ <p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
	105	+ <p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을
	106	+ 구축합니다.</p>
	107	+ </div>
	108	+
	109	+ </div>
	110	+ <div class="swiper-slide ">
	111	+ <img src="../resources/img/common/innerimg-3.png" alt="">
	112	+ <div class=" innerSwiper-textBox">
	113	+ <p class="innerSwiper-title">스마트시티 솔루션 공급</p>
	114	+ <p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획,
	115	+ 개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p>
	116	+ </div>
	117	+
	118	+ </div>
	119	+ <div class="swiper-slide ">
	120	+ <img src="../resources/img/common/innerimg-4.png" alt="">
	121	+ <div class=" innerSwiper-textBox">
	122	+ <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
	123	+ <p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
	124	+ </div>
	125	+
	126	+ </div>
	127	+ <div class="swiper-slide ">
	128	+ <img src="../resources/img/common/innerimg-5.png" alt="">
	129	+ <div class=" innerSwiper-textBox">
	130	+ <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
	131	+ <p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라
	132	+ 최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p>
	133	+ </div>
	134	+
	135	+ </div>
	136	+ <div class="swiper-slide ">
	137	+ <img src="../resources/img/common/innerimg-6.png" alt="">
	138	+ <div class=" innerSwiper-textBox">
	139	+ <p class="innerSwiper-title">기타사례</p>
	140	+ <p class="innerSwiper-title"></p>
	141	+
	142	+ </div>
	143	+
	144	+ </div>
	145	+
	146	+ </div>
	147	+ </div>
119	148	</div>
	149	+
120	150	</div>
	151	+
	152	+ </div>
	153	+ <div class="swiper-slide">
	154	+ <div class="slide-wrap pt60 slide-solution gradient-bottom flex align-center justify-center">
	155	+ <div class=" text-area " style="height: 100%;">
	156	+ <div style="width: 100%;" class="sub-text-area">
	157	+ <p class="map-text pb20">오시는길</p>
	158	+ </div>
	159	+ <div style="width: 100%;" class="flex justify-end map-btn pd10">
	160	+ <button id="btnHeadquarter">본사</button>
	161	+ <button id="btnDaeguBranch" onclick="relayout()">대구 지사</button>
	162	+ </div>
	163	+ <div id="contentHeadquarter">
	164	+ <div>
	165	+
	166	+ <div id="daumRoughmapContainer1711609730266"
	167	+ class="root_daum_roughmap root_daum_roughmap_landing map"></div>
	168	+
	169	+ <script charset="UTF-8" class="daum_roughmap_loader_script"
	170	+ src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
	171	+
	172	+ <!-- 3. 실행 스크립트 -->
	173	+ <script charset="UTF-8">
	174	+ new daum.roughmap.Lander({
	175	+ "timestamp": "1711609730266",
	176	+ "key": "2ipvd",
	177	+ "mapWidth": "1200",
	178	+ "mapHeight": "500"
	179	+ }).render();
	180	+ </script>
	181	+ </div>
	182	+ <div class="address-box flex">
	183	+ <p class="address-tile">본사</p>
	184	+ <p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)</p>
	185	+ </div>
	186	+ </div>
	187	+ <div id="contentDaeguBranch" style="display: none;">
	188	+ <div>
	189	+
	190	+ <div id="daumRoughmapContainer1711610549858"
	191	+ class="root_daum_roughmap root_daum_roughmap_landing map"></div>
	192	+
	193	+ <!-- 3. 실행 스크립트 -->
	194	+ <script charset="UTF-8">
	195	+ new daum.roughmap.Lander({
	196	+ "timestamp": "1711610549858",
	197	+ "key": "2ipvq",
	198	+ "mapWidth": "1200",
	199	+ "mapHeight": "500"
	200	+ }).render();
	201	+
	202	+ </script>
	203	+ <div class="address-box flex">
	204	+ <p class="address-tile">대구지사</p>
	205	+ <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	206	+ </div>
	207	+ </div>
	208	+ </div>
	209	+ </div>
	210	+
	211	+ </div>
	212	+
121	213
122	214	</div>
123	215
124	216	</div>
125		- </div>
126		- <div id="footer" style="border: 0px;"></div>
	217	+ <div id="footer"></div>
	218	+
	219	+
127	220
128	221
129	222
...	...	@@ -132,27 +225,46 @@
132	225	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
133	226	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
134	227
	228	+
135	229	<script>
	230	+ $(document).ready(function () {
	231	+ $("#btnHeadquarter").click(function () {
	232	+ $("#btnHeadquarter").addClass('on');
	233	+ $("#btnDaeguBranch").removeClass('on');
	234	+ $("#contentDaeguBranch").hide();
	235	+
	236	+ $("#contentHeadquarter").show();
	237	+ });
	238	+
	239	+ $("#btnDaeguBranch").click(function () {
	240	+ $("#btnDaeguBranch").addClass('on');
	241	+ $("#btnHeadquarter").removeClass('on');
	242	+
	243	+ $("#contentHeadquarter").hide();
	244	+
	245	+ $("#contentDaeguBranch").show();
	246	+
	247	+
	248	+
	249	+
	250	+
	251	+ });
	252	+ });
136	253
137	254	var swiper1 = new Swiper(".mySwiper", {
138	255	direction: "vertical",
139	256	slidesPerView: 1,
140		- spaceBetween: 30,
	257	+ spaceBetween: 40,
141	258	speed: 700,
142	259	mousewheel: true,
143	260	pagination: {
144	261	el: ".swiper-pagination",
145	262	clickable: true,
146	263	}, on: {
	264	+ // fromEdge: function () {
	265	+ // document.querySelector('#footer').classList.add('on');
147	266
148		- reachEnd: function () {
149		- swiper1.mousewheel.disable();
150		- $("#footer").show();
151		- },
152		- fromEdge: function () {
153		- swiper1.mousewheel.enable();
154		- $("#footer").hide();
155		- },
	267	+ // },
156	268	slideChange: function () {
157	269	var currentIndex = this.realIndex;
158	270	if (currentIndex === 0) {
...	...	@@ -160,55 +272,98 @@
160	272	} else {
161	273	$('#header').addClass('active');
162	274	}
	275	+
	276	+ if (this.activeIndex === 5) {
	277	+ document.querySelector('footer').classList.add('on');
	278	+ } else {
	279	+ document.querySelector('footer').classList.remove('on');
	280	+ }
	281	+
163	282	},
164	283
165	284	slideChangeTransitionEnd: function () {
166	285	if (this.activeIndex === 1) {
167	286	$('.text-event').addClass('active');
168	287	$('.sub-text').addClass('active');
	288	+ $('.slide-back').addClass('active');
169	289	} else {
170	290	$('.text-event').removeClass('active');
171	291	$('.sub-text').removeClass('active');
	292	+ $('.slide-back').removeClass('active');
172	293	}
173	294	if (this.activeIndex === 2) {
174	295	$('.solution-text').addClass('active');
175	296	$('.solution-sub-text').addClass('active');
	297	+ $('.box').addClass('active');
176	298	} else {
177	299	$('.solution-text').removeClass('active');
178	300	$('.solution-sub-text').removeClass('active');
	301	+ $('.box').removeClass('active');
	302	+
179	303	}
180	304	},
181	305
182		-
183	306	}
184	307	});
	308	+ window.addEventListener('load', () => {
	309	+ const boxes = document.querySelectorAll('.box');
	310	+ let delay = 0.6;
185	311
186		-
	312	+ boxes.forEach(box => {
	313	+ setTimeout(() => {
	314	+ box.style.display = 'block'; // 박스를 보이게 합니다.
	315	+ box.style.animationDelay = `${delay}s`; // 애니메이션 지연 시간을 설정합니다.
	316	+ delay += 0.3; // 다음 박스가 나타나기까지의 지연 시간을 증가시킵니다.
	317	+ }, delay * 3000); // setTimeout은 밀리초 단위를 사용합니다.
	318	+ });
	319	+ });
187	320	// 헤더,푸터 불러오기
188	321	$(function () {
189	322	$("#header").load("layout/header.html");
190	323	$("#footer").load("layout/footer.html");
191		- $("#footer").hide();
192		- });
	324	+ // $("#footer").hide();
193	325
	326	+ });
194	327	var innerSwiper = new Swiper(".innerSwiper", {
195		- slidesPerView: 10,
196		- loop: true,
	328	+ slidesPerView: 3,
197	329	spaceBetween: 30,
198	330	centeredSlides: true,
	331	+
199	332	autoplay: {
200		- // delay: 1000,
	333	+ delay: 0,
201	334	disableOnInteraction: false,
202	335	},
203		- pagination: {
204		- el: ".swiper-pagination",
205		- clickable: true,
206		- },
207		- navigation: {
208		- nextEl: ".swiper-button-next",
209		- prevEl: ".swiper-button-prev",
210		- },
	336	+ loop: true,
	337	+ speed: 5000,
	338	+ activeIndexChange: function () {
	339	+
	340	+ }, on: {
	341	+ init: function () {
	342	+ // Swiper 초기화 시 첫 번째 슬라이드 설정
	343	+ let firstTextBox = this.slides[0].querySelector('.innerSwiper-textBox');
	344	+ if (firstTextBox) firstTextBox.classList.add('active');
	345	+ },
	346	+ // activeIndexChange: function () {
	347	+ // // 모든 텍스트 박스에서 'active' 클래스 제거
	348	+ // this.slides.forEach(slide => {
	349	+ // let textBox = slide.querySelector('.innerSwiper-textBox');
	350	+ // if (textBox) textBox.classList.remove('active');
	351	+ // });
	352	+ // // 현재 활성화된 슬라이드의 텍스트 박스에 'active' 클래스 추가
	353	+ // let currentTextBox = this.slides[this.activeIndex].querySelector('.innerSwiper-textBox');
	354	+ // if (currentTextBox) currentTextBox.classList.add('active');
	355	+ // }
	356	+ }
211	357	});
	358	+
	359	+ // Swiper 인스턴스 초기화
	360	+ // mySwiper.init();
	361	+
	362	+
	363	+
	364	+
	365	+
	366	+
212	367
213	368
214	369
...	...	@@ -220,9 +375,25 @@
220	375
221	376
222	377	<style scoped>
223		- #footer {
224		- display: none;
	378	+ #header {
	379	+ position: fixed;
	380	+ top: 0;
	381	+ z-index: 3;
225	382	}
	383	+
	384	+
	385	+ /* #footer {
	386	+ position: relative;
	387	+ height: 100px;
	388	+ z-index: 10000;
	389	+ }
	390	+
	391	+ #footer.on {
	392	+ opacity: 1;
	393	+ display: block;
	394	+ } */
	395	+
	396	+
226	397
227	398	html,
228	399	body {
...	...	@@ -252,11 +423,6 @@
252	423	}
253	424
254	425
255		- #header {
256		- position: fixed;
257		- top: 0;
258		- z-index: 1;
259		- }
260	426
261	427	.slide-wrap {
262	428	width: 100%;
...	...	@@ -271,13 +437,7 @@
271	437	background-position: bottom;
272	438	}
273	439
274		- .text-area {
275		- width: 1200px;
276		- height: 100%;
277		- margin: auto;
278		- text-align: center;
279		- }
280		-
	440	+
281	441	.main-text {
282	442
283	443	padding-bottom: 50px;
...	...	@@ -309,9 +469,7 @@
309	469	font-weight: 900;
310	470	}
311	471
312		- .slide-section {
313		- padding-top: 330px;
314		- }
	472	+
315	473
316	474	.text-main {
317	475	font-weight: 600;
...	...	@@ -321,11 +479,19 @@
321	479
322	480	}
323	481
324		- .sub-text-area {
325		- text-align: left;
	482	+ .text-main span {
	483	+ color: #F29600;
	484	+
	485	+
326	486	}
327		- .gradient-back{
328		- background: linear-gradient(#e9ebff , #fff, #fff);
	487	+
	488	+
	489	+ .gradient-back {
	490	+ background: linear-gradient(#e9ebff, #fff, #fff);
	491	+ }
	492	+
	493	+ .gradient-bottom {
	494	+ background: linear-gradient(#fff, #fff, #e9ebff);
329	495	}
330	496
331	497	.slide-solution {
...	...	@@ -333,6 +499,7 @@
333	499	font-family: 'Pretendard';
334	500
335	501	}
	502	+
336	503	</style>
337	504
338	505	</html> (No newline at end of file)

Delete comment