Commit @e46385df59012707ae176dc0b2f43098f07cd024

mycoms 2024-04-12

240412 김하영

@e46385df59012707ae176dc0b2f43098f07cd024

ae7716b

e46385d

resources/css/component.css

--- resources/css/component.css

+++ resources/css/component.css


     height: calc(100% - 47px);
 }
 
-.content {
+/* .content {
     width: 100%;
     overflow-y: auto;
-}
+} */
 
 .content:last-child {
     margin-bottom: 0;

 
 .left-content,
 .right-content,
-.row,
-.content {
+.row
+{
     padding: 15px 0;
     border-radius: 10px;
     background-color: #fff;

ae7716b

e46385d

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


 
     }
 
+    .logo {
+        width: 50% !important;
+        height: 14px !important;
+        background-size: cover;
+    }
+
+    .mobil-wrap {
+        width: 50%;
+    }
+
+    .mobil-wrap button {
+        width: 100%;
+        text-align: right;
+    }
+
     summary::-webkit-details-marker {
         display: none;
     }
-
-    .text-main,
-    .solution-text,
-    .portfolio-text,
-    .map-text,
-    .about-title p:nth-child(1) {
-        font-size: 2.5rem !important;
-        padding-bottom: 1rem;
-    }
-
-
-    .solution-title p,
-    .traffic-title p,
-    .ai-title p,
-    .meta-title p,
-    .smart-title p {
-        font-size: 2.3rem;
-    }
-
-    .sub-text,
-    .solution-sub-text {
-        font-size: 1rem !important;
-        margin-bottom: 0rem;
-    }
-
-    .marketing-wrap-title h1 {
-        font-size: 3rem;
-    }
-
-    .accordion.active .accordion-num,
-    .accordion.active .accordion-num span {
-        font-size: 2rem;
-    }
-
-    .history-box {
-        height: 75% !important;
-    }
-
-    .solution-box {
-        width: 100%;
-        height: calc(100% - 182px) !important;
-        flex-direction: column;
-        flex-wrap: wrap !important;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .slide-solution .text-area {
-        padding: 6rem 2rem;
-    }
-
-    .slide-solution .portfolio-text {
-        /* padding:20% 1rem; */
-    }
-
-    #contentHeadquarter,
-    #contentDaeguBranch {
-        height: 350px !important;
-    }
-
-    #map1,
-    #map2 {
-        width: 100% !important;
-    }
-
-    .box:hover {
-        transform: scale(1);
-    }
-
-    .box-wrap-title {
-        font-size: 1.3rem !important;
-        font-weight: 800;
-        margin-bottom: 0px;
-    }
-
-
 
     .header-area {
         width: 100%;

         width: 100%;
     }
 
+    #header.active {
+        border-bottom: 1px solid #ced4da;
+        background-color: white;
+    }
+
+    #header.active .header nav li a {
+        color: #333;
+
+    }
+
+    #header.active .header nav ul li ul.dropdown {
+        background-color: #fff;
+    }
+
+    #header.active .header .logo {
+        background: url(../img/component/logo-color.png) no-repeat;
+        width: 200px;
+        background-size: contain;
+        height: 25px;
+
+    }
+
+    #header.active .header .mobile-menu-button,
+    .mobile-menu-button-close {
+        color: #333;
+    }
+
+    #header.active .header .mobile-menu-button-close {
+        color: #333;
+        display: block;
+    }
+
+    #header.active .header .mobil-menu ul {
+        background-color: #fff;
+    }
+
+    #header{
+        position: fixed !important;
+        top: 0;
+    }
+
+    .solution-text,
+    .portfolio-text,
+    .map-text,
+    .about-title p:nth-child(1) {
+        font-size: 2.5rem !important;
+        padding-bottom: 1rem;
+    }
+
+    .text-main {
+        font-size: 2.4rem !important;
+        margin-bottom: 2rem;
+    }
+
+    .solution-title p,
+    .traffic-title p,
+    .ai-title p,
+    .meta-title p,
+    .smart-title p {
+        font-size: 2.3rem;
+        margin: 1rem;
+        word-break: keep-all;
+    }
+
+    .sub-text,
+    .solution-sub-text {
+        font-size: 1.3rem !important;
+        margin-bottom: 0rem;
+    }
+
+    .marketing-wrap-title h1 {
+        font-size: 3rem;
+    }
+
+    .accordion.active .accordion-num,
+    .accordion.active .accordion-num span {
+        font-size: 2rem;
+    }
+
+    .history-box {
+        -ms-overflow-style: none;
+        /* 인터넷 익스플로러 */
+        scrollbar-width: none;
+        height: 100% !important;
+    }
+.history-area{
+    gap: 0px !important;
+}
+    .solution-box {
+        width: 100%;
+        height: calc(100% - 182px) !important;
+        flex-direction: column;
+        flex-wrap: wrap !important;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .slide-solution .text-area {
+        padding: 6rem 2rem;
+    }
+
+
+    #contentHeadquarter,
+    #contentDaeguBranch {
+        height: 300px !important;
+    }
+
+    #map1,
+    #map2 {
+        width: 100% !important;
+    }
+
+    .box:hover {
+        transform: scale(1);
+    }
+
+    .box-wrap-title {
+        font-size: 1.3rem !important;
+        font-weight: 800;
+        margin-bottom: 0px;
+    }
+
+    .box p:nth-child(1) {
+        font-size: 1.4rem;
+        font-weight: 600;
+    }
+
+    .box p {
+        font-weight: 300;
+        font-size: 1.2rem;
+    }
+
+
+    #solution {
+
+        padding: 0rem !important;
+    }
+
+    #solution .swiper-wrapper {
+        background: linear-gradient(#f8f9fa, #fff, #fff) !important;
+
+    }
+
+    #solution .swiper-slide {
+        height: 100% !important;
+        background: #fff !important;
+    }
+
+    #solution .taken-area {
+        width: 100% !important;
+    }
+
+    #solution .text-area {
+        width: 100% !important;
+        height: 100%;
+        padding: 6rem 2rem !important;
+    }
+
     .text-area {
         width: 100% !important;
         height: 100% !important;

     }
 
     .innerSwiper-title {
-        font-size: 1.5rem;
+        font-size: 1.7rem;
+    }
+
+    .innerSwiper-text {
+        font-size: 1.3rem;
     }
 
     .innerSwiper .swiper-slide {

         width: 100%;
         padding: 1rem 1rem 2rem 1rem;
         margin: 0 auto;
+    }
+
+    .portfolio-text {
+        padding-left: 2rem;
     }
 
     .marketing-wrap-title h1::after {

         font-size: 1.8rem;
     }
 
+    .gradient-bottom {
+        padding-top: 60px !important;
+    }
 
     .slide-solution {
         height: 100%;

 
     #footer {
         width: 100%;
+        padding: 20px;
     }
 
     .footer-wrap {

     .footer-text div p,
     .footer-text p {
         width: 100%;
-        font-size: 1.2rem;
+        font-size: 1.2rem !important;
         padding-left: 0px !important;
+    }
+
+    .copyright {
+        font-size: 1.3rem !important;
     }
 
     .about-wrap {
         width: 100%;
         padding: 9rem 2rem;
+    }
+
+    #footer img {
+        width: 100px !important;
     }
 
     .container {

     }
 
     .month {
+        width: 100%;
         text-align: left !important;
     }
 

 
     .taken-wrap-box {
         width: 100% !important;
-        gap: 5px !important;
+        gap: 10px !important;
         flex-direction: column;
     }
 

         width: 100%;
         height: 0% !important;
         align-items: start;
-        gap: 5px !important;
+        gap: 10px !important;
+    }
+
+    .solution-area {
+        gap: 10px !important;
     }
 
     .taken-area img,

         gap: 5px;
     }
 
-    .text-after p:nth-child(1) {
-        display: block;
-    }
 
