@font-face {
  font-family: 'JalnanGothic';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
  font-weight: 400;
  font-style: normal;

}

/* Noto Sans KR → 한글에만 적용 */
@font-face {
  font-family: 'CustomFont';
  src: local('Noto Sans KR'), url('https://fonts.gstatic.com/s/notosanskr/v27/Pby6FmXiEBPT4ITbgNA5CgmOelzI6Hk.woff2') format('woff2');

}



* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; }
:root { --PrimayYellow:#FAAA3F; --PrimayYellowOpacity50:#FAAA3F50; --PrimayYellowOpacity70:#FAAA3F70; --PrimaryWhite:#E5E5E5; --PrimaryWhiteOpacity10:#E5E5E510; --PrimaryWhiteOpacity20:#E5E5E520; --PrimaryBlack:#1B1B1B; --PrimaryBlackOpacity20:#1B1B1B20; --PrimaryBlackOpacity50:#1B1B1B50; --PrimaryBlackOpacity75:#1B1B1B75; --White:#FFF;  --Black:#000;  }
html, body { height: 100%; scroll-behavior: smooth; overflow: hidden; font-family:'Noto Sans KR', 'JalnanGothic', sans-serif;}

/* 상단 메뉴 스타일 */
header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; display: flex; justify-content: center; align-items: center; z-index: 1000; background: transparent; /* 배경 없음 */ }
header .header-container { width: 1600px; display: flex; justify-content: space-between; align-items: center; }
header .header-container .logo img { height: 50px; /* 로고 높이 조정 */ }
header .header-container nav ul { list-style: none; display: flex; gap: 40px; }
header .header-container nav ul li a { text-decoration: none; color: var(--PrimaryWhite); font-family: 'JalnanGothic', sans-serif;  font-size: 1.2rem; font-weight: 400; cursor: pointer; transition: all 0.3s; }
header .header-container nav ul li a:hover { color:var(--PrimayYellow); }
header.scrolled { background:var(--PrimaryBlack); height: 60px; }
header.scrolled .logo img { height: 40px; }
header.scrolled nav ul li a { font-size: 1rem; }
.hamburger { display: none; position: absolute; top: 20px; right: 20px; z-index: 1001; background: none; border: none; font-size: 2rem; cursor: pointer; }

/* 모바일 헤더 스타일 */
@media (max-width: 768px) {
  header { height: 60px; }
  header .header-container .logo { position: relative; z-index: 1003;}
  header .header-container .logo img { height: 40px; margin: 20px; }
  header .header-container nav { display: none; /* 기존 nav 숨김 */ }
    /* header .header-container nav ul { flex-direction: column; } */
  .hamburger {width: 30px; height: 24px; position: absolute; top: 20px; right: 20px; z-index: 1004; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 0; }
  .hamburger span { display: block; width: 30px; height: 3px; background-color:var(--PrimaryWhite); border-radius: 2px; transition: all 0.3s ease; transform-origin: center; }
  .hamburger.active span { background: var(--PrimaryWhite);}
  .hamburger.active span:nth-child(1) { transform: rotate(45deg); position: relative; top: 10px;}
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: rotate(-45deg); position: relative; top: -11px; }
  header .header-container nav.mobile-active { display: block !important; position: fixed; top: 0; left: 0; right: 0; background-color: #FAAA3F; padding: 60px 20px 20px; transform: translateY(-100%); transition: transform 0.3s ease-in-out; z-index: 1002; }
  header .header-container nav.mobile-active ul:first-child { padding-top: 20px; border-top: 1px solid var(--PrimaryWhiteOpacity20); }
  header .header-container nav.mobile-active ul { display: flex; flex-direction: column; gap: 20px; }
  header .header-container nav.mobile-active ul li a { font-size: 1rem; }
  header .header-container nav.mobile-active ul li a:hover { color: var(--PrimaryBlack); }
  header .header-container nav.mobile-visible { transform: translateY(0);}
  .dimmed { display: none; position: fixed;  inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; }
}


/* 섹션 스타일 */
section { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; }


