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

*{margin:0;padding:0;box-sizing:border-box; }

html{ 
    scroll-behavior: smooth; 
}

/* 폰트지정 */
body{ width: 100%;  
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}
header{width:100%;position:fixed;top:0;left:0;z-index:999;background:#fff;border-bottom:2px solid #e1e3e1;} 
.container{max-width:90%;margin:0 auto;padding:0 24px;} nav{display:flex;justify-content:space-between;align-items:center;height:80px;} 
nav ul{display:flex;gap:40px;list-style:none;} nav a{text-decoration:none;color:#333;font-size:16px;font-weight:500;} 
.mobile-menu-btn{display:none;font-size:22px;cursor:pointer}
/* 모바일 메뉴 */
.mobile-nav{ opacity: 0.8; position:fixed; z-index:9999; top:70px; right:-320px;width:320px;height:100vh;background:#fff;box-shadow:-2px 0 20px rgba(0,0,0,0.12);padding:60px 24px;display:flex;flex-direction:column;gap:22px;transition:right .28s ease;}
.mobile-nav a{font-size:18px;color:#333;text-decoration:none;}
.mobile-nav.show{top:70px; right:0;  border:0px solid red;}
/* 햄버거 버튼 토글 */
/* 기본 스타일 */
#hamburger {
    font-size: 28px; /* 기호 크기 */
    cursor: pointer;
    line-height: 1; 
    transition: transform 0.3s ease-in-out; /* 회전 전환 효과 */
    user-select: none; /* 드래그 방지 */
}

/* 'open' 클래스 추가 시 X자처럼 보이도록 회전 */
#hamburger.open {
    transform: rotate(90deg);
}
/* Hero 슬라이드 */
.slider{position:relative;height:100vh;overflow:hidden;} .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 800ms ease, transform 800ms ease;transform:scale(1.02);} .slide.active{opacity:1;transform:scale(1);} .hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;z-index:2;padding:0 24px;} .hero-content h1{font-size:58px;margin-bottom:20px;font-weight:700;} .hero-content p{font-size:20px;opacity:0.95;}
/* 버튼 & 도트 */
.slide-btn{ opacity: 0.8; position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.95);border:none;color:#fff;font-size:28px;width:56px;height:56px;
    border-radius:1%;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;backdrop-filter: blur(4px);} 
.slide-btn:hover { opacity: 10;}
.slide-btn.prev{left:28px;} 
.slide-btn.next{right:28px;} 

/*슬라이드 좌우측 화살표*/
.thin-arrow-left {
   
    /* 배경 관련 속성 제거 (background-color, position, z-index 등) */
    background-color: transparent;
    
    display: inline-block; /* 텍스트처럼 취급하여 다른 요소와 정렬하기 좋음 */
    width: 50px;           /* 화살표의 시각적인 너비 (크기 조절) */
    height: 50px;          /* 화살표의 시각적인 높이 (크기 조절) */
    
    /* 1px 굵기로 가장 얇은 화살표 획 */
    border-left: 3px solid #ffffff; /* 왼쪽 테두리 */
    border-bottom: 3px solid #ffffff; /* 아래쪽 테두리 */
    
    transform: rotate(45deg); /* 45도 회전하여 '<' 모양 만듦 */
    border-radius: 10px;
    
}

