@charset "utf-8";
/*기본 설정 폰트크기*/
html {font-size: 100%; }
/*기본 최상위 id div*/	
#main_sec {font-family:'Pretendard'; font-weight:500; line-height:1.2em; position:relative; overflow:hidden}
section {width:100%; display:block; padding: 150px 0 50px 0;}
#main_sec > section > div { max-width:1600px; width:100%; margin:0 auto; }
#main_sec > section p.sec_title {font-size:2em; line-height:1.2em; color:#0d3b64; font-family:'ONE-Mobile-Title'; font-weight:500; margin-bottom:40px; transform: scaleX(0.90);
  transform-origin: left center;  /* ← 왼쪽을 기준으로 압축 */}

#sec_01 { background-color: #e3e0f6;
  background-image: url('/images/index/visual_01.jpg');
  background-size: cover;         /* 영역을 꽉 채움 */
  background-position: center;    /* 이미지의 중심을 기준 */
  background-repeat: no-repeat;   /* 반복 방지 */
  height: 926px; 
  padding-top:0; 
 }
 #sec_01 > div.main_slogan { width:100%; height:700px;position:relative;}
#sec_01 > div.main_slogan > div { position: absolute;top: 50%;left: 50%;transform: translate(0, -50%); width:auto; color:#09206e; font-family:'ONE-Mobile-Title'; }
#sec_01 > div.main_slogan > div  > p:nth-child(1){ font-family:'ONE-Mobile-Title'; font-size:2.1em; line-height:1.2em; margin-bottom:20px }
#sec_01 > div.main_slogan > div  > p:nth-child(2){ font-family:'ONE-Mobile-Title'; font-size:1.2em; line-height:1.2em; font-weight:500; }




#sec_02{position: relative; 
  padding-top: 240px; /* 공지사항 박스가 위로 올라오므로, 그만큼 공간 확보 */
  padding-bottom: 50px;
  background: #fff;
 }

.main_notice {
  width: 100%;              /* 기본은 부모영역 가득 */
  max-width: 1600px;        /* 최대폭 제한 */
  margin: 0 auto;           /* 가운데 정렬 */
  background: #fff;
  padding: 100px 90px 26px 90px;
  border-radius: 90px 30px 90px 30px;
  box-shadow: 9px 9px 9px 0 rgb(203, 203, 203);
  box-sizing: border-box;
  
}

/* 공지사항 박스 */
.main_notice.floater-box {
  margin: 0 auto;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* 자기 높이의 절반만큼 위로 */
  z-index: 10;
  box-sizing: border-box;
}

/* 활동/연구소 2단 영역 */
.main_active {  display:flex; flex-wrap:wrap }

.main_active > div {width:100%;}
.main_active > div > p {padding-left:10px;}
.main_active > div.active_lab > p {padding-left:30px;}

/*안실련 소식*/
#sec_03{background: #f1f8fe;}
.swiper-container {   width: 100%;  height: 100%; }
.swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.news_list{   width: 100%;  height: 100%;  }
div.pageNavie {  position: relative;padding: 50px 0;max-width: 450px;margin: 0;display:inline-block; } 