#MainVisual { }
#MainVisual { width: 100%; height: 100vh; position: relative; overflow: hidden; }
#MainVisual .fixed-text { position: absolute; top: 150px; width: 100%; text-align: center; z-index: 10; }
#MainVisual .fixed-text h1 { font-family: 'JalnanGothic', sans-serif; font-size: 60px; margin-bottom: 10px; color: var(--PrimayYellow); }
#MainVisual .fixed-text p { font-family: 'Noto Sans KR', sans-serif; font-size: 24px; font-weight: 400; color: var(--PrimaryWhite); }
#MainVisual .swiper-container { width: 100%; height: 100%; }
#MainVisual .swiper-slide { position: relative; width: 100%; height: 100%; }
#MainVisual .background-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
#MainVisual .slide-text { position: absolute; bottom: 240px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; }
#MainVisual .slide-text h3 { font-size: 40px; margin-bottom: 20px; font-family: 'Noto Sans KR', sans-serif; }
#MainVisual .slide-text p { font-size: 24px; font-family: 'Noto Sans KR', sans-serif; line-height: 35px; }
/* Pagination 스타일 */
#MainVisual .swiper-pagination { position: absolute; bottom: 20px; /* 네비게이터 위치 */ left: 50%; transform: translateX(-50%);z-index: 20; }
#MainVisual .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 6px; background-color:var(--PrimaryWhite); border-radius: 50%; transition: background-color 0.3s; }  
#MainVisual .swiper-pagination-bullet-active { background-color: var(--PrimayYellow); /* 활성화된 점은 흰색 */ }


/* 모바일 메인 비쥬얼 */
@media (max-width: 768px) {
  #MainVisual .fixed-text h1 { font-size: 30px; }
  #MainVisual .fixed-text p { font-size: 16px; }
  #MainVisual .slide-text h3 { width: 80vw;font-size: 20px; word-break: keep-all; }
  #MainVisual .slide-text p { font-size: 14px; }
  #MainVisual .swiper-container { height: auto; }
  #MainVisual .swiper-slide { height: auto; }
  #MainVisual .background-image { display: flex; align-items: center; justify-content: center; width: auto; height: 100%; object-fit: cover; object-position: center right; margin:0 auto; }
}

#Business  { position: relative; background:var(--PrimaryBlack) url(../images/bg_SectionBusiness.png) 0 0 no-repeat; background-size: cover;}
#Business .ContentWrap { position: absolute; top:150px; width: 1200px; }
#Business .ContentWrap .title { display: flex; justify-content: left; align-items: center; width: 100%; } 
#Business .ContentWrap .title h2 { font-family: 'JalnanGothic', sans-serif; margin-right: 50px; font-size: 60px; font-weight: 400; color: var(--PrimayYellow); }
#Business .ContentWrap .title p { padding: 10px 0 0 0; font-size: 20px; font-weight: 400; color: var(--PrimaryWhite); }
#Business .swiper-container { width: 100%; height: 100%; }
#Business .swiper-slide { position: relative; width: 100%; height: 100%; }
#Business .background-image { width: 100%; height: 100%; object-fit: cover; }
#Business .slide-text { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; }
#Business .slide-text h3 { font-size: 40px; margin-bottom: 20px; font-family: 'JalnanGothic', sans-serif; font-weight: bold;}
#Business .slide-text p { font-size: 30px; font-weight: 400;font-family: 'Noto Sans KR', sans-serif; line-height: 30px;}
/* Pagination 스타일 */
#Business .swiper-pagination { position: absolute; bottom: 20px; /* 네비게이터 위치 */ left: 50%; transform: translateX(-50%);z-index: 20; }
#Business .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 6px; background-color:var(--PrimaryWhite); border-radius: 50%; transition: background-color 0.3s; }  
#Business .swiper-pagination-bullet-active { background-color: var(--PrimayYellow); /* 활성화된 점은 흰색 */ }

#Business .slide-text .BusinessSwiperContent .titleWrap { display: flex; flex-direction: column; align-items:baseline; margin-bottom: 50px;}
#Business .slide-text .BusinessSwiperContent .titleWrap h3 { font-size: 24px; font-weight: 600; color: var(--PrimayYellow); }
#Business .slide-text .BusinessSwiperContent .titleWrap p { font-size: 20px; font-weight: 400; color: var(--PrimaryWhite); text-align: left; }
#Business .slide-text .BusinessSwiperContent .contentWrap { display: flex; justify-content: space-between; width: 1200px; }
#Business .slide-text .BusinessSwiperContent .contentWrap div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 360px; height: 360px; background:var(--PrimaryBlackOpacity20); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--PrimayYellow); border-radius: 40px; box-shadow: 0 20px 20px rgba(0, 0, 0, .2); }
#Business .slide-text .BusinessSwiperContent .contentWrap div p.title { font-family: 'JalnanGothic', sans-serif; margin-bottom: 10px; font-size: 30px; font-weight: 400; color: var(--PrimayYellow); }
#Business .slide-text .BusinessSwiperContent .contentWrap div p { font-size: 20px; font-weight: 400; color: var(--PrimaryWhite); }
#Business #particles-js { position: absolute; width: 100%; height: 100%; }



