@import url(reset.css);




/* 헤더 전체 레이아웃 */
header { width: 100%; position: relative; }
.header { position: relative; margin: 0 auto; display: flex; }
h1 { margin: 0 auto; padding: 30px 0 20px 0; }
h1 a img { display: block; }

/* 우측 상단 아이콘 */
.top_link { position: absolute; top: 54px; right: 150px; display: flex; }
.top_link li { padding: 0 10px; }
.top_link li a span { font-size: 1.5rem; }

/* 네비게이션 영역 */
nav { width: 100%; position: relative; z-index: 800; }
nav > ul.gnb { 
    width: 1200px; 
    display: flex; 
    margin: 0 auto; 
    justify-content: space-between; 
}
nav > ul.gnb > li { position: relative; }

/* 메인 메뉴 텍스트 및 호버 효과 */
nav > ul.gnb > li > a { 
    color: #000; 
    font-size: 18px; 
    display: block; 
    padding: 10px 20px; 
    margin-bottom: 10px; 
    text-align: center;
    transition: all 0.3s;
    border-radius: 4px;
}

/* ★ 중요: li에 호버했을 때 a의 배경색 유지 ★ */
nav > ul.gnb > li:hover > a {
    background-color: #172e17; /* 초록색 배경 */
    color: #fff;               /* 흰색 글자 */
}

/* 서브메뉴 위치 정렬 */
nav ul.sub { 
    position: absolute; 
    top: 44px;      
    left: 50%;      
    transform: translateX(-50%); 
    z-index: 888; 
    width: 160px;   
    display: none;  /* jQuery로 fadeIn/Out 제어용 */
    padding: 10px 0;
}
nav ul.sub li { text-align: center; width: 100%; }
nav ul.sub li a { 
    display: block; 
    padding: 10px 0; 
    color: #000; 
    font-size: 16px; 
    transition: all 0.3s;
}
nav ul.sub li a:hover { 
    color: #999; 
    font-size: 17px; 
}

/* 서브메뉴 전체 흰색 배경박스 */
.nav_bg { 
    background: #fff;
    width: 100%;
    height: 232px;
    position: absolute;
    top: 44px; /* GNB 높이에 맞춰 조정 */
    left: 0;
    z-index: 777;
    display: none; 
    border-bottom: 1px solid #eee;
}

.toggle { display: none; }
/* 메인배너--------------------------------------------------------------------------- */
.banner { width: 100%; position: relative; }

.slider-controls {
    position: absolute;
    bottom: 40px;
    right: 80px; 
    display: flex;
    align-items: center;
    gap: 40px;   /* 숫자와 화살표 사이 간격을 조금 더 넓힘 */
    z-index: 999;
}

/* 숫자 및 막대기 */
.slide-num {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Pretendard', sans-serif; /* 깔끔한 폰트 권장 */
    font-size: 14px;
    color: #333;
}

.progress-bar {
    width: 60px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
}
.progress-fill {
    position: absolute;
    left: 0; top: 0;
    width: 0%; height: 100%;
    background: #172e17;
    transition: width 0.9s ease;
}

/* 텍스트 화살표 스타일 */
.slide-arrows {
    display: flex;
    gap: 25px;
}
.slide-arrows .arrow {
    font-family: 'serif'; /* < > 모양이 더 예쁘게 나오는 명조체 계열 권장 */
    font-size: 22px;      /* 크기 조절 */
    font-weight: 300;     /* 얇게 설정하면 훨씬 고급스러움 */
    color: #333;
    text-decoration: none;
    line-height: 1;
    transition: 0.3s;
}

.slide-arrows .arrow:hover {
    color: #172e17; /* 브랜드 초록색으로 하이라이트 */
    opacity: 0.6;
}
/* 틀-------------------------------------------------------------------------------- */

