Commit @4447a753fd034fd1cea164240e2899c2ee994cfd

mycoms 04-16

240416 김하영

@4447a753fd034fd1cea164240e2899c2ee994cfd

50a1eb0

4447a75

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


         background-color: #fff;
     }
 
-    nav ul li a {
-        font-size: 2rem !important;
+    .mobil-menu nav ul li a {
+        font-size: 1.6rem !important;
+    }
+
+    .clicked {
+        margin: 0 auto;
+        width: 100px;
     }
 
     .mobil-menu ul li ul li a {
 
         font-weight: 300;
         color: #333;
-        font-size: 1.5rem !important;
+        font-size: 1.4rem !important;
     }
 
     nav>ul {

         background-color: #fff;
     }
 
-    #header{
+    #header {
         position: fixed !important;
         top: 0;
     }

 
     .accordion.active .accordion-num,
     .accordion.active .accordion-num span {
-        font-size: 2rem;
+        font-size: 2.4rem;
+        margin-bottom: 0rem !important;
     }
 
     .history-box {
         -ms-overflow-style: none;
         /* 인터넷 익스플로러 */
         scrollbar-width: none;
-        height: 100% !important;
+        height: 80% !important;
+        margin-top: 20px;
     }
-.history-area{
-    gap: 0px !important;
-}
+
+    .history-area {
+        gap: 0px !important;
+    }
+
+    .slideTextDtail p {
+        display: none;
+    }
+
     .solution-box {
         width: 100%;
         height: calc(100% - 182px) !important;

     }
 
     .box p:nth-child(1) {
-        font-size: 1.4rem;
+        font-size: 1.5rem;
         font-weight: 600;
     }
 

         height: 100% !important;
         padding: 6rem 2rem;
     }
-    .year span{
-display: none;    }
+
+    .year span {
+        display: none;
+    }
+
     .innerSwiper-title {
         font-size: 1.7rem;
     }

     }
 
     .portfolio-text {
-        padding-left: 2rem;
         margin-bottom: 1rem;
     }
 

         background-size: 20px;
         transform: translateX(-50%);
     }