@media screen and (max-width: 768px) {
  #Business { background-size: cover; padding: 60px 20px; flex-direction: column; }
  #Business .ContentWrap { position: static; width: 100%; }
  #Business .ContentWrap .title { flex-direction: column; align-items: flex-start; }
  #Business .ContentWrap .title h2 { font-size: 24px; margin-top: 20px; margin-right: 0; }
  #Business .ContentWrap .title p { font-size: 16px; }
  #Business .swiper-slide { padding: 0 10px; }
  #Business .slide-text { position: static; transform: none; text-align: left; padding: 20px 0; }
  #Business .slide-text h3 { font-size: 18px;}
  #Business .slide-text p { font-size: 14px; }
  #Business .slide-text .BusinessSwiperContent .titleWrap { margin-bottom: 10px;}
  #Business .slide-text .BusinessSwiperContent .titleWrap h3 { font-size: 16px; margin-bottom: 10px; }
  #Business .slide-text .BusinessSwiperContent .titleWrap p { font-size: 12px; line-height: 20px;}
  #Business .slide-text .BusinessSwiperContent .contentWrap { flex-direction: column; width: 100%; gap: 20px; } 
  #Business .slide-text .BusinessSwiperContent .contentWrap div { width: 100%; height: auto; padding: 10px; border-radius: 20px; }
  #Business .slide-text .BusinessSwiperContent .contentWrap div p.title { font-size: 16px; }
  #Business .slide-text .BusinessSwiperContent .contentWrap div p { font-size: 14px; text-align: center; }
  #Business .swiper-pagination { bottom: 10px; }
  #Business .swiper-container { overflow: hidden; }
  #Business .swiper-wrapper { display: flex; }
  #Business .swiper-slide { width: 100% !important; box-sizing: border-box; padding: 0 10px; display: flex; align-items: flex-end; }
  #Business .slide-text { padding: 0; margin: 0 auto; width: 100%; }
  #Business .slide-text .BusinessSwiperContent .contentWrap { width: 100%; padding: 0; }
  #Business .slide-text .BusinessSwiperContent .contentWrap div { margin: 0 auto; }
}
  


