Commit @6c43e06a2e3b2e87c720e1bd22c3ac7bffee060f

mycoms 2024-04-03

240403김하영

@6c43e06a2e3b2e87c720e1bd22c3ac7bffee060f

f872fcc

6c43e06

resources/css/reset.css

--- resources/css/reset.css

+++ resources/css/reset.css


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

f872fcc

6c43e06

resources/css/responsive.css

--- resources/css/responsive.css

+++ resources/css/responsive.css

...	...	@@ -1,101 +1,1172 @@
1		-/* @media screen and (min-width: 1537px){
2		- .gall-list.flex25{
3		- flex: 0 0 24%
	1	+/* 테블릿 가로 (해상도 768px ~ 1023px)*/
	2	+@media all and (min-width:279px) and (max-width:480px) {
	3	+
	4	+ * {
	5	+ padding: 0;
	6	+ margin: 0;
	7	+ box-sizing: border-box;
	8	+ }
	9	+
	10	+ html,
	11	+ body,
	12	+ #root {
	13	+ width: 100%;
	14	+ /* min-height: 100vh; */
	15	+ font-size: 0.7rem;
	16	+ color: var(--color-black);
	17	+ font-family: 'Pretendard';
	18	+ }
	19	+
	20	+ body {
	21	+ min-width: 100%;
	22	+
	23	+
	24	+ }
	25	+
	26	+ .text-main,
	27	+ .solution-text,
	28	+ .portfolio-text,
	29	+ .map-text,
	30	+ .about-title p:nth-child(1),
	31	+ .marketing-wrap-title h1 {
	32	+ font-size: 2.2rem !important;
	33	+ }
	34	+
	35	+ .solution-title p,
	36	+ .traffic-title p,
	37	+ .ai-title p,
	38	+ .meta-title p,
	39	+ .smart-title p ,.etc-wrap-title p{
	40	+ font-size: 1.5rem;
	41	+ }
	42	+
	43	+ .sub-text,
	44	+ .solution-sub-text {
	45	+ font-size: 1.5rem !important;
	46	+ }
	47	+
	48	+ .solution-box {
	49	+ width: 100%;
	50	+ height: calc(100% - 182px) !important;
	51	+ flex-direction: column;
	52	+ flex-wrap: wrap !important;
	53	+ align-items: center;
	54	+ justify-content: space-between;
	55	+ }
	56	+
	57	+ .solution-box div {
	58	+ height: 50px !important;
	59	+ background-size: 20px;
	60	+ }
	61	+
	62	+ .box:hover {
	63	+ transform: scale(1);
	64	+ }
	65	+
	66	+ .header-area {
	67	+ width: 100%;
	68	+ }
	69	+
	70	+ .mobile-menu-button,
	71	+ .mobil-wrap {
	72	+ display: block;
	73	+ }
	74	+
	75	+ .web-menu {
	76	+ display: none;
	77	+ }
	78	+
	79	+ .mobil-btn {
	80	+ display: block;
	81	+ }
	82	+
	83	+ .mobil-menu {
	84	+ width: 100%;
	85	+ height: 100%;
	86	+ position: absolute;
	87	+ top: 36px;
	88	+ left: 0;
	89	+ z-index: 100000;
	90	+ }
	91	+
	92	+ .mobil-menu ul {
	93	+ list-style: none;
	94	+ padding: 2rem 0;
	95	+ margin: 0;
	96	+ background-color: #fff;
	97	+ }
	98	+
	99	+ .mobil-menu ul li ul li a {
	100	+ font-weight: 500;
	101	+ color: #333;
	102	+ font-size: 1.2rem !important;
	103	+ }
	104	+
	105	+ nav>ul {
	106	+ background-color: #fff;
	107	+ border-bottom: 1px solid #333;
	108	+ }
	109	+
	110	+ nav ul li {
	111	+ color: #333 !important;
	112	+ width: 100% !important;
	113	+ }
	114	+
	115	+ .mobile-menu-button {
	116	+ transform: translateX(10px);
	117	+ }
	118	+
	119	+ .mobile-menu-button,
	120	+ .mobile-menu-button-close {
	121	+ font-size: 2rem;
	122	+ color: #333;
	123	+ height: 29px;
	124	+ width: 29px;
	125	+ }
	126	+
	127	+ .swiper {
	128	+ width: 50%;
	129	+ height: 100%;
	130	+ padding: 2rem;
	131	+ }
	132	+
	133	+ .swiper-slide {
	134	+ width: 100%;
	135	+
	136	+ }
	137	+
	138	+ .slide-wrap {
	139	+ width: 100%;
	140	+ height: 100% !important;
	141	+ }
	142	+
	143	+ .text-area {
	144	+ width: 100% !important;
	145	+ height: 100% !important;
	146	+ padding: 2rem;
	147	+ }
	148	+
	149	+ .innerSwiper-title {
	150	+ font-size: 1.5rem;
	151	+ }
	152	+
	153	+ .innerSwiper .swiper-slide {
	154	+ width: 100% !important;
	155	+ padding: 10px;
	156	+ }
	157	+
	158	+ .marketing-wrapper {
	159	+ width: 100%;
	160	+ padding: 1rem;
	161	+ margin: 0 auto;
	162	+ }
	163	+
	164	+ .marketing-wrap-title h1::after {
	165	+ width: 20px;
	166	+ height: 20px;
	167	+ background-size: 20px;
	168	+ transform: translateX(-50%);
	169	+ }
	170	+
	171	+ .marketing-area {
	172	+ width: 100%;
	173	+ grid-template-columns: 1fr;
	174	+ }
	175	+
	176	+ .marketing-title {
	177	+ font-size: 1.8rem;
	178	+ }
	179	+
	180	+ #contentDaeguBranch {
	181	+ width: 100%;
	182	+ height: 100%;
	183	+ }
	184	+
	185	+ .root_daum_roughmap_landing {
	186	+ width: 100% !important;
	187	+ height: 50% !important;
	188	+ }
	189	+
	190	+ .root_daum_roughmap .wrap_map {
	191	+ height: 200px !important;
	192	+ }
	193	+
	194	+ .secen-map {
	195	+ width: 100% !important;
	196	+ height: 50% !important;
	197	+ }
	198	+
	199	+ .secen-map div {
	200	+ height: 100% !important;
	201	+ }
	202	+
	203	+ .secen-map .map {
	204	+ width: 100% !important;
	205	+ height: 100% !important;
	206	+ object-fit: cover;
	207	+
4	208	}
5	209
6	210
7	211
8		-}
9		-
10		-@media screen and (min-width:1356px) and (max-width: 1536px) {
11		- html{
12		- font-size: 8.5px;
13		- }
14		- button {
	212	+ .address-tile {
	213	+ width: 100%;
15	214	font-size: 1.2rem;
16	215	}
17	216
18		- .flex5 {
19		- flex: 0 0 4%
20		- }
21		-
22		- .flex10 {
23		- flex: 0 0 9%
24		- }
25		-
26		- .flex15 {
27		- flex: 0 0 14%
28		- }
29		-
30		- .flex20 {
31		- flex: 0 0 19%
32		- }
33		-
34		- .flex25 {
35		- flex: 0 0 24%
36		- }
37		-
38		- .flex30 {
39		- flex: 0 0 29%
40		- }
41		-
42		- .flex35 {
43		- flex: 0 0 34%
44		- }
45		-
46		- .flex40 {
47		- flex: 0 0 39%
48		- }
49		-
50		- .flex45 {
51		- flex: 0 0 44%
52		- }
53		-
54		- .flex50 {
55		- flex: 0 0 49%
56		- }
57		-
58		- .flex55 {
59		- flex: 0 0 54%
60		- }
61		-
62		-
63		- .flex60 {
64		- flex: 0 0 59%
65		- }
66		-
67		- .flex65 {
68		- flex: 0 0 64%
69		- }
70		-
71		-
72		- .flex70 {
73		- flex: 0 0 69%
74		- }
75		-
76		- .flex75 {
77		- flex: 0 0 74%
78		- }
79		-
80		- .flex80 {
81		- flex: 0 0 79%
82		- }
83		-
84		- .flex85 {
85		- flex: 0 0 84%
86		- }
87		-
88		- .flex90 {
89		- flex: 0 0 89%
90		- }
91		-
92		- .flex95 {
93		- flex: 0 0 94%
	217	+ .address-subtitle {
	218	+ font-size: 1.1rem !important;
94	219	}
95	220
96		- .content-list{
97		- min-height: 449px;
	221	+ .address-tile::after {
	222	+ display: none;
	223	+ }
	224	+
	225	+ .map-btn {
	226	+ justify-content: space-between;
	227	+ }
	228	+
	229	+ .map-btn button {
	230	+ width: 40%;
	231	+ font-size: 1.2rem;
	232	+ }
	233	+
	234	+ .address-box {
	235	+ width: 100%;
	236	+ }
	237	+
	238	+ #footer {
	239	+ width: 100%;
	240	+ }
	241	+
	242	+ .footer-wrap {
	243	+ width: 100%;
	244	+ }
	245	+
	246	+ .footer-text div {
	247	+ flex-wrap: wrap;
	248	+ }
	249	+
	250	+ .footer-text div p,
	251	+ .footer-text p {
	252	+ width: 100%;
	253	+ padding-left: 0px !important;
	254	+ }
	255	+
	256	+ .about-wrap {
	257	+ width: 100%;
	258	+ padding: 0px;
	259	+ padding-top: 50px;
	260	+ }
	261	+
	262	+ .about-title-sub {
	263	+ font-size: 1.2rem;
	264	+ }
	265	+
	266	+ .about-area {
	267	+ flex-wrap: nowrap;
	268	+ width: 100%;
	269	+ height: 10%;
	270	+ flex-direction: column;
	271	+ gap: 10px !important;
	272	+ }
	273	+
	274	+ .about-area p {
	275	+ font-size: 1.2rem;
	276	+ }
	277	+
	278	+ .about-radius,
	279	+ .about-radius-bottom,
	280	+ .about-radius-right,
	281	+ .about-radius-left,
	282	+ .about-radius-bottom-left,
	283	+ .about-radius-bottom-right {
	284	+ width: 100%;
	285	+ height: 100%;
	286	+ padding: 0.5rem;
	287	+ border-radius: 5px !important;
	288	+ }
	289	+
	290	+ .about-radius-left::after,
	291	+ .about-radius-bottom-right::after,
	292	+ .about-radius-bottom-left::after,
	293	+ .about-radius::after,
	294	+ .about-radius-right::after {
	295	+ display: none;
	296	+ }
	297	+
	298	+ .about-title {
	299	+ margin-top: 60px;
	300	+ height: 20%;
	301	+ margin-bottom: 1rem !important;
	302	+ }
	303	+
	304	+ .about-text {
	305	+ font-size: 1.5rem;
	306	+ }
	307	+
	308	+ .silde-box {
	309	+ height: 60%;
	310	+ display: flex;
	311	+ flex-direction: column;
	312	+ }
	313	+
	314	+ .silde-box .accordion {
	315	+ height: 10px;
	316	+ padding: 0.5rem;
	317	+ }
	318	+
	319	+ .silde-box .slideImg {
	320	+ display: none;
	321	+ }
	322	+
	323	+ .slideText {
	324	+ padding: 10px;
	325	+ }
	326	+
	327	+ .slideText p:last-child,
	328	+ .slideTextDtail p {
	329	+ font-size: 1.2rem;
	330	+ }
	331	+
	332	+ .slideText p:first-child {
	333	+ font-size: 1.2rem;
	334	+ }
	335	+
	336	+ .slideTextDtail p {
	337	+ font-size: 1rem;
	338	+ border-bottom: 0px !important;
	339	+ margin-bottom: 0.5rem;
	340	+ }
	341	+
	342	+ .slideTextDtail div div {
	343	+ display: none;
98	344	}
99	345
100	346
101		-} */ (No newline at end of file)
	347	+
	348	+ .about img{
	349	+ width: 100%;
	350	+ height: 100%;
	351	+ }
	352	+ .about-vision-box{
	353	+ height: 200px;
	354	+ }
	355	+ .about-vision-box img {
	356	+ width: 100%;
	357	+ height: 100%;
	358	+ object-fit: contain;
	359	+ }
	360	+
	361	+ .timeline {
	362	+ width: 100%;
	363	+ }
	364	+
	365	+ .years {
	366	+ display: flex;
	367	+ width: 100%;
	368	+ border-bottom: 1px solid #333;
	369	+ }
	370	+
	371	+ .active-year {
	372	+ font-size: 2rem;
	373	+ }
	374	+
	375	+ .contents {
	376	+ text-align: center;
	377	+
	378	+ }
	379	+
	380	+ .month {
	381	+ text-align: left !important;
	382	+ }
	383	+
	384	+ .month-text div {
	385	+ width: 100%;
	386	+ flex-wrap: nowrap;
	387	+ }
	388	+
	389	+ .taken-wrap-box {
	390	+ width: 100% !important;
	391	+ gap: 5px !important;
	392	+ flex-direction: column;
	393	+ }
	394	+
	395	+ .taken-area {
	396	+ width: 100%;
	397	+ height: 60% !important;
	398	+ align-items: start;
	399	+ gap: 5px !important;
	400	+ }
	401	+
	402	+ .taken-area img,
	403	+ .traffic-area img,
	404	+ .ai-area img {
	405	+ opacity: 0;
	406	+ }
	407	+
	408	+ .solution-title,
	409	+ .traffic-title,
	410	+ .ai-title,
	411	+ .meta-title,
	412	+ .smart-title {
	413	+ height: 15%;
	414	+ padding-top: 5rem;
	415	+ margin-bottom: 0rem !important;
	416	+ }
	417	+
	418	+ .taken-box {
	419	+ width: 100%;
	420	+ /* flex-direction: column; */
	421	+ gap: 5px;
	422	+ }
	423	+
	424	+ .taken-box p {
	425	+ font-size: 1.2rem;
	426	+ }
	427	+
	428	+ .taken-area p {
	429	+ font-size: 1rem;
	430	+ }
	431	+
	432	+ .text-box-title {
	433	+ font-size: 1rem;
	434	+ padding-left: 10px;
	435	+ }
	436	+ .solution-after{
	437	+ justify-content: start;
	438	+ }
	439	+ .solution-area-two{
	440	+ height: calc(100% - 490.05px) !important;
	441	+ }
	442	+ .solution-area{
	443	+
	444	+ gap: 40px !important;
	445	+ height: calc(100% - 141.61px)!important;
	446	+ }
	447	+
	448	+ .solution-text-box {
	449	+ padding: 10px 15px !important;
	450	+ }
	451	+
	452	+ .solution-text-box p {
	453	+ padding-left: 5px;
	454	+ }
	455	+
	456	+ .solution-text-box div {
	457	+ gap: 0px !important;
	458	+ }
	459	+
	460	+ .solution-text-box div div {
	461	+ flex-direction: row;
	462	+ }
	463	+
	464	+ .text-box-title::after {
	465	+ left: -5px;
	466	+ top: -1px;
	467	+ }
	468	+
	469	+ .traffic-button {
	470	+ display: none;
	471	+ }
	472	+
	473	+ .traffic-area {
	474	+ display: none;
	475	+ }
	476	+
	477	+ .solution-web-box {
	478	+ display: none;
	479	+ }
	480	+
	481	+
	482	+
	483	+ .logo {
	484	+ width: 50% !important;
	485	+ height: 14px !important;
	486	+ background-size: cover;
	487	+ }
	488	+
	489	+ .mobil-wrap {
	490	+ width: 50%;
	491	+ }
	492	+
	493	+ .mobil-wrap button {
	494	+ width: 100%;
	495	+ text-align: right;
	496	+ }
	497	+ .box:hover, .box-wrap div img:hover{
	498	+ transform: scale(1);
	499	+ }
	500	+ .customized-wrap-title, .etc-wrap-title{
	501	+ margin-top: 50px;
	502	+ margin-bottom: 1rem;
	503	+ height: 100%;
	504	+ }
	505	+ .etc-wrap-title h1{
	506	+ padding-top: 0rem;
	507	+ }
	508	+ .box-wrap{
	509	+ width: 100% !important;
	510	+ height: 100%;
	511	+ gap: 10px !important;
	512	+ margin-bottom: 0px;
	513	+ display: grid !important;
	514	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	515	+ flex-direction: column;
	516	+ }
	517	+ .box-wrap img{
	518	+ width: 100%;
	519	+ padding-bottom: 0rem !important;
	520	+ object-fit: contain;
	521	+ }
	522	+ .box-wrap div{
	523	+ height: 100%;
	524	+ }
	525	+ .box-wrap div p{
	526	+ padding: 1px;
	527	+ margin-bottom: 0rem !important;
	528	+ font-size: 1rem !important;
	529	+ }
	530	+ .box-wrap div div{
	531	+ display: none;
	532	+ height: 37% !important;
	533	+ }
	534	+ .etc-wrap-title h1,.customized-wrap-title h1{
	535	+ font-size: 1.5rem !important;
	536	+ }
	537	+ .etc-wrap-title p,.customized-wrap-title p{
	538	+ font-size: 1.2rem !important;
	539	+ }
	540	+ .etc-wrap-title{
	541	+ height: 100%;
	542	+ margin-bottom: 10px !important;
	543	+ }
	544	+ .customized-box{
	545	+ width: 100%;
	546	+ display: grid;
	547	+ gap: 10px;
	548	+ grid-template-columns: 1fr 1fr;
	549	+ }
	550	+ .customized-box div{
	551	+ width: 100%;
	552	+
	553	+ margin-bottom: 10px;
	554	+ }
	555	+ .customized-box p{
	556	+ font-size: 1.1rem !important;
	557	+ }
	558	+ .customized-box div img{
	559	+ width: 100%;
	560	+ }
	561	+ .etc-box-title {
	562	+ margin-bottom: 0px;
	563	+ }
	564	+
	565	+ .etc-box-title p{
	566	+ padding-left: 0px;
	567	+ }
	568	+
	569	+ .etc-box p{
	570	+ padding-left: 0px;
	571	+ }
	572	+
	573	+}
	574	+
	575	+@media all and (min-width:768px) and (max-width:1366px) {
	576	+ html {
	577	+ font-size: 9px;
	578	+ }
	579	+
	580	+ .wrapper {
	581	+ display: block;
	582	+ }
	583	+
	584	+ .main-warp {
	585	+ flex-grow: 0;
	586	+ }
	587	+
	588	+ .swiper {
	589	+ height: 100%;
	590	+ }
	591	+
	592	+
	593	+ .swiper-slide>.flex>.col-6 {
	594	+ flex: 0 0 100%;
	595	+ max-width: 100%;
	596	+ }
	597	+
	598	+ .swiper-slide>.flex>.col-6>.box {
	599	+ height: 50vh;
	600	+ }
	601	+
	602	+ * {
	603	+ padding: 0;
	604	+ margin: 0;
	605	+ box-sizing: border-box;
	606	+ }
	607	+
	608	+ html,
	609	+ body,
	610	+ #root {
	611	+ width: 100%;
	612	+ /* min-height: 100vh; */
	613	+ font-size: 0.7rem;
	614	+ color: var(--color-black);
	615	+ font-family: 'Pretendard';
	616	+ }
	617	+
	618	+ body {
	619	+ min-width: 100%;
	620	+
	621	+
	622	+ }
	623	+
	624	+ .text-main,
	625	+ .solution-text,
	626	+ .portfolio-text,
	627	+ .map-text,
	628	+ .about-title p:nth-child(1),
	629	+ .marketing-wrap-title h1 {
	630	+ font-size: 2.2rem !important;
	631	+ }
	632	+
	633	+ .solution-title p,
	634	+ .traffic-title p,
	635	+ .ai-title p,
	636	+ .meta-title p,
	637	+ .smart-title p ,.etc-wrap-title p{
	638	+ font-size: 1.5rem;
	639	+ }
	640	+
	641	+ .sub-text,
	642	+ .solution-sub-text {
	643	+ font-size: 1.5rem !important;
	644	+ }
	645	+
	646	+ .solution-box {
	647	+ width: 100%;
	648	+ height: calc(100% - 182px) !important;
	649	+ flex-direction: column;
	650	+ flex-wrap: wrap !important;
	651	+ align-items: center;
	652	+ justify-content: space-between;
	653	+ }
	654	+
	655	+ .solution-box div {
	656	+ height: 50px !important;
	657	+ background-size: 20px;
	658	+ }
	659	+
	660	+ .box:hover {
	661	+ transform: scale(1);
	662	+ }
	663	+
	664	+ .header-area {
	665	+ width: 100%;
	666	+ }
	667	+
	668	+ .mobile-menu-button,
	669	+ .mobil-wrap {
	670	+ display: block;
	671	+ }
	672	+
	673	+ .web-menu {
	674	+ display: none;
	675	+ }
	676	+
	677	+ .mobil-btn {
	678	+ display: block;
	679	+ }
	680	+
	681	+ .mobil-menu {
	682	+ width: 100%;
	683	+ height: 100%;
	684	+ position: absolute;
	685	+ top: 36px;
	686	+ left: 0;
	687	+ z-index: 100000;
	688	+ }
	689	+
	690	+ .mobil-menu ul {
	691	+ list-style: none;
	692	+ padding: 2rem 0;
	693	+ margin: 0;
	694	+ background-color: #fff;
	695	+ }
	696	+
	697	+ .mobil-menu ul li ul li a {
	698	+ font-weight: 500;
	699	+ color: #333;
	700	+ font-size: 1.2rem !important;
	701	+ }
	702	+
	703	+ nav>ul {
	704	+ background-color: #fff;
	705	+ border-bottom: 1px solid #333;
	706	+ }
	707	+
	708	+ nav ul li {
	709	+ color: #333 !important;
	710	+ width: 100% !important;
	711	+ }
	712	+
	713	+ .mobile-menu-button {
	714	+ transform: translateX(10px);
	715	+ }
	716	+
	717	+ .mobile-menu-button,
	718	+ .mobile-menu-button-close {
	719	+ font-size: 2rem;
	720	+ color: #333;
	721	+ height: 29px;
	722	+ width: 29px;
	723	+ }
	724	+
	725	+ .swiper {
	726	+ width: 50%;
	727	+ height: 100%;
	728	+ padding: 2rem;
	729	+ }
	730	+
	731	+ .swiper-slide {
	732	+ width: 100%;
	733	+
	734	+ }
	735	+
	736	+ .slide-wrap {
	737	+ width: 100%;
	738	+ height: 100% !important;
	739	+ }
	740	+
	741	+ .text-area {
	742	+ width: 100% !important;
	743	+ height: 100% !important;
	744	+ padding: 2rem;
	745	+ }
	746	+
	747	+ .innerSwiper-title {
	748	+ font-size: 1.5rem;
	749	+ }
	750	+
	751	+ .innerSwiper .swiper-slide {
	752	+ width: 100% !important;
	753	+ padding: 10px;
	754	+ }
	755	+
	756	+ .marketing-wrapper {
	757	+ width: 100%;
	758	+ padding: 1rem;
	759	+ margin: 0 auto;
	760	+ }
	761	+
	762	+ .marketing-wrap-title h1::after {
	763	+ width: 20px;
	764	+ height: 20px;
	765	+ background-size: 20px;
	766	+ transform: translateX(-50%);
	767	+ }
	768	+
	769	+ .marketing-area {
	770	+ width: 100%;
	771	+ grid-template-columns: 1fr 1fr;
	772	+ }
	773	+
	774	+ .marketing-title {
	775	+ font-size: 1.8rem;
	776	+ }
	777	+
	778	+ #contentDaeguBranch {
	779	+ width: 100%;
	780	+ height: 100%;
	781	+ }
	782	+
	783	+ .root_daum_roughmap_landing {
	784	+ width: 100% !important;
	785	+ height: 50% !important;
	786	+ }
	787	+
	788	+ .root_daum_roughmap .wrap_map {
	789	+ height: 200px !important;
	790	+ }
	791	+
	792	+ .secen-map {
	793	+ width: 100% !important;
	794	+ height: 50% !important;
	795	+ }
	796	+
	797	+ .secen-map div {
	798	+ height: 100% !important;
	799	+ }
	800	+
	801	+ .secen-map .map {
	802	+ width: 100% !important;
	803	+ height: 100% !important;
	804	+ object-fit: cover;
	805	+
	806	+ }
	807	+
	808	+
	809	+
	810	+ .address-tile {
	811	+ width: 100%;
	812	+ font-size: 1.2rem;
	813	+ }
	814	+
	815	+ .address-subtitle {
	816	+ font-size: 1.1rem !important;
	817	+ }
	818	+
	819	+ .address-tile::after {
	820	+ display: none;
	821	+ }
	822	+
	823	+ .map-btn {
	824	+ justify-content: space-between;
	825	+ }
	826	+
	827	+ .map-btn button {
	828	+ width: 40%;
	829	+ font-size: 1.2rem;
	830	+ }
	831	+
	832	+ .address-box {
	833	+ width: 100%;
	834	+ }
	835	+
	836	+ #footer {
	837	+ width: 100%;
	838	+ }
	839	+
	840	+ .footer-wrap {
	841	+ width: 100%;
	842	+ }
	843	+
	844	+ .footer-text div {
	845	+ flex-wrap: wrap;
	846	+ }
	847	+
	848	+ .footer-text div p,
	849	+ .footer-text p {
	850	+ width: 100%;
	851	+ padding-left: 0px !important;
	852	+ }
	853	+
	854	+ .about-wrap {
	855	+ width: 100%;
	856	+ padding: 0px;
	857	+ padding-top: 50px;
	858	+ }
	859	+
	860	+ .about-title-sub {
	861	+ font-size: 1.2rem;
	862	+ }
	863	+
	864	+ .about-area {
	865	+ flex-wrap: nowrap;
	866	+ width: 100%;
	867	+ height: 10%;
	868	+ flex-direction: column;
	869	+ gap: 10px !important;
	870	+ }
	871	+
	872	+ .about-area p {
	873	+ font-size: 1.2rem;
	874	+ }
	875	+
	876	+ .about-radius,
	877	+ .about-radius-bottom,
	878	+ .about-radius-right,
	879	+ .about-radius-left,
	880	+ .about-radius-bottom-left,
	881	+ .about-radius-bottom-right {
	882	+ width: 100%;
	883	+ height: 100%;
	884	+ padding: 0.5rem;
	885	+ border-radius: 5px !important;
	886	+ }
	887	+
	888	+ .about-radius-left::after,
	889	+ .about-radius-bottom-right::after,
	890	+ .about-radius-bottom-left::after,
	891	+ .about-radius::after,
	892	+ .about-radius-right::after {
	893	+ display: none;
	894	+ }
	895	+
	896	+ .about-title {
	897	+ margin-top: 60px;
	898	+ height: 20%;
	899	+ margin-bottom: 1rem !important;
	900	+ }
	901	+
	902	+ .about-text {
	903	+ font-size: 1.5rem;
	904	+ }
	905	+
	906	+ .silde-box {
	907	+ height: 60%;
	908	+ display: flex;
	909	+ flex-direction: column;
	910	+ }
	911	+
	912	+ .silde-box .accordion {
	913	+ height: 10px;
	914	+ padding: 0.5rem;
	915	+ }
	916	+
	917	+ .silde-box .slideImg {
	918	+ display: none;
	919	+ }
	920	+
	921	+ .slideText {
	922	+ padding: 10px;
	923	+ }
	924	+
	925	+ .slideText p:last-child,
	926	+ .slideTextDtail p {
	927	+ font-size: 1.2rem;
	928	+ }
	929	+
	930	+ .slideText p:first-child {
	931	+ font-size: 1.2rem;
	932	+ }
	933	+
	934	+ .slideTextDtail p {
	935	+ font-size: 1rem;
	936	+ border-bottom: 0px !important;
	937	+ margin-bottom: 0.5rem;
	938	+ }
	939	+
	940	+ .slideTextDtail div div {
	941	+ display: none;
	942	+ }
	943	+
	944	+
	945	+
	946	+ .about img{
	947	+ width: 100%;
	948	+ height: 100%;
	949	+ }
	950	+ .about-vision-box{
	951	+ height: 200px;
	952	+ }
	953	+ .about-vision-box img {
	954	+ width: 100%;
	955	+ height: 100%;
	956	+ object-fit: contain;
	957	+ }
	958	+
	959	+ .timeline {
	960	+ width: 100%;
	961	+ }
	962	+
	963	+ .years {
	964	+ display: flex;
	965	+ width: 100%;
	966	+ border-bottom: 1px solid #333;
	967	+ }
	968	+
	969	+ .active-year {
	970	+ font-size: 2rem;
	971	+ }
	972	+
	973	+ .contents {
	974	+ text-align: center;
	975	+
	976	+ }
	977	+
	978	+ .month {
	979	+ text-align: left !important;
	980	+ }
	981	+
	982	+ .month-text div {
	983	+ width: 100%;
	984	+ flex-wrap: nowrap;
	985	+ }
	986	+
	987	+ .taken-wrap-box {
	988	+ width: 100% !important;
	989	+ gap: 5px !important;
	990	+ flex-direction: column;
	991	+ }
	992	+
	993	+ .taken-area {
	994	+ width: 100%;
	995	+ height: 60% !important;
	996	+ align-items: start;
	997	+ gap: 5px !important;
	998	+ }
	999	+
	1000	+ .taken-area img,
	1001	+ .traffic-area img,
	1002	+ .ai-area img {
	1003	+ opacity: 0;
	1004	+ }
	1005	+
	1006	+ .solution-title,
	1007	+ .traffic-title,
	1008	+ .ai-title,
	1009	+ .meta-title,
	1010	+ .smart-title {
	1011	+ height: 15%;
	1012	+ padding-top: 5rem;
	1013	+ margin-bottom: 0rem !important;
	1014	+ }
	1015	+
	1016	+ .taken-box {
	1017	+ width: 100%;
	1018	+ /* flex-direction: column; */
	1019	+ gap: 5px;
	1020	+ }
	1021	+
	1022	+ .taken-box p {
	1023	+ font-size: 1.2rem;
	1024	+ }
	1025	+
	1026	+ .taken-area p {
	1027	+ font-size: 1rem;
	1028	+ }
	1029	+
	1030	+ .text-box-title {
	1031	+ font-size: 1rem;
	1032	+ padding-left: 10px;
	1033	+ }
	1034	+ .solution-after{
	1035	+ justify-content: start;
	1036	+ }
	1037	+ .solution-area-two{
	1038	+ height: calc(100% - 490.05px) !important;
	1039	+ }
	1040	+ .solution-area{
	1041	+
	1042	+ gap: 40px !important;
	1043	+ height: calc(100% - 141.61px)!important;
	1044	+ }
	1045	+
	1046	+ .solution-text-box {
	1047	+ padding: 10px 15px !important;
	1048	+ }
	1049	+
	1050	+ .solution-text-box p {
	1051	+ padding-left: 5px;
	1052	+ }
	1053	+
	1054	+ .solution-text-box div {
	1055	+ gap: 0px !important;
	1056	+ }
	1057	+
	1058	+ .solution-text-box div div {
	1059	+ flex-direction: row;
	1060	+ }
	1061	+
	1062	+ .text-box-title::after {
	1063	+ left: -5px;
	1064	+ top: -1px;
	1065	+ }
	1066	+
	1067	+ .traffic-button {
	1068	+ display: none;
	1069	+ }
	1070	+
	1071	+ .traffic-area {
	1072	+ display: none;
	1073	+ }
	1074	+
	1075	+ .solution-web-box {
	1076	+ display: none;
	1077	+ }
	1078	+
	1079	+
	1080	+
	1081	+ .logo {
	1082	+ width: 50% !important;
	1083	+ height: 14px !important;
	1084	+ background-size: cover;
	1085	+ }
	1086	+
	1087	+ .mobil-wrap {
	1088	+ width: 50%;
	1089	+ }
	1090	+
	1091	+ .mobil-wrap button {
	1092	+ width: 100%;
	1093	+ text-align: right;
	1094	+ }
	1095	+ .box:hover, .box-wrap div img:hover{
	1096	+ transform: scale(1);
	1097	+ }
	1098	+ .customized-wrap-title, .etc-wrap-title{
	1099	+ margin-top: 50px;
	1100	+ margin-bottom: 1rem;
	1101	+ height: 100%;
	1102	+ }
	1103	+ .etc-wrap-title h1{
	1104	+ padding-top: 0rem;
	1105	+ }
	1106	+ .box-wrap{
	1107	+ width: 100% !important;
	1108	+ height: 100%;
	1109	+ gap: 10px !important;
	1110	+ margin-bottom: 0px;
	1111	+
	1112	+ /* flex-direction: column; */
	1113	+ }
	1114	+ .box-wrap img{
	1115	+ width: 100%;
	1116	+ padding-bottom: 0rem !important;
	1117	+ object-fit: contain;
	1118	+ height: 77px !important;
	1119	+ }
	1120	+ .box-wrap div{
	1121	+ height: 100%;
	1122	+ }
	1123	+ .box-wrap div p{
	1124	+ padding: 1px;
	1125	+ margin-bottom: 0rem !important;
	1126	+ font-size: 1rem !important;
	1127	+ }
	1128	+ .box-wrap div div{
	1129	+ display: none;
	1130	+ height: 37% !important;
	1131	+ }
	1132	+ .etc-wrap-title h1,.customized-wrap-title h1{
	1133	+ font-size: 1.5rem !important;
	1134	+ }
	1135	+ .etc-wrap-title p,.customized-wrap-title p{
	1136	+ font-size: 1.2rem !important;
	1137	+ }
	1138	+ .etc-wrap-title{
	1139	+ margin-bottom: 10px !important;
	1140	+ }
	1141	+ .customized-box{
	1142	+ width: 100%;
	1143	+ display: grid;
	1144	+ gap: 10px;
	1145	+ grid-template-columns: 1fr 1fr 1fr 1fr;
	1146	+ }
	1147	+ .customized-box div{
	1148	+ width: 100%;
	1149	+
	1150	+ margin-bottom: 10px;
	1151	+ }
	1152	+ .customized-box p{
	1153	+ font-size: 1.1rem !important;
	1154	+ }
	1155	+ .customized-box div img{
	1156	+ width: 100%;
	1157	+ }
	1158	+ .etc-box-title {
	1159	+ margin-bottom: 0px;
	1160	+ }
	1161	+
	1162	+ .etc-box-title p{
	1163	+ padding-left: 0px;
	1164	+ }
	1165	+
	1166	+ .etc-box p{
	1167	+ padding-left: 0px;
	1168	+ }
	1169	+
	1170	+
	1171	+
	1172	+} (No newline at end of file)