-  
+
     .marketing-area {
         width: 100%;
         grid-template-columns: 1fr;

     .address-tile {
         width: 100%;
         text-align: center;
-        font-size: 1.2rem;
+        font-size: 1.4rem;
         padding-left: 0px;
     }
 
     .address-subtitle {
-        font-size: 1.1rem !important;
+        font-size: 1.3rem !important;
     }
 
     .address-tile::after {

 
     .map-btn button {
         /* width: 40%; */
-        font-size: 1.2rem;
+        font-size: 1.5rem;
+        font-weight: 500;
     }
 
     .address-box {

 
     .container {
         width: 100%;
-        height: 70% !important;
+        height: 80% !important;
     }
 
     .about-title-sub {

 
     .month-text p {
         font-size: 1.2rem;
+        margin-bottom: 0rem;
     }
 
     .about-radius,

 
     .silde-box .accordion {
         height: 10px;
-        padding: 0.5rem;
+        padding: 1.5rem;
     }
 
     .silde-box .slideImg {
         display: none;
     }
 
-    .slideText {
-        padding: 10px;
+    .accordion2,
+    .accordion1,
+    .accordion3 {
+        background-position: center;
     }
+
+    .accordion2::after,
+    .accordion1::after,
+    .accordion3::after {
+        font-size: 2.4rem;
+        top: 8px;
+        left: 15px;
+    }
+
+    .accordion2::before,
+    .accordion1::before,
+    .accordion3::before {
+        font-size: 2.4rem;
+        top: 8px;
+        left: 60px;
+    }
+
+    .about .about-title p {
+        margin-bottom: 0rem !important;
+    }
+
+
 
     .slideText p:last-child,
     .slideTextDtail p {
-        font-size: 1.2rem;
+        font-size: 1.5rem;
     }
 
     .slideText p:first-child {
         font-size: 2rem;
     }
 
-    .slideTextDtail p {
-        display: none;
+    .month-text p::after {
+        left: -6%;
+    }
+
+    .month-text p {
+        margin-left: 15px;
+        margin-bottom: 10px;
     }
 
     .slideTextDtail p:nth-child(1) {
         display: block !important;
-        font-size: 1.2rem;
+        font-size: 1.3rem;
         border-bottom: 0px !important;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0rem !important;
+    }
+
+    .slideTextDtail-box p {
+        padding-left: 0px;
+    }
+
+    .section .flex {
+        width: 100%;
+    }
+
+    .month-text {
+        width: 100%;
     }
 
     .slideTextDtail {

     .month-text img {
         width: 100px !important;
         height: 150px;
+        margin: 1rem;
     }
 
     .text-section {

     .month {
         width: 100%;
         text-align: left !important;
+        margin-bottom: 5px;
     }
 
     .month-text div {
         width: 100%;
-        flex-wrap: nowrap;
     }
 
     .taken-wrap-box {

 
     .solution-area {
         gap: 10px !important;
+    }
+
+    .about .content .flex {
+        margin-bottom: 0rem !important;
     }
 
     .taken-area img,

     #dataanalysis {
         height: 100% !important;
         overflow-y: scroll !important;
+        padding-top: 120px;
     }
 
     #customized,

         width: 100%;
     }
 
+    #customized .box-wrap p {
+        font-size: 1.6rem;
+        margin: 2rem 0;
+    }
+
     #smart .box-wrap-title {
         font-size: 1.6rem !important;
         font-weight: 600 !important;

     }
 
     .solution-text-box p {
-        padding-left: 5px;
+        padding-left: 12px;
     }
 
     .solution-text-box div {
         gap: 0px !important;
         flex-direction: column;
+        margin-left: 0px !important;
     }
 
     .solution-text-box div div p {

         flex-wrap: wrap !important;
     }
 
+    #Data .box-wrap p {
+        font-size: 1.6rem;
+        font-weight: 600 !important;
+        margin: 2rem 0;
+    }
 
-  
 
     .traffic-video {
         width: 90%;

         font-weight: 500;
     }
 
+    .analysis-text p {
+        height: 100%;
+        padding: 0px;
+        margin-top: 2rem;
+    }
 
     .solution .swiper-slide img {
         width: 100%;

         text-align: left;
     }
 
-
-    .box:hover,
-    .box-wrap div img:hover {
-        transform: scale(1);
-    }
-
+ #etc .etc-box-title{
+    margin: 2rem 0;
+ }
     .visual-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;

         grid-template-columns: 1fr 1fr 1fr !important;
     }
 
-.etc-box{
-    margin-left: 0px !important;
-    margin-right: 0px !important;
-}
+    .etc-box {
+        margin-left: 0px !important;
+        margin-right: 0px !important;
+    }
+
     .box-wrap img {
         width: 100%;
         padding-bottom: 0rem !important;

     .smart-title {
         margin-bottom: 10px !important;
     }
-    .year{
+
+    .year {
         font-size: 2rem;
     }
+
     .box-wrap div p {
         text-align: center;
         margin: 0 auto;
         word-break: keep-all;
-        font-weight: 400 !important;
-        padding: 10px 0 !important;
-        margin-bottom: 0rem !important;
+
     }
-    .etc-text-deco p::after{
+
+    .etc-text-deco p::after {
         display: none;
     }
-    .solution-deco p{
+
+    .solution-deco p {
         margin-left: 0.4rem;
     }
-.traffic-img-box{
-    width: 100% !important;
-}
-.traffic-img-box img{
-    width: 100% !important;
-    object-fit: cover !important;
-}
+
+    .traffic-img-box {
+        width: 100% !important;
+    }
+
+    .traffic-img-box img {
+        width: 100% !important;
+        object-fit: cover !important;
+    }
+
     .etc-box-title {
         font-weight: 700;
         text-align: center !important;
         font-size: 1.6rem !important;
+    }
+
+    .solution-deco p::after {
+        left: -2%;
     }
 
     .box-wrap div div {

         margin-bottom: 0px !important;
         padding-top: 0rem !important;
     }
-    
+
 
     .customized-box {
         width: 100%;

         grid-template-columns: 1fr;
         justify-content: center;
         text-shadow: 2px 2px 5px #33333354;
-        gap: 5px;
+        gap: 10px;
     }
 
     .box1,

         width: 100%;
         font-size: 1.5rem;
         background-size: cover;
+        border-radius: 10px;
         background-position: center;
         padding: 10px !important;
     }

         width: 100%;
         text-align: right;
     }
-    .traffic-img-box{
+
+    .traffic-img-box {
         width: 100% !important;
     }
-    .traffic-img-box img{
+
+    .traffic-img-box img {
         width: 100% !important;
         object-fit: cover !important;
     }

         font-weight: 300;
         color: #333;
         font-size: 1.5rem !important;
+    }
+
+    .clicked {
+        margin: 0 auto;
+        width: 100px;
     }
 
     nav>ul {

         background-color: #fff;
     }
 
-    .traffic-img-box img{
+    .traffic-img-box img {
         width: 100% !important;
         object-fit: cover !important;
     }

         margin-bottom: 0rem;
         word-break: keep-all;
     }
-    .accordion-sub-text{
+
+    .accordion-sub-text {
         font-size: 1.6rem !important;
     }
+
     .marketing-wrap-title h1 {
         font-size: 3rem;
     }

         scrollbar-width: none;
         height: 80% !important;
     }
-    .slideTextDtail p{
+
+    .slideTextDtail p {
         border-bottom: 0px !important;
     }
-    .business-box{
+
+    .business-box {
         display: none;
     }
 

         width: 100%;
         grid-template-columns: 1fr;
     }
-    .month{
+
+    .month {
         width: 100%;
     }
+
     .marketing-title {
         font-size: 1.8rem;
     }

         width: 100%;
         padding: 9rem 2rem;
     }
-.etc-box{
-    margin-left: 0px !important;
-    margin-right: 0px !important;
-}
+
+    .etc-box {
+        margin-left: 0px !important;
+        margin-right: 0px !important;
+    }
+
     /* footer img {
         width: 100px !important;
     } */

         padding: 10px;
     }
 
-    
+
     .slideTextDtail p {
         font-size: 1.5rem;
     }

         font-size: 2rem;
     }
 
- 
+
     .slideTextDtail {
         padding: 0 1rem;
+    }
+
+    .address-subtitle {
+        font-size: 1.4rem !important;
+        margin: 0 auto;
     }
 
     .about-title {

         height: 200px !important;
         margin-bottom: 20px !important;
     }
-.history-area{
-    gap: 0px !important;
-}
+
+    .history-area {
+        gap: 0px !important;
+    }
 
     .month-text img {
         width: 100px !important;
         height: 215px;
     }
 
-    
+
     .about-vision-box img {
         height: 150px;
         display: block;

         width: 100%;
         border-bottom: 1px solid #333;
     }
-    .year{
+
+    .year {
         justify-content: center;
         display: flex;
         align-items: center;
         height: 100%;
     }
+
     .active-year {
         font-weight: 900;
         font-size: 4rem;

     }
 
     #smart .box-wrap-title {
+        font-size: 2rem !important;
         display: block !important;
         font-weight: 600 !important;
     }

         width: 100%;
     }
 
-    #smart .etc-wrap-text div p,
     #etc .etc-box p {
-        font-size: 2rem !important;
+        font-size: 1.6rem !important;
         padding: 0px;
         font-weight: 200;
-        display: none;
     }
 
     .solution-area {

         margin-bottom: 5px;
     }
 
-    .etc-wrap-text div{
+    .etc-wrap-text div {
         flex-wrap: wrap !important;
     }
-   
+
 
     .traffic-video {
         width: 90%;

 
     .etc-wrap-text p,
     .box-wrap p {
-        font-size: 2rem;
+        font-size: 1.6rem !important;
         margin-bottom: 2rem;
     }
 
-
+    .etc-text-deco p::after{
+        display: none;
+    }
     .solution .swiper-slide img {
         width: 100%;
         height: 100px !important;

         transform: translateY(0px);
     }
 
-    .innerSwiper .swiper-slide img{
+    .innerSwiper .swiper-slide img {
         height: 100%;
     }
 

 
     }
 
-    .text-main,
-    .solution-text,
-    .portfolio-text,
-    .map-text,
-    .about-title p:nth-child(1),
-    .marketing-wrap-title h1 {
-        font-size: 2.2rem !important;
-    }
 
 
     .solution-title p,

 
     .sub-text,
     .solution-sub-text {
-        font-size: 1rem !important;
+        font-size: 2rem !important;
     }
 
-
-    .solution-box {
-        width: 100%;
-        height: calc(100% - 182px) !important;
-        flex-direction: column;
-        flex-wrap: wrap !important;
-        align-items: center;
-        justify-content: space-between;
+    .clicked {
+        margin: 0 auto;
+        width: 100px;
     }
 
     .slide-solution .text-area {

 
     .box-wrap-title {
         font-size: 1.3rem !important;
-        font-weight: 800;
+        font-weight: 600;
         margin-bottom: 0px;
     }
 
-    .etc-wrap-text,
-    .box-wrap {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: 5px;
-    }
 
     .etc-wrap-text p {
-        padding: 11px 10px;
+        text-align: center;
+        font-size: 1.7rem;
     }
 
     .header-area {

     .mobil-wrap {
         display: block;
     }
-
+    .etc-text-deco p::after{
+        display: none;
+    }
     .web-menu {
         display: none;
     }

     .swiper {
         width: 50%;
         height: 100%;
-        padding: 2rem;
     }
 
     .swiper-slide {
         width: 100%;
 
+    }
+
+    .text-main,
+    .solution-text {
+        font-size: 4rem !important;
+    }
+
+    #map1,
+    #map2 {
+        width: 740px !important;
+    }
+
+    #contentHeadquarter,
+    #contentDaeguBranch {
+        height: 300px !important;
+    }
+
+    .address-subtitle {
+        font-size: 1.4rem !important;
     }
 
     .slide-wrap {

     .innerSwiper-title {
         font-size: 1.5rem;
     }
-.history .text-area{
-    padding-top: 120px;
-}
+
+    .history .text-area {
+        padding-top: 120px;
+    }
+
     .innerSwiper .swiper-slide {
         width: 100% !important;
         padding: 10px;
     }
-.history-area{
-    gap: 0px !important;
-}
+
+    .history-area {
+        gap: 0px !important;
+    }
+
     .sub-text-area {
         margin-bottom: 1rem !important;
     }

 
     .address-tile {
         width: 100%;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
     }
 
     .address-subtitle {
-        font-size: 1.1rem !important;
+        font-size: 1.6rem !important;
     }
 
     .address-tile::after {
-        display: none;
+        left: 1%;
     }
 
     .map-btn {

         font-size: 1.5rem;
     }
 
-    .silde-box {
-        /* height: 75%; */
-        /* display: flex; */
-        /* flex-direction: column; */
-    }
 
-    /* .silde-box .accordion {
-        height: 10px;
-        padding: 0.5rem;
-    } */
     .about-vision-box {
         flex-wrap: nowrap;
     }

         font-size: 1.2rem;
     }
 
+    .content img {
+        width: 38%;
+    }
+
     .slideTextDtail p {
         font-size: 1.3rem;
         border-bottom: 0px !important;

 
     .about img {
         width: 100%;
-        height: 150px !important;
+        /* height: 300px !important; */
+    }
+
+    .about-vision-box img {
+        height: 300px;
     }
 
     .about-vision-box {

     .smart-title::after {
         display: none;
     }
-    .traffic-video{
+
+    .traffic-video {
         width: 90%;
     }
 

         width: 100%;
     }
 
-    .etc-wrap-text {
-        width: 100%;
-        height: 75%;
 
-    }
 
-    .visuali .etc-wrap-text,
-    .dataanalysis .etc-wrap-text,
-    .customized .box-wrap {
-        display: grid;
-        gap: 10px;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
+
 
     .etc-grid-box {
         flex-wrap: nowrap;

         width: 50%;
     }
 
-    .etc-wrap-text img {
-        width: 90%;
-        height: 60%;
-    }
 
-    .etc-wrap-text p,
+
     .box-wrap p {
         padding: 10px !important;
         font-size: 1.2rem !important;
     }
 
     .box-wrap-title {
-        font-size: 1.5rem !important;
+        font-size: 2rem !important;
     }
 
     .text-box-title::after {

         height: 130px !important;
 
     }
-    #footer img{
-        width: 100px !important;
-        height: 50px !important;
-    }
+
     .swiper-slide img {
         object-fit: contain;
     }

 
     .logo {
         width: 50% !important;
-        height: 14px !important;
         background-size: cover;
+    }
+
+    .accordion {
+        padding: 1rem 3rem;
+    }
+
+    .accordion1::before,
+    .accordion2::before,
+    .accordion3::before {
+        left: 11px;
     }
 
     .mobil-wrap {

 
 
     .box-wrap img {
-        width: 100%;
         padding-bottom: 0rem !important;
         object-fit: contain;
     }

     }
 
     .box-wrap div div {
-        display: none;
         height: 37% !important;
     }
 
     .etc-wrap-title h1,
     .customized-wrap-title h1 {
-        font-size: 2.5rem !important;
+        font-size: 3rem !important;
     }
 
     .etc-wrap-title p,
     .customized-wrap-title p {
-        font-size: 1.2rem !important;
+        font-size: 1.5rem !important;
     }
 
-    .etc-wrap-title {
-        /* height: 100%; */
-        margin-bottom: 10px !important;
-    }
-
-    .customized-box {
-        width: 100%;
-        display: grid;
-        gap: 10px;
-        grid-template-columns: 1fr 1fr;
-    }
+  
 
     .customized-box div {
         width: 100%;

     }
 
     .solution-box {
-        width: 100%;
-        height: calc(100% - 182px) !important;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        justify-content: center;
-        gap: 1px;
+        gap: 10px;
     }
 
     .box1,

         font-size: 1.2rem;
         background-size: cover;
         background-position: center;
-        padding: 10px !important;
+        padding: 177px 26px 10px 10px;
+    }
+
+    .innerSwiper {
+        height: 90% !important;
     }
 
     .box2,
     .box4 {
         transform: translateY(0px);
     }
-    #etc .box-wrap{
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-    }
-    .etc-box{
+
+
+
+    .etc-box {
         width: 100%;
     }
+
     .swiper-slide {
         -ms-overflow-style: none;
         /* 인터넷 익스플로러 */
         scrollbar-width: none;
         /* 파이어폭스 */
     }
+
+
+    #Data,
+    #smart,
+    #visuali,
+    #customized,
+    #dataanalysis {
+        height: 100% !important;
+        overflow-y: scroll !important;
+        padding-top: 120px;
+    }
+
+    .etc-wrap-text {
+        width: 100%;
+    }
+
+    .visuali-text {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    #smart .etc-wrap-text{
+        flex-direction: column;
+
+    }
+    #dataanalysis .etc-wrap-text div{
+        width: 48%;
+        margin: 0 auto;
+        flex-wrap: wrap !important;
+    }
+  
+    #etc .etc-box-title{
+        font-size: 1.7rem !important;
+        padding: 0px;
+        text-align: center;
+        font-weight: 600;
+        word-break: keep-all;
+    }
+    #customized .box-wrap{
+        flex-direction: column;
+
+    }
 }

50a1eb0

4447a75

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


 
 .box1 {
     background: url(../img/common/img-box1.png) no-repeat;
+    background-size: contain;
 
 }
 
 .box2 {
     transform: translateY(30px);
     background: url(../img/common/img-box2.png) no-repeat;
+    background-size: contain;
 
 }
 
 .box3 {
     background: url(../img/common/img-box3.png) no-repeat;
+    background-size: contain;
 
 }
 

     transform: translateY(30px);
 
     background: url(../img/common/img-box4.png) no-repeat;
+    background-size: contain;
 
 }
 
 .box5 {
     background: url(../img/common/img-box5.png) no-repeat;
+    background-size: contain;
 
 }
 

     transform: translateY(30px);
 
     background: url(../img/common/img-box6.png) no-repeat;
