Commit @932bc853a0713929ac7238a87e1686ebfce64d50

mycoms 2024-03-19

240319 김하영

@932bc853a0713929ac7238a87e1686ebfce64d50

d4907ef

932bc85

resources/css/common.css

--- resources/css/common.css

+++ resources/css/common.css


 .mb10 {
     margin-bottom: 10px;
 }
+.mb15 {
+    margin-bottom: 15px;
+}
 
 .mb20 {
     margin-bottom: 20px;

d4907ef

932bc85

resources/css/reset.css

--- resources/css/reset.css

+++ resources/css/reset.css


 body {
     min-width: 1200px;
     background-color: #f7f6fb;
+    
 }
 
 

d4907ef

932bc85

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css

...	...	@@ -1,1 +1,248 @@
1	1	@charset "utf-8";
	2	+
	3	+#header.active {
	4	+ background-color: #213f99;
	5	+}
	6	+
	7	+.text-event {
	8	+ position: relative;
	9	+ z-index: 3;
	10	+
	11	+}
	12	+
	13	+.text-event::before {
	14	+ content: "";
	15	+ position: absolute;
	16	+ left: 0;
	17	+ bottom: 0px;
	18	+ width: 0px;
	19	+ height: 23px;
	20	+ z-index: -1;
	21	+ margin: 5px 0 0;
	22	+ transition: all 0.4s ease-in-out;
	23	+ transition-duration: 0.3s;
	24	+ opacity: 0;
	25	+ background-color: #fce5bf;
	26	+}
	27	+
	28	+
	29	+.text-event.active::before {
	30	+ width: 100%;
	31	+ opacity: 1;
	32	+
	33	+}
	34	+
	35	+.sub-text {
	36	+ opacity: 0;
	37	+}
	38	+
	39	+.sub-text.active {
	40	+ opacity: 1;
	41	+ -webkit-animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	42	+ animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	43	+ animation-delay: 0.5s;
	44	+}
	45	+
	46	+.solution-text {
	47	+ font-size: 4.5rem;
	48	+ font-weight: 900;
	49	+ opacity: 0;
	50	+}
	51	+
	52	+.solution-text.active {
	53	+
	54	+ -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	55	+ animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	56	+
	57	+
	58	+}
	59	+.solution-sub-text{
	60	+ opacity: 0;
	61	+}
	62	+.solution-sub-text.active{
	63	+ -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	64	+ animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	65	+ animation-delay: 0.5s;
	66	+}
	67	+
	68	+
	69	+.solution-box {
	70	+ flex-wrap: nowrap;
	71	+ gap: 40px;
	72	+ width: 100%;
	73	+ height: 320px;
	74	+ text-align: left;
	75	+}
	76	+
	77	+.pink-box img,
	78	+.blue-box img,
	79	+.yellow-box img,
	80	+.purple-box img,
	81	+.ivory-box img {
	82	+ object-fit: contain;
	83	+ width: 100%;
	84	+ height: calc(320px - 145px);
	85	+ text-align: center;
	86	+}
	87	+
	88	+.pink-box div p:nth-child(1),
	89	+.yellow-box div p:nth-child(1),
	90	+.blue-box div p:nth-child(1),
	91	+.purple-box div p:nth-child(1),
	92	+.ivory-box div p:nth-child(1) {
	93	+ font-weight: 700;
	94	+ font-size: 2rem;
	95	+}
	96	+
	97	+.pink-box div p:nth-child(2),
	98	+.yellow-box div p:nth-child(2),
	99	+.blue-box div p:nth-child(2),
	100	+.purple-box div p:nth-child(2),
	101	+.ivory-box div p:nth-child(2) {
	102	+ font-size: 1.5rem;
	103	+}
	104	+
	105	+.pink-box {
	106	+ width: 200px;
	107	+ padding: 15px;
	108	+ background-color: #ffe2e4;
	109	+ border-radius: 20px;
	110	+}
	111	+
	112	+.pink-box div p:nth-child(1) {
	113	+ color: #fa665d;
	114	+ font-weight: 700;
	115	+
	116	+}
	117	+
	118	+.yellow-box {
	119	+ width: 200px;
	120	+ padding: 15px;
	121	+ background-color: #f9f9e9;
	122	+ border-radius: 20px;
	123	+ transform: translateY(30px);
	124	+}
	125	+
	126	+.yellow-box div p:nth-child(1) {
	127	+ color: #a2a185;
	128	+}
	129	+
	130	+
	131	+.blue-box {
	132	+ width: 200px;
	133	+ padding: 15px;
	134	+ background-color: #d2e9ff;
	135	+ border-radius: 20px;
	136	+}
	137	+
	138	+.blue-box div p:nth-child(1) {
	139	+ color: #386ea5;
	140	+}
	141	+
	142	+.purple-box {
	143	+ width: 200px;
	144	+ padding: 15px;
	145	+ background-color: #e9ebff;
	146	+ border-radius: 20px;
	147	+ transform: translateY(30px);
	148	+}
	149	+
	150	+.purple-box div p:nth-child(1) {
	151	+ color: #80649b;
	152	+}
	153	+
	154	+.ivory-box {
	155	+ width: 200px;
	156	+ padding: 15px;
	157	+ background-color: #f8f9fa;
	158	+ border-radius: 20px;
	159	+}
	160	+
	161	+.ivory-box div p:nth-child(1) {
	162	+ color: #242a30;
	163	+}
	164	+
	165	+.hvr-grow {
	166	+ display: inline-block;
	167	+ vertical-align: middle;
	168	+ /* -webkit-transform: perspective(1px) translateZ(0); */
	169	+ /* transform: perspective(1px) translateZ(0); */
	170	+ box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	171	+ -webkit-transition-duration: 0.3s;
	172	+ transition-duration: 0.3s;
	173	+ -webkit-transition-property: transform;
	174	+ transition-property: transform;
	175	+}
	176	+
	177	+.hvr-grow:hover,
	178	+.hvr-grow:focus,
	179	+.hvr-grow:active {
	180	+ -webkit-transform: scale(1.1);
	181	+ transform: scale(1.1);
	182	+}
	183	+
	184	+.focus-in-contract {
	185	+ -webkit-animation: focus-in-contract 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	186	+ animation: focus-in-contract 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	187	+}
	188	+
	189	+
	190	+@keyframes focus-in-contract {
	191	+ 0% {
	192	+ letter-spacing: 1em;
	193	+ -webkit-filter: blur(12px);
	194	+ filter: blur(12px);
	195	+ opacity: 0;
	196	+ }
	197	+
	198	+ 100% {
	199	+ -webkit-filter: blur(0px);
	200	+ filter: blur(0px);
	201	+ opacity: 1;
	202	+ }
	203	+}
	204	+
	205	+@keyframes tracking-in-expand {
	206	+ 0% {
	207	+ letter-spacing: -0.5em;
	208	+ opacity: 0;
	209	+ }
	210	+ 40% {
	211	+ opacity: 0.6;
	212	+ }
	213	+ 100% {
	214	+ opacity: 1;
	215	+ }
	216	+ }
	217	+ @keyframes tracking-in-contract {
	218	+ 0% {
	219	+ letter-spacing: 1em;
	220	+ opacity: 0;
	221	+ }
	222	+ 40% {
	223	+ opacity: 0.6;
	224	+ }
	225	+ 100% {
	226	+ letter-spacing: normal;
	227	+ opacity: 1;
	228	+ }
	229	+ }
	230	+
	231	+
	232	+
	233	+ .swiper2{
	234	+ width: 100%;
	235	+ height: 100%;
	236	+ }
	237	+
	238	+ .swiper2 .swiper-slide {
	239	+
	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	+

d4907ef

932bc85

resources/img/common/mobility.png (Binary)

--- resources/img/common/mobility.png

+++ resources/img/common/mobility.png

Binary file is not shown

d4907ef

932bc85

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


 </body>
 <style>
     #header {
-        background-color: #213F99;
+        background-color: transparent;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
     }
     .header-area{
-        width: 1200px;
+        width: 100%;
         margin: 0 auto;
-        padding: 20px 0 15px 0;
+        padding: 20px 30px 15px 30px;
     }
    
 

