@import url(reset.css);


.black-han-sans-regular {
  font-family: "Black Han Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@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: 'OngleIpSeaBreeze';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2510-1@1.0/Ownglyph_the_sea_breeze-Rg.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

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

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
#wrap { width: 100%;}

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

header {width: 100%; position: absolute; top: 0; left: 0; z-index: 999; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.header { position: relative; width: 1500px; margin: 0 auto; display: flex;}

h1 { width: 10%; padding: 30px 0 28px 0;  z-index: 999; }
h1 img { width: 72%;}
nav { width: 50%;  z-index: 999;}
nav > ul.gnb { display: flex; justify-content: space-around; margin-top: 38px; }
nav > ul.gnb > li { width: 25%; text-align: center; position: relative; overflow: visible; height: 60px; }
nav > ul.gnb > li > a { font-size: 20px; color: #5e2818; font-weight: 600; padding: 10px 0; display: block; transition: transform 0.3s ease; display: inline-block; /* 중요 */}
/* 네비밑부분에 마우스 좀만 내리면 서브 사라지는거 맞추기-패딩주기-패딩 안먹을때 디스플레이 블럭 */




nav ul.sub { position: absolute; top: 58px; left: 0; width: 100%; display: none; z-index: 2; }
/* width 100프로는 서브위치를 네비중앙으로 들어오게 맞출때 */
nav ul.sub li a { padding: 15px 0; display: block; font-size: 17px; color: #000; }
/* 패딩 안먹을때 디스플레이 블럭 */

/* 메인 메뉴 글자색 변경 */
nav > ul.gnb > li:hover > a {
    color: #ffae00; /* 배너의 '코코베에서'와 같은 오렌지 골드 */
    transform: scale(1.05); /* 살짝 커지는 느낌 */
}

/* 서브 메뉴 호버 시 왼쪽 포인트 바 생성 */
nav ul.sub li a:hover {
    background-color: #fff9f0;
    border-left: 4px solid #ffae00; /* 왼쪽에 오렌지색 선 포인트 */
    color: #5e2818;
}

.top_menu { 
    width: 40%; 
    position: absolute; 
    top: 52px; 
    right: 0; 
    display: flex; 
    justify-content: flex-end; 
    z-index: 999; 
}
.top_menu li { padding: 0 10px; color: #794f32; font-size: 20px; list-style: none; }
.top_menu li a span { font-size: 22px; color: #5e2818; }
.top_menu li a span:hover { color: #000000; }



.nav_bg { 
    /* background: rgba(0, 0, 0, 0.1); */
    background: #fff;
    width: 100%;
    /* height: 288px; */
    height: 280px;
    position: absolute;
    top: 0; 
    left: 0;
    z-index: 777;
    display: none;
}

.toggle { display: none;}

/* 스크롤 내려도 헤더 고정-------------------------------------------------------------------------- */

.fixed-header {
    /* background: rgba(255, 255, 255, 1); */
    background: #fff;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 105px;
    animation: slids-down 0.5s;
    z-index: 9999;
    border-bottom: 1px solid #683d1e;
}

@keyframes slids-down {
    0% {transform: translateY(-100%); opacity: 0.3%;}
    100% { transform: translateY(0%);}
}
/* 토글메뉴------------------------------------------------------------------------------------- */
.top_link { position: absolute; top: 20px; right: 20px; display: flex;}
.top_link li {padding: 0 10px;}
.top_link li a span { font-size: 1.5rem; }


.toplink_480 { 
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.toplink_480 li { color: #fff; padding: 0 5px;}
.toplink_480 li a { font-size: 14px; color: #fff; }

.nav_480 { 
    background: #55321f;
    width: 0;
    height: 100%;
    position: fixed; top: 0; right: 0;
    z-index: 100000;
    overflow-x: hidden;
    transition: 0.3s;
}

.nav_480.open {width: 100%;}


.close_btn {
    position: absolute; top: 10px; right: 10px;
}
.close_btn a i { color: #fff; font-size: 26px;}

.menu { 
    width: 100%;
    max-width: 480px;
    margin: 50px 0;
}

.gnb_480 { 
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    padding: 15px 0 10px 40px;
    border-bottom: 1px solid #794f32;
    transition: all 0.4s ease;
    display: block;
}

.sub_480 { 
    background: #fff;
    display: none;

}
.sub_480 li a {
    color: #777;
    padding: 10px 50px 10px 50px;
    display: block;
    transition: all 0.4s ease-out;
}

.sns_480 { 
    position: absolute; bottom: 5%; left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%;
    text-align: center;
    max-width: 480px;
}
.sns_480 a i { color: #fff; font-size: 24px; margin: 0 7px;}

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

@media (max-width:1200px){
    /* .header { width: 100%;} */
    header { border-bottom: none;}
    .header {width: 100%; padding: 0 10%;}
    h1 { padding: 50px 0 20px 20px;}
    h1 img { width: 38%;}
    nav > ul.gnb {margin-top: 60px;}
    .fixed-header { display: none;}
}

@media (max-width:960px){
    .header {width: 100%; padding: 0 10%;}
    h1 { padding: 50px 0 20px 0;}
    h1 img { width: 45%;}
    nav > ul.gnb { margin-top: 55px;}
    nav > ul.gnb > li > a { font-size: 18px; }
}

@media (max-width:768px){
    h1 { width: 100%; padding-top: 24px;}
    h1 img { width: 25%;}
    nav > ul.gnb { display: none;}
    .toggle {
        display: block; 
        position: absolute; top: 34px; right: 40px;
    }
    .toggle a i { font-size: 25px; color: #683d1e;}
    .nav_480.open {width: 50%;}
    .top_menu { display: none;}
}

@media (max-width:480px){
    h1 {padding-top: 10px;}
    h1 img { width: 40%;}
    .toggle {top: 22px; right: 10px;}
    .toggle a i { font-size: 22px;}
    /* .close_btn { top: 15px; right: 40px; } */
    .nav_480.open {width: 100%;}
    .toplink_480 { justify-content: left; margin: 0 0 40px 40px ;
}
}


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

.banner { width: 100%; position: relative;}
.banner_480 { display: none;}
.banner_text_1 { position: absolute; top: 62%; right: 8%; font-size: 2.4vw;  font-family: 'Pretendard'; font-weight: 800; color: #683d1e;}
.banner_text_2 { position: absolute; top: 71%; right: 10%; font-size: 2.5vw; line-height: 3.2vw; font-family: 'Pretendard';  font-weight: 800; color: #683d1e; }
.banner_text_1 span { color: #ffae00; }

.banner_text_3 { position: absolute; top: 46%; right: 35%; font-size: 1.4vw; line-height: 3.2vw; font-family: 'Pretendard';  font-weight: 800; color: #ffae00;}
.banner_text_3 span { color: #683d1e; }




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

@media (max-width:1200px){
    .banner_text_1 {}
    .banner_text_2 {}
}

@media (max-width:768px){
    .banner_text_1 {top: 80%; font-size: 2vw;}
    .banner_text_2 { font-size: 4vw; top: 63%; }
    .banner_text_3 { font-size: 4vw; top: 73.5%; }
}

@media (max-width:480px){
    .banner { display: none;}
    header { position: static; background: #ffae00;}
    .toggle { top: 22px; right: 10px; }
    .toggle i { font-size: 20px; }
    h1 { padding: 10px 0 12px 0;}
    h1 img { width: 38%;}
    h1 img {
        content: url('../images/logo.png');
    }
}


/* 서브메뉴-------------------------------------------------------------------------------- */

main { width: 100%;}

.sub_menu_wrap { 
    width: 100%;
    border-bottom: 2px solid #e4d9ca;
}

/* 서브메뉴 안쪽 이너: 1500px 고정 및 가운데 정렬 */
.sub_menu_wrap .inner { 
    width: 100%; 
    max-width: 1500px; 
    margin: 0 auto; 
    padding: 0 40px; /* 창이 좁아질 때 여백 방어 */
    box-sizing: border-box; 
    /* 패딩이나 높이값이 필요하다면 여기에 추가해 주세요 */
}

.sub_menu { display: flex; height: 60px; }
.sub_menu li { line-height: 60px;}
.sub_menu li.active { background: #f8f1e7;}
.sub_menu li a { font-size: 18px; font-weight: 500; padding: 0 30px; display: block; color: #683d1e;}
.sub_menu li a:hover { background: #f8f1e7; }




/* 서브메뉴 반응형------------------------------------------------------------------------------------ */

@media (max-width:768px){
    .sub_menu { height: 40px;}
    .sub_menu li { line-height: 40px;}
    .sub_menu li a { font-size: 16px;}
    .title_box { margin-bottom: 70px;}
}

@media (max-width:480px){
    .sub_menu { height: 36px;}
    .sub_menu_wrap { padding: 0 5%;}
    .sub_menu li { line-height: 36px;}
    .sub_menu li a { font-size: 14px; padding: 0 20px; }
}

/* 틀 ---------------------------------------------------------------- */
.section_wrap { 
    width: 100%; 
    padding: 90px 0; 
}

.inner { 
    width: 100%; 
    max-width: 1500px; 
    margin: 0 auto; 
    padding: 0 40px; 
    box-sizing: border-box; 
}


/* [공통 타이틀 & 구분선] ------------------------------------------------------ */
.title_box { 
    width: 100%; 
    text-align: center; 
    margin-bottom: 90px; /* 보더와의 간격 */
}

.sub_title { 
    font-size: 60px; 
    font-family: 'Pretendard'; 
    font-weight: 500; 
    color: #1f120e; 
}

/* ★ 모든 탭 공통: 제목 아래 구분선 */
.content_box, .story_content_area { 
    width: 100%; 
    border-top: 1px solid rgba(43, 36, 31, 0.1); 
    padding-top: 80px; /* 보더 아래 컨텐츠와의 간격 */
}

/* 인사말(CEO) 스타일 --------------------------------------------------------- */
.ceo_flex_box { 
    display: flex; 
    align-items: flex-start; 
}

.ceo_text_box { width: 70%; padding-right: 5%; box-sizing: border-box; }
.ceo_text { font-size: 18px; line-height: 1.7; text-align: justify; color: #333; }
.ceo_text span { font-size: 26px; color: #683d1e; font-weight: 600; }

.ceo_img_box { width: 30%; text-align: center; }
.ceo_img { width: 100%; overflow: hidden; border-radius: 20px; }
.ceo_img img { width: 100%; display: block; }

.ceo_name { font-size: 18px; padding-top: 30px; color: #555; }
.ceo_name span { 
    font-size: 38px; 
    color: #000; 
    padding-left: 15px; 
    font-family: 'OngleIpSeaBreeze'; 
    vertical-align: middle;
}

/* 스토리 스타일 ------------------------------------------------------------- */
.story_group { padding: 80px 0; }
.story_group:first-child { padding-top: 0; } /* 첫 그룹은 상단 패딩 제거 */
.story_group + .story_group { border-top: 1px solid rgba(43, 36, 31, 0.1); margin-top: 40px; }

.story_label { margin-bottom: 18px; font-size: 18px; font-weight: 700; letter-spacing: 0.16em; color: #8b6d57; }
.story_headline { font-size: 42px; font-weight: 600; line-height: 1.35; color: #2b241f; word-break: keep-all; margin-bottom: 30px; }
.story_desc { max-width: 850px; margin-bottom: 56px; }
.story_desc p { font-size: 18px; line-height: 1.7; color: #5b514a; word-break: keep-all; }
.story_desc span { font-size: 23px; font-weight: 700; color: #683d1e; }

/* 카드 그리드 */
.story_card_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.story_card { background: #ffffff; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 30px rgba(43, 36, 31, 0.06); transition: all 0.35s ease; }
.story_card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(43, 36, 31, 0.12); }
.story_card_img { width: 100%; aspect-ratio: 15 / 11; overflow: hidden; background: #ece4d9; }
.story_card_img img { width: 100%; height: 100%; object-fit: cover; transition: 0.45s; }
.story_card:hover .story_card_img img { transform: scale(1.04); }
.story_card_text { padding: 30px; }
.story_card_title { margin-bottom: 12px; font-size: 23px; font-weight: 700; color: #2b241f; }
.story_card_sub { font-size: 17px; line-height: 1.6; color: #5b514a; word-break: keep-all; }

/* [반응형 통합] -------------------------------------------------------------- */
@media (max-width: 1024px) {
    .section_wrap { padding: 100px 0; }
    .sub_title { font-size: 50px; }
}

@media (max-width: 768px) {
    .inner { padding: 0 25px; }
    .title_box { margin-bottom: 60px; }
    .sub_title { font-size: 40px; }
    
    /* 인사말 반응형 */
    .ceo_flex_box { flex-direction: column; padding-top: 50px; }
    .ceo_text_box { width: 100%; padding-right: 0; }
    .ceo_text { font-size: 16px; margin-bottom: 40px; }
    .ceo_img_box { width: 100%; }
    
    /* 스토리 반응형 */
    .story_headline { font-size: 30px; }
    .story_card_grid { grid-template-columns: 1fr; } /* 모바일 카드 1열 */
}

@media (max-width: 480px) {
    .sub_title { font-size: 32px; }
    .ceo_text span { font-size: 18px; }
    .ceo_name span { font-size: 28px; }
    .story_headline { font-size: 24px; }
}


/* 오시는길---------------------------------------------------------------------- */
/* 오시는 길 컨텐츠 영역 상단 구분선 (제목 바로 아래) */
.map_content_area { 
    width: 100%; 
    border-top: 1px solid rgba(43, 36, 31, 0.1); 
    padding-top: 80px;
}

/* 지도 그룹 공통 스타일 */
.map_group {
    display: flex;
    gap: 50px;
    padding: 80px 0; /* 위아래 간격을 동일하게 */
    align-items: stretch; /* 지도와 텍스트 박스 높이 일치 */
}

/* ★ 지도와 지도 사이의 중간 보더 */
.map_group + .map_group {
    border-top: 1px solid rgba(43, 36, 31, 0.1);
}

/* 첫 번째 그룹은 상단 패딩 제거해서 메인 보더에 딱 붙게 */
.map_group:first-child { padding-top: 0; }
/* 마지막 그룹 하단 여백 제거 */
.map_group:last-child { padding-bottom: 0; }

/* 지도 영역 */
.map_view_box {
    width: 60%;
    height: 300px; /* 수현 님 설정값 유지 */
    background: #eee;
    border-radius: 15px;
    overflow: hidden;
}

/* 정보 영역 */
.map_info_box {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px; /* ★ 타이틀 선 자리 확보 */
}

.map_label {
    font-size: 28px;
    font-weight: 700;
    color: #683d1e;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.info_item { margin-bottom: 30px; }
.info_item:last-child { margin-bottom: 0; }

/* [★ 짧은 세로줄 포인트 추가] 타이틀 스타일 */
.info_title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #8b6d57;
    margin-bottom: 8px;
    position: relative; /* ★ 기준점 잡아주기 */
    padding-left: 15px; /* ★ 선과 글자 사이 여백 */
}

/* ★ 타이틀 왼쪽 짧은 세로줄 ::before */
.info_title::before {
    content: '';
    position: absolute;
    left: 0; 
    top: 5px; /* 선의 세로 위치 조정 */
    width: 2px; /* 선의 굵기 */
    height: 12px; /* 선의 세로 길이 (짧게) */
    background: #d4c4b7; /* 선의 색상 */
    border-radius: 2px;
}

.info_desc {
    font-size: 17px;
    line-height: 1.6;
    color: #333;
    word-break: keep-all;
    padding-left: 15px; /* ★ 선 아래 텍스트도 정렬 맞추기 */
}


/* 오시는길 반응형------------------------------------------------------------ */


@media (max-width:1024px){
.content_box_2{flex-direction:column;padding:20px;}
.map_left_box{width:100%;height:320px;padding:0;}
.map_right_box{width:100%;margin-left:0;margin-top:20px;}
}

@media (max-width:768px){
.map_left_box{height:280px;}
.area{font-size:28px;}
}

@media (max-width:480px){
.map_left_box{height:240px;}
.area{font-size:24px;}
.add{font-size:16px;line-height:26px;}
}


/* 메뉴------------------------------------------------------------------- */

/* 메뉴 컨텐츠 상단 구분선 (인사말/스토리와 동일) */
.menu_content_area {
    width: 100%;
    border-top: 1px solid rgba(43, 36, 31, 0.1);
    padding-top: 80px;
}

/* 4열 그리드 시스템 */
.menu_grid_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 한 줄에 4개씩 */
    column-gap: 40px; /* 좌우 간격 */
    row-gap: 90px;    /* 위아래 간격 */
}

.menu_box {
    width: 100%;
    text-align: center;
}

/* 이미지 처리 */
.menu_img {
    width: 100%;
    overflow: hidden;
    border-radius: 20px; 
    background: #eee;
}

.menu_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.menu_box:hover .menu_img img {
    transform: scale(1.05); /* 살짝 커지는 효과 */
}

/* 텍스트 스타일 */
.menu_text {
    font-size: 26px;
    font-family: "Black Han Sans", sans-serif;
    color: #683d1e;
    padding: 30px 0 15px 0;
}

.menu_sub_text {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    font-weight: 500;
    text-align: center;
    width: 90%; /* 너무 좁지 않게 조정 */
    margin: 0 auto;
    word-break: keep-all;
}

/* 반응형 모바일 */
@media (max-width: 1024px) {
    .menu_grid_container { grid-template-columns: repeat(2, 1fr); } /* 태블릿에선 2열 */
}

@media (max-width: 480px) {
    .menu_grid_container { grid-template-columns: 1fr; row-gap: 50px; } /* 모바일에선 1열 */
    .menu_text { font-size: 22px; }
}

/* 트러플 초콜릿 그리드------------------------------------------------- */

/* ★ 트러플 전용 3열 설정 */
.menu_grid_container.type_3 {
    grid-template-columns: repeat(3, 1fr); /* 한 줄에 3개씩 */
    column-gap: 60px; /* 3개일 땐 간격이 좀 더 넓어야 예뻐요 */
}

/* 3열일 때 이미지 크기 최적화 (선택사항) */
.menu_grid_container.type_3 .menu_img {
    height: 350px; /* 4열일 때보다 이미지가 커지므로 높이도 살짝 조정 */
}

/* 3열일 때 서브텍스트 너비 조정 */
.menu_grid_container.type_3 .menu_sub_text {
    width: 80%; /* 3열은 박스가 넓어서 80% 정도가 적당함 */
}


/* 초콜릿바 반응형------------------------------------------------------------- */

@media (max-width: 768px){
    .menu_box_wrap_1 {flex-wrap: wrap; }
    .menu_box { width: 50%; }
    .menu_text { font-size: 24px; padding: 20px 0 0 0;}
    .menu_sub_text { display: none;}
    .truffle_sub_text { display: none;}
    .margin_bottom_50_2 { margin-bottom: 50px;}
}

@media (max-width: 480px){
    .menu_box_wrap {margin: 0 -10px; }
    .menu_box { padding: 0 10px;}
    .menu_text { font-size: 18px; line-height: 22px; }
    .margin_bottom_30 { margin-bottom: 40px;}
}

/* 프로세스---------------------------------------------------------------- */

/* 공정 영역 상단 구분선 */
.process_content_area {
    width: 100%;
    border-top: 1px solid rgba(43, 36, 31, 0.1);
    padding-top: 120px;
    position: relative; 
}

/* ★ 중앙 세로선 (Timeline) */
.process_content_area::before {
    content: '';
    position: absolute;
    top: 120px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: rgba(104, 61, 30, 0.15); /* 조금 더 은은하게 */
}

.process_list {
    display: flex;
    flex-direction: column;
    gap: 120px; /* 단계별 간격을 넓혀서 시원하게 */
}

.process_item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 이미지와 텍스트 세로 중앙 정렬 */
    width: 100%;
    position: relative;
}

/* ★ 좌우 박스 크기 키움 (45% -> 48%) */
.process_img_box, .process_info_box {
    width: 48%; 
}

/* 홀수: 이미지(왼) / 텍스트(오) */
.process_item:nth-child(odd) .process_img_box { order: 1; text-align: right; padding-right: 50px; }
.process_item:nth-child(odd) .process_info_box { order: 2; text-align: left; padding-left: 50px; }

/* 짝수: 텍스트(왼) / 이미지(오) */
.process_item:nth-child(even) .process_img_box { order: 2; text-align: left; padding-left: 50px; }
.process_item:nth-child(even) .process_info_box { order: 1; text-align: right; padding-right: 50px; }

/* ★ 중앙 숫자 노드 (수현 님 요청대로 중앙 선 위 배치) */
.step_num {
    position: absolute;
    left: 50%;
    top: 50%; /* 박스 높이의 정중앙에 배치 */
    transform: translate(-50%, -50%);
    width: 50px; /* 번호 원형 크기도 조금 키움 */
    height: 50px;
    background: #683d1e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 0 0 10px #fff; /* 선을 확실히 끊어주는 배경 효과 */
}

/* ★ 이미지 크기 키우기 */
.process_img_box img {
    width: 100%;
    max-width: none; /* 기존 450px 제한 해제하여 꽉 채움 */
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transition: 0.4s;
}

/* ★ 텍스트 크기 키우기 */
.process_title {
    /* font-family: "Black Han Sans", sans-serif; */
    font-family: 'Pretendard';
    font-size: 38px; /* 기존 30px -> 38px */
    color: #2b241f;
    margin-bottom: 25px;
    font-weight: 700;
}

.process_text {
    font-size: 19px; /* 기존 16px -> 19px */
    line-height: 1.8;
    color: #555;
    word-break: keep-all;
    font-weight: 400;
}

/* 반응형 (모바일 최적화) */
@media (max-width: 1024px) {
    .process_content_area::before { left: 20px; }
    .process_item { flex-direction: column !important; gap: 40px; padding-left: 60px; }
    .process_img_box, .process_info_box { width: 100% !important; text-align: left !important; padding: 0 !important; }
    .step_num { left: 20px; transform: translateY(-50%); }
    .process_title { font-size: 30px; }
}


/* 프로세스 반응형---------------------------------------------------- */

@media (max-width: 768px) {

    .process_left_box {width: 40%;}
    .process_right_box {width: 60%;padding: 20px;}
    .process_title {font-size: 26px;}
    .process_text {font-size: 16px; line-height: 24px;}
}

@media (max-width: 480px) {
    .process_box {flex-direction: column; text-align: center;}
    .process_left_box {width: 100%;}
    .process_left_box img {width: 100%;}
    .process_right_box { width: 100%; padding: 24px;}
    .process_title {font-size: 24px;}
    .process_text {font-size: 15px; line-height: 22px;}
    .down {margin: 30px 0;}
}



/* 제조공정 영상 삽입---------------------------------------------- */
.video_wrap {margin: 0 -30px; display: flex; }
.video_wrap::after { display: table; content: ''; clear: both; }

.video { width: 50%; padding: 0 30px;}
.video iframe { width: 100%; aspect-ratio: 16 / 9;}



/* 제조공정 영상 반응형----------------------------------------------- */

@media (max-width: 768px){
    .video_wrap { flex-wrap: wrap;}
    .video { width: 100%;}
    .mg_bottom_50 { margin-bottom: 50px;}
}

@media (max-width: 480px){
    .mg_bottom_50 { margin-bottom: 20px;}
}

/* 재료--------------------------------------------------------------------- */
/* .content_box_3 {width: 100%; display: flex; align-items: center;}
.ingredients_img_box { width: 50%;}
.ingredients_img_box img { width: 100%; border-radius: 50px;}
.ingredients_text_box { width: 50%;}

.ingredients_title { font-family:"Black Han Sans", sans-serif; font-size: 56px; color: #ffae00; }
.ingredients_text { font-size: 20px; line-height: 32px; font-weight: 500; padding-top: 20px; text-align: justify; }
.ingredients_text span { font-size: 26px; color: #683d1e; }

.padding_left { padding-left: 5%;}
.padding_right { padding-right: 5%;}

.margin_bottom_100 { margin-bottom: 100px;} */

.view { display: none;}
.view_x { display: block;}


/* [에디토리얼 비대칭 레이아웃 전용 CSS] ------------------------------------- */

.editorial_grid_wrap {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: flex-start; /* 엇갈린 배치를 위해 위쪽 정렬 고정 */
    padding-top: 50px;
}

.editorial_item {
    width: 45%; /* 여백을 좀 더 줘서 답답함을 없앱니다 */
    margin-bottom: 180px; /* 세로 간격을 더 넓게 주어 시원하게 */
    position: relative; /* 숫자 타이포그래피의 기준점 */
    display: flex;
    flex-direction: column;
}

/* 아이템 갯수에 상관없이 무조건 마지막 2개만 여백 0으로 만들기 */
.editorial_item:nth-last-child(-n+2) {
    margin-bottom: 0;
}

/* ★ 핵심 디자인 포인트: 짝수 번째(오른쪽) 아이템만 아래로 150px 밀어내기 */
.editorial_item:nth-child(even) {
    margin-top: 150px; 
}

/* 배경 숫자 타이포그래피 (포인트 요소) */
.step_bg_num {
    position: absolute;
    top: -60px;
    left: -50px;
    font-family: 'Montserrat', 'Syne', sans-serif; /* 영문 폰트 적용 (없으면 기본 폰트) */
    font-size: 70px;
    font-weight: 900;
    /* color: rgba(255, 174, 0, 0.1);  */
    color: #e4d9ca;
    z-index: -1; /* 사진과 글씨 뒤로 빠지게 */
}

/* 이미지 박스 그림자 추가로 입체감 부여 */
.ingredients_img_box {
    width: 100%;
    margin-bottom: 40px; 
    overflow: hidden;
    border-radius: 20px; 
    box-shadow: 10px 15px 30px rgba(43, 36, 31, 0.08); /* 부드러운 그림자 */
}

.ingredients_img_box img {
    width: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 고급스러운 호버 속도 */
}

.editorial_item:hover .ingredients_img_box img {
    transform: scale(1.05);
}

/* 텍스트 정리 */
.ingredients_title {
    font-size: 50px;
    font-weight: 500;
    color: #ffae00;
    margin-bottom: 15px;
}

.ingredients_text {
    font-size: 18px; /* 폰트 크기를 살짝 줄여서 여백의 미를 살림 */
    line-height: 1.7;
    font-weight: 300;
    text-align: justify;
    word-break: keep-all;
    color: #333;
}

.ingredients_text span {
    font-size: 22px;
    font-weight: 600;
    color: #555;
    display: block; 
}
/* 재료 반응형------------------------------------------------------------------- */

@media (max-width:768px){
    .content_box_3 { flex-wrap: wrap;}
    .ingredients_img_box { width: 100%;}
    .ingredients_img_box img {border-radius: 20px;}
    .ingredients_text_box { width: 100%;}
    .ingredients_title { font-size: 40px; padding-top: 30px;}
    .ingredients_text { font-size: 16px; line-height: 28px; padding-top: 18px; }
    .ingredients_text span { font-size: 22px; }
    .margin_bottom_100 { margin-bottom: 70px;}
    .padding_left { padding-left: 0%;}
    .padding_right { padding-right: 0%;}
    .view { display: block;}
    .view_x { display: none;}
}

@media (max-width:480px){
    .ingredients_title { font-size: 26px; padding-top: 30px;}
    .ingredients_text { font-size: 14px; line-height: 20px; padding-top: 15px; }
    .ingredients_text span { font-size: 16px; }
    .margin_bottom_100 { margin-bottom: 70px;}
}


/* 뉴스 이벤트---------------------------------------------------------------- */

/* .news_box_wrap { margin: 0 -30px; display: flex; flex-wrap: wrap;}
.news_box_wrap::after { display: table; content: ''; clear: both;}

.news_box { width: 33.333%; padding: 0 30px; margin-bottom: 60px; cursor: pointer;}
.news_box img { 
    width: 100%; 
    height: 280px; 
    object-fit: cover;
    filter: grayscale(0%);
    transition: filter 0.3s ease;
    background: #ccc;
}
.news_box:hover img { background: #fff; filter: grayscale(100%); }
.news_box p { background: #fde7a4;}
.news_box:hover .news_title{ background: #888; }
.news_box:hover .news_date{ background: #888;}

.news_title { 
    font-size: 18px; 
    color: #000; 
    font-weight: 500; 
    padding: 7%; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news_date { font-size: 14px; padding: 7%;}

.pagination { text-align: center;}
.pagination span i { font-size: 20px; color: #777; cursor: pointer; margin: 0 10px;}
.pagination span i:hover { color: #000;}
.pagination a { padding: 4px 12px 5px 12px; border-radius: 30px;}
.pagination a:hover { color: #fff; background: #f1d391;}
.pagination a.active { color: #fff; background: #e6bd66; } */


/* [게시판 전용 CSS] --------------------------------------------- */

/* 1. Grid 레이아웃으로 3단 배열 (간격 관리 용이) */
.news_grid_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1:1:1 비율로 3칸 */
    gap: 80px 30px; /* 세로 간격 50px, 가로 간격 30px */
    margin-bottom: 80px;
}

/* 2. 카드 공통 스타일 */
.news_card {
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden; /* 자식 요소가 모서리를 튀어나가지 않게 */
    cursor: pointer;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.05); /* 부드러운 그림자 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* 카드 호버 액션 (살짝 위로 떠오르는 효과) */
.news_card:hover {
    transform: translateY(-10px);
    box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.1);
}

/* 3. 썸네일 이미지 영역 */
.news_card .img_box {
    width: 100%;
    height: 300px; 
    overflow: hidden;
}

.news_card .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* 썸네일 호버 액션*/
.news_card:hover .img_box img {
    transform: scale(1.03);
}

/* 4. 텍스트 정보 영역 */
.news_card .text_box {
    padding: 30px; /* 내부 여백 통일 */
    display: flex;
    flex-direction: column;
    gap: 12px; /* 텍스트 간격 일괄 적용 */
}

/* 카테고리 (말머리) 포인트 디자인 */
.news_category {
    font-size: 13px;
    font-weight: 600;
    color: #ffae00; /* 브랜드 컬러 활용 */
}

.news_title {
    font-size: 20px;
    color: #1f120e;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 말줄임표 처리 */
}

.news_date {
    font-size: 15px;
    color: #888;
    margin-top: 10px;
}

/* 5. 페이지네이션 (기존 스타일에서 여백 정돈) */
.pagination {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 번호 사이 간격 */
}

.pagination span i {
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 10px;
}

.pagination span i:hover {
    color: #1f120e;
}

.pagination a {
    display: inline-block;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%; /* 동그랗게 변경 */
    font-size: 16px;
    color: #555;
    font-weight: 500;
    transition: all 0.3s;
}

.pagination a:hover {
    background-color: #f8f5ef; /* 아주 연한 배경색 */
    color: #683d1e;
}

.pagination a.active {
    /* background-color: #ffae00; */
    background: #e4d9ca;
    color: #683d1e;
}

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

@media (max-width:1200px){
    .news_box_wrap { margin: 0 -20px; }
    .news_box { padding: 0 20px;}
    .news_title { max-width: 350px;}
    .news_box img {height: 200px;}
}

@media (max-width:768px){
    .news_box_wrap { margin: 0 -15px; }
    .news_box { padding: 0 15px; width: 50%;}
}

@media (max-width:480px){
    .news_box_wrap { margin: 0 -15px; }
    .news_box { padding: 0 15px; width: 100%; margin-bottom: 30px;}
    .news_title { font-size: 16px; max-width: 480px;}
    .pagination a {font-size: 14px; padding: 2px 9px 4px 9px;}
}

/* 고객문의-------------------------------------------------------------------- */
.board_top {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 밀어내기 */
    align-items: flex-end; /* 아래쪽 라인 맞추기 */
    margin-bottom: 15px;
}

.total_count {
    font-size: 15px;
    color: #555;
}

.total_count span {
    font-weight: 700;
    color: #1f120e;
}

/* absolute를 빼고 깔끔하게 재단장한 버튼 */
.btn_1 button {
    background: #1f120e; /* 브랜드 컬러로 무게감 있게 */
    color: #fff;
    border: none;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px; /* 모서리 살짝 둥글게 */
    transition: 0.3s;
}

.btn_1 button:hover { 
    background: #ffae00; /* 호버 시 포인트 컬러 */
}

/* [테이블 영역] --------------------------------------------- */
.table_wrap { 
    width: 100%; 
    margin-bottom: 60px;
}

.bbs_list { 
    width: 100%;
    border-collapse: collapse; /* 테두리 두 줄 되는 것 방지 */
    table-layout: fixed; /* 셀 너비 고정 및 텍스트 말줄임 허용 */
    border-top: 1px solid #e4d9ca; /* 읽기 페이지와 톤앤매너 통일 */
    border-bottom: 1px solid #1f120e;
}

.bbs_list th { 
    border-bottom: 1px solid #e4d9ca; 
    padding: 20px 0;
    background-color: #f8f1e7; /* 연한 배경으로 헤더 구분 */
    font-weight: 600;
    color: #1f120e;
}

.bbs_list td { 
    border-bottom: 1px solid #e4d9ca; 
    padding: 20px 10px;
    text-align: center;
    color: #444;
    font-size: 15px;
}

/* 제목 부분 디자인 (텍스트가 길어지면 ... 으로 처리) */
.bbs_list td.left { 
    text-align: left;
    padding-left: 30px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.bbs_list td.left a {
    text-decoration: none;
    color: #1f120e;
    transition: 0.2s;
}

.bbs_list td.left a:hover {
    color: #ffae00;
    font-weight: 600;
    text-decoration: underline;
}
/* 고객문의 반응형--------------------------------------------------------------- */

@media (max-width:1200px){
    .btn_1 button { top: 265px; right: 5%;}
}

@media (max-width:940px){
    .table_scroll { width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none;}
    colgroup, .bbs_list th, 
    .bbs_list td.col_num, 
    .bbs_list td.col_writer,
    .bbs_list td.col_views { display: none;}
}

@media (max-width:768px){
    .btn_1 button { top: 135px; right: 7%; padding: 7px 15px; font-size: 14px; }
    .table_wrap { margin-bottom: 30px;}
    .bbs_list td.col_date { display: none;}

}

@media (max-width:480px){
    .btn_1 button { top: 100px; font-size: 12px;}
    .bbs_list td.col_title { font-size: 14px; padding: 15px 10px; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* [게시판 본문 읽기 영역] --------------------------------------------- */

.new_sub_title {
    font-size: 60px; 
    font-family: 'Pretendard'; 
    font-weight: 500; 
    color: #1f120e;
    margin-top: 90px;
}

.notice_read_wrap { 
    width: 100%;
    border-top: 1px solid #e4d9ca;
    border-bottom: 1px solid #e4d9ca;
    margin-bottom: 60px;
    display: flex;
    flex-wrap: wrap;
}

/* 제목 행 */
.page_title { 
    width: 100%; 
    border-bottom: 1px solid #e4d9ca; 
    display: flex; /* flex로 수직 중앙 정렬 */
    align-items: center;
    font-size: 17px; 
    font-weight: 500; /* 제목은 살짝 더 굵게 */
    color: #1f120e;
}

/* 작성자, 작성일, 조회수 행 (3등분) */
.page_name, .page_date, .page_views {
    width: 33.333%; 
    border-bottom: 1px solid #e4d9ca;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #555;
    box-sizing: border-box; /* 33.333%가 틀어지지 않게 방어 */
}

/* 공통 항목 이름(span) 라벨 디자인 */
.page_title span, .page_name span, .page_date span, .page_views span { 
    width: 120px;
    text-align: center;
    font-size: 15px;
    color: #1f120e;
    font-weight: 500;
    padding: 17px 0;
    margin-right: 20px;
    background: #f8f1e7; /* 연한 노란색을 배경으로 깔아 실무 느낌 강조 */
    border-right: 1px solid #e4d9ca;
    flex-shrink: 0; /* 창이 좁아져도 라벨 너비 고정 */
}

/* 본문 내용 영역 */
.page_detail { 
    width: 100%;
    max-width: 1000px; /* 1500px 안에서 가독성을 위해 1000px로 가두기 */
    margin: 0 auto;
    padding: 80px 0;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    color: #333;
}

.page_img { 
    margin-bottom: 50px;
}

.page_img img {
    max-width: 100%; /* 이미지가 본문 너비를 넘어가지 않게 방어 */
    border-radius: 10px; /* 부드러운 이미지 모서리 */
}

.page_text {
    line-height: 1.8; /* 줄 간격을 넓혀서 읽기 편하게 함 */
    color: #444;
}

.page_text strong {
    display: block;
    margin-bottom: 10px;
    color: #5e2818; /* 코코베 브라운 포인트 */
    font-size: 18px;
}

.page_text ul {
    list-style: none;
    padding-left: 10px;
    margin-bottom: 20px;
}

.page_text p {
    margin-bottom: 8px;
}

/* [버튼 영역] --------------------------------------------- */
.btn_zone { 
    width: 100%; 
    margin-bottom: 100px;
    display: flex; 
    justify-content: center; /* 버튼들 중앙 정렬 */
    gap: 10px; /* 버튼 사이 간격 */
}

button.btn_2 {
    background: #fff;
    border: 1px solid #e4d9ca;
    color: #1f120e;
    padding: 12px 30px; /* 기존보다 살짝 더 큼직하게 */
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

button.btn_2:hover { 
    background: #f8f1e7; 
    border-color: #1f120e;
    color: #1f120e;
}

/* 읽는 페이지 반응형-------------------------------------------------- */

@media (max-width:768px){
    .page_title { font-size: 16px;}
    .page_title span { padding: 7px 0;}
    .page_name, .page_date, .page_views {width: 100%;}
    .page_name span, .page_date span, .page_views span {padding: 7px 0;}
    .page_detail { font-size: 16px;}
}

@media (max-width:480px){
    .notice_read_wrap { margin-bottom: 30px;}
    .page_title span { width: 50px; font-size: 12px; margin: 2px 10px 2px 0;}
    .page_name span, .page_date span, .page_views span { width: 50px; font-size: 12px;  margin: 2px 10px 2px 0; }
    button.btn_2 { padding: 7px 15px; font-size: 14px;}
}

/* 삭제페이지------------------------------------------------------------------ */

.delete_wrap { width: 100%; text-align: center; padding: 30px 0;}
.delete_wrap span { font-size: 18px; font-weight: 500; padding-right: 20px; vertical-align: middle;}

.ment { font-size: 18px; line-height: 24px; text-align: center; margin-bottom: 30px;}

input.input_type_1 { 
    border: 1px solid #fde7a4;
    padding: 10px;
    border-radius: 5px;
    background: #fff3d9;
    margin-top: 20px;
}

/* 삭제페이지 반응형----------------------------------------------------------- */

@media (max-width:768px){
    .ment { font-size: 16px; margin-bottom: 20px;}
}

@media (max-width:480px){
    .ment { font-size: 14px; line-height: 20px; margin-bottom: 20px;}
}

/* 쓰는 페이지------------------------------------------------------------ */

.personal_info_title { font-size: 24px; color: #000; font-weight: 500; margin-bottom: 20px; }
.personal_info_title span { float: right; font-size: 18px; color: red;}

.personal_info_wrap { width: 100%; border: 1px solid #fde7a4; margin-bottom: 50px;}
.iframe_box { width: 100%; height: 300px; border: none;}
.pi_text { width: 100%; padding: 3%; line-height: 26px; background: #fff5d1;}

.notice_write_wrap { 
    width: 100%; 
    border-bottom: 2px solid #fde7a4; 
    border-top: 2px solid #fde7a4;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
.write_list {
    width: 100%; 
    display: flex;
    padding: 15px 0;
    align-items: center;
    border-bottom: 1px solid #fde7a4;
}

.list_1 { width: 20%; text-align: center; }
.list_2 { width: 80%; position: relative; }
.list_1-1 { width: 20%; text-align: center; }
.list_1-2 { width: 80%; }

.input_width_60 { width: 60px; }
.input_width_190 { width: 190px; }
.input_width_90 { width: 90%; }
.input_width_100 { width: 100%; }


input [type="radio"],
input [type="checkbox"] { 
    transform: scale(1.4);
}
input.input_type_1-1 { 
    border: 1px solid #fde7a4;
    padding: 10px;
    border-radius: 5px;
    background: #fff3d9;
}

button.add { 
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    background:#fde7a4;
    color: #555;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 3px;
    cursor: pointer;
}
button.add:hover { background: #888; color: #fff;}

textarea { 
    width: 100%;
    border: 1px solid #fde7a4;
    padding: 10px;
    border-radius: 5px;
    background: #fff3d9;
}
input.input_type_1 { width: 100%;}
/* 쓰는페이지 반응형----------------------------------------------------- */

@media (max-width:768px){
    .personal_info_title { font-size: 16px;}
    .personal_info_title span { font-size: 16px;}
}

@media (max-width:480px){
    .personal_info_title { width: 100%; text-align: center; line-height: 28px; margin-bottom: 50px;}
    .personal_info_title span { width: 100%; text-align: center;}
    .pi_text { font-size: 14px; padding: 3%; line-height: 22px; }
    .iframe_box { height: 200px;}
    .write_list { flex-wrap: wrap;}
    .list_1 { width: 100%; text-align: left; margin-bottom: 10px; }
    .list_2 { width: 100%; }
    .list_1-1 { width: 30%; text-align: left;}
    .list_2-1 { width: 70%;}
}


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

footer { 
    width: 100%; 
    padding: 60px 0; 
    background: #1f120e; /* 너무 밝은 갈색보다 살짝 묵직한 딥 브라운 */
    color: rgba(255, 255, 255, 0.6); 
}

.f_inner { 
    width: 100%; 
    max-width: 1500px; /* 고정 width 대신 max-width 사용 */
    margin: 0 auto; 
    padding: 0 40px; /* 본문과 똑같이 양옆 여백 40px 주기 */
    box-sizing: border-box; /* 패딩을 1500px 안에 포함시키기 */
}

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

.f_menu { display: flex; list-style: none; padding: 0; }
.f_menu li { margin-right: 30px; }
.f_menu li a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 15px; 
    font-weight: 600;
}

.f_sns a { 
    color: #fff; 
    font-size: 24px; 
    margin-left: 20px; 
    opacity: 0.6; 
    transition: 0.3s; 
}
.f_sns a:hover { opacity: 1; }

.f_line { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 40px; }

/* 하단 영역 */
.f_bottom { display: flex; justify-content: space-between; align-items: flex-start; }

.f_left { display: flex; }
.f_logo { width: 130px; margin-right: 40px; filter: grayscale(1) brightness(2); } /* 로고를 흰색톤으로 깔끔하게 */

.copy { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.5); }
.copyright { margin-top: 20px; color: rgba(255, 255, 255, 0.3); }

.f_right { text-align: right; }
.copy_2 span:first-child { display: block; font-size: 14px; color: #ffedb6; margin-bottom: 10px; }
.copy_2 span:nth-child(2) { display: block; font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.copy_2 p { font-size: 14px; line-height: 1.6; }


/* 패밀리 사이트 버튼------------------------------------------------------------ */
/* 1. 전체 컨테이너: 목록이 나타날 기준점 */
.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 30px; 
    vertical-align: middle; /* 라인 맞춤 */
}

/* 2. 메인 버튼: 원래 디자인 그대로 */
.dropbtn {
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    transition: all 0.3s ease;
    min-width: 160px;
    outline: none;
}

/* 3. [핵심] 드롭다운 목록: 위치를 버튼 바로 위로 고정 */
.dropdown-content {
    display: none;
    position: absolute;
    bottom: 100%;       /* [필수] 버튼의 맨 위쪽 끝에서 시작 */
    left: 0;
    width: 100%;        /* 버튼 너비와 100% 일치 */
    margin-bottom: 1px; /* 버튼과 목록 사이의 미세한 간격 */
    background-color: #fdf8e1;
    border: 1px solid rgba(104, 61, 30, 0.2);
    box-shadow: 0 -10px 20px rgba(0,0,0,0.2);
    border-radius: 8px;
    overflow: hidden;
    z-index: 999;       /* 다른 요소에 가려지지 않게 높게 설정 */
}

/* 4. 마우스 올렸을 때 액션 (부모인 .dropdown에 올릴 때) */
.dropdown:hover .dropbtn {
    background: #fff;
    color: #4e342e;
    border-color: #fff;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeInUp 0.3s ease forwards;
}

/* 5. 내부 링크 스타일 */
.dropdown-content a {
    color: #4e342e;
    padding: 12px 0;
    text-decoration: none;
    text-align: center;
    display: block;
    font-size: 14px;
    transition: 0.2s;
    border-bottom: 1px solid rgba(104, 61, 30, 0.05);
}

.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background-color: #683d1e; color: #fff; }

/* 애니메이션 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform:}}