+    background-size: contain;
 
 }
 

     height: 320px;
     text-align: center;
 
+}
+
+.solution-box p:last-child {
+    font-weight: 300;
 }
 
 .pink-box img,

 }
 
 .Portfolio {
-    /* padding: 100px 30px; */
+    padding:0 20px;
     height: 100%;
     /* height: 424px; */
 }

     position: relative;
     bottom: -10%;
     left: 0;
-    z-index: 56;
     transition: all 0.5s;
     background-color: #333;
 }

 
 .solution-text-box {
     width: 100%;
-    padding: 15px 18px 15px 45px;
+    padding: 15px 18px;
     border-radius: 10px;
     background-color: #fff;
     box-shadow: 2px 2px 5px #3e3e3e30;

 }
 
 .solution-deco p {
-    margin-left: 1.8rem;
+    margin-left: 45px;
 
 }
 

     font-weight: 600;
     font-size: 2.4rem;
     text-align: left;
+    margin-left: 30px;
 }
 
 .text-box-title::after {

 }
 
 .marketing-title {
-    font-size: 2.4rem !important ;
+    font-size: 2.4rem !important;
     font-weight: 800 !important;
     margin-bottom: 20px !important;
     font-family: 'Pretendard';

 
 .accordion-text p {
     font-size: 1.5rem !important;
+    position: relative;
+    padding-left: 10px;
+
+}
+.accordion-text p::after{
+    position: absolute;
+    top: 0;
+    left: 0px;
+    content: '·';
+
+}
+
+.slideTextDtail-box p {
+    position: relative;
+    padding-left: 10px;
+}
+
+.slideTextDtail-box p::after {
+    position: absolute;
+    top: 0;
+    left: 0px;
+    content: '·';
+
+}
+.gradient-back .box-area{
+    text-shadow: 2px 2px 2px #242a303a;
 }
 
 .accordion {

     background-position: center;
     background-repeat: no-repeat;
     position: relative;
-    transition: all 0.7s ease-in-out;
-    filter: brightness(80%);
+    transition: all 0.3s ease-in-out;
     z-index: 1;
 }
 
+.accordion1 {
+    background: url(../img/common/about-change-img01.png) no-repeat;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+}
+
+.accordion2 {
+    background: url(../img/common/about-change-img02.png) no-repeat;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+
+}
+
+.accordion3 {
+    background: url(../img/common/about-change-img03.png) no-repeat;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+
+}
 
 .slideText p:first-child {
     font-size: 3rem;

     width: 100%;
 }
 
+.accordion1.active {
+    width: 100%;
+    height: 100%;
+    background: url(../img/common/about-img-db.png)no-repeat;
+    background-size: cover;
+    position: relative;
+}
+
+.accordion1::after {
+    content: '01';
+    position: absolute;
+    top: 22px;
+    left: 25px;
+    font-size: 3.6rem;
+    width: 30px;
+    color: rgba(255, 255, 255, 0.637);
+    font-size: 3.6rem;
+    font-family: 'MontserratBolde';
+    font-weight: bold;
+}
+
+.accordion1::before {
+    content: 'AI Solution';
+    position: absolute;
+    top: 65px;
+    left: 25px;
+    /* padding: 1rem ; */
+    font-size: 3.6rem;
+    width: 100px;
+    text-align: left;
+    height: 100px;
+    color: #ffffff;
+    font-size: 3.6rem;
+    font-family: 'MontserratBolde';
+    font-weight: bold;
+}
+
+.accordion1.active::after,
+.accordion1.active::before,
+.accordion2.active::after,
+.accordion2.active::before,
+.accordion3.active::after,
+.accordion3.active::before {
+    display: none;
+}
+
+.accordion2.active {
+    width: 100%;
+    height: 100%;
+    background: url(../img/common/about-img-bg02.png)no-repeat;
+    background-size: cover;
+    position: relative;
+
+}
+
+.accordion2::after {
+    content: '02';
+    position: absolute;
+    top: 22px;
+    left: 25px;
+    font-size: 3.6rem;
+    width: 30px;
+    color: rgba(255, 255, 255, 0.637);
+    font-size: 3.6rem;
+    font-family: 'MontserratBolde';
+    font-weight: bold;
+}
+
+.accordion2::before {
+    content: 'System Design';
+    position: absolute;
+    top: 65px;
+    left: 25px;
+    /* padding: 1rem ; */
+    font-size: 3.6rem;
+    width: 100px;
+    text-align: left;
+    height: 100px;
+    color: #ffffff;
+    font-size: 3.6rem;
+    font-family: 'MontserratBolde';
+    font-weight: bold;
+}
+
+.accordion3.active {
+    width: 100%;
+    height: 100%;
+    background: url(../img/common/about-img-bg03.png)no-repeat;
+    background-size: cover;
+    position: relative;
+
+}
+
+.accordion3::after {
+    content: '03';
+    position: absolute;
+    top: 22px;
+    left: 25px;
+    font-size: 3.6rem;
+    width: 30px;
+    color: rgba(255, 255, 255, 0.637);
+    font-size: 3.6rem;
+    font-family: 'MontserratBolde';
+    font-weight: bold;
+}
+
+.accordion3::before {
+    content: 'Data Science';
+    position: absolute;
+    top: 65px;
+    left: 25px;
+    /* padding: 1rem ; */
+    font-size: 3.6rem;
+    width: 100px;
+    text-align: left;
+    height: 100px;
+    color: #ffffff;
+    font-size: 3.6rem;
+    font-family: 'MontserratBolde';
+    font-weight: bold;
+}
 
 .accordion.active {
     flex: 3;
-    filter: brightness(100%);
 
+}
+
+.accordion.active .slideText {
+    opacity: 1;
+}
+
+.accordion .slideText {
+    opacity: 0;
 }
 
 .accordion.active .slideImg {

 .accordion.active .accordion-num {
     color: #80649b;
     font-size: 3.6rem;
-	font-family: 'MontserratBolde';
+    font-family: 'MontserratBolde';
 
     font-weight: bold;
 

     color: #b1a1c3;
     font-size: 3.6rem;
     font-weight: bold;
-	font-family: 'MontserratBolde';
+    font-family: 'MontserratBolde';
 }
 
 .accordion.active p,

     font-weight: 900;
 
 }
-.traffic-img-box{
+
+.traffic-img-box {
     width: 100%;
 }
+
 .active-year {
     font-size: 7rem;
     font-weight: 900;

     word-break: keep-all;
     font-weight: 500;
 }
-.etc-text-deco p{
+
+.etc-text-deco p {
     position: relative;
     margin-left: 5px;
 }
-.etc-text-deco p::after{
+
+.etc-text-deco p::after {
     content: '-';
     position: absolute;
     top: 0;
     left: -1%;
 
+}
+
+.month-text {
+    width: 80%;
+}
+
+.month-text p {
+    width: 80%;
+    margin-left: 10px;
+    position: relative;
+}
+
+.month-text p::after {
+    content: '·';
+    position: absolute;
+    top: 0;
+    left: -2%;
 }

4447a75

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

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

Binary file is not shown

4447a75

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

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

Binary file is not shown

4447a75

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

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

Binary file is not shown

50a1eb0

4447a75

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

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

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

Binary file is not shown

50a1eb0

4447a75

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

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

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

Binary file is not shown

50a1eb0

4447a75

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

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

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

Binary file is not shown

50a1eb0

4447a75

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

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

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

Binary file is not shown

50a1eb0

4447a75

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

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

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

Binary file is not shown

50a1eb0

4447a75

views/index.html

--- views/index.html

+++ views/index.html


     });
     var innerswiper = new Swiper(".innerSwiper", {
         slidesPerView: 3,
-        spaceBetween: 60,
+        spaceBetween: 40,
         autoplay: {
             delay: 0,
             disableOnInteraction: false,

         breakpoints: {
             250: {
                 slidesPerView: 1,
-                spaceBetween: 20
+                spaceBetween: 40
             },
             // 화면의 넓이가 320px 이상일 때
             320: {
                 slidesPerView: 1,
-                spaceBetween: 20
+                spaceBetween: 40
             },
             // 화면의 넓이가 640px 이상일 때
             640: {
                 slidesPerView: 3,
-                spaceBetween: 60
-            }
+                spaceBetween: 40,
+            },
+
         },
     });
 

50a1eb0

4447a75

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


 
             <nav>
                 <ul class="web-menu">
-                    <li>
+                    <li class="mr80">
                         <a href="../../views/pages/AboutUs.html">About Us</a>
 
                     </li>
-                    <li><a href="../../views/pages/Solution.html">Solution</a></li>
-                    <li>
+                    <li class="mr80"><a href="../../views/pages/Solution.html">Solution</a></li>
+                    <li class="mr80">
                         <a href="#">Portfolio</a>
                         <ul class="dropdown ">
                             <li><a href="../../views/pages/Data.html">Data</a></li>

                             <li><a href="../../views/pages/Etc.html">ETC</a></li>
                         </ul>
                     </li>
-                    <li><a href="../../views/pages/Marketing.html">Marketing</a></li>
+                    <li class="mr80"><a href="../../views/pages/Marketing.html">Marketing</a></li>
                 </ul>
 
             </nav>

 <style>
     .clicked {
         color: #213F99 !important;
+        border-bottom:2px solid #ebf0ff !important;
     }
+
 
     #header {
         background-color: transparent;

 
 
     nav ul li {
-        width: 200px;
+        padding: 0.8rem 0;
         display: inline-block;
         position: relative;
     }

     nav ul li a {
         color: white;
         font-size: 1.8rem;
-        font-weight: 500;
+        font-weight: 600;
+        font-family: 'Pretendard';
         display: block;
-        padding: 8px;
         text-align: center;
     }
 

 
     .dropdown {
         opacity: 0;
+        /* border: 1px solid red; */
         visibility: hidden;
         position: absolute;
         top: 45px;
-        right: 0;
-        width: 100%;
+        padding:1rem 3rem;
+        margin-right: 0rem !important;
+        right: -25%;
+        transform: translateX(25%);
+        width: 200px;
         margin: 0 auto;
         text-align: center;
         font-weight: 400;

50a1eb0

4447a75

views/layout/footer.html

--- views/layout/footer.html

+++ views/layout/footer.html

...	...	@@ -18,8 +18,8 @@
18	18	<p>고객지원 ) 053-811-1700(평일9시~18시)</p>
19	19	<p style="width: 17.5%;">대표메일 ) [email protected]</p>
20	20	</div>
21		- <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
22		- <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	21	+ <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	22	+ <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
23	23	</div>
24	24	<p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
25	25	</div>

50a1eb0

4447a75

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html

...	...	@@ -17,16 +17,12 @@
17	17	<style>
18	18	body {
19	19	-ms-overflow-style: none;
20		- /* 인터넷 익스플로러 */
21	20	scrollbar-width: none;
22		- /* 파이어폭스 */
23	21	}
24	22
25	23	.history-box {
26	24	-ms-overflow-style: none;
27		- /* 인터넷 익스플로러 */
28	25	scrollbar-width: none;
29		- /* height: 80% !important; */
30	26	}
31	27
32	28	html,
...	...	@@ -116,7 +112,8 @@
116	112	.month-text p {
117	113	word-break: keep-all;
118	114	}
119		- .month-text span{
	115	+
	116	+ .month-text span {
120	117	color: #b1b1b1;
121	118	font-size: 2.5rem;
122	119	margin-right: 1rem;
...	...	@@ -176,20 +173,21 @@
176	173	해결합니다.</p>
177	174	</div>
178	175	<div class="container silde-box">
179		- <div class="accordion flex justify-between "
180		- style="background: url(../../resources/img/common/about-img1.png) no-repeat; background-size: cover;">
	176	+ <div class="accordion accordion1">
	177	+
181	178	<div class="slideText">
182	179	<p class="accordion-num mb10"><span>01.</span> AI Solution</p>
183	180	<p class="accordion-sub-text">AI 기술 종합 관리를 통한 솔루션 구현</p>
184	181	</div>
185	182	<div class="slideImg">
186		- <img src="../../resources/img/common/about-img-db.png" alt="">
	183	+ <img src="../../resources/img/common/about-img1.png" alt="Slide Image">
187	184	</div>
	185	+
188	186	<div class="slideTextDtail">
189		- <div>
190		- <p><span>·</span> 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
191		- <p><span>·</span> 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
192		- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
	187	+ <div class="slideTextDtail-box">
	188	+ <p> 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
	189	+ <p> 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
	190	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">지속적인 품질 모니터링을
193	191	통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
194	192	</div>
195	193	<div class=" flex justify-between business-box" style="flex-wrap: nowrap;">
...	...	@@ -198,66 +196,69 @@
198	196	</div>
199	197	<div class="flex accordion-text" style="flex-wrap: nowrap; width: 100%;">
200	198	<div class="flex-column " style="width: 60%;">
201		- <p><span>·</span>도로 위험 감지 시스템</p>
202		- <p><span>·</span>안개 감지 시스템</p>
	199	+ <p> 도로 위험 감지 시스템</p>
	200	+ <p> 안개 감지 시스템</p>
203	201	</div>
204	202	<div class="flex-column " style="width: 100%;">
205		- <p><span>·</span>경로 최적화 서비스</p>
206		- <p><span>·</span>위치 기반 기자재 관리 및 모니터링 서비스</p>
	203	+ <p> 경로 최적화 서비스</p>
	204	+ <p> 위치 기반 기자재 관리 및 모니터링 서비스</p>
207	205	</div>
208	206	</div>
209	207	</div>
210	208	</div>
211		-
212		-
213	209	</div>
214		- <div class="accordion "
215		- style="background-image: url(../../resources/img/common/about-img2.png);">
	210	+
	211	+
	212	+ <div class="accordion accordion2">
216	213	<div class="slideText">
217		- <p class="accordion-num mb10 accordion-num-red" ><span>02.</span> System Design</p>
	214	+ <p class="accordion-num mb10 accordion-num-red"><span>02.</span> System Design</p>
218	215	<p class="accordion-sub-red">고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
219	216	</div>
220	217	<div class="slideImg">
221		- <img src="../../resources/img/common/about-img-bg02.png" alt="">
	218	+ <img src="../../resources/img/common/about-img2.png" alt="Slide Image">
222	219	</div>
223	220	<div class="slideTextDtail">
224		- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
225		- 통해 고객사 최적화 UI 도출 </p>
	221	+ <div class="slideTextDtail-box">
	222	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">빅데이터 전용 시각화 솔루션을
	223	+ 통해 고객사 최적화 UI 도출 </p>
	224	+ </div>
226	225	<div class=" flex justify-start business-box" style="flex-wrap: nowrap;">
227	226	<div style="width: 20%;">
228	227	<p>[대표사례]</p>
229	228	</div>
230	229	<div class="flex-column accordion-text">
231		- <p><span>·</span>정부혁신 웹사이트 기능개선 및 유지관리 </p>
232		- <p><span>·</span>스마트 팩토리 공정 관리 모니터링 서비스</p>
233		- <p><span>·</span>경로 최적화 서비스</p>
234		- <p><span>·</span>시니어 스마트 케어 모니터링 플랫폼</p>
	230	+ <p> 정부혁신 웹사이트 기능개선 및 유지관리 </p>
	231	+ <p> 스마트 팩토리 공정 관리 모니터링 서비스</p>
	232	+ <p> 경로 최적화 서비스</p>
	233	+ <p> 시니어 스마트 케어 모니터링 플랫폼</p>
235	234	</div>
236	235	</div>
237	236	</div>
238	237	</div>
239		- <div class="accordion"
240		- style="background-image: url(../../resources/img/common/about-img3.png);">
	238	+ <div class="accordion accordion3" >
241	239	<div class="slideText ">
242	240	<p class="accordion-num mb10"><span>03.</span> Data Science </p>
243	241	<p class="accordion-sub-text">수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
244	242	</div>
245	243	<div class="slideImg">
246		- <img src="../../resources/img/common/about-img-bg03.png" alt="">
	244	+ <img src="../../resources/img/common/about-img3.png" alt="Slide Image">
247	245	</div>
248	246	<div class="slideTextDtail">
249		- <p><span>·</span>데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
250		- <p><span>·</span>기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
251		- <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
252		- 수요기관 및 기업 확장
253		- </p>
	247	+ <div class="slideTextDtail-box">
	248	+ <p> 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
	249	+ <p> 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
	250	+ <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">R&D, 용역 등의 사업을 통해
	251	+ 수요기관 및 기업 확장
	252	+ </p>
	253	+
	254	+ </div>
254	255	<div class=" flex justify-start business-box" style="flex-wrap: nowrap;">
255	256	<div style="width: 20%;">
256	257	<p>[대표사례]</p>
257	258	</div>
258	259	<div class="flex-column accordion-text">
259		- <p><span>·</span>데이터 품질관리 컨설팅</p>
260		- <p><span>·</span>AI 안전통합 횡단보도 플랫폼</p>
	260	+ <p> 데이터 품질관리 컨설팅</p>
	261	+ <p> AI 안전통합 횡단보도 플랫폼</p>
261	262	</div>
262	263	</div>
263	264	</div>
...	...	@@ -308,32 +309,32 @@
308	309
309	310	<p class="month ">5월</p>
310	311	<div class="month-text" style="text-align: left;">
311		- <p><span>·</span>주식회사 테이큰 소프트 설립</p>
312		- <p><span>·</span>영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
	312	+ <p> 주식회사 테이큰 소프트 설립</p>
	313	+ <p> 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
313	314
314	315	</div>
315	316	</div>
316	317	<div class="flex">
317	318	<p class="month ">10월</p>
318	319	<div class="month-text text-section" style="text-align: left;">
319		- <p><span>·</span>소프트웨어 기업 등록</p>
	320	+ <p> 소프트웨어 기업 등록</p>
320	321	<img src="../../resources/img/common/history-img1.png" alt="">
321	322	</div>
322	323	</div>
323	324	<div class="flex">
324	325	<p class="month ">11월</p>
325	326	<div class="month-text" style="text-align: left;">
326		- <p><span>·</span>김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
327		- <p><span>·</span>Taken BI Manager v1.0 저작권 등록</p>
	327	+ <p> 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
	328	+ <p> Taken BI Manager v1.0 저작권 등록</p>
328	329	<img src="../../resources/img/common/history-img2.png" alt="">
329	330	</div>
330	331	</div>
331	332	<div class="flex">
332	333	<p class="month ">12월</p>
333	334	<div class="month-text" style="text-align: left;">
334		- <p><span>·</span>어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
335		- <p><span>·</span>Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
336		- <p><span>·</span>도로 모니터링 시스템 저작권 등록</p>
	335	+ <p> 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
	336	+ <p> Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
	337	+ <p> 도로 모니터링 시스템 저작권 등록</p>
337	338	<div class="flex">
338	339	<img src="../../resources/img/common/history-img31.png" alt="">
339	340	<img src="../../resources/img/common/history-img32.png" alt="">
...	...	@@ -351,57 +352,57 @@
351	352	<div class="flex">
352	353	<p class="month ">1월</p>
353	354	<div class="month-text" style="text-align: left;">
354		- <p><span>·</span>구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
	355	+ <p> 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
355	356	</div>
356	357	</div>
357	358	<div class="flex">
358	359	<p class="month ">3월</p>
359	360	<div class="month-text" style="text-align: left;">
360		- <p><span>·</span>기업부설연구소 설립</p>
	361	+ <p> 기업부설연구소 설립</p>
361	362	</div>
362	363	</div>
363	364	<div class="flex">
364	365	<p class="month ">4월</p>
365	366	<div class="month-text" style="text-align: left;">
366		- <p><span>·</span>상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
	367	+ <p> 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
367	368	</div>
368	369	</div>
369	370	<div class="flex">
370	371	<p class="month ">5월</p>
371	372	<div class="month-text" style="text-align: left;">
372		- <p><span>·</span>대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
373		- <p><span>·</span>영천시 공공데이터 품질관리 용역 (영천시)</p>
	373	+ <p> 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
	374	+ <p> 영천시 공공데이터 품질관리 용역 (영천시)</p>
374	375	</div>
375	376	</div>
376	377	<div class="flex">
377	378	<p class="month ">7월</p>
378	379	<div class="month-text" style="text-align: left;">
379		- <p><span>·</span>영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
	380	+ <p> 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
380	381	</div>
381	382	</div>
382	383	<div class="flex">
383	384	<p class="month ">9월</p>
384	385	<div class="month-text" style="text-align: left;">
385		- <p><span>·</span>상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
	386	+ <p> 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
386	387	</div>
387	388	</div>
388	389	<div class="flex">
389	390	<p class="month ">10월</p>
390	391	<div class="month-text" style="text-align: left;">
391		- <p><span>·</span>데이터 관리 및 분석 솔루션 구매 (상주시) </p>
	392	+ <p> 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
392	393	</div>
393	394	</div>
394	395	<div class="flex">
395	396	<p class="month ">12월</p>
396	397	<div class="month-text" style="text-align: left;">
397		- <p><span>·</span>데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
398		- <p><span>·</span>상주시 데이터 활용 기본계획 용역 (상주시) </p>
399		- <p><span>·</span>스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
400		- <p><span>·</span>행정정보 데이터 백업테이프 구입 (영주시) </p>
401		- <p><span>·</span>행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
402		- <p><span>·</span>SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
403		- <p><span>·</span>한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
404		- <p><span>·</span>경로 생성 기술 관련 출원사실증명 </p>
	398	+ <p> 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
	399	+ <p> 상주시 데이터 활용 기본계획 용역 (상주시) </p>
	400	+ <p> 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
	401	+ <p> 행정정보 데이터 백업테이프 구입 (영주시) </p>
	402	+ <p> 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
	403	+ <p> SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
	404	+ <p> 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
	405	+ <p> 경로 생성 기술 관련 출원사실증명 </p>
405	406	<img src="../../resources/img/common/history-img4.png" alt="">
406	407
407	408	</div>
...	...	@@ -413,9 +414,9 @@
413	414	<div class="flex">
414	415	<p class="month ">1월</p>
415	416	<div class="month-text" style="text-align: left;">
416		- <p><span>·</span>행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
417		- <p><span>·</span>복약지도 장치 및 방법 출원사실증명 </p>
418		- <p><span>·</span>Traffic Agent 저작권 등록 </p>
	417	+ <p> 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
	418	+ <p> 복약지도 장치 및 방법 출원사실증명 </p>
	419	+ <p> Traffic Agent 저작권 등록 </p>
419	420
420	421	<div class="flex">
421	422	<img src="../../resources/img/common/history-img51.png" alt="">
...	...	@@ -427,22 +428,22 @@
427	428	<div class="flex">
428	429	<p class="month ">2월</p>
429	430	<div class="month-text" style="text-align: left;">
430		- <p><span>·</span>한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
431		- <p><span>·</span>대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
	431	+ <p> 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
	432	+ <p> 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
432	433	</div>
433	434	</div>
434	435	<div class="flex">
435	436	<p class="month ">3월</p>
436	437	<div class="month-text" style="text-align: left;">
437		- <p><span>·</span>AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
	438	+ <p> AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
438	439	</div>
439	440	</div>
440	441	<div class="flex">
441	442	<p class="month ">4월</p>
442	443	<div class="month-text" style="text-align: left;">
443		- <p><span>·</span>G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
444		- <p><span>·</span>포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
445		- <p><span>·</span>기업부설연구소 인정서 획득 </p>
	444	+ <p> G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
	445	+ <p> 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
	446	+ <p> 기업부설연구소 인정서 획득 </p>
446	447	<img src="../../resources/img/common/history-img6.png" alt="">
447	448
448	449	</div>
...	...	@@ -450,13 +451,13 @@
450	451	<div class="flex">
451	452	<p class="month ">5월</p>
452	453	<div class="month-text" style="text-align: left;">
453		- <p><span>·</span>영천시 맞춤형 데이터 분석사업 (영천시) </p>
	454	+ <p> 영천시 맞춤형 데이터 분석사업 (영천시) </p>
454	455	</div>
455	456	</div>
456	457	<div class="flex">
457	458	<p class="month ">6월</p>
458	459	<div class="month-text" style="text-align: left;">
459		- <p><span>·</span>정보통신공사업 면허 획득, 벤처기업 인증 </p>
	460	+ <p> 정보통신공사업 면허 획득, 벤처기업 인증 </p>
460	461	<div class="flex">
461	462	<img src="../../resources/img/common/history-img71.png" alt="">
462	463	<img src="../../resources/img/common/history-img72.png" alt="">
...	...	@@ -466,24 +467,24 @@
466	467	<div class="flex">
467	468	<p class="month ">7월</p>
468	469	<div class="month-text" style="text-align: left;">
469		- <p><span>·</span>공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
470		- <p><span>·</span>정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
	470	+ <p> 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
	471	+ <p> 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
471	472	</div>
472	473	</div>
473	474	<div class="flex">
474	475	<p class="month ">8월</p>
475	476	<div class="month-text" style="text-align: left;">
476		- <p><span>·</span>SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
477		- <p><span>·</span>메타버스 기술 관련 출원사실증명</p>
	477	+ <p> SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	478	+ <p> 메타버스 기술 관련 출원사실증명</p>
478	479	<img src="../../resources/img/common/history-img8.png" alt="">
479	480	</div>
480	481	</div>
481	482	<div class="flex">
482	483	<p class="month ">9월</p>
483	484	<div class="month-text" style="text-align: left;">
484		- <p><span>·</span>한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
485		- <p><span>·</span>SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
486		- <p><span>·</span>시니어 케어 시스템 저작권 등록</p>
	485	+ <p> 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
	486	+ <p> SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
	487	+ <p> 시니어 케어 시스템 저작권 등록</p>
487	488	<img src="../../resources/img/common/history-img9.png" alt="">
488	489
489	490	</div>
...	...	@@ -491,8 +492,8 @@
491	492	<div class="flex">
492	493	<p class="month ">11월</p>
493	494	<div class="month-text" style="text-align: left;">
494		- <p><span>·</span>한기술평가 우수기업 인증 (T-5)</p>
495		- <p><span>·</span>통합 모빌리티 솔루션 저작권 등록</p>
	495	+ <p> 한기술평가 우수기업 인증 (T-5)</p>
	496	+ <p> 통합 모빌리티 솔루션 저작권 등록</p>
496	497	<div class="flex">
497	498	<img src="../../resources/img/common/history-img100.png" alt="">
498	499	<img src="../../resources/img/common/history-img101.png" alt="">
...	...	@@ -502,11 +503,11 @@
502	503	<div class="flex">
503	504	<p class="month ">12월</p>
504	505	<div class="month-text" style="text-align: left;">
505		- <p><span>·</span>DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
506		- <p><span>·</span>구미시 키워드 분석 용역 (구미시)</p>
507		- <p><span>·</span>AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
508		- <p><span>·</span>구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
509		- <p><span>·</span>AI 횡단보도 기술 관련 출원사실증명</p>
	506	+ <p> DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
	507	+ <p> 구미시 키워드 분석 용역 (구미시)</p>
	508	+ <p> AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
	509	+ <p> 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
	510	+ <p> AI 횡단보도 기술 관련 출원사실증명</p>
510	511	<img src="../../resources/img/common/history-img110.png" alt="">
511	512
512	513
...	...	@@ -603,46 +604,36 @@
603	604	},
604	605	}
605	606	});
606		- // business 아코디언
607		- function slidesPlugin(activeSlide = 0) {
608		- const slides = document.querySelectorAll('.accordion');
609		- let previousSlide = slides[activeSlide];
	607	+
	608	+ function slidesPlugin(activeSlide = 0, selector = '.accordion') {
	609	+ const slides = document.querySelectorAll(selector);
610	610
611		- previousSlide.classList.add('active');
612		- swapImage(previousSlide);
	611	+ function setActiveSlide(slide) {
	612	+ // 모든 슬라이드에서 'active' 클래스 제거
	613	+ slides.forEach(s => {
	614	+ s.classList.remove('active'); // 활성 클래스 제거
	615	+ });
613	616
614		- slides.forEach((slide) => {
615		- slide.addEventListener('click', () => {
616		- if (slide !== previousSlide) {
617		- clearActiveClasses();
618		- swapImage(previousSlide);
619		- slide.classList.add('active');
620		- swapImage(slide);
621		- previousSlide = slide;
	617	+ // 클릭된 슬라이드에 'active' 클래스 추가
	618	+ slide.classList.add('active'); // 활성 클래스 추가
	619	+ }
622	620
623		- }
	621	+ slides.forEach(slide => {
	622	+ slide.addEventListener('click', () => {
	623	+ setActiveSlide(slide);
	624	+ });
	625	+ });
624	626
625		- });
626		- });
	627	+ // 초기 활성 슬라이드 설정
	628	+ if(slides.length > 0 && activeSlide >= 0 && activeSlide < slides.length) {
	629	+ setActiveSlide(slides[activeSlide]);
	630	+ }
	631	+}
627	632
628		- function clearActiveClasses() {
629		- slides.forEach((slide) => {
630		- slide.classList.remove('active');
631		- });
632		- }
633		-
634		- function swapImage(slide) {
635		- const slideImg = slide.querySelector('.accordion img');
636		- const bgImg = slide.style.backgroundImage;
637		-
638		- slide.style.backgroundImage = `url(${slideImg.src})`;
639		- slideImg.src = bgImg.slice(5, -2);
640		- }
641		- }
642		-
643		-
644		- slidesPlugin();
645		-
	633	+document.addEventListener('DOMContentLoaded', () => {
	634	+ slidesPlugin(0, '.accordion'); // '.accordion' 클래스에 대해 함수 호출
	635	+ slidesPlugin(0, '.accordion1'); // '.accordion1' 클래스에 대해 함수 호출
	636	+});