d4907ef

932bc85

views/layout/footer.html

--- views/layout/footer.html

+++ views/layout/footer.html


         background-color: #1e1e1e;
         width: 100%;
         border: 0px;
-        width: 100%;
         padding: 60px 0;
     }
     .footer-wrap{

d4907ef

932bc85

views/main.html

--- views/main.html

+++ views/main.html


     <link rel="stylesheet" href="../../resources/css/component.css">
     <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>우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
+                        <div class="text-area flex align-end ">
+                            <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="slide-wrap ">
+                <div class="slide-wrap pt60">
                     <div class="text-area slide-section">
                         <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
                                 class="text-event">혁신으로 선도</span>합니다.</p>
-                        <p>테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
+                        <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
                     </div>
                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="slide-wrap slide-solution">
-                    <div class="text-area ">
-                        <div style="width: 100%;" class="mb70">
+                <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>AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
+                            <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
                                 스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
                             </p>
                         </div>
-                        <div class="flex solution-box pd15">
-                            <div class="pink-box flex-column">
-                                <img src="../resources/img/common/DATA.png" alt="">
+                        <div class="flex solution-box ">
+                            <div class="pink-box hvr-grow cursor">
+                                <img class="mb30" src="../resources/img/common/DATA.png" alt="">
                                 <div>
-                                    <p>데이터관리분야</p>
-                                    <p>데이터 관리 솔루현 Taken BI Manager</p>
+                                    <p class="mb15">데이터관리분야</p>
+                                    <p>데이터 관리 솔루션 Taken BI Manager</p>
                                 </div>
                             </div>
-                            <div class="yellow-box flex-column">
-                                <img src="../resources/img/common/smartCity.png" alt="">
+                            <div class="yellow-box hvr-grow cursor">
+                                <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
                                 <div>
-                                    <p>스마트시티 분야</p>
+                                    <p class="mb15">스마트시티 분야</p>
                                     <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
                                 </div>
                             </div>
-                            <div class="blue-box flex-column">
-                                <img src="../resources/img/common/mobility.png" alt="">
+                            <div class="blue-box hvr-grow cursor">
+                                <img class="mb30" src="../resources/img/common/mobility.png" alt="">
                                 <div>
-                                    <p>모빌리티 분야</p>
-                                    <p>AI 기반의 스마트 객체인식을 위한 CCTY</p>
+                                    <p class="mb15">모빌리티 분야</p>
+                                    <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
                                 </div>
                             </div>
-                            <div class="purple-box flex-column">
-                                <img src="../resources/img/common/smartFactory.png" alt="">
+                            <div class="purple-box hvr-grow cursor">
+                                <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
                                 <div>
-                                    <p>스마트팩토리 분야</p>
+                                    <p class="mb15">스마트팩토리 분야</p>
                                     <p>제조기업 공정 관리 모니터링 서비스</p>
                                 </div>
                             </div>
-                            <div class="ivory-box flex-column">
-                                <img src="../resources/img/common/healthCare.png" alt="">
+                            <div class="ivory-box hvr-grow cursor">
+                                <img class="mb30" src="../resources/img/common/healthCare.png" alt="">
                                 <div>
-                                    <p>헬스케어 분야</p>
+                                    <p class="mb15">헬스케어 분야</p>
                                     <p>시니어 스마트 케어 모니터링 플랫폼</p>
                                 </div>
                             </div>

                 </div>
             </div>
             <div class="swiper-slide">
-                <div class="slide-wrap">
-                    <p>POTRFOLIO</p>
+                <div class="slide-wrap pt60">
+                    <div>
+                        <div class="text-area">
+                            <p>POTRFOLIO</p>
+                        </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>
 
                 </div>
             </div>

         direction: "vertical",
         slidesPerView: 1,
         spaceBetween: 30,
+        speed: 700,
         mousewheel: true,
         pagination: {
             el: ".swiper-pagination",
             clickable: true,
         }, on: {
+
             reachEnd: function () {
                 swiper.mousewheel.disable();
                 $("#footer").show();
-            }
+            },
+            fromEdge: function () {
+                swiper.mousewheel.enable();
+                $("#footer").hide();
+            },
+            slideChange: function () {
+                var currentIndex = this.realIndex;
+                if (currentIndex === 0) {
+                    $('#header').removeClass('active');
+                } else {
+                    $('#header').addClass('active');
+                }
+            },
+
+            slideChangeTransitionEnd: function () {
+                if (this.activeIndex === 1) {
+                    $('.text-event').addClass('active');
+                    $('.sub-text').addClass('active');
+                } else {
+                    $('.text-event').removeClass('active');
+                    $('.sub-text').removeClass('active');
+                }
+                if (this.activeIndex === 2) {
+                    $('.solution-text').addClass('active');
+                    $('.solution-sub-text').addClass('active');
+                } else {
+                    $('.solution-text').removeClass('active');
+                    $('.solution-sub-text').removeClass('active');
+                }
+            },
+
+
         }
     });
 