/*스와이프 전체 설정 변경*/
/*스와이프 bllet 변경*/
.swiper-pagination{font-size:10px;position:relative; display: inline-block;}
.swiper-pagination-bullet {background : #cccccc;}
.swiper-pagination-bullet-active {background : #0072bc;}
.swiper-button-prev, .swiper-container-rtl, .swiper-button-next {width:50px; height:50px; border: 1px solid #657ed2; border-radius: 50%;background-repeat: no-repeat; background-size: auto;}
.swiper-button-prev { right: -65px;    left: auto;}
.swiper-button-next { right: -125px;    left: auto;}

/*biz_list 스와이프 박스*/
.biz_list .swiper-slide > div{ width:340px; height:287px; border: 1px solid #7da7d9; border-radius: 15px;	background-color:#f1f8fe; color:#333;	padding: 40px 34px;}
.biz_list .swiper-slide > div a { background: #3c3f72; padding: 10px 20px; color:#fff; display: inline-block;}
.biz_list .swiper-slide > div:hover{ 	background-color:#000; color:#fff; }
.biz_list div:hover a { background-color:#000; color:#fff; border: 1px solid #fff; }

/*biz_list 스와이프박스 컨텐츠*/
.biz_list .card {  padding: 40px 34px;  display: flex;  flex-direction: column;  justify-content: space-between; /* 위(top)와 아래(bottom) 공간 분리 */  align-items: flex-start;  height: 100%; /* 카드 높이를 일정하게 */
 box-sizing: border-box; }
.biz_list .card-top p{ 	display:block; }
.biz_list .card-bottom {   margin-top: auto; /* 버튼을 맨 아래로 밀착 */ }
.biz_list .card-bottom p {   margin: 0; /* p 기본 여백 제거 */ }
.biz_list p.content{ margin-bottom:28px; font-size: 1.2em;}
.biz_list p.notice_date { font-size: 0.8em; font-weight:500; margin-bottom:20px; color:#3a4c88; }
.biz_list div:hover p.notice_date{color:#fff;}
.biz_list p.goto_url{ font-size: 0.9em; width: 190px; height:50px; display:block;}
.biz_list p.goto_url a {width:100%; height:auto;}
/** 안전 활동 기본 스타일 (데스크탑 포함) */
.safety-list > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center; /* 반응형 대응시 중앙 정렬이 시각적으로 더 안정적입니다 */
}

.safety-list > ul > li {
  box-sizing: border-box;
  /* 기본: 한 줄에 7개 (약 14%) */
  flex: 0 0 calc(14.28% - 17.2px); 
}

/* 카드 공통 스타일 */
.safety-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 45px 20px 20px 20px;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
  border: 1px solid #ccc;
  height: 100%; /* 카드의 높이를 통일 */
}

.safety-list a:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  background : #eef7ff;
}

.safety-list img { 
  width: 64px; 
  height: 64px; 
  margin-bottom: 35px; 
  object-fit: contain;
}

.safety-list p { 
  margin: 0; 
  font-size: 1.10em; 
  font-family:'ONE-Mobile-Title'; 
  font-weight: 300; 
  color: #333; 
  transform: scaleX(0.90);
  text-align: center;
  word-break: keep-all; /* 단어 단위 줄바꿈으로 가독성 향상 */
}

/* ======================================================
   반응형 브레이크포인트 설정
   ====================================================== */

/* 1. 태블릿 및 작은 모니터 (1200px 이하: 한 줄에 4개) */
@media (max-width: 1200px) {
  .safety-list > ul > li {
    flex: 0 0 calc(25% - 20px);
  }
}

/* 2. 태블릿 (768px 이하: 한 줄에 3개) */
@media (max-width: 992px) {
  .safety-list > ul > li {
    flex: 0 0 calc(33.33% - 20px);
  }
  .safety-list a {
    padding: 30px 15px 15px 15px; /* 패딩 약간 축소 */
  }
  .safety-list img {
    margin-bottom: 20px;
  }
}

/* 3. 모바일 (576px 이하: 한 줄에 2개) */
@media (max-width: 576px) {
  .safety-list > ul {
    gap: 10px; /* 간격 축소 */
  }
  .safety-list > ul > li {
    flex: 0 0 calc(50% - 10px);
  }
  .safety-list a {
    padding: 20px 10px;
  }
  .safety-list img {
    width: 48px; /* 이미지 크기 축소 */
    height: 48px;
    margin-bottom: 15px;
  }
  .safety-list p {
    font-size: 0.95em;
  }
}

.lab-card {width:100%;height:auto; border: 1px dotted green;}
.issue-slide { 
  width: 100%;                /* 보이는 너비 */
  /*max-width: 730px;*/
      height: fit-content;
}

/* 카드 프레임 */
.issue-card{
  width: 100%;
  max-width: 350px;
  aspect-ratio: 730 / 690;     /* 비율 고정 (대체로 390px 높이) */
  max-height: 600px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 3px 3px 7px 4px rgba(0, 0, 0, .15);
  overflow: hidden;

}

/* 상단 영역 (연한 블루 BG 유지) */
.issue-head{
  background: #eaf3f8;         /* 필요 시 원하는 연블루로 조정 */
  height:120px;
 display:flex;
  align-items: center;
  padding: 20px 20px;
  border-bottom: 1px solid #e1e7ed;
}
.issue-body{background:#fff; padding:20px; font-size:0.8em; display:flex; align-items:flex-start}
.issue-body > .issue-logo {visibility : hidden ;}

.issue-logo{
  width: 50px;
  height: auto;
  display: block;
}

.issue-title{
  margin: 0;
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1.12em;
}
.issue-title a{
 color: #2554b1a;  
}
.issue-title2{

  font-size: 1em;

}
.lab_list .swiper-wrapper{ height: auto; }



.issue-desc{
  margin: 0;
  color: #24415b;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.2em;
}


/*안실련 소식*/
/* 컨테이너 */
.news-swipe {
  position: relative;
  padding: 0 8px;                 /* 양끝 여백 */
}

/* 가로 스와이프 트랙 */
.news-track {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 8px 8px 16px;
  margin: 0;
  overflow-x: auto;               /* 가로 스크롤(터치 스와이프) */
  scroll-snap-type: x mandatory;  /* 스냅 */
  scroll-padding-left: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox 스크롤바 숨김 */
}
.news-track::-webkit-scrollbar { display: none; } /* WebKit 스크롤바 숨김 */

/* 슬라이드(카드 폭) */
.news-slide {
  flex: 0 0 420px;   
  
  /* 기본 카드 너비 */
  scroll-snap-align: start;
  scroll-snap-stop: always; 
}

/* 카드 */
.news-card {
  display: block; width:100%;height:500px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 7px 7px 5px rgba(0, 0, 0, .12);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  position:relative;
}

/* 썸네일 */
.news-card .thumb {
  position: relative;
  /*aspect-ratio: 1 / 1;*/           /* 정사각형 영역 */
  height:100%;
}
.news-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.date-badge {

  font-size: 0.8em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* 본문 */
.news-card .news_body {
  padding: 20px 18px 18px;
  row-gap: 14px;
  position: absolute;
  inset: 0;                    /* top/left/right/bottom: 0 */
  display: flex;
  flex-direction: column;
  align-items: center;         /* 가로(좌우) 중앙 */
  justify-content: center;     /* 세로(상하) 중앙 */
  gap: 14px;                   /* 요소 간 간격 */
  padding: 20px 18px;
  text-align: center;
  color: #fff;

  overflow: hidden;
}
.thumb:after{
	position: absolute;
  inset: 0;   display:block;    background: rgba(0,0,0, 0.2); width:100%; height:100%; content:"";
}

.news-card:hover .news_body{
	 background: rgba(60,63,114, 1.0);
}
.news-card .news_title {
  margin: 0;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.35;
  /*color: #1f2a44;*/
  display: -webkit-box;           /* 2줄 말줄임 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #d8dced;
  border-radius: 10px;
  font-size: 0.9em;
  color: #fff;
  visibility:hidden;
}
.news-card:hover .btn-more {
  visibility:visible;
}


.news-card .btn-more::after {
  content: "›";
  font-size: 0.9em;
  line-height: 1;
}



/* 0. 섹션 공통 레이아웃 */
#sec_04 > div {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap; 
    gap: 30px;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: stretch; /* 좌우 섹션 높이를 나란히 맞춤 */
}

.main_donation { flex: 1.2 1 500px; min-width: 0; }
.main_education { flex: 1 1 500px; min-width: 0; }

/* 2. [좌측] 후원하기 내부 - 겹침 방지 및 2열 배치 */
#sec_04 .main_donation > div {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap; 
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 40px !important;
    background: #f6eef0 !important;
    border-radius: 60px 15px !important;
    /* 수정 포인트: 고정 높이를 풀어서 내용물에 따라 늘어나게 함 */
    height: auto !important; 
    min-height: 250px; 
    box-sizing: border-box;
}

#sec_04 .main_donation .donation_img {
    flex: 0 0 35%; 
    max-width: 240px;
    text-align: center;
}

#sec_04 .donation_list {
    flex: 1;
}

#sec_04 .donation_list ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px;
}

#sec_04 .donation_list li {
    flex: 1 1 calc(50% - 10px) !important; 
}

#sec_04 .donation_list li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 10px !important;
    background: #fff !important;
    border: 1px solid #d1d9f1 !important;
    border-radius: 50px !important;
    color: #163a5a !important;
    font-weight: 700;
    font-size: 0.9em;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.05); text-align:center;
}

/* 3. [우측] 교육/자격신청 - 높이 및 글자 이탈 방지 */
.main_education > div ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    align-items: flex-start !important;
}

