@charset "utf-8";

 /* ================= 사회공헌 타이틀 ================= */
.csr-header { text-align: center; padding:  0px 0 100px; }
.csr-header .ht-title { font-size: 50px; font-weight: 700; color: #111; margin-bottom:40px; }
.csr-header .ht-subtitle { font-size: 20px; color: #000; line-height: 1.6;margin-bottom: 15px; }
.csr-header .ht-subtitle strong { font-size: 60px; color: #111; display: block;  line-height:1.4;}

/* ================= 4개 챕터 (Scroll Spy) ================= */
.sec-csr-chapters {

    padding-bottom: 150px;
    position: relative; 
	background-color:#f7f2ec;
	padding-top:150px; 
}
.sec-csr-chapters .chapters{ 
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 좌측 스티키를 위해 필수 */
}
/* 좌측 Sticky 네비게이션 */
.csr-nav {
    width: 25%;
    position: sticky;
    top: 150px; /* 스크롤 시 상단에 고정되는 위치 */
}
.csr-nav ul li { margin-bottom: 25px; }
.csr-nav ul li a {
    font-size: 28px;
    color: #999;
    font-weight: 500;
    transition: all 0.3s;
}
.csr-nav ul li a:hover { color: #555; }
.csr-nav ul li a.active {
    color: #111;
    font-weight: 700;
}

/* 우측 컨텐츠 리스트 */
.csr-contents {
    width: 65%;
}
.csr-item {
    position: relative;
    margin-bottom: 150px; /* 각 챕터 간 여유로운 간격 */
}
.csr-item:last-child { margin-bottom: 0; }

/* 챕터 거대 번호 (01, 02...) */
.csr-item .num {
    position: absolute;
    top: 20%; left: -80px;
    font-size: 180px;
    color: #fff; /* 매우 연한 회색 */
    font-weight: 300;
    line-height: 1;
    z-index: 1;
}

.csr-item .img-box img {
    width: 100%; height: 350px; object-fit: cover; border-radius: 15px;
    margin-bottom: 30px;
}
.csr-item .txt-box h4 { font-size: 30px; font-weight: 700; color: #111; margin-bottom: 15px; }
.csr-item .txt-box p { font-size: 20px; color: #b08968; font-weight: 700; margin-bottom: 10px; }
.csr-item .txt-box .desc { font-size: 20px; color: #111; line-height: 1.6; display: block; }

/* ================= 3개 통계 박스 ================= */
.sec-csr-stats {
    display: flex;
    justify-content: space-between;
 
    padding: 60px 0;
	margin: 50px auto 150px ; 
    margin-bottom: 150px;
}
.sec-area h3{ margin-top:200px;text-align:center;font-size:50px;font-weight:bold; margin-bottom:30px;color:#000; }
.stat-box { 
    text-align: center;

    padding: 50px  0px; 
	width:30%;
	border-top:1px solid #000;
}
.stat-box:last-child { border-right: none; }
.stat-box h5 { font-size: 40px; font-weight: 700; color: #111; margin-bottom: 20px; line-height: 1.4; }
.stat-box p { font-size: 20px; color: #666; }
.stat-box p.amount { font-size: 40px; font-weight: 700; color: #a78864; margin-bottom: 5px; }


.money-wrap {
    font-weight: bold;
    display: flex;
    align-items: center;justify-content: center;
    gap: 5px;
}

.money {
color: #a78864; 
    font-size: 20px;
    transition: font-size 0.8s ease;
		height:50px; 
		line-height:36px;
}

.money.active {
    font-size: 40px; 
	font-weight:bold;  

}

.money-unit {
    font-size: 20px;
    opacity: 0.7;
			height:50px; 
		line-height:36px;
}


/* ================= 게시판 슬라이드 (News) ================= */
.sec-csr-board { padding:  100px 0;  background:#f3f3f3;}
.board-header { margin-bottom: 50px; text-align: left; } /* 타이틀 좌측 정렬 유지 */
.board-header .main-tit { font-size: 32px; font-weight: 700; color: #111; }


.board-card {
    background: #fff; border-radius: 15px; overflow: hidden; cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s;
}
.board-card:hover { transform: translateY(-10px); }
.board-card .img-box { height: 250px; background-color: #eee; }
.board-card .img-box img { width: 100%; height: 100%; object-fit: cover; }
.board-card .img-box .no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #aaa; }
.board-card .txt-box { padding: 30px; }
.board-card .txt-box h4 { font-size: 22px; font-weight: 700; color: #111; margin-bottom: 15px; line-height: 1.4; }
.board-card .txt-box p { font-size: 20px; color: #888;   
line-height:1.6;
    display: -webkit-box;   
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3; /* 제한할 텍스트의 줄 수 */
}

/* ================= 재단 소개 섹션 ================= */
.sec-foundation {
    display: flex; align-items: center; justify-content: space-between; gap: 80px;
    padding: 150px 0;
}
.fnd-img { width: 55%; }
.fnd-img img { width: 100%; border-radius: 20px; }
.fnd-txt { width: 45%; }
.fnd-txt h3 { font-size: 36px; font-weight: 700; margin-bottom: 30px; color: #111; line-height: 1.3;}
.fnd-txt p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 40px; }
.fnd-txt .fn-tx01{font-size: 30px; font-weight: 700; margin-bottom: 10px; color: #111; line-height: 1.3;} 
.fnd-txt .fn-tx02{font-size: 20px; font-weight: 700;   color: #b08968; line-height: 1.3;margin-bottom:30px;} 
.fnd-txt .fn-tx03{font-size: 20px; font-weight: 500;  color: #111; line-height: 1.6;} 
.fnd-txt .fn-box{ display:flex;    
    gap: 10px; margin-bottom:50px;}
.fnd-txt .fn-box .items{  padding:5px 10px; border:1px solid #b08968; color:#b08968; text-align:center; font-size:20px;}
.btn-black {
    display: inline-block; width:70%;  text-align:center; padding:15px 0 ;background-color: #111; color: #fff;
    font-size: 16px; font-weight: 700; border-radius: 5px; transition: background 0.3s;
}
.btn-black:hover { background-color: #a78864; color: #fff; }



/* ================= [추가] 하단 중앙 슬라이드 컨트롤러 ================= */
.board-nav {
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center;
    gap: 15px; /* 두 버튼 사이 간격 */
    margin-top: 60px; /* 슬라이드 카드와 버튼 사이 여백 */
}

/* 원형 버튼 기본 스타일 */
.board-nav button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; /* 화살표 위치 기준점 */
}

/* CSS로 화살표 꺾은선 그리기 (이미지 없이 가볍게) */
.board-nav button::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
}

/* 이전(좌측) 화살표 방향 설정 */
.board-nav .swiper-btn-prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}

/* 다음(우측) 화살표 방향 설정 */
.board-nav .swiper-btn-next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}

/* 버튼 마우스 호버 효과 */
.board-nav button:hover {
    border-color: #111;
    background-color: #111;
}
.board-nav button:hover::after {
    border-color: #fff; /* 마우스 올리면 화살표가 하얗게 변함 */
}


/* ================= 사회공헌 팝업 레이어 ================= */
.csr-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); z-index: 9998; backdrop-filter: blur(5px);
}

.csr-popup-layer {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 1100px; background: #fff;
    border-radius: 20px; padding: 50px 60px;
    z-index: 9999; box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.btn-popup-close {
    position: absolute; top: 30px; right: 30px;
    background: none; border: none; font-size: 32px; color: #111;
    cursor: pointer; transition: transform 0.3s;
}
.btn-popup-close:hover { transform: rotate(90deg); }

/* 헤더 & 텍스트 */
.popup-header { display: flex; align-items: baseline; gap: 15px; margin-bottom: 20px; }
.popup-header h3 { font-size: 30px; font-weight: 700; color: #111; margin: 0; }
.popup-header .date { font-size: 15px; color: #999; font-weight: 500;display:none; }

.popup-text { font-size: 20px; color: #333; line-height: 1.6; margin-bottom: 30px; }

/* 갤러리 영역 */
.popup-gallery {
    display: flex; gap: 20px; height: 450px; /* 팝업 갤러리 전체 높이 */
}

/* 좌측 메인 이미지 */
.main-img-box {
    flex: 1; border-radius: 15px; overflow: hidden; background: #f8f8f8;
}
.main-img-box img { width: 100%; height: 100%; object-fit: cover; }

/* 우측 썸네일 리스트 (스크롤 적용) */
.thumb-list-box {
    width: 200px; height: 100%; overflow-y: auto; padding-right: 10px;
}
/* 스크롤바 얇고 예쁘게 커스텀 */
.thumb-list-box::-webkit-scrollbar { width: 6px; }
.thumb-list-box::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.thumb-list-box::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }

.thumb-list { display: flex; flex-direction: column; gap: 10px; }
.thumb-list li {
    width: 100%; height: 120px; border-radius: 10px; overflow: hidden;
    cursor: pointer; opacity: 0.5; transition: all 0.3s;
    border: 2px solid transparent; box-sizing: border-box;
}
.thumb-list li:hover, .thumb-list li.active {
    opacity: 1; border-color: #a78864; /* 선택 시 브라운 테두리 및 투명도 복구 */
}
.thumb-list li img { width: 100%; height: 100%; object-fit: cover; }