

240329 김하영
@9f39c7e20e6ebb2f1db128a8313f16f7f8b1f250
--- resources/css/font.css
... | ... | @@ -1,27 +0,0 @@ |
1 | -@font-face { | |
2 | - font-family: 'Pretendard'; | |
3 | - src: url('../font/PretendardVariable.woff2') format('woff'); | |
4 | - font-weight: 400; | |
5 | - font-style: normal; | |
6 | -} | |
7 | - | |
8 | -@font-face { | |
9 | - font-family: "GmarketSansM"; | |
10 | - src: url("/client/resources/font/GmarketSansMedium.woff") format("woff"); | |
11 | - font-weight: normal; | |
12 | - font-style: normal; | |
13 | -} | |
14 | - | |
15 | -@font-face { | |
16 | - font-family: "GmarketSansL"; | |
17 | - src: url("/client/resources/font/GmarketSansLight.woff") format("woff"); | |
18 | - font-weight: normal; | |
19 | - font-style: normal; | |
20 | -} | |
21 | - | |
22 | -@font-face { | |
23 | - font-family: "GmarketSansB"; | |
24 | - src: url("/client/resources/font/GmarketSansBold.woff") format("woff"); | |
25 | - font-weight: bold; | |
26 | - font-style: normal; | |
27 | -}(No newline at end of file) |
--- resources/css/reset.css
+++ resources/css/reset.css
... | ... | @@ -1,4 +1,31 @@ |
1 | 1 |
@charset "utf-8"; |
2 |
+@font-face { |
|
3 |
+ font-family: 'Pretendard'; |
|
4 |
+ src: url('../font/PretendardVariable.woff2') format('woff'); |
|
5 |
+ font-weight: 400; |
|
6 |
+ font-style: normal; |
|
7 |
+} |
|
8 |
+ |
|
9 |
+@font-face { |
|
10 |
+ font-family: "GmarketSansM"; |
|
11 |
+ src: url("/client/resources/font/GmarketSansMedium.woff") format("woff"); |
|
12 |
+ font-weight: normal; |
|
13 |
+ font-style: normal; |
|
14 |
+} |
|
15 |
+ |
|
16 |
+@font-face { |
|
17 |
+ font-family: "GmarketSansL"; |
|
18 |
+ src: url("/client/resources/font/GmarketSansLight.woff") format("woff"); |
|
19 |
+ font-weight: normal; |
|
20 |
+ font-style: normal; |
|
21 |
+} |
|
22 |
+ |
|
23 |
+@font-face { |
|
24 |
+ font-family: "GmarketSansB"; |
|
25 |
+ src: url("/client/resources/font/GmarketSansBold.woff") format("woff"); |
|
26 |
+ font-weight: bold; |
|
27 |
+ font-style: normal; |
|
28 |
+} |
|
2 | 29 |
|
3 | 30 |
* { |
4 | 31 |
padding: 0; |
--- resources/css/style.css
+++ resources/css/style.css
... | ... | @@ -1,21 +1,58 @@ |
1 | 1 |
@charset "utf-8"; |
2 |
+.text-area { |
|
3 |
+ width: 1200px; |
|
4 |
+ height: 100%; |
|
5 |
+ margin: auto; |
|
6 |
+ text-align: center; |
|
7 |
+} |
|
2 | 8 |
|
3 | 9 |
#header.active { |
4 |
-border-bottom: 1px solid #ced4da; |
|
5 |
-background-color: white; |
|
10 |
+ border-bottom: 1px solid #ced4da; |
|
11 |
+ background-color: white; |
|
6 | 12 |
} |
7 |
-#header.active .header nav li a{ |
|
8 |
- color: #333; |
|
9 | 13 |
|
14 |
+#header.active .header nav li a { |
|
15 |
+ color: #333; |
|
16 |
+ |
|
10 | 17 |
} |
11 |
-#header.active .header .logo{ |
|
18 |
+#header.active .header nav ul li ul.dropdown { |
|
19 |
+ background-color: #fff; |
|
20 |
+} |
|
21 |
+ |
|
22 |
+#header.active .header .logo { |
|
12 | 23 |
background: url(../img/component/logo-color.png) no-repeat; |
13 | 24 |
width: 200px; |
14 | 25 |
background-size: contain; |
15 | 26 |
height: 25px; |
16 | 27 |
|
17 |
- |
|
28 |
+ |
|
18 | 29 |
} |
30 |
+.slide-back{ |
|
31 |
+ background: url(../img/common/main-2.png)no-repeat; |
|
32 |
+ width: 0; |
|
33 |
+ height: 100%; |
|
34 |
+ background-position: center; |
|
35 |
+ background-size: cover; |
|
36 |
+ opacity: 0; |
|
37 |
+} |
|
38 |
+.slide-back.active{ |
|
39 |
+ animation: slideIn 1s forwards; |
|
40 |
+ overflow: hidden; |
|
41 |
+ |
|
42 |
+} |
|
43 |
+ |
|
44 |
+@keyframes slideIn { |
|
45 |
+ from { |
|
46 |
+ width: 0; |
|
47 |
+ opacity: 0; |
|
48 |
+ } |
|
49 |
+ to { |
|
50 |
+ width: 100%; |
|
51 |
+ opacity: 1; |
|
52 |
+ } |
|
53 |
+ } |
|
54 |
+ |
|
55 |
+ |
|
19 | 56 |
.text-event { |
20 | 57 |
position: relative; |
21 | 58 |
z-index: 3; |
... | ... | @@ -31,8 +68,10 @@ |
31 | 68 |
height: 23px; |
32 | 69 |
z-index: -1; |
33 | 70 |
margin: 5px 0 0; |
34 |
- transition: all 0.4s ease-in-out; |
|
35 |
- transition-duration: 0.3s; |
|
71 |
+ transition: all 1s ease-in-out; |
|
72 |
+ transition-duration: 1s; |
|
73 |
+ animation-delay: 1s; |
|
74 |
+ |
|
36 | 75 |
opacity: 0; |
37 | 76 |
background-color: #fce5bf; |
38 | 77 |
} |
... | ... | @@ -52,29 +91,87 @@ |
52 | 91 |
opacity: 1; |
53 | 92 |
-webkit-animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; |
54 | 93 |
animation: focus-in-contract 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; |
55 |
- animation-delay: 0.5s; |
|
94 |
+ animation-delay: 1s; |
|
56 | 95 |
} |
57 |
- |
|
96 |
+.sub-text-area{ |
|
97 |
+ text-align: center; |
|
98 |
+} |
|
58 | 99 |
.solution-text { |
59 | 100 |
font-size: 4.5rem; |
60 | 101 |
font-weight: 900; |
61 | 102 |
opacity: 0; |
62 | 103 |
} |
104 |
+.box1,.box2,.box3,.box4,.box5,.box6{ |
|
105 |
+ width: 100%; |
|
106 |
+ height: 100%; |
|
107 |
+ border-radius: 20px; |
|
108 |
+ background-size: cover; |
|
109 |
+ padding:214px 10px 10px 10px; |
|
110 |
+ color: #fff; |
|
111 |
+ |
|
112 |
+ text-align: left; |
|
113 |
+} |
|
114 |
+.box2,.box4{ |
|
115 |
+ transform: translateY(30px); |
|
116 |
+} |
|
117 |
+.box1{ |
|
118 |
+ background: url(../img/common/img-box1.png) no-repeat; |
|
119 |
+ |
|
120 |
+} |
|
121 |
+.box2{ |
|
122 |
+ background: url(../img/common/img-box2.png) no-repeat; |
|
123 |
+ |
|
124 |
+} |
|
125 |
+.box3{ |
|
126 |
+ background: url(../img/common/img-box3.png) no-repeat; |
|
127 |
+ |
|
128 |
+} |
|
129 |
+.box4{ |
|
130 |
+ background: url(../img/common/img-box4.png) no-repeat; |
|
131 |
+ |
|
132 |
+} |
|
133 |
+.box5{ |
|
134 |
+ background: url(../img/common/img-box5.png) no-repeat; |
|
135 |
+ |
|
136 |
+} |
|
137 |
+.box6{ |
|
138 |
+ background: url(../img/common/img-box6.png) no-repeat; |
|
139 |
+ |
|
140 |
+} |
|
141 |
+.box{ |
|
142 |
+ opacity: 0; |
|
143 |
+ cursor: pointer; |
|
144 |
+} |
|
145 |
+.box:hover{ |
|
146 |
+ transform: scale(1.1); |
|
147 |
+ transition: all 0.5s ease; |
|
148 |
+} |
|
149 |
+@keyframes fadeIn { |
|
150 |
+ from { opacity: 0; } |
|
151 |
+ to { opacity: 1; } |
|
152 |
+ } |
|
153 |
+ |
|
154 |
+ .box.active { |
|
155 |
+ animation-name: fadeIn; |
|
156 |
+ animation-duration: 1s; |
|
157 |
+ animation-fill-mode: both; |
|
158 |
+ } |
|
63 | 159 |
|
64 | 160 |
.solution-text.active { |
65 | 161 |
|
66 | 162 |
-webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; |
67 | 163 |
animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; |
68 | 164 |
|
69 |
- |
|
165 |
+ |
|
70 | 166 |
} |
71 |
-.solution-sub-text{ |
|
167 |
+ |
|
168 |
+.solution-sub-text { |
|
72 | 169 |
opacity: 0; |
73 | 170 |
} |
74 |
-.solution-sub-text.active{ |
|
75 |
- -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; |
|
76 |
- animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; |
|
77 |
- animation-delay: 0.5s; |
|
171 |
+ |
|
172 |
+.solution-sub-text.active { |
|
173 |
+ -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; |
|
174 |
+ animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; |
|
78 | 175 |
} |
79 | 176 |
|
80 | 177 |
|
... | ... | @@ -84,7 +181,7 @@ |
84 | 181 |
width: 100%; |
85 | 182 |
height: 320px; |
86 | 183 |
text-align: center; |
87 |
- |
|
184 |
+ |
|
88 | 185 |
} |
89 | 186 |
|
90 | 187 |
.pink-box img, |
... | ... | @@ -117,9 +214,9 @@ |
117 | 214 |
|
118 | 215 |
.pink-box { |
119 | 216 |
background: url(../img/common/box2.png) no-repeat; |
120 |
- width: 208px; |
|
217 |
+ width: 228px; |
|
121 | 218 |
height: 330px; |
122 |
- background-size: 208px 330px; |
|
219 |
+ background-size: 228px 330px; |
|
123 | 220 |
transform: translateY(-40px); |
124 | 221 |
} |
125 | 222 |
|
... | ... | @@ -129,11 +226,19 @@ |
129 | 226 |
|
130 | 227 |
} |
131 | 228 |
|
229 |
+.pink-box div { |
|
230 |
+ transform: translateY(-40px); |
|
231 |
+} |
|
232 |
+ |
|
233 |
+/* .pink-box img { |
|
234 |
+ transform: translateY(-60px); |
|
235 |
+} */ |
|
236 |
+ |
|
132 | 237 |
.yellow-box { |
133 | 238 |
background: url(../img/common/box4.png) no-repeat; |
134 | 239 |
width: 353px; |
135 | 240 |
height: 203px; |
136 |
- background-size: contain; |
|
241 |
+ background-size: 353px 203px; |
|
137 | 242 |
transform: translateY(-40px); |
138 | 243 |
} |
139 | 244 |
|
... | ... | @@ -141,17 +246,32 @@ |
141 | 246 |
color: #a2a185; |
142 | 247 |
} |
143 | 248 |
|
249 |
+.yellow-box div { |
|
250 |
+ transform: translateY(-100px); |
|
251 |
+} |
|
252 |
+ |
|
253 |
+.yellow-box img { |
|
254 |
+ transform: translateY(-80px); |
|
255 |
+} |
|
144 | 256 |
|
145 | 257 |
.blue-box { |
146 | 258 |
background: url(../img/common/box5.png) no-repeat; |
147 |
- width: 306px; |
|
259 |
+ width: 280px; |
|
148 | 260 |
height: 204px; |
149 |
- background-size: 306px 204px; |
|
261 |
+ background-size: 280px 204px; |
|
150 | 262 |
transform: translateY(-40px); |
151 | 263 |
} |
152 | 264 |
|
153 | 265 |
.blue-box div p:nth-child(1) { |
154 | 266 |
color: #386ea5; |
267 |
+} |
|
268 |
+ |
|
269 |
+.blue-box div { |
|
270 |
+ transform: translateY(-100px); |
|
271 |
+} |
|
272 |
+ |
|
273 |
+.blue-box img { |
|
274 |
+ transform: translateY(-60px); |
|
155 | 275 |
} |
156 | 276 |
|
157 | 277 |
.purple-box { |
... | ... | @@ -166,14 +286,25 @@ |
166 | 286 |
color: #80649b; |
167 | 287 |
} |
168 | 288 |
|
169 |
-.ivory-box { |
|
170 |
- background: url(../img/common/box1.png) no-repeat; |
|
171 |
- width: 335px; |
|
289 |
+.purple-box div { |
|
290 |
+ transform: translateY(-60px); |
|
172 | 291 |
} |
292 |
+ |
|
293 |
+.purple-box img { |
|
294 |
+ transform: translateY(-50px); |
|
295 |
+} |
|
296 |
+ |
|
297 |
+.ivory-box { |
|
298 |
+ background: url(../img/common/box1.png) no-repeat; |
|
299 |
+ width: 305px; |
|
300 |
+ background-size: contain; |
|
301 |
+} |
|
302 |
+ |
|
173 | 303 |
.ivory-box div { |
174 | 304 |
transform: translateY(-30px); |
175 | 305 |
|
176 | 306 |
} |
307 |
+ |
|
177 | 308 |
.ivory-box img { |
178 | 309 |
transform: translateY(-40px); |
179 | 310 |
} |
... | ... | @@ -198,7 +329,7 @@ |
198 | 329 |
.hvr-grow:focus, |
199 | 330 |
.hvr-grow:active { |
200 | 331 |
-webkit-transform: scale(1.1); |
201 |
- transform: scale(1.1); |
|
332 |
+ transform: scale(1.0); |
|
202 | 333 |
} |
203 | 334 |
|
204 | 335 |
.focus-in-contract { |
... | ... | @@ -224,70 +355,352 @@ |
224 | 355 |
|
225 | 356 |
@keyframes tracking-in-expand { |
226 | 357 |
0% { |
227 |
- letter-spacing: -0.5em; |
|
228 |
- opacity: 0; |
|
358 |
+ letter-spacing: -0.5em; |
|
359 |
+ opacity: 0; |
|
229 | 360 |
} |
361 |
+ |
|
230 | 362 |
40% { |
231 |
- opacity: 0.6; |
|
363 |
+ opacity: 0.6; |
|
232 | 364 |
} |
365 |
+ |
|
233 | 366 |
100% { |
234 |
- opacity: 1; |
|
367 |
+ opacity: 1; |
|
235 | 368 |
} |
236 |
- } |
|
237 |
- @keyframes tracking-in-contract { |
|
369 |
+} |
|
370 |
+ |
|
371 |
+@keyframes tracking-in-contract { |
|
238 | 372 |
0% { |
239 |
- letter-spacing: 1em; |
|
240 |
- opacity: 0; |
|
373 |
+ letter-spacing: 1em; |
|
374 |
+ opacity: 0; |
|
241 | 375 |
} |
376 |
+ |
|
242 | 377 |
40% { |
243 |
- opacity: 0.6; |
|
378 |
+ opacity: 0.6; |
|
244 | 379 |
} |
380 |
+ |
|
245 | 381 |
100% { |
246 |
- letter-spacing: normal; |
|
247 |
- opacity: 1; |
|
382 |
+ letter-spacing: normal; |
|
383 |
+ opacity: 1; |
|
248 | 384 |
} |
249 |
- } |
|
250 |
- |
|
385 |
+} |
|
251 | 386 |
|
252 | 387 |
|
253 | 388 |
|
254 | 389 |
|
255 | 390 |
.portfolio { |
256 |
- /* padding: 100px 30px; */ |
|
391 |
+ padding: 100px 30px; |
|
257 | 392 |
height: 100%; |
258 |
- width: 100%; |
|
259 |
- |
|
260 |
- |
|
261 | 393 |
} |
262 | 394 |
|
263 |
-.portfolio-title { |
|
264 |
- font-size: 8rem; |
|
265 |
- color: #fff; |
|
266 |
- font-weight: bold; |
|
267 |
- text-align: center; |
|
268 |
- margin-bottom: 1.5rem; |
|
395 |
+.portfolio.on { |
|
396 |
+ animation-duration: 3s; |
|
397 |
+ animation-name: slidein; |
|
398 |
+} |
|
399 |
+ |
|
400 |
+.portfolio-text { |
|
401 |
+ font-size: 4.5rem; |
|
402 |
+ font-weight: 900; |
|
403 |
+ position: relative; |
|
404 |
+ text-align: left; |
|
269 | 405 |
} |
270 | 406 |
|
271 | 407 |
.portfolio-title span { |
272 | 408 |
color: transparent; |
273 | 409 |
-webkit-text-stroke: 1px white; |
274 | 410 |
} |
275 |
-.innerSwiper { |
|
276 |
- /* background-color: #000; */ |
|
277 |
- width: 100%; |
|
411 |
+ |
|
412 |
+.innerSwiper{ |
|
413 |
+ height: 100%; |
|
278 | 414 |
} |
279 | 415 |
.innerSwiper .swiper-slide { |
280 | 416 |
text-align: center; |
281 |
- border: 1px solid blue; |
|
282 | 417 |
font-size: 18px; |
283 |
- |
|
418 |
+ display: block; |
|
284 | 419 |
} |
285 | 420 |
|
286 | 421 |
.innerSwiper .swiper-slide img { |
287 |
- display: block; |
|
288 | 422 |
width: 100%; |
289 |
- height: 60%; |
|
423 |
+ height: 100%; |
|
290 | 424 |
background-color: #fff; |
291 | 425 |
object-fit: cover; |
292 | 426 |
margin-bottom: 20px; |
427 |
+ background-color: #F8F9FA; |
|
428 |
+ border-radius: 10px; |
|
429 |
+ box-shadow: 2px 2px 5px #5454541b; |
|
430 |
+ |
|
431 |
+ padding: 30px 30px; |
|
432 |
+} |
|
433 |
+ |
|
434 |
+ |
|
435 |
+ |
|
436 |
+ |
|
437 |
+/* .slide1 ,.slide2,.slide3,.slide4,.slide5,.slide6{ |
|
438 |
+ border-radius: 10px; |
|
439 |
+ width: 100%; |
|
440 |
+ height: 400px; |
|
441 |
+ box-shadow: 2px 2px 5px #5454541b; |
|
442 |
+ background-color: #F8F9FA; |
|
443 |
+ |
|
444 |
+} */ |
|
445 |
+ |
|
446 |
+ |
|
447 |
+.innerSwiper-textBox{ |
|
448 |
+ height: 160px; |
|
449 |
+ padding: 15px 0 0 0; |
|
450 |
+} |
|
451 |
+.innerSwiper-title,.innerSwiper-text{ |
|
452 |
+ |
|
453 |
+ font-family: 'Pretendard'; |
|
454 |
+} |
|
455 |
+.innerSwiper-title{ |
|
456 |
+ font-size: 2.7rem; |
|
457 |
+ font-weight: 600; |
|
458 |
+ padding: 0 0 10px 0; |
|
459 |
+} |
|
460 |
+ |
|
461 |
+ |
|
462 |
+.map-text{ |
|
463 |
+ text-align: center; |
|
464 |
+ font-size: 4rem; |
|
465 |
+ font-weight: 900; |
|
466 |
+ position: relative; |
|
467 |
+} |
|
468 |
+.map-text::after{ |
|
469 |
+ content: ""; |
|
470 |
+ position: absolute; |
|
471 |
+ top: -40px; |
|
472 |
+ left: 50%; |
|
473 |
+ transform: translateX(-50%); |
|
474 |
+ background: url(../img/common/address.png) no-repeat; |
|
475 |
+ width: 30px; |
|
476 |
+ height: 30px; |
|
477 |
+ background-size: contain; |
|
478 |
+ |
|
479 |
+} |
|
480 |
+.map-btn button { |
|
481 |
+ border: 1px solid #213F99; |
|
482 |
+ padding: 10px 15px 10px 35px; |
|
483 |
+ border-radius: 30px; |
|
484 |
+ font-size: 1.4rem; |
|
485 |
+ font-weight: 600; |
|
486 |
+ color: #213F99; |
|
487 |
+ background: url(../img/common/location-dot-solid.svg) no-repeat 15px center / 15px; |
|
488 |
+ background-color: #FFFFFF; |
|
489 |
+} |
|
490 |
+ |
|
491 |
+.map-btn button.on { |
|
492 |
+ background: url(../img/common/location-dot-solid-w.svg) no-repeat 15px center / 15px, #213F99; |
|
493 |
+ color: #FFFFFF; |
|
494 |
+} |
|
495 |
+.address-box{ |
|
496 |
+ border: 2px solid #213F99; |
|
497 |
+ box-shadow: 5px 5px 0px #213F99; |
|
498 |
+ transform: translateY(-30px); |
|
499 |
+ position: relative; |
|
500 |
+ background-color: #fff; |
|
501 |
+ width: 90%; |
|
502 |
+ margin: 0 auto; |
|
503 |
+ z-index: 5; |
|
504 |
+ border-radius: 10px; |
|
505 |
+ padding: 12px 30px; |
|
506 |
+} |
|
507 |
+.address-tile{ |
|
508 |
+ font-size: 2.5rem; |
|
509 |
+ font-weight: 600; |
|
510 |
+ color: #213F99; |
|
511 |
+ width: 150px; |
|
512 |
+ position: relative; |
|
513 |
+} |
|
514 |
+.address-tile::after{ |
|
515 |
+ position: absolute; |
|
516 |
+ content: ''; |
|
517 |
+ top: 50%; |
|
518 |
+ left: 20px; |
|
519 |
+ transform: translateY(-50%); |
|
520 |
+ width: 20px; |
|
521 |
+ height: 20px; |
|
522 |
+ |
|
523 |
+ background: url(../img/common/location-dot-solid.svg)no-repeat; |
|
524 |
+} |
|
525 |
+.address-subtitle{ |
|
526 |
+ padding: 5px 0; |
|
527 |
+} |
|
528 |
+.map{ |
|
529 |
+ box-shadow: 2px 2px 10px #3333333d; |
|
530 |
+} |
|
531 |
+ |
|
532 |
+ |
|
533 |
+/* .scale-in-br { |
|
534 |
+ -webkit-animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; |
|
535 |
+ animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; |
|
536 |
+} |
|
537 |
+@keyframes scale-in-br { |
|
538 |
+ 0% { |
|
539 |
+ -webkit-transform: scale(0); |
|
540 |
+ transform: scale(0); |
|
541 |
+ -webkit-transform-origin: 100% 100%; |
|
542 |
+ transform-origin: 100% 100%; |
|
543 |
+ opacity: 1; |
|
544 |
+ } |
|
545 |
+ 100% { |
|
546 |
+ -webkit-transform: scale(1); |
|
547 |
+ transform: scale(1); |
|
548 |
+ -webkit-transform-origin: 100% 100%; |
|
549 |
+ transform-origin: 100% 100%; |
|
550 |
+ opacity: 1; |
|
551 |
+ } |
|
552 |
+ } |
|
553 |
+ */ |
|
554 |
+ |
|
555 |
+ |
|
556 |
+ |
|
557 |
+ |
|
558 |
+footer { |
|
559 |
+ width: 100%; |
|
560 |
+ height: 100px; |
|
561 |
+ padding: 30px; |
|
562 |
+ position: relative; |
|
563 |
+ bottom: 0; |
|
564 |
+ transition: all 0.5s; |
|
565 |
+ z-index: 9999; |
|
566 |
+ opacity: 0; |
|
567 |
+ background-color: #333; |
|
568 |
+} |
|
569 |
+ |
|
570 |
+footer.on { |
|
571 |
+ opacity: 1; |
|
572 |
+ display: block; |
|
573 |
+} |
|
574 |
+ |
|
575 |
+footer>.footer-wrap { |
|
576 |
+ color: #fff; |
|
577 |
+} |
|
578 |
+ |
|
579 |
+.footer-wrap .info { |
|
580 |
+ flex: 0 0 80%; |
|
581 |
+ display: flex; |
|
582 |
+ align-items: flex-start; |
|
583 |
+} |
|
584 |
+ |
|
585 |
+.footer-wrap .info address { |
|
586 |
+ margin-right: 10%; |
|
587 |
+} |
|
588 |
+ |
|
589 |
+.footer-wrap .logo { |
|
590 |
+ flex: 0 0 20%; |
|
591 |
+} |
|
592 |
+.ft-logo{ |
|
593 |
+ padding: 1rem 0; |
|
594 |
+ |
|
595 |
+} |
|
596 |
+.footer-title { |
|
597 |
+ font-size: 1.6rem; |
|
598 |
+ font-weight: 700; |
|
599 |
+ color: #f9f9f9; |
|
600 |
+ margin-bottom: 10px; |
|
601 |
+} |
|
602 |
+ |
|
603 |
+address p:last-of-type, |
|
604 |
+.contact div p { |
|
605 |
+ margin-bottom: 5px; |
|
606 |
+} |
|
607 |
+ |
|
608 |
+address p:last-of-type, |
|
609 |
+.contact div p:last-of-type { |
|
610 |
+ margin-bottom: 0; |
|
611 |
+} |
|
612 |
+ |
|
613 |
+ |
|
614 |
+/* solution page */ |
|
615 |
+.solution-title{ |
|
616 |
+ width: 100%; |
|
617 |
+ position: relative; |
|
618 |
+} |
|
619 |
+.solution-title::after{ |
|
620 |
+ content: ''; |
|
621 |
+ position: absolute; |
|
622 |
+ top: -40px; |
|
623 |
+ left: 50%; |
|
624 |
+ background: url(../img/common/solution-after-img-1.png) no-repeat; |
|
625 |
+ background-size: 30px ; |
|
626 |
+ width: 30px; |
|
627 |
+ height: 30px; |
|
628 |
+} |
|
629 |
+.solution-title p{ |
|
630 |
+ font-size: 3.5rem; |
|
631 |
+ font-weight: bold; |
|
632 |
+ font-family: 'Pretendard'; |
|
633 |
+ |
|
634 |
+ text-align: center; |
|
635 |
+} |
|
636 |
+.taken-area{ |
|
637 |
+ width: 100%; |
|
638 |
+ height: 100%; |
|
639 |
+} |
|
640 |
+.text-after p{ |
|
641 |
+ position: relative; |
|
642 |
+} |
|
643 |
+.text-after p::after{ |
|
644 |
+ content: '·'; |
|
645 |
+ position: absolute; |
|
646 |
+ top: -5px; |
|
647 |
+ left: 6px; |
|
648 |
+ font-size: 2rem; |
|
649 |
+} |
|
650 |
+.taken-conteiner p{ |
|
651 |
+ text-align: left; |
|
652 |
+ font-family: 'Pretendard'; |
|
653 |
+ margin-bottom: 10px; |
|
654 |
+} |
|
655 |
+.taken-area img{ |
|
656 |
+ width: 90%; |
|
657 |
+ /* padding: 0 30px ; */ |
|
658 |
+ |
|
659 |
+} |
|
660 |
+.taken-area p{ |
|
661 |
+ font-size: 1.4rem; |
|
662 |
+ font-weight: 600; |
|
663 |
+ padding-left: 20px; |
|
664 |
+} |
|
665 |
+ |
|
666 |
+.taken-box{ |
|
667 |
+ width: 100%; |
|
668 |
+ flex-wrap: nowrap; |
|
669 |
+ gap: 30px; |
|
670 |
+} |
|
671 |
+.taken-box p{ |
|
672 |
+ width: 100%; |
|
673 |
+ font-family: 'Pretendard'; |
|
674 |
+ background-color: #F8F9FA; |
|
675 |
+ padding: 13px; |
|
676 |
+ font-size: 1.5rem; |
|
677 |
+ border-radius: 10px; |
|
678 |
+} |
|
679 |
+.solution-text-box{ |
|
680 |
+ width: 100%; |
|
681 |
+ padding: 15px 40px; |
|
682 |
+ border-radius: 10px; |
|
683 |
+ box-shadow: 2px 2px 5px #3e3e3e30; |
|
684 |
+} |
|
685 |
+.solution-text-box p{ |
|
686 |
+ font-weight: 500; |
|
687 |
+ font-size: 1.4rem; |
|
688 |
+ padding-left: 20px; |
|
689 |
+} |
|
690 |
+.text-box-title{ |
|
691 |
+ font-family: 'Pretendard'; |
|
692 |
+ position: relative; |
|
693 |
+ font-weight: 600; |
|
694 |
+ font-size: 2rem; |
|
695 |
+ text-align: left; |
|
696 |
+} |
|
697 |
+.text-box-title::after{ |
|
698 |
+ position: absolute; |
|
699 |
+ content: ''; |
|
700 |
+ top: 5px; |
|
701 |
+ left: -20px; |
|
702 |
+ background: url(../img/common/solution-arrow.png) no-repeat; |
|
703 |
+ width: 10px; |
|
704 |
+ height: 10px; |
|
705 |
+ background-size: 10px; |
|
293 | 706 |
}(No newline at end of file) |
+++ resources/img/common/address.png
Binary file is not shown |
+++ resources/img/common/img-box1.png
Binary file is not shown |
+++ resources/img/common/img-box2.png
Binary file is not shown |
+++ resources/img/common/img-box3.png
Binary file is not shown |
+++ resources/img/common/img-box4.png
Binary file is not shown |
+++ resources/img/common/img-box5.png
Binary file is not shown |
+++ resources/img/common/innerimg-1.png
Binary file is not shown |
+++ resources/img/common/innerimg-2.png
Binary file is not shown |
+++ resources/img/common/innerimg-3.png
Binary file is not shown |
+++ resources/img/common/innerimg-4.png
Binary file is not shown |
+++ resources/img/common/innerimg-5.png
Binary file is not shown |
+++ resources/img/common/innerimg-6.png
Binary file is not shown |
+++ resources/img/common/location-dot-solid-w.svg
... | ... | @@ -0,0 +1,1 @@ |
1 | +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>(No newline at end of file) |
+++ resources/img/common/location-dot-solid.svg
... | ... | @@ -0,0 +1,1 @@ |
1 | +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#213f99" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>(No newline at end of file) |
+++ resources/img/common/main-2.png
Binary file is not shown |
--- resources/img/common/main.png
+++ resources/img/common/main.png
Binary file is not shown |
+++ resources/img/common/solution-after-img-1.png
Binary file is not shown |
+++ resources/img/common/solution-arrow.png
Binary file is not shown |
+++ resources/img/common/solution-img1.png
Binary file is not shown |
--- views/layout/Header.html
+++ views/layout/Header.html
... | ... | @@ -9,10 +9,23 @@ |
9 | 9 |
<div class="logo"></div> |
10 | 10 |
<nav> |
11 | 11 |
<ul> |
12 |
- <li><a href="">About Us · Business</a></li> |
|
13 |
- <li><a href="">Solution</a></li> |
|
14 |
- <li><a href="">Portfolio</a></li> |
|
15 |
- <li><a href="">Marketing</a></li> |
|
12 |
+ <li> |
|
13 |
+ <a href="#">About Us</a> |
|
14 |
+ |
|
15 |
+ </li> |
|
16 |
+ <li><a href="../../views/pages/Solution.html">Solution</a></li> |
|
17 |
+ <li> |
|
18 |
+ <a href="#">Portfolio</a> |
|
19 |
+ <ul class="dropdown "> |
|
20 |
+ <li><a href="#">Data</a></li> |
|
21 |
+ <li><a href="#">Visualization</a></li> |
|
22 |
+ <li><a href="#">Smart City</a></li> |
|
23 |
+ <li><a href="#">Data Analysis</a></li> |
|
24 |
+ <li><a href="#">Customized Consulting</a></li> |
|
25 |
+ <li><a href="#">ETC</a></li> |
|
26 |
+ </ul> |
|
27 |
+ </li> |
|
28 |
+ <li><a href="#">Marketing</a></li> |
|
16 | 29 |
</ul> |
17 | 30 |
</nav> |
18 | 31 |
</div> |
... | ... | @@ -37,18 +50,48 @@ |
37 | 50 |
.header-area { |
38 | 51 |
width: 100%; |
39 | 52 |
margin: 0 auto; |
40 |
- padding: 20px 30px 15px 30px; |
|
53 |
+ padding: 10px 30px 7px 30px; |
|
41 | 54 |
} |
42 | 55 |
|
43 | 56 |
|
44 | 57 |
nav ul li { |
45 |
- margin-left: 140px; |
|
58 |
+ width: 200px; |
|
46 | 59 |
display: inline-block; |
60 |
+ position: relative; |
|
47 | 61 |
} |
48 | 62 |
|
49 | 63 |
nav ul li a { |
50 | 64 |
color: white; |
51 | 65 |
font-size: 1.5rem; |
66 |
+ display: block; |
|
67 |
+ padding: 8px; |
|
68 |
+ text-align: center; |
|
69 |
+ } |
|
70 |
+ |
|
71 |
+ |
|
72 |
+ nav ul li ul.dropdown { |
|
73 |
+ display: none; |
|
74 |
+ position: absolute; |
|
75 |
+ top: 35px; |
|
76 |
+ right: 0; |
|
77 |
+ width: 100%; |
|
78 |
+ margin: 0 auto; |
|
79 |
+ text-align: center; |
|
80 |
+ /* height: 100px; */ |
|
81 |
+ background-color: #f9f9f943; |
|
82 |
+ transition: 0.3rem ease; |
|
83 |
+ z-index: 1; |
|
84 |
+ } |
|
85 |
+ |
|
86 |
+ nav ul li:hover ul.dropdown { |
|
87 |
+ display: block; |
|
88 |
+ } |
|
89 |
+ |
|
90 |
+ |
|
91 |
+ nav ul li ul.dropdown li a { |
|
92 |
+ display: block; |
|
93 |
+ color: #ffffff; |
|
94 |
+ text-decoration: none; |
|
52 | 95 |
} |
53 | 96 |
</style> |
54 | 97 |
|
--- views/main.html
+++ views/main.html
... | ... | @@ -6,12 +6,13 @@ |
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="../../resources/css/font.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"> |
14 |
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> |
|
15 |
+ |
|
15 | 16 |
|
16 | 17 |
|
17 | 18 |
<title>TAKENSOFT</title> |
... | ... | @@ -20,14 +21,13 @@ |
20 | 21 |
<body> |
21 | 22 |
<div id="header"></div> |
22 | 23 |
<!-- Swiper --> |
23 |
- <div class="swiper mySwiper"> |
|
24 |
+ <div class="swiper mySwiper main-wrapper"> |
|
24 | 25 |
<div class="swiper-wrapper"> |
25 | 26 |
<div class="swiper-slide"> |
26 | 27 |
<div class="slide-wrap"> |
27 | 28 |
<div class="main-wrap"> |
28 | 29 |
<div class="text-area flex align-end main-text"> |
29 | 30 |
<div> |
30 |
- <h2 class="focus-in-contract">우리의 AI 기술로 <span>실현되는</span><br> 당신의 <span>비전</span></h2> |
|
31 | 31 |
<img src="../resources/img/common/mouse.png" alt=""> |
32 | 32 |
</div> |
33 | 33 |
</div> |
... | ... | @@ -35,95 +35,188 @@ |
35 | 35 |
</div> |
36 | 36 |
</div> |
37 | 37 |
<div class="swiper-slide"> |
38 |
- <div class="slide-wrap pt60"> |
|
39 |
- <div class="text-area slide-section"> |
|
40 |
- <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span |
|
41 |
- class="text-event">혁신으로 선도</span>합니다.</p> |
|
42 |
- <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p> |
|
38 |
+ <div class="slide-wrap slide-back scale-in-br"> |
|
39 |
+ <div class="text-area slide-section flex align-center justify-center"> |
|
40 |
+ <div style="height: 20%;"> |
|
41 |
+ <p class="text-main mb60">테이큰소프트는 <span>데이터</span>와 <span>AI 기술</span>을 통해 <br> 일상을 <span |
|
42 |
+ class="text-event">혁신으로 선도</span>합니다.</p> |
|
43 |
+ <p class="sub-text">테이큰소프트는 AI 기반 솔루션을 제공하고 나아가 새로운 미래의 ICT 산업을 열어가겠습니다.</p> |
|
44 |
+ </div> |
|
43 | 45 |
</div> |
44 | 46 |
</div> |
45 | 47 |
</div> |
46 | 48 |
<div class="swiper-slide gradient-back"> |
47 |
- <div class="slide-wrap pt60 slide-solution"> |
|
48 |
- <div class=" text-area flex align-center" style="height: 100%;"> |
|
49 |
- <div style="width: 100%;" class="sub-text-area"> |
|
49 |
+ <div class="slide-wrap slide-solution flex align-center"> |
|
50 |
+ <div class=" text-area " style="height: 70%;"> |
|
51 |
+ <div style="width: 100%;" class="sub-text-area mb50"> |
|
50 | 52 |
<p class=" solution-text pb30">테이큰 소프트는</p> |
51 |
- <!-- <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br> |
|
53 |
+ <p class=" solution-sub-text">AI 서비스,데이터 관리,UI 인포그래픽 분야에서 핵심 솔루션을 보유하고 있으며 <br> |
|
52 | 54 |
스마트시티,스마트팩토리,모빌리티,헬스케어 분야 등에서 AI 솔루션을 제공하고 있습니다. |
53 |
- </p> --> |
|
55 |
+ </p> |
|
54 | 56 |
</div> |
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> |
|
70 |
- </div> |
|
57 |
+ <div id="container" class="flex solution-box" |
|
58 |
+ style="height: calc(100% - 126px); flex-wrap: nowrap;"> |
|
59 |
+ <div class="box box1" style="display: none;"> |
|
60 |
+ <p class="mb15">데이터관리분야</p> |
|
61 |
+ <p>데이터 관리 솔루션 Taken BI Manager</p> |
|
71 | 62 |
</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> |
|
78 |
- </div> |
|
79 |
- </div> |
|
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> |
|
86 |
- </div> |
|
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> |
|
93 |
- </div> |
|
94 |
- |
|
63 |
+ <div class="box box2" style="display: none;"> |
|
64 |
+ <p class="mb15">스마트시티 분야</p> |
|
65 |
+ <p>대구광역시 AI 안전 통합 횡단보도 플랫폼</p> |
|
95 | 66 |
</div> |
96 |
- |
|
67 |
+ <div class="box box3" style="display: none;"> |
|
68 |
+ <p class="mb15">모빌리티 분야</p> |
|
69 |
+ <p>AI 기반의 스마트 객체인식을 위한 CCTV</p> |
|
70 |
+ </div> |
|
71 |
+ <div class="box box4" style="display: none;"> |
|
72 |
+ <p class="mb15">스마트팩토리 분야</p> |
|
73 |
+ <p>제조기업 공정 관리 모니터링 서비스</p> |
|
74 |
+ </div> |
|
75 |
+ <div class="box box5" style="display: none;"> |
|
76 |
+ <p class="mb15">헬스케어 분야</p> |
|
77 |
+ <p>시니어 스마트 케어 모니터링 플랫폼</p> |
|
78 |
+ </div> |
|
97 | 79 |
</div> |
98 | 80 |
</div> |
99 | 81 |
|
100 | 82 |
</div> |
101 | 83 |
</div> |
102 | 84 |
<div class="swiper-slide"> |
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> |
|
85 |
+ <div class="slide-wrap pt60 slide-solution"> |
|
86 |
+ <div class=" flex align-center"> |
|
87 |
+ <div style="width: 1200px; margin: 0 auto;"> |
|
88 |
+ <p class="portfolio-text pb60">PORTFOLIO</p> |
|
115 | 89 |
</div> |
116 |
- <div class="swiper-button-next"></div> |
|
117 |
- <div class="swiper-button-prev"></div> |
|
118 |
- <div class="swiper-pagination"></div> |
|
90 |
+ <div class="swiper innerSwiper" style="height: calc(100% - 113px);"> |
|
91 |
+ <div class="swiper-wrapper"> |
|
92 |
+ <div class="swiper-slide "> |
|
93 |
+ <img src="../resources/img/common/innerimg-1.png" alt=""> |
|
94 |
+ <div class=" innerSwiper-textBox"> |
|
95 |
+ <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p> |
|
96 |
+ <p class="innerSwiper-text">다양한 데이터 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 |
|
97 |
+ 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p> |
|
98 |
+ </div> |
|
99 |
+ |
|
100 |
+ </div> |
|
101 |
+ <div class="swiper-slide "> |
|
102 |
+ <img src="../resources/img/common/innerimg-2.png" alt=""> |
|
103 |
+ <div class=" innerSwiper-textBox"> |
|
104 |
+ <p class="innerSwiper-title">시각화 서비스 시스템 구축</p> |
|
105 |
+ <p class="innerSwiper-text">데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 |
|
106 |
+ 구축합니다.</p> |
|
107 |
+ </div> |
|
108 |
+ |
|
109 |
+ </div> |
|
110 |
+ <div class="swiper-slide "> |
|
111 |
+ <img src="../resources/img/common/innerimg-3.png" alt=""> |
|
112 |
+ <div class=" innerSwiper-textBox"> |
|
113 |
+ <p class="innerSwiper-title">스마트시티 솔루션 공급</p> |
|
114 |
+ <p class="innerSwiper-text">다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지능 기반의 서비스를 기획, |
|
115 |
+ 개발, 구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을 제공합니다.</p> |
|
116 |
+ </div> |
|
117 |
+ |
|
118 |
+ </div> |
|
119 |
+ <div class="swiper-slide "> |
|
120 |
+ <img src="../resources/img/common/innerimg-4.png" alt=""> |
|
121 |
+ <div class=" innerSwiper-textBox"> |
|
122 |
+ <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p> |
|
123 |
+ <p class="innerSwiper-text">데이터를 통하여 가치있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p> |
|
124 |
+ </div> |
|
125 |
+ |
|
126 |
+ </div> |
|
127 |
+ <div class="swiper-slide "> |
|
128 |
+ <img src="../resources/img/common/innerimg-5.png" alt=""> |
|
129 |
+ <div class=" innerSwiper-textBox"> |
|
130 |
+ <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p> |
|
131 |
+ <p class="innerSwiper-text">각 산업 영역에 대한 풍부한 이해를 바탕으로 조직 규모, 자원 및 예산 등에따라 |
|
132 |
+ 최적화된 방법론을 적용하여 고객의 Vision을 실현시킵니다.</p> |
|
133 |
+ </div> |
|
134 |
+ |
|
135 |
+ </div> |
|
136 |
+ <div class="swiper-slide "> |
|
137 |
+ <img src="../resources/img/common/innerimg-6.png" alt=""> |
|
138 |
+ <div class=" innerSwiper-textBox"> |
|
139 |
+ <p class="innerSwiper-title">기타사례</p> |
|
140 |
+ <p class="innerSwiper-title"></p> |
|
141 |
+ |
|
142 |
+ </div> |
|
143 |
+ |
|
144 |
+ </div> |
|
145 |
+ |
|
146 |
+ </div> |
|
147 |
+ </div> |
|
119 | 148 |
</div> |
149 |
+ |
|
120 | 150 |
</div> |
151 |
+ |
|
152 |
+ </div> |
|
153 |
+ <div class="swiper-slide"> |
|
154 |
+ <div class="slide-wrap pt60 slide-solution gradient-bottom flex align-center justify-center"> |
|
155 |
+ <div class=" text-area " style="height: 100%;"> |
|
156 |
+ <div style="width: 100%;" class="sub-text-area"> |
|
157 |
+ <p class="map-text pb20">오시는길</p> |
|
158 |
+ </div> |
|
159 |
+ <div style="width: 100%;" class="flex justify-end map-btn pd10"> |
|
160 |
+ <button id="btnHeadquarter">본사</button> |
|
161 |
+ <button id="btnDaeguBranch" onclick="relayout()">대구 지사</button> |
|
162 |
+ </div> |
|
163 |
+ <div id="contentHeadquarter"> |
|
164 |
+ <div> |
|
165 |
+ |
|
166 |
+ <div id="daumRoughmapContainer1711609730266" |
|
167 |
+ class="root_daum_roughmap root_daum_roughmap_landing map"></div> |
|
168 |
+ |
|
169 |
+ <script charset="UTF-8" class="daum_roughmap_loader_script" |
|
170 |
+ src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script> |
|
171 |
+ |
|
172 |
+ <!-- 3. 실행 스크립트 --> |
|
173 |
+ <script charset="UTF-8"> |
|
174 |
+ new daum.roughmap.Lander({ |
|
175 |
+ "timestamp": "1711609730266", |
|
176 |
+ "key": "2ipvd", |
|
177 |
+ "mapWidth": "1200", |
|
178 |
+ "mapHeight": "500" |
|
179 |
+ }).render(); |
|
180 |
+ </script> |
|
181 |
+ </div> |
|
182 |
+ <div class="address-box flex"> |
|
183 |
+ <p class="address-tile">본사</p> |
|
184 |
+ <p class="address-subtitle">경상북도 경산시 대학로 280, 영남대학교 창업보육센터 신관 217호,218호,220호 (대동)</p> |
|
185 |
+ </div> |
|
186 |
+ </div> |
|
187 |
+ <div id="contentDaeguBranch" style="display: none;"> |
|
188 |
+ <div> |
|
189 |
+ |
|
190 |
+ <div id="daumRoughmapContainer1711610549858" |
|
191 |
+ class="root_daum_roughmap root_daum_roughmap_landing map"></div> |
|
192 |
+ |
|
193 |
+ <!-- 3. 실행 스크립트 --> |
|
194 |
+ <script charset="UTF-8"> |
|
195 |
+ new daum.roughmap.Lander({ |
|
196 |
+ "timestamp": "1711610549858", |
|
197 |
+ "key": "2ipvq", |
|
198 |
+ "mapWidth": "1200", |
|
199 |
+ "mapHeight": "500" |
|
200 |
+ }).render(); |
|
201 |
+ |
|
202 |
+ </script> |
|
203 |
+ <div class="address-box flex"> |
|
204 |
+ <p class="address-tile">대구지사</p> |
|
205 |
+ <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p> |
|
206 |
+ </div> |
|
207 |
+ </div> |
|
208 |
+ </div> |
|
209 |
+ </div> |
|
210 |
+ |
|
211 |
+ </div> |
|
212 |
+ |
|
121 | 213 |
|
122 | 214 |
</div> |
123 | 215 |
|
124 | 216 |
</div> |
125 |
- </div> |
|
126 |
- <div id="footer" style="border: 0px;"></div> |
|
217 |
+ <div id="footer"></div> |
|
218 |
+ |
|
219 |
+ |
|
127 | 220 |
|
128 | 221 |
|
129 | 222 |
|
... | ... | @@ -132,27 +225,46 @@ |
132 | 225 |
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> |
133 | 226 |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
134 | 227 |
|
228 |
+ |
|
135 | 229 |
<script> |
230 |
+ $(document).ready(function () { |
|
231 |
+ $("#btnHeadquarter").click(function () { |
|
232 |
+ $("#btnHeadquarter").addClass('on'); |
|
233 |
+ $("#btnDaeguBranch").removeClass('on'); |
|
234 |
+ $("#contentDaeguBranch").hide(); |
|
235 |
+ |
|
236 |
+ $("#contentHeadquarter").show(); |
|
237 |
+ }); |
|
238 |
+ |
|
239 |
+ $("#btnDaeguBranch").click(function () { |
|
240 |
+ $("#btnDaeguBranch").addClass('on'); |
|
241 |
+ $("#btnHeadquarter").removeClass('on'); |
|
242 |
+ |
|
243 |
+ $("#contentHeadquarter").hide(); |
|
244 |
+ |
|
245 |
+ $("#contentDaeguBranch").show(); |
|
246 |
+ |
|
247 |
+ |
|
248 |
+ |
|
249 |
+ |
|
250 |
+ |
|
251 |
+ }); |
|
252 |
+ }); |
|
136 | 253 |
|
137 | 254 |
var swiper1 = new Swiper(".mySwiper", { |
138 | 255 |
direction: "vertical", |
139 | 256 |
slidesPerView: 1, |
140 |
- spaceBetween: 30, |
|
257 |
+ spaceBetween: 40, |
|
141 | 258 |
speed: 700, |
142 | 259 |
mousewheel: true, |
143 | 260 |
pagination: { |
144 | 261 |
el: ".swiper-pagination", |
145 | 262 |
clickable: true, |
146 | 263 |
}, on: { |
264 |
+ // fromEdge: function () { |
|
265 |
+ // document.querySelector('#footer').classList.add('on'); |
|
147 | 266 |
|
148 |
- reachEnd: function () { |
|
149 |
- swiper1.mousewheel.disable(); |
|
150 |
- $("#footer").show(); |
|
151 |
- }, |
|
152 |
- fromEdge: function () { |
|
153 |
- swiper1.mousewheel.enable(); |
|
154 |
- $("#footer").hide(); |
|
155 |
- }, |
|
267 |
+ // }, |
|
156 | 268 |
slideChange: function () { |
157 | 269 |
var currentIndex = this.realIndex; |
158 | 270 |
if (currentIndex === 0) { |
... | ... | @@ -160,55 +272,98 @@ |
160 | 272 |
} else { |
161 | 273 |
$('#header').addClass('active'); |
162 | 274 |
} |
275 |
+ |
|
276 |
+ if (this.activeIndex === 5) { |
|
277 |
+ document.querySelector('footer').classList.add('on'); |
|
278 |
+ } else { |
|
279 |
+ document.querySelector('footer').classList.remove('on'); |
|
280 |
+ } |
|
281 |
+ |
|
163 | 282 |
}, |
164 | 283 |
|
165 | 284 |
slideChangeTransitionEnd: function () { |
166 | 285 |
if (this.activeIndex === 1) { |
167 | 286 |
$('.text-event').addClass('active'); |
168 | 287 |
$('.sub-text').addClass('active'); |
288 |
+ $('.slide-back').addClass('active'); |
|
169 | 289 |
} else { |
170 | 290 |
$('.text-event').removeClass('active'); |
171 | 291 |
$('.sub-text').removeClass('active'); |
292 |
+ $('.slide-back').removeClass('active'); |
|
172 | 293 |
} |
173 | 294 |
if (this.activeIndex === 2) { |
174 | 295 |
$('.solution-text').addClass('active'); |
175 | 296 |
$('.solution-sub-text').addClass('active'); |
297 |
+ $('.box').addClass('active'); |
|
176 | 298 |
} else { |
177 | 299 |
$('.solution-text').removeClass('active'); |
178 | 300 |
$('.solution-sub-text').removeClass('active'); |
301 |
+ $('.box').removeClass('active'); |
|
302 |
+ |
|
179 | 303 |
} |
180 | 304 |
}, |
181 | 305 |
|
182 |
- |
|
183 | 306 |
} |
184 | 307 |
}); |
308 |
+ window.addEventListener('load', () => { |
|
309 |
+ const boxes = document.querySelectorAll('.box'); |
|
310 |
+ let delay = 0.6; |
|
185 | 311 |
|
186 |
- |
|
312 |
+ boxes.forEach(box => { |
|
313 |
+ setTimeout(() => { |
|
314 |
+ box.style.display = 'block'; // 박스를 보이게 합니다. |
|
315 |
+ box.style.animationDelay = `${delay}s`; // 애니메이션 지연 시간을 설정합니다. |
|
316 |
+ delay += 0.3; // 다음 박스가 나타나기까지의 지연 시간을 증가시킵니다. |
|
317 |
+ }, delay * 3000); // setTimeout은 밀리초 단위를 사용합니다. |
|
318 |
+ }); |
|
319 |
+ }); |
|
187 | 320 |
// 헤더,푸터 불러오기 |
188 | 321 |
$(function () { |
189 | 322 |
$("#header").load("layout/header.html"); |
190 | 323 |
$("#footer").load("layout/footer.html"); |
191 |
- $("#footer").hide(); |
|
192 |
- }); |
|
324 |
+ // $("#footer").hide(); |
|
193 | 325 |
|
326 |
+ }); |
|
194 | 327 |
var innerSwiper = new Swiper(".innerSwiper", { |
195 |
- slidesPerView: 10, |
|
196 |
- loop: true, |
|
328 |
+ slidesPerView: 3, |
|
197 | 329 |
spaceBetween: 30, |
198 | 330 |
centeredSlides: true, |
331 |
+ |
|
199 | 332 |
autoplay: { |
200 |
- // delay: 1000, |
|
333 |
+ delay: 0, |
|
201 | 334 |
disableOnInteraction: false, |
202 | 335 |
}, |
203 |
- pagination: { |
|
204 |
- el: ".swiper-pagination", |
|
205 |
- clickable: true, |
|
206 |
- }, |
|
207 |
- navigation: { |
|
208 |
- nextEl: ".swiper-button-next", |
|
209 |
- prevEl: ".swiper-button-prev", |
|
210 |
- }, |
|
336 |
+ loop: true, |
|
337 |
+ speed: 5000, |
|
338 |
+ activeIndexChange: function () { |
|
339 |
+ |
|
340 |
+ }, on: { |
|
341 |
+ init: function () { |
|
342 |
+ // Swiper 초기화 시 첫 번째 슬라이드 설정 |
|
343 |
+ let firstTextBox = this.slides[0].querySelector('.innerSwiper-textBox'); |
|
344 |
+ if (firstTextBox) firstTextBox.classList.add('active'); |
|
345 |
+ }, |
|
346 |
+ // activeIndexChange: function () { |
|
347 |
+ // // 모든 텍스트 박스에서 'active' 클래스 제거 |
|
348 |
+ // this.slides.forEach(slide => { |
|
349 |
+ // let textBox = slide.querySelector('.innerSwiper-textBox'); |
|
350 |
+ // if (textBox) textBox.classList.remove('active'); |
|
351 |
+ // }); |
|
352 |
+ // // 현재 활성화된 슬라이드의 텍스트 박스에 'active' 클래스 추가 |
|
353 |
+ // let currentTextBox = this.slides[this.activeIndex].querySelector('.innerSwiper-textBox'); |
|
354 |
+ // if (currentTextBox) currentTextBox.classList.add('active'); |
|
355 |
+ // } |
|
356 |
+ } |
|
211 | 357 |
}); |
358 |
+ |
|
359 |
+ // Swiper 인스턴스 초기화 |
|
360 |
+ // mySwiper.init(); |
|
361 |
+ |
|
362 |
+ |
|
363 |
+ |
|
364 |
+ |
|
365 |
+ |
|
366 |
+ |
|
212 | 367 |
|
213 | 368 |
|
214 | 369 |
|
... | ... | @@ -220,9 +375,25 @@ |
220 | 375 |
|
221 | 376 |
|
222 | 377 |
<style scoped> |
223 |
- #footer { |
|
224 |
- display: none; |
|
378 |
+ #header { |
|
379 |
+ position: fixed; |
|
380 |
+ top: 0; |
|
381 |
+ z-index: 3; |
|
225 | 382 |
} |
383 |
+ |
|
384 |
+ |
|
385 |
+ /* #footer { |
|
386 |
+ position: relative; |
|
387 |
+ height: 100px; |
|
388 |
+ z-index: 10000; |
|
389 |
+ } |
|
390 |
+ |
|
391 |
+ #footer.on { |
|
392 |
+ opacity: 1; |
|
393 |
+ display: block; |
|
394 |
+ } */ |
|
395 |
+ |
|
396 |
+ |
|
226 | 397 |
|
227 | 398 |
html, |
228 | 399 |
body { |
... | ... | @@ -252,11 +423,6 @@ |
252 | 423 |
} |
253 | 424 |
|
254 | 425 |
|
255 |
- #header { |
|
256 |
- position: fixed; |
|
257 |
- top: 0; |
|
258 |
- z-index: 1; |
|
259 |
- } |
|
260 | 426 |
|
261 | 427 |
.slide-wrap { |
262 | 428 |
width: 100%; |
... | ... | @@ -271,13 +437,7 @@ |
271 | 437 |
background-position: bottom; |
272 | 438 |
} |
273 | 439 |
|
274 |
- .text-area { |
|
275 |
- width: 1200px; |
|
276 |
- height: 100%; |
|
277 |
- margin: auto; |
|
278 |
- text-align: center; |
|
279 |
- } |
|
280 |
- |
|
440 |
+ |
|
281 | 441 |
.main-text { |
282 | 442 |
|
283 | 443 |
padding-bottom: 50px; |
... | ... | @@ -309,9 +469,7 @@ |
309 | 469 |
font-weight: 900; |
310 | 470 |
} |
311 | 471 |
|
312 |
- .slide-section { |
|
313 |
- padding-top: 330px; |
|
314 |
- } |
|
472 |
+ |
|
315 | 473 |
|
316 | 474 |
.text-main { |
317 | 475 |
font-weight: 600; |
... | ... | @@ -321,11 +479,19 @@ |
321 | 479 |
|
322 | 480 |
} |
323 | 481 |
|
324 |
- .sub-text-area { |
|
325 |
- text-align: left; |
|
482 |
+ .text-main span { |
|
483 |
+ color: #F29600; |
|
484 |
+ |
|
485 |
+ |
|
326 | 486 |
} |
327 |
- .gradient-back{ |
|
328 |
- background: linear-gradient(#e9ebff , #fff, #fff); |
|
487 |
+ |
|
488 |
+ |
|
489 |
+ .gradient-back { |
|
490 |
+ background: linear-gradient(#e9ebff, #fff, #fff); |
|
491 |
+ } |
|
492 |
+ |
|
493 |
+ .gradient-bottom { |
|
494 |
+ background: linear-gradient(#fff, #fff, #e9ebff); |
|
329 | 495 |
} |
330 | 496 |
|
331 | 497 |
.slide-solution { |
... | ... | @@ -333,6 +499,7 @@ |
333 | 499 |
font-family: 'Pretendard'; |
334 | 500 |
|
335 | 501 |
} |
502 |
+ |
|
336 | 503 |
</style> |
337 | 504 |
|
338 | 505 |
</html>(No newline at end of file) |
+++ views/pages/AboutUs.html
... | ... | @@ -0,0 +1,0 @@ |
+++ views/pages/Solution.html
... | ... | @@ -0,0 +1,148 @@ |
1 | +<!DOCTYPE html> | |
2 | +<html lang="en"> | |
3 | + | |
4 | +<head> | |
5 | + <meta charset="UTF-8"> | |
6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
7 | + <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> | |
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 | + <link rel="stylesheet" href="../../resources/css/reset.css"> | |
11 | + <link rel="stylesheet" href="../../resources/css/style.css"> | |
12 | + <link rel="stylesheet" href="../../resources/css/component.css"> | |
13 | + <link rel="stylesheet" href="../../resources/css/common.css"> | |
14 | + <link rel="stylesheet" href="../../resources/css/responsive.css"> | |
15 | + | |
16 | + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> | |
17 | + | |
18 | + | |
19 | + | |
20 | + <title>Solution</title> | |
21 | +</head> | |
22 | + | |
23 | +<body> | |
24 | + <div id="header"></div> | |
25 | + <div class="swiper mySwiper"> | |
26 | + <div class="swiper-wrapper"> | |
27 | + <div class="swiper-slide"> | |
28 | + <div class="taken-wrap slide-wrap "> | |
29 | + <div class="text-area flex"> | |
30 | + <div class="solution-title mb50"> | |
31 | + <p>Taken BI Manager v1.0</p> | |
32 | + </div> | |
33 | + <div class="flex justify-between" style="flex-wrap: nowrap; gap: 20px;"> | |
34 | + <div class="taken-area flex align-end "> | |
35 | + <img src="../../resources/img/common/solution-img1.png" alt="" > | |
36 | + <div class="taken-box flex justify-between" style="flex-wrap: nowrap;"> | |
37 | + <p>데이터 수집,저장,관리</p> | |
38 | + <p>솔루션 제공 기반 맞춤형 서비스</p> | |
39 | + </div> | |
40 | + </div> | |
41 | + <div class="taken-area taken-conteiner " style="gap: 20px;"> | |
42 | + <div class="text-after"> | |
43 | + <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p> | |
44 | + <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화 서비스를 제공합니다.</p> | |
45 | + <P>데이터의 수집 / 관리 / 분석 / 시각화 4가지 기능을 플랫폼 하나로 효율적인 데이터관리가 가능</P> | |
46 | + </div> | |
47 | + <div class="solution-text-box mb20"> | |
48 | + <h3 class="text-box-title mb10">주요기능</h3> | |
49 | + <p>- File Data에 대한 수집 및 전처리를 통한 DB 표준화 기능 제공</p> | |
50 | + <p>- 데이터 마트에 구성된 모델과 연동되어 타기관 데이터 이관 서비스 제공</p> | |
51 | + <p>- 데이터 및 분석 결과를 표현하기 위한 그리드 기능 제공</p> | |
52 | + </div> | |
53 | + <div class="solution-text-box"> | |
54 | + <h3 class="text-box-title mb10">특장점</h3> | |
55 | + <div class="flex " style="gap: 30px;"> | |
56 | + <div class="flex-column"> | |
57 | + <p>- DB 연계형 데이터 수집 서비스</p> | |
58 | + <p>- 데이터 시각화 시스템</p> | |
59 | + </div> | |
60 | + <div class="flex-column"> | |
61 | + <p>- 데이터 저장/관리 시스템</p> | |
62 | + <p>- 관리 서비스 시스템</p> | |
63 | + </div> | |
64 | + </div> | |
65 | + </div> | |
66 | + </div> | |
67 | + </div> | |
68 | + </div> | |
69 | + </div> | |
70 | + </div> | |
71 | + <div class="swiper-slide">asdfasdfsdf 2</div> | |
72 | + <div class="swiper-slide">Slide 3</div> | |
73 | + <div class="swiper-slide">Slide 4</div> | |
74 | + <div class="swiper-slide">Slide 5</div> | |
75 | + <div class="swiper-slide">Slide 6</div> | |
76 | + <div class="swiper-slide">Slide 7</div> | |
77 | + <div class="swiper-slide">Slide 8</div> | |
78 | + <div class="swiper-slide">Slide 9</div> | |
79 | + </div> | |
80 | + | |
81 | + </div> | |
82 | + | |
83 | + <div id="footer"></div> | |
84 | + | |
85 | + | |
86 | + | |
87 | + | |
88 | + | |
89 | + | |
90 | +</body> | |
91 | +<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
92 | +<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> | |
93 | + | |
94 | + | |
95 | +<script> | |
96 | + var swiper = new Swiper(".mySwiper", { | |
97 | + direction: "vertical", | |
98 | + slidesPerView: 1, | |
99 | + spaceBetween: 30, | |
100 | + mousewheel: true, | |
101 | + | |
102 | + }); | |
103 | + | |
104 | + | |
105 | +</script> | |
106 | + | |
107 | + | |
108 | + | |
109 | + | |
110 | +<style scoped> | |
111 | + html, | |
112 | + body { | |
113 | + position: relative; | |
114 | + height: 100%; | |
115 | + } | |
116 | + | |
117 | + body { | |
118 | + background: #eee; | |
119 | + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; | |
120 | + font-size: 14px; | |
121 | + color: #000; | |
122 | + margin: 0; | |
123 | + padding: 0; | |
124 | + } | |
125 | + | |
126 | + .swiper { | |
127 | + width: 100%; | |
128 | + height: 100%; | |
129 | + } | |
130 | + | |
131 | + .swiper-slide { | |
132 | + text-align: center; | |
133 | + font-size: 18px; | |
134 | + background: linear-gradient(#f8f9fa,#fff,#fff); | |
135 | + display: flex; | |
136 | + justify-content: center; | |
137 | + align-items: center; | |
138 | + } | |
139 | + | |
140 | + .swiper-slide img { | |
141 | + display: block; | |
142 | + object-fit: cover; | |
143 | + } | |
144 | + | |
145 | + | |
146 | +</style> | |
147 | + | |
148 | +</html>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?