.main_education > div li {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.main_education > div li > a {
    width: 100%;
    height: 160px !important; /* 배너 높이 고정 */
    background: #eaf4fb !important;
    border-radius: 20px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
    overflow: hidden;
}

.main_education > div li > a img {
    max-width: 70% !important;
    max-height: 70% !important;
    object-fit: contain;
}

.main_education > div li > p {
    margin: 0;
    text-align: center;
    font-size: 0.9em;
    font-weight: 700;
    color: #0d3b64;
    word-break: keep-all;
    line-height: 1.2;
}




/*링크 배너*/
/* 5. [하단] 링크 배너 섹션 */
#sec_05 {
    background: #eeeff1; 
    padding: 60px 0; 
    margin-top: 100px;
    width: 100%;
}

.link_div {
    max-width: 1600px; /* 상단 섹션들과 폭 맞춤 */
    margin: 0 auto;
    padding: 0 20px;
}

.link_div > ul { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 10px !important; /* 로고 사이 간격 */
  
    list-style: none;
    padding: 0;
    margin: 0;
}

.link_div > ul > li {
    /* PC 기준: 한 줄에 6개씩 배치 (원하는 개수에 따라 % 조절 가능) */
    flex: 1 1 calc(12.5% - 10px); 
    
    height: 70px; /* 로고 박스 높이 통일 */
}