646	637
647	638	$(function () {
648	639	$("#header").load("../layout/Header.html");

50a1eb0

4447a75

views/pages/Customized.html

--- views/pages/Customized.html

+++ views/pages/Customized.html


 
     <style scoped>
         footer {
-    width: 100%;
-    /* height: 300px; */
-    padding: 40px;
-    /* opacity: 0; */
-    /* display: none; */
-    position: relative;
-    bottom: 0px;
-    left: 0;
-    z-index: 56;
-    transition: all 0.5s;
-    background-color: #333;
-}
-
-    /* 스크롤바 없애기 */
-    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 !important;
-    }
-
-    #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%;
-
-    }
-
-    body {
-        background-color: #fff;
-        /* background: linear-gradient(#f8f9fa, #fff, #fff); */
-        font-family: 'Pretendard';
-        font-size: 14px;
-        color: #000;
-        margin: 0;
-        padding: 0;
-    }
-
-    .swiper {
-        width: 100%;
-        height: 100%;
-    }
-
-    .swiper-slide {
-        text-align: center;
-        font-size: 18px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .swiper-slide img {
-        height: 356px;
-        display: block;
-        object-fit: cover;
-    }
-
-    .box-wrap p {
-        font-size: 2.1rem;
-        font-weight: 500;
-    }
-    .dropdown {
-        background-color: #fff !important;
+            width: 100%;
+            padding: 40px;
+            position: relative;
+            bottom: 0px;
+            left: 0;
+            transition: all 0.5s;
+            background-color: #333;
         }
 
-</style>
+        /* 스크롤바 없애기 */
+        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 !important;
+        }
+
+        #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%;
+
+        }
+
+        body {
+            background-color: #fff;
+            /* background: linear-gradient(#f8f9fa, #fff, #fff); */
+            font-family: 'Pretendard';
+            font-size: 14px;
+            color: #000;
+            margin: 0;
+            padding: 0;
+        }
+
+        .swiper {
+            width: 100%;
+            height: 100%;
+        }
+
+        .swiper-slide {
+            text-align: center;
+            font-size: 18px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .swiper-slide img {
+            height: 356px;
+            display: block;
+            object-fit: cover;
+        }
+
+        .box-wrap p {
+            font-size: 2.1rem;
+            font-weight: 500;
+        }
+
+        .dropdown {
+            background-color: #fff !important;
+        }
+    </style>
     <title>TAKENSOFT</title>
 </head>
 

                         <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
                         <p style="width: 17.5%;">대표메일 ) [email protected]</p>
                     </div>