#Product    { background:var(--PrimaryBlack); }
#Product .ProductWrap { display: flex; width: 100%; }
#Product .ProductWrap > div { width: 50%; }
#Product .ProductWrap .TextWrap { display: flex; justify-content: flex-end; background: var(--PrimayYellow); }
#Product .ProductWrap .TextWrap .TextArea { width: 600px; display: flex; flex-direction: column; justify-content:center; align-items:flex-start; height: 60vh; }
#Product .ProductWrap .TextWrap .TextArea h2 { font-family: 'JalnanGothic', sans-serif; font-size: 60px; font-weight: 400; color: var(--PrimaryBlack); }
#Product .ProductWrap .TextWrap .TextArea p { padding: 10px 0 0 0; font-size: 20px; font-weight: 400; }
#Product .ProductWrap .TextWrap .TextArea button.download { margin-top: 50px; padding: 12px 20px; font-size: 16px; font-weight: 600; background: var(--PrimaryBlack); color: var(--PrimayYellow); border-radius: 50px; border: 0; cursor: pointer;}
#Product .ProductWrap .TextWrap .TextArea button.download i { margin-left: 10px; font-size: 1rem; }
#Product .ProductWrap .SliderWrap { display: flex; align-items: center; }
#Product .ProductWrap .SliderWrap .slider-container { width: 110%; margin-left: -10%; overflow-x: scroll; scroll-behavior: smooth; display: flex; gap: 20px; padding: 20px; scroll-snap-type: x mandatory; }
#Product .ProductWrap .SliderWrap .slider-container::-webkit-scrollbar { display: none; } 
#Product .ProductWrap .SliderWrap .slider-container .slide { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 300px; height: 400px; background-color: #ccc; border-radius: 24px; flex-shrink: 0; scroll-snap-align: start; transition: opacity 0.3s, filter 0.3s; }
#Product .ProductWrap .SliderWrap .slider-container .slide:nth-child(1) { opacity: 0.2; filter: blur(4px); } 
#Product .ProductWrap .SliderWrap .slider-container .slide:nth-child(2) { opacity: 0.5; filter: blur(2px); } 
#Product .ProductWrap .SliderWrap .slider-container .slide:nth-child(3) { opacity: 0.9;  filter: blur(0.5px); }
#Product .ProductWrap .SliderWrap .slider-container .slide:nth-child(n+4) { opacity: 1; filter: blur(0); }
#Product .ProductWrap .SliderWrap .slider-container .slide.stt { background: url(../images/stt.png) center center no-repeat; background-size: cover; }
#Product .ProductWrap .SliderWrap .slider-container .slide.rag { background: url(../images/rag.png) center center no-repeat; background-size: cover; } 
#Product .ProductWrap .SliderWrap .slider-container .slide.ida { background: url(../images/ida.png) center center no-repeat; background-size: cover; }
#Product .ProductWrap .SliderWrap .slider-container .slide.igv { background: url(../images/igv.png) center center no-repeat; background-size: cover; }
#Product .ProductWrap .SliderWrap .slider-container .slide.idm { background: url(../images/idm.png) center center no-repeat; background-size: cover; }
#Product .ProductWrap .SliderWrap .slider-container .slide p { position: relative; font-size: 16px; font-weight: 400; color: var(--PrimaryWhite); text-align: center; z-index: 1; }
#Product .ProductWrap .SliderWrap .slider-container .slide p.title { font-size: 24px; color: var(--PrimaryWhite); font-weight: 600; text-align: center; }
#Product .ProductWrap .SliderWrap .slider-container .slide p.title span { font-size: 16px; }
#Product .ProductWrap .SliderWrap .slider-container .slide .learn { position: absolute; bottom: 20px; display: block; padding: 8px 16px; border-radius: 50px; border: 1px solid var(--PrimayYellow); color: var(--PrimayYellow); font-size: 14px; font-weight: 600; z-index: 1; background:var(--PrimaryBlackOpacity10); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; }
#Product .ProductWrap .SliderWrap .slider-container .slide .dimmed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:var(--PrimaryBlackOpacity75); border-radius: 24px; z-index: 0; }
#Product .ProductWrap #pagination .pagination-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--PrimaryWhite); border-radius: 50%; margin: 0 5px; transition: background-color 0.3s; }
#Product .ProductWrap #pagination .pagination-dot.active { background-color:var(--PrimaryBlack); }



/* 모달 기본 스타일 */
#Product .modal { font-family: "NaumGothic"; color: #555555; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999; justify-content: center; align-items: center;  }
#Product .modal.active { display: flex; }


#Product .modal-content { padding: 0; background-color: #fff; position: relative; width: 800px; border: 30px #eee solid;}/* width: 640px; */
/* #Product .modal-content img {width: 100%; height: 240px; display: block; object-fit: cover; object-position: center center; margin: 0 auto; border-radius: 16px 16px 0 0; overflow: hidden; }*/
#Product .modal-content h3 { padding: 30px 35px 0; font-size: 24px; font-weight: 600; }
#Product .modal-content p { margin:0px 35px 20px; padding-bottom: 12px; font-size: 16px; font-weight: 400; word-break: keep-all; border-bottom: 1px dotted var(--PrimaryBlackOpacity50); }
#Product .modal-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--PrimaryBlackOpacity75); border: none; font-size: 24px; color:var(--PrimayYellow); cursor: pointer; z-index: 10; border-radius: 50px; }
#Product .modal-close:hover {}
#Product .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
.modal-content .extra-info { padding: 0 35px 8px; }
.modal-content .extra-info li { margin-bottom: 8px; font-size: 14px; font-weight: 400; word-break: keep-all; }
.modal-content .extra-info li.li-contents {font-family: "NaumGothic"; line-height: 18px; margin-left: 20px; padding-right: 50px; }
.modal-content .extra-info li.list { text-indent:-8px; margin-left: 18px; }
.modal-content .extra-info li.popup-img{max-width: 100%; width: auto !important; height: auto !important; padding: 10px 0 0 0;}
.modal-content .extra-info li.list span.point { font-weight:600; background: linear-gradient(to top, var(--PrimayYellowOpacity70) 50%, transparent 50%);;}
.modal-content .extra-info .subTit { margin-bottom: 4px; font-size: 16px; font-weight: 600; }
.modal-content .extra-info .subTit .fa-check { } 
.modal-content .extra-info .fa-circle { font-size: 4px; margin-right: 4px; vertical-align: middle;}
.modal-content .extra-info .fa-square { margin-right: 4px; }
.modal-content .extra-info button.learn{ position:relative; 
   bottom: 20px; display: block; padding: 8px 16px; border-radius: 50px; border: 1px solid var(--PrimayYellow); color: var(--PrimayYellow); font-size: 14px; font-weight: 600; z-index: 1; float: right; margin: 20px;}