.thin-arrow-right {
   /* 배경 관련 속성 제거 (background-color, position, z-index 등) */
    background-color: transparent;
    display: inline-block; /* 텍스트처럼 취급하여 다른 요소와 정렬하기 좋음 */
    width: 50px;           /* 화살표의 시각적인 너비 (크기 조절) */
    height: 50px;          /* 화살표의 시각적인 높이 (크기 조절) */
    
    /* 1px 굵기로 가장 얇은 화살표 획 */
    border-left: 3px solid #ffffff; /* 왼쪽 테두리 */
    border-bottom: 3px solid #ffffff; /* 아래쪽 테두리 */
    
    transform: rotate(225deg); /* 45도 회전하여 '<' 모양 만듦 */
    border-radius: 10px;
    
}
.slide-dots{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:20;} 
.slide-dots button{width:40px;height:5px;border-radius:2%;background:rgba(255,255,255,0.45);border:0;cursor:pointer;padding:0; } 
.slide-dots button:hover{
    
    transition: .5s;
    background-color: rgb(68, 68, 68);
    height: 7px;;
    transform: scaleY(2);
}
.slide-dots button.active{background:#fff}
/* 우측 고정바 */
.fix-bar{position:fixed;right:20px;bottom:20%;transform:translateY(50%);display:flex;flex-direction:column;gap:12px;z-index:999;} 
.fix-bar a{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #bfbfbf; font-size:14px;text-decoration:none;color:#333}
/* 섹션 */
.section{padding:80px 0;} 
.section-title{text-align:center;margin-bottom:70px;} 
.section-title h2{font-size:32px;font-weight:700;margin-bottom:12px;} 
.section-title p{color:#777} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} 
.card img{width:100%;border-radius:8px} 
.card h3{margin:20px 0;font-size:22px;font-weight:600} 
.card p{font-size:15px;line-height:1.7;color:#666}
.underline {border-bottom: 1px solid #ddd; padding-bottom:20px;}
footer{background:#111;color:#bbb;padding:80px 0;text-align:center;font-size:14px}


/* area01-모달*/
/* --- 섹션 스타일 (기존 코드와 통합) --- */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.card {
    text-align: center;
    /* padding: 20px; */
    border: 1px solid #eee;
    background-color: #fff;
    /* cursor: pointer; */
    text-decoration: none; /* 버튼 기본 스타일 제거 */
    color: inherit; /* 버튼 기본 스타일 제거 */
}
.card img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}
.card h3 {
    margin-top: 0;
}
.card p {
    color: #666;
}

/* ⚠️ '인사말' 버튼을 카드처럼 보이게 하기 위한 추가 스타일 */
.modal-trigger {
    /* 버튼의 기본 배경/테두리 스타일을 제거하고 카드 클래스를 사용 */
    background: none; 
    border: none;
    padding: 0;
    margin: 0;
    /* card의 스타일을 그대로 유지하기 위해 필요 */
    display: block; 
    width: 100%;
}
.modal-trigger.card {
    /*padding: 20px; card의 패딩 다시 적용 */
}


/* --- 모달 스타일 (이전 답변 코드) --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1001; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.8); 
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%; 
    max-width: 700px; 
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 20px;
}
.close-btn2 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 20px;
}
.close-btn3 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 20px;
}
.modal-body p {
    line-height: 1.8;
}

.detail_p {
    padding: 14px;
    font-size:14px !important;
    background-color: #363636;
    border:2px solid #ddd; width: 200px; margin: 0 auto;
    color:white !important; 
    cursor: pointer;
    
}

.detail_p:hover {
    background-color: #4a4d63;
    color: white;
}

.modal-trigger{
    cursor: default;
}


/*footer*/
/* 푸터 전체 컨테이너 */
.main-footer {
    background-color: #292929; /* 이미지와 유사한 어두운 배경색 */
    color: #a0a0a0; /* 텍스트 색상 */
    font-size: 14px;
    /* line-height: 1.6; */
    padding: 20px 0 0 0; /* 상하 패딩, 좌우는 없게 또는 컨테이너에 맞춰 */
    font-family: 'Noto Sans KR', sans-serif; /* 예시 폰트 지정 */
}

.main-footer a {
    color: #a0a0a0; /* 링크 기본 색상 */
    text-decoration: none;
}

.main-footer a:hover {
    color: #ffffff; /* 링크 호버 시 색상 */
}

/* 푸터 내부 콘텐츠 (좌우 정렬 컨테이너) */
.footer-container {
    max-width: 1200px; /* 푸터 콘텐츠 최대 너비 */
    margin: 0 auto; /* 가운데 정렬 */
    display: flex;
    justify-content: space-between; /* 왼쪽/오른쪽 콘텐츠 분리 */
    padding: 0 20px; /* 좌우 내부 여백 */
    flex-wrap: wrap; /* 반응형을 위해 요소가 줄바꿈되도록 */
}

/* 푸터 왼쪽 영역 (회사 정보) */
.footer-left {
    flex: 1; /* 가능한 공간을 차지 */
    min-width: 300px; /* 너무 좁아지지 않도록 최소 너비 설정 */
    margin-right: 40px;
}

.footer-left > div {
    margin-bottom: 20px; /* 각 정보 블록 아래 여백 */
}

.footer-left p {
    margin: 0; /* 단락 기본 마진 제거 */
}

/* 푸터 오른쪽 영역 (메뉴 그리드) */
.footer-right {
    flex-shrink: 0; /* 줄어들지 않도록 */
    min-width: 400px; /* 최소 너비 */
    max-width: 600px; /* 최대 너비 */
    width: 50%; /* 비율로 너비 지정 (조정 가능) */
    display: flex;
    justify-content: flex-end; /* 메뉴를 오른쪽으로 정렬 */
}

.footer-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 그리드 */
    gap: 15px; /* 그리드 항목 사이 간격 */
    width: 100%; /* 부모의 너비를 꽉 채움 */
}

.footer-menu-grid .menu-item {
    background-color: rgb(54, 54, 54); /* 메뉴 항목 배경색 */
    padding: 20px 10px; /* 내부 패딩 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff; /* 메뉴 텍스트 색상 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 얇은 테두리 */
    transition: background-color 0.3s ease;
}

.footer-menu-grid .menu-item:hover {
    background-color: #4A4D63; /* 호버 시 배경색 변경 */
}

/* 푸터 하단 (저작권 및 개인정보) */
.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0 auto; /* 상단 여백 추가, 가운데 정렬 */
    padding: 20px; /* 좌우 내부 여백 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 상단 구분선 */
    display: flex;
    justify-content: space-between; /* 양쪽 끝 정렬 */
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
}

.footer-bottom .copyright {
    margin: 0;
}

.footer-bottom .privacy-link {
    margin: 0;
}


/* 반응형 디자인 (선택 사항) */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* 세로로 쌓이도록 변경 */
        align-items: flex-start; /* 왼쪽 정렬 */
    }

    .footer-left {
        margin-right: 0;
        margin-bottom: 30px;
        width: 100%;
    }

    .footer-right {
        width: 100%;
        min-width: unset;
        justify-content: flex-start;
    }
    
    .footer-menu-grid {
        grid-template-columns: repeat(2, 1fr); /* 모바일에서는 2열로 변경 */
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom .copyright {
        margin-bottom: 10px;
    }
    .map_m{
        display: block;
    }
}
@media(max-width:900px){nav ul{display:none;} .mobile-menu-btn{display:block;} .hero-content h1{font-size:34px} .grid-3{grid-template-columns:1fr}}

/*map*/