-                    <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
-                    <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
+                    <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
+                    <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
                 </div>
                 <p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
             </div>

50a1eb0

4447a75

views/pages/Data.html

--- views/pages/Data.html

+++ views/pages/Data.html

...	...	@@ -17,14 +17,10 @@
17	17	<style scoped>
18	18	footer {
19	19	width: 100%;
20		- /* height: 300px; */
21	20	padding: 40px;
22		- /* opacity: 0; */
23		- /* display: none; */
24	21	position: relative;
25	22	bottom: 0px;
26	23	left: 0;
27		- z-index: 56;
28	24	transition: all 0.5s;
29	25	background-color: #333;
30	26	}
...	...	@@ -153,8 +149,8 @@
153	149	<p>고객지원 ) 053-811-1700(평일9시~18시)</p>
154	150	<p style="width: 17.5%;">대표메일 ) [email protected]</p>
155	151	</div>
156		- <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
157		- <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	152	+ <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	153	+ <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
158	154	</div>
159	155	<p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
160	156	</div>

50a1eb0

4447a75

views/pages/DataAnalysis.html

--- views/pages/DataAnalysis.html

+++ views/pages/DataAnalysis.html

...	...	@@ -18,14 +18,10 @@
18	18	<style scoped>
19	19	footer {
20	20	width: 100%;
21		- /* height: 300px; */
22	21	padding: 40px;
23		- /* opacity: 0; */
24		- /* display: none; */
25	22	position: relative;
26	23	bottom: 0px;
27	24	left: 0;
28		- z-index: 56;
29	25	transition: all 0.5s;
30	26	background-color: #333;
31	27	}
...	...	@@ -169,8 +165,8 @@
169	165	<p>고객지원 ) 053-811-1700(평일9시~18시)</p>
170	166	<p style="width: 17.5%;">대표메일 ) [email protected]</p>
171	167	</div>
172		- <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
173		- <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	168	+ <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	169	+ <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
174	170	</div>
175	171	<p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
176	172	</div>

