Commit @69a148ec6293c3eb4d2ae21aebc522a6adf28838

mycoms 2024-04-02

240402 김하영

@69a148ec6293c3eb4d2ae21aebc522a6adf28838

9f39c7e

69a148e

resources/css/common.css

--- resources/css/common.css

+++ resources/css/common.css


 
 /* 마진 */
 .ml0 {
-    margin-left: 0px;
+    margin-left: 0rem;
 }
 
 .ml5 {
-    margin-left: 5px;
+    margin-left: 0.5rem;
 }
 
 .ml10 {
-    margin-left: 10px;
+    margin-left: 1rem;
 }
 
 .ml20 {
-    margin-left: 20px;
+    margin-left: 2rem;
 }
 
 .ml30 {
-    margin-left: 30px;
+    margin-left: 3rem;
 }
 
 .ml40 {
-    margin-left: 40px;
+    margin-left: 4rem;
 }
 
 .ml50 {
-    margin-left: 50px;
+    margin-left: 5rem;
 }
 
 .ml60 {
-    margin-left: 60px;
+    margin-left: 6rem;
 }
 
 .ml70 {
-    margin-left: 70px;
+    margin-left: 7rem;
 }
 
 .ml80 {
-    margin-left: 80px;
+    margin-left: 8rem;
 }
 
 .ml90 {
-    margin-left: 90px;
+    margin-left: 9rem;
 }
 
 .ml100 {
-    margin-left: 100px;
+    margin-left: 10rem;
 }
 
 .mr0 {
-    margin-right: 0px;
+    margin-right: 0rem;
 }
 
 .mr5 {
-    margin-right: 5px;
+    margin-right: 0.5rem;
 }
 
 .mr10 {
-    margin-right: 10px;
+    margin-right: 1rem;
 }
 
 .mr20 {
-    margin-right: 20px;
+    margin-right: 2rem;
 }
 
 .mr30 {
-    margin-right: 30px;
+    margin-right: 3rem;
 }
 
 .mr40 {
-    margin-right: 40px;
+    margin-right: 4rem;
 }
 
 .mr50 {
-    margin-right: 50px;
+    margin-right: 5rem;
 }
 
 .mr60 {
-    margin-right: 60px;
+    margin-right: 6rem;
 }
 
 .mr70 {
-    margin-right: 70px;
+    margin-right: 7rem;
 }
 
 .mr80 {
-    margin-right: 80px;
+    margin-right: 8rem;
 }
 
 .mr90 {
-    margin-right: 90px;
+    margin-right: 9rem;
 }
 
 .mr100 {
-    margin-right: 100px;
+    margin-right: 10rem;
 }
 
 .mt0 {
-    margin-top: 0px;
+    margin-top: 0rem;
 }
 
 .mt5 {
-    margin-top: 5px;
+    margin-top: 0.5rem;
 }
 
 .mt10 {
-    margin-top: 10px;
+    margin-top: 1rem;
 }
 
 .mt20 {
-    margin-top: 20px;
+    margin-top: 2rem;
 }
 
 .mt30 {
-    margin-top: 30px;
+    margin-top: 3rem;
 }
 
 .mt40 {
-    margin-top: 40px;
+    margin-top: 4rem;
 }
 
 .mt50 {
-    margin-top: 50px;
+    margin-top: 5rem;
 }
 
 .mt60 {
-    margin-top: 60px;
+    margin-top: 6rem;
 }
 
 .mt70 {
-    margin-top: 70px;
+    margin-top: 7rem;
 }
 
 .mt80 {
-    margin-top: 80px;
+    margin-top: 8rem;
 }
 
 .mt90 {
-    margin-top: 90px;
+    margin-top: 9rem;
 }
 
 .mt100 {
-    margin-top: 100px;
+    margin-top: 10rem;
 }
 
 .mb0 {
-    margin-bottom: 0px;
+    margin-bottom: 0rem;
 }
 
 .mb5 {
-    margin-bottom: 5px;
+    margin-bottom: 0.5rem;
 }
 
 .mb10 {
-    margin-bottom: 10px;
-}
-.mb15 {
-    margin-bottom: 15px;
+    margin-bottom: 1rem;
 }
 
 .mb20 {
-    margin-bottom: 20px;
+    margin-bottom: 2rem;
 }
 
 .mb30 {
-    margin-bottom: 30px;
+    margin-bottom: 3rem;
 }
 
 .mb40 {
-    margin-bottom: 40px;
+    margin-bottom: 4rem;
 }
 
 .mb50 {
-    margin-bottom: 50px;
+    margin-bottom: 5rem;
 }
 
 .mb60 {
-    margin-bottom: 60px;
+    margin-bottom: 6rem;
 }
 
 .mb70 {
-    margin-bottom: 70px;
+    margin-bottom: 7rem;
 }
 
 .mb80 {
-    margin-bottom: 80px;
+    margin-bottom: 8rem;
 }
 
 .mb90 {
-    margin-bottom: 90px;
+    margin-bottom: 9rem;
 }
 
 .mb100 {
-    margin-bottom: 100px;
+    margin-bottom: 10rem;
 }
 
 /* 패딩 */

 }
 
 .pd5 {
-    padding: 5px;
+    padding: 0.5rem;
 }
 
 .pd10 {
-    padding: 10px;
-}
-.pd15{
-    padding: 15px;
+    padding: 1rem;
 }
 
 .pd20 {
-    padding: 20px;
+    padding: 2rem;
 }
 
 .pd30 {
-    padding: 30px;
+    padding: 3rem;
 }
 
 .pd40 {
-    padding: 40px;
+    padding: 4rem;
 }
 
 .pd50 {
-    padding: 50px;
+    padding: 5rem;
 }
 
 .pd60 {
-    padding: 60px;
+    padding: 6rem;
 }
 
 .pd70 {
-    padding: 70px;
+    padding: 7rem;
 }
 
 .pd80 {
-    padding: 80px;
+    padding: 8rem;
 }
 
 .pd90 {
-    padding: 90px;
+    padding: 9rem;
 }
 
 .pd100 {
-    padding: 100px;
+    padding: 10rem;
 }
+
+/* 패딩 top */
 
 .pt0 {
     padding-top: 0;
 }
 
 .pt5 {
-    padding-top: 5px;
+    padding-top: 0.5rem;
 }
 
 .pt10 {
-    padding-top: 10px;
+    padding-top: 1rem;
 }
 
 .pt20 {
-    padding-top: 20px;
+    padding-top: 2rem;
 }
 
 .pt30 {
-    padding-top: 30px;
+    padding-top: 3rem;
 }
 
 .pt40 {
-    padding-top: 40px;
+    padding-top: 4rem;
 }
 
 .pt50 {
-    padding-top: 50px;
+    padding-top: 5rem;
 }
 
 .pt60 {
-    padding-top: 60px;
+    padding-top: 6rem;
 }
 
 .pt70 {
-    padding-top: 70px;
+    padding-top: 7rem;
 }
 
 .pt80 {
-    padding-top: 80px;
+    padding-top: 8rem;
 }
 
 .pt90 {
-    padding-top: 90px;
+    padding-top: 9rem;
 }
 
 .pt100 {
-    padding-top: 100px;
+    padding-top: 10rem;
 }
 
 .pb0 {
     padding-bottom: 0;
 }
 
+/* 패딩 bottom */
 .pb5 {
-    padding-bottom: 5px;
+    padding-bottom: 0.5rem;
 }
 
 .pb10 {
-    padding-bottom: 10px;
+    padding-bottom: 1rem;
 }
 
 .pb20 {
-    padding-bottom: 20px;
+    padding-bottom: 2rem;
 }
 
 .pb30 {
-    padding-bottom: 30px;
+    padding-bottom: 3rem;
 }
 
 .pb40 {
-    padding-bottom: 40px;
+    padding-bottom: 4rem;
 }
 
 .pb50 {
-    padding-bottom: 50px;
+    padding-bottom: 5rem;
 }
 
 .pb60 {
-    padding-bottom: 60px;
+    padding-bottom: 6rem;
 }
 
 .pb70 {
-    padding-bottom: 70px;
+    padding-bottom: 7rem;
 }
 
 .pb80 {
-    padding-bottom: 80px;
+    padding-bottom: 8rem;
 }
 
 .pb90 {
-    padding-bottom: 90px;
+    padding-bottom: 9rem;
 }
 
 .pb100 {
-    padding-bottom: 100px;
+    padding-bottom: 10rem;
 }
 
+/* 패딩 left */
 .pl0 {
-    padding-left: 0;
+    padding-left: 0rem;
 }
-
 .pl5 {
-    padding-left: 5px;
+    padding-left: 0.5rem;
 }
 
 .pl10 {
-    padding-left: 10px;
+    padding-left: 1rem;
 }
 
 .pl20 {
-    padding-left: 20px;
+    padding-left: 2rem;
 }
 
 .pl30 {
-    padding-left: 30px;
+    padding-left: 3rem;
 }
 
 .pl40 {
-    padding-left: 40px;
+    padding-left: 4rem;
 }
 
 .pl50 {
-    padding-left: 50px;
+    padding-left: 5rem;
 }
 
 .pl60 {
-    padding-left: 60px;
+    padding-left: 6rem;
 }
 
 .pl70 {
-    padding-left: 70px;
+    padding-left: 7rem;
 }
 
 .pl80 {
-    padding-left: 80px;
+    padding-left: 8rem;
 }
 
 .pl90 {
-    padding-left: 90px;
+    padding-left: 9rem;
 }
 
 .pl100 {
-    padding-left: 100px;
+    padding-left: 10rem;
+}
+
+/* 패딩 right */
+.pr0 {
+    padding-right: 0rem;
+}
+.pr5 {
+    padding-right: 0.5rem;
+}
+
+.pr10 {
+    padding-right: 1rem;
+}
+
+.pr20 {
+    padding-right: 2rem;
+}
+
+.pr30 {
+    padding-right: 3rem;
+}
+
+.pr40 {
+    padding-right: 4rem;
+}
+
+.pr50 {
+    padding-right: 5rem;
+}
+
+.pr60 {
+    padding-right: 6rem;
+}
+
+.pr70 {
+    padding-right: 7rem;
+}
+
+.pr80 {
+    padding-right: 8rem;
+}
+
+.pr90 {
+    padding-right: 9rem;
+}
+
+.pr100 {
+    padding-right: 10rem;
 }
 
 /* btn */

9f39c7e

69a148e

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


 @charset "utf-8";
+
 .text-area {
     width: 1200px;
     height: 100%;

 
 #header.active .header nav li a {
     color: #333;
-    
+
 }
-#header.active .header  nav ul li ul.dropdown {
+
+#header.active .header nav ul li ul.dropdown {
     background-color: #fff;
 }
 

 
 
 }
