Commit @90afc404060f02c3254714b32f4e07f137199687

mycoms 2024-03-27

240327 김하영

@90afc404060f02c3254714b32f4e07f137199687

932bc85

90afc40

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css


 @charset "utf-8";
 
 #header.active {
-    background-color: #213f99;
+border-bottom: 1px solid #ced4da;
+background-color: white;
 }
+#header.active .header nav li a{
+    color: #333;
 
+}
+#header.active .header .logo{
+    background: url(../img/component/logo-color.png) no-repeat;
+    width: 200px;
+    background-size: contain;
+    height: 25px;
+
+   
+}
 .text-event {
     position: relative;
     z-index: 3;

     gap: 40px;
     width: 100%;
     height: 320px;
-    text-align: left;
+    text-align: center;
+    
 }
 
 .pink-box img,

 .purple-box img,
 .ivory-box img {
     object-fit: contain;
-    width: 100%;
+    width: 197px;
     height: calc(320px - 145px);
     text-align: center;
 }

 }
 
 .pink-box {
-    width: 200px;
-    padding: 15px;
-    background-color: #ffe2e4;
-    border-radius: 20px;
+    background: url(../img/common/box2.png) no-repeat;
+    width: 208px;
+    height: 330px;
+    background-size: 208px 330px;
+    transform: translateY(-40px);
 }
 
 .pink-box div p:nth-child(1) {

 }
 
 .yellow-box {
-    width: 200px;
-    padding: 15px;
-    background-color: #f9f9e9;
-    border-radius: 20px;
-    transform: translateY(30px);
+    background: url(../img/common/box4.png) no-repeat;
+    width: 353px;
+    height: 203px;
+    background-size: contain;
+    transform: translateY(-40px);
 }
 
 .yellow-box div p:nth-child(1) {

 
 
 .blue-box {
-    width: 200px;
-    padding: 15px;
-    background-color: #d2e9ff;
-    border-radius: 20px;
+    background: url(../img/common/box5.png) no-repeat;
+    width: 306px;
+    height: 204px;
+    background-size: 306px 204px;
+    transform: translateY(-40px);
 }
 
 .blue-box div p:nth-child(1) {

 }
 
 .purple-box {
-    width: 200px;
-    padding: 15px;
-    background-color: #e9ebff;
-    border-radius: 20px;
-    transform: translateY(30px);
+    background: url(../img/common/box3.png) no-repeat;
+    width: 343px;
+    height: 281px;
+    background-size: 343px 281px;
+    transform: translateY(-40px);
 }
 
 .purple-box div p:nth-child(1) {

 }
 
 .ivory-box {
-    width: 200px;
-    padding: 15px;
-    background-color: #f8f9fa;
-    border-radius: 20px;
+   background: url(../img/common/box1.png) no-repeat;
+   width: 335px;
+}
+.ivory-box div {
+    transform: translateY(-30px);
+
+}
+.ivory-box img {
+    transform: translateY(-40px);
 }
 
 .ivory-box div p:nth-child(1) {

   
 
 
-  .swiper2{
-    width: 100%;
+
+
+.portfolio {
+    /* padding: 100px 30px; */
     height: 100%;
-  }
-
-  .swiper2 .swiper-slide {
+    width: 100%;
     
-    text-align: center;
-    font-size: 18px;
-    background: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid red;
-  }
 
+}
+
+.portfolio-title {
+    font-size: 8rem;
+    color: #fff;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.portfolio-title span {
+    color: transparent;
+    -webkit-text-stroke: 1px white;
+}
+.innerSwiper {
+    /* background-color: #000; */
+    width: 100%;
+}
+.innerSwiper .swiper-slide {
+    text-align: center;
+    border: 1px solid blue;
+    font-size: 18px;
+
+}
+
+.innerSwiper .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 60%;
+    background-color: #fff;
+    object-fit: cover;
+    margin-bottom: 20px;
+}

90afc40

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

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

Binary file is not shown

90afc40

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

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

Binary file is not shown

90afc40

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

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

Binary file is not shown

90afc40

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

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

Binary file is not shown

90afc40

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

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

Binary file is not shown

90afc40

resources/img/common/mouse.png (Binary) (added)

+++ resources/img/common/mouse.png

Binary file is not shown

90afc40

resources/img/component/logo-color.png (Binary) (added)

+++ resources/img/component/logo-color.png

Binary file is not shown

932bc85

90afc40

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


 <html lang="en">
 
 <!-- 헤더 -->
+
 <body>
     <div class="header">
         <div class="header-area flex justify-between align-center">
-            <img src="../../resources/img/component/logo-w.png" alt="">
+            <div class="logo"></div>
             <nav>
                 <ul>
-                    <li><a href="">About Us</a></li>
-                    <li><a href="">Business</a></li>
+                    <li><a href="">About Us · Business</a></li>
                     <li><a href="">Solution</a></li>
                     <li><a href="">Portfolio</a></li>
+                    <li><a href="">Marketing</a></li>
                 </ul>
             </nav>
         </div>

         left: 0;
         width: 100%;
     }