f872fcc

6c43e06

resources/css/style.css

--- resources/css/style.css

+++ resources/css/style.css

...	...	@@ -4,6 +4,7 @@
4	4	width: 1200px;
5	5	height: 100%;
6	6	margin: auto;
	7	+ padding-top: 6rem;
7	8	text-align: center;
8	9	}
9	10
...	...	@@ -30,6 +31,18 @@
30	31
31	32	}
32	33
	34	+#header.active .header .mobile-menu-button,
	35	+.mobile-menu-button-close {
	36	+ color: #333;
	37	+}
	38	+
	39	+#header.active .header .mobile-menu-button-close {
	40	+ color: #333;
	41	+ display: block;
	42	+}
	43	+#header.active .header .mobil-menu ul {
	44	+ background-color: #fff;
	45	+}
33	46	.slide-back {
34	47	background: url(../img/common/main-2.png)no-repeat;
35	48	width: 0;
...	...	@@ -40,7 +53,7 @@
40	53	}
41	54
42	55	.slide-back.active {
43		- animation: slideIn 1s forwards;
	56	+ animation: slideIn 0.5s forwards;
44	57	overflow: hidden;
45	58
46	59	}
...	...	@@ -165,7 +178,8 @@
165	178	cursor: pointer;
166	179	}
167	180
168		-.box:hover {
	181	+.box:hover,
	182	+.box-wrap div img:hover {
169	183	transform: scale(1.1);
170	184	transition: all 0.5s ease;
171	185	}
...	...	@@ -553,7 +567,7 @@
553	567	position: absolute;
554	568	content: '';
555	569	top: 50%;
556		- left: 20px;
	570	+ left: 4%;
557	571	transform: translateY(-50%);
558	572	width: 20px;
559	573	height: 20px;
...	...	@@ -570,39 +584,6 @@
570	584	}
571	585
572	586
573		-/* .scale-in-br {
574		- -webkit-animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
575		- animation: scale-in-br 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
576		-}
577		-@keyframes scale-in-br {
578		- 0% {
579		- -webkit-transform: scale(0);
580		- transform: scale(0);
581		- -webkit-transform-origin: 100% 100%;
582		- transform-origin: 100% 100%;
583		- opacity: 1;
584		- }
585		- 100% {
586		- -webkit-transform: scale(1);
587		- transform: scale(1);
588		- -webkit-transform-origin: 100% 100%;
589		- transform-origin: 100% 100%;
590		- opacity: 1;
591		- }
592		- }
593		- */
594		-
595		-/* footer {
596		- transition: opacity 0.5s, visibility 0.5s;
597		- opacity: 0;
598		- visibility: hidden;
599		- }
600		-
601		- footer.show {
602		- opacity: 1;
603		- visibility: visible;
604		- } */
605		-
606	587
607	588
608	589
...	...	@@ -614,18 +595,19 @@
614	595	position: relative;
615	596	bottom: 0;
616	597	transition: all 0.5s;
617		- display: none;
	598	+ /* display: none; */
