@import url(reset.css);

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Aggravo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}







#wrap { width: 100%;}
section {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* 헤더--------------------------------------------------------------------- */

header { width: 100%; position: absolute; z-index: 1000;}
.header { display: flex; position: relative; width: 1300px; margin: 0 auto;}

h1 { width: 30%; padding: 40px 0 20px 12px; z-index: 1000;}
h1 img {width: 40%;}

/* 부모 nav에 기준점 설정 */
nav { width: 70%; position: relative; } /* relative 추가 */

nav > ul.gnb { display: flex; margin-top: 55px; justify-content: space-around; position: relative; z-index: 999; } /* 메뉴가 배경보다 위에 와야 함 */
nav > ul.gnb > li { width: 20%; text-align: center; height: 50px; } /* 높이 고정 */
nav > ul.gnb > li > a { font-size: 20px; color: #000; font-weight: 500; display: block; line-height: 50px; }
nav > ul.gnb > li:hover > a { color: #2449a6; }

/* 1. 각 메뉴 항목(li)에 기준점 설정 */
nav > ul.gnb > li { 
    width: 20%; 
    text-align: center; 
    position: relative; /* 중요: 서브메뉴가 이 li를 기준으로 움직이게 함 */
}

/* 2. 서브메뉴 스타일 수정 (뭉침 방지) */
nav ul.sub { 
    position: absolute; 
    top: 50px;      /* 메인 메뉴 글자 바로 아래 적당한 위치 */
    left: 0; 
    width: 100%;    /* 부모 li 너비(20%)만큼만 꽉 차게 함 */
    display: none; 
    z-index: 1000;  /* 배경보다 위에 오도록 높게 설정 */
    padding: 10px 0; 
}

/* 3. 서브메뉴 내부 글자 간격 (가독성) */
nav ul.sub li {
    width: 100%;    /* 한 줄에 하나씩 나오게 함 */
}

nav ul.sub li a { 
    padding: 12px 0; /* 위아래 간격을 줘서 글자가 안 뭉치게 함 */
    display: block; 
    font-size: 16px; 
    color: #444; 
    transition: 0.2s;
    background: transparent; /* 배경색 겹침 방지 */
    transition: 0.3s ease, color 0.3s ease;
}
nav ul.sub li a:hover { 
    background: #004DA4;
    color: #fff;
}

/* 4. 전체 배경 레이어 (위치 조정) */
.nav_bg { 
    background: rgba(255, 255, 255, 0.98); /* 살짝 투명하게 하면 더 세련됨 */
    width: 100%;
    height: 350px;   /* 서브메뉴 중 가장 긴 메뉴 길이에 맞춤 */
    position: absolute;
    top: 0px;      /* 헤더 전체 높이에 맞춰서 수정 필요 */
    left: 0;
    z-index: 777;
    display: none;
    border-bottom: 1px solid #eee;
    box-shadow: 0 10px 15px rgba(0,0,0,0.03);
}
/* 배너--------------------------------------------------------------------- */
.banner { position: relative; width: 100%; overflow: hidden; }
    .banner img { width: 100%; display: block; filter: brightness(0.95);}

    .img_text { 
        position: absolute; top: 45%; left: 18%; 
        transform: translate(-50%, -50%);
        color: #ffffff; font-size: 4vw; font-weight: 700;
        z-index: 100;
    }
    .img_text span { color: #2449a6;}

    .img_text_2 {
        position: absolute; top: 54%; left: 18%; 
        transform: translate(-50%, -50%);
        color: #000; font-size: 1.2vw; font-weight: 400;
        z-index: 100;
    }

    /* 2. [핵심] 아까 보내드린 '선명해지는 효과'를 AOS용 커스텀 애니메이션으로 등록 */
    [data-aos="clear-fade-up"] {
        opacity: 0;
        filter: blur(8px); /* 처음엔 흐리게 */
        transform: translate(-50%, -40%); /* 살짝 아래에서 시작 */
        transition-property: transform, opacity, filter;
    }

    [data-aos="clear-fade-up"].aos-animate {
        opacity: 1;
        filter: blur(0); /* 선명하게 */
        transform: translate(-50%, -50%); /* 제자리로 */
    }

/* 메인--------------------------------------------------------------------------------- */

main { width: 100%;}
.contents_wrap_1 { width: 100%; margin-top: 100px; padding: 0 10%;}
.contents_wrap_2 { width: 100%; margin-top: 150px;}
.contents { width: 1400px; position: relative; margin: 0 auto;}

/* 아이콘-------------------------------------------------------------------------------- */

.icon_wrap { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}

.icon { 
    width: 16.666%; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 아이콘 기본 스타일 및 호버 효과 */
.icon span { 
    font-size: 3rem; 
    color: #444; 
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease; /* 부드러운 전환 */
}

/* 아이콘에 마우스 올렸을 때 */
.icon:hover span { 
    color: #2449a6; 
    transform: translateY(-5px) /* 위로 슥 올라가면서 살짝 커짐 */
}

.icon_text { 
    font-size: 16px; 
    padding-top: 15px; 
    font-weight: 500; 
    color: #333;
    transition: color 0.3s ease;
}

/* 텍스트도 같이 색상 변하게 */
.icon:hover .icon_text {
    color: #2449a6;
}

/* --- AOS 커스텀 애니메이션 (배너에서 쓴 것과 동일) --- */
[data-aos="clear-fade-up"] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px); /* 50% 위치 상관없이 아래에서 위로만 */
    transition-property: transform, opacity, filter;
}

[data-aos="clear-fade-up"].aos-animate {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* 진료---------------------------------------------------------------------------------- */

/* 1. 이미지 박스 레이아웃 */
.eye_box_wrap { 
    display: flex; 
    margin: 0 -25px; 
    padding: 40px 0; 
}

.eye_box { 
    width: 25%; 
    padding: 0 25px; 
    position: relative; 
    overflow: hidden; 
}

.eye { 
    width: 100%; 
    border-radius: 15px; 
    overflow: hidden;
    transition: box-shadow 0.5s ease; 
}

.eye img { 
    width: 100%; 
    display: block; 
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* 2. 텍스트 컨테이너 (평소 위치: 중앙보다 약간 아래 55%) */
.eye_text_wrap {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    transition: all 0.5s ease; /* 호버 시 올라오는 속도 */
}

/* 메인 타이틀 스타일 */
.eye_title {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 11px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    transition: font-size 0.4s ease;
}

/* 서브 텍스트(설명 문구) 스타일 */
.eye_desc {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    opacity: 0.8; /* 평소엔 살짝 은은하게 */
    transition: all 0.4s ease;
}

/* 3. 호버(Hover) 효과 합치기 */

/* 이미지가 커지면서 살짝 어두워짐 (글자 강조) */
.eye_box:hover .eye img { 
    transform: scale(1.1); 
    filter: brightness(0.7); 
}


/* [핵심] 텍스트가 중앙(50%)으로 슥 올라오고 선명해짐 */
.eye_box:hover .eye_text_wrap {
    top: 50%;
}

.eye_box:hover .eye_title {
    font-size: 33px; /* 타이틀 크기 살짝 키움 */
}

/* 4. AOS 애니메이션 설정 (나타날 때 효과) */
[data-aos="zoom-in-up"] {
    opacity: 0;
    transform: scale(0.9) translateY(50px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

[data-aos="zoom-in-up"].aos-animate {
    opacity: 1; 
    transform: scale(1) translateY(0);
}

/* 하단배너------------------------------------------------------------------------------------- */

.f_banner { height: 610px; position: relative; padding-bottom: 100px;}
.f_banner_text { 
    position: absolute; top: 25%; left: 30%; 
    font-size: 3.2vw;
    font-weight: 500;
    color: #000;
}
.f_banner_text span { color: #2449a6;}
.f_banner_sub_text { 
    position: absolute; top: 37%; left: 29%; 
    color: #000;
    font-size: 1.2vw;
    font-weight: 400;
}



/* 퀵예약------------------------------------------------------------ */

/* 의료진 섹션 바로 밑 여백 제거 및 위치 조정 */
.reserve_overlap_section {
    margin-top: -60px; /* 의료진 배너 위로 60px 만큼 올림 */
    position: relative;
    z-index: 10;
}

.reserve_floating_box {
    display: flex;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* 공중에 떠 있는 느낌의 그림자 */
    border-radius: 10px;
    overflow: hidden;
}

.reserve_item {
    flex: 1;
    padding: 40px 30px;
    text-align: center;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9fbff;
}


.reserve_item:last-child { border-right: none; }

.reserve_item p { font-size: 14px; color: #888; margin-bottom: 5px; }
.reserve_item h4 { font-size: 22px; color: #333; font-weight: 700; margin-bottom: 15px; }

/* 버튼 스타일 */
.go_btn {
    display: inline-block;
    padding: 7px 20px;
    border: 1px solid #ddd;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: 0.3s;
}

.go_btn:hover {
    background: #004DA4;
    color: #fff;
    border-color: #004DA4;
}


/* 진료시간 안내 칸 */
.reserve_item.info { background: #004DA4; color: #fff; }
.reserve_item.info h4 { color: #fff; margin-bottom: 10px; font-size: 20px; }
.reserve_item.info p { color: #c2d9ff; font-size: 14px; margin-bottom: 0px; }

/* 이벤트-------------------------------------------------------------------------------------- */

.event_box_wrap { 
    display: flex; 
    margin: 0 -30px; 
    justify-content: center; /* 중앙 정렬 보장 */
    padding: 50px 0;
}

.event { 
    padding: 0 30px; 
    flex: 1; /* 너비를 균등하게 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* 부드러운 가속도 */
}

.event img { 
    width: 100%; 
    display: block; 
    border-radius: 20px; /* 둥근 모서리로 부드러운 인상 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 기본 은은한 그림자 */
    transition: all 0.4s ease;
}

/* --- 호버 효과 --- */

.event:hover {
    transform: translateY(-15px); /* 위로 슥 올라감 */
}

.event:hover img {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); /* 그림자가 깊어지며 입체감 상승 */
    filter: brightness(1.05); /* 살짝 밝아지며 강조됨 */
}

/* 클릭하는 느낌을 주기 위한 액티브 효과 */
.event:active {
    transform: translateY(-5px) scale(0.98); /* 클릭 시 살짝 눌리는 느낌 */
}

/* 지도---------------------------------------------------------------------------------- */

.map_container { 
    display: flex; 
    background: #fff; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); 
}

.map_box { flex: 1.3; line-height: 0; }

.map_info { 
    flex: 1; 
    padding: 60px; 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

.map_inner_title { 
    font-size: 32px; 
    color: #2449a6; 
    font-weight: 600; 
    margin-bottom: 45px; 
    letter-spacing: -1px;
}

/* 개별 정보 아이템 */
.info_item { 
    display: flex; 
    margin-bottom: 30px; 
    align-items: center; /* 아이콘과 텍스트 수직 중앙 정렬 */
}
.info_item:last-child { margin-bottom: 0; }

/* 아이콘에 배경 박스 추가 */
.map_icon { 
    width: 54px; 
    height: 54px; 
    background: #f0f4ff; /* 연한 블루 배경 */
    color: #2449a6; 
    font-size: 22px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 12px; 
    margin-right: 20px;
    flex-shrink: 0; /* 아이콘 크기 고정 */
}

/* 텍스트 디자인 */
.map_text strong { 
    display: block; 
    font-size: 18px; 
    color: #000; /* 강조 컬러 */
    font-weight: 500; 
    margin-bottom: 4px; 
}

.map_text p { 
    font-size: 16px; 
    color: #666; 
    line-height: 1.4; 
    font-weight: 400;
}

/* 반응형 */
@media (max-width: 1024px) {
    .map_container { flex-direction: column; }
    .map_box { width: 100%; height: 350px; }
    .map_info { padding: 40px 30px; }
    .map_inner_title { font-size: 28px; margin-bottom: 30px; }
}

/* 풋터------------------------------------------------------------------------------------ */

footer { 
    width: 100%; 
    margin-top: 150px; 
    background: #222; /* 배경을 어둡게 변경 */
    padding: 60px 0 80px 0;
    color: #bbb;
}

.footer_inner { 
    width: 1200px; 
    margin: 0 auto; 
}

/* 상단 영역 */
.f_top { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 30px;
}

.f_logo img { height: 40px; filter: brightness(0) invert(1); } /* 로고를 흰색으로 반전 */

.sns a i { 
    color: #888; 
    font-size: 1.5rem; 
    margin-left: 20px; 
    transition: 0.3s; 
}
.sns a i:hover { color: #fff; transform: translateY(-3px); }

/* 구분선 */
.f_line { 
    border: none; 
    border-top: 1px solid #333; 
    margin-bottom: 40px; 
}

/* 중단 정보 레이아웃 */
.f_mid { 
    display: flex; 
    justify-content: space-between; 
}

.f_title { 
    color: #fff; 
    font-size: 18px; 
    font-weight: 700; 
    margin-bottom: 15px; 
}

address { 
    font-style: normal; 
    line-height: 1.8; 
    font-size: 14px; 
}

.copyright { 
    margin-top: 20px; 
    font-size: 13px; 
    color: #666; 
}

/* 퀵 링크 */
.f_links strong, .f_cs strong { 
    display: block; 
    color: #fff; 
    margin-bottom: 20px; 
    font-size: 16px; 
}

.f_links ul li { margin-bottom: 10px; }
.f_links ul li a { color: #888; text-decoration: none; font-size: 14px; transition: 0.3s; }
.f_links ul li a:hover { 
    color: #fff; 
    text-decoration: underline;
    /* 텍스트와 밑줄 사이의 간격 (숫자가 클수록 더 벌어짐) */
    text-underline-offset: 5px; 
    /* 밑줄의 두께도 조절 가능 */
    text-decoration-thickness: 1px;
}

/* 고객센터 */
.f_num { 
    font-size: 26px; 
    color: #fff; /* 병원 포인트 컬러 */
    font-weight: 700; 
    margin-bottom: 15px; 
}

.f_time { font-size: 13px; line-height: 1.6; color: #888; }

/* 모든 AOS 요소를 강제로 보이게 함 */
/* [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
} */