-.slide-back{
+
+.slide-back {
     background: url(../img/common/main-2.png)no-repeat;
     width: 0;
     height: 100%;

     background-size: cover;
     opacity: 0;
 }
-.slide-back.active{
+
+.slide-back.active {
     animation: slideIn 1s forwards;
     overflow: hidden;
 

 
 @keyframes slideIn {
     from {
-      width: 0;
-      opacity: 0;
+        width: 0;
+        opacity: 0;
     }
+
     to {
         width: 100%;
         opacity: 1;
     }
-  }
+}
 
 
 .text-event {

     animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
     animation-delay: 1s;
 }
-.sub-text-area{
+
+.sub-text-area {
     text-align: center;
 }
+
 .solution-text {
     font-size: 4.5rem;
     font-weight: 900;
     opacity: 0;
 }
-.box1,.box2,.box3,.box4,.box5,.box6{
+
+.box1,
+.box2,
+.box3,
+.box4,
+.box5,
+.box6 {
     width: 100%;
     height: 100%;
     border-radius: 20px;
     background-size: cover;
-    padding:214px 10px 10px 10px;
+    padding: 214px 10px 10px 10px;
     color: #fff;
-   
+
     text-align: left;
 }
-.box2,.box4{
+
+.box2,
+.box4 {
     transform: translateY(30px);
 }
-.box1{
+
+.box1 {
     background: url(../img/common/img-box1.png) no-repeat;
 
 }
-.box2{
+
+.box2 {
     background: url(../img/common/img-box2.png) no-repeat;
-    
+
 }
-.box3{
+
+.box3 {
     background: url(../img/common/img-box3.png) no-repeat;
-  
+
 }
-.box4{
+
+.box4 {
     background: url(../img/common/img-box4.png) no-repeat;
- 
+
 }
-.box5{
+
+.box5 {
     background: url(../img/common/img-box5.png) no-repeat;
- 
+
 }
-.box6{
+
+.box6 {
     background: url(../img/common/img-box6.png) no-repeat;
 
 }
-.box{
+
+.box {
     opacity: 0;
     cursor: pointer;
 }
-.box:hover{
+
+.box:hover {
     transform: scale(1.1);
     transition: all 0.5s ease;
 }
+
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-  
-  .box.active {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.box.active {
     animation-name: fadeIn;
     animation-duration: 1s;
     animation-fill-mode: both;
-  }
+}
 
 .solution-text.active {
 

     -webkit-text-stroke: 1px white;
 }
 
-.innerSwiper{
+.innerSwiper {
     height: 100%;
 }
+
 .innerSwiper .swiper-slide {
     text-align: center;
     font-size: 18px;

 
 } */
 
- 
-.innerSwiper-textBox{
+
+.innerSwiper-textBox {
     height: 160px;
     padding: 15px 0 0 0;
 }
-.innerSwiper-title,.innerSwiper-text{
+
+.innerSwiper-title,
+.innerSwiper-text {
 
     font-family: 'Pretendard';
 }
-.innerSwiper-title{
+
+.innerSwiper-title {
     font-size: 2.7rem;
     font-weight: 600;
-    padding: 0  0 10px 0;
+    padding: 0 0 10px 0;
 }
 
 
-.map-text{
+.map-text {
     text-align: center;
     font-size: 4rem;
     font-weight: 900;
     position: relative;
 }
-.map-text::after{
+
+.map-text::after {
     content: "";
     position: absolute;
     top: -40px;

     background-size: contain;
 
 }
+
 .map-btn button {
     border: 1px solid #213F99;
     padding: 10px 15px 10px 35px;

 }
 
 .map-btn button.on {
-    background: url(../img/common/location-dot-solid-w.svg) no-repeat 15px center / 15px, #213F99; 
-    color: #FFFFFF; 
+    background: url(../img/common/location-dot-solid-w.svg) no-repeat 15px center / 15px, #213F99;
+    color: #FFFFFF;
 }
-.address-box{
+
+.address-box {
     border: 2px solid #213F99;
     box-shadow: 5px 5px 0px #213F99;
     transform: translateY(-30px);

     border-radius: 10px;
     padding: 12px 30px;
 }
-.address-tile{
+
+.address-tile {
     font-size: 2.5rem;
     font-weight: 600;
     color: #213F99;
     width: 150px;
     position: relative;
 }
-.address-tile::after{
+
+.address-tile::after {
     position: absolute;
     content: '';
     top: 50%;

 
     background: url(../img/common/location-dot-solid.svg)no-repeat;
 }
-.address-subtitle{
+
+.address-subtitle {
     padding: 5px 0;
 }
-.map{
+
+.map {
     box-shadow: 2px 2px 10px #3333333d;
 }
 

   }
    */
 
+/* footer {
+        transition: opacity 0.5s, visibility 0.5s;
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    footer.show {
+        opacity: 1;
+        visibility: visible;
+    } */
 
 
-  
-footer {
+
+
+#footer {
     width: 100%;
-    height: 100px;
+    transition: opacity 0.5s, visibility 0.5s;
+    /* height: 200px; */
     padding: 30px;
     position: relative;
     bottom: 0;
     transition: all 0.5s;
-    z-index: 9999;
-    opacity: 0;
+    display: none;
     background-color: #333;
 }
 
-footer.on {
-    opacity: 1;
-    display: block;
+#footer.show {
+    position: relative;
+    bottom: 200px;
+    z-index: 10000;
+    display: block !important;
+}
+.show-footer {
+    margin-bottom: 100px; /* 푸터의 높이에 따라 조정 */
 }
 
-footer>.footer-wrap {
+.footer-wrap {
+    width: 1200px;
+    margin: 0 auto;
     color: #fff;
+}
+
+.footer-text p {
+    margin-bottom: 1rem;
+    width: 50%;
 }
 
 .footer-wrap .info {

 .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;
+.copyright {
+    text-align: center;
 }
 
 
 /* solution page */
-.solution-title{
+.solution-title,
+.traffic-title,
+.ai-title,
+.meta-title,
+.smart-title {
     width: 100%;
+    height: 60px;
     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{
+
+.solution-title p,
+.traffic-title p,
+.ai-title p,
+.meta-title p,
+.smart-title p {
     font-size: 3.5rem;
     font-weight: bold;
     font-family: 'Pretendard';
 
     text-align: center;
 }
-.taken-area{
+
+.solution-title::after {
+    content: '';
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    background: url(../img/common/solution-after-img-1.png) no-repeat;
+    background-size: 30px;
+    width: 30px;
+    height: 30px;
+}
+
+.traffic-title::after {
+    content: '';
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    background: url(../img/common/traffic-icon.png) no-repeat;
+    background-size: 30px;
+    width: 30px;
+    height: 30px;
+}
+
+.ai-title::after {
+    content: '';
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: url(../img/common/ai-icon.png) no-repeat;
+    background-size: 30px;
+    width: 30px;
+    height: 30px;
+}
+
+.meta-title::after {
+    content: '';
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: url(../img/common/meta-icon.png) no-repeat;
+    background-size: 30px;
+    width: 30px;
+    height: 30px;
+}
+
+.smart-title::after {
+    content: '';
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: url(../img/common/smart-icon.png) no-repeat;
+    background-size: 30px;
+    width: 30px;
+    height: 30px;
+}
+
+.taken-area {
     width: 100%;
     height: 100%;
 }
-.text-after p{
+
+.text-after p {
     position: relative;
+    line-height: 1.5;
 }
-.text-after p::after{
+
+.text-after p::after {
     content: '·';
     position: absolute;
     top: -5px;
     left: 6px;
     font-size: 2rem;
 }
-.taken-conteiner p{
+
+.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;
+
+
+.taken-area p {
+    font-size: 1.5rem;
     font-weight: 600;
     padding-left: 20px;
 }
 
-.taken-box{
+.taken-box {
     width: 100%;
     flex-wrap: nowrap;
     gap: 30px;
 }
-.taken-box p{
+
+.taken-box p {
     width: 100%;
     font-family: 'Pretendard';
     background-color: #F8F9FA;
     padding: 13px;
-    font-size: 1.5rem;
+    text-align: center;
+    font-size: 1.6rem;
     border-radius: 10px;
+    font-weight: 600;
 }
-.solution-text-box{
+
+.solution-text-box {
     width: 100%;
     padding: 15px 40px;
     border-radius: 10px;
     box-shadow: 2px 2px 5px #3e3e3e30;
 }
-.solution-text-box p{
+
+.solution-text-box p {
     font-weight: 500;
     font-size: 1.4rem;
     padding-left: 20px;
+    line-height: 2;
 }
-.text-box-title{
+
+.text-box-title {
     font-family: 'Pretendard';
     position: relative;
     font-weight: 600;
     font-size: 2rem;
     text-align: left;
 }
-.text-box-title::after{
+
+.text-box-title::after {
     position: absolute;
     content: '';
     top: 5px;

     width: 10px;
     height: 10px;
     background-size: 10px;
+}
+
+.traffic-button {
+    width: 100%;
+}
+
+.traffic-button button {
+    padding: 13px 50px;
+    /* width: 182px; */
+    background-color: #242A30;
+    color: #fff;
+    border-radius: 50px;
+    font-weight: 600;
+    font-size: 1.5rem;
+    font-family: 'Pretendard';
+    position: relative;
+
+
+}
+
+.traffic-button button::after {
+    content: '';
+    position: absolute;
+    background: url(../img/common/solution-button01.png) no-repeat;
+    width: 20px;
+    height: 20px;
+    top: 60%;
+    left: 12%;
+    transform: translateY(-50%);
+    background-size: 20px;
+}
+
+.traffic-button button::before {
+    content: '';
+    position: absolute;
+    background: url(../img/common/solution-button.png) no-repeat;
+    width: 20px;
+    height: 20px;
+    top: 50%;
+    right: 10%;
+    transform: translateY(-50%);
+
+    background-size: 20px;
+}
+
+.traffic-area img {
+    width: 80%;
+    background-size: cover;
+}
+
+/* 마케팅 */
+.marketing-wrapper {
+    background: url(../img/common/marketing-bg.png)no-repeat;
+    width: 100%;
+    background-size: 100%;
+    background-position: top;
+
+
+
+}
+
+.marketing-wrap-title {
+    padding-top: 170px;
+    text-align: center;
+
+}
+
+
+.marketing-wrap-title h1 {
+    font-size: 5rem;
+    font-weight: 900;
+    font-family: 'Pretendard';
+    position: relative;
+}
+
+.marketing-wrap-title h1::after {
+    position: absolute;
+    content: '';
+    top: -35px;
+    left: 50%;
+    background: url(../img/common/marketing-icon.png) no-repeat;
+    background-size: 40px;
+    width: 40px;
+    height: 40px;
+}
+
+.meta-wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.meta-wrap::before {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    right: 0%;
+    background: url(../img/common/meta-img02.png)no-repeat;
+    background-size: cover;
+    width: 30%;
+    height: 70%;
+    z-index: -1;
+}
+
+.marketing-wrapper {
+    width: 100%;
+}
+
+.marketing-area {
+    width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    gap: 30px;
+    grid-template-columns: 1fr 1fr;
+}
+
+.marketing-area img {
+    width: 100%;
+    margin-bottom: 10px;
+    border-radius: 20px;
+}
+
+.marketing-area p {
+    margin-bottom: 10px;
+}
+
+.marketing-area p span {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #213F99;
+}
+
+.marketing-title {
+    font-size: 2rem;
+}
+
+.marketing-date {
+    text-align: right;
+}
+
+/* about us */
+.about-wrap {
+
+    padding: 0 70px;
+}
+
+.about-wrapper {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(#fff, #fff, #d7e2ff);
+
+}
+
+.about-title p:nth-child(1) {
+    font-size: 4rem;
+    font-weight: bold;
+    font-family: 'Pretendard';
+    text-align: center;
+}
+
+.about-radius,
+.about-radius-bottom,
+.about-radius-right,
+.about-radius-left,
+.about-radius-bottom-left,
+.about-radius-bottom-right {
+    border: 2px solid #213F99;
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    padding: 40px 20px;
+    position: relative;
+
+
+}
+
+
+.about-radius::after {
+    content: '';
+    position: absolute;
+    background: url(../img/common/about-img.png) no-repeat;
+    width: 267px;
+    height: 267px;
+    background-size: contain;
+    top: -60px;
+    left: -60px;
+    -webkit-animation: swirl-in-fwd 0.6s ease-out both;
+    animation: swirl-in-fwd 0.6s ease-out both;
+    animation-delay: 0.2s;
+}
+
+.about-radius-left::after {
+    content: '';
+    position: absolute;
+    background: url(../img/common/about-img.png) no-repeat;
+    width: 267px;
+    height: 267px;
+    background-size: contain;
+    transform: rotate(-3deg);
+    top: -60px;
+    left: -60px;
+    -webkit-animation: swirl-in-fwd 0.6s ease-out both;
+    animation: swirl-in-fwd 0.6s ease-out both;
+
+
+}
+
+.about-radius-right::after {
+    content: '';
+    position: absolute;
+    background: url(../img/common/about-img.png) no-repeat;
+    width: 267px;
+    height: 267px;
+    background-size: contain;
+    transform: rotate(5deg);
+    top: -60px;
+    left: -60px;
+    -webkit-animation: swirl-in-fwd 0.6s ease-out both;
+    animation: swirl-in-fwd 0.6s ease-out both;
+    animation-delay: 0.4s;
+}
+
+.about-radius-bottom-left::after {
+    content: '';
+    position: absolute;
+    background: url(../img/common/about-img02.png) no-repeat;
+    width: 267px;
+    height: 267px;
+    background-size: contain;
+    transform: rotate(4deg);
+    top: -30px;
+    left: -60px;
+    -webkit-animation: swirl-in-fwd 0.6s ease-out both;
+    animation: swill-in-fwd 0.6s ease-out both;
+    animation-delay: 0.6s;
+}
+
+.about-radius-bottom-right::after {
+    content: '';
+    position: absolute;
+    background: url(../img/common/about-img02.png) no-repeat;
+    width: 267px;
+    height: 267px;
+    background-size: contain;
+    top: -30px;
+    transform: rotate(4deg);
+    left: -60px;
+    -webkit-animation: swirl-in-fwd 0.6s ease-out both;
+    animation: swill-in-fwd 0.6s ease-out both;
+    animation-delay: 0.8s;
+}
+
+.about-text {
+    text-align: center;
+    color: #213F99;
+    font-weight: 900;
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+
+.swirl-in-fwd {
+    -webkit-animation: swirl-in-fwd 0.6s ease-out both;
+    animation: swirl-in-fwd 0.6s ease-out both;
+}
+
+.swill-in-fwd {
+    -webkit-animation: swill-in-fwd 0.6s ease-out both;
+    animation: swill-in-fwd 0.6s ease-out both;
+}
+
+@keyframes swirl-in-fwd {
+    0% {
+        -webkit-transform: rotate(-540deg) scale(0);
+        transform: rotate(-540deg) scale(0);
+        opacity: 0;
+    }
+
+    100% {
+        -webkit-transform: rotate(0) scale(1);
+        transform: rotate(0) scale(1);
+        opacity: 1;
+    }
+}
+
+@keyframes swill-in-fwd {
+    0% {
+        -webkit-transform: rotate(800deg) scale(0);
+        transform: rotate(800deg) scale(0);
+        opacity: 0;
+    }
+
+    100% {
+        -webkit-transform: rotate(0) scale(1);
+        transform: rotate(0) scale(1);
+        opacity: 1;
+    }
+}
+
+
+.accordion {
+    height: 550px;
+    padding: 2rem;
+    cursor: pointer;
+    flex: 1;
+    justify-content: space-between;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+    transition: all 0.7s ease-in-out;
+    filter: brightness(80%);
+    z-index: 1;
+}
+
+
+.slideText p:first-child {
+    font-size: 3rem;
+    font-family: 'GmarketSansBold';
+    font-weight: bold;
+    font-style: normal;
+    z-index: 5;
+    color: #fff;
+    text-align: left;
+}
+
+.slideText p:first-child span {
+    color: #ffffff64;
+}
+
+.slideText p:first-child,
+.slideText p:last-child {
+    text-align: left;
+    color: #fff;
+}
+
+
+.slideTextDtail {
+    text-align: left;
+    padding: 0 2rem;
+}
+
+.slideText p:last-child,
+.slideTextDtail p {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    opacity: 0;
+    color: #333;
+}
+
+.slideImg {
+    padding: 2rem;
+    width: 100%;
+    opacity: 0;
+}
+
+.slideImg img {
+    border-radius: 1rem;
+    width: 100%;
+    height: 250px !important;
+}
+
+
+.accordion.active {
+    flex: 3;
+    filter: brightness(100%);
+
+}
+
+.accordion.active .slideImg {
+    opacity: 1;
+    object-fit: contain;
+
+}
+
+
+.slideTextDtail.active p:first-child span {
+    /* color: #b1a1c3; */
+    z-index: 1;
+}
+.accordion.active .accordion-num ,.accordion.active .accordion-num span{
+    color: #80649b;
+
+}
+.accordion.active p,
+.slideTextDtail.active p {
+    opacity: 1;
+    color: #333;
+    /* transition: opacity 0.3s ease-in 0.4s; */
+}
+
+.accordion-box p {
+    width: 50%;
+}
+
+.about-vision-box {
+    width: 100%;
+    flex-wrap: nowrap;
+}
+
+.about-vision-box img {
+    width: 40%;
+    object-fit: contain !important;
+
+}
+
+
+.history-wrap{
+    width: 100%;
+    height: 100%;
+}
+.timeline{
+    width: 100%;
+    height: 100%;
+    height: calc(100% - 300px);
+}
+.contents{
+    height: 100%;
+    overflow-y: auto;
+}
+.month{
+    width: 100px;
+    font-size: 2rem;
+    font-weight: 700;
+    text-align: right !important;
+    color: #213F99 ;
+}
+.year{
+    width: 200px;
+    color: #D6DEF6;
+    font-weight: 900;
+    font-size: 2rem;
+    transition: all 0.2s ease;
+    padding: 2rem 0;
+}
+.year span{
+    font-size: 2rem;
+    font-weight: 900;
+    
+}
+.active-year {
+    font-size: 7rem;
+    font-weight: 900;
+    color: #213F99; /* 색상은 원하는 대로 변경하세요 */
+}
+.month-text p{
+ margin-bottom: 1rem;
+}
+
+
+.month-text img{
+    border: 1px solid #808080;
+    padding: 5px;
+    width: 120px;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
+
+
+
+.active-year {
+    color: #213F99 ;
+    font-weight: bold;
+    cursor: default;
+}
+
+/* portpoilo */
+
+.customized-wrap-title,.etc-wrap-title{
+    width: 100%;
+    height: 60px;
+}
+.customized-wrap-title h1{
+    font-size: 4rem;
+
+}
+.customized-wrap-title p{
+    font-size: 1.5rem;
+
+}
+.customized-box p{
+    font-size: 2rem;
+    font-weight: 500;
+}
+.etc-wrap-title h1{
+    font-size: 6rem;
+}
+.etc-box{
+    width: 49%;
+    border: 1px solid red;
+}
+.etc-box img{
+    width: 100%;
+    object-fit: contain;
+}
+.etc-box-title p{
+    font-size: 2.5rem;
 }

69a148e

resources/img/common/about-img-bg02.png (Binary) (added)

+++ resources/img/common/about-img-bg02.png

Binary file is not shown

69a148e

resources/img/common/about-img-bg03.png (Binary) (added)

+++ resources/img/common/about-img-bg03.png

Binary file is not shown

69a148e

resources/img/common/about-img-db.png (Binary) (added)

+++ resources/img/common/about-img-db.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

resources/img/common/about-img02.png (Binary) (added)

+++ resources/img/common/about-img02.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

resources/img/common/about-img2.png (Binary) (added)

+++ resources/img/common/about-img2.png

Binary file is not shown

69a148e

resources/img/common/about-img3.png (Binary) (added)

+++ resources/img/common/about-img3.png

Binary file is not shown

69a148e

resources/img/common/about-img4.png (Binary) (added)

+++ resources/img/common/about-img4.png

Binary file is not shown

69a148e

resources/img/common/about-img5.png (Binary) (added)

+++ resources/img/common/about-img5.png

Binary file is not shown

69a148e

resources/img/common/ai-icon.png (Binary) (added)

+++ resources/img/common/ai-icon.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

resources/img/common/custom-img2.png (Binary) (added)

+++ resources/img/common/custom-img2.png

Binary file is not shown

69a148e

resources/img/common/custom-img3.png (Binary) (added)

+++ resources/img/common/custom-img3.png

Binary file is not shown

69a148e

resources/img/common/custom-img4.png (Binary) (added)

+++ resources/img/common/custom-img4.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

resources/img/common/etc-img2.png (Binary) (added)

+++ resources/img/common/etc-img2.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

resources/img/common/history-img100.png (Binary) (added)

+++ resources/img/common/history-img100.png

Binary file is not shown

69a148e

resources/img/common/history-img101.png (Binary) (added)

+++ resources/img/common/history-img101.png

Binary file is not shown

69a148e

resources/img/common/history-img11.png (Binary) (added)

+++ resources/img/common/history-img11.png

Binary file is not shown

69a148e

resources/img/common/history-img110.png (Binary) (added)

+++ resources/img/common/history-img110.png

Binary file is not shown

69a148e

resources/img/common/history-img2.png (Binary) (added)

+++ resources/img/common/history-img2.png

Binary file is not shown

69a148e

resources/img/common/history-img31.png (Binary) (added)

+++ resources/img/common/history-img31.png

Binary file is not shown

69a148e

resources/img/common/history-img32.png (Binary) (added)

+++ resources/img/common/history-img32.png

Binary file is not shown

69a148e

resources/img/common/history-img33.png (Binary) (added)

+++ resources/img/common/history-img33.png

Binary file is not shown

69a148e

resources/img/common/history-img4.png (Binary) (added)

+++ resources/img/common/history-img4.png

Binary file is not shown

69a148e

resources/img/common/history-img51.png (Binary) (added)

+++ resources/img/common/history-img51.png

Binary file is not shown

69a148e

resources/img/common/history-img52.png (Binary) (added)

+++ resources/img/common/history-img52.png

Binary file is not shown

69a148e

resources/img/common/history-img6.png (Binary) (added)

+++ resources/img/common/history-img6.png

Binary file is not shown

69a148e

resources/img/common/history-img71.png (Binary) (added)

+++ resources/img/common/history-img71.png

Binary file is not shown

69a148e

resources/img/common/history-img72.png (Binary) (added)

+++ resources/img/common/history-img72.png

Binary file is not shown

69a148e

resources/img/common/history-img8.png (Binary) (added)

+++ resources/img/common/history-img8.png

Binary file is not shown

69a148e

resources/img/common/history-img9.png (Binary) (added)

+++ resources/img/common/history-img9.png

Binary file is not shown

69a148e

resources/img/common/marketing-bg.png (Binary) (added)

+++ resources/img/common/marketing-bg.png

Binary file is not shown

69a148e

resources/img/common/marketing-icon.png (Binary) (added)

+++ resources/img/common/marketing-icon.png

Binary file is not shown

69a148e

resources/img/common/marketing-img01.png (Binary) (added)

+++ resources/img/common/marketing-img01.png

Binary file is not shown

69a148e

resources/img/common/marketing-img02.png (Binary) (added)

+++ resources/img/common/marketing-img02.png

Binary file is not shown

69a148e

resources/img/common/marketing-img03.png (Binary) (added)

+++ resources/img/common/marketing-img03.png

Binary file is not shown

69a148e

resources/img/common/marketing-img04.png (Binary) (added)

+++ resources/img/common/marketing-img04.png

Binary file is not shown

69a148e

resources/img/common/marketing-img05.png (Binary) (added)

+++ resources/img/common/marketing-img05.png

Binary file is not shown

69a148e

resources/img/common/marketing-img06.png (Binary) (added)

+++ resources/img/common/marketing-img06.png

Binary file is not shown

69a148e

resources/img/common/meta-icon.png (Binary) (added)

+++ resources/img/common/meta-icon.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

resources/img/common/meta-img02.png (Binary) (added)

+++ resources/img/common/meta-img02.png

Binary file is not shown

69a148e

resources/img/common/smart-icon.png (Binary) (added)

+++ resources/img/common/smart-icon.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

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

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

Binary file is not shown

69a148e

resources/img/common/traffic-icon.png (Binary) (added)

+++ resources/img/common/traffic-icon.png

Binary file is not shown

69a148e

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

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

Binary file is not shown

9f39c7e

69a148e

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


             <nav>
                 <ul>
                     <li>
-                        <a href="#">About Us</a>
+                        <a href="../../views/pages/AboutUs.html">About Us</a>
                       
                     </li>
                     <li><a href="../../views/pages/Solution.html">Solution</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>
+                            <li><a href="../../views/pages/Customized.html">Customized Consulting</a></li>
+                            <li><a href="../../views/pages/Etc.html">ETC</a></li>
                         </ul>
                     </li>
-                    <li><a href="#">Marketing</a></li>
+                    <li><a href="../../views/pages/Marketing.html">Marketing</a></li>
                 </ul>
             </nav>
         </div>
     </div>
 </body>
+<script>
+    $('nav ul li').click(function(){
+        $('nav ul li').addClass('on');
+        console.log('클릭되었습니다');
+    });
+</script>
 <style>
     #header {
         background-color: transparent;

         color: #ffffff;
         text-decoration: none;
     }
+    nav ul li{
+    }
+    nav ul li.on{ color: #213F99;}
 </style>
 
 </html>

9f39c7e

69a148e

views/layout/footer.html

--- views/layout/footer.html

+++ views/layout/footer.html

...	...	@@ -4,23 +4,29 @@
4	4	<body>
5	5	<footer>
6	6	<div class="footer-wrap">
7		- <div class="footer-img mb20">
	7	+ <div class="footer-img mb10">
8	8	<img src="../../resources/img/component/logo-w.png" alt="">
9	9	</div>
	10	+ <hr>
	11	+ <div class="footer-text pt10">
	12	+ <div class="flex justify-between ">
10	13
11		- <div class="footer-text">
12		- <p>대표자 ) 임상현</p>
13		- <p>FAX ) 053-811-1701</p>
14		- <p>주소 ) 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 218호</p>
15		- <p>대표메일 ) [email protected]</p>
16		- <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
	14	+ <p>대표자 ) 임상현</p>
	15	+ <p>FAX ) 053-811-1701</p>
	16	+ </div>
	17	+ <div class="flex justify-between">
	18	+ <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
	19	+ <p>대표메일 ) [email protected]</p>
	20	+ </div>
	21	+ <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	22	+ <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
17	23	</div>
18	24	<p class="copyright">© 2021.Takensoft.all rights reserved.</p>
19	25	</div>
20	26	</footer>
21	27	</body>
22	28	<style>
23		-
	29	+ /*
24	30	footer {
25	31	background-color: #1e1e1e;
26	32	height: calc(100vh - 919px);
...	...	@@ -55,7 +61,7 @@
55	61	text-align: center;
56	62	color: white;
57	63
58		- }
	64	+ } */
59	65	</style>
60	66
61	67	</html> (파일 끝에 줄바꿈 문자 없음)

9f39c7e

69a148e

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html

...	...	@@ -1,0 +1,667 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+
	4	+<head>
	5	+ <meta charset="UTF-8">
	6	+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	+ <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	+ <link rel="stylesheet" href="../../resources/css/reset.css">
	11	+ <link rel="stylesheet" href="../../resources/css/style.css">
	12	+ <link rel="stylesheet" href="../../resources/css/component.css">
	13	+ <link rel="stylesheet" href="../../resources/css/common.css">
	14	+ <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	+
	16	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	+
	18	+
	19	+
	20	+ <title>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+ <div class="swiper mySwiper">
	26	+ <div class="swiper-wrapper">
	27	+ <div class="swiper-slide about-wrapper">
	28	+ <div class="about-wrap slide-wrap ">
	29	+ <div class="text-area flex">
	30	+ <div class="about-title mb90" style="width: 100%;">
	31	+ <p class="mb20">ABOUT US</p>
	32	+ <p class="mb20">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
	33	+ </div>
	34	+
	35	+ <div class=" flex justify-center " style="width: 100%; gap: 190px; margin-bottom: 50px;">
	36	+ <div class="about-radius-left ">
	37	+ <p class="about-text">공감</p>
	38	+ <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
	39	+ </div>
	40	+ <div class="about-radius">
	41	+ <p class="about-text">구현</p>
	42	+ <p class="about-sub-text">가치를 주는 솔루션 도출</p>
	43	+ </div>
	44	+
	45	+ <div class="about-radius-right ">
	46	+ <p class="about-text">생각</p>
	47	+ <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
	48	+ </div>
	49	+ </div>
	50	+ <div class="flex justify-center " style="width: 100%;gap: 188px;">
	51	+ <div class="about-radius-bottom-left ">
	52	+ <p class="about-text">검증</p>
	53	+ <p class="about-sub-text">결과물의 철저한 검증</p>
	54	+ </div>
	55	+ <div class="about-radius-bottom-right ">
	56	+ <p class="about-text">소통</p>
	57	+ <p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
	58	+ </div>
	59	+
	60	+ </div>
	61	+ </div>
	62	+ </div>
	63	+ </div>
	64	+ <div class="swiper-slide">
	65	+ <div class="taken-wrap slide-wrap ">
	66	+ <div class="text-area flex">
	67	+ <div class="about-title mb20" style="width: 100%;">
	68	+ <p class="mb20">Business</p>
	69	+ <p class="mb20">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로 해결합니다.</p>
	70	+ </div>
	71	+ <div class="container">
	72	+ <div class="accordion"
	73	+ style="background-image: url(../../resources/img/common/about-img1.png);">
	74	+ <div class="slideText pl20">
	75	+ <p class="accordion-num"><span>01.</span> AI Solution</p>
	76	+ <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
	77	+ </div>
	78	+ <div class="slideImg">
	79	+ <img src="../../resources/img/common/about-img-db.png" alt="">
	80	+ </div>
	81	+ <div class="slideTextDtail">
	82	+ <div>
	83	+ <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
	84	+ <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
	85	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
	86	+ 통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
	87	+ </div>
	88	+ <div class=" flex justify-between" style="flex-wrap: nowrap;">
	89	+ <div style="width: 20%;">
	90	+ <p>[대표사례]</p>
	91	+ </div>
	92	+ <div class=" flex justify-between accordion-box">
	93	+ <p>·도로 위험 감지 시스템</p>
	94	+ <p>·경로 최적화 서비스</p>
	95	+ <p>·안개 감지 시스템</p>
	96	+ <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
	97	+ </div>
	98	+ </div>
	99	+ </div>
	100	+
	101	+
	102	+ </div>
	103	+ <div class="accordion "
	104	+ style="background-image: url(../../resources/img/common/about-img2.png);">
	105	+ <div class="slideText pl20">
	106	+ <p class="accordion-num"><span>02.</span> System Design</p>
	107	+ <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
	108	+ </div>
	109	+ <div class="slideImg">
	110	+ <img src="../../resources/img/common/about-img-bg02.png" alt="">
	111	+ </div>
	112	+ <div class="slideTextDtail">
	113	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
	114	+ 통해 고객사 최적화 UI 도출 </p>
	115	+ <div class=" flex justify-start" style="flex-wrap: nowrap;">
	116	+ <div style="width: 20%;">
	117	+ <p>[대표사례]</p>
	118	+ </div>
	119	+ <div class="flex-column">
	120	+ <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
	121	+ <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
	122	+ <p>· 경로 최적화 서비스</p>
	123	+ <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
	124	+ </div>
	125	+ </div>
	126	+ </div>
	127	+ </div>
	128	+ <div class="accordion"
	129	+ style="background-image: url(../../resources/img/common/about-img3.png);">
	130	+ <div class="slideText pl20">
	131	+ <p class="accordion-num"><span>03.</span> Data Science </p>
	132	+ <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
	133	+ </div>
	134	+ <div class="slideImg">
	135	+ <img src="../../resources/img/common/about-img-bg03.png" alt="">
	136	+ </div>
	137	+ <div class="slideTextDtail">
	138	+ <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
	139	+ <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
	140	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
	141	+ 수요기관 및 기업 확장
	142	+ </p>
	143	+ <div class=" flex justify-start" style="flex-wrap: nowrap;">
	144	+ <div style="width: 20%;">
	145	+ <p>[대표사례]</p>
	146	+ </div>
	147	+ <div class="flex-column">
	148	+ <p>· 데이터 품질관리 컨설팅</p>
	149	+ <p>· AI 안전통합 횡단보도 플랫폼</p>
	150	+ </div>
	151	+ </div>
	152	+ </div>
	153	+ </div>
	154	+
	155	+
	156	+ </div>
	157	+ </div>
	158	+ </div>
	159	+
	160	+
	161	+ </div>
	162	+ <div class="swiper-slide">
	163	+ <div class="taken-wrap slide-wrap ">
	164	+ <div class="text-area flex">
	165	+ <div class="about-title mb20" style="width: 100%;">
	166	+ <p class="mb20">Vision</p>
	167	+ <p class="mb20">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및 매출을 확대해 나갑니다.
	168	+ </p>
	169	+ </div>
	170	+ </div>
	171	+ <div class="flex justify-center about-vision-box">
	172	+ <img src="../../resources/img/common/about-img5.png" alt="">
	173	+ <img src="../../resources/img/common/about-img4.png" alt="">
	174	+ </div>
	175	+ </div>
	176	+ </div>
	177	+ <div class="swiper-slide">
	178	+ <div class="taken-wrap slide-wrap history-wrap">
	179	+ <div class="text-area felx">
	180	+ <div class="about-title mt90 mb40" style="width: 100%; height: 60px;">
	181	+ <p>History</p>
	182	+ </div>
	183	+ <div class="timeline flex align-center justify-between" style="gap: 0px;">
	184	+ <div class="years" id="years">
	185	+ <div class="year active-year" data-year="2021">2020</div>
	186	+ <div class="year" data-year="2022">2021</div>
	187	+ <div class="year" data-year="2023">2022</div>
	188	+ <!-- 더 많은 년도 추가 -->
	189	+ </div>
	190	+ <div class="contents" id="contents">
	191	+ <div class="content" data-year="2021">
	192	+ <div class="flex">
	193	+ <p class="month mr30">5월</p>
	194	+ <div class="month-text" style="text-align: left;">
	195	+ <p>· 주식회사 테이큰 소프트 설립</p>
	196	+ <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
	197	+
	198	+ </div>
	199	+ </div>
	200	+ <div class="flex">
	201	+ <p class="month mr30">10월</p>
	202	+ <div class="month-text" style="text-align: left;">
	203	+ <p>· 소프트웨어 기업 등록</p>
	204	+ <img src="../../resources/img/common/history-img1.png" alt="">
	205	+ </div>
	206	+ </div>
	207	+ <div class="flex">
	208	+ <p class="month mr30">11월</p>
	209	+ <div class="month-text" style="text-align: left;">
	210	+ <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
	211	+ <p>· Taken BI Manager v1.0 저작권 등록</p>
	212	+ <img src="../../resources/img/common/history-img2.png" alt="">
	213	+ </div>
	214	+ </div>
	215	+ <div class="flex">
	216	+ <p class="month mr30">12월</p>
	217	+ <div class="month-text" style="text-align: left;">
	218	+ <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
	219	+ <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
	220	+ <p>· 도로 모니터링 시스템 저작권 등록</p>
	221	+ <div class="flex">
	222	+ <img src="../../resources/img/common/history-img31.png" alt="">
	223	+ <img src="../../resources/img/common/history-img32.png" alt="">
	224	+ <img src="../../resources/img/common/history-img33.png" alt="">
	225	+ </div>
	226	+ </div>
	227	+ </div>
	228	+
	229	+
	230	+ </div>
	231	+ <div class="content" data-year="2022">
	232	+ <!-- 2021년 내용 -->
	233	+ <div class="flex">
	234	+ <p class="month mr30">1월</p>
	235	+ <div class="month-text" style="text-align: left;">
	236	+ <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
	237	+ </div>
	238	+ </div>
	239	+ <div class="flex">
	240	+ <p class="month mr30">3월</p>
	241	+ <div class="month-text" style="text-align: left;">
	242	+ <p>· 기업부설연구소 설립</p>
	243	+ </div>
	244	+ </div>
	245	+ <div class="flex">
	246	+ <p class="month mr30">4월</p>
	247	+ <div class="month-text" style="text-align: left;">
	248	+ <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
	249	+ </div>
	250	+ </div>
	251	+ <div class="flex">
	252	+ <p class="month mr30">5월</p>
	253	+ <div class="month-text" style="text-align: left;">
	254	+ <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
	255	+ <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
	256	+ </div>
	257	+ </div>
	258	+ <div class="flex">
	259	+ <p class="month mr30">7월</p>
	260	+ <div class="month-text" style="text-align: left;">
	261	+ <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
	262	+ </div>
	263	+ </div>
	264	+ <div class="flex">
	265	+ <p class="month mr30">9월</p>
	266	+ <div class="month-text" style="text-align: left;">
	267	+ <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
	268	+ </div>
	269	+ </div>
	270	+ <div class="flex">
	271	+ <p class="month mr30">10월</p>
	272	+ <div class="month-text" style="text-align: left;">
	273	+ <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
	274	+ </div>
	275	+ </div>
	276	+ <div class="flex">
	277	+ <p class="month mr30">12월</p>
	278	+ <div class="month-text" style="text-align: left;">
	279	+ <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
	280	+ <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
	281	+ <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
	282	+ <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p>
	283	+ <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
	284	+ <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
	285	+ <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
	286	+ <p>· 경로 생성 기술 관련 출원사실증명 </p>
	287	+ <img src="../../resources/img/common/history-img4.png" alt="">
	288	+
	289	+ </div>
	290	+ </div>
	291	+
	292	+ </div>
	293	+ <div class="content" data-year="2023">
	294	+ <!-- 2022년 내용 -->
	295	+ <div class="flex">
	296	+ <p class="month mr30">1월</p>
	297	+ <div class="month-text" style="text-align: left;">
	298	+ <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
	299	+ <p>· 복약지도 장치 및 방법 출원사실증명 </p>
	300	+ <p>· Traffic Agent 저작권 등록 </p>
	301	+
	302	+ <div class="flex">
	303	+ <img src="../../resources/img/common/history-img51.png" alt="">
	304	+ <img src="../../resources/img/common/history-img52.png" alt="">
	305	+ </div>
	306	+
	307	+ </div>
	308	+ </div>
	309	+ <div class="flex">
	310	+ <p class="month mr30">2월</p>
	311	+ <div class="month-text" style="text-align: left;">
	312	+ <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
	313	+ <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
	314	+ </div>
	315	+ </div>
	316	+ <div class="flex">
	317	+ <p class="month mr30">3월</p>
	318	+ <div class="month-text" style="text-align: left;">
	319	+ <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
	320	+ </div>
	321	+ </div>
	322	+ <div class="flex">
	323	+ <p class="month mr30">4월</p>
	324	+ <div class="month-text" style="text-align: left;">
	325	+ <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
	326	+ <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
	327	+ <p>· 기업부설연구소 인정서 획득 </p>
	328	+ <img src="../../resources/img/common/history-img6.png" alt="">
	329	+
	330	+ </div>
	331	+ </div>
	332	+ <div class="flex">
	333	+ <p class="month mr30">5월</p>
	334	+ <div style="text-align: left;">
	335	+ <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
	336	+ </div>
	337	+ </div>
	338	+ <div class="flex">
	339	+ <p class="month mr30">6월</p>
	340	+ <div class="month-text" style="text-align: left;">
	341	+ <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
	342	+ <div class="flex">
	343	+ <img src="../../resources/img/common/history-img71.png" alt="">
	344	+ <img src="../../resources/img/common/history-img72.png" alt="">
	345	+ </div>
	346	+ </div>
	347	+ </div>
	348	+ <div class="flex">
	349	+ <p class="month mr30">7월</p>
	350	+ <div class="month-text" style="text-align: left;">
	351	+ <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
	352	+ <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
	353	+ </div>
	354	+ </div>
	355	+ <div class="flex">
	356	+ <p class="month mr30">8월</p>
	357	+ <div class="month-text" style="text-align: left;">
	358	+ <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	359	+ <p>· 메타버스 기술 관련 출원사실증명</p>
	360	+ <img src="../../resources/img/common/history-img8.png" alt="">
	361	+ </div>
	362	+ </div>
	363	+ <div class="flex">
	364	+ <p class="month mr30">9월</p>
	365	+ <div class="month-text" style="text-align: left;">
	366	+ <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
	367	+ <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	368	+ <p>· 시니어 케어 시스템 저작권 등록</p>
	369	+ <img src="../../resources/img/common/history-img9.png" alt="">
	370	+
	371	+ </div>
	372	+ </div>
	373	+ <div class="flex">
	374	+ <p class="month mr30">11월</p>
	375	+ <div class="month-text" style="text-align: left;">
	376	+ <p>· 한기술평가 우수기업 인증 (T-5)</p>
	377	+ <p>· 통합 모빌리티 솔루션 저작권 등록</p>
	378	+ <div class="flex">
	379	+ <img src="../../resources/img/common/history-img100.png" alt="">
	380	+ <img src="../../resources/img/common/history-img101.png" alt="">
	381	+ </div>
	382	+ </div>
	383	+ </div>
	384	+ <div class="flex">
	385	+ <p class="month mr30">12월</p>
	386	+ <div class="month-text" style="text-align: left;">
	387	+ <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
	388	+ <p>· 구미시 키워드 분석 용역 (구미시)</p>
	389	+ <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
	390	+ <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
	391	+ <p>· AI 횡단보도 기술 관련 출원사실증명</p>
	392	+ <img src="../../resources/img/common/history-img110.png" alt="">
	393	+
	394	+
	395	+ </div>
	396	+ </div>
	397	+ </div>
	398	+ <!-- 더 많은 내용 추가 -->
	399	+ </div>
	400	+ </div>
	401	+ </div>
	402	+ </div>
	403	+ </div>
	404	+
	405	+
	406	+ </div>
	407	+ <footer id="footer">
	408	+ 여기는 푸터 내용입니다.
	409	+ </footer>
	410	+ </div>
	411	+
	412	+
	413	+
	414	+
	415	+
	416	+
	417	+</body>
	418	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	419	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	420	+
	421	+
	422	+<script>
	423	+
	424	+ document.addEventListener('DOMContentLoaded', function () {
	425	+ const years = document.querySelectorAll('.year');
	426	+ const contents = document.querySelector('.contents');
	427	+ const contentItems = document.querySelectorAll('.content');
	428	+
	429	+ function updateActiveYear(visibleYear = '2020') {
	430	+ years.forEach((year) => {
	431	+ if (year.getAttribute('data-year') === visibleYear) {
	432	+ year.classList.add('active-year');
	433	+ } else {
	434	+ year.classList.remove('active-year');
	435	+ }
	436	+ });
	437	+ }
	438	+
	439	+ contents.addEventListener('scroll', function () {
	440	+ let visibleYear = '';
	441	+ contentItems.forEach((item) => {
	442	+ const itemTop = item.offsetTop;
	443	+ const itemHeight = item.clientHeight;
	444	+ if (contents.scrollTop >= itemTop - 20 && contents.scrollTop < itemTop + itemHeight) {
	445	+ visibleYear = item.getAttribute('data-year');
	446	+ }
	447	+ });
	448	+
	449	+ if (visibleYear) {
	450	+ updateActiveYear(visibleYear);
	451	+ }
	452	+ });
	453	+
	454	+ // 초기 활성 연도 설정을 위한 코드 추가
	455	+ const initialYearElement = Array.from(years).find(year => year.getAttribute('data-year') === '2020');
	456	+ if (initialYearElement) {
	457	+ updateActiveYear('2020');
	458	+ } else {
	459	+ // console.error('2020년에 해당하는 요소를 찾을 수 없습니다.');
	460	+ }
	461	+ });
	462	+ $(document).ready(function () {
	463	+ $("#btnHeadquarter").click(function () {
	464	+ $("#btnHeadquarter").addClass('on');
	465	+ $("#btnDaeguBranch").removeClass('on');
	466	+ $("#contentDaeguBranch").hide();
	467	+
	468	+ $("#contentHeadquarter").show();
	469	+ });
	470	+
	471	+ $("#btnDaeguBranch").click(function () {
	472	+ $("#btnDaeguBranch").addClass('on');
	473	+ $("#btnHeadquarter").removeClass('on');
	474	+
	475	+ $("#contentHeadquarter").hide();
	476	+
	477	+ $("#contentDaeguBranch").show();
	478	+
	479	+
	480	+
	481	+
	482	+
	483	+ });
	484	+ });
	485	+
	486	+
	487	+ function slidesPlugin(activeSlide = 0) {
	488	+ const slides = document.querySelectorAll('.accordion');
	489	+ let previousSlide = slides[activeSlide];
	490	+
	491	+ previousSlide.classList.add('active');
	492	+ swapImage(previousSlide);
	493	+
	494	+ slides.forEach((slide) => {
	495	+ slide.addEventListener('click', () => {
	496	+ if (slide !== previousSlide) {
	497	+ clearActiveClasses();
	498	+ swapImage(previousSlide);
	499	+ slide.classList.add('active');
	500	+ swapImage(slide);
	501	+ previousSlide = slide;
	502	+
	503	+ }
	504	+
	505	+ });
	506	+ });
	507	+
	508	+ function clearActiveClasses() {
	509	+ slides.forEach((slide) => {
	510	+ slide.classList.remove('active');
	511	+ });
	512	+ }
	513	+
	514	+ function swapImage(slide) {
	515	+ const slideImg = slide.querySelector('.accordion img');
	516	+ const bgImg = slide.style.backgroundImage;
	517	+
	518	+ slide.style.backgroundImage = `url(${slideImg.src})`;
	519	+ slideImg.src = bgImg.slice(5, -2);
	520	+ }
	521	+ }
	522	+
	523	+
	524	+ slidesPlugin();
	525	+ // 마우스 휠을 비활성화할 영역 선택
	526	+ var targetArea = document.querySelector('.contents');
	527	+
	528	+ // 선택된 영역을 콘솔에 출력
	529	+ console.log(targetArea);
	530	+ var swiper = new Swiper(".mySwiper", {
	531	+ direction: "vertical",
	532	+ slidesPerView: 1,
	533	+ spaceBetween: 30,
	534	+ mousewheel: {
	535	+ releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
	536	+ },
	537	+ on: {
	538	+
	539	+ slideChange: function () {
	540	+ var currentIndex = this.realIndex;
	541	+ var lastIndex = this.slides.length - 1;
	542	+ console.log("현재 슬라이드 인덱스:", currentIndex, "마지막 슬라이드 인덱스:", lastIndex);
	543	+
	544	+ if (currentIndex === 0) {
	545	+ $('#header').removeClass('active');
	546	+ } else {
	547	+ $('#header').addClass('active');
	548	+ }
	549	+
	550	+ if (currentIndex === lastIndex) {
	551	+ // 마지막 슬라이드에 도달했을 때
	552	+ $('#footer').removeClass('show');
	553	+
	554	+ $('.history-wrap').addClass('show-footer'); // 하단 마진 추가
	555	+ } else {
	556	+ // 그 외의 경우
	557	+ $('.swiper-container').removeClass('show-footer'); // 하단 마진 제거
	558	+ }
	559	+ },
	560	+ }
	561	+ });
	562	+ // 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화
	563	+ targetArea.addEventListener('mouseenter', function () {
	564	+ swiper.mousewheel.disable();
	565	+ });
	566	+
	567	+ // 마우스가 지정된 영역을 벗어날 때 마우스 휠 활성화
	568	+ targetArea.addEventListener('mouseleave', function () {
	569	+ swiper.mousewheel.enable();
	570	+ });
	571	+ $(function () {
	572	+ $("#header").load("../layout/Header.html");
	573	+ $("#footer").load("../layout/footer.html");
	574	+ $("#footer").hide();
	575	+
	576	+ });
	577	+
	578	+
	579	+</script>
	580	+
	581	+
	582	+
	583	+
	584	+<style scoped>
	585	+ /* 스크롤바 없애기 */
	586	+ body {
	587	+ -ms-overflow-style: none;
	588	+ /* 인터넷 익스플로러 */
	589	+ scrollbar-width: none;
	590	+ /* 파이어폭스 */
	591	+ }
	592	+
	593	+ ::-webkit-scrollbar {
	594	+ display: none;
	595	+ }
	596	+
	597	+ #header {
	598	+ position: fixed;
	599	+ top: 0;
	600	+ z-index: 3;
	601	+ border-bottom: 1px solid #ced4da;
	602	+ background-color: white;
	603	+ }
	604	+
	605	+ #header .header .logo {
	606	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	607	+ width: 200px;
	608	+ background-size: contain;
	609	+ height: 25px;
	610	+
	611	+
	612	+ }
	613	+
	614	+ #header .header nav li a {
	615	+ color: #333;
	616	+
	617	+ }
	618	+
	619	+
	620	+
	621	+ html,
	622	+ body {
	623	+ position: relative;
	624	+ height: 100%;
	625	+ }
	626	+
	627	+ body {
	628	+ background: #eee;
	629	+ font-family: 'Pretendard';
	630	+ font-size: 14px;
	631	+ color: #000;
	632	+ margin: 0;
	633	+ padding: 0;
	634	+ }
	635	+
	636	+ .swiper {
	637	+ width: 100%;
	638	+ height: 100%;
	639	+ }
	640	+
	641	+ .swiper-slide {
	642	+ text-align: center;
	643	+ font-size: 18px;
	644	+ display: flex;
	645	+ height: 100%;
	646	+ position: relative;
	647	+ justify-content: center;
	648	+ align-items: center;
	649	+ background-color: #fff;
	650	+ }
	651	+
	652	+ .swiper-slide img {
	653	+ /* height: 356px; */
	654	+ display: block;
	655	+ object-fit: cover;
	656	+ }
	657	+
	658	+ .container {
	659	+ width: 1200px;
	660	+ display: flex;
	661	+ flex-wrap: nowrap;
	662	+ border-radius: 20px;
	663	+ overflow: hidden;
	664	+ }
	665	+</style>
	666	+
	667	+</html> (파일 끝에 줄바꿈 문자 없음)

69a148e

views/pages/Customized.html (added)

+++ views/pages/Customized.html

...	...	@@ -0,0 +1,188 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+
	4	+<head>
	5	+ <meta charset="UTF-8">
	6	+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	+ <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	+ <link rel="stylesheet" href="../../resources/css/reset.css">
	11	+ <link rel="stylesheet" href="../../resources/css/style.css">
	12	+ <link rel="stylesheet" href="../../resources/css/component.css">
	13	+ <link rel="stylesheet" href="../../resources/css/common.css">
	14	+ <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	+
	16	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	+
	18	+
	19	+
	20	+ <title>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+ <div class="taken-wrap " style=" height: 100%;">
	26	+
	27	+ <div class="text-area flex align-center">
	28	+
	29	+ <div class="flex justify-between" style="gap: 10px; width: 100%;">
	30	+ <div class="customized-wrap-title mb30">
	31	+ <h1 class="mb20">고객을 만족시키는 맞춤형 컨설팅</h1>
	32	+ <p>각 산업 영역에 대한 품부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에 따라 최적화된 방법론을 적용하여 고객의 Vision을 실현 시킵니다.</p>
	33	+ </div>
	34	+ <div class="flex justify-between customized-box" style="width: 100%;">
	35	+ <div>
	36	+ <div class="mb20">
	37	+ <img src="../../resources/img/common/custom-img.png" alt="">
	38	+ </div>
	39	+ <div>
	40	+ <p>상주시 데이터 활용 <br>기본계획 수립</p>
	41	+ </div>
	42	+ </div>
	43	+ <div>
	44	+ <div class="mb20">
	45	+ <img src="../../resources/img/common/custom-img2.png" alt="">
	46	+ </div>
	47	+ <div>
	48	+ <p>영천시 데이터 활용 <br>기본계획 수립</p>
	49	+ </div>
	50	+ </div>
	51	+ <div>
	52	+ <div class="mb20">
	53	+ <img src="../../resources/img/common/custom-img3.png" alt="">
	54	+ </div>
	55	+ <div>
	56	+ <p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
	57	+ </div>
	58	+ </div>
	59	+ <div>
	60	+ <div class="mb20">
	61	+ <img src="../../resources/img/common/custom-img4.png" alt="">
	62	+ </div>
	63	+ <div>
	64	+ <p>영천시 공공데이터 <br>품질관리</p>
	65	+ </div>
	66	+ </div>
	67	+ </div>
	68	+ </div>
	69	+
	70	+ </div>
	71	+ </div>
	72	+ <div id="footer"></div>
	73	+
	74	+</body>
	75	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	76	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	77	+<script>
	78	+
	79	+ $(document).ready(function () {
	80	+ $("#btnHeadquarter").click(function () {
	81	+ $("#btnHeadquarter").addClass('on');
	82	+ $("#btnDaeguBranch").removeClass('on');
	83	+ $("#contentDaeguBranch").hide();
	84	+
	85	+ $("#contentHeadquarter").show();
	86	+ });
	87	+
	88	+ $("#btnDaeguBranch").click(function () {
	89	+ $("#btnDaeguBranch").addClass('on');
	90	+ $("#btnHeadquarter").removeClass('on');
	91	+
	92	+ $("#contentHeadquarter").hide();
	93	+
	94	+ $("#contentDaeguBranch").show();
	95	+
	96	+
	97	+
	98	+
	99	+
	100	+ });
	101	+ });
	102	+
	103	+
	104	+
	105	+ $(function () {
	106	+ $("#header").load("../layout/Header.html");
	107	+ $("#footer").load("../layout/footer.html");
	108	+ $("#footer").show();
	109	+
	110	+ });
	111	+
	112	+</script>
	113	+
	114	+<style scoped>
	115	+ /* 스크롤바 없애기 */
	116	+ body {
	117	+ -ms-overflow-style: none;
	118	+ /* 인터넷 익스플로러 */
	119	+ scrollbar-width: none;
	120	+ /* 파이어폭스 */
	121	+ }
	122	+
	123	+ ::-webkit-scrollbar {
	124	+ display: none;
	125	+ }
	126	+
	127	+ #header {
	128	+ position: fixed;
	129	+ top: 0;
	130	+ z-index: 3;
	131	+ border-bottom: 1px solid #ced4da;
	132	+ background-color: white;
	133	+ }
	134	+
	135	+ #header .header .logo {
	136	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	137	+ width: 200px;
	138	+ background-size: contain;
	139	+ height: 25px;
	140	+
	141	+
	142	+ }
	143	+
	144	+ #header .header nav li a {
	145	+ color: #333;
	146	+
	147	+ }
	148	+
	149	+
	150	+
	151	+ html,
	152	+ body {
	153	+ position: relative;
	154	+ height: 100%;
	155	+
	156	+ }
	157	+
	158	+ body {
	159	+ background: #fff;
	160	+ font-family: 'Pretendard';
	161	+ font-size: 14px;
	162	+ color: #000;
	163	+ margin: 0;
	164	+ padding: 0;
	165	+ }
	166	+
	167	+ .swiper {
	168	+ width: 100%;
	169	+ height: 100%;
	170	+ }
	171	+
	172	+ .swiper-slide {
	173	+ text-align: center;
	174	+ font-size: 18px;
	175	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	176	+ display: flex;
	177	+ justify-content: center;
	178	+ align-items: center;
	179	+ }
	180	+
	181	+ .swiper-slide img {
	182	+ height: 356px;
	183	+ display: block;
	184	+ object-fit: cover;
	185	+ }
	186	+</style>
	187	+
	188	+</html>(파일 끝에 줄바꿈 문자 없음)

69a148e

views/pages/Etc.html (added)

+++ views/pages/Etc.html

...	...	@@ -0,0 +1,181 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+
	4	+<head>
	5	+ <meta charset="UTF-8">
	6	+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	+ <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	+ <link rel="stylesheet" href="../../resources/css/reset.css">
	11	+ <link rel="stylesheet" href="../../resources/css/style.css">
	12	+ <link rel="stylesheet" href="../../resources/css/component.css">
	13	+ <link rel="stylesheet" href="../../resources/css/common.css">
	14	+ <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	+
	16	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	+
	18	+
	19	+
	20	+ <title>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+ <div class="taken-wrap " style=" height: 100%;">
	26	+
	27	+ <div class="text-area flex align-center">
	28	+
	29	+ <div class="flex justify-between" style="gap: 10px; width: 100%;">
	30	+ <div class="etc-wrap-title mb30">
	31	+ <h1 class="mb20">기타사례</h1>
	32	+ </div>
	33	+ <div class="flex justify-between" style="width: 100%; gap: 20px;">
	34	+ <div class="etc-box">
	35	+ <div class="mb20">
	36	+ <img src="../../resources/img/common/etc-img.png" alt="">
	37	+ </div>
	38	+ <div class="etc-box-title">
	39	+ <p>정부혁신 웹사이트 기능개선 및 유지관리</p>
	40	+ </div>
	41	+ <div style="text-align: left;">
	42	+ <p>- 혁신24 웹사이트 UI/UX 개선 및 검색 알고리즘 기능 개선 등을 통한 유지관리</p>
	43	+ <p>- 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
	44	+ <p>- 홈페이지 검색 기능 강화와 직관적인 UI/UX 디자인을 적용하여 정보 접근성 개선</p>
	45	+ </div>
	46	+ </div>
	47	+ <div class="etc-box">
	48	+ <div class="mb20">
	49	+ <img src="../../resources/img/common/etc-img2.png" alt="">
	50	+ </div>
	51	+ <div class="etc-box-title">
	52	+ <p>AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
	53	+ </div>
	54	+ <div style="text-align: left;">
	55	+ <p>- AI</p>
	56	+ <p>- 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
	57	+ </div>
	58	+ </div>
	59	+
	60	+ </div>
	61	+ </div>
	62	+
	63	+ </div>
	64	+ </div>
	65	+ <div id="footer"></div>
	66	+
	67	+</body>
	68	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	69	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	70	+<script>
	71	+
	72	+ $(document).ready(function () {
	73	+ $("#btnHeadquarter").click(function () {
	74	+ $("#btnHeadquarter").addClass('on');
	75	+ $("#btnDaeguBranch").removeClass('on');
	76	+ $("#contentDaeguBranch").hide();
	77	+
	78	+ $("#contentHeadquarter").show();
	79	+ });
	80	+
	81	+ $("#btnDaeguBranch").click(function () {
	82	+ $("#btnDaeguBranch").addClass('on');
	83	+ $("#btnHeadquarter").removeClass('on');
	84	+
	85	+ $("#contentHeadquarter").hide();
	86	+
	87	+ $("#contentDaeguBranch").show();
	88	+
	89	+
	90	+
	91	+
	92	+
	93	+ });
	94	+ });
	95	+
	96	+
	97	+
	98	+ $(function () {
	99	+ $("#header").load("../layout/Header.html");
	100	+ $("#footer").load("../layout/footer.html");
	101	+ $("#footer").show();
	102	+
	103	+ });
	104	+
	105	+</script>
	106	+
	107	+<style scoped>
	108	+ /* 스크롤바 없애기 */
	109	+ body {
	110	+ -ms-overflow-style: none;
	111	+ /* 인터넷 익스플로러 */
	112	+ scrollbar-width: none;
	113	+ /* 파이어폭스 */
	114	+ }
	115	+
	116	+ ::-webkit-scrollbar {
	117	+ display: none;
	118	+ }
	119	+
	120	+ #header {
	121	+ position: fixed;
	122	+ top: 0;
	123	+ z-index: 3;
	124	+ border-bottom: 1px solid #ced4da;
	125	+ background-color: white;
	126	+ }
	127	+
	128	+ #header .header .logo {
	129	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	130	+ width: 200px;
	131	+ background-size: contain;
	132	+ height: 25px;
	133	+
	134	+
	135	+ }
	136	+
	137	+ #header .header nav li a {
	138	+ color: #333;
	139	+
	140	+ }
	141	+
	142	+
	143	+
	144	+ html,
	145	+ body {
	146	+ position: relative;
	147	+ height: 100%;
	148	+
	149	+ }
	150	+
	151	+ body {
	152	+ background: #fff;
	153	+ font-family: 'Pretendard';
	154	+ font-size: 14px;
	155	+ color: #000;
	156	+ margin: 0;
	157	+ padding: 0;
	158	+ }
	159	+
	160	+ .swiper {
	161	+ width: 100%;
	162	+ height: 100%;
	163	+ }
	164	+
	165	+ .swiper-slide {
	166	+ text-align: center;
	167	+ font-size: 18px;
	168	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	169	+ display: flex;
	170	+ justify-content: center;
	171	+ align-items: center;
	172	+ }
	173	+
	174	+ .swiper-slide img {
	175	+ height: 356px;
	176	+ display: block;
	177	+ object-fit: cover;
	178	+ }
	179	+</style>
	180	+
	181	+</html>(파일 끝에 줄바꿈 문자 없음)

69a148e

views/pages/Marketing.html (added)

+++ views/pages/Marketing.html

...	...	@@ -0,0 +1,217 @@
	1	+<!DOCTYPE html>
	2	+<html lang="en">
	3	+
	4	+<head>
	5	+ <meta charset="UTF-8">
	6	+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
	7	+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	8	+ <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
	9	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	10	+ <link rel="stylesheet" href="../../resources/css/reset.css">
	11	+ <link rel="stylesheet" href="../../resources/css/style.css">
	12	+ <link rel="stylesheet" href="../../resources/css/component.css">
	13	+ <link rel="stylesheet" href="../../resources/css/common.css">
	14	+ <link rel="stylesheet" href="../../resources/css/responsive.css">
	15	+
	16	+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
	17	+
	18	+
	19	+
	20	+ <title>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+
	26	+ <div class=" marketing-wrapper pb100">
	27	+ <div class="marketing-wrap-title mb70">
	28	+ <h1>Marketing</h1>
	29	+ </div>
	30	+ <div class="marketing-area ">
	31	+ <div>
	32	+ <img src="../../resources/img/common/marketing-img01.png" alt="">
	33	+ <div>
	34	+ <p><span>영남일보</span> \| 최시옹 기자</p>
	35	+ <p class="marketing-title">경북대TP "未完·실패 아이템 재도전해요"</p>
	36	+ <p class="marketing-date">2023-10-25</p>
	37	+ </div>
	38	+ </div>
	39	+ <div>
	40	+ <img src="../../resources/img/common/marketing-img02.png" alt="">
	41	+ <div>
	42	+ <p><span>프라임경북뉴스</span> \| 김창식 기자</p>
	43	+ <p class="marketing-title">포항TP,‘메타버스 경북’프로젝트 성과 보고회 개최</p>
	44	+ <p class="marketing-date">2023-05-24</p>
	45	+ </div>
	46	+ </div>
	47	+ <div>
	48	+ <img src="../../resources/img/common/marketing-img03.png" alt="">
	49	+ <div>
	50	+ <p><span>데일리대구경북뉴스</span> \| 김형만 기자</p>
	51	+ <p class="marketing-title">‘대전환 시대, 인공지능으로 경북의 미래를 보다!’</p>
	52	+ <p class="marketing-date">2022-12-16</p>
	53	+ </div>
	54	+ </div>
	55	+ <div>
	56	+ <img src="../../resources/img/common/marketing-img04.png" alt="">
	57	+ <div>
	58	+ <p><span>아투시티뉴스</span> \| 최인호 기자</p>
	59	+ <p class="marketing-title">김천시, 잡(JOB)아 워크숍 및 취업특강 개최</p>
	60	+ <p class="marketing-date">2022-07-22</p>
	61	+ </div>
	62	+ </div>
	63	+ <div>
	64	+ <img src="../../resources/img/common/marketing-img04.png" alt="">
	65	+ <div>
	66	+ <p><span>데일리대구경북뉴스</span> \| 황지현 기자</p>
	67	+ <p class="marketing-title">김천시, AI ․ SW분야 기업과 구직자‘만남의 장’열어</p>
	68	+ <p class="marketing-date">2022-07-22</p>
	69	+ </div>
	70	+ </div>
	71	+ <div>
	72	+ <img src="../../resources/img/common/marketing-img05.png" alt="">
	73	+ <div>
	74	+ <p><span>매일신문</span> \| 정우태 기자</p>
	75	+ <p class="marketing-title">영남대창업보육센터 우수기업 4곳 높은 성과 성장세 두드러져</p>
	76	+ <p class="marketing-date">2023-10-22</p>
	77	+ </div>
	78	+ </div>
	79	+ <div>
	80	+ <img src="../../resources/img/common/marketing-img06.png" alt="">
	81	+ <div>
	82	+ <p><span>전자신문</span> \| 윤칠석 경북 IT융합산업기술원 원장</p>
	83	+ <p class="marketing-title">[기고]지역 중소기업 생존전략 '디지털 전환'</p>
	84	+ <p class="marketing-date">2023-09-12</p>
	85	+ </div>
	86	+ </div>
	87	+ </div>
	88	+ </div>
	89	+ <div id="footer">
	90	+
	91	+ </div>
	92	+
	93	+
	94	+
	95	+
	96	+
	97	+
	98	+</body>
	99	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	100	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	101	+
	102	+
	103	+<script>
	104	+ $(document).ready(function () {
	105	+ $("#btnHeadquarter").click(function () {
	106	+ $("#btnHeadquarter").addClass('on');
	107	+ $("#btnDaeguBranch").removeClass('on');
	108	+ $("#contentDaeguBranch").hide();
	109	+
	110	+ $("#contentHeadquarter").show();
	111	+ });
	112	+
	113	+ $("#btnDaeguBranch").click(function () {
	114	+ $("#btnDaeguBranch").addClass('on');
	115	+ $("#btnHeadquarter").removeClass('on');
	116	+
	117	+ $("#contentHeadquarter").hide();
	118	+
	119	+ $("#contentDaeguBranch").show();
	120	+
	121	+
	122	+
	123	+
	124	+
	125	+ });
	126	+ });
	127	+
	128	+
	129	+
	130	+ $(function () {
	131	+ $("#header").load("../layout/Header.html");
	132	+ $("#footer").load("../layout/footer.html");
	133	+ $("#footer").show();
	134	+
	135	+ });
	136	+
	137	+
	138	+</script>
	139	+
	140	+
	141	+
	142	+
	143	+<style scoped>
	144	+ /* 스크롤바 없애기 */
	145	+ body {
	146	+ -ms-overflow-style: none;
	147	+ /* 인터넷 익스플로러 */
	148	+ scrollbar-width: none;
	149	+ /* 파이어폭스 */
	150	+ }
	151	+
	152	+ ::-webkit-scrollbar {
	153	+ display: none;
	154	+ }
	155	+
	156	+ #header {
	157	+ position: fixed;
	158	+ top: 0;
	159	+ z-index: 3;
	160	+ border-bottom: 1px solid #ced4da;
	161	+ background-color: white;
	162	+ }
	163	+
	164	+ #header .header .logo {
	165	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	166	+ width: 200px;
	167	+ background-size: contain;
	168	+ height: 25px;
	169	+
	170	+
	171	+ }
	172	+
	173	+ #header .header nav li a {
	174	+ color: #333;
	175	+
	176	+ }
	177	+
	178	+
	179	+
	180	+ html,
	181	+ body {
	182	+ position: relative;
	183	+ height: 100%;
	184	+
	185	+ }
	186	+
	187	+ body {
	188	+ background: #eee;
	189	+ font-family: 'Pretendard';
	190	+ font-size: 14px;
	191	+ color: #000;
	192	+ margin: 0;
	193	+ padding: 0;
	194	+ }
	195	+
	196	+ .swiper {
	197	+ width: 100%;
	198	+ height: 100%;
	199	+ }
	200	+
	201	+ .swiper-slide {
	202	+ text-align: center;
	203	+ font-size: 18px;
	204	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	205	+ display: flex;
	206	+ justify-content: center;
	207	+ align-items: center;
	208	+ }
	209	+
	210	+ .swiper-slide img {
	211	+ height: 356px;
	212	+ display: block;
	213	+ object-fit: cover;
	214	+ }
	215	+</style>
	216	+
	217	+</html>(파일 끝에 줄바꿈 문자 없음)

9f39c7e

69a148e

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html


 
 
 
-    <title>Solution</title>
+    <title>TAKENSOFT</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 class="swiper-slide">
+                <div class="taken-wrap slide-wrap ">
+                    <div class="text-area flex">
+                        <div class="solution-title mb90">
+                            <p>Taken BI Manager v1.0</p>
                         </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 class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
+                                <img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
+                                <div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
+                                    <p>데이터 수집,저장,관리</p>
+                                    <p>솔루션 제공 기반 맞춤형 서비스</p>
+                                </div>
                             </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 class="taken-area taken-conteiner flex" style="gap: 20px;  height: 100%;">
+                                <div class="text-after">
+                                    <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
+                                    <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
+                                        서비스를 제공합니다.</p>
+                                    <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
+                                </div>
+                                <div class="solution-text-box">
+                                    <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 class="swiper-slide">
+                <div class="taken-wrap slide-wrap ">
+                    <div class="text-area flex">
+                        <div class="traffic-title mb50">
+                            <p>Traffic Agent</p>
+                        </div>
+                        <div class="flex justify-end traffic-button">
+                            <button>영상보기</button>
+                        </div>
+                        <div class="flex justify-between align-end "
+                            style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+
+                            <div class="taken-area taken-conteiner flex-column justify-between "
+                                style="gap: 20px; height: 100%;">
+                                <div class="text-after ">
+                                    <p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
+
+                                </div>
+                                <div class="flex" style="gap: 20px; height: calc(100% - 65px);">
+
+                                    <div class="solution-text-box " style="padding: 15px 33px; ">
+                                        <h3 class="text-box-title mb10">주요기능</h3>
+                                        <p>- 스마트폰 사용자로부터 실시간 위치 정보를 수집</p>
+                                        <p>- 반복 이동 거리에 대한 교통상황 정보 비교 분석</p>
+                                        <p>- 안개 발생시 도로교통위험 상황 분석 AI 모델을 탑재한 모니터링 시스템</p>
+                                        <p>- 도로교통 위험 상황분석 및 AI 모델을 활용하여 안개 감지 및 위험 경고 알림 기능 탑재</p>
+                                    </div>
+                                    <div class="solution-text-box">
+                                        <h3 class="text-box-title mb10">특장점</h3>
+
+                                        <p>- 머신 러닝 및 활동 기반 교통 모형 활용 이동 패턴 분석</p>
+                                        <p>- 이동 거리 및 이동 시간 바탕 최적 경로 추천 기능</p>
+                                        <p>- 위치정보 공유 및 검색 기능</p>
+
+
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="traffic-area flex align-end justify-end" style="height: 100%; width: 100%;">
+
+                                <img src="../../resources/img/common/traffic-img.png" alt="" class="mb30"
+                                    style="height: 356px;">
+                                <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
+                                    <p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>
+                                    <p>반복 이동 거리에 대한<br> 교통상황 정보 비교 분석</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide">
+                <div class="taken-wrap slide-wrap ">
+                    <div class="text-area flex">
+                        <div class="ai-title mb50">
+                            <p>AI 안전통합 횡단보도 관리 솔루션</p>
+                        </div>
+                        <div class="flex justify-end traffic-button">
+                            <button>영상보기</button>
+                        </div>
+                        <div class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            <div class="ai-area flex align-end " style="height: 100%; width: 100%;">
+
+                                <img src="../../resources/img/common/ai-img.png" alt="" class="mb30">
+                                <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
+                                    <p>보행자 상황을 내비게이션에<br>전달하여 우회전 사고 예방</p>
+                                    <p>GIS 기반 통합 관제<br> 시스템 구축</p>
+                                </div>
+                            </div>
+                            <div class="taken-area taken-conteiner flex  align-end" style="gap: 20px;">
+
+                                <div class="text-after" style="height: calc(100% - 348px);">
+                                    <p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
+                                </div>
+                                <div class="solution-text-box ">
+                                    <h3 class="text-box-title mb10">주요기능</h3>
+                                    <p>- 운전자를 위한 내비게이션 안내 서비스 제공</p>
+                                    <p>- 특정 이벤트 (무단횡단,우회전 감지) 발생시 플랫폼에서 이벤트 발생 정보 확인 기능</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>- 횡단보도 관제 분석 시스템 구축</p>
+                                            <p>- 현장모니터링 화면 구성</p>
+                                        </div>
+                                        <div class="flex-column">
+                                            <p>- 모니터링 대시보드 구축(데이터 분석 시각화)</p>
+                                            <p>- GIS 기반 관제 화면 구성</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide meta-wrap">
+                <div class="taken-wrap slide-wrap ">
+                    <div class="text-area flex">
+                        <div class="meta-title mb50">
+                            <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
+                        </div>
+                        <div class="flex justify-end traffic-button">
+                            <button>영상보기</button>
+                        </div>
+                        <div class="flex justify-between align-end "
+                            style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+
+                            <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
+                                <div class="text-after ">
+                                    <p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
+
+                                </div>
+                                <div class="solution-text-box" style="padding: 15px 33px;">
+                                    <h3 class="text-box-title mb10">주요기능</h3>
+                                    <p>- 가상현실의 인터페이스와 물리공간 간의 AI 기반으로 상호작용 및 서비스 지원</p>
+                                    <p>- 사용자의 이동데이터(걸음수)를 연동한 WEB기반 메타버스 플랫폼</p>
+                                    <p>- 물리공간,가상공간 데이터를 연결하여 음성 및 문자를 활용한 온/오프라인 소통</p>
+                                </div>
+                                <div class="solution-text-box">
+                                    <h3 class="text-box-title mb10">특장점</h3>
+
+                                    <p>- 3D 기반의 가상공간 제공 서비스(3차원 공간 정보 데이터 구현)</p>
+                                    <p>- 실시간 채팅 및 방명록 기능 탑재</p>
+                                    <p>- 이동데이터를 수집하여 걸음 수 측정을 통한 위치 공유 서비스</p>
+
+
+                                </div>
+                            </div>
+                            <div class="meta-area flex align-end " style="height: 100%; width: 100%;">
+
+                                <img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
+                                <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
+                                    <p>가상과 현실공간을<br>연결하는 플랫폼</p>
+                                    <p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide">
+                <div class="taken-wrap slide-wrap ">
+                    <div class="text-area flex">
+                        <div class="smart-title mb90">
+                            <p>스마트제조 데이터 모니터링 서비스</p>
+                        </div>
+                        <div class="flex justify-between align-end "
+                            style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            <div class="smart-area flex align-end " style="height: 100%; width: 100%;">
+
+                                <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
+                                <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
+                                    <p>공정상의 데이터를 수집<br>데이터 활용 체계 마련</p>
+                                    <p>웹 및 앱 모니터링<br> 시스템 구축</p>
+                                </div>
+                            </div>
+                            <div class="taken-area taken-conteiner flex" style="gap: 20px;  height: 100%;">
+
+                                <div class="text-after">
+                                    <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
+                                </div>
+                                <div class="solution-text-box">
+                                    <h3 class="text-box-title mb10">주요기능</h3>
+                                    <p>- 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
+                                    <p>- 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
+                                    <p>- 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
+                                </div>
+                                <div class="solution-text-box">
+                                    <h3 class="text-box-title mb10">특장점</h3>
+                                    <p>반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
+                                    <p>이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
+                                    <p>현재 공정 과정 모니터링 기능</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div>
-        
-      </div>
-  
+
+    </div>
     <div id="footer"></div>
 
 

 
 
 <script>
- var swiper = new Swiper(".mySwiper", {
-      direction: "vertical",
-      slidesPerView: 1,
-      spaceBetween: 30,
-      mousewheel: true,
+    $(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 swiper = new Swiper(".mySwiper", {
+        direction: "vertical",
+        slidesPerView: 1,
+        spaceBetween: 30,
+        mousewheel: true,
+        on: {
+
+            slideChange: function () {
+                var currentIndex = this.realIndex;
+                if (currentIndex === 0) {
+                    $('#header').removeClass('active');
+                } else {
+                    $('#header').addClass('active');
+                }
+                var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
+                if (this.activeIndex === lastIndex) {
+                    $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
+                } else {
+                    $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
+                }
+            },
+        }
+    });
+    $(function () {
+        $("#header").load("../layout/Header.html");
+        $("#footer").load("../layout/footer.html");
+        // $("#footer").hide();
+
+    });
 
 </script>
 

 
 
 <style scoped>
+     /* 스크롤바 없애기 */
+     body {
+        -ms-overflow-style: none;
+        /* 인터넷 익스플로러 */
+        scrollbar-width: none;
+        /* 파이어폭스 */
+    }
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    #header {
+        position: fixed;
+        top: 0;
+        z-index: 3;
+        border-bottom: 1px solid #ced4da;
+        background-color: white;
+    }
+
+    #header .header .logo {
+        background: url(../../resources/img/component/logo-color.png) no-repeat;
+        width: 200px;
+        background-size: contain;
+        height: 25px;
+
+
+    }
+
+    #header .header nav li a {
+        color: #333;
+
+    }
+
+
+
     html,
     body {
-      position: relative;
-      height: 100%;
+        position: relative;
+        height: 100%;
     }
 
     body {
-      background: #eee;
-      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-      font-size: 14px;
-      color: #000;
-      margin: 0;
-      padding: 0;
+        background: #eee;
+        font-family: 'Pretendard';
+        font-size: 14px;
+        color: #000;
+        margin: 0;
+        padding: 0;
     }
 
     .swiper {
-      width: 100%;
-      height: 100%;
+        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;
+        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;
+        height: 356px;
+        display: block;
+        object-fit: cover;
     }
-
-    
 </style>
 
 </html>

Add a comment

Open 0
Closed 0

List

...	...	@@ -236,198 +236,195 @@
236	236
237	237	/* 마진 */
238	238	.ml0 {
239		- margin-left: 0px;
	239	+ margin-left: 0rem;
240	240	}
241	241
242	242	.ml5 {
243		- margin-left: 5px;
	243	+ margin-left: 0.5rem;
244	244	}
245	245
246	246	.ml10 {
247		- margin-left: 10px;
	247	+ margin-left: 1rem;
248	248	}
249	249
250	250	.ml20 {
251		- margin-left: 20px;
	251	+ margin-left: 2rem;
252	252	}
253	253
254	254	.ml30 {
255		- margin-left: 30px;
	255	+ margin-left: 3rem;
256	256	}
257	257
258	258	.ml40 {
259		- margin-left: 40px;
	259	+ margin-left: 4rem;
260	260	}
261	261
262	262	.ml50 {
263		- margin-left: 50px;
	263	+ margin-left: 5rem;
264	264	}
265	265
266	266	.ml60 {
267		- margin-left: 60px;
	267	+ margin-left: 6rem;
268	268	}
269	269
270	270	.ml70 {
271		- margin-left: 70px;
	271	+ margin-left: 7rem;
272	272	}
273	273
274	274	.ml80 {
275		- margin-left: 80px;
	275	+ margin-left: 8rem;
276	276	}
277	277
278	278	.ml90 {
279		- margin-left: 90px;
	279	+ margin-left: 9rem;
280	280	}
281	281
282	282	.ml100 {
283		- margin-left: 100px;
	283	+ margin-left: 10rem;
284	284	}
285	285
286	286	.mr0 {
287		- margin-right: 0px;
	287	+ margin-right: 0rem;
288	288	}
289	289
290	290	.mr5 {
291		- margin-right: 5px;
	291	+ margin-right: 0.5rem;
292	292	}
293	293
294	294	.mr10 {
295		- margin-right: 10px;
	295	+ margin-right: 1rem;
296	296	}
297	297
298	298	.mr20 {
299		- margin-right: 20px;
	299	+ margin-right: 2rem;
300	300	}
301	301
302	302	.mr30 {
303		- margin-right: 30px;
	303	+ margin-right: 3rem;
304	304	}
305	305
306	306	.mr40 {
307		- margin-right: 40px;
	307	+ margin-right: 4rem;
308	308	}
309	309
310	310	.mr50 {
311		- margin-right: 50px;
	311	+ margin-right: 5rem;
312	312	}
313	313
314	314	.mr60 {
315		- margin-right: 60px;
	315	+ margin-right: 6rem;
316	316	}
317	317
318	318	.mr70 {
319		- margin-right: 70px;
	319	+ margin-right: 7rem;
320	320	}
321	321
322	322	.mr80 {
323		- margin-right: 80px;
	323	+ margin-right: 8rem;
324	324	}
325	325
326	326	.mr90 {
327		- margin-right: 90px;
	327	+ margin-right: 9rem;
328	328	}
329	329
330	330	.mr100 {
331		- margin-right: 100px;
	331	+ margin-right: 10rem;
332	332	}
333	333
334	334	.mt0 {
335		- margin-top: 0px;
	335	+ margin-top: 0rem;
336	336	}
337	337
338	338	.mt5 {
339		- margin-top: 5px;
	339	+ margin-top: 0.5rem;
340	340	}
341	341
342	342	.mt10 {
343		- margin-top: 10px;
	343	+ margin-top: 1rem;
344	344	}
345	345
346	346	.mt20 {
347		- margin-top: 20px;
	347	+ margin-top: 2rem;
348	348	}
349	349
350	350	.mt30 {
351		- margin-top: 30px;
	351	+ margin-top: 3rem;
352	352	}
353	353
354	354	.mt40 {
355		- margin-top: 40px;
	355	+ margin-top: 4rem;
356	356	}
357	357
358	358	.mt50 {
359		- margin-top: 50px;
	359	+ margin-top: 5rem;
360	360	}
361	361
362	362	.mt60 {
363		- margin-top: 60px;
	363	+ margin-top: 6rem;
364	364	}
365	365
366	366	.mt70 {
367		- margin-top: 70px;
	367	+ margin-top: 7rem;
368	368	}
369	369
370	370	.mt80 {
371		- margin-top: 80px;
	371	+ margin-top: 8rem;
372	372	}
373	373
374	374	.mt90 {
375		- margin-top: 90px;
	375	+ margin-top: 9rem;
376	376	}
377	377
378	378	.mt100 {
379		- margin-top: 100px;
	379	+ margin-top: 10rem;
380	380	}
381	381
382	382	.mb0 {
383		- margin-bottom: 0px;
	383	+ margin-bottom: 0rem;
384	384	}
385	385
386	386	.mb5 {
387		- margin-bottom: 5px;
	387	+ margin-bottom: 0.5rem;
388	388	}
389	389
390	390	.mb10 {
391		- margin-bottom: 10px;
392		-}
393		-.mb15 {
394		- margin-bottom: 15px;
	391	+ margin-bottom: 1rem;
395	392	}
396	393
397	394	.mb20 {
398		- margin-bottom: 20px;
	395	+ margin-bottom: 2rem;
399	396	}
400	397
401	398	.mb30 {
402		- margin-bottom: 30px;
	399	+ margin-bottom: 3rem;
403	400	}
404	401
405	402	.mb40 {
406		- margin-bottom: 40px;
	403	+ margin-bottom: 4rem;
407	404	}
408	405
409	406	.mb50 {
410		- margin-bottom: 50px;
	407	+ margin-bottom: 5rem;
411	408	}
412	409
413	410	.mb60 {
414		- margin-bottom: 60px;
	411	+ margin-bottom: 6rem;
415	412	}
416	413
417	414	.mb70 {
418		- margin-bottom: 70px;
	415	+ margin-bottom: 7rem;
419	416	}
420	417
421	418	.mb80 {
422		- margin-bottom: 80px;
	419	+ margin-bottom: 8rem;
423	420	}
424	421
425	422	.mb90 {
426		- margin-bottom: 90px;
	423	+ margin-bottom: 9rem;
427	424	}
428	425
429	426	.mb100 {
430		- margin-bottom: 100px;
	427	+ margin-bottom: 10rem;
431	428	}
432	429
433	430	/* 패딩 */
...	...	@@ -436,194 +433,242 @@
436	433	}
437	434
438	435	.pd5 {
439		- padding: 5px;
	436	+ padding: 0.5rem;
440	437	}
441	438
442	439	.pd10 {
443		- padding: 10px;
444		-}
445		-.pd15{
446		- padding: 15px;
	440	+ padding: 1rem;
447	441	}
448	442
449	443	.pd20 {
450		- padding: 20px;
	444	+ padding: 2rem;
451	445	}
452	446
453	447	.pd30 {
454		- padding: 30px;
	448	+ padding: 3rem;
455	449	}
456	450
457	451	.pd40 {
458		- padding: 40px;
	452	+ padding: 4rem;
459	453	}
460	454
461	455	.pd50 {
462		- padding: 50px;
	456	+ padding: 5rem;
463	457	}
464	458
465	459	.pd60 {
466		- padding: 60px;
	460	+ padding: 6rem;
467	461	}
468	462
469	463	.pd70 {
470		- padding: 70px;
	464	+ padding: 7rem;
471	465	}
472	466
473	467	.pd80 {
474		- padding: 80px;
	468	+ padding: 8rem;
475	469	}
476	470
477	471	.pd90 {
478		- padding: 90px;
	472	+ padding: 9rem;
479	473	}
480	474
481	475	.pd100 {
482		- padding: 100px;
	476	+ padding: 10rem;
483	477	}
	478	+
	479	+/* 패딩 top */
484	480
485	481	.pt0 {
486	482	padding-top: 0;
487	483	}
488	484
489	485	.pt5 {
490		- padding-top: 5px;
	486	+ padding-top: 0.5rem;
491	487	}
492	488
493	489	.pt10 {
494		- padding-top: 10px;
	490	+ padding-top: 1rem;
495	491	}
496	492
497	493	.pt20 {
498		- padding-top: 20px;
	494	+ padding-top: 2rem;
499	495	}
500	496
501	497	.pt30 {
502		- padding-top: 30px;
	498	+ padding-top: 3rem;
503	499	}
504	500
505	501	.pt40 {
506		- padding-top: 40px;
	502	+ padding-top: 4rem;
507	503	}
508	504
509	505	.pt50 {
510		- padding-top: 50px;
	506	+ padding-top: 5rem;
511	507	}
512	508
513	509	.pt60 {
514		- padding-top: 60px;
	510	+ padding-top: 6rem;
515	511	}
516	512
517	513	.pt70 {
518		- padding-top: 70px;
	514	+ padding-top: 7rem;
519	515	}
520	516
521	517	.pt80 {
522		- padding-top: 80px;
	518	+ padding-top: 8rem;
523	519	}
524	520
525	521	.pt90 {
526		- padding-top: 90px;
	522	+ padding-top: 9rem;
527	523	}
528	524
529	525	.pt100 {
530		- padding-top: 100px;
	526	+ padding-top: 10rem;
531	527	}
532	528
533	529	.pb0 {
534	530	padding-bottom: 0;
535	531	}
536	532
	533	+/* 패딩 bottom */
537	534	.pb5 {
538		- padding-bottom: 5px;
	535	+ padding-bottom: 0.5rem;
539	536	}
540	537
541	538	.pb10 {
542		- padding-bottom: 10px;
	539	+ padding-bottom: 1rem;
543	540	}
544	541
545	542	.pb20 {
546		- padding-bottom: 20px;
	543	+ padding-bottom: 2rem;
547	544	}
548	545
549	546	.pb30 {
550		- padding-bottom: 30px;
	547	+ padding-bottom: 3rem;
551	548	}
552	549
553	550	.pb40 {
554		- padding-bottom: 40px;
	551	+ padding-bottom: 4rem;
555	552	}
556	553
557	554	.pb50 {
558		- padding-bottom: 50px;
	555	+ padding-bottom: 5rem;
559	556	}
560	557
561	558	.pb60 {
562		- padding-bottom: 60px;
	559	+ padding-bottom: 6rem;
563	560	}
564	561
565	562	.pb70 {
566		- padding-bottom: 70px;
	563	+ padding-bottom: 7rem;
567	564	}
568	565
569	566	.pb80 {
570		- padding-bottom: 80px;
	567	+ padding-bottom: 8rem;
571	568	}
572	569
573	570	.pb90 {
574		- padding-bottom: 90px;
	571	+ padding-bottom: 9rem;
575	572	}
576	573
577	574	.pb100 {
578		- padding-bottom: 100px;
	575	+ padding-bottom: 10rem;
579	576	}
580	577
	578	+/* 패딩 left */
581	579	.pl0 {
582		- padding-left: 0;
	580	+ padding-left: 0rem;
583	581	}
584		-
585	582	.pl5 {
586		- padding-left: 5px;
	583	+ padding-left: 0.5rem;
587	584	}
588	585
589	586	.pl10 {
590		- padding-left: 10px;
	587	+ padding-left: 1rem;
591	588	}
592	589
593	590	.pl20 {
594		- padding-left: 20px;
	591	+ padding-left: 2rem;
595	592	}
596	593
597	594	.pl30 {
598		- padding-left: 30px;
	595	+ padding-left: 3rem;
599	596	}
600	597
601	598	.pl40 {
602		- padding-left: 40px;
	599	+ padding-left: 4rem;
603	600	}
604	601
605	602	.pl50 {
606		- padding-left: 50px;
	603	+ padding-left: 5rem;
607	604	}
608	605
609	606	.pl60 {
610		- padding-left: 60px;
	607	+ padding-left: 6rem;
611	608	}
612	609
613	610	.pl70 {
614		- padding-left: 70px;
	611	+ padding-left: 7rem;
615	612	}
616	613
617	614	.pl80 {
618		- padding-left: 80px;
	615	+ padding-left: 8rem;
619	616	}
620	617
621	618	.pl90 {
622		- padding-left: 90px;
	619	+ padding-left: 9rem;
623	620	}
624	621
625	622	.pl100 {
626		- padding-left: 100px;
	623	+ padding-left: 10rem;
	624	+}
	625	+
	626	+/* 패딩 right */
	627	+.pr0 {
	628	+ padding-right: 0rem;
	629	+}
	630	+.pr5 {
	631	+ padding-right: 0.5rem;
	632	+}
	633	+
	634	+.pr10 {
	635	+ padding-right: 1rem;
	636	+}
	637	+
	638	+.pr20 {
	639	+ padding-right: 2rem;
	640	+}
	641	+
	642	+.pr30 {
	643	+ padding-right: 3rem;
	644	+}
	645	+
	646	+.pr40 {
	647	+ padding-right: 4rem;
	648	+}
	649	+
	650	+.pr50 {
	651	+ padding-right: 5rem;
	652	+}
	653	+
	654	+.pr60 {
	655	+ padding-right: 6rem;
	656	+}
	657	+
	658	+.pr70 {
	659	+ padding-right: 7rem;
	660	+}
	661	+
	662	+.pr80 {
	663	+ padding-right: 8rem;
	664	+}
	665	+
	666	+.pr90 {
	667	+ padding-right: 9rem;
	668	+}
	669	+
	670	+.pr100 {
	671	+ padding-right: 10rem;
627	672	}
628	673
629	674	/* btn */

...	...	@@ -1,4 +1,5 @@
1	1	@charset "utf-8";
	2	+
2	3	.text-area {
3	4	width: 1200px;
4	5	height: 100%;
...	...	@@ -13,9 +14,10 @@
13	14
14	15	#header.active .header nav li a {
15	16	color: #333;
16		-
	17	+
17	18	}
18		-#header.active .header nav ul li ul.dropdown {
	19	+
	20	+#header.active .header nav ul li ul.dropdown {
19	21	background-color: #fff;
20	22	}
21	23
...	...	@@ -27,7 +29,8 @@
27	29
28	30
29	31	}
30		-.slide-back{
	32	+
	33	+.slide-back {
31	34	background: url(../img/common/main-2.png)no-repeat;
32	35	width: 0;
33	36	height: 100%;
...	...	@@ -35,7 +38,8 @@
35	38	background-size: cover;
36	39	opacity: 0;
37	40	}
38		-.slide-back.active{
	41	+
	42	+.slide-back.active {
39	43	animation: slideIn 1s forwards;
40	44	overflow: hidden;
41	45
...	...	@@ -43,14 +47,15 @@
43	47
44	48	@keyframes slideIn {
45	49	from {
46		- width: 0;
47		- opacity: 0;
	50	+ width: 0;
	51	+ opacity: 0;
48	52	}
	53	+
49	54	to {
50	55	width: 100%;
51	56	opacity: 1;
52	57	}
53		- }
	58	+}
54	59
55	60
56	61	.text-event {
...	...	@@ -93,69 +98,93 @@
93	98	animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
94	99	animation-delay: 1s;
95	100	}
96		-.sub-text-area{
	101	+
	102	+.sub-text-area {
97	103	text-align: center;
98	104	}
	105	+
99	106	.solution-text {
100	107	font-size: 4.5rem;
101	108	font-weight: 900;
102	109	opacity: 0;
103	110	}
104		-.box1,.box2,.box3,.box4,.box5,.box6{
	111	+
	112	+.box1,
	113	+.box2,
	114	+.box3,
	115	+.box4,
	116	+.box5,
	117	+.box6 {
105	118	width: 100%;
106	119	height: 100%;
107	120	border-radius: 20px;
108	121	background-size: cover;
109		- padding:214px 10px 10px 10px;
	122	+ padding: 214px 10px 10px 10px;
110	123	color: #fff;
111		-
	124	+
112	125	text-align: left;
113	126	}
114		-.box2,.box4{
	127	+
	128	+.box2,
	129	+.box4 {
115	130	transform: translateY(30px);
116	131	}
117		-.box1{
	132	+
	133	+.box1 {
118	134	background: url(../img/common/img-box1.png) no-repeat;
119	135
120	136	}
121		-.box2{
	137	+
	138	+.box2 {
122	139	background: url(../img/common/img-box2.png) no-repeat;
123		-
	140	+
124	141	}
125		-.box3{
	142	+
	143	+.box3 {
126	144	background: url(../img/common/img-box3.png) no-repeat;
127		-
	145	+
128	146	}
129		-.box4{
	147	+
	148	+.box4 {
130	149	background: url(../img/common/img-box4.png) no-repeat;
131		-
	150	+
132	151	}
133		-.box5{
	152	+
	153	+.box5 {
134	154	background: url(../img/common/img-box5.png) no-repeat;
135		-
	155	+
136	156	}
137		-.box6{
	157	+
	158	+.box6 {
138	159	background: url(../img/common/img-box6.png) no-repeat;
139	160
140	161	}
141		-.box{
	162	+
	163	+.box {
142	164	opacity: 0;
143	165	cursor: pointer;
144	166	}
145		-.box:hover{
	167	+
	168	+.box:hover {
146	169	transform: scale(1.1);
147	170	transition: all 0.5s ease;
148	171	}
	172	+
149	173	@keyframes fadeIn {
150		- from { opacity: 0; }
151		- to { opacity: 1; }
152		- }
153		-
154		- .box.active {
	174	+ from {
	175	+ opacity: 0;
	176	+ }
	177	+
	178	+ to {
	179	+ opacity: 1;
	180	+ }
	181	+}
	182	+
	183	+.box.active {
155	184	animation-name: fadeIn;
156	185	animation-duration: 1s;
157	186	animation-fill-mode: both;
158		- }
	187	+}
159	188
160	189	.solution-text.active {
161	190
...	...	@@ -409,9 +438,10 @@
409	438	-webkit-text-stroke: 1px white;
410	439	}
411	440
412		-.innerSwiper{
	441	+.innerSwiper {
413	442	height: 100%;
414	443	}
	444	+
415	445	.innerSwiper .swiper-slide {
416	446	text-align: center;
417	447	font-size: 18px;
...	...	@@ -443,29 +473,33 @@
443	473
444	474	} */
445	475
446		-
447		-.innerSwiper-textBox{
	476	+
	477	+.innerSwiper-textBox {
448	478	height: 160px;
449	479	padding: 15px 0 0 0;
450	480	}
451		-.innerSwiper-title,.innerSwiper-text{
	481	+
	482	+.innerSwiper-title,
	483	+.innerSwiper-text {
452	484
453	485	font-family: 'Pretendard';
454	486	}
455		-.innerSwiper-title{
	487	+
	488	+.innerSwiper-title {
456	489	font-size: 2.7rem;
457	490	font-weight: 600;
458		- padding: 0 0 10px 0;
	491	+ padding: 0 0 10px 0;
459	492	}
460	493
461	494
462		-.map-text{
	495	+.map-text {
463	496	text-align: center;
464	497	font-size: 4rem;
465	498	font-weight: 900;
466	499	position: relative;
467	500	}
468		-.map-text::after{
	501	+
	502	+.map-text::after {
469	503	content: "";
470	504	position: absolute;
471	505	top: -40px;
...	...	@@ -477,6 +511,7 @@
477	511	background-size: contain;
478	512
479	513	}
	514	+
480	515	.map-btn button {
481	516	border: 1px solid #213F99;
482	517	padding: 10px 15px 10px 35px;
...	...	@@ -489,10 +524,11 @@
489	524	}
490	525
491	526	.map-btn button.on {
492		- background: url(../img/common/location-dot-solid-w.svg) no-repeat 15px center / 15px, #213F99;
493		- color: #FFFFFF;
	527	+ background: url(../img/common/location-dot-solid-w.svg) no-repeat 15px center / 15px, #213F99;
	528	+ color: #FFFFFF;
494	529	}
495		-.address-box{
	530	+
	531	+.address-box {
496	532	border: 2px solid #213F99;
497	533	box-shadow: 5px 5px 0px #213F99;
498	534	transform: translateY(-30px);
...	...	@@ -504,14 +540,16 @@
504	540	border-radius: 10px;
505	541	padding: 12px 30px;
506	542	}
507		-.address-tile{
	543	+
	544	+.address-tile {
508	545	font-size: 2.5rem;
509	546	font-weight: 600;
510	547	color: #213F99;
511	548	width: 150px;
512	549	position: relative;
513	550	}
514		-.address-tile::after{
	551	+
	552	+.address-tile::after {
515	553	position: absolute;
516	554	content: '';
517	555	top: 50%;
...	...	@@ -522,10 +560,12 @@
522	560
523	561	background: url(../img/common/location-dot-solid.svg)no-repeat;
524	562	}
525		-.address-subtitle{
	563	+
	564	+.address-subtitle {
526	565	padding: 5px 0;
527	566	}
528		-.map{
	567	+
	568	+.map {
529	569	box-shadow: 2px 2px 10px #3333333d;
530	570	}
531	571
...	...	@@ -552,28 +592,51 @@
552	592	}
553	593	*/
554	594
	595	+/* footer {
	596	+ transition: opacity 0.5s, visibility 0.5s;
	597	+ opacity: 0;
	598	+ visibility: hidden;
	599	+ }
	600	+
	601	+ footer.show {
	602	+ opacity: 1;
	603	+ visibility: visible;
	604	+ } */
555	605
556	606
557		-
558		-footer {
	607	+
	608	+
	609	+#footer {
559	610	width: 100%;
560		- height: 100px;
	611	+ transition: opacity 0.5s, visibility 0.5s;
	612	+ /* height: 200px; */
561	613	padding: 30px;
562	614	position: relative;
563	615	bottom: 0;
564	616	transition: all 0.5s;
565		- z-index: 9999;
566		- opacity: 0;
	617	+ display: none;
567	618	background-color: #333;
568	619	}
569	620
570		-footer.on {
571		- opacity: 1;
572		- display: block;
	621	+#footer.show {
	622	+ position: relative;
	623	+ bottom: 200px;
	624	+ z-index: 10000;
	625	+ display: block !important;
	626	+}
	627	+.show-footer {
	628	+ margin-bottom: 100px; /* 푸터의 높이에 따라 조정 */
573	629	}
574	630
575		-footer>.footer-wrap {
	631	+.footer-wrap {
	632	+ width: 1200px;
	633	+ margin: 0 auto;
576	634	color: #fff;
	635	+}
	636	+
	637	+.footer-text p {
	638	+ margin-bottom: 1rem;
	639	+ width: 50%;
577	640	}
578	641
579	642	.footer-wrap .info {
...	...	@@ -589,112 +652,167 @@
589	652	.footer-wrap .logo {
590	653	flex: 0 0 20%;
591	654	}
592		-.ft-logo{
593		- padding: 1rem 0;
594	655
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;
	656	+.copyright {
	657	+ text-align: center;
611	658	}
612	659
613	660
614	661	/* solution page */
615		-.solution-title{
	662	+.solution-title,
	663	+.traffic-title,
	664	+.ai-title,
	665	+.meta-title,
	666	+.smart-title {
616	667	width: 100%;
	668	+ height: 60px;
617	669	position: relative;
618	670	}
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{
	671	+
	672	+.solution-title p,
	673	+.traffic-title p,
	674	+.ai-title p,
	675	+.meta-title p,
	676	+.smart-title p {
630	677	font-size: 3.5rem;
631	678	font-weight: bold;
632	679	font-family: 'Pretendard';
633	680
634	681	text-align: center;
635	682	}
636		-.taken-area{
	683	+
	684	+.solution-title::after {
	685	+ content: '';
	686	+ position: absolute;
	687	+ top: -40px;
	688	+ left: 50%;
	689	+ transform: translateX(-50%);
	690	+
	691	+ background: url(../img/common/solution-after-img-1.png) no-repeat;
	692	+ background-size: 30px;
	693	+ width: 30px;
	694	+ height: 30px;
	695	+}
	696	+
	697	+.traffic-title::after {
	698	+ content: '';
	699	+ position: absolute;
	700	+ top: -40px;
	701	+ left: 50%;
	702	+ transform: translateX(-50%);
	703	+
	704	+ background: url(../img/common/traffic-icon.png) no-repeat;
	705	+ background-size: 30px;
	706	+ width: 30px;
	707	+ height: 30px;
	708	+}
	709	+
	710	+.ai-title::after {
	711	+ content: '';
	712	+ position: absolute;
	713	+ top: -40px;
	714	+ left: 50%;
	715	+ transform: translateX(-50%);
	716	+ background: url(../img/common/ai-icon.png) no-repeat;
	717	+ background-size: 30px;
	718	+ width: 30px;
	719	+ height: 30px;
	720	+}
	721	+
	722	+.meta-title::after {
	723	+ content: '';
	724	+ position: absolute;
	725	+ top: -40px;
	726	+ left: 50%;
	727	+ transform: translateX(-50%);
	728	+ background: url(../img/common/meta-icon.png) no-repeat;
	729	+ background-size: 30px;
	730	+ width: 30px;
	731	+ height: 30px;
	732	+}
	733	+
	734	+.smart-title::after {
	735	+ content: '';
	736	+ position: absolute;
	737	+ top: -40px;
	738	+ left: 50%;
	739	+ transform: translateX(-50%);
	740	+ background: url(../img/common/smart-icon.png) no-repeat;
	741	+ background-size: 30px;
	742	+ width: 30px;
	743	+ height: 30px;
	744	+}
	745	+
	746	+.taken-area {
637	747	width: 100%;
638	748	height: 100%;
639	749	}
640		-.text-after p{
	750	+
	751	+.text-after p {
641	752	position: relative;
	753	+ line-height: 1.5;
642	754	}
643		-.text-after p::after{
	755	+
	756	+.text-after p::after {
644	757	content: '·';
645	758	position: absolute;
646	759	top: -5px;
647	760	left: 6px;
648	761	font-size: 2rem;
649	762	}
650		-.taken-conteiner p{
	763	+
	764	+.taken-conteiner p {
651	765	text-align: left;
652	766	font-family: 'Pretendard';
653		- margin-bottom: 10px;
654	767	}
655		-.taken-area img{
656		- width: 90%;
657		- /* padding: 0 30px ; */
658		-
659		-}
660		-.taken-area p{
661		- font-size: 1.4rem;
	768	+
	769	+
	770	+.taken-area p {
	771	+ font-size: 1.5rem;
662	772	font-weight: 600;
663	773	padding-left: 20px;
664	774	}
665	775
666		-.taken-box{
	776	+.taken-box {
667	777	width: 100%;
668	778	flex-wrap: nowrap;
669	779	gap: 30px;
670	780	}
671		-.taken-box p{
	781	+
	782	+.taken-box p {
672	783	width: 100%;
673	784	font-family: 'Pretendard';
674	785	background-color: #F8F9FA;
675	786	padding: 13px;
676		- font-size: 1.5rem;
	787	+ text-align: center;
	788	+ font-size: 1.6rem;
677	789	border-radius: 10px;
	790	+ font-weight: 600;
678	791	}
679		-.solution-text-box{
	792	+
	793	+.solution-text-box {
680	794	width: 100%;
681	795	padding: 15px 40px;
682	796	border-radius: 10px;
683	797	box-shadow: 2px 2px 5px #3e3e3e30;
684	798	}
685		-.solution-text-box p{
	799	+
	800	+.solution-text-box p {
686	801	font-weight: 500;
687	802	font-size: 1.4rem;
688	803	padding-left: 20px;
	804	+ line-height: 2;
689	805	}
690		-.text-box-title{
	806	+
	807	+.text-box-title {
691	808	font-family: 'Pretendard';
692	809	position: relative;
693	810	font-weight: 600;
694	811	font-size: 2rem;
695	812	text-align: left;
696	813	}
697		-.text-box-title::after{
	814	+
	815	+.text-box-title::after {
698	816	position: absolute;
699	817	content: '';
700	818	top: 5px;
...	...	@@ -703,4 +821,501 @@
703	821	width: 10px;
704	822	height: 10px;
705	823	background-size: 10px;
	824	+}
	825	+
	826	+.traffic-button {
	827	+ width: 100%;
	828	+}
	829	+
	830	+.traffic-button button {
	831	+ padding: 13px 50px;
	832	+ /* width: 182px; */
	833	+ background-color: #242A30;
	834	+ color: #fff;
	835	+ border-radius: 50px;
	836	+ font-weight: 600;
	837	+ font-size: 1.5rem;
	838	+ font-family: 'Pretendard';
	839	+ position: relative;
	840	+
	841	+
	842	+}
	843	+
	844	+.traffic-button button::after {
	845	+ content: '';
	846	+ position: absolute;
	847	+ background: url(../img/common/solution-button01.png) no-repeat;
	848	+ width: 20px;
	849	+ height: 20px;
	850	+ top: 60%;
	851	+ left: 12%;
	852	+ transform: translateY(-50%);
	853	+ background-size: 20px;
	854	+}
	855	+
	856	+.traffic-button button::before {
	857	+ content: '';
	858	+ position: absolute;
	859	+ background: url(../img/common/solution-button.png) no-repeat;
	860	+ width: 20px;
	861	+ height: 20px;
	862	+ top: 50%;
	863	+ right: 10%;
	864	+ transform: translateY(-50%);
	865	+
	866	+ background-size: 20px;
	867	+}
	868	+
	869	+.traffic-area img {
	870	+ width: 80%;
	871	+ background-size: cover;
	872	+}
	873	+
	874	+/* 마케팅 */
	875	+.marketing-wrapper {
	876	+ background: url(../img/common/marketing-bg.png)no-repeat;
	877	+ width: 100%;
	878	+ background-size: 100%;
	879	+ background-position: top;
	880	+
	881	+
	882	+
	883	+}
	884	+
	885	+.marketing-wrap-title {
	886	+ padding-top: 170px;
	887	+ text-align: center;
	888	+
	889	+}
	890	+
	891	+
	892	+.marketing-wrap-title h1 {
	893	+ font-size: 5rem;
	894	+ font-weight: 900;
	895	+ font-family: 'Pretendard';
	896	+ position: relative;
	897	+}
	898	+
	899	+.marketing-wrap-title h1::after {
	900	+ position: absolute;
	901	+ content: '';
	902	+ top: -35px;
	903	+ left: 50%;
	904	+ background: url(../img/common/marketing-icon.png) no-repeat;
	905	+ background-size: 40px;
	906	+ width: 40px;
	907	+ height: 40px;
	908	+}
	909	+
	910	+.meta-wrap {
	911	+ position: relative;
	912	+ width: 100%;
	913	+ height: 100%;
	914	+}
	915	+
	916	+.meta-wrap::before {
	917	+ content: '';
	918	+ position: absolute;
	919	+ bottom: 0px;
	920	+ right: 0%;
	921	+ background: url(../img/common/meta-img02.png)no-repeat;
	922	+ background-size: cover;
	923	+ width: 30%;
	924	+ height: 70%;
	925	+ z-index: -1;
	926	+}
	927	+
	928	+.marketing-wrapper {
	929	+ width: 100%;
	930	+}
	931	+
	932	+.marketing-area {
	933	+ width: 1200px;
	934	+ margin: 0 auto;
	935	+ display: grid;
	936	+ gap: 30px;
	937	+ grid-template-columns: 1fr 1fr;
	938	+}
	939	+
	940	+.marketing-area img {
	941	+ width: 100%;
	942	+ margin-bottom: 10px;
	943	+ border-radius: 20px;
	944	+}
	945	+
	946	+.marketing-area p {
	947	+ margin-bottom: 10px;
	948	+}
	949	+
	950	+.marketing-area p span {
	951	+ font-size: 1.5rem;
	952	+ font-weight: 600;
	953	+ color: #213F99;
	954	+}
	955	+
	956	+.marketing-title {
	957	+ font-size: 2rem;
	958	+}
	959	+
	960	+.marketing-date {
	961	+ text-align: right;
	962	+}
	963	+
	964	+/* about us */
	965	+.about-wrap {
	966	+
	967	+ padding: 0 70px;
	968	+}
	969	+
	970	+.about-wrapper {
	971	+ width: 100%;
	972	+ height: 100%;
	973	+ background: linear-gradient(#fff, #fff, #d7e2ff);
	974	+
	975	+}
	976	+
	977	+.about-title p:nth-child(1) {
	978	+ font-size: 4rem;
	979	+ font-weight: bold;
	980	+ font-family: 'Pretendard';
	981	+ text-align: center;
	982	+}
	983	+
	984	+.about-radius,
	985	+.about-radius-bottom,
	986	+.about-radius-right,
	987	+.about-radius-left,
	988	+.about-radius-bottom-left,
	989	+.about-radius-bottom-right {
	990	+ border: 2px solid #213F99;
	991	+ width: 150px;
	992	+ height: 150px;
	993	+ border-radius: 50%;
	994	+ padding: 40px 20px;
	995	+ position: relative;
	996	+
	997	+
	998	+}
	999	+
	1000	+
	1001	+.about-radius::after {
	1002	+ content: '';
	1003	+ position: absolute;
	1004	+ background: url(../img/common/about-img.png) no-repeat;
	1005	+ width: 267px;
	1006	+ height: 267px;
	1007	+ background-size: contain;
	1008	+ top: -60px;
	1009	+ left: -60px;
	1010	+ -webkit-animation: swirl-in-fwd 0.6s ease-out both;
	1011	+ animation: swirl-in-fwd 0.6s ease-out both;
	1012	+ animation-delay: 0.2s;
	1013	+}
	1014	+
	1015	+.about-radius-left::after {
	1016	+ content: '';
	1017	+ position: absolute;
	1018	+ background: url(../img/common/about-img.png) no-repeat;
	1019	+ width: 267px;
	1020	+ height: 267px;
	1021	+ background-size: contain;
	1022	+ transform: rotate(-3deg);
	1023	+ top: -60px;
	1024	+ left: -60px;
	1025	+ -webkit-animation: swirl-in-fwd 0.6s ease-out both;
	1026	+ animation: swirl-in-fwd 0.6s ease-out both;
	1027	+
	1028	+
	1029	+}
	1030	+
	1031	+.about-radius-right::after {
	1032	+ content: '';
	1033	+ position: absolute;
	1034	+ background: url(../img/common/about-img.png) no-repeat;
	1035	+ width: 267px;
	1036	+ height: 267px;
	1037	+ background-size: contain;
	1038	+ transform: rotate(5deg);
	1039	+ top: -60px;
	1040	+ left: -60px;
	1041	+ -webkit-animation: swirl-in-fwd 0.6s ease-out both;
	1042	+ animation: swirl-in-fwd 0.6s ease-out both;
	1043	+ animation-delay: 0.4s;
	1044	+}
	1045	+
	1046	+.about-radius-bottom-left::after {
	1047	+ content: '';
	1048	+ position: absolute;
	1049	+ background: url(../img/common/about-img02.png) no-repeat;
	1050	+ width: 267px;
	1051	+ height: 267px;
	1052	+ background-size: contain;
	1053	+ transform: rotate(4deg);
	1054	+ top: -30px;
	1055	+ left: -60px;
	1056	+ -webkit-animation: swirl-in-fwd 0.6s ease-out both;
	1057	+ animation: swill-in-fwd 0.6s ease-out both;
	1058	+ animation-delay: 0.6s;
	1059	+}
	1060	+
	1061	+.about-radius-bottom-right::after {
	1062	+ content: '';
	1063	+ position: absolute;
	1064	+ background: url(../img/common/about-img02.png) no-repeat;
	1065	+ width: 267px;
	1066	+ height: 267px;
	1067	+ background-size: contain;
	1068	+ top: -30px;
	1069	+ transform: rotate(4deg);
	1070	+ left: -60px;
	1071	+ -webkit-animation: swirl-in-fwd 0.6s ease-out both;
	1072	+ animation: swill-in-fwd 0.6s ease-out both;
	1073	+ animation-delay: 0.8s;
	1074	+}
	1075	+
	1076	+.about-text {
	1077	+ text-align: center;
	1078	+ color: #213F99;
	1079	+ font-weight: 900;
	1080	+ font-size: 2rem;
	1081	+ margin-bottom: 0.5rem;
	1082	+}
	1083	+
	1084	+
	1085	+.swirl-in-fwd {
	1086	+ -webkit-animation: swirl-in-fwd 0.6s ease-out both;
	1087	+ animation: swirl-in-fwd 0.6s ease-out both;
	1088	+}
	1089	+
	1090	+.swill-in-fwd {
	1091	+ -webkit-animation: swill-in-fwd 0.6s ease-out both;
	1092	+ animation: swill-in-fwd 0.6s ease-out both;
	1093	+}
	1094	+
	1095	+@keyframes swirl-in-fwd {
	1096	+ 0% {
	1097	+ -webkit-transform: rotate(-540deg) scale(0);
	1098	+ transform: rotate(-540deg) scale(0);
	1099	+ opacity: 0;
	1100	+ }
	1101	+
	1102	+ 100% {
	1103	+ -webkit-transform: rotate(0) scale(1);
	1104	+ transform: rotate(0) scale(1);
	1105	+ opacity: 1;
	1106	+ }
	1107	+}
	1108	+
	1109	+@keyframes swill-in-fwd {
	1110	+ 0% {
	1111	+ -webkit-transform: rotate(800deg) scale(0);
	1112	+ transform: rotate(800deg) scale(0);
	1113	+ opacity: 0;
	1114	+ }
	1115	+
	1116	+ 100% {
	1117	+ -webkit-transform: rotate(0) scale(1);
	1118	+ transform: rotate(0) scale(1);
	1119	+ opacity: 1;
	1120	+ }
	1121	+}
	1122	+
	1123	+
	1124	+.accordion {
	1125	+ height: 550px;
	1126	+ padding: 2rem;
	1127	+ cursor: pointer;
	1128	+ flex: 1;
	1129	+ justify-content: space-between;
	1130	+ background-size: cover;
	1131	+ background-position: center;
	1132	+ background-repeat: no-repeat;
	1133	+ position: relative;
	1134	+ transition: all 0.7s ease-in-out;
	1135	+ filter: brightness(80%);
	1136	+ z-index: 1;
	1137	+}
	1138	+
	1139	+
	1140	+.slideText p:first-child {
	1141	+ font-size: 3rem;
	1142	+ font-family: 'GmarketSansBold';
	1143	+ font-weight: bold;
	1144	+ font-style: normal;
	1145	+ z-index: 5;
	1146	+ color: #fff;
	1147	+ text-align: left;
	1148	+}
	1149	+
	1150	+.slideText p:first-child span {
	1151	+ color: #ffffff64;
	1152	+}
	1153	+
	1154	+.slideText p:first-child,
	1155	+.slideText p:last-child {
	1156	+ text-align: left;
	1157	+ color: #fff;
	1158	+}
	1159	+
	1160	+
	1161	+.slideTextDtail {
	1162	+ text-align: left;
	1163	+ padding: 0 2rem;
	1164	+}
	1165	+
	1166	+.slideText p:last-child,
	1167	+.slideTextDtail p {
	1168	+ margin-bottom: 1rem;
	1169	+ font-size: 1.5rem;
	1170	+ opacity: 0;
	1171	+ color: #333;
	1172	+}
	1173	+
	1174	+.slideImg {
	1175	+ padding: 2rem;
	1176	+ width: 100%;
	1177	+ opacity: 0;
	1178	+}
	1179	+
	1180	+.slideImg img {
	1181	+ border-radius: 1rem;
	1182	+ width: 100%;
	1183	+ height: 250px !important;
	1184	+}
	1185	+
	1186	+
	1187	+.accordion.active {
	1188	+ flex: 3;
	1189	+ filter: brightness(100%);
	1190	+
	1191	+}
	1192	+
	1193	+.accordion.active .slideImg {
	1194	+ opacity: 1;
	1195	+ object-fit: contain;
	1196	+
	1197	+}
	1198	+
	1199	+
	1200	+.slideTextDtail.active p:first-child span {
	1201	+ /* color: #b1a1c3; */
	1202	+ z-index: 1;
	1203	+}
	1204	+.accordion.active .accordion-num ,.accordion.active .accordion-num span{
	1205	+ color: #80649b;
	1206	+
	1207	+}
	1208	+.accordion.active p,
	1209	+.slideTextDtail.active p {
	1210	+ opacity: 1;
	1211	+ color: #333;
	1212	+ /* transition: opacity 0.3s ease-in 0.4s; */
	1213	+}
	1214	+
	1215	+.accordion-box p {
	1216	+ width: 50%;
	1217	+}
	1218	+
	1219	+.about-vision-box {
	1220	+ width: 100%;
	1221	+ flex-wrap: nowrap;
	1222	+}
	1223	+
	1224	+.about-vision-box img {
	1225	+ width: 40%;
	1226	+ object-fit: contain !important;
	1227	+
	1228	+}
	1229	+
	1230	+
	1231	+.history-wrap{
	1232	+ width: 100%;
	1233	+ height: 100%;
	1234	+}
	1235	+.timeline{
	1236	+ width: 100%;
	1237	+ height: 100%;
	1238	+ height: calc(100% - 300px);
	1239	+}
	1240	+.contents{
	1241	+ height: 100%;
	1242	+ overflow-y: auto;
	1243	+}
	1244	+.month{
	1245	+ width: 100px;
	1246	+ font-size: 2rem;
	1247	+ font-weight: 700;
	1248	+ text-align: right !important;
	1249	+ color: #213F99 ;
	1250	+}
	1251	+.year{
	1252	+ width: 200px;
	1253	+ color: #D6DEF6;
	1254	+ font-weight: 900;
	1255	+ font-size: 2rem;
	1256	+ transition: all 0.2s ease;
	1257	+ padding: 2rem 0;
	1258	+}
	1259	+.year span{
	1260	+ font-size: 2rem;
	1261	+ font-weight: 900;
	1262	+
	1263	+}
	1264	+.active-year {
	1265	+ font-size: 7rem;
	1266	+ font-weight: 900;
	1267	+ color: #213F99; /* 색상은 원하는 대로 변경하세요 */
	1268	+}
	1269	+.month-text p{
	1270	+ margin-bottom: 1rem;
	1271	+}
	1272	+
	1273	+
	1274	+.month-text img{
	1275	+ border: 1px solid #808080;
	1276	+ padding: 5px;
	1277	+ width: 120px;
	1278	+ margin-right: 1rem;
	1279	+ margin-bottom: 1rem;
	1280	+}
	1281	+
	1282	+
	1283	+
	1284	+.active-year {
	1285	+ color: #213F99 ;
	1286	+ font-weight: bold;
	1287	+ cursor: default;
	1288	+}
	1289	+
	1290	+/* portpoilo */
	1291	+
	1292	+.customized-wrap-title,.etc-wrap-title{
	1293	+ width: 100%;
	1294	+ height: 60px;
	1295	+}
	1296	+.customized-wrap-title h1{
	1297	+ font-size: 4rem;
	1298	+
	1299	+}
	1300	+.customized-wrap-title p{
	1301	+ font-size: 1.5rem;
	1302	+
	1303	+}
	1304	+.customized-box p{
	1305	+ font-size: 2rem;
	1306	+ font-weight: 500;
	1307	+}
	1308	+.etc-wrap-title h1{
	1309	+ font-size: 6rem;
	1310	+}
	1311	+.etc-box{
	1312	+ width: 49%;
	1313	+ border: 1px solid red;
	1314	+}
	1315	+.etc-box img{
	1316	+ width: 100%;
	1317	+ object-fit: contain;
	1318	+}
	1319	+.etc-box-title p{
	1320	+ font-size: 2.5rem;
706	1321	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -17,49 +17,51 @@
17	17
18	18
19	19
20		- <title>Solution</title>
	20	+ <title>TAKENSOFT</title>
21	21	</head>
22	22
23	23	<body>
24	24	<div id="header"></div>
25	25	<div class="swiper mySwiper">
26	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>
	27	+ <div class="swiper-slide">
	28	+ <div class="taken-wrap slide-wrap ">
	29	+ <div class="text-area flex">
	30	+ <div class="solution-title mb90">
	31	+ <p>Taken BI Manager v1.0</p>
40	32	</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>
	33	+ <div class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	34	+ <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
	35	+ <img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
	36	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
	37	+ <p>데이터 수집,저장,관리</p>
	38	+ <p>솔루션 제공 기반 맞춤형 서비스</p>
	39	+ </div>
46	40	</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>
	41	+ <div class="taken-area taken-conteiner flex" style="gap: 20px; height: 100%;">
	42	+ <div class="text-after">
	43	+ <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
	44	+ <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
	45	+ 서비스를 제공합니다.</p>
	46	+ <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P>
	47	+ </div>
	48	+ <div class="solution-text-box">
	49	+ <h3 class="text-box-title mb10">주요기능</h3>
	50	+ <p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p>
	51	+ <p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p>
	52	+ <p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p>
	53	+ </div>
	54	+ <div class="solution-text-box">
	55	+ <h3 class="text-box-title mb10">특장점</h3>
	56	+ <div class="flex " style="gap: 30px;">
	57	+ <div class="flex-column">
	58	+ <p>- DB 연계형 데이터 수집 서비스</p>
	59	+ <p>- 데이터 시각화 시스템</p>
	60	+ </div>
	61	+ <div class="flex-column">
	62	+ <p>- 데이터 저장/관리 시스템</p>
	63	+ <p>- 관리 서비스 시스템</p>
	64	+ </div>
63	65	</div>
64	66	</div>
65	67	</div>
...	...	@@ -67,19 +69,192 @@
67	69	</div>
68	70	</div>
69	71	</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>
	72	+ <div class="swiper-slide">
	73	+ <div class="taken-wrap slide-wrap ">
	74	+ <div class="text-area flex">
	75	+ <div class="traffic-title mb50">
	76	+ <p>Traffic Agent</p>
	77	+ </div>
	78	+ <div class="flex justify-end traffic-button">
	79	+ <button>영상보기</button>
	80	+ </div>
	81	+ <div class="flex justify-between align-end "
	82	+ style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	83	+
	84	+ <div class="taken-area taken-conteiner flex-column justify-between "
	85	+ style="gap: 20px; height: 100%;">
	86	+ <div class="text-after ">
	87	+ <p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
	88	+
	89	+ </div>
	90	+ <div class="flex" style="gap: 20px; height: calc(100% - 65px);">
	91	+
	92	+ <div class="solution-text-box " style="padding: 15px 33px; ">
	93	+ <h3 class="text-box-title mb10">주요기능</h3>
	94	+ <p>- 스마트폰 사용자로부터 실시간 위치 정보를 수집</p>
	95	+ <p>- 반복 이동 거리에 대한 교통상황 정보 비교 분석</p>
	96	+ <p>- 안개 발생시 도로교통위험 상황 분석 AI 모델을 탑재한 모니터링 시스템</p>
	97	+ <p>- 도로교통 위험 상황분석 및 AI 모델을 활용하여 안개 감지 및 위험 경고 알림 기능 탑재</p>
	98	+ </div>
	99	+ <div class="solution-text-box">
	100	+ <h3 class="text-box-title mb10">특장점</h3>
	101	+
	102	+ <p>- 머신 러닝 및 활동 기반 교통 모형 활용 이동 패턴 분석</p>
	103	+ <p>- 이동 거리 및 이동 시간 바탕 최적 경로 추천 기능</p>
	104	+ <p>- 위치정보 공유 및 검색 기능</p>
	105	+
	106	+
	107	+ </div>
	108	+ </div>
	109	+ </div>
	110	+ <div class="traffic-area flex align-end justify-end" style="height: 100%; width: 100%;">
	111	+
	112	+ <img src="../../resources/img/common/traffic-img.png" alt="" class="mb30"
	113	+ style="height: 356px;">
	114	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	115	+ <p>스마트폰 사용자로부터<br> 실시간 위치 정보 수집</p>
	116	+ <p>반복 이동 거리에 대한<br> 교통상황 정보 비교 분석</p>
	117	+ </div>
	118	+ </div>
	119	+ </div>
	120	+ </div>
	121	+ </div>
	122	+ </div>
	123	+ <div class="swiper-slide">
	124	+ <div class="taken-wrap slide-wrap ">
	125	+ <div class="text-area flex">
	126	+ <div class="ai-title mb50">
	127	+ <p>AI 안전통합 횡단보도 관리 솔루션</p>
	128	+ </div>
	129	+ <div class="flex justify-end traffic-button">
	130	+ <button>영상보기</button>
	131	+ </div>
	132	+ <div class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	133	+ <div class="ai-area flex align-end " style="height: 100%; width: 100%;">
	134	+
	135	+ <img src="../../resources/img/common/ai-img.png" alt="" class="mb30">
	136	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	137	+ <p>보행자 상황을 내비게이션에<br>전달하여 우회전 사고 예방</p>
	138	+ <p>GIS 기반 통합 관제<br> 시스템 구축</p>
	139	+ </div>
	140	+ </div>
	141	+ <div class="taken-area taken-conteiner flex align-end" style="gap: 20px;">
	142	+
	143	+ <div class="text-after" style="height: calc(100% - 348px);">
	144	+ <p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
	145	+ </div>
	146	+ <div class="solution-text-box ">
	147	+ <h3 class="text-box-title mb10">주요기능</h3>
	148	+ <p>- 운전자를 위한 내비게이션 안내 서비스 제공</p>
	149	+ <p>- 특정 이벤트 (무단횡단,우회전 감지) 발생시 플랫폼에서 이벤트 발생 정보 확인 기능</p>
	150	+ <p>- 최적의 실시간 관제 서비스 구축 및 원격지 장비 관리 효율화</p>
	151	+ <p>- 원격지 제어 관리 시스템 지원(음성 제어, 음원 선택기능, 데이터 전송 제어,원격 리셋 가능) </p>
	152	+ </div>
	153	+ <div class="solution-text-box">
	154	+ <h3 class="text-box-title mb10">특장점</h3>
	155	+ <div class="flex " style="gap: 30px;">
	156	+ <div class="flex-column">
	157	+ <p>- 횡단보도 관제 분석 시스템 구축</p>
	158	+ <p>- 현장모니터링 화면 구성</p>
	159	+ </div>
	160	+ <div class="flex-column">
	161	+ <p>- 모니터링 대시보드 구축(데이터 분석 시각화)</p>
	162	+ <p>- GIS 기반 관제 화면 구성</p>
	163	+ </div>
	164	+ </div>
	165	+ </div>
	166	+ </div>
	167	+ </div>
	168	+ </div>
	169	+ </div>
	170	+ </div>
	171	+ <div class="swiper-slide meta-wrap">
	172	+ <div class="taken-wrap slide-wrap ">
	173	+ <div class="text-area flex">
	174	+ <div class="meta-title mb50">
	175	+ <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
	176	+ </div>
	177	+ <div class="flex justify-end traffic-button">
	178	+ <button>영상보기</button>
	179	+ </div>
	180	+ <div class="flex justify-between align-end "
	181	+ style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	182	+
	183	+ <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
	184	+ <div class="text-after ">
	185	+ <p>공간컴퓨팅 기반으로 온라인과 오프라인을 연결하여 사용자간 소통/공감이 가능한 지역 공감 가상화 컨텐츠를 제공합니다.</p>
	186	+
	187	+ </div>
	188	+ <div class="solution-text-box" style="padding: 15px 33px;">
	189	+ <h3 class="text-box-title mb10">주요기능</h3>
	190	+ <p>- 가상현실의 인터페이스와 물리공간 간의 AI 기반으로 상호작용 및 서비스 지원</p>
	191	+ <p>- 사용자의 이동데이터(걸음수)를 연동한 WEB기반 메타버스 플랫폼</p>
	192	+ <p>- 물리공간,가상공간 데이터를 연결하여 음성 및 문자를 활용한 온/오프라인 소통</p>
	193	+ </div>
	194	+ <div class="solution-text-box">
	195	+ <h3 class="text-box-title mb10">특장점</h3>
	196	+
	197	+ <p>- 3D 기반의 가상공간 제공 서비스(3차원 공간 정보 데이터 구현)</p>
	198	+ <p>- 실시간 채팅 및 방명록 기능 탑재</p>
	199	+ <p>- 이동데이터를 수집하여 걸음 수 측정을 통한 위치 공유 서비스</p>
	200	+
	201	+
	202	+ </div>
	203	+ </div>
	204	+ <div class="meta-area flex align-end " style="height: 100%; width: 100%;">
	205	+
	206	+ <img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
	207	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	208	+ <p>가상과 현실공간을<br>연결하는 플랫폼</p>
	209	+ <p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>
	210	+ </div>
	211	+ </div>
	212	+ </div>
	213	+ </div>
	214	+ </div>
	215	+ </div>
	216	+ <div class="swiper-slide">
	217	+ <div class="taken-wrap slide-wrap ">
	218	+ <div class="text-area flex">
	219	+ <div class="smart-title mb90">
	220	+ <p>스마트제조 데이터 모니터링 서비스</p>
	221	+ </div>
	222	+ <div class="flex justify-between align-end "
	223	+ style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	224	+ <div class="smart-area flex align-end " style="height: 100%; width: 100%;">
	225	+
	226	+ <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
	227	+ <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
	228	+ <p>공정상의 데이터를 수집<br>데이터 활용 체계 마련</p>
	229	+ <p>웹 및 앱 모니터링<br> 시스템 구축</p>
	230	+ </div>
	231	+ </div>
	232	+ <div class="taken-area taken-conteiner flex" style="gap: 20px; height: 100%;">
	233	+
	234	+ <div class="text-after">
	235	+ <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
	236	+ </div>
	237	+ <div class="solution-text-box">
	238	+ <h3 class="text-box-title mb10">주요기능</h3>
	239	+ <p>- 실제 제조 라인 공정 특징을 반영한 웹 및 앱 모니터링 서비스 구축</p>
	240	+ <p>- 데이터 수집, 분석, 시각화를 통한 차트,플롯, 인포그래픽 등 데이터별 맞춤 시각 그래픽 화면 적용</p>
	241	+ <p>- 내부 공정 관련 데이터의 AI 가공을 통한 데이터를 활용하여 공정 현황을 통합적으로 파악</p>
	242	+ </div>
	243	+ <div class="solution-text-box">
	244	+ <h3 class="text-box-title mb10">특장점</h3>
	245	+ <p>반응형 모니터링 서비스로 PC, 모바일, 테블릿 등 다양한 기기 지원</p>
	246	+ <p>이상 상태 조건 데이터 발견 시 문제 발생 알림</p>
	247	+ <p>현재 공정 과정 모니터링 기능</p>
	248	+ </div>
	249	+ </div>
	250	+ </div>
	251	+ </div>
	252	+ </div>
	253	+ </div>
	254	+
79	255	</div>
80		-
81		- </div>
82		-
	256	+
	257	+ </div>
83	258	<div id="footer"></div>
84	259
85	260
...	...	@@ -93,14 +268,60 @@
93	268
94	269
95	270	<script>
96		- var swiper = new Swiper(".mySwiper", {
97		- direction: "vertical",
98		- slidesPerView: 1,
99		- spaceBetween: 30,
100		- mousewheel: true,
	271	+ $(document).ready(function () {
	272	+ $("#btnHeadquarter").click(function () {
	273	+ $("#btnHeadquarter").addClass('on');
	274	+ $("#btnDaeguBranch").removeClass('on');
	275	+ $("#contentDaeguBranch").hide();
101	276
	277	+ $("#contentHeadquarter").show();
	278	+ });
	279	+
	280	+ $("#btnDaeguBranch").click(function () {
	281	+ $("#btnDaeguBranch").addClass('on');
	282	+ $("#btnHeadquarter").removeClass('on');
	283	+
	284	+ $("#contentHeadquarter").hide();
	285	+
	286	+ $("#contentDaeguBranch").show();
	287	+
	288	+
	289	+
	290	+
	291	+
	292	+ });
102	293	});
103	294
	295	+
	296	+ var swiper = new Swiper(".mySwiper", {
	297	+ direction: "vertical",
	298	+ slidesPerView: 1,
	299	+ spaceBetween: 30,
	300	+ mousewheel: true,
	301	+ on: {
	302	+
	303	+ slideChange: function () {
	304	+ var currentIndex = this.realIndex;
	305	+ if (currentIndex === 0) {
	306	+ $('#header').removeClass('active');
	307	+ } else {
	308	+ $('#header').addClass('active');
	309	+ }
	310	+ var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
	311	+ if (this.activeIndex === lastIndex) {
	312	+ $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
	313	+ } else {
	314	+ $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
	315	+ }
	316	+ },
	317	+ }
	318	+ });
	319	+ $(function () {
	320	+ $("#header").load("../layout/Header.html");
	321	+ $("#footer").load("../layout/footer.html");
	322	+ // $("#footer").hide();
	323	+
	324	+ });
104	325
105	326	</script>
106	327
...	...	@@ -108,41 +329,76 @@
108	329
109	330
110	331	<style scoped>
	332	+ /* 스크롤바 없애기 */
	333	+ body {
	334	+ -ms-overflow-style: none;
	335	+ /* 인터넷 익스플로러 */
	336	+ scrollbar-width: none;
	337	+ /* 파이어폭스 */
	338	+ }
	339	+
	340	+ ::-webkit-scrollbar {
	341	+ display: none;
	342	+ }
	343	+
	344	+ #header {
	345	+ position: fixed;
	346	+ top: 0;
	347	+ z-index: 3;
	348	+ border-bottom: 1px solid #ced4da;
	349	+ background-color: white;
	350	+ }
	351	+
	352	+ #header .header .logo {
	353	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	354	+ width: 200px;
	355	+ background-size: contain;
	356	+ height: 25px;
	357	+
	358	+
	359	+ }
	360	+
	361	+ #header .header nav li a {
	362	+ color: #333;
	363	+
	364	+ }
	365	+
	366	+
	367	+
111	368	html,
112	369	body {
113		- position: relative;
114		- height: 100%;
	370	+ position: relative;
	371	+ height: 100%;
115	372	}
116	373
117	374	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;
	375	+ background: #eee;
	376	+ font-family: 'Pretendard';
	377	+ font-size: 14px;
	378	+ color: #000;
	379	+ margin: 0;
	380	+ padding: 0;
124	381	}
125	382
126	383	.swiper {
127		- width: 100%;
128		- height: 100%;
	384	+ width: 100%;
	385	+ height: 100%;
129	386	}
130	387
131	388	.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;
	389	+ text-align: center;
	390	+ font-size: 18px;
	391	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	392	+ display: flex;
	393	+ justify-content: center;
	394	+ align-items: center;
138	395	}
139	396
140	397	.swiper-slide img {
141		- display: block;
142		- object-fit: cover;
	398	+ height: 356px;
	399	+ display: block;
	400	+ object-fit: cover;
143	401	}
144		-
145		-
146	402	</style>
147	403
148	404	</html> (파일 끝에 줄바꿈 문자 없음)

Delete comment