+
     window.addEventListener('wheel', function (event) {
-        if (event.deltaY < 1) {
+        if (event.deltaY < 3) {
             swiper.mousewheel.enable();
-        } else if (event.deltaY > 1) {
+        } else if (event.deltaY > 3) {
         }
     });
 

         $("#footer").hide();
     });
 
+
+    var swiper = new Swiper(".swiper2", {
+      spaceBetween: 30,
+    //   centeredSlides: true,
+      autoplay: {
+        delay: 2000,
+        disableOnInteraction: false,
+      },
+     
+    });
+
 </script>
 
 
 
+
 <style scoped>
+    #footer {
+        display: none;
+    }
+
     html,
     body {
         position: relative;

         display: none;
     }
 
-    body {
-        background: #eee;
-        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-        font-size: 14px;
-        color: #000;
-        margin: 0;
-        padding: 0;
-    }
 
     .swiper {
         width: 100%;

         align-items: center;
     }
 
-    .swiper-slide img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
 
     #header {
         position: fixed;

     .slide-wrap {
         width: 100%;
         height: 100%;
-        padding: 59px 0 0 0;
     }
 
     .main-wrap {

 
     }
 
-    .text-event {
-        position: relative;
-        z-index: 3;
-    }
-
-    .text-event::before {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        height: 20px;
-        background-color: #fce5bf;
-        z-index: -1;
-    }
 
     .slide-solution {
-        padding-top: 235px;
+        padding: 235px 0 200px;
         font-family: 'Pretendard';
 
     }