-    .text-after p {
-        display: none;
-    }
 
     .taken-box p {
+        margin-top: 0px;
         font-size: 1.2rem;
     }
 
 
 
     .text-box-title {
-        font-size: 1rem;
-        padding-left: 10px;
+        font-weight: 600;
+        margin-top: 1rem;
+        text-align: center;
+        font-size: 1.6rem;
+        margin-left: 0rem;
     }
 
     .solution-after {

 
     .meta-wrap::before {
         width: 100%;
+        display: none;
     }
 
     #visuali .etc-wrap-text,

     }
 
     .solution-text-box {
-        padding: 10px 15px !important;
+        padding: 10px 15px 20px 15px !important;
     }
 
     .solution-text-box p {

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

 
     .traffic-video {
         width: 90%;
-        padding: 1rem;
+        padding: 1rem 1rem 2rem 1rem;
     }
 
     .traffic-video p {
-        font-size: 2rem;
+        font-size: 1.6rem;
+        word-break: keep-all;
     }
 
     .traffic-button button {

     }
 
     .taken-area p {
-        font-size: 1.5rem;
+        font-size: 1.4rem;
     }
 
     .traffic-button {

     }
 
     .text-box-title::after {
-        left: -5px;
-        top: -1px;
-    }
-
-    .solution-text-box {
         display: none;
     }
 
 
-
-    .logo {
-        width: 50% !important;
-        height: 14px !important;
-        background-size: cover;
+    .traffic-video {
+        top: 25%;
     }
 
-    .mobil-wrap {
-        width: 50%;
-    }
-
-    .mobil-wrap button {
+    .viedeo-text-box {
         width: 100%;
-        text-align: right;
+        margin: 1rem 0;
+        flex-wrap: nowrap;
+
+        /* border: 1px solid red; */
     }
+
+    .viedeo-text-box p:nth-child(1) {
+        text-align: left;
+    }
+
 
     .box:hover,
     .box-wrap div img:hover {

 }
 
 @media all and (min-width:480px) and (max-width:768px) {
+
     * {
         padding: 0;
         margin: 0;
         box-sizing: border-box;
+    }
+
+    .swiper-slide {
+        -ms-overflow-style: none;
+        /* 인터넷 익스플로러 */
+        scrollbar-width: none;
+        /* 파이어폭스 */
     }
 
     html,

 
     }
 
-    .text-main,
-    .solution-text,
-    .portfolio-text,
-    .map-text,
-    .about-title p:nth-child(1),
-    .marketing-wrap-title h1 {
-        font-size: 2.2rem !important;
+    .logo {
+        width: 50% !important;
+        height: 14px !important;
+        background-size: cover;
     }
 
-    .solution-title p,
-    .traffic-title p,
-    .ai-title p,
-    .meta-title p,
-    .smart-title p,
-    .etc-wrap-title p {
-        font-size: 1.5rem;
+    .mobil-wrap {
+        width: 50%;
     }
 
-    .sub-text,
-    .solution-sub-text {
-        font-size: 1.5rem !important;
-    }
-
-    .solution-box {
+    .mobil-wrap button {
         width: 100%;
-        height: calc(100% - 182px) !important;
-        flex-direction: column;
-        flex-wrap: wrap !important;
-        align-items: center;
-        justify-content: space-between;
+        text-align: right;
     }
 
-
-
-    .box:hover {
-        transform: scale(1);
+    summary::-webkit-details-marker {
+        display: none;
     }
 
     .header-area {

         background-color: #fff;
     }
 
+    nav ul li a {
+        font-size: 2rem !important;
+    }
+
     .mobil-menu ul li ul li a {
-        font-weight: 500;
+
+        font-weight: 300;
         color: #333;
-        font-size: 1.2rem !important;
+        font-size: 1.5rem !important;
     }
 
     nav>ul {

 
     .slide-wrap {
         width: 100%;
+    }
+
+    #header.active {
+        border-bottom: 1px solid #ced4da;
+        background-color: white;
+    }
+
+    #header.active .header nav li a {
+        color: #333;
+
+    }
+
+    #header.active .header nav ul li ul.dropdown {
+        background-color: #fff;
+    }
+
+    #header.active .header .logo {
+        background: url(../img/component/logo-color.png) no-repeat;
+        width: 200px;
+        background-size: contain;
+        height: 25px;
+
+    }
+
+    #header.active .header .mobile-menu-button,
+    .mobile-menu-button-close {
+        color: #333;
+    }
+
+    #header.active .header .mobile-menu-button-close {
+        color: #333;
+        display: block;
+    }
+
+    #header.active .header .mobil-menu ul {
+        background-color: #fff;
+    }
+
+
+
+    .solution-text,
+    .portfolio-text,
+    .map-text,
+    .about-title p:nth-child(1) {
+        font-size: 2.5rem !important;
+        padding-bottom: 1rem;
+    }
+
+    .text-main {
+        font-size: 2.4rem !important;
+        margin-bottom: 2rem;
+    }
+
+    .solution-title p,
+    .traffic-title p,
+    .ai-title p,
+    .meta-title p,
+    .smart-title p {
+        font-size: 2.3rem;
+        margin: 1rem;
+        word-break: keep-all;
+    }
+
+    .sub-text,
+    .solution-sub-text {
+        font-size: 1.3rem !important;
+        margin-bottom: 0rem;
+    }
+
+    .marketing-wrap-title h1 {
+        font-size: 3rem;
+    }
+
+    .accordion.active .accordion-num,
+    .accordion.active .accordion-num span {
+        font-size: 2rem;
+    }
+
+    .history-box {
+        -ms-overflow-style: none;
+        /* 인터넷 익스플로러 */
+        scrollbar-width: none;
+        height: 80% !important;
+    }
+    .slideTextDtail p{
+        border-bottom: 0px !important;
+    }
+    .business-box{
+        display: none;
+    }
+
+    .solution-box {
+        width: 100%;
+        height: calc(100% - 182px) !important;
+        flex-direction: column;
+        flex-wrap: wrap !important;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .slide-solution .text-area {
+        padding: 6rem 2rem;
+    }
+
+
+    #contentHeadquarter,
+    #contentDaeguBranch {
+        height: 300px !important;
+    }
+
+    #map1,
+    #map2 {
+        width: 100% !important;
+    }
+
+    .box:hover {
+        transform: scale(1);
+    }
+
+    .box-wrap-title {
+        font-size: 1.3rem !important;
+        font-weight: 800;
+        margin-bottom: 0px;
+    }
+
+    .box p:nth-child(1) {
+        font-size: 1.4rem;
+        font-weight: 600;
+    }
+
+    .box p {
+        font-weight: 300;
+        font-size: 1.2rem;
+    }
+
+
+    #solution {
+
+        padding: 0rem !important;
+    }
+
+    #solution .swiper-wrapper {
+        background: linear-gradient(#f8f9fa, #fff, #fff) !important;
+
+    }
+
+    #solution .swiper-slide {
         height: 100% !important;
+        background: #fff !important;
+    }
+
+    #solution .taken-area {
+        width: 100% !important;
+    }
+
+    #solution .text-area {
+        width: 100% !important;
+        height: 100%;
+        padding: 6rem 2rem !important;
     }
 
     .text-area {
         width: 100% !important;
         height: 100% !important;
-        padding: 2rem;
+        padding: 6rem 2rem;
     }
 
     .innerSwiper-title {
-        font-size: 1.5rem;
+        font-size: 1.7rem;
+    }
+
+    .innerSwiper-text {
+        font-size: 1.3rem;
     }
 
     .innerSwiper .swiper-slide {

         padding: 10px;
     }
 
+    .sub-text-area {
+        margin-bottom: 1rem !important;
+    }
+
     .marketing-wrapper {
         width: 100%;
-        padding: 1rem;
+        padding: 1rem 1rem 2rem 1rem;
         margin: 0 auto;
+    }
+
+    .portfolio-text {
+        padding-left: 2rem;
     }
 
     .marketing-wrap-title h1::after {

 
     .marketing-area {
         width: 100%;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr;
     }
 
     .marketing-title {
         font-size: 1.8rem;
     }
 
+    .gradient-bottom {
+        padding-top: 60px !important;
+    }
 
+    .slide-solution {
+        height: 100%;
+    }
 
     .root_daum_roughmap_landing {
         width: 100% !important;

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

     }
 
     .map-btn button {
-        /* width: 49%; */
+        /* width: 40%; */
         font-size: 1.2rem;
     }
 

 
     #footer {
         width: 100%;
+        padding: 20px;
     }
 
     .footer-wrap {

     .footer-text div p,
     .footer-text p {
         width: 100%;
+        font-size: 1.2rem !important;
         padding-left: 0px !important;
+    }
+
+    .copyright {
+        font-size: 1.3rem !important;
     }
 
     .about-wrap {
         width: 100%;
-        padding: 0px;
-        padding-top: 50px;
+        padding: 9rem 2rem;
+    }
+
+    #footer img {
+        width: 100px !important;
+    }
+
+    .container {
+        width: 100%;
     }
 
     .about-title-sub {
-        font-size: 1.2rem;
+        font-size: 1.5rem;
+        margin-bottom: 0px;
     }
 
     .about-area {
         flex-wrap: nowrap;
         width: 100%;
         height: 10%;
+        margin-bottom: 10px !important;
         flex-direction: column;
         gap: 10px !important;
     }
 
     .about-area p {
+        font-size: 2rem;
+    }
+
+    .month-text p {
         font-size: 1.2rem;
     }
 

         display: none;
     }
 
-    .about-title {
-        margin-top: 60px;
-        height: 20%;
-        margin-bottom: 1rem !important;
-    }
 
     .about-text {
         font-size: 1.5rem;
     }
 
-    .map-wrap {
-        width: 100%;
-        height: 100%;
-        border: 1px solid red;
-    }
-
-    #contentHeadquarter,
-    #contentDaeguBranch {
-        width: 100%;
-        height: 100%;
-    }
-
     .silde-box {
-        height: 60%;
+        height: 75%;
         display: flex;
         flex-direction: column;
     }

     }
 
     .slideText p:first-child {
-        font-size: 1.2rem;
+        font-size: 2rem;
     }
 