main { width: 100%;}
.contents_wrap_1 { width: 100%; margin-top: 100px;}
.contents_wrap_2 { width: 100%; margin-top: 50px;}
.contents_wrap_3 { width: 100%; margin-top: 50px; background: #efeeea; padding-bottom: 100px;}
.contents { position: relative; width: 100%; margin: 0 auto;}
.contents_2 { position: relative; width: 1720px; margin: 0 auto;}

.sub_title { 
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 40px;
    font-weight: 400;
    padding-bottom: 30px;
}
.sub_tag { 
    display: flex;
    padding-bottom: 30px;
    gap: 20px;
    justify-content: center;
}
/* .sub_tag li { 
    border: 1px solid #ccc;
    padding: 5px 18px;
    border-radius: 50px;
} */
.sub_tag li a {
    font-size: 16px;
    font-weight: 400;
    color: #aaa;
}

/* 베스트----------------------------------------------------------------------------- */

/* 전체 레이아웃 가로 넘침 방지 */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 베스트 섹션 자체에도 안전장치 추가 */
.best_box_viewpoter {
    width: 100%;
    overflow: hidden; /* HTML에 inline으로 넣은 것과 동일 효과 */
}

/* 1. 최외곽 레이아웃 및 가로 스크롤 방지 */
.best_box_wrap {
    position: relative;
    width: 100%;
    overflow: hidden;    /* 슬라이더가 옆으로 삐져나와 가로 스크롤 생기는 것을 막음 */
    /* padding-top: 30px; */
}

/* 2. 슬라이더 본체 (Slick Slider 적용 대상) */
.best_box {
    display: flex;       /* 슬라이더 로딩 전 아이템 가로 배치 */
    width: 100%;
}

/* 3. 개별 상품 카드 및 간격 설정 */
.best {
    width: 100%;         /* 슬라이더가 개별 너비를 계산하므로 100% 유지 */
    outline: none;       /* 클릭 시 생기는 점선 테두리 제거 */
}

.best_box .slick-slide {
    margin: 0 25px;      /* 좌우 25px씩 여백을 주어 아이템 사이 간격을 총 50px로 설정 */
}

/* 4. 이미지 박스 (호버 효과의 기준점) */
.best .img_box {
    position: relative;  /* sub_img를 겹치기 위한 기준점 */
    width: 100%;
    cursor: pointer;
    overflow: hidden;    /* 이미지 확대 시 박스 밖으로 나가지 않게 함 */
}

/* 5. 이미지 공통 스타일 및 전환 효과 */
.best img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease-in-out; /* 사진이 바뀔 때 부드럽게 변함 */
}

/* 6. 메인/서브 이미지 겹치기 설정 */
.best .main_img {
    position: relative;
    z-index: 2;          /* 기본적으로 위에 보임 */
    opacity: 1;
}

.best .sub_img {
    position: absolute;  /* 메인 이미지와 같은 위치에 겹침 */
    top: 0;
    left: 0;
    z-index: 1;          /* 메인 뒤에 숨어 있음 */
    opacity: 0;          /* 평소엔 투명 */
}

/* 7. 마우스 호버 시 이미지 교체 */
.best .img_box:hover .main_img {
    opacity: 0;          /* 메인 숨기기 */
}

.best .img_box:hover .sub_img {
    opacity: 1;          /* 서브 보여주기 */
}

/* 8. 상품 정보 텍스트 (이름, 가격) */
.best_name { 
    font-size: 17px;
    font-weight: 400;
    color: #000;
    padding: 25px 0 12px 0;
}

.best_price { 
    font-size: 17px;
    font-weight: 400;
    color: #333;
}

/* 슬라이더 하단 페이지막대----------------------------------------------------------- */
/* 9. 슬라이더 하단 페이지 표시 (막대기 버튼) */
.slick-dots {
    position: relative !important;
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: 50px !important;  /* 사진과 막대기 사이의 간격 */
    width: 100%;
}

/* 10. 막대기 버튼 기본 상태 */
.slick-dots li {
    width: 30px; 
    height: 3px !important;
    margin: 0 5px;
    cursor: pointer;
    background-color: #e0e0e0;     /* 비활성 상태 색상 */
    border-radius: 20px;
    transition: all 0.3s ease;     /* 길어지는 효과를 위한 애니메이션 */
}

/* 11. 활성화된 막대기 (현재 보고 있는 슬라이드) */
.slick-dots li.slick-active {
    width: 50px;                   /* 더 길게 표시 */
    background-color: #6e6e6e;     /* 더 진한 색상 */
}

/* 12. 기존 버튼 기본 디자인 제거 */
.slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    text-indent: -9999px;          /* 숫자 텍스트 숨기기 */
}

.slick-dots li button:before {
    display: none !important;      /* Slick 기본 점(dot) 제거 */
}