-
-
-
-    .solution-text {
-        font-size: 4.5rem;
-        font-weight: 900;
-
-    }
-
-    .solution-box {
-        flex-wrap: nowrap;
-        gap: 40px;
-        width: 100%;
-        
-    }
-    .pink-box{
-        width: 200px;
-        padding: 15px;
-        height: 320px;
-        background-color: #ffe2e4;
-        border-radius: 20px;
-     
-    }
-    .pink-box img , .blue-box img , .yellow-box img ,.purple-box img,.ivory-box img{
-        object-fit: contain;
-     }
-    .yellow-box{
-        width: 200px;
-        height: 320px;
-        padding: 15px;
-        background-color: #f9f9e9;
-        border-radius: 20px;
-    }
-    
-    .blue-box{
-        width: 200px;
-        height: 320px;
-        padding: 15px;
-        background-color: #d2e9ff;
-        border-radius: 20px;
-    }
-   
-     .purple-box{
-        width: 200px;
-        height: 320px;
-        padding: 15px;
-        background-color: #e9ebff;
-        border-radius: 20px;
-     }
-     .ivory-box{
-        width: 200px;
-        height: 320px;
-        padding: 15px;
-        background-color: #f8f9fa;
-        border-radius: 20px;
-     }
 </style>
 
 </html>

Add a comment

Open 0
Closed 0

List

...	...	@@ -390,6 +390,9 @@
390	390	.mb10 {
391	391	margin-bottom: 10px;
392	392	}
	393	+.mb15 {
	394	+ margin-bottom: 15px;
	395	+}
