/* BASIC css start */
#main {width:1100px; margin:0 auto;}

/* =========================
   Section Title
========================= */
.sec_title {margin:0 0 28px;}
.sec_title .sec_sub_title {display:flex; align-items:center;}
.sec_title .sec_sub_title h2 {font-size:30px; font-weight:800; flex:1; color:var(--000);}
.sec_title .sec_sub_title span img {vertical-align:middle; margin-right:6px;}
.sec_title .sec_sub_title a {font-size:15px; font-weight:600; color:#333; letter-spacing:-0.02em;}
.sec_title .sec_sub_title .fa {margin:0 5px; font-size:18px;}
.sec_title p {display:block; font-size:17px; color:#8f8f8f; margin-top:10px; font-weight:500;}

/* =========================
   Product List
========================= */
.product-wrap {margin:0 auto; position:relative; width:1100px;}
.dis_percent {color:var(--main-color); font-weight:800;}

.prd_list .thumb img {width:100%; border-radius:6px;}
.prd_list .shoppingInfo .cart_button {margin:12px 0;}
.prd_list .shoppingInfo .cart_button a {
  color:var(--000);
  font-size:14px;
  padding:8px 0 6px;
  box-sizing:border-box;
  display:inline-block;
  text-align:center;
  width:100%;
  border:1px solid #E5E5E5;
  border-radius:6px;
  transition:all 0.2s;
  background:#fff;
}
.prd_list .shoppingInfo .cart_button .btnOrange.btnBorder {box-shadow:0 0 0 0 var(--main-color);}
.prd_list .shoppingInfo .cart_button .btnOrange.btnBorder:hover {border:1px solid var(--main-color); box-shadow:0 0 0 1px var(--main-color);}

.prd_list .shoppingInfo .cart_button a img {vertical-align:middle; transform:scale(0.75); padding-bottom:3px;}

.reveiw_count {margin-top:10px; font-size:14px; font-weight:800;}
.reveiw_count .review_numer {color:#999; font-weight:500;}
.reveiw_count .review_star {margin:0 3px;}
.reveiw_count img {vertical-align:top;}

.prd_list .list5x li {width:calc(20% - 20px); display:inline-block; margin-right:20px; margin-bottom:44px; vertical-align:top;}
.prd_list .list5x li:nth-child(5n) {margin-right:0;}

.prd_list .thumb {position:relative;}
.prd_list .thumb .ranking {
  font-size:16px;
  position:absolute; left:0; top:0;
  display:block;
  width:30px; height:30px; line-height:30px;
  background-color:var(--main-color);
  color:var(--fff);
  text-align:center;
  z-index:11;
  border-radius:6px 0 6px 0;
}

.prd_list .shoppingInfo .listName a {font-size:16px; color:#222; overflow-wrap:break-word; white-space:normal;}
.prd_list .shoppingInfo .listDiscount del {display:inline-block; font-size:14px; color:#999; margin-top:10px;}
.prd_list .shoppingInfo .listPrice {font-size:17px; color:#222; font-weight:900;}
.prd_list .swiper-slide {padding:1px; box-sizing:border-box;}

/* =========================
   Section Spacing
========================= */
.secinner {margin:90px auto; position:relative;}

/* =========================
   Swiper Buttons
========================= */
.sec_content .swiper-button-next {
  text-indent:-9999px;
  background-image:url('//skin.makeshop.co.kr/skin/eating/pc/image/swipe_next.png');
  background-repeat:no-repeat;
  width:50px; height:50px;
  right:-25px;
  background-color:#fff;
  border-radius:40px;
  box-shadow:0 3px 6px rgba(0,0,0,0.10);
  background-position:50% center;
  top:50%;
}
.sec_content .swiper-button-prev {
  text-indent:-9999px;
  background-image:url('//skin.makeshop.co.kr/skin/eating/pc/image/swipe_prev.png');
  background-repeat:no-repeat;
  width:50px; height:50px;
  left:-25px;
  background-color:#fff;
  border-radius:40px;
  box-shadow:0 3px 6px rgba(0,0,0,0.10);
  background-position:50% center;
  top:50%;
}
.sec_content .swiper-button-lock {display:block;}

.video-swiper .swiper-button-next,
.video-swiper .swiper-button-prev {top:60%;}

/* =========================
   Main Visual Banner
========================= */
#mainSpot {position:relative; width:100%; min-width:1100px; overflow:hidden;}
#mainSpot .swiper-slide {margin:0 auto; text-align:center;}
#mainSpot .swiper-slide img {width:100%; height:auto; display:block;}

/* ✅ 메인배너만 풀폭 */
#main #mainSpot{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-width:0;
}
#main #mainSpot .swiper-slide img{
  width:100%;
  height:auto;
  display:block;
}


#sec2.secinner{
  width:1100px;
  margin:34px auto 70px;
  position:relative;
}

#sec2 .sec_content{width:100%;}

/* 4개 가로 정렬 */
#sec2 .sec_content ul{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:20px;
  padding:0;
  margin:0;
  list-style:none;
}

/* 카드 폭 */
#sec2 .sec_content ul li{
  flex:0 0 265px;        /* 원하면 250~290 사이로 조절 */
  margin:0;
}

/* 버튼(가로형) */
#sec2 .sec_content ul li a{
  height:88px;           /* 가로형이라 높이 낮게 */
  padding:14px 16px;
  box-sizing:border-box;

  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;

  gap:18px;              /* 👈 아이콘-텍스트 간격(원하면 14~22) */
  text-align:left;

  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:14px;    /* 라운드 살짝 */
  overflow:hidden;

  transform:translateY(0);
  box-shadow:0 0 0 rgba(0,0,0,0);

  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
/* ✅ 가운데 정렬(가로 전체 중앙 정렬) */
#sec2 .sec_content ul{
  justify-content: center;   /* 이미 들어있으면 유지 */
}