618	599	background-color: #333;
619	600	}
620	601
621		-#footer.show {
	602	+/* #footer.show {
622	603	position: relative;
623	604	bottom: 200px;
624	605	z-index: 10000;
625	606	display: block !important;
626		-}
	607	+} */
627	608	.show-footer {
628		- margin-bottom: 100px; /* 푸터의 높이에 따라 조정 */
	609	+ margin-bottom: 100px;
	610	+ /* 푸터의 높이에 따라 조정 */
629	611	}
630	612
631	613	.footer-wrap {
...	...	@@ -794,6 +776,7 @@
794	776	width: 100%;
795	777	padding: 15px 40px;
796	778	border-radius: 10px;
	779	+ background-color: #fff;
797	780	box-shadow: 2px 2px 5px #3e3e3e30;
798	781	}
799	782
...	...	@@ -1201,10 +1184,13 @@
1201	1184	/* color: #b1a1c3; */
1202	1185	z-index: 1;
1203	1186	}
1204		-.accordion.active .accordion-num ,.accordion.active .accordion-num span{
	1187	+
	1188	+.accordion.active .accordion-num,
	1189	+.accordion.active .accordion-num span {
1205	1190	color: #80649b;
1206	1191
1207	1192	}
	1193	+
1208	1194	.accordion.active p,
1209	1195	.slideTextDtail.active p {
1210	1196	opacity: 1;
...	...	@@ -1228,27 +1214,31 @@
1228	1214	}
1229	1215
1230	1216
1231		-.history-wrap{
	1217	+.history-wrap {
1232	1218	width: 100%;
1233	1219	height: 100%;
1234	1220	}
1235		-.timeline{
	1221	+
	1222	+.timeline {
1236	1223	width: 100%;
1237	1224	height: 100%;
1238	1225	height: calc(100% - 300px);
1239	1226	}
1240		-.contents{
	1227	+
	1228	+.contents {
1241	1229	height: 100%;
1242	1230	overflow-y: auto;
1243	1231	}
1244		-.month{
	1232	+
	1233	+.month {
1245	1234	width: 100px;
1246	1235	font-size: 2rem;
1247	1236	font-weight: 700;
1248	1237	text-align: right !important;
1249		- color: #213F99 ;
	1238	+ color: #213F99;
1250	1239	}
1251		-.year{
	1240	+
	1241	+.year {
1252	1242	width: 200px;
1253	1243	color: #D6DEF6;
1254	1244	font-weight: 900;
...	...	@@ -1256,22 +1246,26 @@
1256	1246	transition: all 0.2s ease;
1257	1247	padding: 2rem 0;
1258	1248	}
1259		-.year span{
	1249	+
	1250	+.year span {
1260	1251	font-size: 2rem;
1261	1252	font-weight: 900;
1262		-
	1253	+
1263	1254	}
	1255	+
1264	1256	.active-year {
1265	1257	font-size: 7rem;
1266	1258	font-weight: 900;
1267		- color: #213F99; /* 색상은 원하는 대로 변경하세요 */
	1259	+ color: #213F99;
	1260	+ /* 색상은 원하는 대로 변경하세요 */
1268	1261	}
1269		-.month-text p{
1270		- margin-bottom: 1rem;
	1262	+
	1263	+.month-text p {
	1264	+ margin-bottom: 1rem;
1271	1265	}
1272	1266
1273	1267
1274		-.month-text img{
	1268	+.month-text img {
1275	1269	border: 1px solid #808080;
1276	1270	padding: 5px;
1277	1271	width: 120px;
...	...	@@ -1282,45 +1276,109 @@
1282	1276
1283	1277
1284	1278	.active-year {
1285		- color: #213F99 ;
	1279	+ color: #213F99;
1286	1280	font-weight: bold;
1287	1281	cursor: default;
1288	1282	}
1289	1283
1290	1284	/* portpoilo */
1291	1285
1292		-.customized-wrap-title,.etc-wrap-title{
	1286	+.customized-wrap-title,
	1287	+.etc-wrap-title {
1293	1288	width: 100%;
1294	1289	height: 60px;
1295	1290	}
1296		-.customized-wrap-title h1{
	1291	+
	1292	+.customized-wrap-title h1 {
1297	1293	font-size: 4rem;
1298	1294
1299	1295	}
1300		-.customized-wrap-title p{
	1296	+
	1297	+.customized-wrap-title p {
1301	1298	font-size: 1.5rem;
1302	1299
1303	1300	}
1304		-.customized-box p{
	1301	+
	1302	+.customized-box p {
1305	1303	font-size: 2rem;
1306	1304	font-weight: 500;
1307	1305	}
1308		-.etc-wrap-title h1{
	1306	+
	1307	+.etc-wrap-title h1 {
1309	1308	font-size: 5rem;
1310	1309	}
1311		-.etc-box{
	1310	+
	1311	+.etc-box {
1312	1312	width: 49%;
1313	1313	}
1314		-.etc-box img{
	1314	+
	1315	+.etc-box img {
1315	1316	width: 100%;
1316	1317	object-fit: contain;
1317	1318	}
1318		-.etc-box-title p{
	1319	+
	1320	+.etc-box-title p {
1319	1321	font-weight: 900;
1320	1322	font-size: 2.5rem !important;
1321	1323	}
1322		-.etc-box p{
	1324	+
	1325	+.etc-box p {
1323	1326	font-size: 1.5rem;
1324	1327	line-height: 2;
1325	1328	padding-left: 2rem;
	1329	+}
	1330	+
	1331	+#contentDaeguBranch {
	1332	+ width: 100%;
	1333	+ height: 500px;
	1334	+}
	1335	+
	1336	+.wrap_controllers {
	1337	+ display: none;
	1338	+}
	1339	+
	1340	+.video-wrap {
	1341	+ width: 100%;
	1342	+ height: 100%;
	1343	+ position: absolute;
	1344	+ top: 0;
	1345	+ left: 0;
	1346	+ z-index: 1111;
	1347	+ background-color: #242a305e;
	1348	+}
	1349	+
	1350	+.traffic-video {
	1351	+ position: absolute;
	1352	+ top: 50%;
	1353	+ transform: translateY(-50%);
	1354	+ left: 25%;
	1355	+
	1356	+ z-index: 111;
	1357	+ width: 1000px;
	1358	+ /* height: 600px; */
	1359	+ padding: 3rem;
	1360	+ background-color: #FFFFFF;
	1361	+ box-shadow: 5px 5px 10px #242a3044;
	1362	+ border-radius: 20px;
	1363	+}
	1364	+
	1365	+.traffic-video video {
	1366	+ width: 100%;
	1367	+ height: 100%;
	1368	+ border-radius: 10px;
	1369	+
	1370	+}
	1371	+
	1372	+.traffic-video p {
	1373	+ font-size: 2rem;
	1374	+ color: #213F99;
	1375	+ font-weight: 600;
	1376	+}
	1377	+
	1378	+.close-btn {
	1379	+ cursor: pointer;
	1380	+}
	1381	+
	1382	+.etc-wrap-title p {
	1383	+ font-size: 2rem;
1326	1384	} (No newline at end of file)

6c43e06

resources/font/Pretendard-Black.woff (Binary) (added)

+++ resources/font/Pretendard-Black.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-Bold.woff (Binary) (added)

+++ resources/font/Pretendard-Bold.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-ExtraBold.woff (Binary) (added)

+++ resources/font/Pretendard-ExtraBold.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-ExtraLight.woff (Binary) (added)

+++ resources/font/Pretendard-ExtraLight.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-Light.woff (Binary) (added)

+++ resources/font/Pretendard-Light.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-Medium.woff (Binary) (added)

+++ resources/font/Pretendard-Medium.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-Regular.woff (Binary) (added)

+++ resources/font/Pretendard-Regular.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-SemiBold.woff (Binary) (added)

+++ resources/font/Pretendard-SemiBold.woff

Binary file is not shown

6c43e06

resources/font/Pretendard-Thin.woff (Binary) (added)

+++ resources/font/Pretendard-Thin.woff

Binary file is not shown

6c43e06

resources/img/common/Traffic Agent .mp4 (added)

+++ resources/img/common/Traffic Agent .mp4

This file is too big to display.

6c43e06

resources/img/common/data-img1.png (Binary) (added)

+++ resources/img/common/data-img1.png

Binary file is not shown

6c43e06

resources/img/common/data-img2.png (Binary) (added)

+++ resources/img/common/data-img2.png

Binary file is not shown

6c43e06

resources/img/common/data-img3.png (Binary) (added)

+++ resources/img/common/data-img3.png

Binary file is not shown

6c43e06

resources/img/common/hanti.mp4 (added)

+++ resources/img/common/hanti.mp4

This file is too big to display.

6c43e06

resources/img/common/meta.mp4 (added)

+++ resources/img/common/meta.mp4

This file is too big to display.

6c43e06

resources/img/common/smart-img1.png (Binary) (added)

+++ resources/img/common/smart-img1.png

Binary file is not shown

6c43e06

resources/img/common/smart-img2.png (Binary) (added)

+++ resources/img/common/smart-img2.png

Binary file is not shown

6c43e06

resources/img/common/smart-img3.png (Binary) (added)

+++ resources/img/common/smart-img3.png

Binary file is not shown

6c43e06

resources/img/common/visual-img1.png (Binary) (added)

+++ resources/img/common/visual-img1.png

Binary file is not shown

6c43e06

resources/img/common/visual-img2.png (Binary) (added)

+++ resources/img/common/visual-img2.png

Binary file is not shown

6c43e06

resources/img/common/visual-img3.png (Binary) (added)

+++ resources/img/common/visual-img3.png

Binary file is not shown

6c43e06

resources/img/common/visual-img4.png (Binary) (added)

+++ resources/img/common/visual-img4.png

Binary file is not shown

6c43e06

resources/img/common/visual-img5.png (Binary) (added)

+++ resources/img/common/visual-img5.png

Binary file is not shown

6c43e06

resources/img/common/visual-img6.png (Binary) (added)

+++ resources/img/common/visual-img6.png

Binary file is not shown

6c43e06

resources/img/common/visual-img7.png (Binary) (added)

+++ resources/img/common/visual-img7.png

Binary file is not shown

f872fcc

6c43e06

views/layout/Header.html

--- views/layout/Header.html

+++ views/layout/Header.html


     <div class="header">
         <div class="header-area flex justify-between align-center">
             <div class="logo"></div>
+            <div class="mobil-wrap">
+                <button class="mobile-menu-button">☰</button>
+                <button class="mobile-menu-button-close" style="display: none;">x</button>
+
+            </div>
+
             <nav>
-                <ul>
+                <ul class="web-menu">
                     <li>
                         <a href="../../views/pages/AboutUs.html">About Us</a>
-                      
+
                     </li>
                     <li><a href="../../views/pages/Solution.html">Solution</a></li>
                     <li>
                         <a href="#">Portfolio</a>
                         <ul class="dropdown ">
-                            <li><a href="">Data</a></li>
-                            <li><a href="#">Visualization</a></li>
-                            <li><a href="#">Smart City</a></li>
+                            <li><a href="../../views/pages/Data.html">Data</a></li>
+                            <li><a href="../../views/pages/Visualization.html">Visualization</a></li>
+                            <li><a href="../../views/pages/SmartCtiy.html">Smart City</a></li>
                             <li><a href="../../views/pages/DataAnalysis.html">Data Analysis</a></li>
                             <li><a href="../../views/pages/Customized.html">Customized Consulting</a></li>
                             <li><a href="../../views/pages/Etc.html">ETC</a></li>

                     </li>
                     <li><a href="../../views/pages/Marketing.html">Marketing</a></li>
                 </ul>
+
+            </nav>
+            <nav class="mobil-menu">
+                <ul>
+                    <li>
+                        <a href="../../views/pages/AboutUs.html">About Us</a>
+
+                    </li>
+                    <li><a href="../../views/pages/Solution.html">Solution</a></li>
+                    <li>
+                        <details>
+                            <summary style="list-style-type: none;"><a>Portfolio</a></summary>
+                            <ul>
+                                <li><a href="../../views/pages/Data.html">Data</a></li>
+                                <li><a href="../../views/pages/Visualization.html">Visualization</a></li>
+                                <li><a href="../../views/pages/SmartCtiy.html">Smart City</a></li>
+                                <li><a href="../../views/pages/DataAnalysis.html">Data Analysis</a></li>
+                                <li><a href="../../views/pages/Customized.html">Customized Consulting</a></li>
+                                <li><a href="../../views/pages/Etc.html">ETC</a></li>
+                            </ul>
+                        </details>
+                    </li>
+                    <li><a href="../../views/pages/Marketing.html">Marketing</a></li>
+                </ul>
             </nav>
         </div>
     </div>
 </body>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 <script>
-    $('nav ul li').click(function(){
-        $('nav ul li').addClass('on');
-        console.log('클릭되었습니다');
+    var portfolioItem = document.querySelector('nav ul li:nth-child(3)'); // Portfolio가 세 번째 항목이라고 가정
+
+    var dropdownMenu = portfolioItem.querySelector('.dropdown');
+
+    portfolioItem.addEventListener('mouseover', function () {
+        dropdownMenu.classList.add('show');
     });
+
+    portfolioItem.addEventListener('mouseleave', function () {
+        dropdownMenu.classList.remove('show');
+    });
+    var navLinks = document.querySelectorAll('nav > ul > li > a');
+
+    var currentUrl = window.location.href;
+
+    navLinks.forEach(function (link) {
+
+        if (link.href === currentUrl) {
+            link.classList.add('clicked');
+        } else {
+            link.classList.remove('clicked');
+        }
+    });
+    var logoDiv = document.querySelector('.logo');
+
+    logoDiv.addEventListener('click', function () {
+        window.location.href = '../main.html';
+    });
+
+    logoDiv.style.cursor = 'pointer';
+
+    $('.mobile-menu-button').click(function () {
+        $('.mobil-menu').show();
+        $('.mobile-menu-button-close').show();
+        $('.mobile-menu-button').hide();
+    });
+    $('.mobile-menu-button-close').click(function () {
+        $('.mobil-menu').hide();
+        $('.mobile-menu-button-close').hide();
+        $('.mobile-menu-button').show();
+    });
+
+    // document.addEventListener("DOMContentLoaded", function () {
+    //     // '.dropdown'을 클릭했을 때 이벤트 리스너 추가
+    //     var dropdownLinks = document.querySelectorAll('.mobil-menu a[href="#"]');
+
+    //     dropdownLinks.forEach(function (link) {
+    //         link.addEventListener('click', function (e) {
+    //             // 클릭된 요소 바로 다음에 위치한 요소(실제 드롭다운 메뉴)를 찾음
+    //             var dropdownContent = this.nextElementSibling;
+
+    //             // 드롭다운 메뉴의 표시 상태를 토글
+    //             if (dropdownContent.style.display === 'block') {
+    //                 dropdownContent.style.display = 'none';
+    //             } else {
+    //                 dropdownContent.style.display = 'block';
+    //             }
+
+    //             // // 링크의 기본 동작(링크 이동)을 방지
+    //             // e.preventDefault();
+    //         });
+    //     });
+    // });
+
 </script>
 <style>
+    .clicked {
+        color: #213F99 !important;
+    }
+
     #header {
         background-color: transparent;
         position: absolute;

         width: 200px;
         background-size: contain;
         height: 25px;
+    }
+
+    .logo a {
+        width: 200px;
     }
 
     .header-area {

     nav ul li a {
         color: white;
         font-size: 1.5rem;
+        font-weight: 600;
         display: block;
         padding: 8px;
         text-align: center;
     }
 
-
-    nav ul li ul.dropdown {
+    .mobil-menu {
         display: none;
+    }
+
+
+    .dropdown {
+        opacity: 0;
+        visibility: hidden;
         position: absolute;
         top: 35px;
         right: 0;
         width: 100%;
         margin: 0 auto;
         text-align: center;
-        /* height: 100px; */
-        background-color: #f9f9f943;
-        transition:  0.3rem ease;
+        background-color: #fff;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
         z-index: 1;
     }
 
-    nav ul li:hover ul.dropdown {
-        display: block;
+    /* 드롭다운 메뉴 보임 */
+    .dropdown.show {
+        opacity: 1;
+        visibility: visible;
     }
-
-
-    nav ul li ul.dropdown li a {
-        display: block;
-        color: #ffffff;
-        text-decoration: none;
-    }
-    nav ul li{
-    }
-    nav ul li.on{ color: #213F99;}
 </style>
 
 </html>

f872fcc

6c43e06

views/main.html

--- views/main.html

+++ views/main.html


             <div class="swiper-slide">
                 <div class="slide-wrap pt60 slide-solution">
                     <div class="  flex align-center">
-                        <div style="width: 1200px; margin: 0 auto;">
+                        <div style="width: 1200px; margin: 0 auto;" class="text-area">
                             <p class="portfolio-text pb60">PORTFOLIO</p>
                         </div>
                         <div class="swiper innerSwiper" style="height: calc(100% - 113px);">
                             <div class="swiper-wrapper">
-                                <div class="swiper-slide ">
+                                <div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
                                     <img src="../resources/img/common/innerimg-1.png" alt="">
                                     <div class=" innerSwiper-textBox">
                                         <p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>

                                     </div>
 
                                 </div>
-                                <div class="swiper-slide ">
+                                <div class="swiper-slide " data-url="../../views/pages/Visualization.html">
                                     <img src="../resources/img/common/innerimg-2.png" alt="">
                                     <div class=" innerSwiper-textBox">
                                         <p class="innerSwiper-title">시각화 서비스 시스템 구축</p>

                                     </div>
 
                                 </div>
-                                <div class="swiper-slide ">
+                                <div class="swiper-slide " data-url="../../views/pages/SmartCtiy.html">
                                     <img src="../resources/img/common/innerimg-3.png" alt="">
                                     <div class=" innerSwiper-textBox">
                                         <p class="innerSwiper-title">스마트시티 솔루션 공급</p>

                                     </div>
 
                                 </div>
-                                <div class="swiper-slide ">
+                                <div class="swiper-slide " data-url="../../views/pages/Data.html">
                                     <img src="../resources/img/common/innerimg-4.png" alt="">
                                     <div class=" innerSwiper-textBox">
                                         <p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>

                                     </div>
 
                                 </div>
-                                <div class="swiper-slide ">
+                                <div class="swiper-slide " data-url="../../views/pages/Customized.html">
                                     <img src="../resources/img/common/innerimg-5.png" alt="">
                                     <div class=" innerSwiper-textBox">
                                         <p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>

                                     </div>
 
                                 </div>
-                                <div class="swiper-slide ">
+                                <div class="swiper-slide " data-url="../../views/pages/Etc.html">
                                     <img src="../resources/img/common/innerimg-6.png" alt="">
                                     <div class=" innerSwiper-textBox">
                                         <p class="innerSwiper-title">기타사례</p>

                             </div>
                         </div>
                         <div id="contentDaeguBranch" style="display: none;">
-                            <div>
+                            <div class="secen-map"
+                                style="font:normal normal 400 12px/normal dotum, sans-serif; width:1200px; height:500px; color:#333; position:relative">
+                                <div style="height: 500px;"><a
+                                        href="https://map.kakao.com/?urlX=880044.0&amp;urlY=652697.0&amp;name=%EB%8C%80%EA%B5%AC%20%EC%88%98%EC%84%B1%EA%B5%AC%20%EC%95%8C%ED%8C%8C%EC%8B%9C%ED%8B%B01%EB%A1%9C%20160&amp;map_type=TYPE_MAP&amp;from=roughmap"
+                                        target="_blank"><img class="map"
+                                            src="http://t1.daumcdn.net/roughmap/imgmap/f280f94b124c89a6eb7ca7ad6c3e2e14c09453140c469b857a76899c9b1ac096"
+                                            width="1198px" height="498px" style="border:1px solid #ccc;"></a></div>
 
-                                <div id="daumRoughmapContainer1711610549858"
-                                    class="root_daum_roughmap root_daum_roughmap_landing map"></div>
-
-                                <!-- 3. 실행 스크립트 -->
-                                <script charset="UTF-8">
-                                    new daum.roughmap.Lander({
-                                        "timestamp": "1711610549858",
-                                        "key": "2ipvq",
-                                        "mapWidth": "1200",
-                                        "mapHeight": "500"
-                                    }).render();
-
-                                </script>
-                                <div class="address-box flex">
-                                    <p class="address-tile">대구지사</p>
-                                    <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
-                                </div>
+                            </div>
+                            <div class="address-box flex">
+                                <p class="address-tile">대구지사</p>
+                                <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
                             </div>
                         </div>
                     </div>
-
                 </div>
-
 
             </div>
 
+
         </div>
-        <div id="footer"></div>
+
+    </div>
+    <div id="footer"></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 type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2ccd5508acc8b99103687aab41907f94"></script>
 
 <script>
+
     $(document).ready(function () {
         $("#btnHeadquarter").click(function () {
             $("#btnHeadquarter").addClass('on');

             $("#contentHeadquarter").hide();
 
             $("#contentDaeguBranch").show();
-
-
-
-
 
         });
     });

             //     document.querySelector('#footer').classList.add('on');
 
             // },
-            slideChange: function () {
-                var currentIndex = this.realIndex;
-                if (currentIndex === 0) {
-                    $('#header').removeClass('active');
-                } else {
-                    $('#header').addClass('active');
-                }
 
-                if (this.activeIndex === 5) {
-                    document.querySelector('footer').classList.add('on');
-                } else {
-                    document.querySelector('footer').classList.remove('on');
-                }
-
-            },
 
             slideChangeTransitionEnd: function () {
                 if (this.activeIndex === 1) {

 
                 }
             },
+            slideChange: function () {
+                var currentIndex = this.realIndex;
+                if (currentIndex === 0) {
+                    $('#header').removeClass('active');
+                } else {
+                    $('#header').addClass('active');
+                }
 
+                var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
+                if (this.activeIndex === lastIndex) {
+                    $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
+                } else {
+                    $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
+                }
+            },
+            reachEnd: function () {
+                swiper1.mousewheel.disable();
+            },
+
+        }
+    });
+    window.addEventListener('wheel', function (event) {
+        if (event.deltaY < 0) {
+            swiper1.mousewheel.enable();
+        } else if (event.deltaY > 0) {
         }
     });
     window.addEventListener('load', () => {

                 let firstTextBox = this.slides[0].querySelector('.innerSwiper-textBox');
                 if (firstTextBox) firstTextBox.classList.add('active');
             },
-            // activeIndexChange: function () {
-            //     // 모든 텍스트 박스에서 'active' 클래스 제거
-            //     this.slides.forEach(slide => {
-            //         let textBox = slide.querySelector('.innerSwiper-textBox');
-            //         if (textBox) textBox.classList.remove('active');
-            //     });
-            //     // 현재 활성화된 슬라이드의 텍스트 박스에 'active' 클래스 추가
-            //     let currentTextBox = this.slides[this.activeIndex].querySelector('.innerSwiper-textBox');
-            //     if (currentTextBox) currentTextBox.classList.add('active');
-            // }
+
         }
     });
 
-    // Swiper 인스턴스 초기화
-    // mySwiper.init();
 
 
 
 
 
+    document.addEventListener('DOMContentLoaded', function () {
+        var newsDivs = document.querySelectorAll('div[data-url]');
 
+        newsDivs.forEach(function (div) {
+            div.addEventListener('click', function () {
+                var url = this.getAttribute('data-url');
+                window.open(url, '_blank');
+            });
+            // 클릭 가능한 요소임을 시각적으로 나타내기 위해 커서 스타일 변경
+            div.style.cursor = 'pointer';
+        });
+    });
 
 
 

 
 
 <style scoped>
+    .footer-text p{
+        font-size: 1.3rem;
+    }
+    .copyright{
+        font-size: 1.3rem;
+    }
     #header {
         position: fixed;
         top: 0;
         z-index: 3;
     }
 
-
-    /* #footer {
-        position: relative;
-        height: 100px;
-        z-index: 10000;
+    .dropdown {
+        opacity: 0;
+        visibility: hidden;
+        position: absolute;
+        top: 35px;
+        right: 0;
+        width: 100%;
+        margin: 0 auto;
+        text-align: center;
+        background-color: #ffffff43;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+        z-index: 1;
     }
-
-    #footer.on {
-        opacity: 1;
-        display: block;
-    } */
-
 
 
     html,

         -ms-overflow-style: none;
 
     }
-
+    .mobile-menu-button,
+    .mobile-menu-button-close {
+        font-size: 2rem;
+        color: #fff;
+        height: 29px;
+        width: 29px;
+    }
+    .mobil-menu {
+        width: 100%;
+        height: 100%;
+        top: 40px;
+    }
+    .mobil-menu ul {
+        list-style: none;
+        margin: 0;
+        background-color: #ffffff43;
+    }
+    .mobil-menu ul li ul li a {
+        font-weight: 500;
+        color: #fff;
+        font-size: 1.2rem !important;
+    }
+  
     ::-webkit-scrollbar {
         display: none;
     }

         background-position: bottom;
     }
 
-  
-    .main-text {
 
+    .main-text {
         padding-bottom: 50px;
     }
 

     }
 
     .slide-solution {
-        padding: 158px 0 80px;
+        padding: 100px 0 80px;
         font-family: 'Pretendard';
 
     }
-
 </style>
 
 </html>

f872fcc

6c43e06

views/pages/AboutUs.html

--- views/pages/AboutUs.html

+++ views/pages/AboutUs.html


                     <div class="text-area flex">
                         <div class="about-title mb90" style="width: 100%;">
                             <p class="mb20">ABOUT US</p>
-                            <p class="mb20">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
+                            <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
                         </div>
 
-                        <div class=" flex justify-center " style="width: 100%; gap: 190px; margin-bottom: 50px;">
+                        <div class=" flex justify-center about-area"
+                            style="width: 100%; gap: 190px; margin-bottom: 50px;">
                             <div class="about-radius-left ">
                                 <p class="about-text">공감</p>
                                 <p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>

                                 <p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
                             </div>
                         </div>
-                        <div class="flex justify-center " style="width: 100%;gap: 188px;">
+                        <div class="flex justify-center about-area" style="width: 100%;gap: 188px;">
                             <div class="about-radius-bottom-left ">
                                 <p class="about-text">검증</p>
                                 <p class="about-sub-text">결과물의 철저한 검증</p>

                     <div class="text-area flex">
                         <div class="about-title mb20" style="width: 100%;">
                             <p class="mb20">Business</p>
-                            <p class="mb20">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로 해결합니다.</p>
+                            <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
+                                해결합니다.</p>
                         </div>
-                        <div class="container">
+                        <div class="container silde-box">
                             <div class="accordion"
                                 style="background-image: url(../../resources/img/common/about-img1.png);">
                                 <div class="slideText  pl20">

 
 
             </div>
-            <div class="swiper-slide">
+            <div class="swiper-slide about">
                 <div class="taken-wrap slide-wrap ">
                     <div class="text-area flex">
                         <div class="about-title mb20" style="width: 100%;">
                             <p class="mb20">Vision</p>
-                            <p class="mb20">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및 매출을 확대해 나갑니다.
+                            <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
+                                매출을 확대해 나갑니다.
                             </p>
+                            <div class="flex justify-center about-vision-box">
+                                <img src="../../resources/img/common/about-img5.png" alt="">
+                                <img src="../../resources/img/common/about-img4.png" alt="">
+                            </div>
                         </div>
-                    </div>
-                    <div class="flex justify-center about-vision-box">
-                        <img src="../../resources/img/common/about-img5.png" alt="">
-                        <img src="../../resources/img/common/about-img4.png" alt="">
                     </div>
                 </div>
             </div>

                         </div>
                         <div class="timeline flex align-center justify-between" style="gap: 0px;">
                             <div class="years" id="years">
-                                <div class="year active-year" data-year="2021">2020</div>
-                                <div class="year" data-year="2022">2021</div>
-                                <div class="year" data-year="2023">2022</div>
+                                <div class="year active-year" data-year="2021">2021</div>
+                                <div class="year" data-year="2022">2022</div>
+                                <div class="year" data-year="2023">2023</div>
                                 <!-- 더 많은 년도 추가 -->
                             </div>
                             <div class="contents" id="contents">

 
 
         </div>
-        <footer id="footer">
-            여기는 푸터 내용입니다.
-        </footer>
     </div>
+    <footer id="footer"></footer>
 
 
 

 
             slideChange: function () {
                 var currentIndex = this.realIndex;
-                var lastIndex = this.slides.length - 1;
-                console.log("현재 슬라이드 인덱스:", currentIndex, "마지막 슬라이드 인덱스:", lastIndex);
-
                 if (currentIndex === 0) {
                     $('#header').removeClass('active');
                 } else {
                     $('#header').addClass('active');
                 }
-
-                if (currentIndex === lastIndex) {
-                    // 마지막 슬라이드에 도달했을 때
-                    $('#footer').removeClass('show');
-
-                    $('.history-wrap').addClass('show-footer'); // 하단 마진 추가
+                var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
+                if (this.activeIndex === lastIndex) {
+                    $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
                 } else {
-                    // 그 외의 경우
-                    $('.swiper-container').removeClass('show-footer'); // 하단 마진 제거
+                    $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
                 }
             },
+            reachEnd: function () {
+                swiper.mousewheel.disable();
+            },
+
+        }
+    });
+    window.addEventListener('wheel', function (event) {
+        if (event.deltaY < 0) {
+            swiper.mousewheel.enable();
+        } else if (event.deltaY > 0) {
         }
     });
     // 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화

     $(function () {
         $("#header").load("../layout/Header.html");
         $("#footer").load("../layout/footer.html");
-        $("#footer").hide();
+        $("#footer").show();
 
     });
 

6c43e06

views/pages/Data.html (added)

+++ views/pages/Data.html

...	...	@@ -0,0 +1,167 @@
	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>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+ <div class="taken-wrap " style=" height: 100%;">
	26	+
	27	+ <div class="text-area flex align-center">
	28	+
	29	+ <div class="flex justify-between" style="gap: 10px; width: 100%;">
	30	+ <div class="etc-wrap-title mb60" style="height: 150px;">
	31	+ <h1 class="mb20 pt70">데이터분석을 통한 인사이트 도출</h1>
	32	+ <p>데이터를 통하여 가치 있는 정보와 인사이트를 제공하여 세상을 이롭게 만듭니다.</p>
	33	+ </div>
	34	+ <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px; height: calc(100% - 60px);">
	35	+ <div class="">
	36	+ <img src="../../resources/img/common/data-img1.png" alt="">
	37	+ <p>구미시 주요 이슈 및 민원 분석</p>
	38	+ </div>
	39	+ <div class="">
	40	+ <img src="../../resources/img/common/data-img2.png" alt="">
	41	+ <p>영천시 1인가구,상권,관광,청년 일자리분야 데이터 분석</p>
	42	+ </div>
	43	+ <div class="">
	44	+ <img src="../../resources/img/common/data-img3.png" alt="">
	45	+ <p>김천시 무더위 쉼터 선정 위한 데이터 분석</p>
	46	+ </div>
	47	+
	48	+ </div>
	49	+
	50	+ </div>
	51	+
	52	+ </div>
	53	+ </div>
	54	+ <div id="footer"></div>
	55	+
	56	+</body>
	57	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	58	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	59	+<script>
	60	+
	61	+ $(document).ready(function () {
	62	+ $("#btnHeadquarter").click(function () {
	63	+ $("#btnHeadquarter").addClass('on');
	64	+ $("#btnDaeguBranch").removeClass('on');
	65	+ $("#contentDaeguBranch").hide();
	66	+
	67	+ $("#contentHeadquarter").show();
	68	+ });
	69	+
	70	+ $("#btnDaeguBranch").click(function () {
	71	+ $("#btnDaeguBranch").addClass('on');
	72	+ $("#btnHeadquarter").removeClass('on');
	73	+
	74	+ $("#contentHeadquarter").hide();
	75	+
	76	+ $("#contentDaeguBranch").show();
	77	+
	78	+
	79	+
	80	+
	81	+
	82	+ });
	83	+ });
	84	+
	85	+
	86	+
	87	+ $(function () {
	88	+ $("#header").load("../layout/Header.html");
	89	+ $("#footer").load("../layout/footer.html");
	90	+ $("#footer").show();
	91	+
	92	+ });
	93	+
	94	+</script>
	95	+
	96	+<style scoped>
	97	+ /* 스크롤바 없애기 */
	98	+ body {
	99	+ -ms-overflow-style: none;
	100	+ /* 인터넷 익스플로러 */
	101	+ scrollbar-width: none;
	102	+ /* 파이어폭스 */
	103	+ }
	104	+
	105	+ ::-webkit-scrollbar {
	106	+ display: none;
	107	+ }
	108	+
	109	+ #header {
	110	+ position: fixed;
	111	+ top: 0;
	112	+ z-index: 3;
	113	+ border-bottom: 1px solid #ced4da;
	114	+ background-color: white;
	115	+ }
	116	+
	117	+ #header .header .logo {
	118	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	119	+ width: 200px;
	120	+ background-size: contain;
	121	+ height: 25px;
	122	+
	123	+
	124	+ }
	125	+
	126	+ #header .header nav li a {
	127	+ color: #333;
	128	+
	129	+ }
	130	+
	131	+
	132	+
	133	+ html,
	134	+ body {
	135	+ position: relative;
	136	+ height: 100%;
	137	+ font-family: 'Pretendard';
	138	+
	139	+ }
	140	+
	141	+ body {
	142	+ background: linear-gradient(#f8f9fa, #fff, #fff);
	143	+ font-family: 'Pretendard';
	144	+ font-size: 14px;
	145	+ color: #000;
	146	+ margin: 0;
	147	+ padding: 0;
	148	+ }
	149	+
	150	+ .box-wrap {
	151	+ flex-wrap: nowrap;
	152	+ }
	153	+
	154	+ .box-wrap div {
	155	+ width: 100%;
	156	+ }
	157	+
	158	+ .box-wrap div img {
	159	+ padding-bottom: 2rem;
	160	+ }
	161	+
	162	+ .box-wrap div p {
	163	+ font-size: 1.8rem;
	164	+ }
	165	+</style>
	166	+
	167	+</html>(No newline at end of file)

f872fcc

6c43e06

views/pages/DataAnalysis.html

--- views/pages/DataAnalysis.html

+++ views/pages/DataAnalysis.html


                     <p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
                 </div>
                 <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px;">
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img.png" alt="">
                         <p>도로 위험 감지 시스템</p>
                     </div>
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
                         <p>안개 감지 플랫폼</p>
                     </div>
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
                         <p>이동경로 최적화 서비스</p>
                     </div>
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
                         <p>횡단보도 및 내비게이션 연계 플랫폼</p>
                     </div>
                 </div>
                 <div class="flex justify-between  align-end box-wrap" style="width: 100%; gap: 20px;">
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
                         <p>전력데이터 관리 시스템</p>
                     </div>
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
                         <p>금형 부품 데이터 관리 플랫폼</p>
                     </div>
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
                         <p>제조 데이터 관리 시스템</p>
                     </div>
-                    <div>
+                    <div class="">
                         <img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
                         <p>메타데이터 관리 시스템</p>
                     </div>

         padding: 0;
     }
 
+    .box-wrap div:hover {
+        
+    }
 
-  .box-wrap div img{
-    padding-bottom: 2rem;
-  }
-  .box-wrap div p{
-    font-size: 1.8rem;
-  }
+    .box-wrap div img {
+        padding-bottom: 2rem;
+    }
+
+    .box-wrap div p {
+        font-size: 1.8rem;
+    }
 </style>
 
 </html>

f872fcc

6c43e06

views/pages/Etc.html

--- views/pages/Etc.html

+++ views/pages/Etc.html


                 <div class="etc-wrap-title mb30">
                     <h1 class="mb20">기타사례</h1>
                 </div>
-                <div class="flex justify-between" style="width: 100%; gap: 20px;">
+                <div class="flex justify-between customized-box" style="width: 100%; gap: 20px;">
                     <div class="etc-box">
                         <div class="mb20">
                             <img src="../../resources/img/common/etc-img.png" alt="">

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

     .swiper-slide {
         text-align: center;
         font-size: 18px;
-        background: linear-gradient(#f8f9fa, #fff, #fff);
         display: flex;
         justify-content: center;
         align-items: center;

f872fcc

6c43e06

views/pages/Marketing.html

--- views/pages/Marketing.html

+++ views/pages/Marketing.html


             <h1>Marketing</h1>
         </div>
         <div class="marketing-area ">
-            <div>
+            <div data-url="https://www.yeongnam.com/web/view.php?key=20231024010002948">
                 <img src="../../resources/img/common/marketing-img01.png" alt="">
                 <div>
                     <p><span>영남일보</span> | 최시옹 기자</p>

                     <p class="marketing-date">2023-10-25</p>
                 </div>
             </div>
-            <div>
+            <div data-url="https://www.gbprimenews.com/news/articleView.html?idxno=135707#0BWB">
                 <img src="../../resources/img/common/marketing-img02.png" alt="">
                 <div>
                     <p><span>프라임경북뉴스</span> | 김창식 기자</p>

                     <p class="marketing-date">2023-05-24</p>
                 </div>
             </div>
-            <div>
+            <div data-url="http://www.dailydgnews.com/news/article.html?no=142929">
                 <img src="../../resources/img/common/marketing-img03.png" alt="">
                 <div>
                     <p><span>데일리대구경북뉴스</span> | 김형만 기자</p>

                     <p class="marketing-date">2022-12-16</p>
                 </div>
             </div>
-            <div>
+            <div data-url="https://www.asiatoday.co.kr/view.php?key=20220722010013350">
                 <img src="../../resources/img/common/marketing-img04.png" alt="">
                 <div>
                     <p><span>아투시티뉴스</span> | 최인호 기자</p>

                     <p class="marketing-date">2022-07-22</p>
                 </div>
             </div>
-            <div>
+            <div data-url="http://www.dailydgnews.com/news/article.html?no=131115">
                 <img src="../../resources/img/common/marketing-img04.png" alt="">
                 <div>
                     <p><span>데일리대구경북뉴스</span> | 황지현 기자</p>

                     <p class="marketing-date">2022-07-22</p>
                 </div>
             </div>
-            <div>
+            <div data-url="https://www.imaeil.com/page/view/2023101815512402816">
                 <img src="../../resources/img/common/marketing-img05.png" alt="">
                 <div>
                     <p><span>매일신문</span> | 정우태 기자</p>

                     <p class="marketing-date">2023-10-22</p>
                 </div>
             </div>
-            <div>
+            <div data-url="https://www.etnews.com/20230912000010">
                 <img src="../../resources/img/common/marketing-img06.png" alt="">
                 <div>
                     <p><span>전자신문</span> | 윤칠석 경북 IT융합산업기술원 원장</p>

         </div>
     </div>
     <div id="footer">
-        
+
     </div>
 
 

         $("#footer").show();
 
     });
+    document.addEventListener('DOMContentLoaded', function () {
+        var newsDivs = document.querySelectorAll('div[data-url]');
+
+        newsDivs.forEach(function (div) {
+            div.addEventListener('click', function () {
+                var url = this.getAttribute('data-url');
+                window.open(url, '_blank');
+            });
+            div.style.cursor = 'pointer';
+        });
+    });
 
 
 </script>

6c43e06

views/pages/SmartCtiy.html (added)

+++ views/pages/SmartCtiy.html

...	...	@@ -0,0 +1,192 @@
	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>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+ <div class="taken-wrap " style=" height: 100%;">
	26	+
	27	+ <div class="text-area flex align-center">
	28	+
	29	+ <div class="flex justify-between" style="gap: 10px; width: 100%;">
	30	+ <div class="etc-wrap-title mb80">
	31	+ <h1 class="mb20">스마트시티 솔루션 공급</h1>
	32	+ <p>다양한 데이터 기반 노하우를 바탕으로 시스템을 분석하여 인공지는 기반의 서비스를<br>기획,개발,구축함과 동시에 운영까지 다양한 서비스와 환경에 가장 최적화된 솔루션을
	33	+ 제공합니다.</p>
	34	+ </div>
	35	+ <div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px;">
	36	+ <div class="">
	37	+ <img src="../../resources/img/common/smart-img1.png" alt="">
	38	+ <p class="box-wrap-title mb30">AI 안전통합 횡단보도 플랫폼</p>
	39	+ <div>
	40	+ <p>- 횡단보도 보행자 상황을 차량 내비게이션에 전달하여 우회전시 사고 예방</p>
	41	+ <p>- 무단횡단을 방지하는 플랫폼 기반 스마트 횡단보도 안전관리 솔루션</p>
	42	+ </div>
	43	+ </div>
	44	+ <div class="">
	45	+ <img src="../../resources/img/common/smart-img2.png" alt="">
	46	+ <p class="box-wrap-title mb30">시니어 스마트 케어 모니터링 서비스</p>
	47	+ <div>
	48	+ <p>- 약 복용 지도를 통해 독거노인의 보호자 뿐만 아니라 관리기관, 병원 관계자 까지 약 복용에 대한 확인이 가능한 플랫폼 구축</p>
	49	+ <p>- IOT 기술을 결합하여 약 복용 모니터링 구조를 개선하고 복지 사각지대를 보완할 수 있는 장치 마련</p>
	50	+ </div>
	51	+ </div>
	52	+ <div class="">
	53	+ <img src="../../resources/img/common/smart-img3.png" alt="">
	54	+ <p class="box-wrap-title mb30">전력 에너지 모니터링 시스템</p>
	55	+ <div>
	56	+ <p>- 수요반응 자원시장의 참여고객 기업별 전력량을 AI 기반으로 가공 및 분석</p>
	57	+ <p>- 전력량 실시간 확인 및 예측 시스템 (피크 시간대 예측, 주변 지역 사용량)</p>
	58	+ </div>
	59	+ </div>
	60	+
	61	+ </div>
	62	+
	63	+ </div>
	64	+ </div>
	65	+
	66	+ </div>
	67	+ </div>
	68	+ <div id="footer"></div>
	69	+
	70	+</body>
	71	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	72	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	73	+<script>
	74	+
	75	+ $(document).ready(function () {
	76	+ $("#btnHeadquarter").click(function () {
	77	+ $("#btnHeadquarter").addClass('on');
	78	+ $("#btnDaeguBranch").removeClass('on');
	79	+ $("#contentDaeguBranch").hide();
	80	+
	81	+ $("#contentHeadquarter").show();
	82	+ });
	83	+
	84	+ $("#btnDaeguBranch").click(function () {
	85	+ $("#btnDaeguBranch").addClass('on');
	86	+ $("#btnHeadquarter").removeClass('on');
	87	+
	88	+ $("#contentHeadquarter").hide();
	89	+
	90	+ $("#contentDaeguBranch").show();
	91	+
	92	+
	93	+
	94	+
	95	+
	96	+ });
	97	+ });
	98	+
	99	+
	100	+
	101	+ $(function () {
	102	+ $("#header").load("../layout/Header.html");
	103	+ $("#footer").load("../layout/footer.html");
	104	+ $("#footer").show();
	105	+
	106	+ });
	107	+
	108	+</script>
	109	+
	110	+<style scoped>
	111	+ /* 스크롤바 없애기 */
	112	+ body {
	113	+ -ms-overflow-style: none;
	114	+ /* 인터넷 익스플로러 */
	115	+ scrollbar-width: none;
	116	+ /* 파이어폭스 */
	117	+ }
	118	+
	119	+ ::-webkit-scrollbar {
	120	+ display: none;
	121	+ }
	122	+
	123	+ #header {
	124	+ position: fixed;
	125	+ top: 0;
	126	+ z-index: 3;
	127	+ border-bottom: 1px solid #ced4da;
	128	+ background-color: white;
	129	+ }
	130	+
	131	+ #header .header .logo {
	132	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	133	+ width: 200px;
	134	+ background-size: contain;
	135	+ height: 25px;
	136	+
	137	+
	138	+ }
	139	+
	140	+ #header .header nav li a {
	141	+ color: #333;
	142	+
	143	+ }
	144	+
	145	+
	146	+
	147	+ html,
	148	+ body {
	149	+ position: relative;
	150	+ height: 100%;
	151	+ font-family: 'Pretendard';
	152	+
	153	+ }
	154	+
	155	+ body {
	156	+ background: linear-gradient( #d7e2ff9d,#fff, #fff);
	157	+ font-family: 'Pretendard';
	158	+ font-size: 14px;
	159	+ color: #000;
	160	+ margin: 0;
	161	+ padding: 0;
	162	+ }
	163	+
	164	+ .box-wrap {
	165	+ flex-wrap: nowrap;
	166	+ }
	167	+
	168	+ .box-wrap-title {
	169	+ text-align: center;
	170	+ font-size: 2rem;
	171	+ font-weight: 600;
	172	+ }
	173	+
	174	+ .box-wrap div {
	175	+ width: 100%;
	176	+ }
	177	+
	178	+ .box-wrap div img {
	179	+ width: 100%;
	180	+ height: 100%;
	181	+ padding-bottom: 2rem;
	182	+ }
	183	+
	184	+ .box-wrap div div p {
	185	+ height: 20%;
	186	+ text-align: left;
	187	+ font-size: 1.5rem;
	188	+ line-height: 1.5;
	189	+ }
	190	+</style>
	191	+
	192	+</html>(No newline at end of file)

f872fcc

6c43e06

views/pages/Solution.html

--- views/pages/Solution.html

+++ views/pages/Solution.html


                         <div class="solution-title mb90">
                             <p>Taken BI Manager v1.0</p>
                         </div>
-                        <div class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
-                            <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
+                        <div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            <div class="taken-area taken-conteiner flex align-end solution-web-box" style="gap: 20px; height: 100%;">
                                 <img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
                                     <p>데이터 수집,저장,관리</p>
                                     <p>솔루션 제공 기반 맞춤형 서비스</p>
                                 </div>
                             </div>
-                            <div class="taken-area taken-conteiner flex" style="gap: 20px;  height: 100%;">
+                            <div class="taken-area taken-conteiner taken-area-text flex " style="gap: 20px;  height: 100%;">
                                 <div class="text-after">
                                     <p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
                                     <p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화

                             <p>Traffic Agent</p>
                         </div>
                         <div class="flex justify-end traffic-button">
-                            <button>영상보기</button>
+                            <button class="traffic-btn">영상보기</button>
                         </div>
-                        <div class="flex justify-between align-end "
+
+                        <div class=" video-wrap">
+                            <div class="traffic-video">
+                                <div class="flex justify-between mb10 ">
+                                    <p>Traffic Agent</p>
+                                    <p class="close-btn">x</p>
+                                </div>
+                                <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
+                            </div>
+                        </div>
+                        <div class="flex justify-between align-end taken-wrap-box"
                             style="flex-wrap: nowrap; gap: 20px; height: 100%;">
 
-                            <div class="taken-area taken-conteiner flex-column justify-between "
+                            <div class="taken-area taken-conteiner flex-column justify-between solution-after"
                                 style="gap: 20px; height: 100%;">
                                 <div class="text-after ">
                                     <p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
 
                                 </div>
-                                <div class="flex" style="gap: 20px; height: calc(100% - 65px);">
+                                <div class="flex solution-area" style="gap: 20px; height: calc(100% - 65px);">
 
                                     <div class="solution-text-box " style="padding: 15px 33px; ">
                                         <h3 class="text-box-title mb10">주요기능</h3>

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

                             <p>AI 안전통합 횡단보도 관리 솔루션</p>
                         </div>
                         <div class="flex justify-end traffic-button">
-                            <button>영상보기</button>
+                            <button class="traffic-btn">영상보기</button>
                         </div>
-                        <div class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
-                            <div class="ai-area flex align-end " style="height: 100%; width: 100%;">
+
+                        <div class=" video-wrap">
+                            <div class="traffic-video">
+                                <div class="flex justify-between mb10 ">
+                                    <p>AI 안전통합 횡단보도 관리 솔루션</p>
+                                    <p class="close-btn">x</p>
+                                </div>
+                                <video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
+                            </div>
+                        </div>
+                        <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
+                            <div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
 
                                 <img src="../../resources/img/common/ai-img.png" alt="" class="mb30">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">

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

                             <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
                         </div>
                         <div class="flex justify-end traffic-button">
-                            <button>영상보기</button>
+                            <button class="traffic-btn">영상보기</button>
                         </div>
-                        <div class="flex justify-between align-end "
+
+                        <div class=" video-wrap">
+                            <div class="traffic-video">
+                                <div class="flex justify-between mb10 ">
+                                    <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
+                                    <p class="close-btn">x</p>
+                                </div>
+                                <video src="../../resources/img/common/hanti.mp4" autoplay muted controls></video>
+                            </div>
+                        </div>
+                        <div class="flex justify-between align-end taken-wrap-box"
                             style="flex-wrap: nowrap; gap: 20px; height: 100%;">
 
                             <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">

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

                         <div class="smart-title mb90">
                             <p>스마트제조 데이터 모니터링 서비스</p>
                         </div>
-                        <div class="flex justify-between align-end "
+                        <div class="flex justify-between align-end taken-wrap-box"
                             style="flex-wrap: nowrap; gap: 20px; height: 100%;">
-                            <div class="smart-area flex align-end " style="height: 100%; width: 100%;">
+                            <div class="smart-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
 
                                 <img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
                                 <div class="taken-box flex justify-between" style="flex-wrap: nowrap;">

                                     <p>웹 및 앱 모니터링<br> 시스템 구축</p>
                                 </div>
                             </div>
-                            <div class="taken-area taken-conteiner flex" style="gap: 20px;  height: 100%;">
+                            <div class="taken-area taken-conteiner flex " style="gap: 20px;  height: 100%;">
 
                                 <div class="text-after">
                                     <p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>

 
     </div>
     <div id="footer"></div>
+
+
+   
 
 
 

                     $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
                 }
             },
+            reachEnd: function () {
+                swiper.mousewheel.disable();
+            },
+
+        }
+    });
+
+    window.addEventListener('wheel', function (event) {
+        if (event.deltaY < 0) {
+            swiper.mousewheel.enable();
+        } else if (event.deltaY > 0) {
         }
     });
     $(function () {
         $("#header").load("../layout/Header.html");
         $("#footer").load("../layout/footer.html");
         // $("#footer").hide();
+        $('.video-wrap').hide();
+
+    });
+
+    $('.traffic-btn').click(function(){
+        $('.video-wrap').show();
+        
+
+    });
+    $('.close-btn').click(function(){
+        $('.video-wrap').hide();
+        
 
     });
 

 
 
 <style scoped>
-     /* 스크롤바 없애기 */
-     body {
+    .swiper-slide.on{
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+    }
+    /* 스크롤바 없애기 */
+    body {
         -ms-overflow-style: none;
         /* 인터넷 익스플로러 */
         scrollbar-width: none;

     }
 
     .swiper-slide {
+        width: 100%;
+        height: 100%;
         text-align: center;
         font-size: 18px;
         background: linear-gradient(#f8f9fa, #fff, #fff);

6c43e06

views/pages/Visualization.html (added)

+++ views/pages/Visualization.html

...	...	@@ -0,0 +1,198 @@
	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>TAKENSOFT</title>
	21	+</head>
	22	+
	23	+<body>
	24	+ <div id="header"></div>
	25	+ <div class="taken-wrap " style=" height: 100%;">
	26	+
	27	+ <div class="text-area flex align-center">
	28	+
	29	+ <div class="flex justify-between" style="gap: 10px; width: 100%;">
	30	+ <div class="etc-wrap-title mb70 mt">
	31	+ <h1 class="mb20">시각화 서비스 시스템 구축</h1>
	32	+ <p>데이터 분석을 통해 도출된 인사이트를 시각화 모듈을 활용하여 서비스 시스템을 구축합니다.</p>
	33	+ </div>
	34	+ <div class="flex justify-between align-end box-wrap mb20" style="width: 100%; gap: 20px;">
	35	+ <div class="">
	36	+ <img src="../../resources/img/common/visual-img1.png" alt="">
	37	+ <p>영천시 지역별 인구 추이 분석</p>
	38	+ </div>
	39	+ <div class="">
	40	+ <img src="../../resources/img/common/visual-img2.png" alt="">
	41	+ <p>포항시 지역별 인구 추이 분석</p>
	42	+ </div>
	43	+ <div class="">
	44	+ <img src="../../resources/img/common/visual-img3.png" alt="">
	45	+ <p>스마트 제조 공정관리 모니터링 플랫폼</p>
	46	+ </div>
	47	+
	48	+ </div>
	49	+ <div class="flex justify-between align-end box-wrap" style="width: 100%; gap: 20px;">
	50	+ <div class="">
	51	+ <img src="../../resources/img/common/visual-img4.png" alt="">
	52	+ <p>전력데이터 분석 시각화<br> 상주시 지역화폐 분석</p>
	53	+ </div>
	54	+ <div class="">
	55	+ <img src="../../resources/img/common/visual-img5.png" alt="">
	56	+ <p>시니어 스마트 케어 모니터링 플랫폼</p>
	57	+ </div>
	58	+ <div class="">
	59	+ <img src="../../resources/img/common/visual-img6.png" alt="">
	60	+ <p>공정 및 외부 환경 관제 시각화</p>
	61	+ </div>
	62	+ <div class="">
	63	+ <img src="../../resources/img/common/visual-img7.png" alt="">
	64	+ <p>상주시 부서별 재정 분석</p>
	65	+ </div>
	66	+ </div>
	67	+ </div>
	68	+
	69	+ </div>
	70	+ </div>
	71	+ <div id="footer"></div>
	72	+
	73	+</body>
	74	+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	75	+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
	76	+<script>
	77	+
	78	+ $(document).ready(function () {
	79	+ $("#btnHeadquarter").click(function () {
	80	+ $("#btnHeadquarter").addClass('on');
	81	+ $("#btnDaeguBranch").removeClass('on');
	82	+ $("#contentDaeguBranch").hide();
	83	+
	84	+ $("#contentHeadquarter").show();
	85	+ });
	86	+
	87	+ $("#btnDaeguBranch").click(function () {
	88	+ $("#btnDaeguBranch").addClass('on');
	89	+ $("#btnHeadquarter").removeClass('on');
	90	+
	91	+ $("#contentHeadquarter").hide();
	92	+
	93	+ $("#contentDaeguBranch").show();
	94	+
	95	+
	96	+
	97	+
	98	+
	99	+ });
	100	+ });
	101	+
	102	+
	103	+
	104	+ $(function () {
	105	+ $("#header").load("../layout/Header.html");
	106	+ $("#footer").load("../layout/footer.html");
	107	+ $("#footer").show();
	108	+
	109	+ });
	110	+
	111	+</script>
	112	+
	113	+<style scoped>
	114	+ /* 스크롤바 없애기 */
	115	+ body {
	116	+ -ms-overflow-style: none;
	117	+ /* 인터넷 익스플로러 */
	118	+ scrollbar-width: none;
	119	+ /* 파이어폭스 */
	120	+ }
	121	+
	122	+ ::-webkit-scrollbar {
	123	+ display: none;
	124	+ }
	125	+
	126	+ #header {
	127	+ position: fixed;
	128	+ top: 0;
	129	+ z-index: 3;
	130	+ border-bottom: 1px solid #ced4da;
	131	+ background-color: white;
	132	+ }
	133	+
	134	+ #header .header .logo {
	135	+ background: url(../../resources/img/component/logo-color.png) no-repeat;
	136	+ width: 200px;
	137	+ background-size: contain;
	138	+ height: 25px;
	139	+
	140	+
	141	+ }
	142	+
	143	+ #header .header nav li a {
	144	+ color: #333;
	145	+
	146	+ }
	147	+
	148	+
	149	+
	150	+ html,
	151	+ body {
	152	+ position: relative;
	153	+ height: 100%;
	154	+ font-family: 'Pretendard';
	155	+
	156	+ }
	157	+
	158	+ body {
	159	+ background: linear-gradient( #d7e2ff9d,#fff, #fff);
	160	+ font-family: 'Pretendard';
	161	+ font-size: 14px;
	162	+ color: #000;
	163	+ margin: 0;
	164	+ padding: 0;
	165	+ }
	166	+
	167	+ .box-wrap {
	168	+ flex-wrap: nowrap;
	169	+ }
	170	+
	171	+ .box-wrap-title {
	172	+ text-align: center;
	173	+ font-size: 2rem;
	174	+ font-weight: 600;
	175	+ }
	176	+
	177	+ .box-wrap div {
	178	+ width: 100%;
	179	+ height: 100%;
	180	+
	181	+ }
	182	+
	183	+ .box-wrap div img {
	184	+ width: 100%;
	185	+ /* object-fit: contain; */
	186	+ padding-bottom: 2rem;
	187	+ }
	188	+
	189	+ .box-wrap div p {
	190	+ /* height: 20%; */
	191	+ /* text-align: left; */
	192	+ font-size: 1.7rem;
	193	+ font-weight: 600;
	194	+ /* line-height: 1.5; */
	195	+ }
	196	+</style>
	197	+
	198	+</html>(No newline at end of file)

Add a comment

Open 0
Closed 0

List

...	...	@@ -46,7 +46,8 @@
46	46	body {
47	47	min-width: 1200px;
48	48	background-color: #f7f6fb;
49		-
	49	+ user-select: none;
	50	+
50	51	}
51	52
52	53

...	...	@@ -84,12 +84,12 @@
84	84	<div class="swiper-slide">
85	85	<div class="slide-wrap pt60 slide-solution">
86	86	<div class=" flex align-center">
87		- <div style="width: 1200px; margin: 0 auto;">
	87	+ <div style="width: 1200px; margin: 0 auto;" class="text-area">
88	88	<p class="portfolio-text pb60">PORTFOLIO</p>
89	89	</div>
90	90	<div class="swiper innerSwiper" style="height: calc(100% - 113px);">
91	91	<div class="swiper-wrapper">
92		- <div class="swiper-slide ">
	92	+ <div class="swiper-slide " data-url="../../views/pages/DataAnalysis.html">
93	93	<img src="../resources/img/common/innerimg-1.png" alt="">
94	94	<div class=" innerSwiper-textBox">
95	95	<p class="innerSwiper-title">데이터 분석 및 관리 플랫폼 구축</p>
...	...	@@ -98,7 +98,7 @@
98	98	</div>
99	99
100	100	</div>
101		- <div class="swiper-slide ">
	101	+ <div class="swiper-slide " data-url="../../views/pages/Visualization.html">
102	102	<img src="../resources/img/common/innerimg-2.png" alt="">
103	103	<div class=" innerSwiper-textBox">
104	104	<p class="innerSwiper-title">시각화 서비스 시스템 구축</p>
...	...	@@ -107,7 +107,7 @@
107	107	</div>
108	108
109	109	</div>
110		- <div class="swiper-slide ">
	110	+ <div class="swiper-slide " data-url="../../views/pages/SmartCtiy.html">
111	111	<img src="../resources/img/common/innerimg-3.png" alt="">
112	112	<div class=" innerSwiper-textBox">
113	113	<p class="innerSwiper-title">스마트시티 솔루션 공급</p>
...	...	@@ -116,7 +116,7 @@
116	116	</div>
117	117
118	118	</div>
119		- <div class="swiper-slide ">
	119	+ <div class="swiper-slide " data-url="../../views/pages/Data.html">
120	120	<img src="../resources/img/common/innerimg-4.png" alt="">
121	121	<div class=" innerSwiper-textBox">
122	122	<p class="innerSwiper-title">데이터 분석을 통한 인사이트 도출</p>
...	...	@@ -124,7 +124,7 @@
124	124	</div>
125	125
126	126	</div>
127		- <div class="swiper-slide ">
	127	+ <div class="swiper-slide " data-url="../../views/pages/Customized.html">
128	128	<img src="../resources/img/common/innerimg-5.png" alt="">
129	129	<div class=" innerSwiper-textBox">
130	130	<p class="innerSwiper-title">고객을 만족시키는 맞춤형 컨설팅</p>
...	...	@@ -133,7 +133,7 @@
133	133	</div>
134	134
135	135	</div>
136		- <div class="swiper-slide ">
	136	+ <div class="swiper-slide " data-url="../../views/pages/Etc.html">
137	137	<img src="../resources/img/common/innerimg-6.png" alt="">
138	138	<div class=" innerSwiper-textBox">
139	139	<p class="innerSwiper-title">기타사례</p>
...	...	@@ -185,36 +185,30 @@
185	185	</div>
186	186	</div>
187	187	<div id="contentDaeguBranch" style="display: none;">
188		- <div>
	188	+ <div class="secen-map"
	189	+ style="font:normal normal 400 12px/normal dotum, sans-serif; width:1200px; height:500px; color:#333; position:relative">
	190	+ <div style="height: 500px;"><a
	191	+ href="https://map.kakao.com/?urlX=880044.0&urlY=652697.0&name=%EB%8C%80%EA%B5%AC%20%EC%88%98%EC%84%B1%EA%B5%AC%20%EC%95%8C%ED%8C%8C%EC%8B%9C%ED%8B%B01%EB%A1%9C%20160&map_type=TYPE_MAP&from=roughmap"
	192	+ target="_blank"><img class="map"
	193	+ src="http://t1.daumcdn.net/roughmap/imgmap/f280f94b124c89a6eb7ca7ad6c3e2e14c09453140c469b857a76899c9b1ac096"
	194	+ width="1198px" height="498px" style="border:1px solid #ccc;"></a></div>
189	195
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>
	196	+ </div>
	197	+ <div class="address-box flex">
	198	+ <p class="address-tile">대구지사</p>
	199	+ <p class="address-subtitle">대구 수성구 알파시티1로 160 SW융합테크비즈센터 306호 (대흥동)</p>
207	200	</div>
208	201	</div>
209	202	</div>
210		-
211	203	</div>
212		-
213	204
214	205	</div>
215	206
	207	+
216	208	</div>
217		- <div id="footer"></div>
	209	+
	210	+ </div>
	211	+ <div id="footer"></div>
218	212
219	213
220	214
...	...	@@ -224,9 +218,10 @@
224	218	</body>
225	219	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
226	220	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
227		-
	221	+<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2ccd5508acc8b99103687aab41907f94"></script>
228	222
229	223	<script>
	224	+
230	225	$(document).ready(function () {
231	226	$("#btnHeadquarter").click(function () {
232	227	$("#btnHeadquarter").addClass('on');
...	...	@@ -243,10 +238,6 @@
243	238	$("#contentHeadquarter").hide();
244	239
245	240	$("#contentDaeguBranch").show();
246		-
247		-
248		-
249		-
250	241
251	242	});
252	243	});
...	...	@@ -265,21 +256,7 @@
265	256	// document.querySelector('#footer').classList.add('on');
266	257
267	258	// },
268		- slideChange: function () {
269		- var currentIndex = this.realIndex;
270		- if (currentIndex === 0) {
271		- $('#header').removeClass('active');
272		- } else {
273		- $('#header').addClass('active');
274		- }
275	259
276		- if (this.activeIndex === 5) {
277		- document.querySelector('footer').classList.add('on');
278		- } else {
279		- document.querySelector('footer').classList.remove('on');
280		- }
281		-
282		- },
283	260
284	261	slideChangeTransitionEnd: function () {
285	262	if (this.activeIndex === 1) {
...	...	@@ -302,7 +279,31 @@
302	279
303	280	}
304	281	},
	282	+ slideChange: function () {
	283	+ var currentIndex = this.realIndex;
	284	+ if (currentIndex === 0) {
	285	+ $('#header').removeClass('active');
	286	+ } else {
	287	+ $('#header').addClass('active');
	288	+ }
305	289
	290	+ var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
	291	+ if (this.activeIndex === lastIndex) {
	292	+ $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
	293	+ } else {
	294	+ $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
	295	+ }
	296	+ },
	297	+ reachEnd: function () {
	298	+ swiper1.mousewheel.disable();
	299	+ },
	300	+
	301	+ }
	302	+ });
	303	+ window.addEventListener('wheel', function (event) {
	304	+ if (event.deltaY < 0) {
	305	+ swiper1.mousewheel.enable();
	306	+ } else if (event.deltaY > 0) {
306	307	}
307	308	});
308	309	window.addEventListener('load', () => {
...	...	@@ -343,27 +344,27 @@
343	344	let firstTextBox = this.slides[0].querySelector('.innerSwiper-textBox');
344	345	if (firstTextBox) firstTextBox.classList.add('active');
345	346	},
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		- // }
	347	+
356	348	}
357	349	});
358	350
359		- // Swiper 인스턴스 초기화
360		- // mySwiper.init();
361	351
362	352
363	353
364	354
365	355
	356	+ document.addEventListener('DOMContentLoaded', function () {
	357	+ var newsDivs = document.querySelectorAll('div[data-url]');
366	358
	359	+ newsDivs.forEach(function (div) {
	360	+ div.addEventListener('click', function () {
	361	+ var url = this.getAttribute('data-url');
	362	+ window.open(url, '_blank');
	363	+ });
	364	+ // 클릭 가능한 요소임을 시각적으로 나타내기 위해 커서 스타일 변경
	365	+ div.style.cursor = 'pointer';
	366	+ });
	367	+ });
