/* 기본 스타일 초기화 및 폰트 설정 */
body, h1, h2, h3, p, ul, input, button{
margin:0; padding:0; box-sizing:border-box; font-family:'Noto Sans KR', sans-serif;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}

.content-container{
	width:1050px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

/* 상단 배너 */
.top-banner{width:100%; background:#1a5632; color:white;}
.top-banner .content-container{height:40px; justify-content:center; font-size:14px;}

#background-video-container{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:200px;
    overflow:hidden;
    z-index:-1;
    padding-bottom:23%;
    margin-bottom:30px;
    background:#000;
}

#background-video{
    position:absolute;
    right:0;
    top:-220px;
    min-width:100%;
    min-height:1140px;
    width:auto;
    height:auto;
    z-index:-1;
    opacity:0.7;
}
.animation{
    box-sizing:border-box;
    position:relative;
    text-align:center;
    margin-top:140px;
}

.textBox01{
    overflow:hidden;
    display:block;
    width:auto;
    height:70px;
    color:#fff;
    font-weight:500;
}
.textBox02{
    overflow:hidden;
    display:block;
    width:auto;
    height:90px;
    color:#fff;
    font-weight:500;
}

.textBox01 h3{
    animation-name:slideInUp;
    animation-duration:1s;
    animation-fill-mode:both;
    animation-delay:1.5s;
    font-size:40px;
}

.textBox02 h4{
    animation-name:slideInUp;
    animation-duration:1s;
    animation-fill-mode:both;
    animation-delay:2s;
    margin:0;
    font-size:50px;
}

@keyframes slideInUp{
    from{transform:translate3d(0,100%,0); visibility:visible;}
    to{transform:translate3d(0,0,0);}
}


