rlagkdud898 / TAKENSOFT star
mycoms 2024-04-11
240411 김하영
@614e6789fa11e618bad8fccc5e77c7112f342b0e
 
614e678
.vscode/settings.json (added)
+++ .vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}(No newline at end of file)
becb6d0
614e678
resources/css/style.css
--- resources/css/style.css
+++ resources/css/style.css
@@ -5,7 +5,7 @@
 
     height: 100%;
 
     margin: auto;
 
     /* align-content: center; */
 
-    padding-top: 12rem;
 
+    /* padding-top: 12rem; */
 
     text-align: center;
 
 }
@@ -648,22 +648,24 @@
 
 
 #footer {
 
     width: 100%;
 
-    transition: opacity 0.5s, visibility 0.5s;
 
-    /* height: 200px; */
 
+    /* height: 300px; */
 
     padding: 30px;
 
-    position: relative;
 
-    bottom: 0;
 
-    transition: all 0.5s;
 
+    /* opacity: 0; */
 
     /* display: none; */
 
+    position: relative;
 
+    bottom: 0px;
 
+    left: 0;
 
+    z-index: 56;
 
+    transition: all 0.5s;
 
     background-color: #333;
 
 }
 
+/* #footer.active {
 
+    opacity: 1;
 
+    display: block;
 
 
-/* #footer.show {
 
-    position: relative;
 
-    bottom: 200px;
 
-    z-index: 10000;
 
-    display: block !important;
 
 } */
 
+
 
+
 
 .show-footer {
 
     margin-bottom: 100px;
 
     /* 푸터의 높이에 따라 조정 */
@@ -1248,7 +1250,7 @@
 
 .accordion.active .accordion-num,
 
 .accordion.active .accordion-num span {
 
     color: #80649b;
 
-
 
+    font-size: 3rem;
 
 }
 
 
 .accordion.active p,
@@ -1418,7 +1420,9 @@
 
     z-index: 1111;
 
     background-color: #242a305e;
 
 }
 
-
 
+.mobil-swiper{
 
+    display: none;
 
+}
 
 .traffic-video {
 
     position: absolute;
 
     top: 50%;
@@ -1441,7 +1445,7 @@
 
 }
 
 
 .traffic-video p {
 
-    font-size: 2rem;
 
+    font-size:3rem;
 
     color: #213F99;
 
     font-weight: 600;
 
 }
 