/* 베스트 옆으로 넘기는 화살표--------------------------------------------------- */
/* 1. 화살표 버튼 기본 (동그라미) */
.best_box .slick-arrow {
    position: absolute;
    top: 43% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    width: 60px !important;  
    height: 60px !important;
    background: rgba(255, 255, 255, 0.4) !important; /* 은은한 흰색 */
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 마우스 호버 시 버튼 나타남 */
.best_box_wrap:hover .slick-arrow {
    opacity: 1 !important;
}

/* 2. 기존 글자나 아이콘 싹 제거 */
.best_box .slick-arrow::before,
.best_box .slick-arrow::after {
    display: none !important;
}

/* 3. ★ CSS로 직접 화살표 그리기 (완벽한 중앙 정렬) */
.best_box .slick-arrow:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* 화살표 선 만들기 */
.best_box .slick-arrow::before {
    display: block !important;
    content: '' !important;
    width: 15px;  /* 화살표 한쪽 선의 길이 */
    height: 15px;
    border-top: 2px solid rgba(0, 0, 0, 0.5); /* 선 두께와 색상 */
    border-left: 2px solid rgba(0, 0, 0, 0.5);
}

/* 왼쪽 화살표: 45도 회전 */
.best_box .slick-prev { left: 40px !important; }
.best_box .slick-prev::before {
    transform: rotate(-45deg);
    margin-left: 6px; /* 꺾인 부위 때문에 시각적으로 안 맞아 보일 때 미세 조정 */
}

/* 오른쪽 화살표: 135도 회전 */
.best_box .slick-next { right: 40px !important; }
.best_box .slick-next::before {
    transform: rotate(135deg);
    margin-right: 6px; /* 미세 조정 */
}
/* 뉴------------------------------------------------------------- */
.sub_tag li.active a {
    color: #000; /* 활성화된 글자색 */
}

/* 호버 효과 (선택사항) */
.sub_tag li a:hover {
    color: #666;
}

/* 1. 슬라이더 아이템 사이 간격 (중요!) */
.new_box .slick-slide {
    margin: 0 25px;      /* 좌우 25px씩 해서 사이 간격 50px 확보 */
    outline: none;
}

/* 2. 슬라이더 내부 나열 (JS 로딩 전용) */
.new_box {
    display: block;      /* Slick 실행 시 자동으로 block으로 관리됨 */
    width: 100%;
}

/* 3. 이미지 호버 효과 유지 */
.new_img_box {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.new_img_box .sub_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: 0.4s;
    z-index: 1;
}

.new:hover .sub_img {
    opacity: 1;
}

.new_name { 
    font-size: 17px;
    font-weight: 400;
    color: #000;
    padding: 25px 0 12px 0;
}

.new_price { 
    font-size: 17px;
    font-weight: 400;
    color: #333;
}


/* 1. 화살표 공통 스타일 */
.new_box_wrap {
    position: relative; /* 화살표 위치의 기준점 */
}

.arrow_btn {
    position: absolute;
    top: 40%;           /* 이미지 중앙쯤 오도록 조절 */
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    font-size: 40px;    /* 화살표 크기 */
    color: #ccc;        /* 화살표 색상 */
    cursor: pointer;
    transition: color 0.3s;
}

.arrow_btn:hover {
    color: #000;        /* 호버 시 색상 변경 */
}

/* 2. 각 화살표 위치 설정 */
.new_prev {
    left: -60px;        /* 박스 왼쪽 밖으로 위치 */
}

.new_next {
    right: -60px;       /* 박스 오른쪽 밖으로 위치 */
}

/* 슬라이더 하단 페이지막대--------------------------------------------------------- */
/* 3. 슬라이더 하단 페이지 표시 (막대기 버튼) */
.slick-dots {
    position: relative !important;
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: 50px !important;  /* 사진과 막대기 사이의 간격 */
    width: 100%;
}

/* 4. 막대기 버튼 기본 상태 */
.slick-dots li {
    width: 30px; 
    height: 3px !important;
    margin: 0 5px;
    cursor: pointer;
    background-color: #e0e0e0;     /* 비활성 상태 색상 */
    border-radius: 20px;
    transition: all 0.3s ease;     /* 길어지는 효과를 위한 애니메이션 */
}

/* 5. 활성화된 막대기 (현재 보고 있는 슬라이드) */
.slick-dots li.slick-active {
    width: 50px;                   /* 더 길게 표시 */
    background-color: #6e6e6e;     /* 더 진한 색상 */
}

/* 6. 기존 버튼 기본 디자인 제거 */
.slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    text-indent: -9999px;          /* 숫자 텍스트 숨기기 */
}