/* 헤더 */
.header{width:100%; padding-top:20px;}
.header .content-container{height:70px;}
.header-main{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
}
.header-left{display:flex; align-items:center;}
.header-left h1{font-size:30px; margin-right:20px;}
.header-left .nav-link{font-size:18px; padding:5px 10px; color:#ccc;}
.header-left .nav-link.active{color:#5f0080; font-weight:bold; border-bottom:2px solid #5f0080;}
.search-bar{position:relative; width:400px;}
.search-bar input{
width:100%;
height:45px;
border:1px solid #28894e;
border-radius:6px;
padding:0 20px;
font-size:16px;
}
.search-bar button{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
border:none;
background:none;
cursor:pointer;
}
.search-bar .material-icons{color:#257b47; font-size:28px;}
.header-right{display:flex; gap:20px;}
.header-right .material-icons{font-size:28px; cursor:pointer;}
.product-grid-container{overflow:hidden; position:relative;}
/* ─── 히어로 배너 Slider ─── */
.hero-banner{position:relative; width:100%; height:370px;}
.banner-slide{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	background-size:cover;
	background-position:center;
	transition:opacity 0.5s ease;
}
.banner-slide.active{opacity:1; z-index:1;}
.banner-controls .pause,
.banner-controls .chevron_left,
.banner-controls .chevron_right{

  cursor:pointer;
}

/**/
/* Slick 아이템 간격 주기 */
.autoplay .slick-slide{

/* 좌우 마진 = (gap 18px) / 2 */
margin:0 9px;
box-sizing:border-box;
}


.autoplay.slick-initialized{

display:flex;
align-items:stretch;
}


.product-item{

width:249px;
}

/* 필요 시 hover, 버튼 등 기존 스타일 그대로 */
.product-item .product-image-container img{

transition:transform .3s;
}
.product-item:hover .product-image-container img{

transform:scale(1.05);
}
/* 메인 네비게이션 */
.main-nav-wrapper{width:100%; border-bottom:1px solid #f4f4f4;}
.main-nav-wrapper a{text-decoration:none;}
.main-nav-wrapper .content-container{height:56px;}
.main-nav{
display:flex;
align-items:center;
gap:40px;
}
.main-nav li a{
font-size:16px;
font-weight:bold;
}
.main-nav li:first-child{
display:flex;
align-items:center;
gap:5px;
}
.delivery-info a{
border:1px solid #e3e3e3;
border-radius:15px;
padding:5px 10px;
font-size:13px;
color:#666;
}

/* 메인 콘텐츠 (히어로 배너) */
.main-content{
width:100%;
}
.hero-banner{
position:relative;
width:100%;
height:450px;
background-image:url('https://images.unsplash.com/photo-1598928636135-d146006ff4be?q=80&w=2070&auto=format&fit=crop');
background-size:cover;
background-position:center;
color:#333;
}
.banner-content-wrapper{
height:100%;
align-items:flex-start;
padding-top:60px;
}
.banner-text-content h2{
font-size:28px;
font-weight:500;
}
.banner-text-content h1{
font-size:42px;
font-weight:bold;
margin:8px 0;
}
.banner-text-content p{
font-size:16px;
color:#555;
line-height:1.5;
}
.banner-controls-wrapper{
position:absolute;
bottom:20px;
left:0;
width:100%;
}
.banner-controls{
display:flex;                  /* 자식 요소들을 가로로 배치합니다. */
justify-content:space-between; /* 자식들을 양쪽 끝으로 밀어냅니다. */
align-items:center;            /* 세로로 가운데 정렬합니다. */
width:100%;                    /* 부모 너비를 꽉 채웁니다. */
}

/* --- ★ 슬라이더 컨트롤 UI 정밀 수정 ★ --- */

.slider-controls{
display:flex;
align-items:center;
justify-content:center;
max-width:220px;      /* ★ 최소 가로 길이를 130px로 수정했습니다. */
box-sizing:border-box;
gap:4px;              /* 간격을 조금 더 줄여서 좁은 너비에 맞춥니다. */
background-color:rgba(0, 0, 0, 0.15);
padding:6px 10px;     /* 내부 좌우 여백도 살짝 줄입니다. */
border-radius:30px;
font-size:12px;       /* 폰트 크기를 미세하게 조정합니다. */
color:white;
}
.slider-controls .material-icons{
cursor:pointer;
font-size:20px; /* 아이콘 크기 조정 */
}
.slider-controls .page-info{
font-family:Arial, sans-serif; /* 숫자 폰트를 깔끔하게 */
padding:0 4px;
}
.slider-controls .page-info strong{
font-weight:bold;
}
.slider-controls .separator{
color:rgba(255, 255, 255, 0.5); /* 구분선 색상 반투명하게 */
margin:0 4px; /* 구분선 좌우 여백 */
font-weight:100;
}
.slider-controls .view-all{
cursor:pointer;
font-weight:bold; /* '전체보기' 텍스트 굵게 */
}

/* ★ 새로 추가된 코드 ★ */

/* 상품 섹션을 감싸는 컨테이너 */
.content-container-wrapper{
width:1050px;
margin:0 auto;
}

/* 상품 섹션 */
.product-section{
margin-top:60px; /* 히어로 배너와의 간격 */
}

.section-title{
text-align:center;
margin-bottom:30px;
}

.section-title h2{
font-size:28px;
font-weight:500;
}

.section-title p{
color:#999;
margin-top:5px;
font-size:16px;
}
/* ✅ 이 코드가 있어야 합니다. ✅ */
.product-grid{
display:grid;
grid-auto-flow:column; /* 아이템을 가로 한 줄로 배열 */
grid-auto-columns:249px; /* 각 상품의 너비 고정 */
gap:18px;
overflow-x:scroll; /* 스크롤 가능하게 만듦 */
scroll-behavior:smooth;
padding-bottom:10px;
-ms-overflow-style:none;
scrollbar-width:none;
}
.product-grid::-webkit-scrollbar{
display:none;
}

.product-item{
cursor:pointer;
width:249px;
}

/* style.css에서 이 부분을 찾아 아래 내용으로 바꾸세요. */

.product-image-container{
position:relative;
overflow:hidden;
border-radius:4px;
height:320px;
}

.product-image-container img{
width:100%;
display:block;
transition:transform 0.3s;
}

.product-item:hover .product-image-container img{
transform:scale(1.05); /* 마우스 올리면 이미지 확대 */
}

.add-cart-btn{
/* 기존 position, bottom, right, opacity 등 속성 모두 제거 */
width:100%;                  /* 너비를 꽉 채웁니다. */
margin-top:12px;             /* 이미지와의 간격을 줍니다. */
padding:9px 0;               /* 버튼의 세로 크기를 조절합니다. */

background-color:#fff;       /* 배경을 흰색으로 변경합니다. */
border:1px solid #e3e3e3;    /* 옅은 회색 테두리를 추가합니다. */
border-radius:4px;

color:#333;                   /* 글자 색을 검은색 계열로 변경합니다. */
font-size:16px;
font-weight:600;

display:flex;                /* 아이콘과 텍스트 정렬을 위해 flex 사용 */
justify-content:center;      /* 가로 중앙 정렬 */
align-items:center;          /* 세로 중앙 정렬 */
gap:8px;                     /* 아이콘과 '담기' 글자 사이 간격 */

cursor:pointer;
transition:background-color 0.2s; /* 부드러운 호버 효과 */
}

.product-item:hover .add-cart-btn{
opacity:1; /* 마우스 올리면 나타남 */
}

.product-info{
padding:14px 0;
}

.product-info h3{
font-size:16px;
font-weight:400;
/* 텍스트가 길어지면 ...으로 표시 */
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.product-info .price{
font-size:16px;
font-weight:800;
margin-top:8px;
}

.product-info .discount{
color:#fa622f; /* 할인율 주황색 */
margin-right:8px;
}

.product-info .original-price{
font-size:14px;
color:#b5b5b5;
text-decoration:line-through; /* 취소선 */
margin-top:4px;
}

/* 상품 섹션 전체 래퍼 (버튼 위치 기준점) */
.product-section-wrapper{
position:relative;
}

/* 상품 그리드 컨테이너 (스크롤 숨김 처리) */
.product-grid-container{
overflow:hidden; /* 내부에서 넘치는 내용을 숨김 */}
.product-grid::-webkit-scrollbar{
display:none; /* Chrome, Safari, Opera */}

.css-59n5un{
width:1050px;
margin:0px auto;
padding:40px 0px 0;
}
.css-1pkfdwt{
position:relative;
display:block;
overflow:hidden;
height:140px;
}
.css-1h815p2{
	display:flex;
	-webkit-box-pack:center;
	justify-content:center;
	width:516px;
	margin:20px auto;
	padding:17px 0;
	border:1px solid rgb(221, 221, 221);
	border-radius:3px;
	font-size:16px;
	color:rgb(0, 0, 0);
	letter-spacing:-0.25px;
	cursor:pointer;
	text-decoration:none;
}


.brand-carousel-wrap{background:#f1f5f8; overflow:hidden; margin-top:40px;}
.brand-carousel{

  max-width:1050px;
  margin:40px auto;
  padding:0 20px;
}

/* 상단 타이틀 */
.brand-carousel__header{

  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:20px;
  font-size:1.2rem;
  font-weight:500;
}
.brand-carousel__header .material-icons{

  font-size:1.3rem;
  margin:0 4px;
}
.brand-carousel__header a{

  margin-left:6px;
  text-decoration:none;
  color:#555;
  font-weight:400;
}

/* 슬라이더 컨테이너 */
.brand-carousel__slider{position:relative;}

/* 브랜드 아이템 */
.brand-item{text-align:center; padding:0 10px;}
.brand-item__thumb{

  width:130px;
  height:130px;
  margin:0 auto 8px;
  position:relative;
  border-radius:50%;
  overflow:hidden;
  background:#eee;
}
.brand-item__thumb img{

  width:100%;
  height:100%;
  object-fit:cover;
}
.brand-item__thumb .overlay{

  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  white-space:nowrap;
}
.brand-item__name{

  font-size:0.9rem;
  color:#555;
}

/* --------------------------
   좌우 버튼 공통
   -------------------------- */
.slider-btn{

position:absolute;
top:50%;
transform:translateY(-50%);
z-index:10;
width:52px;
height:52px;
background-color:white;
border:1px solid #f1f1f1;
border-radius:50%;
box-shadow:0 2px 6px rgba(0, 0, 0, 0.1);
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}
.slider-btn .material-icons{

  font-size:20px;
  color:#333;
}

.slider-wrapper{
position:relative;}
.prev-btn{
left:-18px;}
.next-btn{
right:-18px;}


/* --------------------------
   브랜드 섹션 래퍼와 버튼 위치
   -------------------------- */
.brand-carousel__slider.autoplay .brand-item{

  padding:0 10px;
}

/* Slick 내장 화살표/도트 숨기기 */
.product-grid.autoplay .slick-arrow,
.product-grid.autoplay .slick-dots,
.brand-carousel__slider.autoplay .slick-arrow,
.brand-carousel__slider.autoplay .slick-dots{

  display:none !important;
}
/* 2. Curation Section 전용 CSS */
.curation-section{

  background:#fff;
  padding:80px 0;
}
.content-container-wrapper{

  width:1050px;
  margin:0 auto;
  text-align:center;
}
.curation-title{

  font-size:28px;
  font-weight:600;
  margin-bottom:8px;
}
.curation-subtitle{

  font-size:16px;
  color:#666;
  margin-bottom:40px;
}

/* 슬라이더 래퍼 */
.slider-wrapper{

  position:relative;
  margin:0 -8px; /* 아이템 마진 보정 */
}
.curation-slider.autoplay{

  display:flex;
  padding:0 8px;
}
.curation-slider.autoplay .slick-track{

  display:flex;
}

/* 카드 */
.curation-item{

  position:relative;
  flex:0 0 auto;
  width:254px;
  margin:0 8px;
  border-radius:8px;
  overflow:hidden;
}
.curation-item img{

  display:block;
  width:100%;
  height:360px;
  object-fit:cover;
}
.curation-item .overlay{

  position:absolute;
  bottom:0;
  left:0; right:0;
  height:50%;
  padding:16px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.curation-item .overlay h4{

  font-size:18px;
  font-weight:500;
  line-height:1.3;
  margin:0 0 6px;
}
.curation-item .overlay p{

  font-size:14px;
  opacity:0.9;
  margin:0;
}

/* 그라디언트 색 */
.gradient-1 .overlay{
background:linear-gradient(to top, rgba(204,123,51,0.85), transparent); }
.gradient-2 .overlay{
background:linear-gradient(to top, rgba(172,68,77,0.85), transparent); }
.gradient-3 .overlay{
background:linear-gradient(to top, rgba(219,113,51,0.85), transparent); }
.gradient-4 .overlay{
background:linear-gradient(to top, rgba(128,128,128,0.85), transparent); }
.gradient-5 .overlay{
background:linear-gradient(to top, rgba(172,68,77,0.85), transparent); }

/* styles.css (변경 없음) */
*{
margin:0; padding:0; box-sizing:border-box; }
body{
font-family:'Apple SD Gothic Neo', sans-serif; color:#333; font-size:14px; line-height:1.6; }

.site-footer{
  background:#f1f5f8;
  color:#333;
}
.footer-top{

  display:flex;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
}
.customer-center{

  width:45%;
}
.cc-title{

  font-size:18px;
  margin-bottom:16px;
}
.cc-phone .number{

  display:block;
  font-size:32px;
  font-weight:bold;
}
.cc-phone .hours{

  display:block;
  margin-top:4px;
  color:#666;
}
.cc-inquiries{

  display:flex;
  margin-top:24px;
  gap:16px;
}
.inquiry-item{

  text-align:center;
}
.btn-inq{

  display:block;
  width:120px;
  padding:8px 0;
  border:1px solid #ddd;
  background:#fff;
  border-radius:4px;
  cursor:pointer;
}
.inq-desc{

  margin-top:8px;
  font-size:12px;
  color:#666;
  white-space:pre-line;
}
.cc-note{

  margin-top:24px;
  font-size:12px;
  color:#999;
}
.cc-note a{

  color:#999;
  text-decoration:underline;
}

.company-info{

  width:45%;
  text-align:right;
}
.ci-links a{

  margin-left:16px;
  font-size:12px;
  color:#666;
  text-decoration:none;
}
.ci-details{

  margin:16px 0;
  font-size:12px;
  color:#999;
  line-height:1.4;
}
.ci-details a{

  color:#999;
  text-decoration:underline;
}
.ci-social{

  margin-top:8px;
}
.ci-social .icon{

  display:inline-block;
  width:24px;
  height:24px;
  margin-left:8px;
  background-size:contain;
  background-repeat:no-repeat;
}
.ci-social .insta{background-image:url('img/icon-instagram.png'); }
.ci-social .facebook{background-image:url('img/icon-facebook.png'); }
.ci-social .blog{background-image:url('img/icon-blog.png'); }
.ci-social .youtube{background-image:url('img/icon-youtube.png'); }

.footer-separator{
	border:none;
	border-top:1px solid #eee;
	margin:0 auto;
	max-width:1200px;
}

.footer-middle{
  display:flex;
  justify-content:space-between;
  max-width:1050px;
  margin:24px auto;
  padding:0 20px;
}
.fm-left, .fm-right{
  width:48%;
  font-size:12px;
  color:#666;
}
.fm-left img{

  vertical-align:middle;
  height:40px;
}
.fm-left p, .fm-right p{

  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
}

.footer-bottom{
  max-width:880px;
  margin:0 auto 0;
  padding:0 20px;
  font-size:12px;
  color:#999;
  line-height:1.5;
}
.footer-bottom p{

  margin-bottom:16px;
}
/* 플로팅 퀵메뉴 */
.quick-menu{

position:absolute;
top:187px;
right:20px;
width:90px;
border:1px solid #e3e3e3;
background-color:white;
text-align:center;
font-size:13px;
z-index:9;
}


.quick-menu-image{
width:100%;
height:120px;
overflow:hidden;
}

.quick-menu-image img{
width:100%;
height:100%;
object-fit:cover;
}

.quick-menu a{
display:block;
padding:8px 0;
border-top:1px solid #f4f4f4;
color:#333;
text-decoration:none;
}

/* quick-menu.css에 추가 */
.quick-menu.sticky{

position:fixed;
top:20px;
transform:none;
}
#backToTop{
    position:fixed;
    right:31px;
    bottom:15px;
    width:58px;
    height:58px;
	border:transparent;
    opacity: 1;
	z-index:10;
	transition:opacity 0.5s, bottom 0.5s;
	background:url("img/top_move.png") 50% 50% / 58px 58px no-repeat;
}