@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");


/* ===== Sub Visual ===== */
.sub_visual { height: 300px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; }
.sub_visual::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.sub_visual_content { position: relative; text-align: center; color: #fff; }
.sub_visual_content h2 { font-family: 'paperlogy'; font-size: 6rem; font-weight: 700; }
.history_visual { background-image: url('../images/sub2/water_bg.jpg'); }

/* ===== Breadcrumb ===== */
.breadcrumb { display: flex; align-items: center; gap: 15px; padding-top: 15px; font-size: 1.6rem; color: #888; margin-bottom: 80px;}
.breadcrumb .separator { width: 6px; height: 6px; background-color: #D9D9D9; border-radius: 50%; }
.breadcrumb i {font-size: 1.8rem;}
.breadcrumb a { font-size: 1.8rem; line-height: 1.2; font-weight: 400; color: #6D6D6D; }
.breadcrumb a:hover { color: #00408F; }
.breadcrumb .home i { font-size: 1.8rem; }
.breadcrumb a:last-child { font-weight: 700; color: #000; }

/* ===== Sub Content ===== */
/* .sub_content { padding-bottom: 200px; } */ /* 전체 컨텐츠 영역의 아래쪽 여백 */
.sub_title {font-family: 'paperlogy'; font-size: 4.6rem; font-weight: 700; line-height: 1.1; color: #000; margin-top: 80px; }


/* ===== Action Section ===== */
/* 인포 하늘색 박스 */
.info_box { width: 100%; height: 370px; display: flex; position: relative; background-color: #EAF2FF; border-radius: 20px; padding: 50px; box-sizing: border-box; margin-bottom: 120px; }
.info_text h4 { font-size: 2.4rem; font-weight: 700; color: #0B126E; margin-bottom: 15px; line-height: 1.6; }
.info_text p { font-size: 1.8rem; color: #202891; line-height: 1.6; }
.info_img { position: absolute; top: 25px; right: 25px; width: 408px; height: 327px; }

/* 슬라이더 */
.action_section .container { max-width: 1440px; } /* 보이는 구역 1440px 제한 */
.action_slider { margin-bottom: 70px; position: relative; } /* position relative 추가 */
.action_slider .section_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.action_slider .section_header h3 { font-size: 3.2rem; font-weight: 700; line-height: 1.6; color: #0067C8; }
.action_slider .slider_desc { font-size: 1.8rem; color: #555; margin-bottom: 50px; }
.action_slider .section_header .controller { display: flex; gap: 10px; }
.action_slider .controller .ctrl { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #E1E1E1; background: #fff; color: #2f57a8; cursor: pointer; pointer-events: auto; /* 버튼 클릭 활성화 */}
.action_slider .controller .ctrl i { font-size: 2.4rem; }
.action_slider .controller .ctrl.prev { color: #1354A5; }
.action_slider .controller .ctrl.next { color: #1354A5; }
.swiper-wrapper { display: flex; align-items: center; /* 슬라이드 세로 중앙 정렬 */ }

/* 슬라이더 보이는 영역 */
.swiper_container { max-width: 1200px; margin: 0 auto; position: relative; overflow: clip; /* 중요: 영역 밖 슬라이드 숨김 */padding-bottom: 20px; /* 페이지네이션 공간 확보 및 슬라이더 그림자 영역 */ }

.swiper { width: 100%; height: 100%; }
.swiper-slide { width: 380px; /* 활성 슬라이드 기준 너비 */ height: 460px; /* 활성 슬라이드 기준 높이 */ text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; /* 슬라이드 효과 */ transform: scale(0.8); opacity: 0.5; transition: transform 0.4s, opacity 0.4s; }

/* 활성 슬라이드 스타일 */
.swiper-slide-active { transform: scale(1); opacity: 1; }

/* Swiper Pagination 스타일을 점(bullet) 형태로 복원 */
/* .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; bottom: 10px; left: 0; width: 100%; }
.swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #ccc; 비활성 점 색상 opacity: 0.5; margin: 0 5px; cursor: pointer; }
.swiper-pagination-bullet-active { opacity: 1; background: #0067C8; 활성 점 색상 } */

/* 6번째 점부터 모두 숨기는 규칙 삭제 */

/* .swiper-pagination-bullet:nth-child(n+6) {display: none;} */

.card_item { border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); background-color: #fff; }
.card_img img { width: 380px; height: 240px; display: block; }
.card_text { height: 220px; padding: 30px; text-align: left; box-sizing: border-box; }
.card_text h4 { font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: #3C3C3C; margin-bottom: 20px; }
.card_text p { font-size: 1.6rem; font-weight: 400; line-height: 1.6; color: #3C3C3C;  }


/* ===== Change Section ===== */
.video_section_bg { width: 100%; height: 600px; background: #F2F7FF; display: flex; align-items: center; }
.video_wrapper { display: flex; justify-content: center; }
.video_wrapper iframe { width: 765px; height: 430px; border-radius: 20px; border: none; }
/* .video_wrapper .video_caption { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 2.4rem; font-weight: 700; background-color: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 10px; } */

.change_section { padding: 90px 0 160px 0; }
.change_content_area h4 { font-size: 3.2rem; font-weight: 700; line-height: 1.2; color: #0067C8; margin-bottom: 20px; }
.change_content_area .description { font-size: 1.8rem; color: #3C3C3C; margin-bottom: 20px; }

.partnership_section { display: flex; flex-direction: column; margin-bottom: 120px; }
.partnership_item { display: flex; align-items: center; gap: 65px; padding-bottom: 20px; }
.partnership_item:last-child { border-bottom: none; padding-bottom: 0; }
.partnership_item .text_content { width: 940px; }
.partnership_item .text_content a { color: #00A2E0;}
.partnership_item .text_content a:hover { text-decoration: underline; }
.partnership_item .text_content b { font-size: 1.8rem; font-weight: 700; line-height: 1.6; }
.partnership_item .text_content p {  font-size: 1.6rem; color: #333; line-height: 1.6; margin-top: 10px; }
.partnership_item .logo_content { display: flex; gap: 41px; }
.partnership_item .logo_content img { max-height: 50px; }

.stats_section { display: flex; justify-content: space-around; text-align: center; }
.stat_item img { height: 120px; margin-bottom: 20px; }
.stat_item .stat_number { font-size: 5rem; font-weight: 700; line-height: 1.1; color: #000; margin-bottom: 10px; }
.stat_item p { font-size: 1.8rem; color: #3c3c3c; line-height: 1.1; }
.stat_suffix {font-size: 2.8rem; font-weight: 700; line-height: 1.1;}


/* ===== Other Activities Section ===== */
.other_activities_section { padding-bottom: 160px; }
.other_activities_section .section_header { text-align: center; margin-bottom: 30px; } /* 제목 밑 여백 */
.other_activities_section .section_header h3 { font-size: 3.2rem; font-weight: 700; line-height: 1.2; color: #0067C8; }
.activity_gallery { display: grid; grid-template-columns: repeat(6, 1fr); }
.activity_item { position: relative; overflow: hidden; }
.activity_item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.activity_item:hover img { transform: scale(1.1); }
.activity_item .overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; text-align: center; opacity: 1; transition: opacity 0.3s ease; }
.activity_item:hover .overlay { opacity: 0; }
.activity_item .overlay span { color: #fff; font-size: 2.6rem; font-weight: 700; line-height: 1.2; }


/* ===== Related Materials Section ===== */
.related_materials_section { padding-bottom: 200px; }
.related_materials_section .section_header { margin-bottom: 20px; }
.related_materials_section .section_header h3 { font-size: 2.8rem; font-weight: 700; line-height: 1.2; color: #6C6C6C; }
.related_links { list-style: none; padding-left: 0; }
.related_links li { margin-bottom: 10px; }
.related_links li a { font-size: 1.8rem; line-height: 1.2; color: #6C6C6C; text-decoration: none; position: relative; padding-left: 15px; }
.related_links li a::before { content: '·'; position: absolute; left: 0; font-weight: bold; }
.related_links li a:hover { text-decoration: underline; color: #00A2E0; }