-    .slideTextDtail p {
-        font-size: 1rem;
-        border-bottom: 0px !important;
-        margin-bottom: 0.5rem;
+ 
+    .slideTextDtail {
+        padding: 0 1rem;
     }
 
-    .slideTextDtail div div {
-        display: none;
+    .about-title {
+        margin-top: 60px;
+        margin-bottom: 1rem !important;
     }
 
-
-
-    .about img {
+    .solution-web-box img {
         width: 100%;
-        height: 100%;
+        object-fit: contain !important;
+        height: 200px !important;
+        margin-bottom: 0px !important;
     }
 
-    .about-vision-box {
-        height: 200px;
+
+    .month-text img {
+        width: 100px !important;
+        height: 150px;
     }
 
+    
     .about-vision-box img {
-        width: 50%;
-        height: 100%;
+        height: 150px;
+        display: block;
         object-fit: contain;
     }
 

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

         flex-wrap: nowrap;
     }
 
-    .solution-title::after,
-    .traffic-title::after,
-    .ai-title::after,
-    .meta-title::after,
-    .smart-title::after {
-        width: 20px;
-        height: 20px;
-        background-size: 20px 20px;
-        top: 20px;
-
-    }
-
     .taken-wrap-box {
         width: 100% !important;
-        gap: 5px !important;
+        gap: 10px !important;
         flex-direction: column;
     }
 
     .taken-area {
         width: 100%;
-        height: 60% !important;
+        height: 0% !important;
         align-items: start;
-        gap: 5px !important;
+        gap: 10px !important;
+    }
+
+    .solution-area {
+        gap: 10px !important;
     }
 
     .taken-area img,
     .traffic-area img,
-    .ai-area img,
-    .smart-area img {
+    .ai-area img {
+        width: 100%;
         object-fit: contain !important;
-        height: 200px !important;
-        margin: 0 auto;
-        margin-bottom: 10px;
+        margin-bottom: 2rem;
     }
 
-    .traffic-button {
-        margin: 2rem 0;
-    }
-
-    .solution-title,
-    .traffic-title,
-    .ai-title,
-    .meta-title,
-    .smart-title {
-        height: 15%;
-        padding-top: 5rem;
-        margin-bottom: 0rem !important;
-    }
-
-    .etc-wrap-text,
-    .box-wrap {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        gap: 5px;
-    }
-
-    .etc-grid-box {
-        grid-template-columns: 1fr 1fr;
-    }
-
-    /* .etc-grid-box p{height: 100px !important;} */
-
-    .etc-wrap-text div,
-    .box-wrap div {
-        width: 100%;
-        border-radius: 5px;
-        margin-bottom: 5px;
-    }
-
-    .etc-wrap-text div img,
-    .box-wrap div img {
-        width: 100% !important;
-    }
-
-    .box-wrap div {
-        padding: 2rem 0;
-    }
-
-    .etc-wrap-text p,
-    .box-wrap p {
-        font-size: 1rem;
-        /* height: 50px; */
-    }
 
     .taken-box {
         width: 100%;
-        /* flex-direction: column; */
+        /* margin-bottom: 2rem; */
+        flex-direction: column;
         gap: 5px;
     }
 
+
+
     .taken-box p {
+        margin-top: 0px;
         font-size: 1.2rem;
     }
 
-    .taken-area p {
-        font-size: 1rem;
-    }
+
 
     .text-box-title {
-        font-size: 1rem;
-        padding-left: 10px;
+        font-weight: 600;
+        margin-top: 1rem;
+        text-align: center;
+        font-size: 1.6rem;
+        margin-left: 0rem;
     }
 
     .solution-after {
         justify-content: start;
     }
 
-    .solution-area-two {
-        height: calc(100% - 490.05px) !important;
+
+    .solution-title::after,
+    .traffic-title::after,
+    .ai-title::after,
+    .meta-title::after,
+    .smart-title::after {
+        display: none;
+    }
+
+    #Data,
+    #smart,
+    #visuali,
+    #dataanalysis {
+        height: 100% !important;
+        overflow-y: scroll !important;
+    }
+
+    #customized,
+    #etc {
+        height: 100% !important;
+        overflow-y: scroll !important;
+        padding-top: 60px;
+    }
+
+
+
+    .meta-wrap::before {
+        width: 100%;
+        display: none;
+    }
+
+    #visuali .etc-wrap-text,
+    #dataanalysis .etc-wrap-text,
+    #customized .box-wrap {
+        width: 100%;
+    }
+
+    #Data img,
+    #visuali img,
+    #dataanalysis img,
+    #customized img {
+        width: 100%;
+    }
+
+    #smart img {
+        width: 100%;
+    }
+
+    #smart .box-wrap-title {
+        display: block !important;
+        font-weight: 600 !important;
+    }
+
+    #etc .etc-box-title {
+        display: block !important;
+        font-weight: 600 !important;
+        width: 100%;
+    }
+
+    #smart .etc-wrap-text div p,
+    #etc .etc-box p {
+        font-size: 1rem;
+        padding: 0px;
+        font-weight: 200;
+        display: none;
     }
 
     .solution-area {
-
-        gap: 40px !important;
-        height: calc(100% - 141.61px) !important;
+        width: 100%;
+        grid-template-columns: 1fr;
     }
 
     .solution-text-box {
-        padding: 10px 15px !important;
+        padding: 10px 15px 20px 15px !important;
     }
 
     .solution-text-box p {

 
     .solution-text-box div {
         gap: 0px !important;
+        flex-direction: column;
     }
 
-    .solution-text-box div div {
-        flex-direction: row;
+    .solution-text-box div div p {
+        width: 100%;
+    }
+
+    .etc-wrap-text,
+    .box-wrap {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .box-wrap {
+        gap: 5px;
+    }
+
+    .etc-wrap-text div,
+    .box-wrap div {
+        width: 100%;
+        border-radius: 5px;
+        margin-bottom: 5px;
+    }
+
+
+    .box-wrap div {
+        padding: 1rem;
+    }
+
+    .traffic-video {
+        width: 90%;
+        padding: 1rem 1rem 2rem 1rem;
+    }
+
+    .traffic-video p {
+        font-size: 1.6rem;
+        word-break: keep-all;
+    }
+
+    .traffic-button button {
+        padding: 7px 46px;
+        font-size: 1.2rem;
+    }
+
+    .taken-area p {
+        font-size: 1.4rem;
+    }
+
+    .traffic-button {
+        justify-content: center;
+    }
+
+    .etc-wrap-text p,
+    .box-wrap p {
+        font-size: 1.5rem;
+        margin-bottom: 2rem;
+    }
+
+
+    .solution .swiper-slide img {
+        width: 100%;
+        height: 100px !important;
+
     }
 
     .text-box-title::after {
-        left: -5px;
-        top: -1px;
+        display: none;
     }
 
 
-
-    .logo {
-        width: 50% !important;
-        height: 14px !important;
-        background-size: cover;
+    .traffic-video {
+        top: 25%;
     }
 
-    .mobil-wrap {
-        width: 50%;
-    }
-
-    .mobil-wrap button {
+    .viedeo-text-box {
         width: 100%;
-        text-align: right;
+        margin: 1rem 0;
+        flex-wrap: nowrap;
+
+        /* border: 1px solid red; */
     }
+
+    .viedeo-text-box p:nth-child(1) {
+        text-align: left;
+    }
+
 
     .box:hover,
     .box-wrap div img:hover {
         transform: scale(1);
     }
 
-    .customized-wrap-title,
-    .etc-wrap-title {
+    .visual-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+
+    .customized-wrap-title {
         margin-top: 50px;
         margin-bottom: 1rem;
     }

         padding-top: 0rem;
     }
 
+    .etc-box-title {
+        font-weight: 900;
+        text-align: center !important;
+        font-size: 2.2rem !important;
+    }
+
+    .etc-box p {
+        text-align: left;
+    }
+
     .box-grid {
         grid-template-columns: 1fr 1fr 1fr !important;
     }
 
-    .box-wrap div div p {
-        font-size: 1.1rem !important;
+
+    .box-wrap img {
+        width: 100%;
+        padding-bottom: 0rem !important;
+        object-fit: contain;
     }
 
+    .solution-title,
+    .traffic-title,
+    .ai-title,
+    .meta-title,
+    .smart-title {
+        margin-bottom: 10px !important;
+    }
 
+    .box-wrap div p {
+        text-align: center;
+        margin: 0 auto;
+        padding: 1px;
+        margin-bottom: 0rem !important;
+        font-size: 1.5rem !important;
+    }
 
+    .etc-box-title {
+        font-weight: 700;
+        text-align: center !important;
+        font-size: 2.2rem !important;
+    }
+
+    .box-wrap div div {
+        display: none;
+        height: 37% !important;
+    }
 
     .etc-wrap-title h1,
     .customized-wrap-title h1 {
-        font-size: 2.8rem !important;
+        font-size: 2.3rem !important;
+        word-break: keep-all;
     }
 
     .etc-wrap-title p,
     .customized-wrap-title p {
-        font-size: 1.2rem !important;
+        font-size: 1.5rem !important;
+        margin-bottom: 2rem;
     }
 
+    .etc-wrap-title {
+        /* height: 100%; */
+        padding-bottom: 10px !important;
+        margin-bottom: 0px !important;
+    }
 
     .customized-box {
         width: 100%;

         width: 79%;
     }
 
+    .Portfolio {
+        width: 100%;
+        height: 100%;
+    }
+
+    .innerSwiper {
+        height: 100%;
+    }
+
+    .innerSwiper .swiper-slide {
+        height: 40%;
+    }
+
     .etc-box-title {
         margin-bottom: 0px;
-        font-size: 1.3rem !important;
-        font-weight: 600;
     }
 
-    summary::-webkit-details-marker {
-        display: none;
+    .etc-box-title p {
+        padding-left: 0px;
     }
-
 
     .etc-box p {
         padding-left: 0px;

         width: 100%;
         height: calc(100% - 182px) !important;
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr;
         justify-content: center;
-        gap: 1px;
-    }
-
-    .slide-solution .text-area {
-        padding: 6rem 2rem;
-    }
-
-    #map1,
-    #map2 {
-        width: 100% !important;
+        text-shadow: 2px 2px 5px #33333354;
+        gap: 5px;
     }
 
     .box1,

     .box5,
     .box6 {
         width: 100%;
-        padding: 10px;
+        font-size: 1.5rem;
         background-size: cover;
         background-position: center;
-        text-shadow: 1px 1px 1px #33333350;
+        padding: 10px !important;
     }
 
     .box2,

         transform: translateY(0px);
     }
 
-    .about-area {
-        flex-wrap: nowrap;
-        width: 100%;
-        height: 10%;
-        margin-bottom: 10px !important;
-        flex-direction: column;
-        gap: 10px !important;
+    .innerSwiper .swiper-slide img{
+        height: 100%;
     }
+
 }
 
 @media all and (min-width:768px) and (max-width:1366px) {

ae7716b

e46385d

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


     /* padding-top: 12rem; */
     text-align: center;
 }
-
+.content{
+    -ms-overflow-style: none;
+    /* 인터넷 익스플로러 */
+    scrollbar-width: none;
+}
+.month{
+    margin-right: 3rem;
+}
 .mobil-wrap {
     display: none;
 }

     width: 200px;
     background-size: contain;
     height: 25px;
-
 
 }
 

     from {
         width: 0;
         opacity: 0;
+        transform: scaleX(0); /* 애니메이션 시작 시 요소의 가로 크기를 0으로 설정 */
+        transform-origin: center;
     }
 
     to {
         width: 100%;
         opacity: 1;
+        transform: scaleX(1); /* 애니메이션 종료 시 요소의 가로 크기를 원래대로 복원 */
+        transform-origin: center;
     }
 }
 

 }
 
 .month {
-    width: 100px;
+    width: 65px;
     font-size: 2rem;
     font-weight: 700;
     text-align: right !important;

 }
 
 .etc-box-title {
+    margin-top: 1rem;
     font-weight: 600;
     text-align: center !important;
-    font-size: 2.2rem !important;
+    font-size: 2rem !important;
 }
 
 .etc-box p {

 
 
 .etc-box p {
-    font-size: 1.8rem;
+    font-size: 1.6rem;
     line-height: 2;
     padding-left: 2rem;
 }

     display: none;
 }
 
-.video-wrap {
+.video-wrap,.di {
     width: 100%;
     height: 100%;
     position: absolute;

 .etc-wrap-title p {
     font-size: 2rem;
 }
-
-.etc-wrap-text p {
-    font-size: 2rem;
-    font-weight: 600;
-    padding: 10px 0;
-}

ae7716b

e46385d

views/index.html

--- views/index.html

+++ views/index.html


 
 
         .text-main {
+            word-break: normal;
             font-weight: 600;
             color: #213f99;
             font-family: 'Pretendard';

         on: {
 
 
-            slideChangeTransitionEnd: function () {
-                if (this.activeIndex === 1) {
-                    $('.text-event').addClass('active');
-                    $('.sub-text').addClass('active');
-                    $('.slide-back').addClass('active');
-                } else {
-                    $('.text-event').removeClass('active');
-                    $('.sub-text').removeClass('active');
-                    $('.slide-back').removeClass('active');
-                }
-                if (this.activeIndex === 2) {
-                    $('.solution-text').addClass('active');
-                    $('.solution-sub-text').addClass('active');
-                    $('.box').addClass('active');
-                } else {
-                    $('.solution-text').removeClass('active');
-                    $('.solution-sub-text').removeClass('active');
-                    $('.box').removeClass('active');
-
-                }
-            },
+       
             init: function () {
                 const slides = document.querySelectorAll('.swiper-slide');
                 slides.forEach(slide => {

ae7716b

e46385d

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


 
 logoDiv.addEventListener('click', function () {
     var currentLocation = window.location.pathname;
-    if (currentLocation === '../index.html' || currentLocation === '/') {
+    if (currentLocation === '/index.html' || currentLocation === '/') {
         // 현재 위치가 메인 페이지인 경우, 페이지를 새로고침하거나 현재 위치를 유지
         window.location.href = '/';
     } else {
         // 다른 페이지에 있는 경우, 메인 페이지로 이동
-        window.location.href = '../index.html';
+        window.location.href = 'index.html';
     }
 });
 

         top: 0;
         left: 0;
         width: 100%;
+        height: 55px;
     }
 
     .logo {

     .header-area {
         width: 100%;
         margin: 0 auto;
-        padding: 10px 30px 7px 30px;
+        padding: 10px 20px 7px 20px;
     }
 
 

         opacity: 0;
         visibility: hidden;
         position: absolute;
-        top: 35px;
+        top: 45px;
         right: 0;
         width: 100%;
         margin: 0 auto;

ae7716b

e46385d

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


             scrollbar-width: none;
             /* 파이어폭스 */
         }
+        .history-box {
+        -ms-overflow-style: none;
+        /* 인터넷 익스플로러 */
+        scrollbar-width: none;
+        /* height: 80% !important; */
+    }
         html,
         body {
             position: relative;

             top: 0;
             z-index: 3;
             border-bottom: 1px solid #ced4da;
-            background-color: white;
+            background-color: white !important;
         }
 
         #header .header .logo {

         .dropdown {
             background-color: #fff !important;
         }
+        .about .content .flex{
+            margin-bottom: 2rem;
+            border-bottom: 1px solid #33333322;
+        }
+.month-text p{
+    word-break: keep-all;
+}
+        
     </style>
 
     <title>TAKENSOFT</title>

 <body>
     <div id="header"></div>
     <div class="swiper mySwiper">
-        <div class="swiper-wrapper">
+        <div class="swiper-wrapper about">
             <div class="swiper-slide about-wrapper">
                 <div class="about-wrap slide-wrap ">
                     <div class="flex">

                                     <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
                                         통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
                                 </div>
-                                <div class=" flex justify-between" style="flex-wrap: nowrap;">
+                                <div class=" flex justify-between business-box" style="flex-wrap: nowrap;">
                                     <div style="width: 20%;">
                                         <p>[대표사례]</p>
                                     </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 class=" flex justify-start business-box" style="flex-wrap: nowrap;">
                                     <div style="width: 20%;">
                                         <p>[대표사례]</p>
                                     </div>

                                 <p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
                                     수요기관 및 기업 확장
                                 </p>
-                                <div class=" flex justify-start" style="flex-wrap: nowrap;">
+                                <div class=" flex justify-start business-box" style="flex-wrap: nowrap;">
                                     <div style="width: 20%;">
                                         <p>[대표사례]</p>
                                     </div>

                         <div class="about-title mb20" style="width: 100%;">
                             <p>History</p>
                         </div>
-                        <div class="flex" style="height: 100%; width: 100%;">
+                        <div class="flex history-area" style="height: 100%; width: 100%; gap: 100px;">
 
                             <div class="years" id="years">
                                 <div class="year tab active-year" data-year="section1">2021</div>

                                     <div class="content section" id="section1">
                                         <div class="flex">
 
-                                            <p class="month mr30">5월</p>
+                                            <p class="month ">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>
+                                            <p class="month ">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>
+                                            <p class="month ">11월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
                                                 <p>· Taken BI Manager v1.0 저작권 등록</p>

                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">12월</p>
+                                            <p class="month ">12월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
                                                 <p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>

 
                                         <!-- 2021년 내용 -->
                                         <div class="flex">
-                                            <p class="month mr30">1월</p>
+                                            <p class="month ">1월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">3월</p>
+                                            <p class="month ">3월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 기업부설연구소 설립</p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">4월</p>
+                                            <p class="month ">4월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">5월</p>
+                                            <p class="month ">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>
+                                            <p class="month ">7월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">9월</p>
+                                            <p class="month ">9월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">10월</p>
+                                            <p class="month ">10월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">12월</p>
+                                            <p class="month ">12월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
                                                 <p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>

                                     <div class="content section" id="section3">
 
                                         <div class="flex">
-                                            <p class="month mr30">1월</p>
+                                            <p class="month ">1월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
                                                 <p>· 복약지도 장치 및 방법 출원사실증명 </p>

                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">2월</p>
+                                            <p class="month ">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>
+                                            <p class="month ">3월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">4월</p>
+                                            <p class="month ">4월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
                                                 <p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>

                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">5월</p>
-                                            <div style="text-align: left;">
+                                            <p class="month ">5월</p>
+                                            <div class="month-text" style="text-align: left;">
                                                 <p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">6월</p>
+                                            <p class="month ">6월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
                                                 <div class="flex">

                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">7월</p>
+                                            <p class="month ">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>
+                                            <p class="month ">8월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
                                                 <p>· 메타버스 기술 관련 출원사실증명</p>

                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">9월</p>
+                                            <p class="month ">9월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
                                                 <p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>

                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">11월</p>
+                                            <p class="month ">11월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· 한기술평가 우수기업 인증 (T-5)</p>
                                                 <p>· 통합 모빌리티 솔루션 저작권 등록</p>

                                             </div>
                                         </div>
                                         <div class="flex">
-                                            <p class="month mr30">12월</p>
+                                            <p class="month ">12월</p>
                                             <div class="month-text" style="text-align: left;">
                                                 <p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
                                                 <p>· 구미시 키워드 분석 용역 (구미시)</p>

ae7716b

e46385d

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html


             padding-bottom: 2rem;
         }
 
-        .etc-wrap-text div p {
+
+        .solution-ani p {
+            font-size: 1.6rem;
+            line-height: 2;
+            padding-left: 2rem;
             text-align: left;
-            padding: 1rem 3rem;
-            font-size: 1.5rem;
+            word-break: keep-all;
         }
 
         .dropdown {

                 <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
                     제공합니다.</p>
             </div>
-            <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap;">
+            <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap; gap: 30px;">
                 <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">
+                <div class=" solution-ani">
                     <img src="../../resources/img/common/smart-img2.png" alt="">
                     <p class="box-wrap-title mb20">시니어 스마트 케어 모니터링 서비스</p>
                     <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>

ae7716b

e46385d

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html


     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
-    <link rel="stylesheet" href="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" />
 
     <style scoped>
         .swiper-slide.on {

 
         }
 
-
+        #header .mobil-menu {
+            background-color: #fff;
+        }
 
         html,
         body {

         }
 
         body {
-            background: linear-gradient(#f8f9fa, #fff, #fff);
 
             font-family: 'Pretendard';
             font-size: 14px;

             padding: 1rem 0;
             z-index: 3;
         }
+        .dropdown {
+                background-color: #fff !important;
+            }
     </style>
 
     <title>TAKENSOFT</title>

                         <p>Traffic Agent</p>
                     </div>
                     <div class="flex justify-end traffic-button ">
-                        <button class="traffic-btn ">영상보기</button>
+                        <button class="traffic-btn traffic-btn1 ">영상보기</button>
                     </div>
-                    <div class=" video-wrap mb20 ">
+                    <div class="video-wrap video-wrap1 mb20 ">
                         <div class="traffic-video">
-                            <div class="flex justify-between mb10 ">
+                            <div class="flex justify-between mb10 viedeo-text-box">
                                 <p>Traffic Agent</p>
-                                <p class="close-btn">x</p>
+                                <p class="close-btn1">x</p>
                             </div>
                             <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
                         </div>

                         </div>
                         <div class="traffic-area flex align-end justify-end solution-web-box"
                             style="height: 100%; width: 100%;">
-                           
+
 
                             <img src="../../resources/img/common/traffic-img.png" alt="" style="height: 356px;">
                             <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">

                         <p>AI 안전통합 횡단보도 관리 솔루션</p>
                     </div>
                     <div class="flex justify-end traffic-button">
-                        <button class="traffic-btn">영상보기</button>
+                        <button class="traffic-btn traffic-btn2">영상보기</button>
                     </div>
 
-                    <div class=" video-wrap">
+                    <div class="video-wrap video-wrap2">
                         <div class="traffic-video">
-                            <div class="flex justify-between mb10 ">
+                            <div class="flex justify-between mb10 viedeo-text-box">
                                 <p>AI 안전통합 횡단보도 관리 솔루션</p>
-                                <p class="close-btn">x</p>
+                                <p class="close-btn2">x</p>
                             </div>
                             <video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
                         </div>

                             </div>
                         </div>
                         <div class="taken-area taken-conteiner flex  align-end" style="gap: 20px; width: 100%;">
-                          
+
                             <div class="text-after solution-area-two">
                                 <p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
                             </div>

                         <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
                     </div>
                     <div class="flex justify-end traffic-button">
-                        <button class="traffic-btn">영상보기</button>
+                        <button class="traffic-btn traffic-btn3">영상보기</button>
                     </div>
 
-                    <div class=" video-wrap">
+                    <div class="video-wrap video-wrap3">
                         <div class="traffic-video">
-                            <div class="flex justify-between  ">
+                            <div class="flex justify-between  viedeo-text-box">
                                 <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
-                                <p class="close-btn">x</p>
+                                <p class="close-btn3">x</p>
                             </div>
                             <video src="../../resources/img/common/hanti.mp4" autostart="false" autoplay="false" muted
                                 controls></video>

                             </div>
                         </div>
                         <div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
-                           
-                            <img src="../../resources/img/common/meta-img.png" alt="" class="mb30"
-                                >
+
+                            <img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
                             <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
                                 <p>가상과 현실공간을<br>연결하는 플랫폼</p>
                                 <p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>

 
 
 <script>
+    function updateSwiperStylesheet() {
+        // 화면 너비가 750px을 초과하는지 확인
+        if (window.innerWidth > 750) {
+            // 이미 해당 스타일시트가 추가되었는지 확인
+            var isSwiperCssAdded = document.querySelector('link[href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"]');
+            if (!isSwiperCssAdded) {
+                // <head> 요소 선택
+                var head = document.head;
+                // <link> 요소 생성
+                var link = document.createElement("link");
+                // <link> 요소에 속성 설정
+                link.type = "text/css";
+                link.rel = "stylesheet";
+                link.href = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
+                // 생성한 <link>를 <head>에 추가
+                head.appendChild(link);
+            }
+        } else {
+            // 화면 너비가 750px을 초과하지 않을 경우, 스타일시트 제거
+            var swiperCss = document.querySelector('link[href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"]');
+            if (swiperCss) {
+                swiperCss.parentNode.removeChild(swiperCss);
+            }
+        }
+    }
 
+    // 페이지 로드 시 스타일시트 업데이트
+    updateSwiperStylesheet();
+
+    // 창 크기가 변경될 때마다 스타일시트 업데이트
+    window.addEventListener('resize', updateSwiperStylesheet);
 
     var swiper = new Swiper(".mySwiper", {
         cssMode: true,
         direction: "vertical",
         slidesPerView: 1,
-        spaceBetween: 30,
+        spaceBetween: 0,
         mousewheel: {
             eventsTarget: '.swiper-slide'
         },

     $(function () {
         $("#header").load("../layout/Header.html");
         $("#footer").load("../layout/footer.html");
-        // $("#footer").hide();
         $('.video-wrap').hide();
 
     });
 
-    $('.traffic-btn').click(function () {
-        $('.video-wrap').show();
 
-
+    $('.close-btn1').click(function () {
+        $('.video-wrap1').hide();
     });
-    $('.close-btn').click(function () {
+
+    $('.close-btn2').click(function () {
+        $('.video-wrap2').hide();
+    });
+
+    $('.close-btn3').click(function () {
+        $('.video-wrap3').hide();
+    });
+    $('.traffic-btn1').click(function () {
         $('.video-wrap').hide();
+        $('.video-wrap1').show();
+    });
 
+    $('.traffic-btn2').click(function () {
+        $('.video-wrap').hide();
+        $('.video-wrap2').show();
+    });
 
+    $('.traffic-btn3').click(function () {
+        $('.video-wrap').hide();
+        $('.video-wrap3').show();
     });
 
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -8,7 +8,14 @@
8	8	/* padding-top: 12rem; */
9	9	text-align: center;
10	10	}
11		-
	11	+.content{
	12	+ -ms-overflow-style: none;
	13	+ /* 인터넷 익스플로러 */
	14	+ scrollbar-width: none;
	15	+}
	16	+.month{
	17	+ margin-right: 3rem;
	18	+}
12	19	.mobil-wrap {
13	20	display: none;
14	21	}
...	...	@@ -36,7 +43,6 @@
36	43	width: 200px;
37	44	background-size: contain;
38	45	height: 25px;
39		-
40	46
41	47	}
42	48
...	...	@@ -73,11 +79,15 @@
73	79	from {
74	80	width: 0;
75	81	opacity: 0;
	82	+ transform: scaleX(0); /* 애니메이션 시작 시 요소의 가로 크기를 0으로 설정 */
	83	+ transform-origin: center;
76	84	}
77	85
78	86	to {
79	87	width: 100%;
80	88	opacity: 1;
	89	+ transform: scaleX(1); /* 애니메이션 종료 시 요소의 가로 크기를 원래대로 복원 */
	90	+ transform-origin: center;
81	91	}
82	92	}
83	93
...	...	@@ -1301,7 +1311,7 @@
1301	1311	}
1302	1312
1303	1313	.month {
1304		- width: 100px;
	1314	+ width: 65px;
1305	1315	font-size: 2rem;
1306	1316	font-weight: 700;
1307	1317	text-align: right !important;
...	...	@@ -1389,9 +1399,10 @@
1389	1399	}
1390	1400
1391	1401	.etc-box-title {
	1402	+ margin-top: 1rem;
1392	1403	font-weight: 600;
1393	1404	text-align: center !important;
1394		- font-size: 2.2rem !important;
	1405	+ font-size: 2rem !important;
1395	1406	}
1396	1407
1397	1408	.etc-box p {
...	...	@@ -1406,7 +1417,7 @@
1406	1417
1407	1418
1408	1419	.etc-box p {
1409		- font-size: 1.8rem;
	1420	+ font-size: 1.6rem;
1410	1421	line-height: 2;
1411	1422	padding-left: 2rem;
1412	1423	}
...	...	@@ -1420,7 +1431,7 @@
1420	1431	display: none;
1421	1432	}
1422	1433
1423		-.video-wrap {
	1434	+.video-wrap,.di {
1424	1435	width: 100%;
1425	1436	height: 100%;
1426	1437	position: absolute;
...	...	@@ -1468,9 +1479,3 @@
1468	1479	.etc-wrap-title p {
1469	1480	font-size: 2rem;
1470	1481	}
1471		-
1472		-.etc-wrap-text p {
1473		- font-size: 2rem;
1474		- font-weight: 600;
1475		- padding: 10px 0;
1476		-} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -144,6 +144,7 @@
144	144
145	145
146	146	.text-main {
	147	+ word-break: normal;
147	148	font-weight: 600;
148	149	color: #213f99;
149	150	font-family: 'Pretendard';
...	...	@@ -454,27 +455,7 @@
454	455	on: {
455	456
456	457
457		- slideChangeTransitionEnd: function () {
458		- if (this.activeIndex === 1) {
459		- $('.text-event').addClass('active');
460		- $('.sub-text').addClass('active');
461		- $('.slide-back').addClass('active');
462		- } else {
463		- $('.text-event').removeClass('active');
464		- $('.sub-text').removeClass('active');
465		- $('.slide-back').removeClass('active');
466		- }
467		- if (this.activeIndex === 2) {
468		- $('.solution-text').addClass('active');
469		- $('.solution-sub-text').addClass('active');
470		- $('.box').addClass('active');
471		- } else {
472		- $('.solution-text').removeClass('active');
473		- $('.solution-sub-text').removeClass('active');
474		- $('.box').removeClass('active');
475		-
476		- }
477		- },
	458	+
478	459	init: function () {
479	460	const slides = document.querySelectorAll('.swiper-slide');
480	461	slides.forEach(slide => {

...	...	@@ -92,12 +92,12 @@
92	92
93	93	logoDiv.addEventListener('click', function () {
94	94	var currentLocation = window.location.pathname;
95		- if (currentLocation === '../index.html' \|\| currentLocation === '/') {
	95	+ if (currentLocation === '/index.html' \|\| currentLocation === '/') {
96	96	// 현재 위치가 메인 페이지인 경우, 페이지를 새로고침하거나 현재 위치를 유지
97	97	window.location.href = '/';
98	98	} else {
99	99	// 다른 페이지에 있는 경우, 메인 페이지로 이동
100		- window.location.href = '../index.html';
	100	+ window.location.href = 'index.html';
101	101	}
102	102	});
103	103
...	...	@@ -126,6 +126,7 @@
126	126	top: 0;
127	127	left: 0;
128	128	width: 100%;
	129	+ height: 55px;
129	130	}
130	131
131	132	.logo {
...	...	@@ -142,7 +143,7 @@
142	143	.header-area {
143	144	width: 100%;
144	145	margin: 0 auto;
145		- padding: 10px 30px 7px 30px;
	146	+ padding: 10px 20px 7px 20px;
146	147	}
147	148
148	149
...	...	@@ -170,7 +171,7 @@
170	171	opacity: 0;
171	172	visibility: hidden;
172	173	position: absolute;
173		- top: 35px;
	174	+ top: 45px;
174	175	right: 0;
175	176	width: 100%;
176	177	margin: 0 auto;

...	...	@@ -100,10 +100,13 @@
100	100	padding-bottom: 2rem;
101	101	}
102	102
103		- .etc-wrap-text div p {
	103	+
	104	+ .solution-ani p {
	105	+ font-size: 1.6rem;
	106	+ line-height: 2;
	107	+ padding-left: 2rem;
104	108	text-align: left;
105		- padding: 1rem 3rem;
106		- font-size: 1.5rem;
	109	+ word-break: keep-all;
107	110	}
108	111
109	112	.dropdown {
...	...	@@ -128,14 +131,14 @@
128	131	<p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
129	132	제공합니다.</p>
130	133	</div>
131		- <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap;">
	134	+ <div class="etc-wrap-text flex justify-between" style="flex-wrap: nowrap; gap: 30px;">
132	135	<div class="solution-ani">
133	136	<img src="../../resources/img/common/smart-img3.png" alt="">
134	137	<p class="box-wrap-title mb20">AI 안전통합 횡단보도 플랫폼</p>
135	138	<p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
136	139	<p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
137	140	</div>
138		- <div class="smart-img solution-ani">
	141	+ <div class=" solution-ani">
139	142	<img src="../../resources/img/common/smart-img2.png" alt="">
140	143	<p class="box-wrap-title mb20">시니어 스마트 케어 모니터링 서비스</p>
141	144	<p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>

...	...	@@ -20,10 +20,10 @@
20	20	height: calc(100% - 47px);
21	21	}
22	22
23		-.content {
	23	+/* .content {
24	24	width: 100%;
25	25	overflow-y: auto;
26		-}
	26	+} */
27	27
28	28	.content:last-child {
29	29	margin-bottom: 0;
...	...	@@ -35,8 +35,8 @@
35	35
36	36	.left-content,
37	37	.right-content,
38		-.row,
39		-.content {
	38	+.row
	39	+{
40	40	padding: 15px 0;
41	41	border-radius: 10px;
42	42	background-color: #fff;

...	...	@@ -21,6 +21,12 @@
21	21	scrollbar-width: none;
22	22	/* 파이어폭스 */
23	23	}
	24	+ .history-box {
	25	+ -ms-overflow-style: none;
	26	+ /* 인터넷 익스플로러 */
	27	+ scrollbar-width: none;
	28	+ /* height: 80% !important; */
	29	+ }
24	30	html,
25	31	body {
26	32	position: relative;
...	...	@@ -80,7 +86,7 @@
80	86	top: 0;
81	87	z-index: 3;
82	88	border-bottom: 1px solid #ced4da;
83		- background-color: white;
	89	+ background-color: white !important;
84	90	}
85	91
86	92	#header .header .logo {
...	...	@@ -100,6 +106,14 @@
100	106	.dropdown {
101	107	background-color: #fff !important;
102	108	}
	109	+ .about .content .flex{
	110	+ margin-bottom: 2rem;
	111	+ border-bottom: 1px solid #33333322;
	112	+ }
	113	+.month-text p{
	114	+ word-break: keep-all;
	115	+}
	116	+
103	117	</style>
104	118
105	119	<title>TAKENSOFT</title>
...	...	@@ -108,7 +122,7 @@
108	122	<body>
109	123	<div id="header"></div>
110	124	<div class="swiper mySwiper">
111		- <div class="swiper-wrapper">
	125	+ <div class="swiper-wrapper about">
112	126	<div class="swiper-slide about-wrapper">
113	127	<div class="about-wrap slide-wrap ">
114	128	<div class="flex">
...	...	@@ -171,7 +185,7 @@
171	185	<p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 지속적인 품질 모니터링을
172	186	통해 제품의 안전성을 유지, 잠재적인 문제점을 신속하게 식별하며 해결</p>
173	187	</div>
174		- <div class=" flex justify-between" style="flex-wrap: nowrap;">
	188	+ <div class=" flex justify-between business-box" style="flex-wrap: nowrap;">
175	189	<div style="width: 20%;">
176	190	<p>[대표사례]</p>
177	191	</div>
...	...	@@ -198,7 +212,7 @@
198	212	<div class="slideTextDtail">
199	213	<p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· 빅데이터 전용 시각화 솔루션을
200	214	통해 고객사 최적화 UI 도출 </p>
201		- <div class=" flex justify-start" style="flex-wrap: nowrap;">
	215	+ <div class=" flex justify-start business-box" style="flex-wrap: nowrap;">
202	216	<div style="width: 20%;">
203	217	<p>[대표사례]</p>
204	218	</div>
...	...	@@ -226,7 +240,7 @@
226	240	<p style="border-bottom: 2px dotted #333; padding-bottom: 1rem;">· R&D, 용역 등의 사업을 통해
227	241	수요기관 및 기업 확장
228	242	</p>
229		- <div class=" flex justify-start" style="flex-wrap: nowrap;">
	243	+ <div class=" flex justify-start business-box" style="flex-wrap: nowrap;">
230	244	<div style="width: 20%;">
231	245	<p>[대표사례]</p>
232	246	</div>
...	...	@@ -254,7 +268,7 @@
254	268	<div class="about-title mb20" style="width: 100%;">
255	269	<p>History</p>
256	270	</div>
257		- <div class="flex" style="height: 100%; width: 100%;">
	271	+ <div class="flex history-area" style="height: 100%; width: 100%; gap: 100px;">
258	272
259	273	<div class="years" id="years">
260	274	<div class="year tab active-year" data-year="section1">2021</div>
...	...	@@ -268,7 +282,7 @@
268	282	<div class="content section" id="section1">
269	283	<div class="flex">
270	284
271		- <p class="month mr30">5월</p>
	285	+ <p class="month ">5월</p>
272	286	<div class="month-text" style="text-align: left;">
273	287	<p>· 주식회사 테이큰 소프트 설립</p>
274	288	<p>· 영천시 데이터 활용 기본 계획 수립 용역 (영천시)</p>
...	...	@@ -276,14 +290,14 @@
276	290	</div>
277	291	</div>
278	292	<div class="flex">
279		- <p class="month mr30">10월</p>
	293	+ <p class="month ">10월</p>
280	294	<div class="month-text text-section" style="text-align: left;">
281	295	<p>· 소프트웨어 기업 등록</p>
282	296	<img src="../../resources/img/common/history-img1.png" alt="">
283	297	</div>
284	298	</div>
285	299	<div class="flex">
286		- <p class="month mr30">11월</p>
	300	+ <p class="month ">11월</p>
287	301	<div class="month-text" style="text-align: left;">
288	302	<p>· 김천시 무더위 쉼터 선정을 위한 빅데이터 분석 용역 (김천시) </p>
289	303	<p>· Taken BI Manager v1.0 저작권 등록</p>
...	...	@@ -291,7 +305,7 @@
291	305	</div>
292	306	</div>
293	307	<div class="flex">
294		- <p class="month mr30">12월</p>
	308	+ <p class="month ">12월</p>
295	309	<div class="month-text" style="text-align: left;">
296	310	<p>· 어린이 보호구역 도로 주행 데이터 (포항테크노파크)</p>
297	311	<p>· Taken BI Manager GS(Good Sofrware) 인증 1등급 획득</p>
...	...	@@ -311,50 +325,50 @@
311	325
312	326	<!-- 2021년 내용 -->
313	327	<div class="flex">
314		- <p class="month mr30">1월</p>
	328	+ <p class="month ">1월</p>
315	329	<div class="month-text" style="text-align: left;">
316	330	<p>· 구미시 공공데이터 기업 매칭 지원사업 (구미시)</p>
317	331	</div>
318	332	</div>
319	333	<div class="flex">
320		- <p class="month mr30">3월</p>
	334	+ <p class="month ">3월</p>
321	335	<div class="month-text" style="text-align: left;">
322	336	<p>· 기업부설연구소 설립</p>
323	337	</div>
324	338	</div>
325	339	<div class="flex">
326		- <p class="month mr30">4월</p>
	340	+ <p class="month ">4월</p>
327	341	<div class="month-text" style="text-align: left;">
328	342	<p>· 상주시 재난지원금 신청 프로그램 개발 (상주시)</p>
329	343	</div>
330	344	</div>
331	345	<div class="flex">
332		- <p class="month mr30">5월</p>
	346	+ <p class="month ">5월</p>
333	347	<div class="month-text" style="text-align: left;">
334	348	<p>· 대구광역시 북구 데이터로 보는 북구 콘텐츠 구축 (대구광역시 북구)</p>
335	349	<p>· 영천시 공공데이터 품질관리 용역 (영천시)</p>
336	350	</div>
337	351	</div>
338	352	<div class="flex">
339		- <p class="month mr30">7월</p>
	353	+ <p class="month ">7월</p>
340	354	<div class="month-text" style="text-align: left;">
341	355	<p>· 영천시 공공데이터 기업 매칭 지원사업 (영천시)</p>
342	356	</div>
343	357	</div>
344	358	<div class="flex">
345		- <p class="month mr30">9월</p>
	359	+ <p class="month ">9월</p>
346	360	<div class="month-text" style="text-align: left;">
347	361	<p>· 상주시 데이터 수집, 연계, 분석 및 시각화 솔루션 공급</p>
348	362	</div>
349	363	</div>
350	364	<div class="flex">
351		- <p class="month mr30">10월</p>
	365	+ <p class="month ">10월</p>
352	366	<div class="month-text" style="text-align: left;">
353	367	<p>· 데이터 관리 및 분석 솔루션 구매 (상주시) </p>
354	368	</div>
355	369	</div>
356	370	<div class="flex">
357		- <p class="month mr30">12월</p>
	371	+ <p class="month ">12월</p>
358	372	<div class="month-text" style="text-align: left;">
359	373	<p>· 데이터 관리 및 분석 솔루션 연계 용역 (상주시) </p>
360	374	<p>· 상주시 데이터 활용 기본계획 용역 (상주시) </p>
...	...	@@ -373,7 +387,7 @@
373	387	<div class="content section" id="section3">
374	388
375	389	<div class="flex">
376		- <p class="month mr30">1월</p>
	390	+ <p class="month ">1월</p>
377	391	<div class="month-text" style="text-align: left;">
378	392	<p>· 행정안전부 2023년 정부혁신 웹사이트 기능개선 및 유지관리 사업 수주 </p>
379	393	<p>· 복약지도 장치 및 방법 출원사실증명 </p>
...	...	@@ -387,20 +401,20 @@
387	401	</div>
388	402	</div>
389	403	<div class="flex">
390		- <p class="month mr30">2월</p>
	404	+ <p class="month ">2월</p>
391	405	<div class="month-text" style="text-align: left;">
392	406	<p>· 한국가스공사 상용소프트웨어 유지관리(통합재고관리시스템 데이터분석) (한국가스공사) </p>
393	407	<p>· 대구광역시 AI 안전통합 횡단보도 플랫폼 구축 계약 </p>
394	408	</div>
395	409	</div>
396	410	<div class="flex">
397		- <p class="month mr30">3월</p>
	411	+ <p class="month ">3월</p>
398	412	<div class="month-text" style="text-align: left;">
399	413	<p>· AI 안전통합 횡단보도 플랫폼 구축 용역 (대구광역시) </p>
400	414	</div>
401	415	</div>
402	416	<div class="flex">
403		- <p class="month mr30">4월</p>
	417	+ <p class="month ">4월</p>
404	418	<div class="month-text" style="text-align: left;">
405	419	<p>· G밸리 기록물 텍스트 분석 및 콘텐츠 개발 사업 (서울특별시) </p>
406	420	<p>· 포항테크노파크 SW융합제품 상용화지원사업 데이터 품질관리 사업 수주 </p>
...	...	@@ -410,13 +424,13 @@
410	424	</div>
411	425	</div>
412	426	<div class="flex">
413		- <p class="month mr30">5월</p>
414		- <div style="text-align: left;">
	427	+ <p class="month ">5월</p>
	428	+ <div class="month-text" style="text-align: left;">
415	429	<p>· 영천시 맞춤형 데이터 분석사업 (영천시) </p>
416	430	</div>
417	431	</div>
418	432	<div class="flex">
419		- <p class="month mr30">6월</p>
	433	+ <p class="month ">6월</p>
420	434	<div class="month-text" style="text-align: left;">
421	435	<p>· 정보통신공사업 면허 획득, 벤처기업 인증 </p>
422	436	<div class="flex">
...	...	@@ -426,14 +440,14 @@
426	440	</div>
427	441	</div>
428	442	<div class="flex">
429		- <p class="month mr30">7월</p>
	443	+ <p class="month ">7월</p>
430	444	<div class="month-text" style="text-align: left;">
431	445	<p>· 공공데이터 품질 진단 강화 컨설팅 (상주시)</p>
432	446	<p>· 정부혁신 웹사이트 기능개선 및 유지관리 (행정안전부)</p>
433	447	</div>
434	448	</div>
435	449	<div class="flex">
436		- <p class="month mr30">8월</p>
	450	+ <p class="month ">8월</p>
437	451	<div class="month-text" style="text-align: left;">
438	452	<p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
439	453	<p>· 메타버스 기술 관련 출원사실증명</p>
...	...	@@ -441,7 +455,7 @@
441	455	</div>
442	456	</div>
443	457	<div class="flex">
444		- <p class="month mr30">9월</p>
	458	+ <p class="month ">9월</p>
445	459	<div class="month-text" style="text-align: left;">
446	460	<p>· 한국가스공사 2023 대구·경북 스타트업 페스티벌 공대스타챌린지 대상 수상</p>
447	461	<p>· SW융합클러스터2.0 SW융합제품 상용화 지원사업 데이터 컨설팅 및 품질관리 (포항테크노파크)</p>
...	...	@@ -451,7 +465,7 @@
451	465	</div>
452	466	</div>
453	467	<div class="flex">
454		- <p class="month mr30">11월</p>
	468	+ <p class="month ">11월</p>
455	469	<div class="month-text" style="text-align: left;">
456	470	<p>· 한기술평가 우수기업 인증 (T-5)</p>
457	471	<p>· 통합 모빌리티 솔루션 저작권 등록</p>
...	...	@@ -462,7 +476,7 @@
462	476	</div>
463	477	</div>
464	478	<div class="flex">
465		- <p class="month mr30">12월</p>
	479	+ <p class="month ">12월</p>
466	480	<div class="month-text" style="text-align: left;">
467	481	<p>· DGM 전자정보기기사업단 지역 기업 운영 활성화를 위한 플랫폼 구축 사업 수주</p>
468	482	<p>· 구미시 키워드 분석 용역 (구미시)</p>

...	...	@@ -6,14 +6,12 @@
6	6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	7	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
8	8	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
9		- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
10	9	<link rel="stylesheet" href="../../resources/css/reset.css">
11	10	<link rel="stylesheet" href="../../resources/css/style.css">
12	11	<link rel="stylesheet" href="../../resources/css/component.css">
13	12	<link rel="stylesheet" href="../../resources/css/common.css">
14	13	<link rel="stylesheet" href="../../resources/css/responsive.css">
15	14
16		- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
17	15
18	16	<style scoped>
19	17	.swiper-slide.on {
...	...	@@ -56,7 +54,9 @@
56	54
57	55	}
58	56
59		-
	57	+ #header .mobil-menu {
	58	+ background-color: #fff;
	59	+ }
60	60
61	61	html,
62	62	body {
...	...	@@ -65,7 +65,6 @@
65	65	}
66	66
67	67	body {
68		- background: linear-gradient(#f8f9fa, #fff, #fff);
69	68
70	69	font-family: 'Pretendard';
71	70	font-size: 14px;
...	...	@@ -97,6 +96,9 @@
97	96	padding: 1rem 0;
98	97	z-index: 3;
99	98	}
	99	+ .dropdown {
	100	+ background-color: #fff !important;
	101	+ }
100	102	</style>
101	103
102	104	<title>TAKENSOFT</title>
...	...	@@ -160,13 +162,13 @@
160	162	<p>Traffic Agent</p>
161	163	</div>
162	164	<div class="flex justify-end traffic-button ">
163		- <button class="traffic-btn ">영상보기</button>
	165	+ <button class="traffic-btn traffic-btn1 ">영상보기</button>
164	166	</div>
165		- <div class=" video-wrap mb20 ">
	167	+ <div class="video-wrap video-wrap1 mb20 ">
166	168	<div class="traffic-video">
167		- <div class="flex justify-between mb10 ">
	169	+ <div class="flex justify-between mb10 viedeo-text-box">
168	170	<p>Traffic Agent</p>
169		- <p class="close-btn">x</p>
	171	+ <p class="close-btn1">x</p>
170	172	</div>
171	173	<video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
172	174	</div>
...	...	@@ -201,7 +203,7 @@
201	203	</div>
202	204	<div class="traffic-area flex align-end justify-end solution-web-box"
203	205	style="height: 100%; width: 100%;">
204		-
	206	+
205	207
206	208	<img src="../../resources/img/common/traffic-img.png" alt="" style="height: 356px;">
207	209	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
...	...	@@ -219,14 +221,14 @@
219	221	<p>AI 안전통합 횡단보도 관리 솔루션</p>
220	222	</div>
221	223	<div class="flex justify-end traffic-button">
222		- <button class="traffic-btn">영상보기</button>
	224	+ <button class="traffic-btn traffic-btn2">영상보기</button>
223	225	</div>
224	226
225		- <div class=" video-wrap">
	227	+ <div class="video-wrap video-wrap2">
226	228	<div class="traffic-video">
227		- <div class="flex justify-between mb10 ">
	229	+ <div class="flex justify-between mb10 viedeo-text-box">
228	230	<p>AI 안전통합 횡단보도 관리 솔루션</p>
229		- <p class="close-btn">x</p>
	231	+ <p class="close-btn2">x</p>
230	232	</div>
231	233	<video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
232	234	</div>
...	...	@@ -241,7 +243,7 @@
241	243	</div>
242	244	</div>
243	245	<div class="taken-area taken-conteiner flex align-end" style="gap: 20px; width: 100%;">
244		-
	246	+
245	247	<div class="text-after solution-area-two">
246	248	<p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
247	249	</div>
...	...	@@ -275,14 +277,14 @@
275	277	<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
276	278	</div>
277	279	<div class="flex justify-end traffic-button">
278		- <button class="traffic-btn">영상보기</button>
	280	+ <button class="traffic-btn traffic-btn3">영상보기</button>
279	281	</div>
280	282
281		- <div class=" video-wrap">
	283	+ <div class="video-wrap video-wrap3">
282	284	<div class="traffic-video">
283		- <div class="flex justify-between ">
	285	+ <div class="flex justify-between viedeo-text-box">
284	286	<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
285		- <p class="close-btn">x</p>
	287	+ <p class="close-btn3">x</p>
286	288	</div>
287	289	<video src="../../resources/img/common/hanti.mp4" autostart="false" autoplay="false" muted
288	290	controls></video>
...	...	@@ -312,9 +314,8 @@
312	314	</div>
313	315	</div>
314	316	<div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
315		-
316		- <img src="../../resources/img/common/meta-img.png" alt="" class="mb30"
317		- >
	317	+
	318	+ <img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
318	319	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
319	320	<p>가상과 현실공간을<br>연결하는 플랫폼</p>
320	321	<p>지역 기반 문화적 자원과<br>연계한 콘텐츠 제공</p>
...	...	@@ -384,13 +385,43 @@
384	385
385	386
386	387	<script>
	388	+ function updateSwiperStylesheet() {
	389	+ // 화면 너비가 750px을 초과하는지 확인
	390	+ if (window.innerWidth > 750) {
	391	+ // 이미 해당 스타일시트가 추가되었는지 확인
	392	+ var isSwiperCssAdded = document.querySelector('link[href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"]');
	393	+ if (!isSwiperCssAdded) {
	394	+ // <head> 요소 선택
	395	+ var head = document.head;
	396	+ // <link> 요소 생성
	397	+ var link = document.createElement("link");
	398	+ // <link> 요소에 속성 설정
	399	+ link.type = "text/css";
	400	+ link.rel = "stylesheet";
	401	+ link.href = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
	402	+ // 생성한 <link>를 <head>에 추가
	403	+ head.appendChild(link);
	404	+ }
	405	+ } else {
	406	+ // 화면 너비가 750px을 초과하지 않을 경우, 스타일시트 제거
	407	+ var swiperCss = document.querySelector('link[href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"]');
	408	+ if (swiperCss) {
	409	+ swiperCss.parentNode.removeChild(swiperCss);
	410	+ }
	411	+ }
	412	+ }
387	413
	414	+ // 페이지 로드 시 스타일시트 업데이트
	415	+ updateSwiperStylesheet();
	416	+
	417	+ // 창 크기가 변경될 때마다 스타일시트 업데이트
	418	+ window.addEventListener('resize', updateSwiperStylesheet);
388	419
389	420	var swiper = new Swiper(".mySwiper", {
390	421	cssMode: true,
391	422	direction: "vertical",
392	423	slidesPerView: 1,
393		- spaceBetween: 30,
	424	+ spaceBetween: 0,
394	425	mousewheel: {
395	426	eventsTarget: '.swiper-slide'
396	427	},
...	...	@@ -435,20 +466,35 @@
435	466	$(function () {
436	467	$("#header").load("../layout/Header.html");
437	468	$("#footer").load("../layout/footer.html");
438		- // $("#footer").hide();
439	469	$('.video-wrap').hide();
440	470
441	471	});
442	472
443		- $('.traffic-btn').click(function () {
444		- $('.video-wrap').show();
445	473
446		-
	474	+ $('.close-btn1').click(function () {
	475	+ $('.video-wrap1').hide();
447	476	});
448		- $('.close-btn').click(function () {
	477	+
	478	+ $('.close-btn2').click(function () {
	479	+ $('.video-wrap2').hide();
	480	+ });
	481	+
	482	+ $('.close-btn3').click(function () {
	483	+ $('.video-wrap3').hide();
	484	+ });
	485	+ $('.traffic-btn1').click(function () {
449	486	$('.video-wrap').hide();
	487	+ $('.video-wrap1').show();
	488	+ });
450	489
	490	+ $('.traffic-btn2').click(function () {
	491	+ $('.video-wrap').hide();
	492	+ $('.video-wrap2').show();
	493	+ });
451	494
	495	+ $('.traffic-btn3').click(function () {
	496	+ $('.video-wrap').hide();
	497	+ $('.video-wrap3').show();
452	498	});
453	499
454	500	</script>

Delete comment