Commit @72464999f9b164d3506ebc169bed8fd9c034b121

mycoms 2024-04-04

240404 김하영

@72464999f9b164d3506ebc169bed8fd9c034b121

6c43e06

7246499

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css


     .traffic-title p,
     .ai-title p,
     .meta-title p,
-    .smart-title p ,.etc-wrap-title p{
+    .smart-title p,
+    .etc-wrap-title p {
         font-size: 1.5rem;
     }
 

         justify-content: space-between;
     }
 
-    .solution-box div {
-        height: 50px !important;
-        background-size: 20px;
-    }
+
 
     .box:hover {
         transform: scale(1);

         margin: 0;
         background-color: #fff;
     }
-    
+
     .mobil-menu ul li ul li a {
         font-weight: 500;
         color: #333;
         font-size: 1.2rem !important;
     }
-    
+
     nav>ul {
         background-color: #fff;
         border-bottom: 1px solid #333;
     }
-    
+
+    nav ul li {
+        color: #333 !important;
+        width: 100% !important;
+    }
+
+    .mobile-menu-button {
+        transform: translateX(10px);
+    }
+
+    .mobile-menu-button,
+    .mobile-menu-button-close {
+        font-size: 2rem;
+        color: #333;
+        height: 29px;
+        width: 29px;
+    }
+
+    .swiper {
+        width: 50%;
+        height: 100%;
+        padding: 2rem;
+    }
+
+    .swiper-slide {
+        width: 100%;
+
+    }
+
+    .slide-wrap {
+        width: 100%;
+        height: 100% !important;
+    }
+
+    .text-area {
+        width: 100% !important;
+        height: 100% !important;
+        padding: 2rem;
+    }
+
+    .innerSwiper-title {
+        font-size: 1.5rem;
+    }
+
+    .innerSwiper .swiper-slide {
+        width: 100% !important;
+        padding: 10px;
+    }
+    .sub-text-area{
+        margin-bottom: 1rem !important;
+    }
+
+    .marketing-wrapper {
+        width: 100%;
+        padding: 1rem;
+        margin: 0 auto;
+    }
+
+    .marketing-wrap-title h1::after {
+        width: 20px;
+        height: 20px;
+        background-size: 20px;
+        transform: translateX(-50%);
+    }
+
+    .marketing-area {
+        width: 100%;
+        grid-template-columns: 1fr;
+    }
+
+    .marketing-title {
+        font-size: 1.8rem;
+    }
+
+    #contentDaeguBranch {
+        width: 100%;
+        height: 100%;
+    }
+
+    .root_daum_roughmap_landing {
+        width: 100% !important;
+        height: 50% !important;
+    }
+
+    .root_daum_roughmap .wrap_map {
+        height: 200px !important;
+    }
+
+    .secen-map {
+        width: 100% !important;
+        height: 50% !important;
+    }
+
+    .secen-map div {
+        height: 100% !important;
+    }
+
+    .secen-map .map {
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover;
+
+    }
+
+
+
+    .address-tile {
+        width: 100%;
+        font-size: 1.2rem;
+    }
+
+    .address-subtitle {
+        font-size: 1.1rem !important;
+    }
+
+    .address-tile::after {
+        display: none;
+    }
+
+    .map-btn {
+        justify-content: space-between;
+    }
+
+    .map-btn button {
+        /* width: 40%; */
+        font-size: 1.2rem;
+    }
+
+    .address-box {
+        width: 100%;
+    }
+
+    #footer {
+        width: 100%;
+    }
+
+    .footer-wrap {
+        width: 100%;
+    }
+
+    .footer-text div {
+        flex-wrap: wrap;
+    }
+
+    .footer-text div p,
+    .footer-text p {
+        width: 100%;
+        padding-left: 0px !important;
+    }
+
+    .about-wrap {
+        width: 100%;
+        padding: 0px;
+        padding-top: 50px;
+    }
+
+    .about-title-sub {
+        font-size: 1.2rem;
+    }
+
+    .about-area {
+        flex-wrap: nowrap;
+        width: 100%;
+        height: 10%;
+        flex-direction: column;
+        gap: 10px !important;
+    }
+
+    .about-area p {
+        font-size: 1.2rem;
+    }
+
+    .about-radius,
+    .about-radius-bottom,
+    .about-radius-right,
+    .about-radius-left,
+    .about-radius-bottom-left,
+    .about-radius-bottom-right {
+        width: 100%;
+        height: 100%;
+        padding: 0.5rem;
+        border-radius: 5px !important;
+    }
+
+    .about-radius-left::after,
+    .about-radius-bottom-right::after,
+    .about-radius-bottom-left::after,
+    .about-radius::after,
+    .about-radius-right::after {
+        display: none;
+    }
+
+    .about-title {
+        margin-top: 60px;
+        height: 20%;
+        margin-bottom: 1rem !important;
+    }
+
+    .about-text {
+        font-size: 1.5rem;
+    }
+
+    .silde-box {
+        height: 60%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .silde-box .accordion {
+        height: 10px;
+        padding: 0.5rem;
+    }
+
+    .silde-box .slideImg {
+        display: none;
+    }
+
+    .slideText {
+        padding: 10px;
+    }
+
+    .slideText p:last-child,
+    .slideTextDtail p {
+        font-size: 1.2rem;
+    }
+
+    .slideText p:first-child {
+        font-size: 1.2rem;
+    }
+
+    .slideTextDtail p {
+        font-size: 1rem;
+        border-bottom: 0px !important;
+        margin-bottom: 0.5rem;
+    }
+
+    .slideTextDtail div div {
+        display: none;
+    }
+
+
+
+    .about img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .about-vision-box {
+        height: 200px;
+    }
+
+    .about-vision-box img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .timeline {
+        width: 100%;
+    }
+
+    .years {
+        display: flex;
+        width: 100%;
+        border-bottom: 1px solid #333;
+    }
+
+    .active-year {
+        font-size: 2rem;
+    }
+
+    .contents {
+        text-align: center;
+
+    }
+
+    .month {
+        text-align: left !important;
+    }
+
+    .month-text div {
+        width: 100%;
+        flex-wrap: nowrap;
+    }
+
+    .taken-wrap-box {
+        width: 100% !important;
+        gap: 5px !important;
+        flex-direction: column;
+    }
+
+    .taken-area {
+        width: 100%;
+        height: 60% !important;
+        align-items: start;
+        gap: 5px !important;
+    }
+
+    .taken-area img,
+    .traffic-area img,
+    .ai-area img {
+        opacity: 0;
+    }
+
+    .solution-title,
+    .traffic-title,
+    .ai-title,
+    .meta-title,
+    .smart-title {
+        height: 15%;
+        padding-top: 5rem;
+        margin-bottom: 0rem !important;
+    }
+
+    .taken-box {
+        width: 100%;
+        /* flex-direction: column; */
+        gap: 5px;
+    }
+
+    .taken-box p {
+        font-size: 1.2rem;
+    }
+
+    .taken-area p {
+        font-size: 1rem;
+    }
+
+    .text-box-title {
+        font-size: 1rem;
+        padding-left: 10px;
+    }
+
+    .solution-after {
+        justify-content: start;
+    }
+
+    .solution-area-two {
+        height: calc(100% - 490.05px) !important;
+    }
+
+    .solution-area {
+
+        gap: 40px !important;
+        height: calc(100% - 141.61px) !important;
+    }
+
+    .solution-text-box {
+        padding: 10px 15px !important;
+    }
+
+    .solution-text-box p {
+        padding-left: 5px;
+    }
+
+    .solution-text-box div {
+        gap: 0px !important;
+    }
+
+    .solution-text-box div div {
+        flex-direction: row;
+    }
+
+    .text-box-title::after {
+        left: -5px;
+        top: -1px;
+    }
+
+    .traffic-button {
+        display: none;
+    }
+
+    .traffic-area {
+        display: none;
+    }
+
+    .solution-web-box {
+        display: none;
+    }
+
+
+
+    .logo {
+        width: 50% !important;
+        height: 14px !important;
+        background-size: cover;
+    }
+
+    .mobil-wrap {
+        width: 50%;
+    }
+
+    .mobil-wrap button {
+        width: 100%;
+        text-align: right;
+    }
+
+    .box:hover,
+    .box-wrap div img:hover {
+        transform: scale(1);
+    }
+
+    .customized-wrap-title,
+    .etc-wrap-title {
+        margin-top: 50px;
+        margin-bottom: 1rem;
+        height: 100%;
+    }
+
+    .etc-wrap-title h1 {
+        padding-top: 0rem;
+    }
+
+    .box-grid {
+        grid-template-columns: 1fr 1fr 1fr !important;
+    }
+
+    .box-wrap {
+        width: 100% !important;
+        height: 100%;
+        gap: 10px !important;
+        margin-bottom: 0px;
+        display: grid !important;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        flex-direction: column;
+    }
+
+    .box-wrap img {
+        width: 100%;
+        padding-bottom: 0rem !important;
+        object-fit: contain;
+    }
+
+    .box-wrap div {
+        height: 100%;
+    }
+
+    .box-wrap div p {
+        padding: 1px;
+        margin-bottom: 0rem !important;
+        font-size: 1rem !important;
+    }
+
+    .box-wrap div div {
+        display: none;
+        height: 37% !important;
+    }
+
+    .etc-wrap-title h1,
+    .customized-wrap-title h1 {
+        font-size: 1.5rem !important;
+    }
+
+    .etc-wrap-title p,
+    .customized-wrap-title p {
+        font-size: 1.2rem !important;
+    }
+
+    .etc-wrap-title {
+        height: 100%;
+        margin-bottom: 10px !important;
+    }
+
+    .customized-box {
+        width: 100%;
+        display: grid;
+        gap: 10px;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .customized-box div {
+        width: 100%;
+
+        margin-bottom: 10px;
+    }
+
+    .customized-box p {
+        font-size: 1.1rem !important;
+    }
+
+    .customized-box div img {
+        width: 79%;
+    }
+
+    .etc-box-title {
+        margin-bottom: 0px;
+    }
+
+    .etc-box-title p {
+        padding-left: 0px;
+    }
+
+    .etc-box p {
+        padding-left: 0px;
+    }
+
+    .solution-box {
+        width: 100%;
+        height: calc(100% - 182px) !important;
+        display: grid;
+        grid-template-columns: 1fr;
+        justify-content: center;
+        gap: 1px;
+    }
+
+    .box1,
+    .box2,
+    .box3,
+    .box4,
+    .box5,
+    .box6 {
+        width: 100%;
+        font-size: 1.2rem;
+        background-size: cover;
+        background-position: center;
+        padding: 10px !important;
+    }
+
+    .box2,
+    .box4 {
+        transform: translateY(0px);
+    }
+
+}
+
+@media all and (min-width:480px) and (max-width:768px) {
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    html,
+    body,
+    #root {
+        width: 100%;
+        /* min-height: 100vh; */
+        font-size: 0.7rem;
+        color: var(--color-black);
+        font-family: 'Pretendard';
+    }
+
+    body {
+        min-width: 100%;
+
+
+    }
+
+    .text-main,
+    .solution-text,
+    .portfolio-text,
+    .map-text,
+    .about-title p:nth-child(1),
+    .marketing-wrap-title h1 {
+        font-size: 2.2rem !important;
+    }
+
+    .solution-title p,
+    .traffic-title p,
+    .ai-title p,
+    .meta-title p,
+    .smart-title p,
+    .etc-wrap-title p {
+        font-size: 1.5rem;
+    }
+
+    .sub-text,
+    .solution-sub-text {
+        font-size: 1.5rem !important;
+    }
+
+    .solution-box {
+        width: 100%;
+        height: calc(100% - 182px) !important;
+        flex-direction: column;
+        flex-wrap: wrap !important;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+
+
+    .box:hover {
+        transform: scale(1);
+    }
+
+    .header-area {
+        width: 100%;
+    }
+
+    .mobile-menu-button,
+    .mobil-wrap {
+        display: block;
+    }
+
+    .web-menu {
+        display: none;
+    }
+
+    .mobil-btn {
+        display: block;
+    }
+
+    .mobil-menu {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 36px;
+        left: 0;
+        z-index: 100000;
+    }
+
+    .mobil-menu ul {
+        list-style: none;
+        padding: 2rem 0;
+        margin: 0;
+        background-color: #fff;
+    }
+
+    .mobil-menu ul li ul li a {
+        font-weight: 500;
+        color: #333;
+        font-size: 1.2rem !important;
+    }
+
+    nav>ul {
+        background-color: #fff;
+        border-bottom: 1px solid #333;
+    }
+
     nav ul li {
         color: #333 !important;
         width: 100% !important;

     }
 
 
-
     .address-tile {
         width: 100%;
         font-size: 1.2rem;

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

 
 
 
-    .about img{
+    .about img {
         width: 100%;
         height: 100%;
     }
-    .about-vision-box{
+
+    .about-vision-box {
         height: 200px;
     }
+
     .about-vision-box img {
-        width: 100%;
+        width: 50%;
         height: 100%;
         object-fit: contain;
     }

         font-size: 1rem;
         padding-left: 10px;
     }
-    .solution-after{
+
+    .solution-after {
         justify-content: start;
     }
-    .solution-area-two{
+
+    .solution-area-two {
         height: calc(100% - 490.05px) !important;
     }
-    .solution-area{
+
+    .solution-area {
 
         gap: 40px !important;
-        height: calc(100% - 141.61px)!important;
+        height: calc(100% - 141.61px) !important;
     }
 
     .solution-text-box {

         display: none;
     }
 
-   
+
 
     .logo {
         width: 50% !important;

         width: 100%;
         text-align: right;
     }
-    .box:hover, .box-wrap div img:hover{
+
+    .box:hover,
+    .box-wrap div img:hover {
         transform: scale(1);
     }
-    .customized-wrap-title, .etc-wrap-title{
+
+    .customized-wrap-title,
+    .etc-wrap-title {
         margin-top: 50px;
         margin-bottom: 1rem;
         height: 100%;
     }
-    .etc-wrap-title h1{
+
+    .etc-wrap-title h1 {
         padding-top: 0rem;
     }
-    .box-wrap{
+
+    .box-grid {
+        grid-template-columns: 1fr 1fr 1fr !important;
+    }
+
+    .box-wrap {
         width: 100% !important;
         height: 100%;
         gap: 10px !important;

         grid-template-columns: 1fr 1fr 1fr 1fr;
         flex-direction: column;
     }
-    .box-wrap img{
+
+    .box-wrap img {
         width: 100%;
         padding-bottom: 0rem !important;
         object-fit: contain;
     }
-    .box-wrap div{
+
+    .box-wrap div {
         height: 100%;
     }
-    .box-wrap div p{
+
+    .box-wrap div p {
         padding: 1px;
         margin-bottom: 0rem !important;
         font-size: 1rem !important;
     }
-    .box-wrap div div{
+
+    .box-wrap div div {
         display: none;
         height: 37% !important;
     }
-    .etc-wrap-title h1,.customized-wrap-title h1{
+
+    .etc-wrap-title h1,
+    .customized-wrap-title h1 {
         font-size: 1.5rem !important;
     }
-    .etc-wrap-title p,.customized-wrap-title p{
+
+    .etc-wrap-title p,
+    .customized-wrap-title p {
         font-size: 1.2rem !important;
     }
-    .etc-wrap-title{
+
+    .etc-wrap-title {
         height: 100%;
         margin-bottom: 10px !important;
     }
-    .customized-box{
+
+    .customized-box {
         width: 100%;
         display: grid;
         gap: 10px;
         grid-template-columns: 1fr 1fr;
     }
-    .customized-box div{
+
+    .customized-box div {
         width: 100%;
 
         margin-bottom: 10px;
     }
-    .customized-box p{
+
+    .customized-box p {
         font-size: 1.1rem !important;
     }
-    .customized-box div img{
-        width: 100%;
+
+    .customized-box div img {
+        width: 79%;
     }
+
     .etc-box-title {
         margin-bottom: 0px;
     }
- 
-    .etc-box-title p{
+
+    .etc-box-title p {
         padding-left: 0px;
     }
- 
-    .etc-box p{
+
+    .etc-box p {
         padding-left: 0px;
     }
- 
+
+    .solution-box {
+        width: 100%;
+        height: calc(100% - 182px) !important;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        justify-content: center;
+        gap: 1px;
+    }
+
+    .box1,
+    .box2,
+    .box3,
+    .box4,
+    .box5,
+    .box6 {
+        width: 100%;
+        padding: 10px;
+        background-size: cover;
+        background-position: center;
+        text-shadow: 1px 1px 1px #33333350;
+    }
+
+    .box2,
+    .box4 {
+        transform: translateY(0px);
+    }
 }
 
 @media all and (min-width:768px) and (max-width:1366px) {

     .traffic-title p,
     .ai-title p,
     .meta-title p,
-    .smart-title p ,.etc-wrap-title p{
+    .smart-title p,
+    .etc-wrap-title p {
         font-size: 1.5rem;
     }
 

     .solution-box {
         width: 100%;
         height: calc(100% - 182px) !important;
-        flex-direction: column;
-        flex-wrap: wrap !important;
-        align-items: center;
-        justify-content: space-between;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        justify-content: center;
+    }
+
+    .box1,
+    .box2,
+    .box3,
+    .box4,
+    .box5,
+    .box6 {
+        width: 100%;
+    }
+
+    .box2,
+    .box4 {
+        transform: translateY(0px);
     }
 
     .solution-box div {
-        height: 50px !important;
-        background-size: 20px;
+        /* height: 50px !important; */
+        /* background-size: 20px; */
     }
 
     .box:hover {

         margin: 0;
         background-color: #fff;
     }
-    
+
     .mobil-menu ul li ul li a {
         font-weight: 500;
         color: #333;
         font-size: 1.2rem !important;
     }
-    
+
     nav>ul {
         background-color: #fff;
         border-bottom: 1px solid #333;
     }
-    
+
     nav ul li {
         color: #333 !important;
         width: 100% !important;

 
 
 
-    .about img{
+    .about img {
         width: 100%;
         height: 100%;
     }
-    .about-vision-box{
+
+    .about-vision-box {
         height: 200px;
     }
+
     .about-vision-box img {
         width: 100%;
         height: 100%;

         font-size: 1rem;
         padding-left: 10px;
     }
-    .solution-after{
+
+    .solution-after {
         justify-content: start;
     }
-    .solution-area-two{
+
+    .solution-area-two {
         height: calc(100% - 490.05px) !important;
     }
-    .solution-area{
+
+    .solution-area {
 
         gap: 40px !important;
-        height: calc(100% - 141.61px)!important;
+        height: calc(100% - 141.61px) !important;
     }
 
     .solution-text-box {

         display: none;
     }
 
-   
+
 
     .logo {
         width: 50% !important;

         width: 100%;
         text-align: right;
     }
-    .box:hover, .box-wrap div img:hover{
+
+    .box:hover,
+    .box-wrap div img:hover {
         transform: scale(1);
     }
-    .customized-wrap-title, .etc-wrap-title{
+
+    .customized-wrap-title,
+    .etc-wrap-title {
         margin-top: 50px;
         margin-bottom: 1rem;
         height: 100%;
     }
-    .etc-wrap-title h1{
+
+    .etc-wrap-title h1 {
         padding-top: 0rem;
     }
-    .box-wrap{
+
+    .box-wrap {
         width: 100% !important;
         height: 100%;
         gap: 10px !important;

 
         /* flex-direction: column; */
     }
-    .box-wrap img{
+
+    .box-wrap img {
         width: 100%;
         padding-bottom: 0rem !important;
         object-fit: contain;
         height: 77px !important;
     }
-    .box-wrap div{
+
+    .box-wrap div {
         height: 100%;
     }
-    .box-wrap div p{
+
+    .box-wrap div p {
         padding: 1px;
         margin-bottom: 0rem !important;
         font-size: 1rem !important;
     }
-    .box-wrap div div{
+
+    .box-wrap div div {
         display: none;
         height: 37% !important;
     }
-    .etc-wrap-title h1,.customized-wrap-title h1{
+
+    .etc-wrap-title h1,
+    .customized-wrap-title h1 {
         font-size: 1.5rem !important;
     }
-    .etc-wrap-title p,.customized-wrap-title p{
+
+    .etc-wrap-title p,
+    .customized-wrap-title p {
         font-size: 1.2rem !important;
     }
-    .etc-wrap-title{
+
+    .etc-wrap-title {
         margin-bottom: 10px !important;
     }
-    .customized-box{
+
+    .customized-box {
         width: 100%;
         display: grid;
         gap: 10px;
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }
-    .customized-box div{
+
+    .customized-box div {
         width: 100%;
 
         margin-bottom: 10px;
     }
-    .customized-box p{
+
+    .customized-box p {
         font-size: 1.1rem !important;
     }
-    .customized-box div img{
+
+    .customized-box div img {
         width: 100%;
     }
+
     .etc-box-title {
         margin-bottom: 0px;
     }
- 
-    .etc-box-title p{
+
+    .etc-box-title p {
         padding-left: 0px;
     }
- 
-    .etc-box p{
+
+    .etc-box p {
         padding-left: 0px;
     }
- 
+
+    .solution-box {
+        width: 100%;
+        height: calc(100% - 182px) !important;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        justify-content: end;
+        gap: 1px;
+    }
+
+    .box1,
+    .box2,
+    .box3,
+    .box4,
+    .box5,
+    .box6 {
+        width: 100%;
+        background-size: cover;
+        text-shadow: 1px 1px 1px #33333350;
+    }
+
+    .box2,
+    .box4 {
+        transform: translateY(0px);
+    }
 
 
 }

6c43e06

7246499

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


     padding-top: 6rem;
     text-align: center;
 }
-
+.mobil-wrap{
+    display: none;
+}
+.mobil-menu{
+    display: none;
+}
 #header.active {
     border-bottom: 1px solid #ced4da;
     background-color: white;

6c43e06

7246499

views/main.html

--- views/main.html

+++ views/main.html


                 if (firstTextBox) firstTextBox.classList.add('active');
             },
 
-        }
+        },    breakpoints: {
+                250: {
+                    slidesPerView: 1,
+                    spaceBetween: 20
+                },
+                // 화면의 넓이가 320px 이상일 때
+            
+                // 화면의 넓이가 640px 이상일 때
+                640: {
+                    slidesPerView: 2,
+                    spaceBetween: 40
+                },
+                800: {
+                    slidesPerView: 3,
+                    spaceBetween: 40
+                }
+            },
     });
 
 

6c43e06

7246499

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


             releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
         },
         on: {
-
             slideChange: function () {
                 var currentIndex = this.realIndex;
                 if (currentIndex === 0) {

                 }
             },
             reachEnd: function () {
+                // 마지막 슬라이드에 도달하면 마우스 휠 비활성화
                 swiper.mousewheel.disable();
             },
+        }
+    });
 
-        }
-    });
+    // 마우스 휠 동작에 따라 스와이퍼의 마우스 휠 활성화/비활성화
     window.addEventListener('wheel', function (event) {
+        // 스크롤을 올릴 때
         if (event.deltaY < 0) {
-            swiper.mousewheel.enable();
-        } else if (event.deltaY > 0) {
+            // 스와이퍼가 첫 번째 슬라이드에 있지 않으면 마우스 휠 활성화
+            if (swiper.realIndex !== 0) {
+                swiper.mousewheel.enable();
+            }
+        }
+        // 스크롤을 내릴 때
+        else if (event.deltaY > 0) {
+            // 마지막 슬라이드에 도달했으면 마우스 휠 비활성화
+            if (swiper.realIndex === swiper.slides.length - 1) {
+                swiper.mousewheel.disable();
+            } else {
+                // 그렇지 않으면 활성화
+                swiper.mousewheel.enable();
+            }
         }
     });
+
     // 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화
     targetArea.addEventListener('mouseenter', function () {
         swiper.mousewheel.disable();

     targetArea.addEventListener('mouseleave', function () {
         swiper.mousewheel.enable();
     });
+
     $(function () {
         $("#header").load("../layout/Header.html");
         $("#footer").load("../layout/footer.html");
         $("#footer").show();
-
     });
-
 
 </script>
 

6c43e06

7246499

views/pages/Data.html

--- views/pages/Data.html

+++ views/pages/Data.html


                     <h1 class="mb20 pt70">데이터분석을 통한 인사이트 도출</h1>
                     <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
                 </div>
-                <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px; height: calc(100% - 60px);">
+                <div class="flex justify-between align-end box-wrap box-grid mb30" style="width: 100%; gap: 20px; height: calc(100% - 60px);">
                     <div class="">
                         <img src="../../resources/img/common/data-img1.png" alt="">
                         <p>구미시 주요 이슈 및 민원 분석</p>

6c43e06

7246499

views/pages/SmartCtiy.html

--- views/pages/SmartCtiy.html

+++ views/pages/SmartCtiy.html


                     <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
                         제공합니다.</p>
                 </div>
-                <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px;">
+                <div class="flex justify-between align-end box-wrap box-grid mb30" style="width: 100%; gap: 20px;">
                     <div class="">
                         <img src="../../resources/img/common/smart-img1.png" alt="">
                         <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>

Add a comment

Open 0
Closed 0

List

...	...	@@ -345,7 +345,23 @@
345	345	if (firstTextBox) firstTextBox.classList.add('active');
346	346	},
347	347
348		- }
	348	+ }, breakpoints: {
	349	+ 250: {
	350	+ slidesPerView: 1,
	351	+ spaceBetween: 20
	352	+ },
	353	+ // 화면의 넓이가 320px 이상일 때
	354	+
	355	+ // 화면의 넓이가 640px 이상일 때
	356	+ 640: {
	357	+ slidesPerView: 2,
	358	+ spaceBetween: 40
	359	+ },
	360	+ 800: {
	361	+ slidesPerView: 3,
	362	+ spaceBetween: 40
	363	+ }
	364	+ },
349	365	});
350	366
351	367

...	...	@@ -536,7 +536,6 @@
536	536	releaseOnEdges: true, // 스와이퍼의 시작점과 끝점에서 마우스 휠 이벤트를 무시합니다.
537	537	},
538	538	on: {
539		-
540	539	slideChange: function () {
541	540	var currentIndex = this.realIndex;
542	541	if (currentIndex === 0) {
...	...	@@ -552,17 +551,33 @@
552	551	}
553	552	},
554	553	reachEnd: function () {
	554	+ // 마지막 슬라이드에 도달하면 마우스 휠 비활성화
555	555	swiper.mousewheel.disable();
556	556	},
	557	+ }
	558	+ });
557	559
558		- }
559		- });
	560	+ // 마우스 휠 동작에 따라 스와이퍼의 마우스 휠 활성화/비활성화
560	561	window.addEventListener('wheel', function (event) {
	562	+ // 스크롤을 올릴 때
561	563	if (event.deltaY < 0) {
562		- swiper.mousewheel.enable();
563		- } else if (event.deltaY > 0) {
	564	+ // 스와이퍼가 첫 번째 슬라이드에 있지 않으면 마우스 휠 활성화
	565	+ if (swiper.realIndex !== 0) {
	566	+ swiper.mousewheel.enable();
	567	+ }
	568	+ }
	569	+ // 스크롤을 내릴 때
	570	+ else if (event.deltaY > 0) {
	571	+ // 마지막 슬라이드에 도달했으면 마우스 휠 비활성화
	572	+ if (swiper.realIndex === swiper.slides.length - 1) {
	573	+ swiper.mousewheel.disable();
	574	+ } else {
	575	+ // 그렇지 않으면 활성화
	576	+ swiper.mousewheel.enable();
	577	+ }
564	578	}
565	579	});
	580	+
566	581	// 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화
567	582	targetArea.addEventListener('mouseenter', function () {
568	583	swiper.mousewheel.disable();
...	...	@@ -572,13 +587,12 @@
572	587	targetArea.addEventListener('mouseleave', function () {
573	588	swiper.mousewheel.enable();
574	589	});
	590	+
575	591	$(function () {
576	592	$("#header").load("../layout/Header.html");
577	593	$("#footer").load("../layout/footer.html");
578	594	$("#footer").show();
579		-
580	595	});
581		-
582	596
583	597	</script>
584	598

...	...	@@ -7,7 +7,12 @@
7	7	padding-top: 6rem;
8	8	text-align: center;
9	9	}
10		-
	10	+.mobil-wrap{
	11	+ display: none;
	12	+}
	13	+.mobil-menu{
	14	+ display: none;
	15	+}
11	16	#header.active {
12	17	border-bottom: 1px solid #ced4da;
13	18	background-color: white;

...	...	@@ -31,7 +31,7 @@
31	31	<h1 class="mb20 pt70">데이터분석을 통한 인사이트 도출</h1>
32	32	<p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
33	33	</div>
34		- <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px; height: calc(100% - 60px);">
	34	+ <div class="flex justify-between align-end box-wrap box-grid mb30" style="width: 100%; gap: 20px; height: calc(100% - 60px);">
35	35	<div class="">
36	36	<img src="../../resources/img/common/data-img1.png" alt="">
37	37	<p>구미시 주요 이슈 및 민원 분석</p>

...	...	@@ -32,7 +32,7 @@
32	32	<p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
33	33	제공합니다.</p>
34	34	</div>
35		- <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px;">
	35	+ <div class="flex justify-between align-end box-wrap box-grid mb30" style="width: 100%; gap: 20px;">
36	36	<div class="">
37	37	<img src="../../resources/img/common/smart-img1.png" alt="">
38	38	<p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>

Delete comment