.link_div > ul > li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff; /* 로고 배경 흰색 */
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    transition: all 0.2s;
}

.link_div > ul > li a:hover {
    border-color: #163a5a;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.link_div > ul > li a img {
    max-width: 85%; /* 로고가 박스에 너무 꽉 차지 않게 */
    max-height: 70%;
    width: auto;
    height: auto;
    filter: grayscale(0); /* 필요 시 흑백 처리하려면 100% */
    object-fit: contain;
}



/* ============================================================
   반응형 레이아웃 시작 
   ============================================================ */

/* [1. 태블릿 및 작은 PC - 1200px 이하] */


/* [2. 태블릿 - 1024px 이하] */
@media screen and (max-width: 1024px) {
    section { padding: 80px 0 40px 0; }
    
    /* 비주얼 영역 */
    #sec_01 { height: 600px; }
    #sec_01 > div.main_slogan { height: 500px; }
    

    
    /* 하단 후원/교육 섹션 */
    #sec_04 > div { flex-direction: column; }
    .main_donation, .main_education { width: 100%; flex: none; }
	.swiper-pagination{display:none}
	.main_notice { padding-top:50px; }
}
@media screen and (max-width: 840px) {
    /* 섹션 상하 여백 축소 */
    section { 
        padding: 80px 0 0px 0 !important; 
    }
    
    /* 안실련 소식 타이틀 여백 조정 */
    #main_sec > section p.sec_title {
        margin-bottom: 25px;
        font-size: 1.8em;
    }

    /* 슬라이드 컨트롤러(화살표) 영역 여백 */
    div.pageNavie {
        padding: 50px 0 20px 0;
    }

    /* 공지사항 플로터 박스 상단 여백 조정 */
    #sec_02 {
        padding-top: 50px; /* floater-box 위치에 따라 조절 */
    }
	 #sec_02 {
        padding-bottom: 20px !important; /* 기존 150px에서 대폭 축소 */
    }

	    /* 1. 공지사항 전체 흰색 박스 슬림화 */
		 /*공지사항 박스 자체의 여백 및 테두리 정리 */
    .main_notice, .main_notice.floater-box {
        padding: 30px 20px 80px 20px !important; /* 하단(80px)은 버튼이 들어갈 공간 확보 */
        box-shadow: none !important;
        border: none !important;
        
        margin-bottom: 0 !important;
    }
    .main_notice, 
    .main_notice.floater-box {
        box-shadow: none !important;    /* 그림자 제거 */
        border: none !important;        /* 테두리 제거 */
        padding: 0px 0px 30px 0 !important;  /* 상하좌우 패딩 축소 (기존 100px/90px에서 대폭 감소) */
        border-radius: 20px !important; /* 모서리 곡률도 모바일에 맞게 완만하게 조정 */
    }

    /* 2. 공지사항 내부 개별 슬라이드 카드 슬림화 */
    .biz_list .swiper-slide > div {
        box-shadow: none !important;
        border: none !important;
        padding: 20px !important;       /* 카드 내부 패딩 축소 */
        background-color: #f8f9fb;      /* 테두리가 없으므로 아주 연한 배경색으로 구분감만 부여 */
        height: auto !important;        /* 높이 가변 */
    }
	  .main_notice {
        padding: 20px 10px !important; /* 좌우 여백을 확 줄여서 박스가 옆으로 늘어나게 함 */
        width: 100% !important;        /* 화면 너비의 95% 차지 */
	
    }

    /* 2. 스와이퍼 슬라이드(카드) 너비 조절 */
    .biz_list .swiper-slide {
        width: 100% !important; /* 카드가 한 줄에 하나씩 꽉 차게 할 경우 */
        /* 만약 옆에 카드가 살짝 보이길 원하면 width: 85% !important; 로 설정하세요. */
    }

    /* 3. 카드 내부의 박스(div) 너비 고정 해제 */
    .biz_list .swiper-slide > div {
        width: 100% !important;   /* 기존 340px 고정 너비 해제 */
        max-width: none !important; 
        margin: 0 auto;
        box-sizing: border-box;    /* 패딩이 너비에 포함되도록 함 */
    }



}



