@import url(reset.css);

@font-face {
    font-family: 'SchoolSafetyPoster';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/HakgyoansimPosterB.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SchoolSafeTree';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimNamuL.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'SchoolSafeTree';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimNamuR.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'ChilchilgongBalsache';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/770Balsa.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BinggreIi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Ria';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tmon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yangjin';
    src: url('https://cdn.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

#wrap { width: 100%;}
header {position: absolute; width: 100%; background: rgba(0, 0, 0, 0); z-index: 10001;}
.header { position: relative; width: 1400px; margin: 0 auto; display: flex;}

main { width: 100%;}
.contents_wrap_1 { width: 100%; margin-top: 100px; padding: 0 5%;}
.contents_wrap_2 { width: 100%; margin-top: 150px;}
.contents_wrap_3 { width: 100%; margin-top: 160px;}

.contents { position: relative; width: 1200px; margin: 0 auto;}

.sub_title {
    width: 100%;
    text-align: center;
    color: #6a9ccf;
    font-family: 'SchoolSafetyPoster';
    font-size: 50px;
}
.sub_text { width: 100%; text-align: center; font-size: 16px; padding: 20px 0 70px 0;}

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

h1 { width: 30%; padding: 55px 0 18px 12px;}
h1 img { width: 21%;}

nav { width: 70%; }
nav > ul.gnb { margin-top: 80px; display: flex; justify-content: space-around;}
nav > ul.gnb > li { position: relative; width: 20%; text-align: center; }

nav > ul.gnb > li > a { 
    font-size: 18px; 
    color: #fff; 
    font-weight: 500; 
    display: block; 
    padding: 10px 0;
    transition: all 0.3s ease; /* 호버 시 색상이 스르륵 변하게 하는 필수 애니메이션 */
}

nav > ul.gnb > li:hover > a { 
    color: #122a44; /* 쌩블랙(#000) 대신 옅은 하늘색 배경에 어울리는 세련된 딥블루 */
    background: rgba(255, 255, 255, 0.25); /* 서브메뉴랑 똑같은 얼음 질감 투명 배경 */
    backdrop-filter: blur(4px); /* 뒤쪽 배경을 살짝 흐리게 처리 */
}
nav ul.sub { 
    position: absolute; 
    top: 44px; 
    left: 0; 
    z-index: 888; 
    width: 100%; 
    display: none; 
    
    /* 🧊 투명한 얼음/유리 질감 핵심 코드 */
    background: rgba(255, 255, 255, 0.25); /* 흰색을 25%만 남기고 투명하게 */
    backdrop-filter: blur(8px); /* 뒤에 있는 하늘색 배경을 뽀얗게 흐림 처리 */
    -webkit-backdrop-filter: blur(8px); /* 사파리 브라우저 호환용 */

    border-top: none; /* 메인 메뉴와 닿는 위쪽 테두리는 제거 */

}

nav ul.sub li { 
    text-align: center; 
}

nav ul.sub li a { 
    padding: 12px 10px; 
    display: block; 
    color: #333; /* 투명한 배경 위에서도 글씨가 잘 보이도록 짙은 색 유지 */
    font-weight: 500;
    transition: all 0.2s ease;
}

nav ul.sub li a:hover { 
    background: rgba(255, 255, 255, 0.4); /* 마우스를 올리면 살짝 더 불투명해지며 강조 */
    color: #000; 
}
.toggle { display: none;}

.top_menu { position: absolute; top: 20px; right: 20px; display: flex;} 
.top_menu li {padding: 0 12px; color: #fff; }
.top_menu li a { font-size: 12px; color: #fff;}
.top_menu li a:hover { color: #000;}


/* 헤더 반응형----------------------------------------------------------------- */

@media (max-width:1220px){
    .header { width: 100%;}
    h1 { padding: 55px 0 15px 20px;}
    h1 img { width: 40%;}
}

@media (max-width:768px){
    .header { flex-wrap: wrap;}
    h1 { width: 100%; padding: 30px 0 15px 20px;}
    h1 img { width: 10%;}
    nav { display: none;}
    .top_menu { display: none;}
    .toggle { display: block; position: absolute; top: 30px; right: 14px; }
    .toggle a i { font-size: 1.5rem; color: #999; }

    /* nav { width: 100%;}
    nav > ul.gnb { justify-content: space-around; margin-top: 0; background: #6a9ccf;}
    nav > ul.gnb > li { width: 20%; text-align: center; padding: 10px 0;}
    nav > ul.gnb > li > a { font-size: 16px; color: #fff; font-weight: 400; }
    nav > ul.gnb > li:hover > a { color: #000;}
    nav ul.sub {top: 44px;}
    nav ul.sub li a:hover { background: #6a9ccf; color: #fff; }

    .top_menu { top: 40px; right: 20px;} 
    .top_menu li {padding: 0 8px; }
    .top_menu li a { font-size: 12px; } */
}

@media (max-width:480px){
    h1 { padding: 20px 0 15px 20px;}
    h1 img { width: 18%;}
    .top_menu { display: none;}
    nav ul.gnb { display: none;}
    .toggle { display: block; position: absolute; top: 30px; right: 14px; }
    .toggle i { font-size: 1.5rem; color: #999;}
}

/* 배너------------------------------------------------------------------ */

.banner { position: relative; width: 100%; overflow: hidden;}
.banner_480 { position: relative; width: 100%; overflow: hidden; display: none;}

.banner_text {
    position: absolute;
    top: 36%; left: 48%;
    color: #fff;
    font-size: 4vw;
    font-family: 'SchoolSafetyPoster';
    line-height: 5.1vw;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.banner_text_1 { color: #a9cff8;}

.baner_sub_text { 
    position: absolute;
    top: 58%; left: 48.5%;
    font-size: 1vw;
    color: #fff;
    line-height: 1.5vw;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}


#canv { position: absolute; z-index: 10000;}


/* 배너 반응형------------------------------------------------------------------ */

@media (max-width:768px){
    .banner_text { width: 100%; font-size: 4vw; line-height: 5.3vw; top: 44%; left: 97%;}
    .baner_sub_text { width: 100%; font-size: 1.2vw; line-height:  2vw; top: 63%; left: 97% }
}

@media (max-width:480px){
    .banner { display: none;}
    .banner_480 { display: block;}
    .banner_text { width: 100%; font-size: 6.5vw; line-height: 7.8vw; top: 80%; left: 90%;}
    .baner_sub_text { width: 100%; font-size: 1.8vw; line-height:  3vw; top: 87%; left: 91% }
}


/* 아이콘--------------------------------------------------------------------------------- */
.icon_wrap { display: flex; }
.icon { 
    width: 14.285%; 
    text-align: center; 
    cursor: pointer; 
    perspective: 1000px; /* 🌟 3D 효과를 위한 원근감 설정 (필수) */
}

.icon span { 
    font-size: 2.5rem; 
    color: #777;
    display: inline-block; /* 회전하려면 인라인 블록이어야 함 */
    transition: transform 0.6s ease, color 0.3s ease; /* 0.6초 동안 부드럽게 돎 */
    transform-style: preserve-3d;
}

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

/* 🌟 마우스 올렸을 때: 180도 뒤집어지며 파란색으로 변함 */
.icon:hover span { 
    transform: rotateY(180deg); 
    color: #000; 
}

.icon:hover .icon_text { 
    color: #000; 
}
/* 아이콘 반응형------------------------------------------------------------------- */

@media (max-width:768px){
    .contents_wrap_1 { margin-top: 60px; padding: 0 5%;}
    .icon span { font-size: 2rem; color: #777;}
    .icon span:hover { color: #000;}
    .icon_text { font-size: 14px; padding-top: 10px;}
}

@media (max-width:480px){
    .contents_wrap_1 { margin-top: 40px; padding: 0 5%;}
    .icon { width: 20%; text-align: center; }
    .icon_text { font-size: 12px; padding-top: 6px;}
    .view_x { display: none;}
}



/* 갤러리------------------------------------------------------------------------------- */
/* 갤러리 전체 영역 */
.gallery_wrap { 
    width: 100%; 
    margin-top: 0px; 
}

/* 개별 갤러리 (폴라로이드 하얀 액자 프레임) */
.gallery { 
    position: relative; 
    background: #fff; /* 하얀색 액자 틀 */
    padding: 10px; /* 액자 테두리 두께 */
    margin: 0 15px; 
    border-radius: 12px; /* 액자 겉 모서리 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); /* 고급스러운 그림자 */
}

/* 🛠️ 사진이 확대될 때 하얀 액자 틀을 덮지 못하게 가두는 역할 */
.gallery a {
    display: block;
    overflow: hidden;
    border-radius: 5px; /* 사진 안쪽 모서리 */
}

/* 갤러리 이미지 */
.gallery img { 
    width: 100%; 
    height: 400px; 
    object-fit: cover; 
    display: block; 
    transition: all 0.8s ease;
}

/* 🌟 핵심 해결 포인트: 투명도(opacity) 대신 밝기(brightness) 낮추기! */
.gallery:hover img { 
    transform: scale(1.08); 
    filter: brightness(0.3); /* 사진 자체를 어둡게 만들어서 흰 글씨가 확 튀게 함 */
}


/* --- 텍스트 스타일 (액자 안에서 예쁘게 보이도록 위치 조정) --- */
.gallery * { transition: all 0.8s ease; }

/* 큰 제목 */
.gallery_text_1 {
    position: absolute;
    top: 20%; /* 하얀 액자 틀을 고려해서 위치를 살짝 내림 */
    left: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    z-index: 10;
    transform: translateY(0);
    opacity: 0;
    pointer-events: none; /* 마우스 호버 시 글씨 때문에 덜덜거리는 현상 방지 */
}

/* 작은 설명 */
.gallery_text_2 {
    position: absolute;
    top: 30%; 
    left: 0;
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 100%;
    z-index: 10;
    transform: translateY(0);
    opacity: 0;
    pointer-events: none;
}

/* 호버 시 텍스트 스르륵 나타남 */
.gallery:hover .gallery_text_1 {
    transform: translateY(40px);
    opacity: 1;
}

.gallery:hover .gallery_text_2 {
    transform: translateY(50px);
    opacity: 1;
}



.bx-wrapper .bx-pager {
    position: absolute !important;
    bottom: -50px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 9999 !important;
}

.bx-wrapper .bx-pager .bx-pager-item {
    display: inline-block !important;
    margin: 0 10px !important;
}

/* 2. 기존 숫자 완벽하게 투명화 시키기 */
.bx-wrapper .bx-pager .bx-pager-item a {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important; 
    
    /* 숫자를 화면에서 증발시키는 코드 */
    font-size: 0 !important; 
    color: transparent !important; 
    text-indent: 0 !important; /* 밖으로 날리지 않고 제자리에 둡니다 */
}

/* 3. 처음에 성공했던 '유니코드 눈꽃' 소환 */
.bx-wrapper .bx-pager .bx-pager-item a::before {
    content: '\2744' !important; /* 처음에 떴던 그 눈꽃 기호 */
    font-size: 18px !important; /* 눈꽃 크기 부활 */
    color: #cbd5e1 !important; /* 연한 얼음 회색 */
    display: block !important;
    line-height: 24px !important; /* 정중앙 정렬 */
    transition: all 0.3s ease !important;
}

/* 4. 활성화된 슬라이드 & 호버 시: 눈꽃이 스르륵 커지며 파란색으로 변함! */
.bx-wrapper .bx-pager .bx-pager-item a.active::before,
.bx-wrapper .bx-pager .bx-pager-item a:hover::before {
    color: #a9cff8 !important; /* 쨍한 포인트 스카이블루 */
    transform: scale(1.6) !important; /* 1.6배로 예쁘게 커짐 */
}
/* 갤러리 반응형------------------------------------------------------------------- */

@media (max-width:768px){
    .contents_wrap_2 { margin-top: 70px; }
    .sub_title {font-size: 40px;}
    .sub_text { font-size: 16px; padding: 10px 0 50px 0;}
    /* .gallery_wrap { flex-wrap: wrap; padding: 0 5%; } */

}

@media (max-width:480px){
    .contents_wrap_2 { width: 100%; margin-top: 50px; }
    .sub_title {font-size: 26px;}
    .sub_text { font-size: 12px; padding: 0 0 16px 0;}
}



/* 이벤트------------------------------------------------------------------------------------- */
.event_wrap { margin: 0 -15px; display: flex;}
.event_wrap::after { display: table; content: ''; clear: both;}
.event_box_wrap { width: 33.333%; padding: 0 15px;}
.event_box_wrap img { width: 100%;}
.event { position: relative;}

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}



/* 이벤트 반응형------------------------------------------------------------------------ */

@media (max-width:1220px){
    .contents { width: 100%; padding: 0 5%;}
    .event_wrap { margin: 0;}
    
}

@media (max-width:768px){
    .event_wrap { flex-wrap: wrap;}
    .event_box_wrap { width: 50%;}
    .view_x_event { display: none;}
}


@media (max-width:480px){
    .event_box_wrap { width: 50%; padding: 0 7px;}
}



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

.f_banner { position: relative; width: 100%; overflow: hidden; }
.f_banner img { width: 100%; display: block; object-fit: cover; }
.f_banner #canv2 { /* ID 맞춤 */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 5; /* 텍스트보다는 아래, 이미지보다는 위 */
}

/* 1. 메인 타이틀 (크기/위치 유지, 정렬 방식만 변경) */
.f_banner_title {
    position: absolute; 
    top: 38%; /* 잡아주신 위치 */
    left: 0; 
    width: 100%; /* transform 없이 가로 꽉 채워서 글씨를 정중앙에 고정! */
    text-align: center; 
    font-size: 2.8vw; /* 잡아주신 크기 */
    font-family: 'SchoolSafetyPoster';
    color: #ffffff; 
    white-space: nowrap;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* 2. 서브 텍스트 */

.f_text_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 눈 내리는 캔버스보다 위에 오게 설정 */
}

.f_banner_text {
    position: absolute; 
    top: 54%; /* 잡아주신 위치 */
    left: 0; 
    width: 100%; 
    text-align: center; 
    font-size: 1.5vw; /* 잡아주신 크기 */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

/* 3. 버튼 박스 */
.f_more {
    position: absolute; 
    top: 75%; /* 잡아주신 위치 */
    left: 0; 
    width: 100%; 
    text-align: center;
}

/* 버튼 디자인 (기존 설정 유지) */
.f_more a { 
    display: inline-block;
    border: 2px solid #ffffff;
    font-size: 1vw; 
    font-weight: 600;
    padding: 12px 35px;
    color: #ffffff; 
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 호버 시 부드럽게 위로 까딱! */
.f_more a:hover { 
    background: #ffffff;
    color: #72a1cd;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

/* 하단배너 반응형-------------------------------------------------------------------------------- */

@media (max-width:768px){
    .contents_wrap_3 { margin-top: 70px;}
    .f_banner img { height: 205px;}
    .f_banner_title {font-size: 3.2vw; top: 35%;}
    .f_banner_text { top: 58%; left: 50%; font-size: 1.8vw; top: 54%;}
    .f_more { top: 65%;}
    .f_more a { font-size: 1.4vw; padding: 7px 20px;}
}

@media (max-width:480px){
    .contents_wrap_3 { margin-top: 50px;}
    .f_banner img { height: 110px;}
    .f_banner_title {font-size: 3.5vw; top: 35%;}
    .f_banner_text { top: 50%; left: 50%; font-size: 2vw; ;}
    .f_more { top: 52%;}
    .f_more a { font-size: 1.5vw; padding: 4px 8px; border: 1px solid rgb(255, 255, 255); }
}

/* 프로그램-------------------------------------------------------------------------------------- */

/* 전체 컨테이너: 리스트 사이의 구분선을 강조 */
.program_wrap {
    display: flex;
    flex-direction: column;
    border-top: 2px solid #ddd; /* 박물관 스타일의 굵은 상단선 */
}

/* 각 프로그램 박스: 하단 보더만 사용해 목록화 */
.program_box_wrap {
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #ddd;
    gap: 40px;
}

/* 이미지: 박물관 도록 느낌으로 정사각 또는 정해진 비율 유지 */
.program img {
    width: 320px; 
    height: 230px;
    border-radius: 0; /* 곡률을 없애거나 아주 살짝(4px)만 주어 신뢰감 강조 */
    object-fit: cover;
}

/* 텍스트 상자: 여백 정리 */
.program_text_box {
    flex: 1;
    border: none; /* 기존 테두리 제거 */
    padding: 0;
    cursor: default;
}

/* 제목: 굵고 명확하게 */
.program_text a {
    font-size: 1.6rem; 
    font-weight: 600;
    color: #111;
    letter-spacing: -0.05rem;
    text-decoration: none;
}

/* 설명문: 명조 계열이나 차분한 고딕 */
.program_sub_text {
    font-size: 1rem;
    color: #555;
    margin: 12px 0 20px 0;
    line-height: 1.6;
}

/* 상세 정보: 불릿 기호 대신 항목 이름을 강조하는 스타일 */
.program_info {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.program_info li {
    font-size: 0.9rem;
    color: #333;
    list-style: none;
    padding-left: 0;
}

/* 정보 앞에 작은 바(|)를 넣어 구분 */
.program_info li + li::before {
    content: "|";
    margin-right: 20px;
    color: #ccc;
}

/* 버튼: 박물관 특유의 절제된 스타일 */
.p_more a {
    display: inline-block;
    border: 1px solid #222;
    background: #fff;
    color: #222;
    font-size: 0.85rem;
    padding: 7px 23px;
    transition: all 0.3s;
    text-decoration: none;
}

.p_more a:hover {
    border: 1px solid #72a1cd;
    background: #72a1cd;
    color: #fff;
}
/* 프로그램 반응형----------------------------------------------------------------------------- */

@media (max-width:768px){
    .program img { width: 300px; height: 260px; }
    .program_text_box { padding: 18px 20px; box-sizing: border-box;}
    .program_text a { font-size: 2.5vw; }
    .program_sub_text { font-size: 1.9vw; margin: 5px 0 25px 0;}
    .program_info li { font-size: 1.7vw; line-height: 2.5vw; margin-top: 3px; }
    .p_more a { border: 1px solid #aaa; border-radius: 15px; font-size: 1.3vw; padding: 7px 13px;}
    
}

@media (max-width:480px){
    .program_box_wrap { flex-direction: column; gap: 12px; align-items: center;}
    .program { width: min(92%,420px);}
    .program a { display: block;}
    .program img { width: 100%; height: clamp(160px, 40vw, 220px); object-fit: cover; border-radius: 15px; display: block;}
    .program_text_box { width: min(92%,420px); padding: 14px 14px;}
    .program_text a { font-size: 18px; }
    .program_sub_text { font-size: 14px; margin: 5px 0 15px 0;}
    .program_info { margin: 0 0 15px 0;}
    .program_info li { font-size: 12px; line-height: 18px }
    .p_more a { border: 1px solid #aaa; border-radius: 15px; font-size: 8px; padding: 7px 13px;}
}


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

footer { 
    width: 100%; 
    margin-top: 150px; 
    background: #222; /* 배경을 어둡게 하면 훨씬 전문적으로 보입니다 */
    padding: 60px 0; 
    color: #aaa;
}

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

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

.f_links a {
    color: #eee;
    text-decoration: none;
    font-size: 15px;
    margin-right: 25px;
}

.sns a i { font-size: 1.8rem; color: #888; transition: 0.3s; padding: 0 5px; }
.sns a i:hover { color: #fff; }

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

/* 하단 영역 */
.footer_bottom {
    display: flex;
    align-items: flex-start;
    padding-top: 40px;
    gap: 50px;
}

.f_logo img { 
    width: 100%; 
    opacity: 0.7;
}

.f_info_wrap { flex: 1; }

.copy { 
    padding: 0; 
    font-size: 14px; 
    line-height: 1.8; 
    color: #999; 
}

/* 주소 단독 행 스타일 */
.f_addr { margin-bottom: 5px; }

/* 연락처 정보 나열 */
.f_contact span { 
    display: inline-block; 
    margin-right: 25px; 
}

/* 영문 라벨(ADDRESS, TEL 등) 스타일 */
.copy b { 
    display: inline-block;
    color: #fff; /* 라벨을 밝게 해서 정보를 구분 */
    font-size: 12px; /* 라벨은 살짝 작게 하면 세련돼 보여요 */
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 10px;
}

.copyright { 
    margin-top: 20px; 
    font-size: 12px; 
    color: #666; 
    letter-spacing: 0.5px;
}

/* 패밀리 사이트 셀렉트박스 */
.family_site select {
    background: #333;
    color: #ccc;
    border: 1px solid #444;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}


/* 풋터 반응형---------------------------------------------------------------------------------------------------- */

@media(max-width:1220px){
    .footer { width: 100%; padding: 0 5%; }
}

@media(max-width:900px){
    .footer { flex-wrap: wrap;}
    .f_logo { width: 100%;}
    .copy { padding: 15px 0 0 0;}
    .sns { padding-top: 10px;}
    .sns a { padding: 0px 0;}
}

@media(max-width:768px){
    footer { margin-top: 70px; padding: 50px 0 70px 0; }
    .f_logo img { width: 12%;}
    .sns a i { font-size: 1.5rem;}
}

@media(max-width:480px){
    footer { margin-top: 50px; padding: 40px 0 50px 0; }
    .f_logo img { width: 20%;}
    .copy { font-size: 12px; line-height: 18px; padding: 12px 0 0 0;}
    .sns { display: none;}
}