614e678
resoures/css/main copy.css (added)
+++ resoures/css/main copy.css
@@ -0,0 +1,1395 @@
+@charset "utf-8";
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+body {
+    -ms-overflow-style: none;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+
+}
+
+.swiper {
+    width: 100%;
+    height: 100%;
+    color: white;
+
+}
+
+.mobileMenu {
+    display: none;
+}
+
+.text-array {
+    font-size: 12rem;
+    color: #fff;
+    line-height: 80%;
+    font-family: "Montserrat", sans-serif;
+    font-weight: 900;
+}
+
+.animation {
+    opacity: 0;
+    transition: opacity 3s ease-in;
+
+}
+
+.animation.active {
+    opacity: 1;
+}
+
+
+.sub-text {
+    color: #fff;
+    font-size: 3rem;
+}
+
+.sub-text p:nth-of-type(1) {
+    color: #fff;
+    font-size: 2rem;
+    margin: 5rem 1rem;
+
+}
+
+.sub-text p:nth-of-type(2),
+.content-explanation p:nth-of-type(2) {
+    color: #fff;
+    font-size: 1.8rem;
+    line-height: 180%;
+}
+
+
+.text-main {
+    color: #fff;
+    font-size: 2rem;
+}
+
+.text-main p {
+
+    margin-bottom: 13rem;
+}
+
+.historyImg,
+.biManagerArea,
+.ai-wrap,
+.voucher-wrap {
+    opacity: 0;
+    transition: opacity 0.6s ease;
+}
+
+.historyImg.on,
+.biManagerArea.on,
+.ai-wrap.on,
+.voucher-wrap.on {
+    opacity: 1;
+    animation-name: trans;
+    animation-duration: 5s;
+    animation-iteration-count: 1;
+}
+
+@keyframes trans {
+
+    /* keyframe */
+    from {
+        left: 0;
+    }
+
+    /* keyframe */
+    to {
+        left: 300px;
+    }
+}
+
+/* index */
+
+
+.slide-bg {
+    position: relative;
+}
+
+.slide-bg::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.473);
+}
+
+.text-zone {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1000;
+    padding: 30px;
+}
+
+.text-zone.on {
+    animation-duration: 3s;
+    animation-name: slidein;
+}
+
+.main-text {
+    font-size: 8rem;
+    color: #fff;
+    font-family: "Pretendard Variable";
+    font-weight: 800;
+    margin-bottom: 57px;
+}
+
+.main-text span {
+    color: transparent !important;
+    -webkit-text-stroke: 1px #fff;
+    background-color: transparent !important;
+    font-family: "Noto Sans KR", sans-serif;
+    font-weight: bold;
+}
+
+.main-text.on {
+
+    animation-name: slidein;
+    animation-duration: 3s;
+    animation-iteration-count: 1;
+}
+
+@keyframes slidein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.content-explanation p:nth-of-type(1) {
+    color: #fff;
+    font-size: 2rem;
+    margin: 1rem;
+}
+
+.portfolio-zone {
+    height: 100%;
+    background-color: #000;
+}
+
+.portfolio {
+    padding: 100px 30px;
+    height: 100%;
+}
+
+.portfolio.on {
+    animation-duration: 3s;
+    animation-name: slidein;
+}
+
+.portfolio-title {
+    font-size: 8rem;
+    color: #fff;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.portfolio-title span {
+    color: transparent;
+    -webkit-text-stroke: 1px white;
+}
+
+.innerSwiper .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+}
+
+.innerSwiper .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 50%;
+    background-color: #fff;
+    object-fit: cover;
+    margin-bottom: 20px;
+}
+
+/* ------------------------------------------------------------------------------------ */
+
+
+
+/* introduce */
+.intro-main {
+    background-color: #000;
+}
+
+.top-zone {
+    margin-bottom: 50px;
+}
+
+.download-btn {
+    margin-left: 10px;
+    border: 1px solid #fff;
+    border-radius: 5px;
+    padding: 10px 10px;
+    color: #fff;
+    font-size: 1.6rem;
+    transition: transform 0.3s ease-in-out;
+}
+
+.download-btn:hover {
+    transform: translateY(-5px);
+
+}
+
+.history-swiper .swiper-wrapper {
+    height: 90%;
+}
+
+.year-title {
+    font-size: 10rem;
+    font-family: "Montserrat", sans-serif;
+    font-weight: 800;
+
+}
+
+.year-title span {
+    font-size: 4rem;
+    font-family: "Montserrat", sans-serif;
+    font-weight: 900;
+    text-shadow: -1px 0px rgb(255, 255, 255), 0px 1px rgb(255, 255, 255), 1px 0px rgb(255, 255, 255), 0px -1px rgb(255, 255, 255);
+    color: rgba(0, 0, 0, 0.961);
+}
+
+.detail p {
+    font-size: 2.2rem;
+    font-weight: 600;
+    padding: 1.5rem 0;
+}
+
+.detail li {
+    font-size: 1.4rem;
+    line-height: 1.3;
+    padding: 0 2rem;
+}
+
+.history-year-button {
+    color: #fff;
+    width: 100%;
+    margin: 0 auto;
+    font-size: 2rem;
+    padding: 3rem 0;
+}
+
+.introduce {
+    background-color: #000;
+    padding: 10rem 0 0;
+}
+
+.historyarea {
+    width: 100%;
+    height: 70%;
+    gap: 5rem;
+}
+
+.history-bg {
+    width: 100%;
+    height: 100%;
+    background: url(../img/history_top_bg.png)no-repeat;
+    background-size: contain;
+
+}
+
+.historyEvent {
+    opacity: 0;
+    transition: opacity 2s ease;
+}
+
+.historyEvent.on {
+    opacity: 1;
+}
+
+.historyarea img {
+    width: 90%;
+}
+
+.historySwiper {
+    padding: 0px 0px 2rem 0;
+}
+
+.historySwiper .swiper-wrapper {
+    width: 500px;
+    max-width: 500px;
+    color: white;
+}
+
+.animated-item:hover {
+    animation: bounce-top 1s;
+}
+
+@keyframes bounce-top {
+    0% {
+        -webkit-transform: translateY(-45px);
+        transform: translateY(-45px);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 1;
+    }
+
+    24% {
+        opacity: 1;
+    }
+
+    40% {
+        -webkit-transform: translateY(-24px);
+        transform: translateY(-24px);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    65% {
+        -webkit-transform: translateY(-12px);
+        transform: translateY(-12px);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    82% {
+        -webkit-transform: translateY(-6px);
+        transform: translateY(-6px);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    93% {
+        -webkit-transform: translateY(-4px);
+        transform: translateY(-4px);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    25%,
+    55%,
+    75%,
+    87% {
+        -webkit-transform: translateY(0px);
+        transform: translateY(0px);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+
+    100% {
+        -webkit-transform: translateY(0px);
+        transform: translateY(0px);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+        opacity: 1;
+    }
+}
+
+.history-year-button div:first-child {
+    color: white;
+    padding: 0 200px;
+}
+
+.history-year-button div:nth-child(2) {
+    color: white;
+    padding: 0 200px;
+}
+
+.history-year-button>p {
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.502);
+}
+
+.history-year-button>p.active {
+    font-size: 2.5rem;
+    font-weight: 900;
+    color: white;
+    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.349);
+
+}
+
+.mainTextArea img {
+    width: 30%;
+}
+
+.clientArea,
+.Chart {
+    width: 100%;
+    height: 100%;
+    padding: 100px 0 0 0;
+}
+
+.clientArea {
+    padding: 0px;
+
+}
+
+.clientWrap {
+    height: 60%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    padding: 2rem;
+    margin: 0 auto;
+    gap: 30px;
+}
+
+
+.clientWrap div {
+    width: 100%;
+    height: 100px;
+    border-radius: 1rem;
+    padding: 1rem 1rem;
+    text-align: center;
+    border: 3px solid gray;
+
+}
+
+.clientWrap img {
+    object-fit: contain;
+    width: 200px;
+    height: 75px;
+    padding: 2rem 1rem;
+    border-radius: 1rem;
+}
+
+.clientWrap div:hover {
+    border: 3px solid white;
+    animation: jello-vertical 1s infinite;
+}
+
+@keyframes jello-vertical {
+    0% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+
+    40% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+
+    50% {
+        -webkit-transform: scale3d(0.85, 1.15, 1);
+        transform: scale3d(0.85, 1.15, 1);
+    }
+
+    65% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+
+    75% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+
+    100% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.Chart {
+    height: 50%;
+    width: 100%;
+
+}
+
+.chartTree {
+    margin: 0 auto;
+    height: 100%;
+    text-align: center;
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-top: 50px;
+}
+
+.chartTreeImg {
+    justify-content: flex-end;
+    height: 150px;
+    font-size: 1.7rem;
+    position: relative;
+    gap: 50px;
+
+}
+
+.chartImg {
+    flex: 0 0 40%;
+    justify-content: flex-end;
+
+}
+
+.chartImg img {
+    width: 300px;
+    border: 1px solid white;
+    padding: 2rem 7rem;
+    background: linear-gradient(-45deg, #0000ff, #f29600);
+}
+
+.chartWrap {
+    gap: 20px;
+    position: relative;
+    padding: 5rem 0 0 0;
+}
+
+.chartWrap::before {
+    content: '';
+    width: 917px;
+    /* transform: rotate(90deg); */
+    border-top: 1px solid rgb(255, 255, 255);
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 30px 0;
+    text-align: center;
+    z-index: -1;
+}
+
+.chartArea {
+    width: 100%;
+    height: 100%;
+}
+
+.chartArea>ul>li>a {
+    display: block;
+    font-size: 1.7rem;
+    font-family: 'GmarketSansMedium';
+    padding: 1.5rem 0;
+    font-weight: 200;
+    color: white;
+    border-bottom: 1px solid gray;
+}
+
+.chartButton {
+    flex: 0 0 25%;
+    border: 1px solid white;
+    color: white;
+    padding: 1.5rem 0;
+    font-family: 'GmarketSansMedium';
+    position: relative;
+    background-color: rgba(48, 52, 63, 0.765);
+}
+
+.chartTitle {
+    border: 1px solid white;
+    color: white;
+    font-family: 'GmarketSansMedium';
+    padding: 3rem;
+    position: relative;
+    background-color: rgba(48, 52, 63, 0.765);
+}
+
+.chartTreeImg::before {
+    content: '';
+    height: 99px;
+    border: 1px solid rgb(255, 255, 255);
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    z-index: -1;
+}
+
+.chartTitle::after {
+    content: "";
+    position: absolute;
+    border: 1px solid white;
+    top: -52px;
+    left: 50%;
+    height: 48px;
+    z-index: -1;
+}
+
+.chartButton a::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -172px;
+    color: white;
+    transform: translateY(-25%);
+    font-size: 1.7rem;
+    border: 1px solid rgb(255, 255, 255);
+    padding: 0px 8.5rem;
+    z-index: -1;
+    background-color: rgba(49, 49, 49, 0.532);
+}
+
+
+.chartText {
+    justify-content: center;
+    gap: 30px;
+}
+
+.chartText a {
+    color: white;
+}
+/* --------------------------------------------------------------------------------------------------------- */
+
+
+/* business/businessData*/
+
+.content-title-wrap {
+    padding-top: 7rem;
+}
+
+.aiContent {
+    gap: 30px;
+}
+
+.aiContentBox {
+    width: 100%;
+    height: 500px;
+    padding: 1rem 2rem;
+    justify-content: space-between;
+    border: 1px solid white;
+    border-radius: 1rem;
+}
+
+.aiContentBox div {
+    justify-content: space-between;
+}
+
+.aiContentBox div p:first-child {
+    font-size: 8rem;
+    color: #636363;
+    font-family: 'Montserrat';
+    font-weight: bold;
+    font-style: normal;
+
+}
+
+.aiContentBox:hover div p:first-child {
+    color: white;
+    transition: all 0.3s;
+}
+
+.text-box {
+    font-size: 2rem;
+    font-family: 'GmarketSansMedium';
+    font-weight: 500;
+    font-style: normal;
+    color: white;
+}
+
+.text-box span {
+    color: rgb(222, 222, 222);
+    font-size: 1.7rem;
+    font-weight: 200;
+
+}
+
+.text-box span strong {
+    color: white;
+}
+
+.aiContentImg {
+    text-align: right;
+    padding: 1rem;
+}
+
+.aiContentImg img {
+    width: 130px;
+}
+
+.aiContentArea {
+    gap: 50px;
+    margin: 0 auto;
+    width: 70%;
+}
+
+.dataContentArea {
+    gap: 80px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.aiContentArea p,
+.dataContentArea p {
+    border: 1px solid white;
+    border-radius: 4rem;
+    width: 100%;
+    padding: 5rem;
+    font-family: 'GmarketSansMedium';
+    text-align: center;
+    font-size: 2.5rem;
+    color: white;
+    background-color: #1D1F27;
+}
+
+.aiContentStory {
+    gap: 30px;
+    justify-content: space-evenly !important;
+}
+
+.aiContentStory img {
+    text-align: right;
+    opacity: 0;
+}
+
+.aiContentStory img.on {
+    opacity: 1;
+    animation: transl 0.5s;
+}
+
+.aiContentStory p {
+    color: white;
+    font-size: 1.7rem;
+    width: 50%;
+}
+
+.aiContentStory p.on {
+    opacity: 1;
+    animation: transr 0.5s;
+}
+
+
+
+/* soultion */
+
+
+
+.biManagerArea {
+    padding: 6rem 0 0 0;
+}
+
+.biManagerMainImg {
+    height: 250px;
+    width: 55%;
+
+}
+
+.biManagerMainImg.on {
+
+    animation: transl 0.5s;
+}
+
+@keyframes transl {
+    from {
+        transform: translateX(-5000px);
+    }
+
+    to {
+        transform: translateX(0px);
+
+    }
+}
+
+.biManager {
+    display: flex;
+    flex-direction: column;
+}
+
+.biManager.on {
+
+    animation: transr 0.5s;
+}
+
+@keyframes transr {
+    from {
+        transform: translateX(5000px);
+    }
+
+    to {
+        transform: translateX(0px);
+
+    }
+}
+
+.biManagerMainImg img {
+    width: 100%;
+}
+
+.biManagerBox {
+    display: grid;
+    gap: 30px;
+    margin-bottom: 100px;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+.biManagerBox>div {
+    padding: 5rem 1rem 0 1rem;
+    align-items: center;
+    justify-content: center;
+    background-color: #1d1f27;
+    border: 1px solid white;
+
+}
+
+.biManagerBox div p {
+    font-size: 2rem;
+}
+
+
+.title-sub-text {
+    font-family: 'GmarketSansBold';
+    font-weight: bold;
+    font-style: normal;
+    font-size: 1.7rem;
+    color: white;
+}
+
+.biManagerText {
+    text-align: left;
+    position: relative;
+    font-family: 'GmarketSansBold';
+    font-weight: bold;
+    font-style: normal;
+    z-index: 11;
+    color: white;
+}
+
+
+.biManagerImg {
+    width: 100%;
+    text-align: right;
+    padding: 10px 0;
+}
+
+.biManagerImg img {
+    width: 20%;
+
+}
+
+
+.before1::before {
+    content: "01";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before2::before {
+    content: "02";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before3::before {
+    content: "03";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before4::before {
+    content: "04";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before5::before {
+    content: "05";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before6::before {
+    content: "06";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.container {
+    width: 90%;
+    display: flex;
+    border-radius: 20px;
+    margin: 0 auto;
+    overflow: hidden;
+    margin-top: 6rem;
+}
+
+.slide {
+    height: 56vh;
+    padding: 2rem 1rem;
+    cursor: pointer;
+    color: #fff;
+    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;
+}
+
+.slideText p:first-child {
+    color: #ffffffac;
+    font-size: 3rem;
+    font-family: 'GmarketSansBold';
+    font-weight: bold;
+    font-style: normal;
+    z-index: 1;
+}
+
+.slideText p:last-child {
+    font-size: 2rem;
+    font-family: 'GmarketSansBold';
+    font-style: normal;
+}
+
+.slideTextDtail {
+    padding: 0 2rem;
+}
+
+.slideTextDtail p {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    opacity: 0;
+}
+
+.slideImg {
+    padding: 2rem;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    filter: brightness(50%);
+}
+
+.slideImg img {
+    border-radius: 1rem;
+    width: 100%;
+    height: 288px;
+}
+
+
+.slide.active {
+    flex: 5;
+
+}
+
+.slide.active .slideImg {
+    opacity: 1;
+    filter: brightness(100%);
+
+}
+
+.slide.active p {
+    opacity: 1;
+    transition: opacity 0.3s ease-in 0.4s;
+}
+
+
+/* promotion */
+
+.text-animation {
+    height: 100px;
+    overflow-y: hidden;
+    display: block;
+}
+
+.text-animation .text-array {
+    animation-name: grow;
+    animation-duration: 1s;
+}
+
+@keyframes grow {
+    from {
+        opacity: 0;
+        transform: translateY(3em)
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+
+.video-container {
+    gap: 10px;
+    padding: 2rem 0;
+}
+
+.viedoArea {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    z-index: 10;
+}
+
+.bgWrap-promotion .viedoArea video {
+    z-index: 100000 !important;
+    position: relative;
+}
+
+.viedoArea::after {
+    content: '';
+    background: url(../img/video-after.png) no-repeat;
+    position: absolute;
+    top: -15%;
+    left: -30%;
+    width: 735px;
+    height: 50%;
+    z-index: 1;
+}
+
+.viedoArea::before {
+    content: '';
+    background: url(../img/video-befor.png) no-repeat;
+    position: absolute;
+    bottom: -45%;
+    right: -42%;
+    width: 735px;
+    height: 50%;
+}
+
+.videoBtn {
+    padding: 0 4rem;
+    width: 20%;
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid white;
+    background-color: #00000000;
+    color: #636363;
+    font-family: 'GmarketSansMedium';
+
+}
+
+.videoBtn.active {
+    background: linear-gradient(-45deg, #0000ff, #f29600);
+    color: white;
+}
+
+.text-container p {
+    text-align: center;
+    padding: 1rem 0;
+    font-size: 1.7rem;
+    color: white;
+
+}
+
+.videoText1 p:first-child,
+.videoText2 p:first-child {
+    color: white;
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+
+
+
+/* authentication */
+
+.title-wrap {
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 6rem 0 0;
+}
+
+.crapeArea {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 30px;
+    margin: 0 auto;
+    padding-top: 6rem;
+    cursor: pointer;
+}
+
+.carapeContent-title {
+    border: 1px solid white;
+    background-color: #00000000;
+    padding: 1rem 3rem;
+    color: white;
+    font-size: 2rem;
+    font-family: 'Pretendard-Regular';
+    font-weight: 500;
+    border-radius: 1rem;
+    cursor: pointer;
+}
+
+.crapeAreaBtn1.on,
+.crapeAreaBtn2.on {
+    background: linear-gradient(-45deg, #0000ff, #f29600);
+    color: white;
+}
+
+.crapeArea img {
+    border: 1px solid white;
+    border-radius: 10px;
+    padding: 2rem;
+    width: 100%;
+    height: 85%;
+}
+
+.crapeArea p {
+    font-family: 'PretendardVariable';
+    font-weight: 600;
+    width: 100%;
+    padding: 1rem 0;
+    font-size: 1.3rem;
+    color: white;
+    text-align: center;
+
+}
+
+
+/* voucher */
+.mapText>div {
+    text-align: center;
+}
+
+.boxArea {
+    display: grid;
+    grid-template-columns: 1fr 20% 1fr;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+    padding: 10rem 0 0 0;
+}
+
+.boxText {
+    margin: 0 auto;
+    width: 150px;
+    height: 150px;
+    font-size: 2rem;
+    line-height: 150px;
+    text-align: center;
+    color: white;
+    background-color: #1c55a4;
+
+    border-radius: 50%;
+    position: relative;
+    font-family: 'GmarketSansMedium';
+}
+
+.dataBox {
+    border: 1px solid white;
+    border-radius: 20px;
+    overflow: hidden;
+    width: 100%;
+    background-color: #1d1f27;
+}
+
+.dataBox.on {
+    animation: transl 0.5s;
+}
+
+.aiBox.on {
+    animation: transr 0.5s;
+}
+
+.boxText::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -100px;
+    border: 1px double #1c55a4;
+    width: 100px;
+    z-index: -1;
+}
+
+.boxText::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -100px;
+    border: 1px double #1c55a4;
+    width: 100px;
+    /* height: 1px; */
+    z-index: -1;
+    /* background-color: red; */
+}
+
+.boxTitle {
+    background-color: #3267ff;
+    padding: 30px 0;
+    text-align: center;
+    position: relative;
+    border-bottom: 1px solid white;
+}
+
+.boxTitle::before {
+    content: "";
+    position: absolute;
+    bottom: -18px;
+    left: 50%;
+    transform: rotate(45deg) translateX(-50%);
+    width: 20px;
+    height: 20px;
+    border-bottom: 1px solid white;
+    border-right: 1px solid white;
+    background-color: #3267ff;
+}
+
+.boxTitle p {
+    margin-bottom: 0px !important;
+    font-size: 3rem !important;
+    font-family: 'GmarketSansMedium';
+    color: white;
+    text-shadow: 5px 5px 10px #0000006e;
+}
+
+.boxContent {
+    justify-content: space-between;
+    background-color: #1d1f27;
+    padding: 30px;
+}
+
+.boxContent div {
+    height: 200px;
+}
+
+.boxContent>div>p {
+    color: white;
+    font-size: 2rem !important;
+    padding: 1rem 0;
+}
+
+.boxContent a {
+    text-align: center;
+    color: white;
+    border-radius: 10px;
+    font-size: 2rem;
+    padding: 1rem 3rem;
+    border: 1px solid white;
+    background-color: #00000000;
+}
+
+.aiBox {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid white;
+    background-color: #1d1f27;
+}
+
+.crapeArea div {
+    text-align: center;
+    position: relative;
+}
+
+.hover-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 300px;
+    top: 0;
+    left: 0;
+    font-size: 2rem;
+    font-weight: 600;
+    background-color: #000000d8;
+    display: none;
+}
+
+.crapeArea div:hover .hover-text {
+    display: block;
+}
+
+.crapeArea div:hover::before {
+    opacity: 1;
+}
+
+.crapeArea div p {
+    text-align: center;
+}
+
+.imgContent {
+    width: 100%;
+    height: 100%;
+
+}
+
+.imgContent img {
+    width: 100%;
+}
+
+.popupAuthenti {
+    display: none;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #00000084;
+}
+
+.popupAuthenti div {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    background-color: rgb(241, 241, 241);
+    top: 15%;
+    left: 50%;
+    padding: 3rem;
+    text-align: center;
+    border-radius: 1rem;
+    transform: translateX(-50%);
+    transition: opacity 0.5s ease;
+}
+
+
+.popupAuthenti div img {
+    box-shadow: 5px 5px 10px #00000068;
+    border-radius: 1rem;
+    width: 100%;
+    height: 100%;
+}
+
+.popupAuthenti div p {
+    font-size: 2rem;
+    padding: 1rem 0;
+    color: #333;
+}(No newline at end of file)
 
614e678
resoures/css/main.css (added)
+++ resoures/css/main.css
@@ -0,0 +1,1479 @@
+@charset "utf-8";
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+body {
+    -ms-overflow-style: none;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+
+}
+
+.swiper {
+    width: 100%;
+    height: 100%;
+}
+
+.slide-bg {
+    position: relative;
+}
+
+.slide-bg::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.473);
+}
+
+.text-zone {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1000;
+    padding: 30px;
+}
+
+.text-zone.on {
+    animation-duration: 3s;
+    animation-name: slidein;
+}
+
+
+.mobileMenu {
+    display: none;
+}
+
+
+.main-text {
+    font-size: 8rem;
+    color: #fff;
+    font-family: "Pretendard Variable";
+    font-weight: 800;
+    margin-bottom: 57px;
+}
+
+.text-array {
+    font-size: 12rem;
+    color: #fff;
+    line-height: 80%;
+    font-family: "Montserrat", sans-serif;
+    font-weight: 900;
+}
+
+.animation {
+    opacity: 0;
+    transition: opacity 3s ease-in;
+
+}
+
+.animation.active {
+    opacity: 1;
+}
+
+
+.main-text span {
+    color: transparent !important;
+    -webkit-text-stroke: 1px #fff;
+    background-color: transparent !important;
+    font-family: "Noto Sans KR", sans-serif;
+    font-weight: bold;
+}
+
+.sub-text p:nth-of-type(1) {
+    color: #fff;
+    font-size: 2rem;
+    margin: 5rem 1rem;
+
+}
+
+
+
+.content-explanation p:nth-of-type(1) {
+    color: #fff;
+    font-size: 2rem;
+    margin: 1rem;
+}
+
+.sub-text {
+    color: #fff;
+    font-size: 3rem;
+}
+
+.text-main {
+    color: #fff;
+    font-size: 2rem;
+}
+
+.text-main p {
+
+    margin-bottom: 13rem;
+}
+
+.sub-text p:nth-of-type(2),
+.content-explanation p:nth-of-type(2) {
+    color: #fff;
+    font-size: 1.8rem;
+    line-height: 180%;
+}
+
+.portfolio-zone {
+    height: 100%;
+    background-color: #000;
+}
+
+.portfolio {
+    padding: 100px 30px;
+    height: 100%;
+}
+
+.portfolio.on {
+    animation-duration: 3s;
+    animation-name: slidein;
+}
+
+.portfolio-title {
+    font-size: 8rem;
+    color: #fff;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.portfolio-title span {
+    color: transparent;
+    -webkit-text-stroke: 1px white;
+}
+
+.innerSwiper .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+}
+
+.innerSwiper .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 50%;
+    background-color: #fff;
+    object-fit: cover;
+    margin-bottom: 20px;
+}
+
+/* 회사 소개 페이지 */
+.intro-main {
+    background-color: #000;
+}
+
+.top-banner {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+}
+
+.banner-img {
+    background-image: url(../img/topbanner.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 100%;
+}
+
+.topbanner-text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    padding: 30px;
+    color: #fff;
+    /* transform: translateY(-50%); */
+}
+
+.historyBg {
+    padding: 50px 30px;
+    background-image: url(../img/history_top_bg.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.top-zone {
+    margin-bottom: 50px;
+}
+
+
+
+.download-btn {
+    margin-left: 10px;
+    border: 1px solid #fff;
+    border-radius: 5px;
+    padding: 10px 10px;
+    color: #fff;
+    font-size: 1.6rem;
+    transition: transform 0.3s ease-in-out;
+}
+
+.download-btn:hover {
+    transform: translateY(-5px);
+
+}
+
+.history-swiper .swiper-wrapper {
+    height: 90%;
+}
+
+.swiper {
+    color: white;
+}
+
+.content {
+    width: 50%;
+}
+
+.contact-img {
+    flex: 0 0 50%;
+    width: 100%;
+    height: 100%;
+    text-align: right;
+}
+
+.contact-img img {
+    height: 550px;
+    padding: 0 2rem;
+    text-align: right;
+}
+
+.year-title {
+    font-size: 10rem;
+    font-family: "Montserrat", sans-serif;
+    font-weight: 800;
+
+}
+
+.year-title span {
+    font-size: 4rem;
+    font-family: "Montserrat", sans-serif;
+    font-weight: 900;
+    text-shadow: -1px 0px rgb(255, 255, 255), 0px 1px rgb(255, 255, 255), 1px 0px rgb(255, 255, 255), 0px -1px rgb(255, 255, 255);
+    color: rgba(0, 0, 0, 0.961);
+}
+
+.detail p {
+    font-size: 2.2rem;
+    font-weight: 600;
+    padding: 1.5rem 0;
+}
+
+.detail li {
+    font-size: 1.4rem;
+    line-height: 1.3;
+    padding: 0 2rem;
+}
+
+.history-year-button {
+    color: #fff;
+    width: 100%;
+    margin: 0 auto;
+    font-size: 2rem;
+    padding: 3rem 0;
+    /* border: 1px solid red; */
+
+}
+
+.introduce {
+    background-color: #000;
+    padding: 10rem 0 0;
+}
+
+.historyarea {
+    width: 100%;
+    height: 70%;
+    gap: 5rem;
+}
+
+.history-bg {
+    width: 100%;
+    height: 100%;
+    background: url(../img/history_top_bg.png)no-repeat;
+    background-size: contain;
+
+}
+
+.historyEvent {
+    opacity: 0;
+
+    transition: opacity 2s ease;
+
+}
+
+.historyEvent.on {
+    opacity: 1;
+
+}
+
+
+
+.historyarea img {
+    width: 90%;
+}
+
+.historySwiper {
+    padding: 0px 0px 2rem 0;
+}
+
+.historySwiper .swiper-wrapper {
+    width: 500px;
+    max-width: 500px;
+    color: white;
+}
+
+.historyImg,
+.biManagerArea,
+.ai-wrap,
+.voucher-wrap {
+    opacity: 0;
+    transition: opacity 0.6s ease;
+}
+
+.historyImg.on,
+.biManagerArea.on,
+.ai-wrap.on,
+.voucher-wrap.on {
+    opacity: 1;
+    animation-name: trans;
+    animation-duration: 5s;
+    animation-iteration-count: 1;
+}
+
+@keyframes trans {
+
+    /* keyframe */
+    from {
+        left: 0;
+    }
+
+    /* keyframe */
+    to {
+        left: 300px;
+    }
+}
+
+.animated-item:hover {
+    animation: bounce-top  1s ;
+}
+
+@keyframes bounce-top {
+    0% {
+      -webkit-transform: translateY(-45px);
+              transform: translateY(-45px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+      opacity: 1;
+    }
+    24% {
+      opacity: 1;
+    }
+    40% {
+      -webkit-transform: translateY(-24px);
+              transform: translateY(-24px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    65% {
+      -webkit-transform: translateY(-12px);
+              transform: translateY(-12px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    82% {
+      -webkit-transform: translateY(-6px);
+              transform: translateY(-6px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    93% {
+      -webkit-transform: translateY(-4px);
+              transform: translateY(-4px);
+      -webkit-animation-timing-function: ease-in;
+              animation-timing-function: ease-in;
+    }
+    25%,
+    55%,
+    75%,
+    87% {
+      -webkit-transform: translateY(0px);
+              transform: translateY(0px);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+    }
+    100% {
+      -webkit-transform: translateY(0px);
+              transform: translateY(0px);
+      -webkit-animation-timing-function: ease-out;
+              animation-timing-function: ease-out;
+      opacity: 1;
+    }
+  }
+  
+
+.year {
+
+    width: 80%;
+    border-bottom: 1px solid white;
+}
+
+.history-year-button div:first-child {
+    color: white;
+    padding: 0 200px;
+}
+
+.history-year-button div:nth-child(2) {
+    color: white;
+    padding: 0 200px;
+}
+
+.history-year-button>p {
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.502);
+}
+
+.history-year-button>p.active {
+    font-size: 2.5rem;
+    font-weight: 900;
+    color: white;
+    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.349);
+
+}
+
+.mainTextArea img {
+    width: 30%;
+}
+
+.clientArea,
+.Chart {
+    width: 100%;
+    height: 100%;
+    padding: 100px 0 0 0;
+}
+
+.clientArea {
+    padding: 0px;
+
+}
+
+.clientWrap {
+    /* width: 1200px; */
+    height: 60%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    padding: 2rem;
+    margin: 0 auto;
+    gap: 30px;
+}
+
+
+.clientWrap div {
+    width: 100%;
+    height: 100px;
+    border-radius: 1rem;
+    padding: 1rem 1rem;
+    text-align: center;
+    border: 3px solid gray;
+
+}
+
+.clientWrap img {
+    object-fit: contain;
+    width: 200px;
+    height: 75px;
+    padding: 2rem 1rem;
+    border-radius: 1rem;
+}
+
+.clientWrap div:hover {
+    border: 3px solid white;
+    animation: jello-vertical 1s infinite;
+}
+
+@keyframes jello-vertical {
+    0% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+
+    30% {
+        -webkit-transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+
+    40% {
+        -webkit-transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+
+    50% {
+        -webkit-transform: scale3d(0.85, 1.15, 1);
+        transform: scale3d(0.85, 1.15, 1);
+    }
+
+    65% {
+        -webkit-transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+
+    75% {
+        -webkit-transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+
+    100% {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+
+
+
+
+/* 조직도 */
+/*Now the CSS*/
+/* 공통 */
+.box {
+    padding: 2rem 7rem;
+    color: white;
+    font-size: 1.7rem;
+    font-family: 'GmarketSansMedium';
+
+}
+
+.Chart {
+    height: 50%;
+    width: 100%;
+
+}
+
+.chartTree {
+    margin: 0 auto;
+    height: 100%;
+    text-align: center;
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-top: 50px;
+}
+
+.chartTreeImg {
+    justify-content: flex-end;
+    height: 150px;
+    font-size: 1.7rem;
+    position: relative;
+    gap: 50px;
+
+}
+
+.chartImg {
+    flex: 0 0 40%;
+    justify-content: flex-end;
+
+}
+
+.chartImg img {
+    width: 300px;
+    border: 1px solid white;
+    padding: 2rem 7rem;
+    background: linear-gradient(-45deg, #0000ff, #f29600);
+}
+
+
+.chartButton {
+    flex: 0 0 25%;
+    border: 1px solid white;
+    color: white;
+    padding: 1.5rem 0;
+    font-family: 'GmarketSansMedium';
+    position: relative;
+    background-color: rgba(48, 52, 63, 0.765);
+}
+
+.chartTitle {
+    border: 1px solid white;
+    color: white;
+    font-family: 'GmarketSansMedium';
+    padding: 3rem;
+    position: relative;
+    background-color: rgba(48, 52, 63, 0.765);
+}
+
+.chartWrap {
+    gap: 20px;
+    position: relative;
+    padding: 5rem 0 0 0;
+}
+
+.chartArea {
+    width: 100%;
+    height: 100%;
+}
+
+.chartArea>ul>li>a {
+    display: block;
+    font-size: 1.7rem;
+    font-family: 'GmarketSansMedium';
+    padding: 1.5rem 0;
+    font-weight: 200;
+    color: white;
+    border-bottom: 1px solid gray;
+}
+
+.chartTreeImg::before {
+    content: '';
+    height: 99px;
+    border: 1px solid rgb(255, 255, 255);
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    z-index: -1;
+    /* z-index: 10000; */
+}
+
+.chartWrap::before {
+    content: '';
+    width: 917px;
+    /* transform: rotate(90deg); */
+    border-top: 1px solid rgb(255, 255, 255);
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 30px 0;
+    text-align: center;
+    z-index: -1;
+}
+
+.chartTitle::after {
+    content: "";
+    position: absolute;
+    border: 1px solid white;
+    top: -52px;
+    left: 50%;
+    height: 48px;
+    z-index: -1;
+}
+
+.chartButton a::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -172px;
+    color: white;
+    transform: translateY(-25%);
+    font-size: 1.7rem;
+    border: 1px solid rgb(255, 255, 255);
+    padding: 0px 8.5rem;
+    z-index: -1;
+    background-color: rgba(49, 49, 49, 0.532);
+}
+
+
+.chartText {
+    justify-content: center;
+    gap: 30px;
+}
+
+.chartText a {
+    color: white;
+}
+
+/* 솔루션 페이지 */
+
+.wrapper {
+    background-color: #000;
+}
+
+
+
+.procedureWrap {
+    /* padding: 10rem 0 0 0 ; */
+    width: 100%;
+    height: 100%;
+    padding-top: 10rem;
+}
+
+
+
+
+.content-title-wrap {
+
+
+    padding-top: 7rem;
+}
+
+.aiContent {
+    gap: 30px;
+}
+
+
+
+
+.main-text.on {
+
+    animation-name: slidein;
+    animation-duration: 3s;
+    animation-iteration-count: 1;
+}
+
+@keyframes slidein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+
+.aiContentBox {
+    width: 100%;
+    height: 500px;
+    padding: 1rem 2rem;
+    justify-content: space-between;
+    border: 1px solid white;
+    border-radius: 1rem;
+}
+
+.aiContentBox div {
+    justify-content: space-between;
+}
+
+.aiContentBox div p:first-child {
+    font-size: 8rem;
+    color: #636363;
+    font-family: 'Montserrat';
+    font-weight: bold;
+    font-style: normal;
+
+}
+
+.aiContentBox:hover div p:first-child {
+    color: white;
+    transition: all 0.3s;
+}
+
+.text-box {
+    font-size: 2rem;
+    font-family: 'GmarketSansMedium';
+    font-weight: 500;
+    font-style: normal;
+    color: white;
+}
+
+.text-box span {
+    color: rgb(222, 222, 222);
+    font-size: 1.7rem;
+    font-weight: 200;
+
+}
+
+.text-box span strong {
+    color: white;
+}
+
+.aiContentImg {
+    text-align: right;
+    padding: 1rem;
+}
+
+.aiContentBox div img {
+    width: 130px;
+}
+
+.aiContentArea {
+    gap: 50px;
+    margin: 0 auto;
+    width: 70%;
+}
+
+.dataContentArea {
+    gap: 80px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.aiContentArea p,
+.dataContentArea p {
+    border: 1px solid white;
+    border-radius: 4rem;
+    width: 100%;
+    padding: 5rem;
+    font-family: 'GmarketSansMedium';
+    text-align: center;
+    font-size: 2.5rem;
+    color: white;
+    background-color: #1D1F27;
+}
+
+.aiContentStory {
+    gap: 30px;
+    justify-content: space-evenly !important;
+}
+
+.aiContentStory img {
+    /* width: 400px; */
+    text-align: right;
+    opacity: 0;
+}
+.aiContentStory img.on{
+    opacity: 1;
+    animation: transl 0.5s;
+}
+
+.aiContentStory p {
+    color: white;
+    font-size: 1.7rem;
+    width: 50%;
+}
+.aiContentStory p.on{
+    opacity: 1;
+    animation: transr 0.5s;
+}
+
+/* ----솔루션 */
+.biManagerArea {
+    padding: 6rem 0 0 0;
+}
+
+.biManagerMainImg {
+    height: 250px;
+    width: 55%;
+
+}
+
+.biManagerMainImg.on {
+
+    animation: transl 0.5s;
+}
+
+@keyframes transl {
+    from {
+        transform: translateX(-5000px);
+    }
+
+    to {
+        transform: translateX(0px);
+
+    }
+}
+
+.biManager {
+    display: flex;
+    flex-direction: column;
+}
+
+.biManager.on {
+
+    animation: transr 0.5s;
+}
+
+@keyframes transr {
+    from {
+        transform: translateX(5000px);
+    }
+
+    to {
+        transform: translateX(0px);
+
+    }
+}
+
+.biManagerMainImg img {
+    width: 100%;
+}
+
+.biManagerBox {
+    display: grid;
+    gap: 30px;
+    margin-bottom: 100px;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+
+.title-sub-text {
+    font-family: 'GmarketSansBold';
+    font-weight: bold;
+    font-style: normal;
+}
+
+.biManagerText {
+    text-align: left;
+    position: relative;
+    font-family: 'GmarketSansBold';
+    font-weight: bold;
+    font-style: normal;
+    z-index: 11;
+    color: white;
+}
+
+
+.biManagerImg {
+    width: 100%;
+    text-align: right;
+    padding: 10px 0;
+}
+
+.biManagerImg img {
+    width: 20%;
+
+}
+
+.title-sub-text {
+    font-size: 1.7rem;
+    color: white;
+}
+
+.biManagerBox>div {
+    padding: 5rem 1rem 0 1rem;
+    align-items: center;
+    justify-content: center;
+    background-color: #1d1f27;
+    border: 1px solid white;
+
+}
+
+.biManagerBox div p {
+    font-size: 2rem;
+}
+
+.before1::before {
+    content: "01";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before2::before {
+    content: "02";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before3::before {
+    content: "03";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before4::before {
+    content: "04";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before5::before {
+    content: "05";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+.before6::before {
+    content: "06";
+    position: absolute;
+    color: #54565c;
+    font-family: 'Montserrat';
+    font-weight: 900;
+    font-style: normal;
+    font-size: 6rem;
+    top: -45px;
+    left: 0;
+    z-index: -1;
+}
+
+
+
+/* --- */
+
+
+.container {
+    width: 90%;
+    display: flex;
+    border-radius: 20px;
+    margin: 0 auto;
+    overflow: hidden;
+    margin-top: 6rem;
+}
+
+.slide {
+    height: 56vh;
+    padding: 2rem 1rem;
+    cursor: pointer;
+    color: #fff;
+    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;
+}
+
+.slideText p:first-child {
+    color: #ffffffac;
+    font-size: 3rem;
+    font-family: 'GmarketSansBold';
+    font-weight: bold;
+    font-style: normal;
+    z-index: 1;
+}
+
+.slideText p:last-child {
+    font-size: 2rem;
+    font-family: 'GmarketSansBold';
+    font-style: normal;
+}
+
+.slideTextDtail {
+    padding: 0 2rem;
+}
+
+.slideTextDtail p {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    opacity: 0;
+}
+
+.slideImg {
+    padding: 2rem;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    filter: brightness(50%);
+}
+
+.slideImg img {
+    border-radius: 1rem;
+    width: 100%;
+    height: 288px;
+}
+
+
+.slide.active {
+    flex: 5;
+
+}
+
+.slide.active .slideImg {
+    opacity: 1;
+    filter: brightness(100%);
+
+}
+
+.slide.active p {
+    opacity: 1;
+    transition: opacity 0.3s ease-in 0.4s;
+}
+
+
+/* 비디오 */
+.text-animation {
+    height: 100px;
+    overflow-y: hidden;
+    display: block;
+}
+
+.text-animation .text-array {
+    animation-name: grow;
+    animation-duration: 1s;
+}
+
+.video-container {
+    gap: 10px;
+    padding: 2rem 0;
+}
+
+@keyframes grow {
+    from {
+        opacity: 0;
+        transform: translateY(3em)
+    }
+
+    /* 애니메이션 높이 */
+    to {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+
+
+.viedoArea {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    z-index: 10;
+}
+
+.bgWrap-promotion .viedoArea video {
+    z-index: 100000 !important;
+    position: relative;
+}
+
+.viedoArea::after {
+    content: '';
+    background: url(../img/video-after.png) no-repeat;
+    position: absolute;
+    top: -15%;
+    left: -30%;
+    width: 735px;
+    height: 50%;
+    z-index: 1;
+}
+
+.viedoArea::before {
+    content: '';
+    background: url(../img/video-befor.png) no-repeat;
+    position: absolute;
+    bottom: -45%;
+    right: -42%;
+    width: 735px;
+    height: 50%;
+}
+
+.videoBtn {
+    padding: 0 4rem;
+    width: 20%;
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid white;
+    background-color: #00000000;
+    color: #636363;
+    font-family: 'GmarketSansMedium';
+
+}
+
+.videoBtn.active {
+    background: linear-gradient(-45deg, #0000ff, #f29600);
+    color: white;
+}
+
+.text-container p {
+    text-align: center;
+    padding: 1rem 0;
+    font-size: 1.7rem;
+    color: white;
+
+}
+
+.videoText1 p:first-child,
+.videoText2 p:first-child {
+    color: white;
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+.title-wrap {
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 6rem 0 0;
+}
+
+.crapeArea {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 30px;
+    margin: 0 auto;
+    padding-top: 6rem;
+    cursor: pointer;
+}
+
+.carapeContent-title {
+    border: 1px solid white;
+    background-color: #00000000;
+    padding: 1rem 3rem;
+    color: white;
+    font-size: 2rem;
+    font-family: 'Pretendard-Regular';
+    font-weight: 500;
+    border-radius: 1rem;
+    cursor: pointer;
+}
+
+.crapeAreaBtn1.on,
+.crapeAreaBtn2.on {
+    background: linear-gradient(-45deg, #0000ff, #f29600);
+    color: white;
+}
+
+.crapeArea img {
+    border: 1px solid white;
+    border-radius: 10px;
+    padding: 2rem;
+    width: 100%;
+    height: 85%;
+}
+
+.crapeArea p {
+    font-family: 'PretendardVariable';
+    font-weight: 600;
+    width: 100%;
+    padding: 1rem 0;
+    font-size: 1.3rem;
+    color: white;
+    text-align: center;
+
+}
+
+
+
+.mapText>div {
+    text-align: center;
+}
+
+.boxArea {
+    display: grid;
+    grid-template-columns: 1fr 20% 1fr;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+    padding: 10rem 0 0 0;
+}
+
+.boxText {
+    margin: 0 auto;
+    width: 150px;
+    height: 150px;
+    font-size: 2rem;
+    line-height: 150px;
+    text-align: center;
+    color: white;
+    background-color: #1c55a4;
+
+    border-radius: 50%;
+    position: relative;
+    font-family: 'GmarketSansMedium';
+}
+
+.dataBox {
+    border: 1px solid white;
+    border-radius: 20px;
+    overflow: hidden;
+    width: 100%;
+    background-color: #1d1f27;
+}
+.dataBox.on{
+    animation: transl 0.5s;
+}
+.aiBox.on{
+    animation: transr 0.5s;
+}
+
+.boxText::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -100px;
+    border: 1px double #1c55a4;
+    width: 100px;
+    z-index: -1;
+}
+
+.boxText::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: -100px;
+    border: 1px double #1c55a4;
+    width: 100px;
+    /* height: 1px; */
+    z-index: -1;
+    /* background-color: red; */
+}
+
+.boxTitle {
+    background-color: #3267ff;
+    padding: 30px 0;
+    text-align: center;
+    position: relative;
+    border-bottom: 1px solid white;
+}
+
+.boxTitle::before {
+    content: "";
+    position: absolute;
+    bottom: -18px;
+    left: 50%;
+    transform: rotate(45deg) translateX(-50%);
+    width: 20px;
+    height: 20px;
+    border-bottom: 1px solid white;
+    border-right: 1px solid white;
+    background-color: #3267ff;
+}
+
+.boxTitle p {
+    margin-bottom: 0px !important;
+    font-size: 3rem !important;
+    font-family: 'GmarketSansMedium';
+    color: white;
+    text-shadow: 5px 5px 10px #0000006e;
+}
+
+.boxContent {
+    justify-content: space-between;
+    background-color: #1d1f27;
+    padding: 30px;
+}
+
+.boxContent div {
+    height: 200px;
+}
+
+.boxContent>div>p {
+    color: white;
+    font-size: 2rem !important;
+    padding: 1rem 0;
+}
+
+.boxContent a {
+    text-align: center;
+    color: white;
+    border-radius: 10px;
+    font-size: 2rem;
+    padding: 1rem 3rem;
+    border: 1px solid white;
+    background-color: #00000000;
+}
+
+.aiBox {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid white;
+    background-color: #1d1f27;
+}
+
+.crapeArea div {
+    text-align: center;
+    position: relative;
+}
+
+.hover-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 300px;
+    top: 0;
+    left: 0;
+    font-size: 2rem;
+    font-weight: 600;
+    background-color: #000000d8;
+    display: none;
+}
+
+.crapeArea div:hover .hover-text {
+    display: block;
+}
+
+.crapeArea div:hover::before {
+    opacity: 1;
+}
+
+.crapeArea div p {
+    text-align: center;
+}
+
+.imgContent {
+    width: 100%;
+    height: 100%;
+
+}
+
+.imgContent img {
+    width: 100%;
+}
+
+.popupAuthenti {
+    display: none;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: #00000084;
+}
+
+.popupAuthenti div {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    background-color: rgb(241, 241, 241);
+    top: 15%;
+    left: 50%;
+    padding: 3rem;
+    text-align: center;
+    border-radius: 1rem;
+    transform: translateX(-50%);
+    transition: opacity 0.5s ease;
+}
+
+
+.popupAuthenti div img {
+    box-shadow: 5px 5px 10px #00000068;
+    border-radius: 1rem;
+    width: 100%;
+    height: 100%;
+}
+
+.popupAuthenti div p {
+    font-size: 2rem;
+    padding: 1rem 0;
+    color: #333;
+}(No newline at end of file)
becb6d0
614e678
views/index.html (Renamed from views/main.html)
--- views/main.html
+++ views/index.html
@@ -87,7 +87,7 @@
 
                             <p class="portfolio-text mb20 ">PORTFOLIO</p>
 
                         </div>
 
                         <div class="swiper innerSwiper">
 
-                            <div class="swiper-wrapper">
 
+                            <div class="swiper-wrapper" dir="ltr">
 
                                 <div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
 
                                     <img src="../resources/img/common/innerimg-1.png" alt="">
 
                                     <div class=" innerSwiper-textBox">
@@ -182,12 +182,12 @@
 
                 </div>
 
 
             </div>
 
+            <div id="footer"></div>
 
 
 
         </div>
 
 
     </div>
 
-    <div id="footer"></div>
@@ -275,51 +275,20 @@
 
 
         });
 
     });
 
-    function initSwiper() {
 
-    if (window.innerWidth < 768) {
 
-        // 화면 너비가 768px 미만일 때, 스와이퍼 초기화하지 않음
 
-        // 여기에서 모바일 환경을 위한 코드를 추가할 수 있습니다.
 
 
-    } else {
 
-        // 화면 너비가 768px 이상일 때만 스와이퍼 초기화
 
-        var swiper1 = new Swiper(".mySwiper", {
 
-            direction: "vertical",
 
-            slidesPerView: 1,
 
-            spaceBetween: 40,
 
-            speed: 700,
 
-            mousewheel: true,
 
-            pagination: {
 
-                el: ".swiper-pagination",
 
-                clickable: true,
 
-            },
 
-            
-        });
 
-    }
 
-}
 
 
-// 초기 스와이퍼 설정
 
-initSwiper();
 
-
 
-// 화면 크기가 변경될 때마다 스와이퍼 초기화 여부를 재검사
 
-window.addEventListener('resize', function() {
 
-    // 이미 초기화된 스와이퍼가 있다면 파괴
 
-    if (typeof swiper1 !== 'undefined' && swiper1 !== null) {
 
-        swiper1.destroy();
 
-        swiper1 = null;
 
-    }
 
-    initSwiper(); // 스와이퍼 다시 초기화
 
-});
 
 
     var swiper1 = new Swiper(".mySwiper", {
 
         direction: "vertical",
 
         slidesPerView: 1,
 
-        spaceBetween: 40,
 
+        spaceBetween: 0,
 
         speed: 700,
 
         mousewheel: true,
 
         pagination: {
 
             el: ".swiper-pagination",
 
             clickable: true,
 
-        }, on: {
 
+        }, slidesOffsetAfter: 220,
 
+        on: {
 
             // fromEdge: function () {
 
             //     document.querySelector('#footer').classList.add('on');
@@ -355,12 +324,7 @@
 
                     $('#header').addClass('active');
 
                 }
 
 
-                var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
 
-                if (this.activeIndex === lastIndex) {
 
-                    $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
 
-                } else {
 
-                    $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
 
-                }
 
+
 
             },
 
             reachEnd: function () {
 
                 swiper1.mousewheel.disable();
@@ -368,18 +332,7 @@
 
 
         }
 
     });
 
-    if (window.innerWidth >= 768) {
 
-    // 화면 너비가 768px 이상일 때만 스와이퍼 초기화
 
-    var mySwiper = new Swiper('.swiper-container', {
 
-        // 스와이퍼 옵션 설정
 
-    });
 
-}
 
-    window.addEventListener('wheel', function (event) {
 
-        if (event.deltaY < 0) {
 
-            swiper1.mousewheel.enable();
 
-        } else if (event.deltaY > 0) {
 
-        }
 
-    });
 
+
 
     window.addEventListener('load', () => {
 
         const boxes = document.querySelectorAll('.box');
 
         let delay = 0.6;
@@ -410,6 +363,7 @@
 
         },
 
         loop: true,
 
         speed: 5000,
 
+        loopAdditionalSlides: 1,
 
         activeIndexChange: function () {
 
 
         }, on: {
@@ -419,22 +373,6 @@
 
                 if (firstTextBox) firstTextBox.classList.add('active');
 
             },
 
 
-        }, breakpoints: {
 
-        //     250: {
 
-        //         slidesPerView: 1,
 
-        //         spaceBetween: 20
 
-        //     },
 
-        //     // 화면의 넓이가 320px 이상일 때
 
-
 
-        //     // 화면의 넓이가 640px 이상일 때
 
-        //     640: {
 
-        //         slidesPerView: 2,
 
-        //         spaceBetween: 40
 
-        //     },
 
-        //     800: {
 
-        //         slidesPerView: 3,
 
-        //         spaceBetween: 40
 
-        //     }
 
         },
 
     });
@@ -621,6 +559,11 @@
 
     .slide-solution {
 
         font-family: 'Pretendard';
 
 
+
 
+    }
 
+
 
+    .innerSwiper {
 
+        transition-timing-function: linear;
 
     }
 
 </style>
becb6d0
614e678
views/layout/Header.html
--- views/layout/Header.html
+++ views/layout/Header.html
@@ -6,7 +6,7 @@
 
 <body>
 
     <div class="header">
 
         <div class="header-area flex justify-between align-center">
 
-            <a href="/views/main.html" class="logo"></a>
 
+            <a href="/views/index.html" class="logo"></a>
 
             <div class="mobil-wrap">
 
                 <button class="mobile-menu-button">☰</button>
 
                 <button class="mobile-menu-button-close" style="display: none;">x</button>
@@ -92,12 +92,12 @@
 
 
 logoDiv.addEventListener('click', function () {
 
     var currentLocation = window.location.pathname;
 
-    if (currentLocation === '/main.html' || currentLocation === '/') {
 
+    if (currentLocation === '/index.html' || currentLocation === '/') {
 
         // 현재 위치가 메인 페이지인 경우, 페이지를 새로고침하거나 현재 위치를 유지
 
         window.location.href = '/';
 
     } else {
 
         // 다른 페이지에 있는 경우, 메인 페이지로 이동
 
-        window.location.href = '../main.html';
 
+        window.location.href = '../index.html';
 
     }
 
 });
 
614e678
views/pages/AboutUs copy 2.html (added)
+++ views/pages/AboutUs copy 2.html
@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="../../resources/css/reset.css">
+    <link rel="stylesheet" href="../../resources/css/style.css">
+    <link rel="stylesheet" href="../../resources/css/component.css">
+    <link rel="stylesheet" href="../../resources/css/common.css">
+    <link rel="stylesheet" href="../../resources/css/responsive.css">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+
+
+
+    <title>TAKENSOFT</title>
+</head>
+
+<body>
+    <div id="header"></div>
+    <div class="section" id="section1">
+        <div class="about-wrap slide-wrap ">
+            <div class="flex">
+                <div class="about-title mb90" style="width: 100%;">
+                    <p class="mb20">ABOUT US</p>
+                    <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
+                </div>
+
+                <div class=" flex justify-center about-area" style="width: 100%; gap: 190px; margin-bottom: 50px;">
+                    <div class="about-radius-left solution-ani">
+                        <p class="about-text">공감</p>
+                        <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
+                    </div>
+                    <div class="about-radius solution-ani">
+                        <p class="about-text">구현</p>
+                        <p class="about-sub-text">가치를 주는 솔루션 도출</p>
+                    </div>
+
+                    <div class="about-radius-right solution-ani">
+                        <p class="about-text">생각</p>
+                        <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
+                    </div>
+                </div>
+                <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
+                    <div class="about-radius-bottom-left ">
+                        <p class="about-text">검증</p>
+                        <p class="about-sub-text">결과물의 철저한 검증</p>
+                    </div>
+                    <div class="about-radius-bottom-right solution-ani">
+                        <p class="about-text">소통</p>
+                        <p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="section" id="section2">
+        <div class="text-area flex align-center justify-center pb60">
+            <div class="about-title mb20" style="width: 100%;">
+                <p class="mb20">Business</p>
+                <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
+                    해결합니다.</p>
+            </div>
+            <div class="container silde-box">
+                <div class="accordion flex justify-between"
+                    style="background-image: url(../../resources/img/common/about-img1.png);">
+                    <div class="slideText  pl20">
+                        <p class="accordion-num"><span>01.</span> AI Solution</p>
+                        <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
+                    </div>
+                    <div class="slideImg">
+                        <img src="../../resources/img/common/about-img-db.png" alt="">
+                    </div>
+                    <div class="slideTextDtail">
+                        <div>
+                            <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
+                            <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
+                            <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
+                                통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
+                        </div>
+                        <div class=" flex justify-between" style="flex-wrap: nowrap;">
+                            <div style="width: 20%;">
+                                <p>[대표사례]</p>
+                            </div>
+                            <div class=" flex justify-between accordion-box">
+                                <p>·도로 위험 감지 시스템</p>
+                                <p>·경로 최적화 서비스</p>
+                                <p>·안개 감지 시스템</p>
+                                <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
+                            </div>
+                        </div>
+                    </div>
+
+
+                </div>
+                <div class="accordion " style="background-image: url(../../resources/img/common/about-img2.png);">
+                    <div class="slideText  pl20">
+                        <p class="accordion-num"><span>02.</span> System Design</p>
+                        <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
+                    </div>
+                    <div class="slideImg">
+                        <img src="../../resources/img/common/about-img-bg02.png" alt="">
+                    </div>
+                    <div class="slideTextDtail">
+                        <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
+                            통해 고객사 최적화 UI 도출 </p>
+                        <div class=" flex justify-start" style="flex-wrap: nowrap;">
+                            <div style="width: 20%;">
+                                <p>[대표사례]</p>
+                            </div>
+                            <div class="flex-column">
+                                <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
+                                <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
+                                <p>· 경로 최적화 서비스</p>
+                                <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="accordion" style="background-image: url(../../resources/img/common/about-img3.png);">
+                    <div class="slideText pl20">
+                        <p class="accordion-num"><span>03.</span> Data Science </p>
+                        <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
+                    </div>
+                    <div class="slideImg">
+                        <img src="../../resources/img/common/about-img-bg03.png" alt="">
+                    </div>
+                    <div class="slideTextDtail">
+                        <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
+                        <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
+                        <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
+                            수요기관 및 기업 확장
+                        </p>
+                        <div class=" flex justify-start" style="flex-wrap: nowrap;">
+                            <div style="width: 20%;">
+                                <p>[대표사례]</p>
+                            </div>
+                            <div class="flex-column">
+                                <p>· 데이터 품질관리 컨설팅</p>
+                                <p>· AI 안전통합 횡단보도 플랫폼</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+    </div>
+    <div class="section" id="section3">
+        <div class="text-area flex pb60">
+            <div class="about-title mb20" style="width: 100%;">
+                <p class="mb20">Vision</p>
+                <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
+                    매출을 확대해 나갑니다.
+                </p>
+            </div>
+            <div class="flex justify-center about-vision-box">
+                <img src="../../resources/img/common/about-img5.png" alt="">
+                <img src="../../resources/img/common/about-img4.png" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="section" id="section4">
+        <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
+            <div class="text-area  felx">
+                <div class="about-title mb20">
+                    <p>History</p>
+                </div>
+                <div class="timeline flex align-center justify-between" style="gap: 0px;">
+                    <div class="years" id="years">
+                        <div class="year active-year" data-year="2021">2021</div>
+                        <div class="year" data-year="2022">2022</div>
+                        <div class="year" data-year="2023">2023</div>
+                    </div>
+                    <div class="contents" id="contents">
+                        <div class="content" data-year="2021">
+                            <div class="flex">
+                                <p class="month mr30">5월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 주식회사 테이큰 소프트 설립</p>
+                                    <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
+
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">10월</p>
+                                <div class="month-text text-section" style="text-align: left;">
+                                    <p>· 소프트웨어 기업 등록</p>
+                                    <img src="../../resources/img/common/history-img1.png" alt="">
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">11월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
+                                    <p>· Taken BI Manager v1.0 저작권 등록</p>
+                                    <img src="../../resources/img/common/history-img2.png" alt="">
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">12월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
+                                    <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
+                                    <p>· 도로 모니터링 시스템 저작권 등록</p>
+                                    <div class="flex">
+                                        <img src="../../resources/img/common/history-img31.png" alt="">
+                                        <img src="../../resources/img/common/history-img32.png" alt="">
+                                        <img src="../../resources/img/common/history-img33.png" alt="">
+                                    </div>
+                                </div>
+                            </div>
+
+
+                        </div>
+                        <div class="content" data-year="2022">
+                            <!-- 2021년 내용 -->
+                            <div class="flex">
+                                <p class="month mr30">1월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">3월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 기업부설연구소 설립</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">4월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">5월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
+                                    <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">7월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">9월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">10월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">12월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
+                                    <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
+                                    <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
+                                    <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p>
+                                    <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
+                                    <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
+                                    <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
+                                    <p>· 경로 생성 기술 관련 출원사실증명 </p>
+                                    <img src="../../resources/img/common/history-img4.png" alt="">
+
+                                </div>
+                            </div>
+
+                        </div>
+                        <div class="content" data-year="2023">
+                            <!-- 2022년 내용 -->
+                            <div class="flex">
+                                <p class="month mr30">1월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
+                                    <p>· 복약지도 장치 및 방법 출원사실증명 </p>
+                                    <p>· Traffic Agent 저작권 등록 </p>
+
+                                    <div class="flex">
+                                        <img src="../../resources/img/common/history-img51.png" alt="">
+                                        <img src="../../resources/img/common/history-img52.png" alt="">
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">2월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
+                                    <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">3월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">4월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
+                                    <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
+                                    <p>· 기업부설연구소 인정서 획득 </p>
+                                    <img src="../../resources/img/common/history-img6.png" alt="">
+
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">5월</p>
+                                <div style="text-align: left;">
+                                    <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">6월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
+                                    <div class="flex">
+                                        <img src="../../resources/img/common/history-img71.png" alt="">
+                                        <img src="../../resources/img/common/history-img72.png" alt="">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">7월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
+                                    <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">8월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
+                                    <p>· 메타버스 기술 관련 출원사실증명</p>
+                                    <img src="../../resources/img/common/history-img8.png" alt="">
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">9월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
+                                    <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
+                                    <p>· 시니어 케어 시스템 저작권 등록</p>
+                                    <img src="../../resources/img/common/history-img9.png" alt="">
+
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">11월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· 한기술평가 우수기업 인증 (T-5)</p>
+                                    <p>· 통합 모빌리티 솔루션 저작권 등록</p>
+                                    <div class="flex">
+                                        <img src="../../resources/img/common/history-img100.png" alt="">
+                                        <img src="../../resources/img/common/history-img101.png" alt="">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <p class="month mr30">12월</p>
+                                <div class="month-text" style="text-align: left;">
+                                    <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
+                                    <p>· 구미시 키워드 분석 용역 (구미시)</p>
+                                    <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
+                                    <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
+                                    <p>· AI 횡단보도 기술 관련 출원사실증명</p>
+                                    <img src="../../resources/img/common/history-img110.png" alt="">
+
+
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 더 많은 내용 추가 -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- <footer id="footer"></footer> -->
+
+
+
+
+
+
+</body>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<!-- <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> -->
+
+
+<script>
+    let startTouchY = 0;
+    let endTouchY = 0;
+    let currentSectionIndex = 0;
+    const sections = document.querySelectorAll('.section');
+
+    function handleTouchStart(event) {
+        startTouchY = event.touches[0].clientY;
+    }
+
+    function handleTouchMove(event) {
+        endTouchY = event.changedTouches[0].clientY;
+    }
+
+    function handleTouchEnd() {
+        if (startTouchY > endTouchY + 100) {
+            // 아래로 스와이프
+            moveToNextSection();
+        } else if (startTouchY < endTouchY - 100) {
+            // 위로 스와이프
+            moveToPreviousSection();
+        }
+    }
+
+    function moveToNextSection() {
+        if (currentSectionIndex < sections.length - 1) {
+            setTimeout(() => {
+                currentSectionIndex++;
+                scrollToSection(currentSectionIndex);
+            }, 100); // 500ms 딜레이를 추가
+        }
+    }
+
+    function moveToPreviousSection() {
+        if (currentSectionIndex > 0) {
+            setTimeout(() => {
+                currentSectionIndex--;
+                scrollToSection(currentSectionIndex);
+            }, 100); // 500ms 딜레이를 추가
+        }
+    }
+    function scrollToSection(index) {
+        window.scrollTo({
+            top: window.innerHeight * index,
+            behavior: 'smooth'
+        });
+    }
+
+    window.addEventListener('wheel', handleScroll, { passive: false });
+    window.addEventListener('touchstart', handleTouchStart, { passive: true });
+    window.addEventListener('touchmove', handleTouchMove, { passive: true });
+    window.addEventListener('touchend', handleTouchEnd, { passive: true });
+
+    function handleScroll(event) {
+        const direction = detectScrollDirection(event);
+        if (direction === 'down') {
+            moveToNextSection();
+        } else {
+            moveToPreviousSection();
+        }
+        event.preventDefault();
+    }
+
+    function detectScrollDirection(event) {
+        const wheelDelta = event.wheelDelta || -event.deltaY;
+        return wheelDelta > 0 ? 'up' : 'down';
+    }
+    function slidesPlugin(activeSlide = 0) {
+        const slides = document.querySelectorAll('.accordion');
+        let previousSlide = slides[activeSlide];
+
+        previousSlide.classList.add('active');
+        swapImage(previousSlide);
+
+        slides.forEach((slide) => {
+            slide.addEventListener('click', () => {
+                if (slide !== previousSlide) {
+                    clearActiveClasses();
+                    swapImage(previousSlide);
+                    slide.classList.add('active');
+                    swapImage(slide);
+                    previousSlide = slide;
+
+                }
+
+            });
+        });
+
+        function clearActiveClasses() {
+            slides.forEach((slide) => {
+                slide.classList.remove('active');
+            });
+        }
+
+        function swapImage(slide) {
+            const slideImg = slide.querySelector('.accordion img');
+            const bgImg = slide.style.backgroundImage;
+
+            slide.style.backgroundImage = `url(${slideImg.src})`;
+            slideImg.src = bgImg.slice(5, -2);
+        }
+    }
+
+
+    slidesPlugin();
+
+
+</script>
+
+
+
+
+<style scoped>
+    html,
+    body {
+        scroll-behavior: smooth;
+    }
+
+    .section {
+        height: 100vh;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 40px;
+        color: white;
+    }
+
+    #section1 {
+        /* background: red; */
+        border: 1px solid red;
+    }
+
+    #section2 {
+        background: green;
+    }
+
+    #section3 {
+        background: blue;
+    }
+</style>
+
+</html>(No newline at end of file)
 
614e678
views/pages/AboutUs copy.html (added)
+++ views/pages/AboutUs copy.html
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <link rel="stylesheet" href="../../resources/css/reset.css">
+    <link rel="stylesheet" href="../../resources/css/style.css">
+    <link rel="stylesheet" href="../../resources/css/component.css">
+    <link rel="stylesheet" href="../../resources/css/common.css">
+    <link rel="stylesheet" href="../../resources/css/responsive.css">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+
+
+
+    <title>TAKENSOFT</title>
+</head>
+
+<body>
+    <div id="header"></div>
+    <div class="swiper mySwiper About">
+        <div class="swiper-wrapper">
+            <div class="swiper-slide about-wrapper">
+                <div class="about-wrap slide-wrap ">
+                    <div class="flex">
+                        <div class="about-title mb90" style="width: 100%;">
+                            <p class="mb20">ABOUT US</p>
+                            <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
+                        </div>
+
+                        <div class=" flex justify-center about-area"
+                            style="width: 100%; gap: 190px; margin-bottom: 50px;">
+                            <div class="about-radius-left solution-ani">
+                                <p class="about-text">공감</p>
+                                <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
+                            </div>
+                            <div class="about-radius solution-ani">
+                                <p class="about-text">구현</p>
+                                <p class="about-sub-text">가치를 주는 솔루션 도출</p>
+                            </div>
+
+                            <div class="about-radius-right solution-ani">
+                                <p class="about-text">생각</p>
+                                <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
+                            </div>
+                        </div>
+                        <div class="flex justify-center about-area solution-ani" style="width: 100%;gap: 188px;">
+                            <div class="about-radius-bottom-left ">
+                                <p class="about-text">검증</p>
+                                <p class="about-sub-text">결과물의 철저한 검증</p>
+                            </div>
+                            <div class="about-radius-bottom-right solution-ani">
+                                <p class="about-text">소통</p>
+                                <p class="about-sub-text">커뮤니케이션을 통한 명확한 정의</p>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide">
+                <div class="text-area flex align-center justify-center pb60">
+                    <div class="about-title mb20" style="width: 100%;">
+                        <p class="mb20">Business</p>
+                        <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
+                            해결합니다.</p>
+                    </div>
+                    <div class="container silde-box">
+                        <div class="accordion flex justify-between"
+                            style="background-image: url(../../resources/img/common/about-img1.png);">
+                            <div class="slideText  pl20">
+                                <p class="accordion-num"><span>01.</span> AI Solution</p>
+                                <p>AI 기술 종합 관리를 통한 솔루션 구현</p>
+                            </div>
+                            <div class="slideImg">
+                                <img src="../../resources/img/common/about-img-db.png" alt="">
+                            </div>
+                            <div class="slideTextDtail">
+                                <div>
+                                    <p>· 다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석</p>
+                                    <p>· 인공지능 기반의 서비스 시스템 기획부터 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션 제공 </p>
+                                    <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
+                                        통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
+                                </div>
+                                <div class=" flex justify-between" style="flex-wrap: nowrap;">
+                                    <div style="width: 20%;">
+                                        <p>[대표사례]</p>
+                                    </div>
+                                    <div class=" flex justify-between accordion-box">
+                                        <p>·도로 위험 감지 시스템</p>
+                                        <p>·경로 최적화 서비스</p>
+                                        <p>·안개 감지 시스템</p>
+                                        <p>·위치 기반 기자재 관리 및 모니터링 서비스</p>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                        </div>
+                        <div class="accordion "
+                            style="background-image: url(../../resources/img/common/about-img2.png);">
+                            <div class="slideText  pl20">
+                                <p class="accordion-num"><span>02.</span> System Design</p>
+                                <p>고객사 최적화 UI 도출로 최상의 품질이 보장되는 인터페이스 구현</p>
+                            </div>
+                            <div class="slideImg">
+                                <img src="../../resources/img/common/about-img-bg02.png" alt="">
+                            </div>
+                            <div class="slideTextDtail">
+                                <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
+                                    통해 고객사 최적화 UI 도출 </p>
+                                <div class=" flex justify-start" style="flex-wrap: nowrap;">
+                                    <div style="width: 20%;">
+                                        <p>[대표사례]</p>
+                                    </div>
+                                    <div class="flex-column">
+                                        <p>· 정부혁신 웹사이트 기능개선 및 유지관리 </p>
+                                        <p>· 스마트 팩토리 공정 관리 모니터링 서비스</p>
+                                        <p>· 경로 최적화 서비스</p>
+                                        <p>· 시니어 스마트 케어 모니터링 플랫폼</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion"
+                            style="background-image: url(../../resources/img/common/about-img3.png);">
+                            <div class="slideText pl20">
+                                <p class="accordion-num"><span>03.</span> Data Science </p>
+                                <p>수집, 가공, 분석의 자체 프로세스를 통한 토탈 데이터 서비스 제공</p>
+                            </div>
+                            <div class="slideImg">
+                                <img src="../../resources/img/common/about-img-bg03.png" alt="">
+                            </div>
+                            <div class="slideTextDtail">
+                                <p>· 데이터 수집, 저장, 관리 시스템 구축 및 데이터 분석 기반의 SW개발, 전문 컨설팅 서비스 수행</p>
+                                <p>· 기업의 상황에 맞는 맞춤형 데이터 서비스 솔루션 제공</p>
+                                <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
+                                    수요기관 및 기업 확장
+                                </p>
+                                <div class=" flex justify-start" style="flex-wrap: nowrap;">
+                                    <div style="width: 20%;">
+                                        <p>[대표사례]</p>
+                                    </div>
+                                    <div class="flex-column">
+                                        <p>· 데이터 품질관리 컨설팅</p>
+                                        <p>· AI 안전통합 횡단보도 플랫폼</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
+                    </div>
+                </div>
+
+
+            </div>
+            <div class="swiper-slide about">
+                <div class="text-area flex pb60">
+                    <div class="about-title mb20" style="width: 100%;">
+                        <p class="mb20">Vision</p>
+                        <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
+                            매출을 확대해 나갑니다.
+                        </p>
+                    </div>
+                    <div class="flex justify-center about-vision-box">
+                        <img src="../../resources/img/common/about-img5.png" alt="">
+                        <img src="../../resources/img/common/about-img4.png" alt="">
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide history" id="history">
+                <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
+                    <div class="text-area  felx">
+                        <div class="about-title mb20">
+                            <p>History</p>
+                        </div>
+                        <div class="timeline flex align-center justify-between" style="gap: 0px;">
+                            <div class="years" id="years">
+                                <div class="year active-year" data-year="2021">2021</div>
+                                <div class="year" data-year="2022">2022</div>
+                                <div class="year" data-year="2023">2023</div>
+                            </div>
+                            <div class=" scrollSwiper">
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide">Slide 1</div>
+                                    <div class="swiper-slide">Slide 2</div>
+                                    <div class="swiper-slide">Slide 3</div>
+                                    <div class="swiper-slide">Slide 4</div>
+                                    <div class="swiper-slide">Slide 5</div>
+                                    <div class="swiper-slide">Slide 6</div>
+                                    <div class="swiper-slide">Slide 7</div>
+                                    <div class="swiper-slide">Slide 8</div>
+                                    <div class="swiper-slide">Slide 9</div>
+                                </div>
+                                <div class="swiper-pagination"></div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </div>
+    </div>
+    <footer id="footer"></footer>
+
+
+
+
+
+
+</body>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+
+<script>
+
+
+
+    $(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();
+
+
+
+
+
+        });
+    });
+
+
+    function slidesPlugin(activeSlide = 0) {
+        const slides = document.querySelectorAll('.accordion');
+        let previousSlide = slides[activeSlide];
+
+        previousSlide.classList.add('active');
+        swapImage(previousSlide);
+
+        slides.forEach((slide) => {
+            slide.addEventListener('click', () => {
+                if (slide !== previousSlide) {
+                    clearActiveClasses();
+                    swapImage(previousSlide);
+                    slide.classList.add('active');
+                    swapImage(slide);
+                    previousSlide = slide;
+
+                }
+
+            });
+        });
+
+        function clearActiveClasses() {
+            slides.forEach((slide) => {
+                slide.classList.remove('active');
+            });
+        }
+
+        function swapImage(slide) {
+            const slideImg = slide.querySelector('.accordion img');
+            const bgImg = slide.style.backgroundImage;
+
+            slide.style.backgroundImage = `url(${slideImg.src})`;
+            slideImg.src = bgImg.slice(5, -2);
+        }
+    }
+
+
+    slidesPlugin();
+    // 마우스 휠을 비활성화할 영역 선택
+    var targetArea = document.querySelector(' .scrollSwiper .swiper-slide div');
+
+    // 선택된 영역을 콘솔에 출력
+    console.log(targetArea);
+    var swiper = new Swiper(".mySwiper", {
+        direction: "vertical",
+        slidesPerView: 1,
+        spaceBetween: 30,
+        preventDefault: false, //per의 시작점이나 끝점에 도달했을 때 기본 스크롤 행동을 다시 활성화합니다.
+
+        mousewheel: {
+            releaseOnEdges: 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").show(); // 마지막 슬라이드에 도달하면 푸터를 보여줌
+                } else {
+                    $("#footer").hide(); // 그렇지 않으면 푸터를 숨김
+                }
+            },
+
+        }
+    });
+
+
+
+    var scrollSwiper = new Swiper(".scrollSwiper", {
+        direction: "vertical",
+        slidesPerView: 1,
+        spaceBetween: 30,
+        mousewheel: true,
+        pagination: {
+            el: ".swiper-pagination",
+            clickable: true,
+        },
+    });
+
+
+    // var swiperContainer = document.querySelector('.scrollSwiper');
+
+    // // Swiper 컨테이너 내에서 마우스 휠 이벤트 발생 시 기본 동작 방지
+    // swiperContainer.addEventListener('wheel', function (event) {
+    //     event.preventDefault();
+    // }, { passive: false });
+    // document.addEventListener('DOMContentLoaded', function () {
+    //     // 연도 요소를 모두 선택
+    //     var years = document.querySelectorAll('.year');
+
+    //     // 각 연도 요소에 대해 클릭 이벤트 리스너를 추가
+    //     years.forEach(function (year) {
+    //         year.addEventListener('click', function () {
+    //             // 모든 연도에서 'active-year' 클래스를 제거
+    //             years.forEach(function (y) {
+    //                 y.classList.remove('active-year');
+    //             });
+
+    //             // 클릭한 연도에 'active-year' 클래스를 추가
+    //             this.classList.add('active-year');
+
+    //             // 모든 내용을 숨김
+    //             var contents = document.querySelectorAll('.scrollSwiper .swiper-slide > div');
+    //             contents.forEach(function (content) {
+    //                 content.style.display = 'none';
+    //             });
+
+    //             // 클릭한 연도와 일치하는 data-year 속성을 가진 내용만 표시
+    //             var activeYear = this.getAttribute('data-year');
+    //             var activeContent = document.querySelector('.scrollSwiper .swiper-slide > div[data-year="' + activeYear + '"]');
+    //             if (activeContent) {
+    //                 activeContent.style.display = 'block';
+    //             }
+    //         });
+    //     });
+    // });
+    $(function () {
+        $("#header").load("../layout/Header.html");
+
+    });
+
+
+</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%;
+    }
+
+    body {
+        background: #eee;
+        font-family: 'Pretendard';
+        font-size: 14px;
+        color: #000;
+        margin: 0;
+        padding: 0;
+    }
+
+    .swiper {
+        width: 100%;
+        height: 100%;
+    }
+
+    .About .swiper-slide {
+        text-align: center;
+        font-size: 18px;
+        /* display: flex; */
+        height: 100%;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        background-color: #fff;
+    }
+
+    .swiper-slide img {
+        /* height: 356px; */
+        display: block;
+        object-fit: cover;
+    }
+
+    .container {
+        width: 1200px;
+        height: 70%;
+        display: flex;
+        flex-wrap: nowrap;
+        border-radius: 20px;
+        overflow: hidden;
+    }
+
+    #history {
+        touch-action: none;
+    }
+
+    .scrollSwiper {
+        /* width: 100%; */
+        height: 100%;
+        overflow-y: scroll;
+        border: 1px solid blue;
+    }
+
+    .scrollSwiper .swiper-slide {
+        font-size: 18px;
+        height: auto;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        padding: 30px;
+    }
+
+    .scrollSwiper .swiper-slide div {
+        border: 1px solid red;
+        text-align: left;
+        width: 100%;
+    }
+</style>
+
+</html>(No newline at end of file)
becb6d0
614e678
views/pages/AboutUs.html
--- views/pages/AboutUs.html
+++ views/pages/AboutUs.html
@@ -23,7 +23,7 @@
 
 <body>
 
     <div id="header"></div>
 
     <div class="swiper mySwiper About">
 
-        <div class="swiper-wrapper">
 
+        <div class="swiper-wrapper" style="  touch-action: pan-y;">
 
             <div class="swiper-slide about-wrapper">
 
                 <div class="about-wrap slide-wrap ">
 
                     <div class="flex">
@@ -63,7 +63,7 @@
 
                 </div>
 
             </div>
 
             <div class="swiper-slide">
 
-                <div class="text-area flex align-center justify-center pb60">
 
+                <div class="text-area flex align-center justify-center pb60 pt60" style="align-content: center;">
 
                     <div class="about-title mb20" style="width: 100%;">
 
                         <p class="mb20">Business</p>
 
                         <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
@@ -160,7 +160,7 @@
 
 
             </div>
 
             <div class="swiper-slide about">
 
-                <div class="text-area flex pb60">
 
+                <div class="text-area flex pb60 pt60" style="align-content: center;">
 
                     <div class="about-title mb20" style="width: 100%;">
 
                         <p class="mb20">Vision</p>
 
                         <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
@@ -173,19 +173,19 @@
 
                     </div>
 
                 </div>
 
             </div>
 
-            <div class="swiper-slide" id="history">
 
+            <div class="swiper-slide" id="history" style="touch-action: none;">
 
                 <div class="taken-wrap slide-wrap history-wrap slide-solution" id=" history">
 
-                    <div class="text-area  felx">
 
-                        <div class="about-title mb20">
 
+                    <div class="text-area flex pb60 pt60" style="align-content: center;">
 
+                        <div class="about-title mb20" style="width: 100%;">
 
                             <p>History</p>
 
                         </div>
 
-                        <div class="timeline flex align-center justify-between" style="gap: 0px;">
 
+                        <div class="timeline flex align-center justify-between web-swiper" style="gap: 0px;">
 
                             <div class="years" id="years">
 
                                 <div class="year active-year" data-year="2021">2021</div>
 
                                 <div class="year" data-year="2022">2022</div>
 
                                 <div class="year" data-year="2023">2023</div>
 
                             </div>
 
-                            <div class="contents" id="contents">
 
+                            <div class="contents" id="contents" style="touch-action: none;">
 
                                 <div class="content" data-year="2021">
 
                                     <div class="flex">
 
                                         <p class="month mr30">5월</p>
@@ -227,7 +227,6 @@
 
 
                                 </div>
 
                                 <div class="content" data-year="2022">
 
-                                    <!-- 2021년 내용 -->
 
                                     <div class="flex">
 
                                         <p class="month mr30">1월</p>
 
                                         <div class="month-text" style="text-align: left;">
@@ -289,7 +288,6 @@
 
 
                                 </div>
 
                                 <div class="content" data-year="2023">
 
-                                    <!-- 2022년 내용 -->
 
                                     <div class="flex">
 
                                         <p class="month mr30">1월</p>
 
                                         <div class="month-text" style="text-align: left;">
@@ -393,17 +391,238 @@
 
                                         </div>
 
                                     </div>
 
                                 </div>
 
-                                <!-- 더 많은 내용 추가 -->
 
+                            </div>
 
+                        </div>
 
+
 
+                        <div class="inner mobil-swiper">
 
+                            <div class="swiper-wrapper mobile-contents ">
 
+                                <div class="swiper-slide ">
 
+                                    <div class="content" data-year="2021">
 
+                                        <p class="mobil-year">2021</p>
 
+                                        <div class="flex">
 
+
 
+                                            <p class="month mr30">5월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 주식회사 테이큰 소프트 설립</p>
 
+                                                <p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
 
+
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">10월</p>
 
+                                            <div class="month-text text-section" style="text-align: left;">
 
+                                                <p>· 소프트웨어 기업 등록</p>
 
+                                                <img src="../../resources/img/common/history-img1.png" alt="">
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">11월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
 
+                                                <p>· Taken BI Manager v1.0 저작권 등록</p>
 
+                                                <img src="../../resources/img/common/history-img2.png" alt="">
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">12월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
 
+                                                <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
 
+                                                <p>· 도로 모니터링 시스템 저작권 등록</p>
 
+                                                <div class="flex">
 
+                                                    <img src="../../resources/img/common/history-img31.png" alt="">
 
+                                                    <img src="../../resources/img/common/history-img32.png" alt="">
 
+                                                    <img src="../../resources/img/common/history-img33.png" alt="">
 
+                                                </div>
 
+                                            </div>
 
+                                        </div>
 
+
 
+
 
+                                    </div>
 
+
 
+                                    <div class="content" data-year="2022">
 
+                                        <p class="mobil-year">2022</p>
 
+
 
+                                        <!-- 2021년 내용 -->
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">1월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">3월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 기업부설연구소 설립</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">4월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">5월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
 
+                                                <p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">7월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">9월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">10월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">12월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
 
+                                                <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
 
+                                                <p>· 스마트 타운 통합 플랫폼 개발 기획 및 사업 관리 용역 (성주군) </p>
 
+                                                <p>· 행정정보 데이터 백업테이프 구입 (영주시) </p>
 
+                                                <p>· 행정정보시스템 통합스토리지 디스크 증설 (영주시) </p>
 
+                                                <p>· SW융합클러스터2.0 데이터(주차 차량 및 차량번호 학습데이터) 구매 (포항테크노파크) </p>
 
+                                                <p>· 한국가스공사 2022 대구·경북 스타트업 페스티벌 공대스타 챌린지 최우수상 수상 </p>
 
+                                                <p>· 경로 생성 기술 관련 출원사실증명 </p>
 
+                                                <img src="../../resources/img/common/history-img4.png" alt="">
 
+
 
+                                            </div>
 
+                                        </div>
 
+
 
+                                    </div>
 
+                                    <div class="content" data-year="2023">
 
+                                        <p class="mobil-year">2023</p>
 
+
 
+                                        <!-- 2022년 내용 -->
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">1월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
 
+                                                <p>· 복약지도 장치 및 방법 출원사실증명 </p>
 
+                                                <p>· Traffic Agent 저작권 등록 </p>
 
+
 
+                                                <div class="flex">
 
+                                                    <img src="../../resources/img/common/history-img51.png" alt="">
 
+                                                    <img src="../../resources/img/common/history-img52.png" alt="">
 
+                                                </div>
 
+
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">2월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
 
+                                                <p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">3월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">4월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
 
+                                                <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
 
+                                                <p>· 기업부설연구소 인정서 획득 </p>
 
+                                                <img src="../../resources/img/common/history-img6.png" alt="">
 
+
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">5월</p>
 
+                                            <div style="text-align: left;">
 
+                                                <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">6월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
 
+                                                <div class="flex">
 
+                                                    <img src="../../resources/img/common/history-img71.png" alt="">
 
+                                                    <img src="../../resources/img/common/history-img72.png" alt="">
 
+                                                </div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">7월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
 
+                                                <p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">8월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
 
+                                                <p>· 메타버스 기술 관련 출원사실증명</p>
 
+                                                <img src="../../resources/img/common/history-img8.png" alt="">
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">9월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
 
+                                                <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
 
+                                                <p>· 시니어 케어 시스템 저작권 등록</p>
 
+                                                <img src="../../resources/img/common/history-img9.png" alt="">
 
+
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">11월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· 한기술평가 우수기업 인증 (T-5)</p>
 
+                                                <p>· 통합 모빌리티 솔루션 저작권 등록</p>
 
+                                                <div class="flex">
 
+                                                    <img src="../../resources/img/common/history-img100.png" alt="">
 
+                                                    <img src="../../resources/img/common/history-img101.png" alt="">
 
+                                                </div>
 
+                                            </div>
 
+                                        </div>
 
+                                        <div class="flex">
 
+                                            <p class="month mr30">12월</p>
 
+                                            <div class="month-text" style="text-align: left;">
 
+                                                <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
 
+                                                <p>· 구미시 키워드 분석 용역 (구미시)</p>
 
+                                                <p>· AI 디지털교과서 통합 지원센터 모델발굴 및 시범운영 용역 (한국교육학술정보원)</p>
 
+                                                <p>· 구미시 2023년 행정정보 및 홈페이지시스템 통합유지관리 용역 중 공공데이터 (구미시)</p>
 
+                                                <p>· AI 횡단보도 기술 관련 출원사실증명</p>
 
+                                                <img src="../../resources/img/common/history-img110.png" alt="">
 
+
 
+
 
+                                            </div>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                                <div class="swiper-scrollbar"></div>
 
                             </div>
 
                         </div>
 
                     </div>
 
                 </div>
 
+
 
+
 
             </div>
 
-
 
-
 
+            <footer id="footer"></footer>
 
         </div>
 
     </div>
 
-    <footer id="footer"></footer>
@@ -445,7 +664,7 @@
 
             if (visibleYear) {
 
                 updateActiveYear(visibleYear);
 
             }
 
-        });
 
+        }, { passive: true }); // 여기에 passive 옵션 추가
 
 
         // 초기 활성 연도 설정을 위한 코드 추가
 
         const initialYearElement = Array.from(years).find(year => year.getAttribute('data-year') === '2020');
@@ -455,6 +674,7 @@
 
             // console.error('2020년에 해당하는 요소를 찾을 수 없습니다.');
 
         }
 
     });
 
+
 
     $(document).ready(function () {
 
         $("#btnHeadquarter").click(function () {
 
             $("#btnHeadquarter").addClass('on');
@@ -518,18 +738,19 @@
 
 
 
     slidesPlugin();
 
-    // 마우스 휠을 비활성화할 영역 선택
 
-    var targetArea = document.querySelector('.contents');
 
 
-    // 선택된 영역을 콘솔에 출력
 
-    console.log(targetArea);
 
+
 
     var swiper = new Swiper(".mySwiper", {
 
         direction: "vertical",
 
         slidesPerView: 1,
 
-        spaceBetween: 30,
 
+        spaceBetween: 0,
 
+
 
         mousewheel: {
 
             releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
 
         },
 
+        slidesOffsetAfter: 220,
 
+        allowTouchMove: true,
 
+
 
         on: {
 
 
             slideChange: function () {
@@ -546,20 +767,51 @@
 
                     $("#footer").hide(); // 그렇지 않으면 푸터를 숨김
 
                 }
 
             },
 
+       
         }
 
     });
 
-    // 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화
 
-    targetArea.addEventListener('mouseenter', function () {
 
-        swiper.mousewheel.disable();
 
-        console.log('들어옴');
 
+    var inner = new Swiper(".inner", {
 
+        direction: "vertical",
 
+        slidesPerView: "auto", 
+        freeMode: true,
 
+        scrollbar: {
 
+            el: ".swiper-scrollbar",
 
+        },
 
+
 
+        // touchMoveStopPropagation: false, // 스와이퍼 내의 터치 이벤트가 바깥으로 전파되지 않도록
 
+        preventClicks: true, // 스와이퍼에서 터치를 통한 클릭을 방지
 
+        // preventClicksPropagation: true, // 스와이퍼에서 클릭 이벤트의 전파를 방지
 
+        // 스와이프 동작 중에는 페이지 스크롤을 방지
 
+        // onTouchMove: function (swiper, event) {
 
+        //     if (swiper.isHorizontal() && (swiper.touches.diff < 0 || swiper.touches.diff > 0)) {
 
+        //         event.preventDefault();
 
+        //     }
 
+        // }
 
     });
 
 
-    // 마우스가 지정된 영역을 벗어날 때 마우스 휠 활성화
 
-    targetArea.addEventListener('mouseleave', function () {
 
-        swiper.mousewheel.enable();
 
-        console.log('벗어남');
 
 
+    // window.onload = function () {
 
+    //     document.querySelectorAll('.mobile-contents').forEach(function (element) {
 
+    //         element.addEventListener('click', function () {
 
+    //             // 클릭 이벤트 핸들러 코드
 
+    //             swiper.mousewheel.enable();
 
+
 
+    //             console.log('클릭 이벤트 발생!');
 
+    //         });
 
+    //     });
 
+    // }
 
+  
+
 
+    // 슬라이더 1이 움직이기 시작할 때 슬라이더 2의 움직임을 금지
 
+    inner.on('slideChangeTransitionStart', function () {
 
+        swiper.allowTouchMove = false;
 
     });
 
+
 
+    // 슬라이더 1의 움직임이 끝나면 슬라이더 2의 움직임을 다시 허용
 
+    inner.on('slideChangeTransitionEnd', function () {
 
+        swiper.allowTouchMove = true;
 
+    });
 
+
 
     $(function () {
 
         $("#header").load("../layout/Header.html");
 
         $("#footer").load("../layout/footer.html");
@@ -574,6 +826,20 @@
 
 
 
 <style scoped>
 
+    .inner {
 
+        width: 100%;
 
+        height: 100%;
 
+    }
 
+
 
+    .inner .swiper-slide {
 
+        font-size: 18px;
 
+        height: auto;
 
+        display: block;
 
+        -webkit-box-sizing: border-box;
 
+        box-sizing: border-box;
 
+        padding: 30px;
 
+    }
 
+
 
     /* 스크롤바 없애기 */
 
     body {
 
         -ms-overflow-style: none;
@@ -609,6 +875,13 @@
 
     }
 
 
 
+    #contents {
 
+        scroll-snap-type: x mandatory;
 
+    }
 
+
 
+    .content {
 
+        scroll-snap-align: start;
 
+    }
 
 
     html,
 
     body {
becb6d0
614e678
views/pages/Customized.html
--- views/pages/Customized.html
+++ views/pages/Customized.html
@@ -22,37 +22,59 @@
 
 
 <body>
 
     <div id="header"></div>
 
-    <div class=" text-area pb60 slide-section flex align-center" id="customized">
 
+    <div>
 
+        <div class=" text-area pb60 slide-section flex align-center" id="customized" style="height: 100vh;">
 
 
 
-        <div class="flex justify-between" style="gap: 10px; width: 100%;">
 
-            <div class="etc-wrap-title mb30">
 
-                <h1 class="mb20">고객을 만족시키는 맞춤형 컨설팅</h1>
 
-                <p>각 산업 영역에 대한 품부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에 따라 최적화된 방법론을 적용하여 고객의 Vision을 실현 시킵니다.</p>
 
-            </div>
 
-            <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/custom-img.png" alt="">
 
-                    <p>상주시 데이터 활용 <br>기본계획 수립</p>
 
+            <div class="flex justify-between" style="gap: 10px; width: 100%;">
 
+                <div class="etc-wrap-title mb30">
 
+                    <h1 class="mb20">고객을 만족시키는 맞춤형 컨설팅</h1>
 
+                    <p>각 산업 영역에 대한 품부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에 따라 최적화된 방법론을 적용하여 고객의 Vision을 실현 시킵니다.</p>
 
                 </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/custom-img2.png" alt="">
 
-                    <p>영천시 데이터 활용 <br>기본계획 수립</p>
 
-                </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/custom-img3.png" alt="">
 
-                    <p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
 
-                </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/custom-img4.png" alt="">
 
-                    <p>영천시 공공데이터 <br>품질관리</p>
 
+                <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/custom-img.png" alt="">
 
+                        <p>상주시 데이터 활용 <br>기본계획 수립</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/custom-img2.png" alt="">
 
+                        <p>영천시 데이터 활용 <br>기본계획 수립</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/custom-img3.png" alt="">
 
+                        <p>포항테크노파크 SW융합클러스터 <br>2.0 데이터 품질관리 협력기관</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/custom-img4.png" alt="">
 
+                        <p>영천시 공공데이터 <br>품질관리</p>
 
+                    </div>
 
                 </div>
 
             </div>
 
+
 
         </div>
 
+        <footer>
 
+            <div class="footer-wrap">
 
+                <div class="footer-img mb10">
 
+                    <img src="../../resources/img/component/logo-w.png" alt="">
 
+                </div>
 
+                <hr>
 
+                <div class="footer-text pt10">
 
+                    <div class="flex justify-between ">
 
 
+                        <p>대표자 ) 임상현</p>
 
+                        <p>FAX ) 053-811-1701</p>
 
+                    </div>
 
+                    <div class="flex justify-between">
 
+                        <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
 
+                        <p>대표메일 ) [email protected]</p>
 
+                    </div>
 
+                    <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
 
+                    <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
 
+                </div>
 
+                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
 
+            </div>
 
+        </footer>
 
     </div>
 
-    </div>
 
-    <div id="footer"></div>
 
 
 </body>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -95,6 +117,20 @@
 
 </script>
 
 
 <style scoped>
 
+        footer {
 
+    width: 100%;
 
+    /* height: 300px; */
 
+    padding: 30px;
 
+    /* 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;
@@ -166,7 +202,8 @@
 
         display: block;
 
         object-fit: cover;
 
     }
 
-    .box-wrap p{
 
+
 
+    .box-wrap p {
 
         padding-top: 1rem;
 
         font-size: 2rem;
 
     }
becb6d0
614e678
views/pages/Data.html
--- views/pages/Data.html
+++ views/pages/Data.html
@@ -22,34 +22,58 @@
 
 
 <body>
 
     <div id="header"></div>
 
-    <div class=" text-area pb60  slide-section flex align-center " id="Data">
 
+    <div style=" display: flex; flex-direction: column; ">
 
 
-
 
-            <div class="flex justify-between " style="gap: 10px; width: 100%;">
 
-                <div class="etc-wrap-title pb20">
 
-                    <h1 class="mb20 ">데이터분석을 통한 인사이트 도출</h1>
 
-                    <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
 
+        <div class=" text-area pb60 pt60  slide-section flex align-center " id="Data" style="height: 100vh;">
 
+    
+    
+                <div class="flex justify-between " style="gap: 10px; width: 100%;">
 
+                    <div class="etc-wrap-title pb20">
 
+                        <h1 class="mb20 ">데이터분석을 통한 인사이트 도출</h1>
 
+                        <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
 
+                    </div>
 
+                    <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
 
+                        <div class="solution-ani">
 
+                            <img src="../../resources/img/common/data-img1.png" alt="">
 
+                            <p>구미시 주요 이슈 및 민원 분석</p>
 
+                        </div>
 
+                        <div class="solution-ani">
 
+                            <img src="../../resources/img/common/data-img2.png" alt="">
 
+                            <p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
 
+                        </div>
 
+                        <div class="solution-ani">
 
+                            <img src="../../resources/img/common/data-img3.png" alt="">
 
+                            <p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
 
+                        </div>
 
+    
+                    </div>
 
+    
                 </div>
 
-                <div class="flex justify-between box-wrap" style="width: 100%; gap: 20px; ">
 
-                    <div class="solution-ani">
 
-                        <img src="../../resources/img/common/data-img1.png" alt="">
 
-                        <p>구미시 주요 이슈 및 민원 분석</p>
 
-                    </div>
 
-                    <div class="solution-ani">
 
-                        <img src="../../resources/img/common/data-img2.png" alt="">
 
-                        <p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
 
-                    </div>
 
-                    <div class="solution-ani">
 
-                        <img src="../../resources/img/common/data-img3.png" alt="">
 
-                        <p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
 
-                    </div>
 
-
 
+    
+        </div>
 
+        <footer>
 
+            <div class="footer-wrap">
 
+                <div class="footer-img mb10">
 
+                    <img src="../../resources/img/component/logo-w.png" alt="">
 
                 </div>
 
-
 
+                <hr>
 
+                <div class="footer-text pt10">
 
+                    <div class="flex justify-between ">
 
+    
+                        <p>대표자 ) 임상현</p>
 
+                        <p>FAX ) 053-811-1701</p>
 
+                    </div>
 
+                    <div class="flex justify-between">
 
+                        <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
 
+                        <p>대표메일 ) [email protected]</p>
 
+                    </div>
 
+                    <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
 
+                    <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
 
+                </div>
 
+                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
 
             </div>
 
-
 
+        </footer>
 
     </div>
 
-    <div id="footer"></div>
 
 
 </body>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -84,14 +108,28 @@
 
 
     $(function () {
 
         $("#header").load("../layout/Header.html");
 
-        $("#footer").load("../layout/footer.html");
 
-        $("#footer").show();
 
+        // $("#footer").load("../layout/footer.html");
 
+        // $("#footer").show();
 
 
     });
 
 
 </script>
 
 
 <style scoped>
 
+    footer {
 
+    width: 100%;
 
+    /* height: 300px; */
 
+    padding: 30px;
 
+    /* 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;
becb6d0
614e678
views/pages/DataAnalysis.html
--- views/pages/DataAnalysis.html
+++ views/pages/DataAnalysis.html
@@ -23,50 +23,74 @@
 
 <body>
 
     <div id="header"></div>
 
 
+    <div style="        background: linear-gradient(#f8f9fa, #fff, #fff);
 
+    ">
 
 
-    <div class="text-area pb60 slide-section flex align-center " id="dataanalysis" style="gap: 10px;  height: 100%;">
 
-        <div class="etc-wrap-title mb20">
 
-            <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
 
-            <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
 
-        </div>
 
-        <div class="flex justify-between align-end etc-wrap-text">
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
 
-                <p>도로 위험 감지 시스템</p>
 
+
 
+        <div class="text-area pb60 pt60 slide-section flex align-center " id="dataanalysis"
 
+            style="gap: 10px;  height: 100vh; align-content: center;">
 
+            <div class="etc-wrap-title mb20">
 
+                <h1 class="mb20">데이터분석 및 관리 플랫폼 구축</h1>
 
+                <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
 
             </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
 
-                <p>안개 감지 플랫폼</p>
 
-            </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
 
-                <p>이동경로 최적화 서비스</p>
 
-            </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
 
-                <p>횡단보도 및 내비게이션 연계 플랫폼</p>
 
-            </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
 
-                <p>전력데이터 관리 시스템</p>
 
-            </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
 
-                <p>금형 부품 데이터 관리 플랫폼</p>
 
-            </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
 
-                <p>제조 데이터 관리 시스템</p>
 
-            </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
 
-                <p>메타데이터 관리 시스템</p>
 
+            <div class="flex justify-between align-end etc-wrap-text">
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
 
+                    <p>도로 위험 감지 시스템</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
 
+                    <p>안개 감지 플랫폼</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
 
+                    <p>이동경로 최적화 서비스</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
 
+                    <p>횡단보도 및 내비게이션 연계 플랫폼</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
 
+                    <p>전력데이터 관리 시스템</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
 
+                    <p>금형 부품 데이터 관리 플랫폼</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
 
+                    <p>제조 데이터 관리 시스템</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
 
+                    <p>메타데이터 관리 시스템</p>
 
+                </div>
 
             </div>
 
         </div>
 
+        <footer>
 
+            <div class="footer-wrap">
 
+                <div class="footer-img mb10">
 
+                    <img src="../../resources/img/component/logo-w.png" alt="">
 
+                </div>
 
+                <hr>
 
+                <div class="footer-text pt10">
 
+                    <div class="flex justify-between ">
 
+
 
+                        <p>대표자 ) 임상현</p>
 
+                        <p>FAX ) 053-811-1701</p>
 
+                    </div>
 
+                    <div class="flex justify-between">
 
+                        <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
 
+                        <p>대표메일 ) [email protected]</p>
 
+                    </div>
 
+                    <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
 
+                    <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
 
+                </div>
 
+                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
 
+            </div>
 
+        </footer>
 
     </div>
 
-
 
-    <div id="footer"></div>
 
-
 
 </body>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
@@ -100,14 +124,27 @@
 
 
     $(function () {
 
         $("#header").load("../layout/Header.html");
 
-        $("#footer").load("../layout/footer.html");
 
-        $("#footer").show();
 
+
 
 
     });
 
 
 </script>
 
 
 <style scoped>
 
+    footer {
 
+        width: 100%;
 
+        /* height: 300px; */
 
+        padding: 30px;
 
+        /* 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;
@@ -153,7 +190,6 @@
 
     }
 
 
     body {
 
-        background: linear-gradient(#f8f9fa, #fff, #fff);
 
         font-family: 'Pretendard';
 
         font-size: 14px;
 
         color: #000;
becb6d0
614e678
views/pages/Etc.html
--- views/pages/Etc.html
+++ views/pages/Etc.html
@@ -22,36 +22,57 @@
 
 
 <body>
 
     <div id="header"></div>
 
-    <div class=" text-area pb60 slide-section flex align-center" id="etc">
 
+    <div style="align-content: center; background: linear-gradient(#d7e2ff9d, #fff, #fff);">
 
+        <div class=" text-area pb60 slide-section " id="etc">
 
 
 
 
-        <div class="flex justify-between" style="gap: 10px; width: 100%;">
 
-            <div class="etc-wrap-title mb30">
 
+            <div class="flex justify-between" style="align-content: center; gap: 10px; width: 100%; height: 100vh;">
 
+                <div class="etc-wrap-title mb30">
 
                     <h1 class="mb20">기타사례</h1>
 
                 </div>
 
                 <div class="flex justify-between box-wrap etc-grid-box" style="width: 100%; gap: 20px; ">
 
                     <div class="etc-box solution-ani">
 
-                            <img src="../../resources/img/common/etc-img.png" alt="">
 
-                            <p class="etc-box-title">정부혁신 웹사이트 기능개선 및 유지관리</p>
 
-                            <p>- 혁신24 웹사이트 UI/UX 개선 및 검색 알고리즘 기능 개선 등을 통한 유지관리</p>
 
-                            <p>- 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
 
-                            <p>- 홈페이지 검색 기능 강화와 직관적인 UI/UX 디자인을 적용하여 정보 접근성 개선</p>
 
+                        <img src="../../resources/img/common/etc-img.png" alt="">
 
+                        <p class="etc-box-title">정부혁신 웹사이트 기능개선 및 유지관리</p>
 
+                        <p>- 혁신24 웹사이트 UI/UX 개선 및 검색 알고리즘 기능 개선 등을 통한 유지관리</p>
 
+                        <p>- 웹사이트 개편을 통한 관리자 업무 효율성 확대</p>
 
+                        <p>- 홈페이지 검색 기능 강화와 직관적인 UI/UX 디자인을 적용하여 정보 접근성 개선</p>
 
                     </div>
 
                     <div class="etc-box solution-ani">
 
-                            <img src="../../resources/img/common/etc-img2.png" alt="">
 
-                            <p class="etc-box-title">AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
 
-                            <p>- AI 디지털교과서 통합지원센터 홈페이지 프로토타입 개발 및 운영</p>
 
-                            <p>- AI 디지털교과서 개발사 및 에듀테크 기업의 특성을 고려한 다양한 개발 지원 모델 개발</p>
 
+                        <img src="../../resources/img/common/etc-img2.png" alt="">
 
+                        <p class="etc-box-title">AI 디지털교과서 통합지원센터 모델발굴 및 시범운영</p>
 
+                        <p>- AI 디지털교과서 통합지원센터 홈페이지 프로토타입 개발 및 운영</p>
 
+                        <p>- AI 디지털교과서 개발사 및 에듀테크 기업의 특성을 고려한 다양한 개발 지원 모델 개발</p>
 
                     </div>
 
-                   
+
 
                 </div>
 
             </div>
 
 
         </div>
 
-    </div>
 
-    <div id="footer"></div>
 
+        <footer>
 
+            <div class="footer-wrap">
 
+                <div class="footer-img mb10">
 
+                    <img src="../../resources/img/component/logo-w.png" alt="">
 
+                </div>
 
+                <hr>
 
+                <div class="footer-text pt10">
 
+                    <div class="flex justify-between ">
 
 
+                        <p>대표자 ) 임상현</p>
 
+                        <p>FAX ) 053-811-1701</p>
 
+                    </div>
 
+                    <div class="flex justify-between">
 
+                        <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
 
+                        <p>대표메일 ) [email protected]</p>
 
+                    </div>
 
+                    <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
 
+                    <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
 
+                </div>
 
+                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
 
+            </div>
 
+        </footer>
 
+    </div>
 
 </body>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
@@ -93,6 +114,20 @@
 
 </script>
 
 
 <style scoped>
 
+    footer {
 
+        width: 100%;
 
+        /* height: 300px; */
 
+        padding: 30px;
 
+        /* 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;
@@ -138,7 +173,7 @@
 
     }
 
 
     body {
 
-        background: linear-gradient( #d7e2ff9d,#fff, #fff);
 
+        background: linear-gradient(#d7e2ff9d, #fff, #fff);
 
         font-family: 'Pretendard';
 
         font-size: 14px;
 
         color: #000;
becb6d0
614e678
views/pages/SmartCtiy.html
--- views/pages/SmartCtiy.html
+++ views/pages/SmartCtiy.html
@@ -23,39 +23,64 @@
 
 <body>
 
     <div id="header"></div>
 
 
+    <div style="        background: linear-gradient(#d7e2ff9d, #fff, #fff);
 
+    ">
 
 
-    <div class="text-area pb60 slide-section flex align-center" id="smart" style="gap: 10px;  height: 100%;">
 
-        <div class="etc-wrap-title mb20">
 
-            <h1 class="mb20">스마트시티 솔루션 공급</h1>
 
-            <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
 
-                제공합니다.</p>
 
-        </div>
 
-        <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap;">
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/smart-img1.png" alt="">
 
-                <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
 
-                <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
 
-                <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
 
+
 
+        <div class="text-area pb60 pt60 slide-section flex align-center" id="smart"
 
+            style="gap: 10px;  height: 100vh; align-content: center;">
 
+            <div class="etc-wrap-title mb20">
 
+                <h1 class="mb20">스마트시티 솔루션 공급</h1>
 
+                <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
 
+                    제공합니다.</p>
 
             </div>
 
-            <div class="smart-img solution-ani">
 
-                <img src="../../resources/img/common/smart-img2.png" alt="">
 
-                <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
 
-                <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
 
-                <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
 
-            </div>
 
-            <div class="solution-ani">
 
-                <img src="../../resources/img/common/smart-img3.png" alt="">
 
-                <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
 
-                <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
 
-                <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
 
+            <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap;">
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/smart-img3.png" alt="">
 
+                    <p class="box-wrap-title mb20">AI 안전통합 횡단보도 플랫폼</p>
 
+                    <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
 
+                    <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
 
+                </div>
 
+                <div class="smart-img solution-ani">
 
+                    <img src="../../resources/img/common/smart-img2.png" alt="">
 
+                    <p class="box-wrap-title mb20">시니어 스마트 케어 모니터링 서비스</p>
 
+                    <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
 
+                    <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
 
+                </div>
 
+                <div class="solution-ani">
 
+                    <img src="../../resources/img/common/smart-img1.png" alt="">
 
+                    <p class="box-wrap-title mb20">전력 에너지 모니터링 시스템</p>
 
+                    <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
 
+                    <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
 
+                </div>
 
+
 
             </div>
 
 
         </div>
 
 
+        <footer>
 
+            <div class="footer-wrap">
 
+                <div class="footer-img mb10">
 
+                    <img src="../../resources/img/component/logo-w.png" alt="">
 
+                </div>
 
+                <hr>
 
+                <div class="footer-text pt10">
 
+                    <div class="flex justify-between ">
 
+
 
+                        <p>대표자 ) 임상현</p>
 
+                        <p>FAX ) 053-811-1701</p>
 
+                    </div>
 
+                    <div class="flex justify-between">
 
+                        <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
 
+                        <p>대표메일 ) [email protected]</p>
 
+                    </div>
 
+                    <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
 
+                    <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
 
+                </div>
 
+                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
 
+            </div>
 
+        </footer>
 
     </div>
 
-
 
-    <div id="footer"></div>
 
-
 
 </body>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
@@ -97,6 +122,20 @@
 
 </script>
 
 
 <style scoped>
 
+    footer {
 
+        width: 100%;
 
+        /* height: 300px; */
 
+        padding: 30px;
 
+        /* 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;
@@ -142,7 +181,6 @@
 
     }
 
 
     body {
 
-        background: linear-gradient(#d7e2ff9d, #fff, #fff);
 
         font-family: 'Pretendard';
 
         font-size: 14px;
 
         color: #000;
@@ -168,12 +206,11 @@
 
         padding-bottom: 2rem;
 
     }
 
 
-    .etc-wrap-text  div p {
 
+    .etc-wrap-text div p {
 
         text-align: left;
 
         padding: 1rem 3rem;
 
         font-size: 1.5rem;
 
     }
 
-  
 </style>
 
 
 </html>
(No newline at end of file)
becb6d0
614e678
views/pages/Solution.html
--- views/pages/Solution.html
+++ views/pages/Solution.html
@@ -25,7 +25,7 @@
 
     <div class="swiper mySwiper" id="solution">
 
         <div class="swiper-wrapper">
 
             <div class="swiper-slide">
 
-                <div class=" text-area pb60 slide-section flex align-center solution">
 
+                <div class=" text-area pb60 pt60 slide-section flex align-center solution">
 
 
                     <div class="solution-title">
 
                         <p>Taken BI Manager v1.0</p>
@@ -70,7 +70,7 @@
 
                 </div>
 
             </div>
 
             <div class="swiper-slide">
 
-                <div class=" text-area pb60 slide-section flex align-center">
 
+                <div class=" text-area pb60 pt60 slide-section flex align-center">
 
 
                     <div class="traffic-title">
 
                         <p>Traffic Agent</p>
@@ -129,7 +129,7 @@
 
                 </div>
 
             </div>
 
             <div class="swiper-slide">
 
-                <div class=" text-area pb60 slide-section flex align-center">
 
+                <div class=" text-area pb60 pt60 slide-section flex align-center">
 
 
                     <div class="ai-title">
 
                         <p>AI 안전통합 횡단보도 관리 솔루션</p>
@@ -186,7 +186,7 @@
 
                 </div>
 
             </div>
 
             <div class="swiper-slide meta-wrap">
 
-                <div class=" text-area pb60 slide-section flex align-center">
 
+                <div class=" text-area pb60 pt60 slide-section flex align-center">
 
                     <div class="meta-title">
 
                         <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
 
                     </div>
@@ -198,7 +198,7 @@
 
                                 <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
 
                                 <p class="close-btn">x</p>
 
                             </div>
 
-                            <video src="../../resources/img/common/hanti.mp4" autoplay muted controls></video>
 
+                            <video src="../../resources/img/common/hanti.mp4" autostart ="false" autoplay="false" muted controls></video>
 
                         </div>
 
                     </div>
 
                     <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px;">
@@ -239,7 +239,7 @@
 
                 </div>
 
             </div>
 
             <div class="swiper-slide">
 
-                <div class=" text-area pb60 slide-section flex align-center">
 
+                <div class=" text-area pb60 pt60 slide-section flex align-center">
 
 
                     <div class="smart-title ">
 
                         <p>스마트제조 데이터 모니터링 서비스</p>
@@ -275,10 +275,10 @@
 
                 </div>
 
             </div>
 
 
+            <div id="footer"></div>
 
         </div>
 
 
     </div>
 
-    <div id="footer"></div>
@@ -322,8 +322,10 @@
 
     var swiper = new Swiper(".mySwiper", {
 
         direction: "vertical",
 
         slidesPerView: 1,
 
-        spaceBetween: 30,
 
+        spaceBetween: 0,
 
         mousewheel: true,
 
+        slidesOffsetAfter: 220,                    
+
 
         on: {
 
 
             slideChange: function () {
@@ -333,12 +335,7 @@
 
                 } else {
 
                     $('#header').addClass('active');
 
                 }
 
-                var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
 
-                if (this.activeIndex === lastIndex) {
 
-                    $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
 
-                } else {
 
-                    $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
 
-                }
 
+         
             },
 
             reachEnd: function () {
 
                 swiper.mousewheel.disable();
becb6d0
614e678
views/pages/Visualization.html
--- views/pages/Visualization.html
+++ views/pages/Visualization.html
@@ -22,50 +22,73 @@
 
 
 <body>
 
     <div id="header"></div>
 
-    <div class=" text-area pb60 slide-section flex align-center" id="visuali">
 
+    <div style="        background: linear-gradient(#d7e2ff9d, #fff, #fff);
 
+    ">
 
+        <div class=" text-area pb60 pt60 slide-section flex align-center" id="visuali" style="height: 100vh;">
 
 
 
-        <div class=" flex justify-between  align-center"
 
-            style="gap: 10px; width: 100%; ">
 
-            <div class="etc-wrap-title mb20">
 
-                <h1 class="mb20">시각화 서비스 시스템 구축</h1>
 
-                <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
 
-            </div>
 
-            <div class="etc-wrap-text flex justify-between">
 
+            <div class=" flex justify-between  align-center" style="gap: 10px; width: 100%; ">
 
+                <div class="etc-wrap-title mb20">
 
+                    <h1 class="mb20">시각화 서비스 시스템 구축</h1>
 
+                    <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
 
+                </div>
 
+                <div class="etc-wrap-text flex justify-between">
 
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/visual-img1.png" alt="">
 
-                    <p>영천시 지역별 인구 추이 분석</p>
 
-                </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/visual-img2.png" alt="">
 
-                    <p>포항시 지역별 인구 추이 분석</p>
 
-                </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/visual-img3.png" alt="">
 
-                    <p>스마트 제조 공정관리 모니터링 플랫폼</p>
 
-                </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/visual-img1.png" alt="">
 
+                        <p>영천시 지역별 인구 추이 분석</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/visual-img2.png" alt="">
 
+                        <p>포항시 지역별 인구 추이 분석</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/visual-img3.png" alt="">
 
+                        <p>스마트 제조 공정관리 모니터링 플랫폼</p>
 
+                    </div>
 
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/visual-img4.png" alt="">
 
-                    <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
 
-                </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/visual-img5.png" alt="">
 
-                    <p>시니어 스마트 케어 모니터링 플랫폼</p>
 
-                </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/visual-img6.png" alt="">
 
-                    <p>공정 및 외부 환경 관제 시각화</p>
 
-                </div>
 
-                <div class="solution-ani">
 
-                    <img src="../../resources/img/common/visual-img7.png" alt="">
 
-                    <p>상주시 부서별 재정 분석</p>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/visual-img4.png" alt="">
 
+                        <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/visual-img5.png" alt="">
 
+                        <p>시니어 스마트 케어 모니터링 플랫폼</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/visual-img6.png" alt="">
 
+                        <p>공정 및 외부 환경 관제 시각화</p>
 
+                    </div>
 
+                    <div class="solution-ani">
 
+                        <img src="../../resources/img/common/visual-img7.png" alt="">
 
+                        <p>상주시 부서별 재정 분석</p>
 
+                    </div>
 
                 </div>
 
             </div>
 
         </div>
 
+        <footer>
 
+            <div class="footer-wrap">
 
+                <div class="footer-img mb10">
 
+                    <img src="../../resources/img/component/logo-w.png" alt="">
 
+                </div>
 
+                <hr>
 
+                <div class="footer-text pt10">
 
+                    <div class="flex justify-between ">
 
+
 
+                        <p>대표자 ) 임상현</p>
 
+                        <p>FAX ) 053-811-1701</p>
 
+                    </div>
 
+                    <div class="flex justify-between">
 
+                        <p>고객지원 ) 053-811-1700(평일9시~18시)</p>
 
+                        <p>대표메일 ) [email protected]</p>
 
+                    </div>
 
+                    <p>주소 )본사: 경상북도 경산시 대학로280, 영남대학교 창업보육센터 신관 217호,218호,220호</p>
 
+                    <p class="pl30">대구지사: 대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
 
+                </div>
 
+                <p class="copyright">&copy; 2021.Takensoft.all rights reserved.</p>
 
+            </div>
 
+        </footer>
 
     </div>
 
-    <div id="footer"></div>
 
 
 </body>
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@@ -108,6 +131,20 @@
 
 </script>
 
 
 <style scoped>
 
+        footer {
 
+    width: 100%;
 
+    /* height: 300px; */
 
+    padding: 30px;
 
+    /* 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;
@@ -153,7 +190,6 @@
 
     }
 
 
     body {
 
-        background: linear-gradient(#d7e2ff9d, #fff, #fff);
 
         font-family: 'Pretendard';
 
         font-size: 14px;
 
         color: #000;
Add a comment
List