/* ✅ 카드 안에서 아이콘+글자 '세로 중앙' + 좌우 정렬 유지 */
#sec2 .sec_content ul li a{
  align-items: center;       /* 이미 들어있으면 유지 */
}

/* 아이콘 */
#sec2 .sec_content ul li a img{
  width:76px;            /* 가로형은 40~52 추천 */
  height:auto;
  display:block;
  flex:0 0 auto;

  transition:transform .18s ease;
}

/* 텍스트( span 권장 / p도 대응 ) */
#sec2 .sec_content ul li a span,
#sec2 .sec_content ul li a p{
  margin:0;              /* p 기본 margin 제거 */
  font-size:30px;
  font-weight:800;
  color:#222;
  line-height:1.1;
  letter-spacing:-0.3px;
  white-space:nowrap;
}

/* Hover */
#sec2 .sec_content ul li a:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
  border-color:#d6d6d6;
  background:#fff;
}

#sec2 .sec_content ul li a:hover img{
  transform:scale(1.06);
}

/* Focus (접근성) */
#sec2 .sec_content ul li a:focus-visible{
  outline:2px solid rgba(0,0,0,0.25);
  outline-offset:3px;
}

/* p가 a 밖에 남아있는 구조라면(비추천) - 그래도 보기만 맞추기 */
#sec2 .sec_content ul li > p{
  margin-top:10px;
  text-align:center;
  font-size:18px;
  font-weight:800;
  color:#222;
}

/* 반응형: 창 줄면 2개씩 */
@media screen and (max-width:1200px){
  #sec2.secinner{ width:100%; padding:0 20px; box-sizing:border-box; }
  #sec2 .sec_content ul{ justify-content:space-between; }
  #sec2 .sec_content ul li{ flex:1; max-width:270px; }
}

@media screen and (max-width:900px){
  #sec2 .sec_content ul{ flex-wrap:wrap; }
  #sec2 .sec_content ul li{ flex:0 0 calc(50% - 10px); max-width:none; }
}

/* =========================
   Image Banner
========================= */
.imgBanner {margin:30px auto 0; position:relative; width:1100px; overflow:hidden;}
.imgBanner ul {*zoom:1;}
.imgBanner ul:after {display:block; clear:both; content:'';}
.imgBanner ul li {padding-right:10px; float:left;}

/* =========================
   ✅ SEC3 인기상품 썸네일 높이 통일
========================= */
#sec3 .prd_list .thumb{
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:6px;
  background:#f5f5f5;
}
#sec3 .prd_list .thumb a{
  display:block;
  width:100%;
  height:100%;
}
#sec3 .prd_list .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}

#sec6 .prd_list .thumb{
  width:100%;
  aspect-ratio:1 / 1;   /* 정사각 통일 */
  overflow:hidden;
  border-radius:6px;
  background:#f5f5f5;
}
#sec6 .prd_list .thumb a{
  display:block;
  width:100%;
  height:100%;
}
#sec6 .prd_list .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;      /* thumb에서 라운드 처리 */
}

/* =========================
   ✅ SEC5 배너 세로 키우기
========================= */
#sec5{
  width:1100px;
  margin:90px auto;
  overflow:hidden;
}
#sec5 a{
  display:block;
  height:320px;
}
#sec5 img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.listName.bold {
  margin-top: 15px;
}

/* =========================
   Responsive (PC에서만 살짝 대응)
========================= */
@media screen and (max-width:1200px){
  #main{width:100%; padding:0 20px; box-sizing:border-box;}
  .product-wrap{width:100%;}
  #sec2.secinner{width:100%; padding:0 20px; box-sizing:border-box;}
  #sec2 .sec_content ul{justify-content:space-between;}
  #sec2 .sec_content ul li{flex:1; max-width:240px;}
}
@media screen and (max-width:900px){
  #sec2 .sec_content ul{flex-wrap:wrap;}
  #sec2 .sec_content ul li{flex:0 0 calc(50% - 10px); max-width:none;}
  #sec2 .sec_content ul li a{height:150px;}
}
/* BASIC css end */