/* [3. 모바일 - 768px 이하] */
@media screen and (max-width: 768px) {
    /* 글자 크기 조정 */
    html { font-size: 90%; }
    #main_sec > section p.sec_title { font-size: 1.6em; margin-bottom: 25px; }

    /* 메인 비주얼 슬로건 */
	#sec_01 > div.main_slogan { height: 100%;}
    #sec_01 > div.main_slogan > div { 
        left: 20px; 
		bottom:20px; top:auto; 
        transform: translate(0, 0); 
        width: calc(100% - 40px); 
    }
    #sec_01 > div.main_slogan > div > p:nth-child(1) { font-size: 1.6em; }

    /* 공지사항 플로터 해제 (모바일에서는 아래로 자연스럽게 배치) */
    #sec_02 { padding-top: 10px; }
    .main_notice.floater-box { 
        position: relative; 
        top: 0; 
        left: 0; 
        transform: none; 
        margin-top: -100px; /* 비주얼 위로 살짝 겹침 유지 */
        padding: 50px 30px;
        border-radius: 40px 15px;
		
    }

    /* 뉴스/비즈니스 리스트 카드 크기 */
    /* 카드 */

	.news-slide { flex: 0 0 280px; } /* 카드 너비 축소 */
    .news-card { height: 380px; }
    
    /* 안전 활동 2열 */


    /* 후원하기 내부 레이아웃 */
    #sec_04 .main_donation > div { flex-direction: column; padding: 30px !important; }
    #sec_04 .main_donation .donation_img { max-width: 150px; margin-bottom: 20px; }
    
    /* 연구소 카드 그리드 해제 */
    .issue-card { 
        grid-template-columns: 1fr; 
        max-height: none; 
        aspect-ratio: auto; 
    }
    .issue-head, .issue-body { 
        grid-template-columns: 80px 1fr; 
        padding: 20px; 
    }
    .issue-logo { width: 70px; }
    .issue-title { font-size: 1.4em; }

    /* 링크 배너 */
    .link_div > ul > li { flex: 1 1 calc(33.33% - 10px); min-width: 100px; }
}
/* [2. 640px 이하: 일반 모바일] */
@media screen and (max-width: 640px) {
    /* 섹션 상하 여백 대폭 축소 */
    section { 
        padding: 50px 0 30px 0 !important; 
    }
 #sec_01 { height: 400px;padding: 0px 0px 0 !important;  }
   
    /* 타이틀 및 텍스트 크기 최적화 */
    #main_sec > section p.sec_title {
        font-size: 1.5em;
        margin-bottom: 20px;
        padding-left: 15px; /* 모바일에서 좌측 여백 확보 */
    }

    /* 뉴스 카드 사이 간격(gap) 조절 */
    .news-track {
        gap: 15px;
        padding: 0 15px 20px;
    }

    /* 뉴스 카드 높이 축소 (이미지처럼 잘리지 않게) */
    .news-card {
        height: 200px;
    }

    /* 스와이프 내비게이션 버튼 크기 축소 */
    .swiper-button-prev, .swiper-button-next {
        width: 40px;
        height: 40px;
    }
	.main_education > div li > a {
 height: 120px !important; /* 배너 높이 고정 */
}
}

/* [4. 초소형 모바일 - 480px 이하] */
@media screen and (max-width: 480px) {
   
    #sec_04 .donation_list li { flex: 1 1 100% !important; } /* 후원버튼 1열 */
	
    .main_education > div ul { flex-direction: column; }
    .link_div > ul > li { flex: 1 1 calc(50% - 10px); }

}