367	368
368	369
369	370
...	...	@@ -375,24 +376,31 @@
375	376
376	377
377	378	<style scoped>
	379	+ .footer-text p{
	380	+ font-size: 1.3rem;
	381	+ }
	382	+ .copyright{
	383	+ font-size: 1.3rem;
	384	+ }
378	385	#header {
379	386	position: fixed;
380	387	top: 0;
381	388	z-index: 3;
382	389	}
383	390
384		-
385		- /* #footer {
386		- position: relative;
387		- height: 100px;
388		- z-index: 10000;
	391	+ .dropdown {
	392	+ opacity: 0;
	393	+ visibility: hidden;
	394	+ position: absolute;
	395	+ top: 35px;
	396	+ right: 0;
	397	+ width: 100%;
	398	+ margin: 0 auto;
	399	+ text-align: center;
	400	+ background-color: #ffffff43;
	401	+ transition: opacity 0.3s ease, visibility 0.3s ease;
	402	+ z-index: 1;
389	403	}
390		-
391		- #footer.on {
392		- opacity: 1;
393		- display: block;
394		- } */
395		-
396	404
397	405
398	406	html,
...	...	@@ -402,7 +410,29 @@
402	410	-ms-overflow-style: none;
403	411
404	412	}
405		-
	413	+ .mobile-menu-button,
	414	+ .mobile-menu-button-close {
	415	+ font-size: 2rem;
	416	+ color: #fff;
	417	+ height: 29px;
	418	+ width: 29px;
	419	+ }
	420	+ .mobil-menu {
	421	+ width: 100%;
	422	+ height: 100%;
	423	+ top: 40px;
	424	+ }
	425	+ .mobil-menu ul {
	426	+ list-style: none;
	427	+ margin: 0;
	428	+ background-color: #ffffff43;
	429	+ }
	430	+ .mobil-menu ul li ul li a {
	431	+ font-weight: 500;
	432	+ color: #fff;
	433	+ font-size: 1.2rem !important;
	434	+ }
	435	+
