/* 폰트 적용 */
@font-face {
    font-family: 'LineSeed';
    src: url('../fonts/LINESeedJP_OTF_Th.woff2') format('woff2'),
         url('../fonts/LINESeedJP_OTF_Th.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'LineSeed';
    src: url('../fonts/LINESeedJP_OTF_Rg.woff2') format('woff2'),
         url('../fonts/LINESeedJP_OTF_Rg.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'LineSeed';
    src: url('../fonts/LINESeedJP_OTF_Bd.woff2') format('woff2'),
         url('../fonts/LINESeedJP_OTF_Bd.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'LineSeed';
    src: url('../fonts/LINESeedJP_OTF_Eb.woff2') format('woff2'),
         url('../fonts/LINESeedJP_OTF_Eb.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

/* 컨텐츠 폭 조절 */
.container {
    max-width: 1040px !important; /* 원하는 너비로 조정 */
}
/* 폰트지정 */
/* 페이지 기본색 흰색 */
body {
    font-family: 'LineSeed', sans-serif !important;
    line-height: 2.0 !important; /* 텍스트 줄 간격  */
    
    background-color: #f7f7f7; 
}
 html, body {
      /* margin: 0; */
      /* padding: 0; */
      /* height: 200%; 세로 스크롤 테스트용 */
      overflow-x: hidden; /* 가로 스크롤 제거 */
      /* width: 100%; */
      /* height: 100%; */
    }

/* canvas {
      position: fixed;
      pointer-events: none;
      z-index: -1;
    } */
/* '>' 리스트에 마크넣기 */
.custom-list {
    list-style-type: none; /* 기본 불릿을 없애고 */
    padding-left: 0; /* 기본 패딩 제거 */
}
  
.custom-list li {
    position: relative; /* li에 상대적 위치를 지정 */
    padding-left: 15px; /* 왼쪽 여백을 추가하여 불릿과 텍스트 사이의 간격을 조정 */
}
  
.custom-list li::before {
    content: ">"; /* 불릿으로 사용할 문자 지정 */
    position: absolute; /* 불릿을 절대 위치로 배치 */
    left: 0; /* 왼쪽에 배치 */
    top: 3px; /* 위에 배치 */
    color: #009e96; /* 불릿 색상 */
    font-size: 12px; /* 불릿 크기 */
}
/* safety.php에서 씀 */
.custom-list2 {
    list-style-type: none; /* 기본 불릿을 없애고 */
    padding-left: 0; /* 기본 패딩 제거 */
}
  
.custom-list2 li {
    position: relative; /* li에 상대적 위치를 지정 */
    padding-left: 15px; /* 왼쪽 여백을 추가하여 불릿과 텍스트 사이의 간격을 조정 */
}
  
.custom-list2 li::before {
    content: "+"; /* 불릿으로 사용할 문자 지정 */
    position: absolute; /* 불릿을 절대 위치로 배치 */
    left: 0; /* 왼쪽에 배치 */
    top: 3px; /* 위에 배치 */
    color: #009e96; /* 불릿 색상 */
    font-size: 16px; /* 불릿 크기 */
}


/* footer아이콘 호버효과 ------------------------------------------------------------------------------*/

footer .bi {
    transition: transform 0.1s ease, fill 0.1s ease; /* 부드러운 애니메이션 효과 */
}

footer .bi:hover {
    transform: scale(1.2); /* 아이콘 크기를 1.2배 키움 */
    fill: #009e96; /* 호버 시 아이콘 색상을 파란색으로 변경 */
}

/* 홈화면 풀페이지 스크롤 ---------------------------------------------------------------------------*/
section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* filter: brightness(110%) contrast(120%) saturate(110%) hue-rotate(-10deg); */
}

.bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 200, 100, 0.2) 50%, rgba(255, 255, 255, 0.2) 90%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* 반응형 글자 크기 조정 */
.section-title {
    color: white;
    text-shadow: 1px 1px 3px black;
    z-index: 1;
    font-weight: 900;
    font-size: clamp(1.5rem, 6vw, 5em); /* 여기서 자연스럽게 글자 크기 조정 */
}

/* 반응형 */
@media (max-width: 1200px) {
    .section-title {
        font-size: clamp(1.5rem, 6vw, 3.5em); /* 화면 작을수록 글자 크기 자동 조정 */
    }
}

@media (min-width: 1200px) {
    .section-title {
        font-size: clamp(1.5rem, 5vw + 1rem, 5em); /* 큰 화면에서는 조금 더 커짐 */
    }
}

/* 위로가기 버튼 스타일 --------------------------------------------------------------------------- */
/* Back to Top 버튼 스타일 */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgb(255, 255, 255); /* 배경을 흰색으로 */
    color: black; /* 아이콘 색상 */
    border: 1px solid #ccc; /* 테두리를 회색으로 */
    border-radius: 50%; /* 완전히 둥글게 */
    font-size: 18px;
    cursor: pointer;
    display: none; /* 초기에는 숨김 */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 그림자 추가로 떠있는 효과 */
    opacity: 0;
    align-items: center;
    justify-content: center;
    transform: translateY(20px);
    transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.3s ease;
}

/* 버튼이 보일 때 */
.back-to-top.show {
    opacity: 1;
    transform: translateY(0);
}

/* 버튼이 사라질 때 (아래로 떨어지는 효과) */
.back-to-top.hide {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.3s ease;
}

/* 버튼 호버 시 */
.back-to-top:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* 호버 시 그림자 강조 */
    background-color: #f8f8f8; /* 살짝 더 밝게 */
    
}
/* 채용 배너 고정 ---------------------------------------------------------------------------------*/
.button-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px; /* 버튼 간의 간격 */
    z-index: 12;
}
  