.modal-content .extra-info .text-box{ width:20%;  display: inline-block; margin-right: 10px; padding: 10px; vertical-align: top;}
.modal-content .extra-info .text-box_1{ width:27%;  display: inline-block; margin-right: 10px; padding: 10px; vertical-align: top;}
.modal-content .extra-info .text-box:last-child, .text-box:last-child{ margin-right: 0px; float: right;}
.modal-content .extra-info .text-box ul{ margin: 0; padding: 0;}
.modal-content .extra-info .text-box, .text-box_1 ul li{ margin-bottom: 5px; font-size: 12px; line-height: 1.4; text-align: left;  list-style-position:initial; text-indent: -5px;}


@media screen and (max-width: 768px) {
  #Product .ProductWrap { flex-direction: column; }
  #Product .ProductWrap > div { width: 100%; }
  #Product .ProductWrap .TextWrap { justify-content: center; padding: 40px 20px; background: transparent; }
  #Product .ProductWrap .TextWrap .TextArea { width: 100%; height: auto; padding: 0; }
  #Product .ProductWrap .TextWrap .TextArea h2 { font-size: 24px; text-align: left; color: var(--PrimayYellow); }
  #Product .ProductWrap .TextWrap .TextArea p { font-size: 16px; padding: 10px 0 0 0; color: var(--PrimaryWhite); font-family:'Noto Sans KR', sans-serif }
  #Product .ProductWrap .SliderWrap { padding: 0 10px; justify-content: center; } 
  #Product .ProductWrap .SliderWrap .slider-container { width: 100%; margin-left: 0; padding: 10px 0; gap: 12px; }
  #Product .ProductWrap .SliderWrap .slider-container .slide { min-width: 240px; height: 300px; }
  #Product .ProductWrap .SliderWrap .slider-container .slide p.title { font-size: 18px; }
  #Product .ProductWrap .SliderWrap .slider-container .slide p.title span { font-size: 12px; }
  #Product .ProductWrap .SliderWrap .slider-container .slide p { font-size: 14px; }
  #Product .ProductWrap #pagination .pagination-dot { background: var(--PrimaryWhiteOpacity20); }
  #Product .ProductWrap #pagination .pagination-dot.active { background: var(--PrimayYellow); }
  #Product .ProductWrap .SliderWrap .slider-container .slide .dimmed { display: block;}


  #Product .ProductWrap .SliderWrap .slider-container .slide .learn { display: none; }
  #Product .modal-content { position: absolute; bottom: 0; padding: 0; background-color: #fff; border-radius: 20px 20px 0 0;width: 100%; }
  /* #Product .modal-content img { height: 240px; } */
  #Product .modal-content h3 { font-size: 20px; }
  #Product .modal-content p { font-size: 14px; }

  .modal-content .extra-info .text-box{ width:20%;  display: inline-block; margin-right: 5px; padding: 5px; vertical-align: top;}
  .modal-content .extra-info .text-box_1{ width:27%;  display: inline-block; margin-right: 5px; padding: 5px; vertical-align: top;}
}