406	436	::-webkit-scrollbar {
407	437	display: none;
408	438	}
...	...	@@ -437,9 +467,8 @@
437	467	background-position: bottom;
438	468	}
439	469
440		-
441		- .main-text {
442	470
	471	+ .main-text {
443	472	padding-bottom: 50px;
444	473	}
445	474
...	...	@@ -495,11 +524,10 @@
495	524	}
496	525
497	526	.slide-solution {
498		- padding: 158px 0 80px;
	527	+ padding: 100px 0 80px;
499	528	font-family: 'Pretendard';
500	529
501	530	}
502		-
503	531	</style>
504	532
505	533	</html> (No newline at end of file)

...	...	@@ -29,10 +29,11 @@
29	29	<div class="text-area flex">
30	30	<div class="about-title mb90" style="width: 100%;">
31	31	<p class="mb20">ABOUT US</p>
32		- <p class="mb20">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
	32	+ <p class="mb20 about-title-sub">테이큰소프트는 완벽한 품질의 소프트웨어와 맞춤형 서비스가 결합된 최적의 통합 솔루션을 제공하겠습니다.</p>
33	33	</div>
34	34
35		- <div class=" flex justify-center " style="width: 100%; gap: 190px; margin-bottom: 50px;">
	35	+ <div class=" flex justify-center about-area"
	36	+ style="width: 100%; gap: 190px; margin-bottom: 50px;">