.slick-dots li button:before {
    display: none !important;      /* Slick 기본 점(dot) 제거 */
}


/* md--------------------------------------------------------- */

.md_box_wrap { 
    display: flex;
    display: grid; 
    gap: 100px; 
    grid-template-columns: repeat(2, 1fr); 
    padding-top: 20px;
}
.md_img { margin: 0 auto;}
/* .md_list_wrap { margin-top: 100px;} */
.md_list { display: flex; margin-top: 50px; align-items: center;}
.md_info { padding-left: 50px;}
.md_name { 
    font-size: 17px;
    font-weight: 400;
    color: #000;
    /* padding: 25px 0 12px 0; */
}

.md_price { 
    font-size: 17px;
    font-weight: 400;
    color: #333;
    padding: 12px 0 20px 0;
}
.md_text {
    word-break: keep-all; /* '캐주얼한'이 '캐주/얼한'으로 잘리는 걸 막아줍니다. */
    max-width: 400px; /* 적절한 너비를 주면 글자가 자연스럽게 두 줄이 됩니다. */
    font-size: 15px;
    color: #333;
}
.md_icon { 
    display: flex;
    padding-top: 30px;
    gap: 16px;
}
.md_icon span { 
    color: #aaa;
}

.md_list { border-bottom: 1px solid #ddd; padding-bottom: 50px; }
.md_list:last-child{border-bottom:none;}

/* 이미지들을 겹치기 위해 부모 요소에 기준점 설정 */
.md_list {
    position: relative;
}

/* 첫 번째 이미지 (기본) */
.md_list img:nth-of-type(1) {
    position: relative;
    z-index: 2;
    transition: opacity 0.4s ease;
}

/* 두 번째 이미지 (호버용) */
.md_list img:nth-of-type(2) {
    position: absolute;
    top: 0;             /* md_list의 padding-top이 0이므로 0으로 설정 */
    left: 0;
    z-index: 1;
    opacity: 0;         /* 평소엔 숨김 */
    transition: opacity 0.4s ease;
}

/* 마우스를 올렸을 때 이미지 교체 */
.md_list:hover img:nth-of-type(1) {
    opacity: 0;         /* 기본 이미지 숨김 */
}

.md_list:hover img:nth-of-type(2) {
    opacity: 1;         /* 호버 이미지 보여줌 */
}


/* md 더보기 효과--------------------------------------------- */

/* 버튼 위치 및 레이아웃 */
.circle_view_wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    cursor: pointer;
}

/* 동그란 배경 디자인 */
.circle_bg {
    width: 38px;
    height: 38px;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
}

/* 화살표 아이콘 */
.circle_bg span {
    font-size: 18px !important;
    color: #333;
    z-index: 2;
    transition: all 0.4s ease;
}

/* 옆에 붙는 텍스트 */
.circle_text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: #000;
    opacity: 0; /* 평소엔 숨김 */
    transform: translateX(-5px);
    transition: all 0.4s ease;
}

/* ★ 마우스를 .md_list에 올렸을 때 실행될 애니메이션 */

/* 1. 원이 검게 채워지면서 살짝 커짐 */
.md_list:hover .circle_bg {
    background: #172e17;
    border-color: #172e17;
}

/* 2. 화살표가 흰색으로 변하고 대각선으로 회전 */
.md_list:hover .circle_bg span {
    color: #fff;
    transform: rotate(0deg); /* 아이콘 모양에 따라 각도 조절 가능 */
}

/* 3. DISCOVER 글자가 스르륵 나타남 */
.md_list:hover .circle_text {
    opacity: 1;
    transform: translateX(0);
}

/* 아이콘 간격 미세 조정 */
.md_icon {
    margin-top: 15px;
}

/* 쿠폰--------------------------------------------------- */

.coupon_wrap {
    display: flex;
    gap: 100px;
    padding-top: 50px;
}

.coupon {
    display: flex;
    align-items: center;
    position: relative; /* 버튼 배치를 위해 기준점 설정 */
    width: 100%;
    height: 130px;
    background-color: #172e17; /* 이미지와 비슷한 딥그린 */
    border-radius: 20px;       /* 둥근 모서리 */
    padding: 0 100px;
    color: #fff;
}

.cp_info { 
    display: flex; 
    text-align: center; 
    align-items: center; 
    margin-right: auto; 
    gap: 40px;
}
.cp_logo img { width: 74%;}