50a1eb0

4447a75

views/pages/Etc.html

--- views/pages/Etc.html

+++ views/pages/Etc.html

...	...	@@ -18,14 +18,10 @@
18	18	<style scoped>
19	19	footer {
20	20	width: 100%;
21		- /* height: 300px; */
22	21	padding: 30px;
23		- /* opacity: 0; */
24		- /* display: none; */
25	22	position: relative;
26	23	bottom: 0px;
27	24	left: 0;
28		- z-index: 56;
29	25	transition: all 0.5s;
30	26	background-color: #333;
31	27	}
...	...	@@ -156,7 +152,7 @@
156	152	<img src="../../resources/img/component/logo-w.png" alt="">
157	153	</div>
158	154	<hr>
159		- <div class="footer-text pt10">
	155	+ <div class="footer-text pt10 pb40">
160	156	<div class="flex justify-between ">
161	157
162	158	<p>대표자 ) 임상현</p>
...	...	@@ -166,10 +162,10 @@
166	162	<p>고객지원 ) 053-811-1700(평일9시~18시)</p>
167	163	<p style="width: 17.5%;">대표메일 ) [email protected]</p>
168	164	</div>
169		- <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
170		- <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	165	+ <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	166	+ <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
171	167	</div>
172		- <p class="copyright">© 2021.Takensoft.all rights reserved.</p>
	168	+ <p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
173	169	</div>
174	170	</footer>
175	171	</div>

50a1eb0

4447a75

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html

...	...	@@ -18,14 +18,10 @@
18	18	<style scoped>
19	19	footer {
20	20	width: 100%;
21		- /* height: 300px; */
22	21	padding: 40px;
23		- /* opacity: 0; */
24		- /* display: none; */
25	22	position: relative;
26	23	bottom: 0px;
27	24	left: 0;
28		- z-index: 56;
29	25	transition: all 0.5s;
30	26	background-color: #333;
31	27	}
...	...	@@ -155,7 +151,7 @@
155	151	<hr>
156	152	<div class="footer-text pt10 pb40">
157	153	<div class="flex justify-between ">
158		-
	154	+
159	155	<p>대표자 ) 임상현</p>
160	156	<p style="width: 17.5%;">FAX ) 053-811-1701</p>
161	157	</div>
...	...	@@ -163,8 +159,8 @@
163	159	<p>고객지원 ) 053-811-1700(평일9시~18시)</p>
164	160	<p style="width: 17.5%;">대표메일 ) [email protected]</p>
165	161	</div>
166		- <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
167		- <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	162	+ <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	163	+ <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
168	164	</div>
169	165	<p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
170	166	</div>

50a1eb0

4447a75

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html


                             </div>
                             <div class="solution-text-box solution-deco-sub">
                                 <h3 class="text-box-title  ">특장점</h3>
-                                <div class="flex " style="gap: 80px; flex-wrap: nowrap;">
+                                <div class="flex " style="gap: 80px; flex-wrap: nowrap; margin-left: 30px;">
                                     <div class="flex-column">
                                         <p class=""> DB 연계형 데이터 수집 서비스</p>
                                         <p class=""> 데이터 시각화 시스템</p>

                             </div>
                             <div class="solution-text-box solution-deco-sub">
                                 <h3 class="text-box-title">특장점</h3>
-                                <div class="flex" style=" flex-wrap: nowrap; gap:20px;">
+                                <div class="flex" style=" flex-wrap: nowrap; gap:16px; margin-left: 30px;">
                                     <div class="flex-column">
                                         <p class="pl10"> 횡단보도 관제 분석 시스템 구축</p>
                                         <p class="pl10"> 현장모니터링 화면 구성</p>

50a1eb0

4447a75

views/pages/Visualization.html

--- views/pages/Visualization.html

+++ views/pages/Visualization.html