.button {
    height: 100px; /* 버튼의 높이 */
    padding: 0px 20px;
    padding-bottom: 1px;
    color: white;
    text-decoration: none;
    border-bottom-left-radius: 15px; /* 아래 왼쪽 모서리 둥글게 */
    border-bottom-right-radius: 15px; /* 아래 오른쪽 모서리 둥글게 */
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s ease;

    display: flex;
    justify-content: center;  /* 가로 정렬 */
    align-items: flex-end;  /* 세로로 아래쪽 정렬 */
     /* 글자 아래에 그림자 추가 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 수평, 수직, 흐림 정도, 색상 */
    /* 버튼 자체에 그림자 추가 */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* 수평, 수직, 흐림 정도, 색상 */
}

#btn_1{
    background-color: #009e96;
}

#btn_2{
    background-color: #1c2a75;
}

@media (max-width:1200px){
    .button {
        height: 65px; /* 버튼의 높이 */
    }
}

@media (min-width:1200px){
    .button {
        height: 100px; /* 버튼의 높이 */
    }
    .button:hover {
        /* background-color: #0056b3; */
        transform: translateY(10px); /* 호버 시 버튼이 아래로 10px 내려옴 */
    }
}

/* 새로운 뉴스 알림(일주일 이내) ---------------------------------------------------------------------------------*/
/* 알림 컨테이너 (화면 하단 중앙 정렬) */
#notification-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* 알림 스타일 */
.notification {
    background-color: rgba(255, 87, 34, 0.9); /* 눈에 띄는 주황색 배경 */
    color: white; /* 텍스트 색상은 흰색으로 유지 */
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4); /* 그림자 강조 */
    animation: fadeIn 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}


/* 알림이 나타날 때 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 공지사항 표시용 윈도우 스타일 ----------------------------------------*/
/* 추가적인 스타일 */
#fixed-window {

    z-index: 10;
}

/* 검색결과 표시 링크 --------------------------------------------------*/
.search_result a {
    color: black; /* 기본 색상 */
    text-decoration: none; /* 기본 상태에서 밑줄을 없앰 */
    transition: color 0.3s ease; /* 색상만 부드럽게 변하게 설정 */
}

.search_result a:hover {
    color: #009e96; /* 호버 시 텍스트 색상 */
    text-decoration: none; /* 호버 시 밑줄은 없애고 */
    box-shadow: 0 2px 0 0 #009e96; /* 밑줄을 대신하는 박스 그림자 추가 */
    transition: color 0.3s ease, box-shadow 0.3s ease; /* 색상과 밑줄 효과 부드럽게 변경 */
}
/* 페이지 타이틀 선 장식(움직이는 트럭)-----------------------------------*/
.line-container {
    position: relative;
    width: 100%;
    margin-top: 30px;
}

.line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #000000 0%, #000000 20%, #dddddd 20%, #dddddd 100%);
}

.icon-on-line {
    position: absolute;
    top: -43px;
    left: 0;
    transform: translateX(-50%);
    font-size: 32px;
    animation: moveTruck 100s linear infinite;
    z-index: 1;
}


@keyframes moveTruck {
    0% {
        left: 2%;
    }
    100% {
        left: 98%;
    }
}

/* 부트스트랩 커스텀 ------------------------------------------------------*/
.btn-outline-primary {
    color: #009e96 !important;  /* 텍스트 색상 변경 */
    border-color: #009e96 !important;  /* 테두리 색 변경 */
}

.btn-outline-primary:hover {
    background-color: #009e96 !important;
    color: white !important;
}
/* 책갈피 높이 조정 ------------------------------------------------------*/
/* 책갈피로 이동했을 때 메뉴가 가려지지 않도록 padding 추가 */
html {
    scroll-padding-top: 86px; /* 메뉴 높이에 맞게 값 조정 */
}
@media (max-width: 1200px) {
html {
    scroll-padding-top: 50px; /* 작은 화면에서는 메뉴 높이가 줄어들면 적절하게 조정 */
}
}

.iconBack{
    z-index: 0;                /* 배경 뒤로 */
    /* opacity: 0.2;    */
    position: absolute;
    color: #f7f7f7;
}

main .container{
    background-color: white;
    border-radius: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px;
    position: relative;
    overflow: hidden;   
}

main .container h1{
    font-size: 3rem;
    font-weight: bold;
    position: relative;        /* 겹치게 표시 */
    z-index: 1; 
}
@media (max-width: 768px) {
    main .container h1 {
        font-size: 2rem; /* 태블릿 이하 */
    }
}

@media (max-width: 480px) {
    main .container h1 {
        font-size: 1.5rem; /* 스마트폰 */
    }
}
main .h4Title{
    font-weight: bold;
    color:#009e96;
    position: relative;        /* 겹치게 표시 */
    z-index: 1; 
}

.transparent-table,
.transparent-table td,
.transparent-table th {
    background-color: transparent !important;
}