36	37	<div class="about-radius-left ">
37	38	<p class="about-text">공감</p>
38	39	<p class="about-sub-text">컨설팅을 통한 인사이트 도출</p>
...	...	@@ -47,7 +48,7 @@
47	48	<p class="about-sub-text">가치를 찾기위한 유연한 사고방식</p>
48	49	</div>
49	50	</div>
50		- <div class="flex justify-center " style="width: 100%;gap: 188px;">
	51	+ <div class="flex justify-center about-area" style="width: 100%;gap: 188px;">
51	52	<div class="about-radius-bottom-left ">
52	53	<p class="about-text">검증</p>
53	54	<p class="about-sub-text">결과물의 철저한 검증</p>
...	...	@@ -66,9 +67,10 @@
66	67	<div class="text-area flex">
67	68	<div class="about-title mb20" style="width: 100%;">
68	69	<p class="mb20">Business</p>
69		- <p class="mb20">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로 해결합니다.</p>
	70	+ <p class="mb20 about-title-sub">컨설팅을 통한 인사이트 도출하여 최적의 솔루션을 설계 제작하고, 이를 통해 직면한 문제를 효과적으로
	71	+ 해결합니다.</p>
70	72	</div>
71		- <div class="container">
	73	+ <div class="container silde-box">
72	74	<div class="accordion"
73	75	style="background-image: url(../../resources/img/common/about-img1.png);">
74	76	<div class="slideText pl20">
...	...	@@ -159,18 +161,19 @@
159	161
160	162
161	163	</div>
162		- <div class="swiper-slide">
	164	+ <div class="swiper-slide about">