393	396
394	397	.mb20 {
395	398	margin-bottom: 20px;

...	...	@@ -19,6 +19,7 @@
19	19	body {
20	20	min-width: 1200px;
21	21	background-color: #f7f6fb;
	22	+
22	23	}
23	24
24	25

...	...	@@ -12,6 +12,7 @@
12	12	<link rel="stylesheet" href="../../resources/css/component.css">
13	13	<link rel="stylesheet" href="../../resources/css/common.css">
14	14	<link rel="stylesheet" href="../../resources/css/responsive.css">
	15	+
15	16	<title>TAKENSOFT</title>
16	17	</head>
17	18
...	...	@@ -23,63 +24,63 @@
23	24	<div class="swiper-slide">
24	25	<div class="slide-wrap">
25	26	<div class="main-wrap">
26		- <div class="text-area flex align-end">
27		- <h2>우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
	27	+ <div class="text-area flex align-end ">
	28	+ <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2>
28	29	</div>
29	30	</div>
30	31	</div>
31	32	</div>
32	33	<div class="swiper-slide">
33		- <div class="slide-wrap ">
	34	+ <div class="slide-wrap pt60">
34	35	<div class="text-area slide-section">
35	36	<p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span
36	37	class="text-event">혁신으로 선도</span>합니다.</p>
37		- <p>테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
	38	+ <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p>
38	39	</div>
39	40	</div>
40	41	</div>
41	42	<div class="swiper-slide">
42		- <div class="slide-wrap slide-solution">
43		- <div class="text-area ">
44		- <div style="width: 100%;" class="mb70">
	43	+ <div class="slide-wrap pt60 slide-solution">
	44	+ <div class="text-area flex align-center">
	45	+ <div style="width: 100%;" class="pb40">
45	46	<p class=" solution-text pb30">테이큰 소프트는 ...</p>
46		- <p>AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
	47	+ <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br>
47	48	스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다.
48	49	</p>
49	50	</div>
50		- <div class="flex solution-box pd15">
51		- <div class="pink-box flex-column">
52		- <img src="../resources/img/common/DATA.png" alt="">
	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="">
53	54	<div>
54		- <p>데이터관리분야</p>
55		- <p>데이터 관리 솔루현 Taken BI Manager</p>
	55	+ <p class="mb15">데이터관리분야</p>
	56	+ <p>데이터 관리 솔루션 Taken BI Manager</p>
56	57	</div>
57	58	</div>
58		- <div class="yellow-box flex-column">
59		- <img src="../resources/img/common/smartCity.png" alt="">
	59	+ <div class="yellow-box hvr-grow cursor">
	60	+ <img class="mb30" src="../resources/img/common/smartCity.png" alt="">
60	61	<div>
61		- <p>스마트시티 분야</p>
	62	+ <p class="mb15">스마트시티 분야</p>
62	63	<p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p>
63	64	</div>
64	65	</div>
65		- <div class="blue-box flex-column">
66		- <img src="../resources/img/common/mobility.png" alt="">
	66	+ <div class="blue-box hvr-grow cursor">
	67	+ <img class="mb30" src="../resources/img/common/mobility.png" alt="">
67	68	<div>
68		- <p>모빌리티 분야</p>
69		- <p>AI 기반의 스마트 객체인식을 위한 CCTY</p>
	69	+ <p class="mb15">모빌리티 분야</p>
	70	+ <p>AI 기반의 스마트 객체인식을 위한 CCTV</p>
70	71	</div>
71	72	</div>
72		- <div class="purple-box flex-column">
73		- <img src="../resources/img/common/smartFactory.png" alt="">
	73	+ <div class="purple-box hvr-grow cursor">
	74	+ <img class="mb30" src="../resources/img/common/smartFactory.png" alt="">
74	75	<div>
75		- <p>스마트팩토리 분야</p>
	76	+ <p class="mb15">스마트팩토리 분야</p>
76	77	<p>제조기업 공정 관리 모니터링 서비스</p>
77	78	</div>
78	79	</div>
79		- <div class="ivory-box flex-column">
80		- <img src="../resources/img/common/healthCare.png" alt="">
	80	+ <div class="ivory-box hvr-grow cursor">
	81	+ <img class="mb30" src="../resources/img/common/healthCare.png" alt="">
81	82	<div>
82		- <p>헬스케어 분야</p>
	83	+ <p class="mb15">헬스케어 분야</p>
83	84	<p>시니어 스마트 케어 모니터링 플랫폼</p>
84	85	</div>
85	86	</div>
...	...	@@ -89,8 +90,25 @@
89	90	</div>
90	91	</div>
91	92	<div class="swiper-slide">
92		- <div class="slide-wrap">
93		- <p>POTRFOLIO</p>
	93	+ <div class="slide-wrap pt60">
	94	+ <div>
	95	+ <div class="text-area">
	96	+ <p>POTRFOLIO</p>
	97	+ </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>
	111	+ </div>
94	112
95	113	</div>
96	114	</div>
...	...	@@ -112,22 +130,56 @@
112	130	direction: "vertical",
113	131	slidesPerView: 1,
114	132	spaceBetween: 30,
	133	+ speed: 700,
115	134	mousewheel: true,
116	135	pagination: {
117	136	el: ".swiper-pagination",
118	137	clickable: true,
119	138	}, on: {
	139	+
120	140	reachEnd: function () {
121	141	swiper.mousewheel.disable();
122	142	$("#footer").show();
123		- }
	143	+ },
	144	+ fromEdge: function () {
	145	+ swiper.mousewheel.enable();
	146	+ $("#footer").hide();
	147	+ },
	148	+ slideChange: function () {
	149	+ var currentIndex = this.realIndex;
	150	+ if (currentIndex === 0) {
	151	+ $('#header').removeClass('active');
	152	+ } else {
	153	+ $('#header').addClass('active');
	154	+ }
	155	+ },
	156	+
	157	+ slideChangeTransitionEnd: function () {
	158	+ if (this.activeIndex === 1) {
	159	+ $('.text-event').addClass('active');
	160	+ $('.sub-text').addClass('active');
	161	+ } else {
	162	+ $('.text-event').removeClass('active');
	163	+ $('.sub-text').removeClass('active');
	164	+ }
	165	+ if (this.activeIndex === 2) {
	166	+ $('.solution-text').addClass('active');
	167	+ $('.solution-sub-text').addClass('active');
	168	+ } else {
	169	+ $('.solution-text').removeClass('active');
	170	+ $('.solution-sub-text').removeClass('active');
	171	+ }
	172	+ },
	173	+
	174	+
124	175	}
125	176	});
126	177
	178	+