...	...	@@ -18,14 +18,10 @@
18	18	<style scoped>
19	19	footer {
20	20	width: 100%;
21		- /* height: 300px; */
22	21	padding: 40px;
23		- /* opacity: 0; */
24		- /* display: none; */
25	22	position: relative;
26	23	bottom: 0px;
27	24	left: 0;
28		- z-index: 56;
29	25	transition: all 0.5s;
30	26	background-color: #333;
31	27	}
...	...	@@ -100,16 +96,12 @@
100	96
101	97	.box-wrap div img {
102	98	width: 100%;
103		- /* object-fit: contain; */
104	99	padding-bottom: 2rem;
105	100	}
106	101
107	102	.box-wrap div p {
108		- /* height: 20%; */
109		- /* text-align: left; */
110	103	font-size: 1.7rem;
111	104	font-weight: 600;
112		- /* line-height: 1.5; */
113	105	}
114	106
115	107	.dropdown {
...	...	@@ -189,8 +181,8 @@
189	181	<p>고객지원 ) 053-811-1700(평일9시~18시)</p>
190	182	<p style="width: 17.5%;">대표메일 ) [email protected]</p>
191	183	</div>
192		- <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
193		- <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	184	+ <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	185	+ <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
194	186	</div>
195	187	<p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
196	188	</div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -556,7 +556,7 @@
556	556	});
557	557	var innerswiper = new Swiper(".innerSwiper", {
558	558	slidesPerView: 3,
559		- spaceBetween: 60,
	559	+ spaceBetween: 40,
560	560	autoplay: {
561	561	delay: 0,
562	562	disableOnInteraction: false,
...	...	@@ -567,18 +567,19 @@
567	567	breakpoints: {
568	568	250: {
569	569	slidesPerView: 1,
570		- spaceBetween: 20
	570	+ spaceBetween: 40
571	571	},
572	572	// 화면의 넓이가 320px 이상일 때
573	573	320: {
574	574	slidesPerView: 1,
575		- spaceBetween: 20
	575	+ spaceBetween: 40
576	576	},
577	577	// 화면의 넓이가 640px 이상일 때
578	578	640: {
579	579	slidesPerView: 3,
580		- spaceBetween: 60
581		- }
	580	+ spaceBetween: 40,
	581	+ },
	582	+
582	583	},
583	584	});
584	585

...	...	@@ -177,17 +177,20 @@
177	177
178	178	.box1 {
179	179	background: url(../img/common/img-box1.png) no-repeat;
	180	+ background-size: contain;
180	181
181	182	}
182	183
183	184	.box2 {
184	185	transform: translateY(30px);
185	186	background: url(../img/common/img-box2.png) no-repeat;
	187	+ background-size: contain;
186	188
187	189	}
188	190
189	191	.box3 {
190	192	background: url(../img/common/img-box3.png) no-repeat;
	193	+ background-size: contain;
191	194
192	195	}
193	196
...	...	@@ -195,11 +198,13 @@
195	198	transform: translateY(30px);
196	199
197	200	background: url(../img/common/img-box4.png) no-repeat;
	201	+ background-size: contain;
198	202
199	203	}
200	204
201	205	.box5 {
202	206	background: url(../img/common/img-box5.png) no-repeat;
	207	+ background-size: contain;
203	208
204	209	}
205	210
...	...	@@ -207,6 +212,7 @@
207	212	transform: translateY(30px);
208	213
209	214	background: url(../img/common/img-box6.png) no-repeat;
	215	+ background-size: contain;
210	216
211	217	}
212	218
...	...	@@ -326,6 +332,10 @@
326	332	height: 320px;
327	333	text-align: center;
328	334
	335	+}
	336	+
	337	+.solution-box p:last-child {
	338	+ font-weight: 300;
329	339	}
330	340
331	341	.pink-box img,
...	...	@@ -539,7 +549,7 @@
539	549	}
540	550
541	551	.Portfolio {
542		- /* padding: 100px 30px; */
	552	+ padding:0 20px;
543	553	height: 100%;
544	554	/* height: 424px; */
545	555	}
...	...	@@ -683,7 +693,6 @@
683	693	position: relative;
684	694	bottom: -10%;
685	695	left: 0;
686		- z-index: 56;
687	696	transition: all 0.5s;
688	697	background-color: #333;
689	698	}
...	...	@@ -879,7 +888,7 @@
879	888
880	889	.solution-text-box {
881	890	width: 100%;
882		- padding: 15px 18px 15px 45px;
	891	+ padding: 15px 18px;
883	892	border-radius: 10px;
884	893	background-color: #fff;
885	894	box-shadow: 2px 2px 5px #3e3e3e30;
...	...	@@ -893,7 +902,7 @@
893	902	}
894	903
895	904	.solution-deco p {
896		- margin-left: 1.8rem;
	905	+ margin-left: 45px;
897	906
898	907	}
899	908
...	...	@@ -946,6 +955,7 @@
946	955	font-weight: 600;
947	956	font-size: 2.4rem;
948	957	text-align: left;
	958	+ margin-left: 30px;
