@import url( reset.css);


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

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

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


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

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

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

@font-face {
    font-family: 'SeoulNotice';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

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

@font-face {
    font-family: 'MapoBackpackTravel';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoBackpackingA.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@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;
}

@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;
}






#wrap { width: 100%;}

/* 띠배너--------------------------------------------------------------- */
#top_banner { background: #d31010; text-align: center;}
.banner_content { font-size: 16px; padding: 10px 0; color: #fff;}
.top_close {
    position: absolute;
    top: 9px;
    right: 15px;
}
#close_button { 
    background: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

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

header { width: 100%;}
.header { position: relative; width: 1500px; margin:0 auto; display: flex;}       

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

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

@keyframes slids-down {
    0% {transform: translateY(-100%); opacity: 0.3%;}
    100% { transform: translateY(0%);}
}

/* 로고 ---------------------------------------------- */
h1 {  width: 30%; padding: 65px 0 20px 0; } 

/* 네비----------------------------------------------- */
nav { width: 70%; }
nav > ul.gnb { margin-top: 94px; display: flex; justify-content: space-around;}
nav > ul.gnb > li { position: relative; width: 20%; text-align: center; }
nav > ul.gnb > li > a {  font-size: 20px; color: black; font-weight: 400;}
nav > ul.gnb > li:hover > a { color: #777;}


nav ul.sub { position: absolute; top: 45px; left: 0; z-index: 888; width: 100%; display: none;}
nav ul.sub li { background: #fff;}
nav ul.sub li a { padding: 10px 0; display: block;}
nav ul.sub li a:hover {  background: #ffcc00;}


/* 탑메뉴----------------------------------------------- */
.top_menu { position: absolute; top: 20px; right: 35px; display: flex;}
.top_menu li { padding: 0 10px;}
.top_menu li a { font-size: 14px; color: #616161;}
.top_menu li a:hover { color: #000000;}

.toggle { display: none;}

/* 480 서브-------------------------------------------------------- */

.nav_480 { 
    background: #ca1818;
    width: 0%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    padding-top: 60px;
    overflow-x: hidden;
    transition: 0.3s;
}

.nav_480 a {
    color: #fff;
    font-size: 18px;
    padding: 10px 0 10px 20px;
    display: block;
    font-size: 17px;
}

.nav_480 .closebtn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
}

.sns_480 { 
    display: flex;
    position: absolute;
    bottom: 0;
    left: 47%;
    transform: translate(-50%, -50%);
}

.sns_480 a i { font-size: 24px;}

ul.menu { width: 250px;}

/* 헤더 반응형---------------------------------------------------------------------------- */
@media (max-width:1220px){
    .header { width: 100%;}
}

@media (max-width:768px){
    #top_banner { display: none;}
    .header { flex-wrap: wrap;}
    .fixed-header { height: 112px;}
    h1 { width: 100%; padding: 20px 0 20px 15px; }
    h1 img { width: 20%;}
    nav { width: 100%; }
    nav > ul.gnb { margin-top: 0; background: #ca1818;}
    nav > ul.gnb > li { width: 20%; text-align: center;}
    nav > ul.gnb > li > a { color: #ffffff; font-size: 16px; padding: 10px 0; display: block;}
    nav > ul.gnb > li > a:hover { background: #ffcc00 ; color: #fff;}
    nav ul.sub { top: 44px;}
    nav ul.sub li a:hover {  background: #ffcc00; color: #fff;}

    .top_menu li { padding: 0 5px; font-size: 10px;}
    .top_menu li a { font-size: 10px; }
}

@media (max-width:480px){
    .fixed-header { height: 60px;}
    h1 { padding: 13px 0 10px 17px; }
    h1 img { width: 26%;}
    nav > ul.gnb {display: none;}
    .top_menu { display: none;}
    .toggle {
        display: block;
        position: absolute;
        top: 24px; right: 10px;
    }
    .toggle i { font-size: 1.5rem;}
}


/* 메인 배너----------------------------------------------------------------- */
.banner { position: relative; width: 100%; overflow: hidden;} 
.banner_480 { position: relative; width: 100%; overflow: hidden; display: none;} 
/* 1. 기본 상태: 일단 안 보이고 아래 대기 */
.img_txt { 
    position: absolute; 
    top: 55%; left: 35%; 
    transform: translate(-50%, -40%); 
    opacity: 0; 
    font-size: 3.5vw; 
    font-weight: 300;
    font-family: 'Aggravo';
    line-height: 4.5vw;
    color: #ffffff;
    text-align: left;
    z-index: 888;
    transition: all 0.8s ease-out; /* 부드럽게 */
}

/* 2. ⭐ 자바스크립트가 붙여주는 클래스 (등장!) */
.img_txt.active_ani {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    transition-delay: 0.2s;
}

/* 폰트 스타일 유지 */
.img_txt span.it_1 { font-size: 4.5vw; color:#ca1818; font-family: 'SchoolSafetyPoster'; }
.img_txt span.it_2 { font-size: 4.5vw; color:#ffa800; font-family: 'SchoolSafetyPoster'; }




/* 메인배너 반응형------------------------------------------------------------------ */
@media (max-width:768px){  
    .img_txt { width: 100%; font-size: 5vw; line-height: 6vw; transform: translate(-28%, -50%);}
    
}

@media (max-width:480px){  
    .banner { display: none;} 
    .banner_480 { display: block; } 
    .img_txt { font-size: 7.5vw; line-height: 9vw; top: 30%; left: 41%;}
    .img_txt span.it_1 {padding-left: 53px; font-size: 9vw;}
    .img_txt span.it_2 { padding-left: 2px; font-size: 9vw;}
}


/* 컨텐츠랩----------------------------------------------------------------------------- */
main { width: 100%;}
.contents_wrap_1 { width: 100%; margin-top: 100px;} 
.contents_wrap_2 { width: 100%; margin-top: 150px;} 
.contents_wrap_3 { 
    width: 100%; 
    height: 600px;
    margin-top: 100px;
    background: url(../images/f_banner_img.jpg)no-repeat fixed;    
    background-size: cover; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 

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

/* 아이콘--------------------------------------------------------------------------- */
.icon_wrap { display: flex;}
.icon { width: 16.666%; text-align: center;}
.icon img { width: 45%; opacity: 0.7;}
.icon a:hover img { transform: scale(1.1); opacity: 1;}
.icon * { transition: all 0.5s ease; }

.icon_text { font-size: 20px; color: #777; padding-top:7px; }



/* 아이콘 반응형----------------------------------------------------------------------- */
@media (max-width:1220px){
    .contents {width: 100%; padding: 0 5%;}
}

@media (max-width:768px){
    .contents_wrap_1 {margin-top: 50px;}
    .icon img { width: 50%;}
    .icon_text { font-size: 18px; }
}

@media (max-width:480px){
    .contents_wrap_1 {margin-top: 30px;}
    .icon img { width: 60%;}
    .icon_text { font-size: 12px; }
}


/* 메뉴----------------------------------------------------------------------------- */
.sub_title { 
    width: 100%; 
    text-align: center; 
    font-size: 60px;
    font-family: 'Aggravo';
    font-weight: 300;
    color: #000;
    
}

.sub_text { 
    width: 100%; 
    text-align: center;
    font-size: 18px;
    color: #777;
    margin-top: 20px;
    margin-bottom: 70px;
    font-weight: 500;
    padding-left: 15px;
}

.menu_wrap { margin: 0 -15px; display: flex; }
.menu_wrap::after { display: table; content: ''; clear:both;}

.menu { width: 25%; padding: 0 15px; float: left; }
.menu_text{ text-align: center; font-size: 20px; font-weight: 20px #777; padding-top: 10px; }
.menu:hover img{ transform: scale(1.05);}
.menu *{ transition: all .3s ease; }

.more { 
    position: absolute; 
    top: 100px;
    right: 0;
    }

.more span { font-size: 2rem;}


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

.tab {
    overflow: hidden;
    border-top: 1px solid #ccc;
    display: flex;
}
.tab button {
    cursor: pointer;
    font-size: 18px;
    padding: 14px 0;
    transition: 0.3s;
    width: 33.333%;
    background: #fff;
    color: #000;
    font-weight: 500;
}
.tab button:hover {
    border-bottom: 3px solid #ddd;
}
.tab button.active {
    border-bottom: 3px solid #ca1818;
}

/* 1. 기본 탭 콘텐츠 스타일 (기존 스타일 유지) */
.tabcontent {
    display: none; 
    padding: 15px 0px 0 0;
    border-top: none;
    
    /* ⭐ 추가: 나타날 때 'fadeUp' 애니메이션을 0.6초 동안 실행 */
    animation: fadeUp 0.6s ease-out; 
}

/* 2. ⭐ 스르륵 올라오는 효과 정의 (이게 핵심!) */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* 20px 아래에서 시작 */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 제자리로 도착 */
    }
}

.filter {
    overflow: hidden;
    border-top: 1px solid #ccc;
    display: flex;
}
.filter button {
    cursor: pointer;
    font-size: 18px;
    padding: 14px 0;
    transition: 0.3s;
    width: 33.333%;
    background: #fff;
    color: #000;
    font-weight: 500;
}
.filter button:hover {
    border-bottom: 3px solid #ddd;
}
.filter button.active {
    border-bottom: 3px solid #ca1818;
}


/* 메뉴 반응형------------------------------------------------------------------------- */
@media (max-width:1220px){
    .more { right: 5%;}
}

@media (max-width:768px){
    .contents_wrap_2 { margin-top: 100px;} 
    .menu_wrap { flex-wrap: wrap;}
    .menu { width: 50%;}
    .mg_bottom_30 { margin-bottom: 30px;}
    .sub_title { font-size: 40px; padding-bottom: 8px;}
    .sub_text { font-size: 16px; margin-top: 0px; margin-bottom: 50px;}
    .more { top: 90px;}
    .menu_text{ font-size: 18px; padding-top: 10px; }
}

@media (max-width:480px){
    .contents_wrap_2 { margin-top: 60px;}
    .sub_title { font-size: 30px; padding-bottom: 0px;}
    .sub_text { font-size: 14px; margin-top: 4px; margin-bottom: 30px;}
    .more { display: none;}
    .menu {padding: 0 10px;}
    .menu_wrap { margin: 0 -10px; }
    .menu_text{ font-size: 16px; padding-top: 3px; }
}



/* 브랜드 스토리---------------------------------------------------------- */
.f_banner_title { 
    font-family: 'Aggravo';
    font-size: 65px;
    /* color: #c5c5c5; */
    color: #eee;
    padding-bottom: 20px;
    font-weight: 500
}

.f_banner_text {
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    font-weight: 400;
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
}

.f_banner_text_480 { 
    display: none;
    font-size: 16px;
    color: #ccc;
    padding: 20px 10% 50px 10%;
    text-align: justify;
}

/* 배너 더보기 버튼 ----------------------------------------------------------*/
button.f_banner_btn { 
    /* background: #c5c5c5; */
    /* border: 1px solid #000; */
    font-size: 16px;
    color: #000;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 400;
    letter-spacing: 10;
    /* font-family: 'Aggravo'; */
    
}

button.f_banner_btn:hover { background: #000; color: #fff;}

/* 브랜드 스토리 반응형---------------------------------------------------------------- */
@media (max-width:768px){
    .contents_wrap_3 { height: 400px; margin-top: 100px;}
    .f_banner_title { font-size: 45px;}
    .f_banner_text {font-size: 16px;}
    button.f_banner_btn { font-size: 14px;}
}

@media (max-width:480px){
    /* .f_banner_text { display: none;}
    .f_banner_text_480 { display: block;}
    .f_banner_title { font-size: 35px; line-height: 18px;}
    button.f_banner_btn { font-size: 14px; padding: 8px 14px;}
    .contents_wrap_3 { height: 400px; margin-top: 60px;} */
    .contents_wrap_3 { display: none;}
}


/* 매장안내 ---------------------------------------------------------------------------*/
/* .store_box { display: flex; align-items: center; background: #f5deb9;}
.store_text_box { width: 50%; text-align: center;}
.store_img_box { width: 50%;}
.store_title {
    font-size: 50px;
    font-family: 'Aggravo';
    font-weight: 500;
    color: #2c2c2c;
}
.store_text {
    padding-top: 40px;
    font-size: 20px;
} */

/* 컨테이너 및 메인 이미지 */
.store_detail_wrap {
    margin-top: 40px;
}

.store_main_visual {
    position: relative;
    width: 100%;
    height: 655px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 30px;
}

.store_main_visual .main_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
}

.main_overlay h3 { font-size: 30px; font-weight: 500; margin-bottom: 15px; }
.main_text { font-size: 20px;}

/* 정보 및 갤러리 플렉스 레이아웃 */
.store_info_flex {
    display: flex;
    gap: 30px;
    /* align-items: flex-start; */
    align-items: stretch; /* ⭐ 부모의 높이에 맞춰 자식들이 늘어납니다 */
}

/* 텍스트 정보 박스 */
.info_text_box {
    flex: 0.8;
    background: #fdfdfd;
    padding: 40px 30px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 모든 정보 줄 (시작 위치 통일) */
.info_row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
    /* ⭐ 왼쪽 여백을 주어 뭉치 전체를 중앙으로 밀기 (수치로 조절 가능) */
    padding-left: 15%; 
    align-items: flex-start;
}

.info_row:last-child { border-bottom: none; }

/* 왼쪽 빨간색 라벨 (너비를 줄여서 내용과 밀착) */
.info_row .label {
    width: 70px; /* ⭐ 100px에서 70px로 줄임 (글씨와 주소 사이 간격 좁힘) */
    font-weight: bold;
    color: #ca1818;
    flex-shrink: 0;
    text-align: left;
}

/* 오른쪽 실제 주소/시간 내용 */
.info_row .value { 
    color: #555; 
    line-height: 1.5; 
    text-align: left;
    word-break: keep-all;
}

/* 식당 제목 (지점명 시작 라인 맞춤) */
.store_name { 
    font-size: 19px; 
    color: #333; 
    margin-bottom: 15px; 
    padding-left: 10px;
    border-left: 4px solid #ca1818; 
    /* ⭐ 아래 info_row의 padding-left와 비슷하게 맞춰서 줄 세우기 */
    margin-left: 15%; 
    text-align: left;
}

/* 공통 시간 안내 (영업시간 정렬 맞춤) */
.common_time { 
    margin-top: 15px;
    padding-left: 15% !important; /* ⭐ 다른 줄과 시작점 통일 */
    text-align: left;
}

/* 구분선 */
.divider { 
    border: 0; 
    border-top: 1px dashed #eee; 
    margin: 20px auto; 
    width: 100%; 
}

/* 갤러리 (기존 유지) */
.inner_gallery {
    flex: 1.2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
/* --- 갤러리 호버 효과 설정 --- */
.inner_gallery {
    flex: 1.2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.gallery_item {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative; /* ⭐ 오버레이 배치를 위한 기준점 */
    cursor: pointer; /* ⭐ 클릭 가능하다는 표시 */
}

.gallery_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 어두운 배경 오버레이 (평소에는 숨김) */
.gallery_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* ⭐ 화면 어둡게 (투명도 0.6) */
    color: #fff; /* ⭐ 글자색 흰색 */
    display: flex;
    justify-content: center; /* ⭐ 가로 중앙 정렬 */
    align-items: center; /* ⭐ 세로 중앙 정렬 */
    opacity: 0; /* ⭐ 평소에는 투명 */
    transition: opacity 0.3s ease; /* ⭐ 부드러운 전환 효과 */
}

.gallery_overlay span {
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #fff; /* ⭐ 테두리 추가 (세련미) */
    padding: 8px 15px;
    /* border-radius: 5px; */
}

/* ⭐ 마우스를 올렸을 때(호버) 오버레이 나타남 */
.gallery_item:hover .gallery_overlay {
    opacity: 1; /* ⭐ 투명도를 1로 만들어 보이게 함 */
}
/* 이벤트-------------------------------------------------------------------------------- */
.event_wrap { margin: 0 -15px; display: flex; }
.event_wrap::after { display: table; content: ''; clear: both;}

.event { width: 33.333%; padding: 0 15px; }

/* 기본 transition */
.event * { transition: all 0.3s ease; }

/* 카드 전체에 hover */
.event a {
  display: block;
}

.event a:hover {
  transform: translateY(-5px);
}

/* 이미지 효과 */
.event a:hover img { 
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
  transform: scale(1.01);
}

/* 이벤트 반응형------------------------------------------------------------------------- */
@media (max-width:768px){
    .event_wrap {flex-wrap: wrap; padding: 0 5%;}
    .event { width: 50%; }
}

@media (max-width:480px){
    .event_wrap { margin: 0 -10px;}
    .event { padding: 0 10px;}
}



.ad-banner-container {
    width: 100%;
    padding: 80px 0 0 0;
    display: flex;
    justify-content: center;
}

.ad-banner {
    width: 95%;
    max-width: 1100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #eee; /* 깔끔한 경계선 */
    border-left: 6px solid #C8232C; /* 로고색으로 포인트 강조 */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* 왼쪽 영역 */
.ad-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ad-tag {
    background-color: #C8232C; /* 배경색 채우기 */
    color: #fff;              /* 글자색 흰색 */
    padding: 1px 10px;         /* 안쪽 여백 */
    border-radius: 3px;        /* 살짝 둥글게 */
    font-size: 9px;
    display: inline-block;     /* 크기만큼만 배경색 적용 */
    width: fit-content;        /* 텍스트 길이에 맞춤 */
}

.brand-name {
    font-size: 18px;
    font-weight: 900;
    color: #ca1818;
}

.brand-name span {
    color: #F5A623;
}

/* 중앙 영역 */
.ad-center {
    flex: 1;
    margin: 0 40px;
}

.ad-msg {
    font-size: 18px;
    color: #555;
    margin: 0;
}

.ad-msg strong {
    color: #C8232C;
    font-weight: 700;
}

/* 오른쪽 버튼 영역 */
.ad-right {
    display: flex;
    gap: 10px;
}

.btn-app {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 6px;
    transition: 0.2s;
    color: #fff;
    white-space: nowrap;
}

/* 배민 민트색 */
.baemin {
    background-color: #2AC1BC;
}

/* 쿠팡 파란색 */
.coupang {
    background-color: #00AEEF;
}

.btn-app:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* 모바일 반응형 */
@media (max-width: 900px) {
    .ad-banner {
        height: auto;
        padding: 20px;
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .ad-center {
        margin: 0;
    }
}

/* 풋터------------------------------------------------------------------------------------- */
/* footer { width: 100%; margin-top: 100px; background: #777;}
.footer { display: flex; width: 1500px; margin:0 auto;} 

.f_logo { padding: 70px 30px 100px 0;}
.copy {  padding: 65px 0 0 25px; color: #ccc; font-weight: 500;}  */

.footer {
    margin-top: 100px;
    background: #eee;
    padding: 60px 0 40px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 14px;
}

.footer_inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 로고 & 가맹문의 */
.footer_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.footer_logo img {
    height: 40px; /* 로고 크기에 맞게 조절 */
    filter: grayscale(100%); /* 로고를 차분하게 회색톤으로 변경 */
    opacity: 0.7;
}

.contact_label {
    font-weight: bold;
    color: #333;
    margin-right: 10px;
}

.contact_number {
    font-size: 24px;
    font-weight: 800;
    color: #ca1818; /* 포인트 컬러인 빨간색 사용 */
}

.footer_divider {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin-bottom: 30px;
}

/* 기업 정보 */
.footer_info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    line-height: 1.8;
    flex-direction: column; /* ⭐ 가로가 아무리 넓어도 위아래 두 줄로 배치 */
}

.info_item span {
    display: inline-block;
    position: relative;
    margin-right: 15px;
}

/* 글자 사이 구분선 (|) */
.info_item span:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -10px;
    color: #ccc;
    font-size: 12px;
}

/* 하단 카피라이트 & SNS */
.footer_bottom {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
    font-size: 14px;
    color: #999;
}

.footer_sns a {
    margin-left: 20px;
    color: #999;
    text-decoration: none;
    transition: 0.3s;
}

.footer_sns a:hover {
    color: #ca1818;
}

/* 반응형 대응 */
@media (max-width: 768px) {
    .footer_top, .footer_bottom {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .footer_info {
        justify-content: center;
        text-align: center;
    }
    .info_item span::after {
        display: none;
    }
}


/* 풋터 반응형--------------------------------------------------------------------------------- */
@media (max-width:1220px){
    .footer { width: 100%; padding: 0 5%;} 
}

@media (max-width:768px){
    footer { margin-top: 100px;}
    .f_logo img { width: 90%; }
    .f_logo { padding: 73px 30px 70px 0;}
    .copy { font-size: 1.8vw; line-height: 2.8vw;}

}

@media (max-width:480px){
    footer { margin-top: 20px; padding: 30px 0 30px 10px;}
    .footer { flex-wrap: wrap;}
    .f_logo img { width: 30%; }
    .f_logo { width: 100%; padding: 0;}
    .copy{ font-size: 12px; line-height: 18px; padding: 20px 0 0 0px;}

}