-    .header-area{
+
+    .logo {
+        background: url(../../resources/img/component/logo-w.png) no-repeat;
+        width: 200px;
+        background-size: contain;
+        height: 25px;
+    }
+
+    .header-area {
         width: 100%;
         margin: 0 auto;
         padding: 20px 30px 15px 30px;
     }
-   
 
-    nav ul li{
+
+    nav ul li {
         margin-left: 140px;
         display: inline-block;
     }
 
-    nav ul li a{
+    nav ul li a {
         color: white;
         font-size: 1.5rem;
     }

932bc85

90afc40

views/main.html

--- views/main.html

+++ views/main.html


     <link rel="stylesheet" href="../../resources/css/common.css">
     <link rel="stylesheet" href="../../resources/css/responsive.css">
 
+
     <title>TAKENSOFT</title>
 </head>
 

             <div class="swiper-slide">
                 <div class="slide-wrap">
                     <div class="main-wrap">
-                        <div class="text-area flex align-end ">
-                            <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
+                        <div class="text-area flex align-end main-text">
+                            <div>
+                                <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
+                                <img src="../resources/img/common/mouse.png" alt="">
+                            </div>
                         </div>
                     </div>
                 </div>

                     </div>
                 </div>
             </div>
-            <div class="swiper-slide">
+            <div class="swiper-slide gradient-back">
                 <div class="slide-wrap pt60 slide-solution">
-                    <div class="text-area flex align-center">
-                        <div style="width: 100%;" class="pb40">
-                            <p class=" solution-text pb30">테이큰 소프트는 ...</p>
-                            <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
+                    <div class=" text-area flex align-center" style="height: 100%;">
+                        <div style="width: 100%;" class="sub-text-area">
+                            <p class=" solution-text pb30">테이큰 소프트는</p>
+                            <!-- <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
                                 스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
-                            </p>
+                            </p> -->
                         </div>
-                        <div class="flex solution-box ">
-                            <div class="pink-box hvr-grow cursor">
-                                <img class="mb30" src="../resources/img/common/DATA.png" alt="">
-                                <div>
-                                    <p class="mb15">데이터관리분야</p>
-                                    <p>데이터 관리 솔루션 Taken BI Manager</p>
+                        <div class="flex justify-end  solution-box " style="height: calc(100% - 84px);">
+                            <div style="height: 50%;">
+                                <div class="ivory-box hvr-grow cursor mr50">
+                                    <img src="../resources/img/common/healthCare.png" alt="">
+                                    <div>
+                                        <p class="mb15">헬스케어 분야</p>
+                                        <p>시니어 스마트 케어 모니터링 플랫폼</p>
+                                    </div>
+                                </div>
+                                <div class="pink-box hvr-grow cursor">
+                                    <img class="mb30" src="../resources/img/common/DATA.png" alt="">
+                                    <div>
+                                        <p class="mb15">데이터관리분야</p>
+                                        <p>데이터 관리 솔루션 Taken BI Manager</p>
+                                    </div>
                                 </div>
                             </div>
-                            <div class="yellow-box hvr-grow cursor">
-                                <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
-                                <div>
-                                    <p class="mb15">스마트시티 분야</p>
-                                    <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
+                            <div>
+                                <div class="purple-box hvr-grow cursor">
+                                    <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
+                                    <div>
+                                        <p class="mb15">스마트팩토리 분야</p>
+                                        <p>제조기업 공정 관리 모니터링 서비스</p>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="blue-box hvr-grow cursor">
-                                <img class="mb30" src="../resources/img/common/mobility.png" alt="">
-                                <div>
-                                    <p class="mb15">모빌리티 분야</p>
-                                    <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
+                                <div class="yellow-box hvr-grow cursor">
+                                    <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
+                                    <div>
+                                        <p class="mb15">스마트시티 분야</p>
+                                        <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
+                                    </div>
                                 </div>
-                            </div>
-                            <div class="purple-box hvr-grow cursor">
-                                <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
-                                <div>
-                                    <p class="mb15">스마트팩토리 분야</p>
-                                    <p>제조기업 공정 관리 모니터링 서비스</p>
+                                <div class="blue-box hvr-grow cursor">
+                                    <img class="mb30" src="../resources/img/common/mobility.png" alt="">
+                                    <div>
+                                        <p class="mb15">모빌리티 분야</p>
+                                        <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
+                                    </div>
                                 </div>
+
                             </div>
-                            <div class="ivory-box hvr-grow cursor">
-                                <img class="mb30" src="../resources/img/common/healthCare.png" alt="">
-                                <div>
-                                    <p class="mb15">헬스케어 분야</p>
-                                    <p>시니어 스마트 케어 모니터링 플랫폼</p>
-                                </div>
-                            </div>
+                           
                         </div>
                     </div>
 
                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="slide-wrap pt60">
-                    <div>
-                        <div class="text-area">
-                            <p>POTRFOLIO</p>
+                <div class="portfolio">
+                    <div class="swiper innerSwiper">
+                        <div class="swiper-wrapper flex mt60">
+                            <div class="swiper-slide">Slide 1</div>
+                            <div class="swiper-slide">Slide 2</div>
+                            <div class="swiper-slide">Slide 3</div>
+                            <div class="swiper-slide">Slide 4</div>
+                            <div class="swiper-slide">Slide 5</div>
+                            <div class="swiper-slide">Slide 6</div>
+                            <div class="swiper-slide">Slide 7</div>
+                            <div class="swiper-slide">Slide 8</div>
+                            <div class="swiper-slide">Slide 9</div>
                         </div>
-                        <div>
-                            <div class="swiper-container swiper2">
-                                <div class="swiper-wrapper">
-                                    <div class="swiper-slide">sddf</div>
-                                    <div class="swiper-slide">sdf</div>
-                                    <div class="swiper-slide">sdfsdf</div>
-                                    <div class="swiper-slide">asdgdg</div>
-                                    <div class="swiper-slide">asadfsaf</div>
-                                </div>
-                            
-                            
-                            </div>
-                        </div>
+                        <div class="swiper-button-next"></div>
+                        <div class="swiper-button-prev"></div>
+                        <div class="swiper-pagination"></div>
                     </div>
-
                 </div>
+
             </div>
 
         </div>
-        <div class="swiper-pagination"></div>
     </div>
     <div id="footer" style="border: 0px;"></div>
 

 
 </body>
 <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
 <script>
 
-    var swiper = new Swiper(".mySwiper", {
+    var swiper1 = new Swiper(".mySwiper", {
         direction: "vertical",
         slidesPerView: 1,
         spaceBetween: 30,

         }, on: {
 
             reachEnd: function () {
-                swiper.mousewheel.disable();
+                swiper1.mousewheel.disable();
                 $("#footer").show();
             },
             fromEdge: function () {
-                swiper.mousewheel.enable();
+                swiper1.mousewheel.enable();
                 $("#footer").hide();
             },
             slideChange: function () {

     });
 
 
-    window.addEventListener('wheel', function (event) {
-        if (event.deltaY < 3) {
-            swiper.mousewheel.enable();
-        } else if (event.deltaY > 3) {
-        }
-    });
-
     // 헤더,푸터 불러오기
     $(function () {
         $("#header").load("layout/header.html");

         $("#footer").hide();
     });
 
-
-    var swiper = new Swiper(".swiper2", {
-      spaceBetween: 30,
-    //   centeredSlides: true,
-      autoplay: {
-        delay: 2000,
-        disableOnInteraction: false,
-      },
-     
+    var innerSwiper = new Swiper(".innerSwiper", {
+        slidesPerView: 10,
+        loop: true,
+        spaceBetween: 30,
+        centeredSlides: true,
+        autoplay: {
+            // delay: 1000,
+            disableOnInteraction: false,
+        },
+        pagination: {
+            el: ".swiper-pagination",
+            clickable: true,
+        },
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
     });
+
+
+
+
 
 </script>
 

         height: 100%;
         margin: auto;
         text-align: center;
+    }
 
+    .main-text {
+
+        padding-bottom: 50px;
+    }
+
+    .main-text h2 {
+        width: 100%;
+        height: 20%;
+    }
+
+    .main-text div {
+        width: 100%;
+    }
+
+    .main-text div img {
+        width: 30px;
     }
 
     .main-wrap .text-area h2 {
-        padding-bottom: 150px;
         text-align: left;
         font-size: 6rem;
         font-weight: 600;

 
     }
 
-    .text-main span {
-        color: #f29600;
-        font-weight: 900;
-
+    .sub-text-area {
+        text-align: left;
+    }
+    .gradient-back{
+        background: linear-gradient(#e9ebff , #fff, #fff);
     }
 
-
     .slide-solution {
-        padding: 235px 0 200px;
+        padding: 158px 0 80px;
         font-family: 'Pretendard';
 
     }

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,9 +1,21 @@
1	1	@charset "utf-8";
2	2
3	3	#header.active {
4		- background-color: #213f99;
	4	+border-bottom: 1px solid #ced4da;
	5	+background-color: white;
5	6	}
	7	+#header.active .header nav li a{
	8	+ color: #333;
6	9
	10	+}
	11	+#header.active .header .logo{
	12	+ background: url(../img/component/logo-color.png) no-repeat;
	13	+ width: 200px;
	14	+ background-size: contain;
	15	+ height: 25px;
	16	+
	17	+
	18	+}
7	19	.text-event {
8	20	position: relative;
9	21	z-index: 3;
...	...	@@ -71,7 +83,8 @@
71	83	gap: 40px;
72	84	width: 100%;
73	85	height: 320px;
74		- text-align: left;
	86	+ text-align: center;
	87	+
75	88	}
76	89
77	90	.pink-box img,
...	...	@@ -80,7 +93,7 @@
80	93	.purple-box img,
81	94	.ivory-box img {
82	95	object-fit: contain;
83		- width: 100%;
	96	+ width: 197px;
84	97	height: calc(320px - 145px);
85	98	text-align: center;
86	99	}
...	...	@@ -103,10 +116,11 @@
103	116	}
104	117
105	118	.pink-box {
106		- width: 200px;
107		- padding: 15px;
108		- background-color: #ffe2e4;
109		- border-radius: 20px;
	119	+ background: url(../img/common/box2.png) no-repeat;
	120	+ width: 208px;
	121	+ height: 330px;
	122	+ background-size: 208px 330px;
	123	+ transform: translateY(-40px);
110	124	}
111	125
112	126	.pink-box div p:nth-child(1) {
...	...	@@ -116,11 +130,11 @@
116	130	}
117	131
118	132	.yellow-box {
119		- width: 200px;
120		- padding: 15px;
121		- background-color: #f9f9e9;
122		- border-radius: 20px;
123		- transform: translateY(30px);
	133	+ background: url(../img/common/box4.png) no-repeat;
	134	+ width: 353px;
	135	+ height: 203px;
	136	+ background-size: contain;
	137	+ transform: translateY(-40px);
124	138	}
125	139
126	140	.yellow-box div p:nth-child(1) {
...	...	@@ -129,10 +143,11 @@
129	143
130	144
131	145	.blue-box {
132		- width: 200px;
133		- padding: 15px;
134		- background-color: #d2e9ff;
135		- border-radius: 20px;
	146	+ background: url(../img/common/box5.png) no-repeat;
	147	+ width: 306px;
	148	+ height: 204px;
	149	+ background-size: 306px 204px;
	150	+ transform: translateY(-40px);
136	151	}
137	152
138	153	.blue-box div p:nth-child(1) {
...	...	@@ -140,11 +155,11 @@
140	155	}
141	156
142	157	.purple-box {
143		- width: 200px;
144		- padding: 15px;
145		- background-color: #e9ebff;
146		- border-radius: 20px;
147		- transform: translateY(30px);
	158	+ background: url(../img/common/box3.png) no-repeat;
	159	+ width: 343px;
	160	+ height: 281px;
	161	+ background-size: 343px 281px;
	162	+ transform: translateY(-40px);
148	163	}
149	164
150	165	.purple-box div p:nth-child(1) {
...	...	@@ -152,10 +167,15 @@
152	167	}
153	168
154	169	.ivory-box {
155		- width: 200px;
156		- padding: 15px;
157		- background-color: #f8f9fa;
158		- border-radius: 20px;
	170	+ background: url(../img/common/box1.png) no-repeat;
	171	+ width: 335px;
	172	+}
	173	+.ivory-box div {
	174	+ transform: translateY(-30px);
	175	+
	176	+}
	177	+.ivory-box img {
	178	+ transform: translateY(-40px);
159	179	}
160	180
161	181	.ivory-box div p:nth-child(1) {
...	...	@@ -230,19 +250,44 @@
230	250
231	251
232	252
233		- .swiper2{
234		- width: 100%;
	253	+
	254	+
	255	+.portfolio {
	256	+ /* padding: 100px 30px; */
235	257	height: 100%;
236		- }
237		-
238		- .swiper2 .swiper-slide {
	258	+ width: 100%;
239	259
240		- text-align: center;
241		- font-size: 18px;
242		- background: #fff;
243		- display: flex;
244		- justify-content: center;
245		- align-items: center;
246		- border: 1px solid red;
247		- }
248	260
	261	+}
	262	+
	263	+.portfolio-title {
	264	+ font-size: 8rem;
	265	+ color: #fff;
	266	+ font-weight: bold;
	267	+ text-align: center;
	268	+ margin-bottom: 1.5rem;
	269	+}
	270	+
	271	+.portfolio-title span {
	272	+ color: transparent;
	273	+ -webkit-text-stroke: 1px white;
	274	+}
	275	+.innerSwiper {
	276	+ /* background-color: #000; */
	277	+ width: 100%;
	278	+}
	279	+.innerSwiper .swiper-slide {
	280	+ text-align: center;
	281	+ border: 1px solid blue;
	282	+ font-size: 18px;
	283	+
	284	+}
	285	+
	286	+.innerSwiper .swiper-slide img {
	287	+ display: block;
	288	+ width: 100%;
	289	+ height: 60%;
	290	+ background-color: #fff;
	291	+ object-fit: cover;
	292	+ margin-bottom: 20px;
	293	+} (No newline at end of file)

...	...	@@ -13,6 +13,7 @@
13	13	<link rel="stylesheet" href="../../resources/css/common.css">
14	14	<link rel="stylesheet" href="../../resources/css/responsive.css">
15	15
	16	+
16	17	<title>TAKENSOFT</title>
17	18	</head>
18	19
...	...	@@ -24,8 +25,11 @@
24	25	<div class="swiper-slide">
25	26	<div class="slide-wrap">
26	27	<div class="main-wrap">
27		- <div class="text-area flex align-end ">
28		- <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
	28	+ <div class="text-area flex align-end main-text">
	29	+ <div>
	30	+ <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
	31	+ <img src="../resources/img/common/mouse.png" alt="">
	32	+ </div>
29	33	</div>
30	34	</div>
31	35	</div>
...	...	@@ -39,82 +43,85 @@
39	43	</div>
40	44	</div>
41	45	</div>
42		- <div class="swiper-slide">
	46	+ <div class="swiper-slide gradient-back">
43	47	<div class="slide-wrap pt60 slide-solution">
44		- <div class="text-area flex align-center">
45		- <div style="width: 100%;" class="pb40">
46		- <p class=" solution-text pb30">테이큰 소프트는 ...</p>
47		- <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
	48	+ <div class=" text-area flex align-center" style="height: 100%;">
	49	+ <div style="width: 100%;" class="sub-text-area">
	50	+ <p class=" solution-text pb30">테이큰 소프트는</p>
	51	+ <!-- <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
48	52	스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
49		- </p>
	53	+ </p> -->
50	54	</div>
51		- <div class="flex solution-box ">
52		- <div class="pink-box hvr-grow cursor">
53		- <img class="mb30" src="../resources/img/common/DATA.png" alt="">
54		- <div>
55		- <p class="mb15">데이터관리분야</p>
56		- <p>데이터 관리 솔루션 Taken BI Manager</p>
	55	+ <div class="flex justify-end solution-box " style="height: calc(100% - 84px);">
	56	+ <div style="height: 50%;">
	57	+ <div class="ivory-box hvr-grow cursor mr50">
	58	+ <img src="../resources/img/common/healthCare.png" alt="">
	59	+ <div>
	60	+ <p class="mb15">헬스케어 분야</p>
	61	+ <p>시니어 스마트 케어 모니터링 플랫폼</p>
	62	+ </div>
	63	+ </div>
	64	+ <div class="pink-box hvr-grow cursor">
	65	+ <img class="mb30" src="../resources/img/common/DATA.png" alt="">
	66	+ <div>
	67	+ <p class="mb15">데이터관리분야</p>
	68	+ <p>데이터 관리 솔루션 Taken BI Manager</p>
	69	+ </div>
57	70	</div>
58	71	</div>
59		- <div class="yellow-box hvr-grow cursor">
60		- <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
61		- <div>
62		- <p class="mb15">스마트시티 분야</p>
63		- <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
	72	+ <div>
	73	+ <div class="purple-box hvr-grow cursor">
	74	+ <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
	75	+ <div>
	76	+ <p class="mb15">스마트팩토리 분야</p>
	77	+ <p>제조기업 공정 관리 모니터링 서비스</p>
	78	+ </div>
64	79	</div>
65		- </div>
66		- <div class="blue-box hvr-grow cursor">
67		- <img class="mb30" src="../resources/img/common/mobility.png" alt="">
68		- <div>
69		- <p class="mb15">모빌리티 분야</p>
70		- <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
	80	+ <div class="yellow-box hvr-grow cursor">
	81	+ <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
	82	+ <div>
	83	+ <p class="mb15">스마트시티 분야</p>
	84	+ <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
	85	+ </div>
71	86	</div>
72		- </div>
73		- <div class="purple-box hvr-grow cursor">
74		- <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
75		- <div>
76		- <p class="mb15">스마트팩토리 분야</p>
77		- <p>제조기업 공정 관리 모니터링 서비스</p>
	87	+ <div class="blue-box hvr-grow cursor">
	88	+ <img class="mb30" src="../resources/img/common/mobility.png" alt="">
	89	+ <div>
	90	+ <p class="mb15">모빌리티 분야</p>
	91	+ <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
	92	+ </div>
78	93	</div>
	94	+
79	95	</div>
80		- <div class="ivory-box hvr-grow cursor">
81		- <img class="mb30" src="../resources/img/common/healthCare.png" alt="">
82		- <div>
83		- <p class="mb15">헬스케어 분야</p>
84		- <p>시니어 스마트 케어 모니터링 플랫폼</p>
85		- </div>
86		- </div>
	96	+
87	97	</div>
88	98	</div>
89	99
90	100	</div>
91	101	</div>
92	102	<div class="swiper-slide">
93		- <div class="slide-wrap pt60">
94		- <div>
95		- <div class="text-area">
96		- <p>POTRFOLIO</p>
	103	+ <div class="portfolio">
	104	+ <div class="swiper innerSwiper">
	105	+ <div class="swiper-wrapper flex mt60">
	106	+ <div class="swiper-slide">Slide 1</div>
	107	+ <div class="swiper-slide">Slide 2</div>
	108	+ <div class="swiper-slide">Slide 3</div>
	109	+ <div class="swiper-slide">Slide 4</div>
	110	+ <div class="swiper-slide">Slide 5</div>
	111	+ <div class="swiper-slide">Slide 6</div>
	112	+ <div class="swiper-slide">Slide 7</div>
	113	+ <div class="swiper-slide">Slide 8</div>
	114	+ <div class="swiper-slide">Slide 9</div>
97	115	</div>
98		- <div>
99		- <div class="swiper-container swiper2">
100		- <div class="swiper-wrapper">
101		- <div class="swiper-slide">sddf</div>
102		- <div class="swiper-slide">sdf</div>
103		- <div class="swiper-slide">sdfsdf</div>
104		- <div class="swiper-slide">asdgdg</div>
105		- <div class="swiper-slide">asadfsaf</div>
106		- </div>
107		-
108		-
109		- </div>
110		- </div>
	116	+ <div class="swiper-button-next"></div>
	117	+ <div class="swiper-button-prev"></div>
	118	+ <div class="swiper-pagination"></div>
111	119	</div>
112		-
113	120	</div>
	121	+
114	122	</div>
115	123
116	124	</div>
117		- <div class="swiper-pagination"></div>
118	125	</div>
119	126	<div id="footer" style="border: 0px;"></div>
120	127
...	...	@@ -123,10 +130,11 @@
123	130
124	131	</body>
125	132	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	133	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
126	134
127	135	<script>
128	136
129		- var swiper = new Swiper(".mySwiper", {
	137	+ var swiper1 = new Swiper(".mySwiper", {
130	138	direction: "vertical",
131	139	slidesPerView: 1,
132	140	spaceBetween: 30,
...	...	@@ -138,11 +146,11 @@
138	146	}, on: {
139	147
140	148	reachEnd: function () {
141		- swiper.mousewheel.disable();
	149	+ swiper1.mousewheel.disable();
142	150	$("#footer").show();
143	151	},
144	152	fromEdge: function () {
145		- swiper.mousewheel.enable();
	153	+ swiper1.mousewheel.enable();
146	154	$("#footer").hide();
147	155	},
148	156	slideChange: function () {
...	...	@@ -176,13 +184,6 @@
176	184	});
177	185
178	186
179		- window.addEventListener('wheel', function (event) {
180		- if (event.deltaY < 3) {
181		- swiper.mousewheel.enable();
182		- } else if (event.deltaY > 3) {
183		- }
184		- });
185		-
186	187	// 헤더,푸터 불러오기
187	188	$(function () {
188	189	$("#header").load("layout/header.html");
...	...	@@ -190,16 +191,28 @@
190	191	$("#footer").hide();
191	192	});
192	193
193		-
194		- var swiper = new Swiper(".swiper2", {
195		- spaceBetween: 30,
196		- // centeredSlides: true,
197		- autoplay: {
198		- delay: 2000,
199		- disableOnInteraction: false,
200		- },
201		-
	194	+ var innerSwiper = new Swiper(".innerSwiper", {
	195	+ slidesPerView: 10,
	196	+ loop: true,
	197	+ spaceBetween: 30,
	198	+ centeredSlides: true,
	199	+ autoplay: {
	200	+ // delay: 1000,
	201	+ disableOnInteraction: false,
	202	+ },
	203	+ pagination: {
	204	+ el: ".swiper-pagination",
	205	+ clickable: true,
	206	+ },
	207	+ navigation: {
	208	+ nextEl: ".swiper-button-next",
	209	+ prevEl: ".swiper-button-prev",
	210	+ },
202	211	});
	212	+
	213	+
	214	+
	215	+
203	216
204	217	</script>
205	218
...	...	@@ -263,11 +276,27 @@
263	276	height: 100%;
264	277	margin: auto;
265	278	text-align: center;
	279	+ }
266	280
	281	+ .main-text {
	282	+
	283	+ padding-bottom: 50px;
	284	+ }
	285	+
	286	+ .main-text h2 {
	287	+ width: 100%;
	288	+ height: 20%;
	289	+ }
	290	+
	291	+ .main-text div {
	292	+ width: 100%;
	293	+ }
	294	+
	295	+ .main-text div img {
	296	+ width: 30px;
267	297	}
268	298
269	299	.main-wrap .text-area h2 {
270		- padding-bottom: 150px;
271	300	text-align: left;
272	301	font-size: 6rem;
273	302	font-weight: 600;
...	...	@@ -292,15 +321,15 @@
292	321
293	322	}
294	323
295		- .text-main span {
296		- color: #f29600;
297		- font-weight: 900;
298		-
	324	+ .sub-text-area {
	325	+ text-align: left;
	326	+ }
	327	+ .gradient-back{
	328	+ background: linear-gradient(#e9ebff , #fff, #fff);
299	329	}
300	330
301		-
302	331	.slide-solution {
303		- padding: 235px 0 200px;
	332	+ padding: 158px 0 80px;
304	333	font-family: 'Pretendard';
305	334
306	335	}

Delete comment