#Project    { background:var(--PrimaryBlack); }
#Project .ContentWrap { display: flex; width: 1200px; margin: 0 auto;}
#Project .ContentWrap > div { display: flex; flex-direction: column; justify-content: center; width: 50%; }
#Project .ContentWrap .TextArea h2 { font-family: 'JalnanGothic', sans-serif; font-size: 60px; font-weight: 400; color: var(--PrimayYellow); }
#Project .ContentWrap .TextArea p { padding: 10px 0 0 0; font-size: 20px; font-weight: 400; color: var(--PrimaryWhite); font-family: 'JalnanGothic', sans-serif; }
#Project .ContentWrap .HistoryWrap {}
#Project .ContentWrap .HistoryWrap .tabs .tab-buttons { display: flex; gap: 10px; margin-bottom: 2rem; } 
#Project .ContentWrap .HistoryWrap .tabs .year { padding: 10px 0; margin-right: 20px; font-family: 'JalnanGothic', sans-serif; font-size: 36px; font-weight: 400; color: var(--PrimaryWhiteOpacity20); cursor: pointer; background: transparent; transition: color 0.3s; border: 0; }
#Project .ContentWrap .HistoryWrap .tabs .year.active { color:var(--PrimayYellow); }
#Project .ContentWrap .HistoryWrap .tabs .tab-panel { display: none; }
#Project .ContentWrap .HistoryWrap .tabs .tab-panel.active { display: block; }
#Project .ContentWrap .HistoryWrap .tabs .tab-panel ul li { margin-bottom: 10px; font-size: 20px; font-weight: 400; color: var(--PrimaryWhite); font-family: 'Noto Sans KR', sans-serif;  }
#Project .ContentWrap .HistoryWrap .tabs .tab-panel ul li span.num { padding: 0px; color: var(--PrimaryWhite); }
#Project .ContentWrap .HistoryWrap .tabs .tab-panel ul li span.num i { margin-right: 6px; font-size: 2px; vertical-align: middle; }


/* 모바일 프로젝트 섹션 */
@media (max-width: 768px) {
  #Project { align-items: flex-start; }
  #Project .ContentWrap { margin-top:60px; flex-direction: column; padding: 20px; }
  #Project .ContentWrap > div { margin-top: 50px; width: 100%; }
  #Project .ContentWrap .TextArea h2 { font-size: 24px; }
  #Project .ContentWrap .TextArea p { font-size: 16px; }
  #Project .ContentWrap .HistoryWrap .tabs .year { font-size: 18px; }
  #Project .ContentWrap .HistoryWrap .tabs .tab-panel ul li { font-size: 12px; }
}

#Partners   { position: relative; background:var(--White); }
#Partners .ContentWrap { display: flex; flex-direction: column; width: 1200px; margin: 0 auto;}
#Partners .ContentWrap .TextArea { margin-top:-100px; }
#Partners .ContentWrap .TextArea h2 { font-family: 'JalnanGothic', sans-serif; font-size: 60px; font-weight: 400; color: var(--PrimayYellow); }
#Partners .ContentWrap .TextArea p { padding: 10px 0 0 0; font-size: 20px; font-weight: 400; color: var(--PrimaryBlack); }
#Partners .ContentWrap .Partners { margin-top: 100px; }
#Partners .ContentWrap .Partners ul { display: flex; }
#Partners .ContentWrap .Partners ul li { width: 25%; padding: 20px 0; text-align: center;}
#Partners .ContentWrap .Partners ul li img { height: 100px; }
/* 모바일 파트너 섹션 */
@media (max-width: 768px) {
  #Partners { align-items: flex-start; }
  #Partners .ContentWrap { width: 100%; padding: 40px 20px; margin-top: 60px; }
  #Partners .ContentWrap .TextArea { margin: 0; }
  #Partners .ContentWrap .TextArea h2 { font-size: 24px; }
  #Partners .ContentWrap .TextArea p { font-size: 16px; }
  #Partners .ContentWrap .Partners { margin-top: 40px; }
  #Partners .ContentWrap .Partners ul { justify-content: space-between; align-items: center; }
  #Partners .ContentWrap .Partners ul li { width: 20%; padding: 0; margin-bottom: 0px; }
  #Partners .ContentWrap .Partners ul li img { width: 100%; height: auto; }
  #Partners .Footer .FooterContentWrap { padding: 20px; }
}