.cp_txt {
    font-size: 24px;
    font-weight: 600;
}

.cp_btn {
    position: absolute;
    bottom: 12px;
    right: 100px;
    font-size: 12px;
    color: #ccc;
    border: 1px solid #fff;
    padding: 5px 15px;
    text-decoration: none;
}


/* 팝업---------------------------------------- */

.popup_box_wrap { display: flex; gap: 100px; align-items: center;}
.popup {display: flex;}

h3 { 
    font-size: 44px;
    font-weight: 600;
    color: #424141;
    padding: 70px 0;
    text-align: center;
}
.popup_box {
    display: flex;
    flex-direction: column; /* 세로로 나열 */
    gap: 50px;             /* ★ 위아래 팝업 사이의 간격 (원하는 만큼 조절) */
}

.popup_info { 
    padding-left: 40px;
}
.popup { align-items: center;}

.popup img {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.popup_name { 
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.popup_location {
    padding: 17px 0 15px 0;
    font-size: 17px;
}
.popup_time {
    font-size: 15px;
}
.popup_call {
    padding: 5px 0 20px 0;
    font-size: 15px;
}
/* .popup_more {
    border: 1px solid #ccc;
    display: inline-block; 
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.popup_more:hover {
    background: #172e17;
    color: #fff;
} */

/* 1. 기본 버튼 스타일 */
.popup_more {
    border: 1px solid #ccc;
    display: inline-flex; 
    align-items: center;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    gap: 0; 
    background: #fff; /* 배경색 고정 */
}

/* 2. 화살표 가상 요소 (평소엔 숨김) */
.popup_more::after {
    content: '→';
    opacity: 0;
    margin-left: -10px;
    transition: all 0.4s ease;
}

/* ★ 핵심: 버튼 자체가 아니라 .popup(부모 박스)에 마우스를 올렸을 때 실행 */
.popup:hover .popup_more {
    background: #172e17;
    color: #fff;
    border-color: #172e17;
    padding-right: 30px; /* 화살표가 들어올 공간 확보 */
}

.popup:hover .popup_more::after {
    opacity: 1;
    margin-left: 10px; /* 화살표가 슥 나타남 */
}

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

footer { 
    width: 100%; 
    background: #0b0b0b; /* 더 깊은 블랙 */
    padding: 100px 0 60px 0; 
    color: #888;
}

.footer_inner { 
    width: 1400px; /* 너무 넓지 않게 조정하여 시선 집중 */
    margin: 0 auto; 
}

/* 그리드 레이아웃: 요소들을 왼쪽부터 차곡차곡 */
.f_grid_wrap { 
    display: flex; 
    gap: 120px; /* 요소 사이의 고정 간격 (중간이 휑해지지 않음) */
    margin-bottom: 80px;
}

/* 각 컬럼 공통 */
.f_col h4 { 
    font-size: 13px; 
    color: #fff; 
    letter-spacing: 2px; 
    margin-bottom: 35px; 
    font-weight: 700;
}

/* CS 섹션은 조금 더 넓게 */
.cs_section { width: 350px; }
.cs_section .tel { font-size: 34px; color: #fff; font-weight: 800; margin-bottom: 15px; }
.cs_section .cs_info { font-size: 13px; line-height: 1.8; margin-bottom: 25px;}
.cs_section .cs_info b { color: #fff; margin-right: 5px; }

/* SNS 아이콘 */
.f_sns { display: flex; gap: 18px; }
.f_sns a { color: #444; font-size: 20px; transition: 0.3s; }
.f_sns a:hover { color: #fff; }

/* 메뉴 리스트 */
.f_col ul { list-style: none; padding: 0; margin: 0; }
.f_col ul li { margin-bottom: 15px; }
.f_col ul li a { color: #777; text-decoration: none; font-size: 14px; transition: 0.3s; }
.f_col ul li a:hover { color: #fff;  } 

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

/* 하단 영역 */
.f_bottom { display: flex; align-items: center; gap: 60px; }
.f_logo img { width: 80px; opacity: 0.5; filter: grayscale(1); }

.f_legal { display: flex;}
.f_policy { margin-bottom: 10px; }
.f_policy a { color: #aaa; text-decoration: none; font-size: 13px; margin-right: 25px; }
.f_policy a b { color: #fff; }

address { font-style: normal; font-size: 12px; line-height: 1.8; color: #444; margin-left: 15px;}