163	165	<div class="taken-wrap slide-wrap ">
164	166	<div class="text-area flex">
165	167	<div class="about-title mb20" style="width: 100%;">
166	168	<p class="mb20">Vision</p>
167		- <p class="mb20">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및 매출을 확대해 나갑니다.
	169	+ <p class="mb20 about-title-sub">테이큰소프트는 AI 및 디지털 전환의 파트너로서 끊임없는 연구개발로 B2G, B2B 산업 영역으로 시장 및
	170	+ 매출을 확대해 나갑니다.
168	171	</p>
	172	+ <div class="flex justify-center about-vision-box">
	173	+ <img src="../../resources/img/common/about-img5.png" alt="">
	174	+ <img src="../../resources/img/common/about-img4.png" alt="">
	175	+ </div>
169	176	</div>
170		- </div>
171		- <div class="flex justify-center about-vision-box">
172		- <img src="../../resources/img/common/about-img5.png" alt="">
173		- <img src="../../resources/img/common/about-img4.png" alt="">
174	177	</div>
175	178	</div>
176	179	</div>
...	...	@@ -182,9 +185,9 @@
182	185	</div>
183	186	<div class="timeline flex align-center justify-between" style="gap: 0px;">
184	187	<div class="years" id="years">
185		- <div class="year active-year" data-year="2021">2020</div>
186		- <div class="year" data-year="2022">2021</div>
187		- <div class="year" data-year="2023">2022</div>
	188	+ <div class="year active-year" data-year="2021">2021</div>
	189	+ <div class="year" data-year="2022">2022</div>
	190	+ <div class="year" data-year="2023">2023</div>
188	191	<!-- 더 많은 년도 추가 -->
189	192	</div>
190	193	<div class="contents" id="contents">
...	...	@@ -404,10 +407,8 @@
404	407
405	408
406	409	</div>
407		- <footer id="footer">
408		- 여기는 푸터 내용입니다.
409		- </footer>
410	410	</div>
	411	+ <footer id="footer"></footer>
411	412
412	413
413	414
...	...	@@ -538,25 +539,28 @@
538	539
539	540	slideChange: function () {
540	541	var currentIndex = this.realIndex;
541		- var lastIndex = this.slides.length - 1;
542		- console.log("현재 슬라이드 인덱스:", currentIndex, "마지막 슬라이드 인덱스:", lastIndex);
543		-
544	542	if (currentIndex === 0) {
545	543	$('#header').removeClass('active');
546	544	} else {
547	545	$('#header').addClass('active');
548	546	}
549		-
550		- if (currentIndex === lastIndex) {
551		- // 마지막 슬라이드에 도달했을 때
552		- $('#footer').removeClass('show');
553		-
554		- $('.history-wrap').addClass('show-footer'); // 하단 마진 추가
	547	+ var lastIndex = this.slides.length - 1; // 마지막 슬라이드의 인덱스
	548	+ if (this.activeIndex === lastIndex) {
	549	+ $("#footer").addClass('show'); // 마지막 슬라이드에 도달하면 푸터를 보여줌
555	550	} else {
556		- // 그 외의 경우
557		- $('.swiper-container').removeClass('show-footer'); // 하단 마진 제거
	551	+ $("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
558	552	}
559	553	},
	554	+ reachEnd: function () {
	555	+ swiper.mousewheel.disable();
	556	+ },
	557	+
	558	+ }
	559	+ });
	560	+ window.addEventListener('wheel', function (event) {
	561	+ if (event.deltaY < 0) {
	562	+ swiper.mousewheel.enable();
	563	+ } else if (event.deltaY > 0) {
560	564	}
561	565	});
562	566	// 마우스가 지정된 영역에 들어올 때 마우스 휠 비활성화
...	...	@@ -571,7 +575,7 @@
571	575	$(function () {
572	576	$("#header").load("../layout/Header.html");
573	577	$("#footer").load("../layout/footer.html");
574		- $("#footer").hide();
	578	+ $("#footer").show();
575	579
576	580	});
577	581

...	...	@@ -32,37 +32,37 @@
32	32	<p>다양한 데이터 기반 분석 노하우를 바탕으로 고객이 필요로 하는 시스템을 분석하여 인공지능 기반의 서비스 시스템을 분석하고 관리하는 플랫폼을 구축합니다.</p>
33	33	</div>
34	34	<div class="flex justify-between align-end box-wrap mb30" style="width: 100%; gap: 20px;">
35		- <div>
	35	+ <div class="">
36	36	<img src="../../resources/img/common/dataAnalysis-img.png" alt="">
37	37	<p>도로 위험 감지 시스템</p>
38	38	</div>
39		- <div>
	39	+ <div class="">
40	40	<img src="../../resources/img/common/dataAnalysis-img2.png" alt="">
41	41	<p>안개 감지 플랫폼</p>
42	42	</div>
43		- <div>
	43	+ <div class="">
44	44	<img src="../../resources/img/common/dataAnalysis-img3.png" alt="">
45	45	<p>이동경로 최적화 서비스</p>
46	46	</div>
47		- <div>
	47	+ <div class="">
48	48	<img src="../../resources/img/common/dataAnalysis-img4.png" alt="">
49	49	<p>횡단보도 및 내비게이션 연계 플랫폼</p>
50	50	</div>
51	51	</div>
52	52	<div class="flex justify-between align-end box-wrap" style="width: 100%; gap: 20px;">
53		- <div>
	53	+ <div class="">