949	959	}
950	960
951	961	.text-box-title::after {
...	...	@@ -1092,7 +1102,7 @@
1092	1102	}
1093	1103
1094	1104	.marketing-title {
1095		- font-size: 2.4rem !important ;
	1105	+ font-size: 2.4rem !important;
1096	1106	font-weight: 800 !important;
1097	1107	margin-bottom: 20px !important;
1098	1108	font-family: 'Pretendard';
...	...	@@ -1275,6 +1285,32 @@
1275	1285
1276	1286	.accordion-text p {
1277	1287	font-size: 1.5rem !important;
	1288	+ position: relative;
	1289	+ padding-left: 10px;
	1290	+
	1291	+}
	1292	+.accordion-text p::after{
	1293	+ position: absolute;
	1294	+ top: 0;
	1295	+ left: 0px;
	1296	+ content: '·';
	1297	+
	1298	+}
	1299	+
	1300	+.slideTextDtail-box p {
	1301	+ position: relative;
	1302	+ padding-left: 10px;
	1303	+}
	1304	+
	1305	+.slideTextDtail-box p::after {
	1306	+ position: absolute;
	1307	+ top: 0;
	1308	+ left: 0px;
	1309	+ content: '·';
	1310	+
	1311	+}
	1312	+.gradient-back .box-area{
	1313	+ text-shadow: 2px 2px 2px #242a303a;
1278	1314	}
1279	1315
1280	1316	.accordion {
...	...	@@ -1287,11 +1323,32 @@
1287	1323	background-position: center;
1288	1324	background-repeat: no-repeat;
1289	1325	position: relative;
1290		- transition: all 0.7s ease-in-out;
1291		- filter: brightness(80%);
	1326	+ transition: all 0.3s ease-in-out;
1292	1327	z-index: 1;
1293	1328	}
1294	1329
	1330	+.accordion1 {
	1331	+ background: url(../img/common/about-change-img01.png) no-repeat;
	1332	+ height: 100%;
	1333	+ width: 100%;
	1334	+ background-size: cover;
	1335	+}
	1336	+
	1337	+.accordion2 {
	1338	+ background: url(../img/common/about-change-img02.png) no-repeat;
	1339	+ height: 100%;
	1340	+ width: 100%;
	1341	+ background-size: cover;
	1342	+
	1343	+}
	1344	+
	1345	+.accordion3 {
	1346	+ background: url(../img/common/about-change-img03.png) no-repeat;
	1347	+ height: 100%;
	1348	+ width: 100%;
	1349	+ background-size: cover;
	1350	+
	1351	+}
1295	1352
1296	1353	.slideText p:first-child {
1297	1354	font-size: 3rem;
...	...	@@ -1346,11 +1403,139 @@
1346	1403	width: 100%;
1347	1404	}
1348	1405
	1406	+.accordion1.active {
	1407	+ width: 100%;
	1408	+ height: 100%;
	1409	+ background: url(../img/common/about-img-db.png)no-repeat;
	1410	+ background-size: cover;
	1411	+ position: relative;
	1412	+}
	1413	+
	1414	+.accordion1::after {
	1415	+ content: '01';
	1416	+ position: absolute;
	1417	+ top: 22px;
	1418	+ left: 25px;
	1419	+ font-size: 3.6rem;
	1420	+ width: 30px;
	1421	+ color: rgba(255, 255, 255, 0.637);
	1422	+ font-size: 3.6rem;
	1423	+ font-family: 'MontserratBolde';
	1424	+ font-weight: bold;
	1425	+}
	1426	+
	1427	+.accordion1::before {
	1428	+ content: 'AI Solution';
	1429	+ position: absolute;
	1430	+ top: 65px;
	1431	+ left: 25px;
	1432	+ /* padding: 1rem ; */
	1433	+ font-size: 3.6rem;
	1434	+ width: 100px;
	1435	+ text-align: left;
	1436	+ height: 100px;
	1437	+ color: #ffffff;
	1438	+ font-size: 3.6rem;
	1439	+ font-family: 'MontserratBolde';
	1440	+ font-weight: bold;
	1441	+}
	1442	+
	1443	+.accordion1.active::after,
	1444	+.accordion1.active::before,
	1445	+.accordion2.active::after,
	1446	+.accordion2.active::before,
	1447	+.accordion3.active::after,
	1448	+.accordion3.active::before {
	1449	+ display: none;
	1450	+}
	1451	+
	1452	+.accordion2.active {
	1453	+ width: 100%;
	1454	+ height: 100%;
	1455	+ background: url(../img/common/about-img-bg02.png)no-repeat;
	1456	+ background-size: cover;
	1457	+ position: relative;
	1458	+
	1459	+}
	1460	+
	1461	+.accordion2::after {
	1462	+ content: '02';
	1463	+ position: absolute;
	1464	+ top: 22px;
	1465	+ left: 25px;
	1466	+ font-size: 3.6rem;
	1467	+ width: 30px;
	1468	+ color: rgba(255, 255, 255, 0.637);
	1469	+ font-size: 3.6rem;
	1470	+ font-family: 'MontserratBolde';
	1471	+ font-weight: bold;
	1472	+}
	1473	+
	1474	+.accordion2::before {
	1475	+ content: 'System Design';
	1476	+ position: absolute;
	1477	+ top: 65px;
	1478	+ left: 25px;
	1479	+ /* padding: 1rem ; */
	1480	+ font-size: 3.6rem;
	1481	+ width: 100px;
	1482	+ text-align: left;
	1483	+ height: 100px;
	1484	+ color: #ffffff;
	1485	+ font-size: 3.6rem;
	1486	+ font-family: 'MontserratBolde';
	1487	+ font-weight: bold;
	1488	+}
	1489	+
	1490	+.accordion3.active {
	1491	+ width: 100%;
	1492	+ height: 100%;
	1493	+ background: url(../img/common/about-img-bg03.png)no-repeat;
	1494	+ background-size: cover;
	1495	+ position: relative;
	1496	+
	1497	+}
	1498	+
	1499	+.accordion3::after {
	1500	+ content: '03';
	1501	+ position: absolute;
	1502	+ top: 22px;
	1503	+ left: 25px;
	1504	+ font-size: 3.6rem;
	1505	+ width: 30px;
	1506	+ color: rgba(255, 255, 255, 0.637);
	1507	+ font-size: 3.6rem;
	1508	+ font-family: 'MontserratBolde';
	1509	+ font-weight: bold;
	1510	+}
	1511	+
	1512	+.accordion3::before {
	1513	+ content: 'Data Science';
	1514	+ position: absolute;
	1515	+ top: 65px;
	1516	+ left: 25px;
	1517	+ /* padding: 1rem ; */
	1518	+ font-size: 3.6rem;
	1519	+ width: 100px;
	1520	+ text-align: left;
	1521	+ height: 100px;
	1522	+ color: #ffffff;
	1523	+ font-size: 3.6rem;
	1524	+ font-family: 'MontserratBolde';
	1525	+ font-weight: bold;
	1526	+}
1349	1527
1350	1528	.accordion.active {
1351	1529	flex: 3;
1352		- filter: brightness(100%);
1353	1530
	1531	+}
	1532	+
	1533	+.accordion.active .slideText {
	1534	+ opacity: 1;
	1535	+}
	1536	+
	1537	+.accordion .slideText {
	1538	+ opacity: 0;
1354	1539	}
1355	1540
1356	1541	.accordion.active .slideImg {
...	...	@@ -1368,7 +1553,7 @@
1368	1553	.accordion.active .accordion-num {
1369	1554	color: #80649b;
1370	1555	font-size: 3.6rem;
1371		- font-family: 'MontserratBolde';
	1556	+ font-family: 'MontserratBolde';
1372	1557
1373	1558	font-weight: bold;
1374	1559
...	...	@@ -1388,7 +1573,7 @@
1388	1573	color: #b1a1c3;
1389	1574	font-size: 3.6rem;
1390	1575	font-weight: bold;
1391		- font-family: 'MontserratBolde';
	1576	+ font-family: 'MontserratBolde';
1392	1577	}
1393	1578
1394	1579	.accordion.active p,
...	...	@@ -1462,9 +1647,11 @@
1462	1647	font-weight: 900;
1463	1648
1464	1649	}
1465		-.traffic-img-box{
	1650	+
	1651	+.traffic-img-box {
1466	1652	width: 100%;
1467	1653	}
	1654	+
1468	1655	.active-year {
1469	1656	font-size: 7rem;
1470	1657	font-weight: 900;
...	...	@@ -1622,14 +1809,33 @@
1622	1809	word-break: keep-all;
1623	1810	font-weight: 500;
1624	1811	}
1625		-.etc-text-deco p{
	1812	+
	1813	+.etc-text-deco p {
1626	1814	position: relative;
1627	1815	margin-left: 5px;
1628	1816	}
1629		-.etc-text-deco p::after{
	1817	+
	1818	+.etc-text-deco p::after {
1630	1819	content: '-';
1631	1820	position: absolute;
1632	1821	top: 0;
1633	1822	left: -1%;
1634	1823
	1824	+}
	1825	+
	1826	+.month-text {
	1827	+ width: 80%;
	1828	+}
	1829	+
	1830	+.month-text p {
	1831	+ width: 80%;
	1832	+ margin-left: 10px;
	1833	+ position: relative;
	1834	+}
	1835	+
	1836	+.month-text p::after {
	1837	+ content: '·';
	1838	+ position: absolute;
	1839	+ top: 0;
	1840	+ left: -2%;
1635	1841	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -18,100 +18,96 @@
18	18
19	19	<style scoped>
20	20	footer {
21		- width: 100%;
22		- /* height: 300px; */
23		- padding: 40px;
24		- /* opacity: 0; */
25		- /* display: none; */
26		- position: relative;
27		- bottom: 0px;
28		- left: 0;
29		- z-index: 56;
30		- transition: all 0.5s;
31		- background-color: #333;
32		-}
33		-
34		- /* 스크롤바 없애기 */
35		- body {
36		- -ms-overflow-style: none;
37		- /* 인터넷 익스플로러 */
38		- scrollbar-width: none;
39		- /* 파이어폭스 */
40		- }
41		-
42		- ::-webkit-scrollbar {
43		- display: none;
44		- }
45		-
46		- #header {
47		- position: fixed;
48		- top: 0;
49		- z-index: 3;
50		- border-bottom: 1px solid #ced4da;
51		- background-color: white !important;
52		- }
53		-
54		- #header .header .logo {
55		- background: url(../../resources/img/component/logo-color.png) no-repeat;
56		- width: 200px;
57		- background-size: contain;
58		- height: 25px;
59		-
60		-
61		- }
62		-
63		- #header .header nav li a {
64		- color: #333;
65		-
66		- }
67		-
68		-
69		-
70		- html,
71		- body {
72		- position: relative;
73		- height: 100%;
74		-
75		- }
76		-
77		- body {
78		- background-color: #fff;
79		- /* background: linear-gradient(#f8f9fa, #fff, #fff); */
80		- font-family: 'Pretendard';
81		- font-size: 14px;
82		- color: #000;
83		- margin: 0;
84		- padding: 0;
85		- }
86		-
87		- .swiper {
88		- width: 100%;
89		- height: 100%;
90		- }
91		-
92		- .swiper-slide {
93		- text-align: center;
94		- font-size: 18px;
95		- display: flex;
96		- justify-content: center;
97		- align-items: center;
98		- }
99		-
100		- .swiper-slide img {
101		- height: 356px;
102		- display: block;
103		- object-fit: cover;
104		- }
105		-
106		- .box-wrap p {
107		- font-size: 2.1rem;
108		- font-weight: 500;
109		- }
110		- .dropdown {
111		- background-color: #fff !important;
	21	+ width: 100%;
	22	+ padding: 40px;
	23	+ position: relative;
	24	+ bottom: 0px;
	25	+ left: 0;
	26	+ transition: all 0.5s;
	27	+ background-color: #333;
112	28	}
113	29
114		-</style>
	30	+ /* 스크롤바 없애기 */
	31	+ body {
	32	+ -ms-overflow-style: none;
	33	+ /* 인터넷 익스플로러 */
	34	+ scrollbar-width: none;
	35	+ /* 파이어폭스 */
	36	+ }
	37	+
	38	+ ::-webkit-scrollbar {
	39	+ display: none;
	40	+ }
	41	+
	42	+ #header {
	43	+ position: fixed;
	44	+ top: 0;
	45	+ z-index: 3;
	46	+ border-bottom: 1px solid #ced4da;
	47	+ background-color: white !important;
	48	+ }
	49	+
	50	+ #header .header .logo {
	51	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	52	+ width: 200px;
	53	+ background-size: contain;
	54	+ height: 25px;
	55	+
	56	+
	57	+ }
	58	+
	59	+ #header .header nav li a {
	60	+ color: #333;
	61	+
	62	+ }
	63	+
	64	+
	65	+
	66	+ html,
	67	+ body {
	68	+ position: relative;
	69	+ height: 100%;
	70	+
	71	+ }
	72	+
	73	+ body {
	74	+ background-color: #fff;
	75	+ /* background: linear-gradient(#f8f9fa, #fff, #fff); */
	76	+ font-family: 'Pretendard';
	77	+ font-size: 14px;
	78	+ color: #000;
	79	+ margin: 0;
	80	+ padding: 0;
	81	+ }
	82	+
	83	+ .swiper {
	84	+ width: 100%;
	85	+ height: 100%;
	86	+ }
	87	+
	88	+ .swiper-slide {
	89	+ text-align: center;
	90	+ font-size: 18px;
	91	+ display: flex;
	92	+ justify-content: center;
	93	+ align-items: center;
	94	+ }
	95	+
	96	+ .swiper-slide img {
	97	+ height: 356px;
	98	+ display: block;
	99	+ object-fit: cover;
	100	+ }
	101	+
	102	+ .box-wrap p {
	103	+ font-size: 2.1rem;
	104	+ font-weight: 500;
	105	+ }
	106	+
	107	+ .dropdown {
	108	+ background-color: #fff !important;
	109	+ }
	110	+ </style>
115	111	<title>TAKENSOFT</title>
116	112	</head>
117	113
...	...	@@ -163,8 +159,8 @@
163	159	<p>고객지원 ) 053-811-1700(평일9시~18시)</p>
164	160	<p style="width: 17.5%;">대표메일 ) [email protected]</p>
165	161	</div>
166		- <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
167		- <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
	162	+ <p>주소 ) 본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
	163	+ <p class="pl40">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
168	164	</div>
169	165	<p class="copyright">Copyright 2021. Takensoft. all rights reserved.</p>
170	166	</div>

...	...	@@ -139,7 +139,7 @@
139	139	</div>
140	140	<div class="solution-text-box solution-deco-sub">
141	141	<h3 class="text-box-title ">특장점</h3>
142		- <div class="flex " style="gap: 80px; flex-wrap: nowrap;">
	142	+ <div class="flex " style="gap: 80px; flex-wrap: nowrap; margin-left: 30px;">
143	143	<div class="flex-column">
144	144	<p class=""> DB 연계형 데이터 수집 서비스</p>
145	145	<p class=""> 데이터 시각화 시스템</p>
...	...	@@ -258,7 +258,7 @@
258	258	</div>
259	259	<div class="solution-text-box solution-deco-sub">
260	260	<h3 class="text-box-title">특장점</h3>
261		- <div class="flex" style=" flex-wrap: nowrap; gap:20px;">
	261	+ <div class="flex" style=" flex-wrap: nowrap; gap:16px; margin-left: 30px;">
262	262	<div class="flex-column">
263	263	<p class="pl10"> 횡단보도 관제 분석 시스템 구축</p>
264	264	<p class="pl10"> 현장모니터링 화면 구성</p>

Delete comment