#Partners .Footer { position: absolute; bottom: 0; width: 100%; background:var(--PrimayYellow); }
#Partners .Footer .FooterContentWrap { margin: 0 auto; width: 1600px; padding: 40px 200px; border-bottom: 1px solid var(--PrimaryBlack); }
#Partners .Footer .FooterContentWrap .info ul { display: flex; }
#Partners .Footer .FooterContentWrap .info ul li {  font-size: 14px; font-weight: 400; }
#Partners .Footer .FooterContentWrap .info ul li:nth-child(odd) { color: var(--White); width: 10%;}
#Partners .Footer .FooterContentWrap .info ul li:nth-child(even) { width: 15%; }
#Partners .Footer .FooterContentWrap .info ul.full li:nth-child(even) { width: 90%; }
#Partners .Footer .copy { width: 1200px; margin: 0 auto; padding: 20px 0; font-size: 14px; font-weight: 400; color: var(--White); }
#Partners .Footer .copy span { color: var(--PrimaryBlack); font-weight:600 }

@media (max-width: 768px) {
  #Partners .Footer .FooterContentWrap { width: 100%; padding: 30px 20px 20px; }
  #Partners .Footer .FooterContentWrap .info ul { flex-direction: ; }
  #Partners .Footer .FooterContentWrap .info ul li { font-size: 12px; margin-bottom: 10px; }
  #Partners .Footer .FooterContentWrap .info ul li:nth-child(odd) { width: 20%;}
  #Partners .Footer .FooterContentWrap .info ul li:nth-child(even) { width: 30%; }
  #Partners .Footer .copy { padding: 20px; font-size: 12px; }
}


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

/* Flowing Effect - 되돌아가지 않고 흘러가는 효과 */
.flowing-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.flowing-stream {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(250, 170, 63, 0.1) 25%,
    rgba(250, 170, 63, 0.2) 50%,
    rgba(250, 170, 63, 0.1) 75%,
    transparent 100%
  );
  animation: flowStream 8s linear infinite;
  transform: translateX(-100%);
}

.flowing-stream:nth-child(2) {
  animation-delay: -4s;
  background: linear-gradient(
    -45deg,
    transparent 0%,
    rgba(229, 229, 229, 0.05) 25%,
    rgba(229, 229, 229, 0.1) 50%,
    rgba(229, 229, 229, 0.05) 75%,
    transparent 100%
  );
}

.flowing-stream:nth-child(3) {
  animation-delay: -2s;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(250, 170, 63, 0.05) 25%,
    rgba(250, 170, 63, 0.1) 50%,
    rgba(250, 170, 63, 0.05) 75%,
    transparent 100%
  );
}

@keyframes flowStream {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}

/* Floating particles effect */
.floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(250, 170, 63, 0.6);
  border-radius: 50%;
  animation: floatParticle 12s linear infinite;
}

.particle:nth-child(even) {
  background: rgba(229, 229, 229, 0.4);
  animation-duration: 15s;
}

.particle:nth-child(3n) {
  background: rgba(250, 170, 63, 0.3);
  animation-duration: 18s;
}

@keyframes floatParticle {
  0% {
    transform: translateX(-50px) translateY(100vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 50px)) translateY(-50px);
    opacity: 0;
  }
}

/* Data Stream Effect */
.data-stream {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.data-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 170, 63, 0.3), transparent);
  animation: dataFlow 6s linear infinite;
}

.data-line:nth-child(1) {
  top: 20%;
  width: 200px;
  animation-delay: 0s;
}

.data-line:nth-child(2) {
  top: 40%;
  width: 150px;
  animation-delay: -2s;
}

.data-line:nth-child(3) {
  top: 60%;
  width: 180px;
  animation-delay: -4s;
}

.data-line:nth-child(4) {
  top: 80%;
  width: 120px;
  animation-delay: -1s;
}

@keyframes dataFlow {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

/* Energy Flow Effect */
.energy-flow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.energy-pulse {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(250, 170, 63, 0.2);
  border-radius: 50%;
  animation: energyPulse 4s ease-out infinite;
}

.energy-pulse:nth-child(1) {
  top: 30%;
  left: 10%;
  animation-delay: 0s;
}

.energy-pulse:nth-child(2) {
  top: 70%;
  right: 15%;
  animation-delay: -2s;
}

.energy-pulse:nth-child(3) {
  top: 50%;
  left: 50%;
  animation-delay: -1s;
}

@keyframes energyPulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}