54	54	<img src="../../resources/img/common/dataAnalysis-img5.png" alt="">
55	55	<p>전력데이터 관리 시스템</p>
56	56	</div>
57		- <div>
	57	+ <div class="">
58	58	<img src="../../resources/img/common/dataAnalysis-img6.png" alt="">
59	59	<p>금형 부품 데이터 관리 플랫폼</p>
60	60	</div>
61		- <div>
	61	+ <div class="">
62	62	<img src="../../resources/img/common/dataAnalysis-img7.png" alt="">
63	63	<p>제조 데이터 관리 시스템</p>
64	64	</div>
65		- <div>
	65	+ <div class="">
66	66	<img src="../../resources/img/common/dataAnalysis-img8.png" alt="">
67	67	<p>메타데이터 관리 시스템</p>
68	68	</div>
...	...	@@ -167,13 +167,17 @@
167	167	padding: 0;
168	168	}
169	169
	170	+ .box-wrap div:hover {
	171	+
	172	+ }
170	173
171		- .box-wrap div img{
172		- padding-bottom: 2rem;
173		- }
174		- .box-wrap div p{
175		- font-size: 1.8rem;
176		- }
	174	+ .box-wrap div img {
	175	+ padding-bottom: 2rem;
	176	+ }
	177	+
	178	+ .box-wrap div p {
	179	+ font-size: 1.8rem;
	180	+ }
177	181	</style>
178	182
179	183	</html> (No newline at end of file)

...	...	@@ -30,7 +30,7 @@
30	30	<div class="etc-wrap-title mb30">
31	31	<h1 class="mb20">기타사례</h1>
32	32	</div>
33		- <div class="flex justify-between" style="width: 100%; gap: 20px;">
	33	+ <div class="flex justify-between customized-box" style="width: 100%; gap: 20px;">
34	34	<div class="etc-box">
35	35	<div class="mb20">
36	36	<img src="../../resources/img/common/etc-img.png" alt="">
...	...	@@ -150,7 +150,7 @@
150	150	}
151	151
152	152	body {
153		- background: linear-gradient(#f8f9fa, #fff, #fff);
	153	+ background: linear-gradient( #d7e2ff9d,#fff, #fff);
154	154	font-family: 'Pretendard';
155	155	font-size: 14px;
156	156	color: #000;
...	...	@@ -166,7 +166,6 @@
166	166	.swiper-slide {
167	167	text-align: center;
168	168	font-size: 18px;
169		- background: linear-gradient(#f8f9fa, #fff, #fff);
170	169	display: flex;
171	170	justify-content: center;
172	171	align-items: center;

...	...	@@ -28,7 +28,7 @@
28	28	<h1>Marketing</h1>
29	29	</div>
30	30	<div class="marketing-area ">
31		- <div>
	31	+ <div data-url="https://www.yeongnam.com/web/view.php?key=20231024010002948">
32	32	<img src="../../resources/img/common/marketing-img01.png" alt="">
33	33	<div>
34	34	<p><span>영남일보</span> \| 최시옹 기자</p>
...	...	@@ -36,7 +36,7 @@
36	36	<p class="marketing-date">2023-10-25</p>
37	37	</div>
38	38	</div>
39		- <div>
	39	+ <div data-url="https://www.gbprimenews.com/news/articleView.html?idxno=135707#0BWB">
40	40	<img src="../../resources/img/common/marketing-img02.png" alt="">
41	41	<div>
42	42	<p><span>프라임경북뉴스</span> \| 김창식 기자</p>
...	...	@@ -44,7 +44,7 @@
44	44	<p class="marketing-date">2023-05-24</p>
45	45	</div>
46	46	</div>
47		- <div>
	47	+ <div data-url="http://www.dailydgnews.com/news/article.html?no=142929">
48	48	<img src="../../resources/img/common/marketing-img03.png" alt="">
49	49	<div>
50	50	<p><span>데일리대구경북뉴스</span> \| 김형만 기자</p>
...	...	@@ -52,7 +52,7 @@
52	52	<p class="marketing-date">2022-12-16</p>
53	53	</div>
54	54	</div>
55		- <div>
	55	+ <div data-url="https://www.asiatoday.co.kr/view.php?key=20220722010013350">
56	56	<img src="../../resources/img/common/marketing-img04.png" alt="">
57	57	<div>
58	58	<p><span>아투시티뉴스</span> \| 최인호 기자</p>
...	...	@@ -60,7 +60,7 @@
60	60	<p class="marketing-date">2022-07-22</p>
61	61	</div>
62	62	</div>
63		- <div>
	63	+ <div data-url="http://www.dailydgnews.com/news/article.html?no=131115">
64	64	<img src="../../resources/img/common/marketing-img04.png" alt="">
65	65	<div>
66	66	<p><span>데일리대구경북뉴스</span> \| 황지현 기자</p>
...	...	@@ -68,7 +68,7 @@
68	68	<p class="marketing-date">2022-07-22</p>
69	69	</div>
70	70	</div>
71		- <div>
	71	+ <div data-url="https://www.imaeil.com/page/view/2023101815512402816">
72	72	<img src="../../resources/img/common/marketing-img05.png" alt="">
73	73	<div>
74	74	<p><span>매일신문</span> \| 정우태 기자</p>
...	...	@@ -76,7 +76,7 @@
76	76	<p class="marketing-date">2023-10-22</p>
77	77	</div>
78	78	</div>
79		- <div>
	79	+ <div data-url="https://www.etnews.com/20230912000010">
80	80	<img src="../../resources/img/common/marketing-img06.png" alt="">
81	81	<div>
82	82	<p><span>전자신문</span> \| 윤칠석 경북 IT융합산업기술원 원장</p>
...	...	@@ -87,7 +87,7 @@
87	87	</div>
88	88	</div>
89	89	<div id="footer">
90		-
	90	+
91	91	</div>
92	92
93	93
...	...	@@ -133,6 +133,17 @@
133	133	$("#footer").show();
134	134
135	135	});
	136	+ document.addEventListener('DOMContentLoaded', function () {
	137	+ var newsDivs = document.querySelectorAll('div[data-url]');
	138	+
	139	+ newsDivs.forEach(function (div) {
	140	+ div.addEventListener('click', function () {
	141	+ var url = this.getAttribute('data-url');
	142	+ window.open(url, '_blank');
	143	+ });
	144	+ div.style.cursor = 'pointer';
	145	+ });
	146	+ });
136	147
137	148
138	149	</script>

...	...	@@ -30,15 +30,15 @@
30	30	<div class="solution-title mb90">
31	31	<p>Taken BI Manager v1.0</p>
32	32	</div>
33		- <div class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
34		- <div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
	33	+ <div class="flex justify-between align-end taken-wrap-box " style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	34	+ <div class="taken-area taken-conteiner flex align-end solution-web-box" style="gap: 20px; height: 100%;">
35	35	<img src="../../resources/img/common/solution-img1.png" alt="" class="mb40">
36	36	<div class="taken-box flex justify-between" style="flex-wrap: nowrap; ">
37	37	<p>데이터 수집,저장,관리</p>
38	38	<p>솔루션 제공 기반 맞춤형 서비스</p>
39	39	</div>
40	40	</div>
41		- <div class="taken-area taken-conteiner flex" style="gap: 20px; height: 100%;">
	41	+ <div class="taken-area taken-conteiner taken-area-text flex " style="gap: 20px; height: 100%;">
42	42	<div class="text-after">
43	43	<p>데이터 수집,저장,관리 기반 솔루션 제공 맞춤형 서비스를 제공합니다.</p>
44	44	<p>Taken BI Manager는 AI기반의 빅데이터 플랫폼으로 데이터를 활용하여 데이터를 분석하고 고객 맞춤형으로 다양한 콘텐츠 및 시각화
...	...	@@ -76,18 +76,28 @@
76	76	<p>Traffic Agent</p>
77	77	</div>
78	78	<div class="flex justify-end traffic-button">
79		- <button>영상보기</button>
	79	+ <button class="traffic-btn">영상보기</button>
80	80	</div>
81		- <div class="flex justify-between align-end "
	81	+
	82	+ <div class=" video-wrap">
	83	+ <div class="traffic-video">
	84	+ <div class="flex justify-between mb10 ">
	85	+ <p>Traffic Agent</p>
	86	+ <p class="close-btn">x</p>
	87	+ </div>
	88	+ <video src="../../resources/img/common/Traffic Agent .mp4" autoplay muted controls></video>
	89	+ </div>
	90	+ </div>
	91	+ <div class="flex justify-between align-end taken-wrap-box"
82	92	style="flex-wrap: nowrap; gap: 20px; height: 100%;">
83	93
84		- <div class="taken-area taken-conteiner flex-column justify-between "
	94	+ <div class="taken-area taken-conteiner flex-column justify-between solution-after"
85	95	style="gap: 20px; height: 100%;">
86	96	<div class="text-after ">
87	97	<p>위치정보를 기반으로 반복 이동에 대한 교통상황을 분석하여 최적의 경로를 추천하고 교통상황 정보를 공유합니다.</p>
88	98
89	99	</div>
90		- <div class="flex" style="gap: 20px; height: calc(100% - 65px);">
	100	+ <div class="flex solution-area" style="gap: 20px; height: calc(100% - 65px);">
91	101
92	102	<div class="solution-text-box " style="padding: 15px 33px; ">
93	103	<h3 class="text-box-title mb10">주요기능</h3>
...	...	@@ -107,7 +117,7 @@
107	117	</div>
108	118	</div>
109	119	</div>
110		- <div class="traffic-area flex align-end justify-end" style="height: 100%; width: 100%;">
	120	+ <div class="traffic-area flex align-end justify-end solution-web-box" style="height: 100%; width: 100%;">
111	121
112	122	<img src="../../resources/img/common/traffic-img.png" alt="" class="mb30"
113	123	style="height: 356px;">
...	...	@@ -127,10 +137,20 @@
127	137	<p>AI 안전통합 횡단보도 관리 솔루션</p>
128	138	</div>
129	139	<div class="flex justify-end traffic-button">
130		- <button>영상보기</button>
	140	+ <button class="traffic-btn">영상보기</button>
131	141	</div>
132		- <div class="flex justify-between align-end" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
133		- <div class="ai-area flex align-end " style="height: 100%; width: 100%;">
	142	+
	143	+ <div class=" video-wrap">
	144	+ <div class="traffic-video">
	145	+ <div class="flex justify-between mb10 ">
	146	+ <p>AI 안전통합 횡단보도 관리 솔루션</p>
	147	+ <p class="close-btn">x</p>
	148	+ </div>
	149	+ <video src="../../resources/img/common/meta.mp4" autoplay muted controls></video>
	150	+ </div>
	151	+ </div>
	152	+ <div class="flex justify-between align-end taken-wrap-box" style="flex-wrap: nowrap; gap: 20px; height: 100%;">
	153	+ <div class="ai-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
134	154
135	155	<img src="../../resources/img/common/ai-img.png" alt="" class="mb30">
136	156	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
...	...	@@ -140,7 +160,7 @@
140	160	</div>
141	161	<div class="taken-area taken-conteiner flex align-end" style="gap: 20px;">
142	162
143		- <div class="text-after" style="height: calc(100% - 348px);">
	163	+ <div class="text-after solution-area-two" style="height: calc(100% - 348px);">
144	164	<p>AI 안전통합 횡단보도 플랫폼으로 횡단보도의 보행자 상황을 차량 내비게이션에 전달하여 우회전 시 사고를 예방합니다.</p>
145	165	</div>
146	166	<div class="solution-text-box ">
...	...	@@ -175,9 +195,19 @@
175	195	<p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
176	196	</div>
177	197	<div class="flex justify-end traffic-button">
178		- <button>영상보기</button>
	198	+ <button class="traffic-btn">영상보기</button>
179	199	</div>
180		- <div class="flex justify-between align-end "
	200	+
	201	+ <div class=" video-wrap">
	202	+ <div class="traffic-video">
	203	+ <div class="flex justify-between mb10 ">
	204	+ <p>이동데이터 기반 성지순례길 메타버스 플랫폼</p>
	205	+ <p class="close-btn">x</p>
	206	+ </div>
	207	+ <video src="../../resources/img/common/hanti.mp4" autoplay muted controls></video>
	208	+ </div>
	209	+ </div>
	210	+ <div class="flex justify-between align-end taken-wrap-box"
181	211	style="flex-wrap: nowrap; gap: 20px; height: 100%;">
182	212
183	213	<div class="taken-area taken-conteiner flex align-end " style="gap: 20px; height: 100%;">
...	...	@@ -201,7 +231,7 @@
201	231
202	232	</div>
203	233	</div>
204		- <div class="meta-area flex align-end " style="height: 100%; width: 100%;">
	234	+ <div class="meta-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
205	235
206	236	<img src="../../resources/img/common/meta-img.png" alt="" class="mb30">
207	237	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
...	...	@@ -219,9 +249,9 @@
219	249	<div class="smart-title mb90">
220	250	<p>스마트제조 데이터 모니터링 서비스</p>
221	251	</div>
222		- <div class="flex justify-between align-end "
	252	+ <div class="flex justify-between align-end taken-wrap-box"
223	253	style="flex-wrap: nowrap; gap: 20px; height: 100%;">
224		- <div class="smart-area flex align-end " style="height: 100%; width: 100%;">
	254	+ <div class="smart-area flex align-end solution-web-box" style="height: 100%; width: 100%;">
225	255
226	256	<img src="../../resources/img/common/smart-img.png" alt="" class="mb30">
227	257	<div class="taken-box flex justify-between" style="flex-wrap: nowrap;">
...	...	@@ -229,7 +259,7 @@
229	259	<p>웹 및 앱 모니터링<br> 시스템 구축</p>
230	260	</div>
231	261	</div>
232		- <div class="taken-area taken-conteiner flex" style="gap: 20px; height: 100%;">
	262	+ <div class="taken-area taken-conteiner flex " style="gap: 20px; height: 100%;">
233	263
234	264	<div class="text-after">
235	265	<p>제조기업의 공정상 생산성 극대화를 위해 제조업체의 공정을 분석 및 시각화 하여 편리한 모니터링 서비스를 제공합니다.</p>
...	...	@@ -256,6 +286,9 @@
256	286
257	287	</div>
258	288	<div id="footer"></div>
	289	+
	290	+
	291	+
259	292
260	293
261	294
...	...	@@ -314,12 +347,35 @@
314	347	$("#footer").removeClass('show'); // 그렇지 않으면 푸터를 숨김
315	348	}
316	349	},
	350	+ reachEnd: function () {
	351	+ swiper.mousewheel.disable();
	352	+ },
	353	+
	354	+ }
	355	+ });
	356	+
	357	+ window.addEventListener('wheel', function (event) {
	358	+ if (event.deltaY < 0) {
	359	+ swiper.mousewheel.enable();
	360	+ } else if (event.deltaY > 0) {
317	361	}
318	362	});
319	363	$(function () {
320	364	$("#header").load("../layout/Header.html");
321	365	$("#footer").load("../layout/footer.html");
322	366	// $("#footer").hide();
	367	+ $('.video-wrap').hide();
	368	+
	369	+ });
	370	+
	371	+ $('.traffic-btn').click(function(){
	372	+ $('.video-wrap').show();
	373	+
	374	+
	375	+ });
	376	+ $('.close-btn').click(function(){
	377	+ $('.video-wrap').hide();
	378	+
323	379
324	380	});
325	381
...	...	@@ -329,8 +385,13 @@
329	385
330	386
331	387	<style scoped>
332		- /* 스크롤바 없애기 */
333		- body {
	388	+ .swiper-slide.on{
	389	+ width: 100%;
	390	+ height: 100%;
	391	+ background-color: #000;
	392	+ }
	393	+ /* 스크롤바 없애기 */
	394	+ body {
334	395	-ms-overflow-style: none;
335	396	/* 인터넷 익스플로러 */
336	397	scrollbar-width: none;
...	...	@@ -386,6 +447,8 @@
386	447	}
387	448
388	449	.swiper-slide {
	450	+ width: 100%;
	451	+ height: 100%;
389	452	text-align: center;
390	453	font-size: 18px;
391	454	background: linear-gradient(#f8f9fa, #fff, #fff);

Delete comment