127	179	window.addEventListener('wheel', function (event) {
128		- if (event.deltaY < 1) {
	180	+ if (event.deltaY < 3) {
129	181	swiper.mousewheel.enable();
130		- } else if (event.deltaY > 1) {
	182	+ } else if (event.deltaY > 3) {
131	183	}
132	184	});
133	185
...	...	@@ -138,11 +190,27 @@
138	190	$("#footer").hide();
139	191	});
140	192
	193	+
	194	+ var swiper = new Swiper(".swiper2", {
	195	+ spaceBetween: 30,
	196	+ // centeredSlides: true,
	197	+ autoplay: {
	198	+ delay: 2000,
	199	+ disableOnInteraction: false,
	200	+ },
	201	+
	202	+ });
	203	+
141	204	</script>
142	205
143	206
144	207
	208	+
145	209	<style scoped>
	210	+ #footer {
	211	+ display: none;
	212	+ }
	213	+
146	214	html,
147	215	body {
148	216	position: relative;
...	...	@@ -155,14 +223,6 @@
155	223	display: none;
156	224	}
157	225
158		- body {
159		- background: #eee;
160		- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
161		- font-size: 14px;
162		- color: #000;
163		- margin: 0;
164		- padding: 0;
165		- }
166	226
167	227	.swiper {
168	228	width: 100%;
...	...	@@ -178,12 +238,6 @@
178	238	align-items: center;
179	239	}
180	240
181		- .swiper-slide img {
182		- display: block;
183		- width: 100%;
184		- height: 100%;
185		- object-fit: cover;
186		- }
187	241
188	242	#header {
189	243	position: fixed;
...	...	@@ -194,7 +248,6 @@
194	248	.slide-wrap {
195	249	width: 100%;
196	250	height: 100%;
197		- padding: 59px 0 0 0;
198	251	}
199	252
200	253	.main-wrap {
...	...	@@ -245,83 +298,12 @@
245	298
246	299	}
247	300
248		- .text-event {
249		- position: relative;
250		- z-index: 3;
251		- }
252		-
253		- .text-event::before {
254		- content: '';
255		- position: absolute;
256		- bottom: 0;
257		- left: 0;
258		- width: 100%;
259		- height: 20px;
260		- background-color: #fce5bf;
261		- z-index: -1;
262		- }
263	301
264	302	.slide-solution {
265		- padding-top: 235px;
	303	+ padding: 235px 0 200px;
266	304	font-family: 'Pretendard';
267	305
268	306	}
269		-
270		-
271		-
272		- .solution-text {
273		- font-size: 4.5rem;
274		- font-weight: 900;
275		-
276		- }
277		-
278		- .solution-box {
279		- flex-wrap: nowrap;
280		- gap: 40px;
281		- width: 100%;
282		-
283		- }
284		- .pink-box{
285		- width: 200px;
286		- padding: 15px;
287		- height: 320px;
288		- background-color: #ffe2e4;
289		- border-radius: 20px;
290		-
291		- }
292		- .pink-box img , .blue-box img , .yellow-box img ,.purple-box img,.ivory-box img{
293		- object-fit: contain;
294		- }
295		- .yellow-box{
296		- width: 200px;
297		- height: 320px;
298		- padding: 15px;
299		- background-color: #f9f9e9;
300		- border-radius: 20px;
301		- }
302		-
303		- .blue-box{
304		- width: 200px;
305		- height: 320px;
306		- padding: 15px;
307		- background-color: #d2e9ff;
308		- border-radius: 20px;
309		- }
310		-
311		- .purple-box{
312		- width: 200px;
313		- height: 320px;
314		- padding: 15px;
315		- background-color: #e9ebff;
316		- border-radius: 20px;
317		- }
318		- .ivory-box{
319		- width: 200px;
320		- height: 320px;
321		- padding: 15px;
322		- background-color: #f8f9fa;
323		- border-radius: 20px;
324		- }
325	307	</style>
326	308
327	309	</html> (No newline at end of file)

Delete comment