/* BASIC css start */
/* 메인 롤링 배너 */
.mainBan { }
.mainBan .sliderWrap {position:relative; min-width:1920px; height: 792px; overflow:hidden;}
.mainBan .sliderWrap .sliderArea {margin-left:-1500px;position:absolute;top:20%;left:50%;width:3000px;text-align: center; margin-top : 35px;}

.mainBan .sliderArea .bx-pager{position:absolute;bottom: 100px;left:0;right:0;z-index:60;text-align:center; font-size:20px; }
.mainBan .sliderArea .bx-pager-item{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;display:inline-block;position:relative;}
.mainBan .sliderArea .bx-pager-link{display:inline-block;width: 12px;height: 12px;font-size:0;margin: 0 5px;background-color: #3c3c3c;border-radius: 50%;}
.mainBan .sliderArea .bx-pager-link.active{background-color: #e4e4e4;}

/* 상품 타이틀 */
.h_title h3 { font-size: 28px; color:#2e2e2e; margin:100px 0 35px; text-align:center;}

#newWrap { width:1200px; margin:0 auto; }

.item-wrap .item-cont2 {overflow: hidden; margin-left:-20px;}
.item-wrap .item-cont2 .item-list {float:left;width: 285px; margin: 0 0 30px 20px;}
.item-wrap .item-cont2 .item-list .thumb { position: relative; }
.item-wrap .item-cont2 .item-list .thumb a { display:block; overflow:hidden }
.item-wrap .item-cont2 .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
.item-wrap .item-cont2 .item-list .thumb a:hover img {-webkit-transform: scale(1.15);transform: scale(1.15) }
.item-wrap .item-cont2 .item-list .thumb .clChip {margin-top:5px; }
.item-wrap .item-cont2 .item-list .thumb .clChip span {display: inline-block;width: 14px;height: 4px;}

/* MD'S PICK  롤링상품진열 */
.mdWrap { margin:100px 0;}
.mdPickWrap { position:relative; width:1200px; margin:0 auto;}
.mdPickWrap .h_title { float:left; position: absolute; left: 70px; top: 45px;}
.mdPickWrap .h_title h3 { margin: 0;}
.mdPickWrap .h_title h3 span {font-size: 13px; font-weight: normal; display:block;text-align:center;}
.mdPickWrap .h_title h3 span:before { content:''; width:30px;height:1px; background:#000; display:block;margin:14px auto;}
.mdPickWrap .sliderArea{position:relative; width:910px; float:right;}
.mdPickWrap .bx-pager { position: absolute; left: -196px; bottom: 30px; }
.mdPickWrap .bx-pager .bx-pager-item {display:inline-block; }
.mdPickWrap .bx-pager .bx-pager-item a { font-size:0; width:10px; height:10px; border-radius:50%; background:#8d8d8d;display:block;margin:0 4px;}
.mdPickWrap .bx-pager .bx-pager-item a.active { background:#000;}
.mdPickWrap .bx-controls-direction{color:#111;}
.mdPickWrap .bx-controls-direction .bx-next { right:-60px; }
.mdPickWrap .bx-controls-direction .bx-prev { left:-60px;}
.mdPickWrap .bx-controls-direction .bx-next,
.mdPickWrap .bx-controls-direction .bx-prev{position:absolute;top: 44%; display:inline-block;font-size: 30px;width: 40px;height: 40px;color:#8c8c8c;background-image: none; text-align:center; }
.mdPickWrap .bx-controls-direction .bx-prev:hover,
.mdPickWrap .bx-controls-direction .bx-next:hover { color:#2c2c2c; }
.mdPickWrap .bx-controls-direction i {line-height: 45px;}

.mdPickWrap .list { }
.mdPickWrap .list .thumb {position:relative; display:block; overflow:hidden; text-align: center;}
.mdPickWrap .list .thumb img { width:100%;}
.mdPickWrap .list .thumb:hover .prd-info { display:block; -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
.mdPickWrap .list .thumb .prd-info { display:none; position:absolute; right:0; bottom:0; width:100%; height:60px; background-color:rgba(255, 255, 255, 0.7);padding:20px 0 0;}
.mdPickWrap .list .thumb .prd-info:hover { background-color:rgba(255, 255, 255, 0.7);}
.mdPickWrap .prd-info .prd-name {font-size: 15px; }
.mdPickWrap .prd-info .prd-price del { color:#999; font-weight: normal; font-size: 14px; margin-right: 5px;}
.mdPickWrap .prd-info .prd-price {padding: 6px 0;font-size:15px;}
.mdPickWrap .list .thumb:hover .prd-preview { display:block; -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
.mdPickWrap .list .prd-preview {  display:none;position:absolute; left:0;right:0;bottom:-24px;;}
.mdPickWrap .list .prd-preview a { display:block;font-size:18px; line-height:40px; text-align:center;}

/* Video Area */
.videoWrap { margin-top:30px; position:relative; width: 100%; background:#f8f8f8 }
.videoWrap .videoInner { width: 1200px; margin: 0 auto ; padding: 100px 0;}
.videoWrap .videoInner .video { float:left;}
.videoWrap .videoInner .video iframe { width: 780px; height:430px;border:0; }

.add1Product {float:left;  margin:0 0 0 90px;  position:relative;width:285px}
.add1Product .item-list { text-align:center;}
.add1Product .item-list .thumb { position:relative; width:285px;border-radius:100%;overflow:hidden; }
.add1Product .item-list .thumb img { width:285px;}
.add1Product .item-list .thumb:hover .prd-preview { display:block; -webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease; }
.add1Product .item-list .thumb .prd-preview { display:none; position:absolute; left:50%; bottom:42%; width:40px; height:40px; margin-left:-20px;border-radius:100%;background-color:rgba(255, 255, 255, 0.9);}
.add1Product .item-list .thumb .prd-preview a { display:block;font-size:18px; line-height:40px; text-align:center;}
.add1Product .item-list .thumb .prd-preview:hover { background-color:rgba(255, 255, 255, 1);}
.add1Product .item-list .prd-name { padding:26px 0 0;font-size:16px; }
.add1Product .item-list .prd-subname { margin-top:8px;font-size:14px;color:#999; }
.add1Product .item-list .prd-price { padding:15px 0 0; font-size:16px; }
.add1Product .item-list .prd-price del { color:#999; font-size:14px; margin-right:5px; }

/* SPEICAL ITEM */
#specialWrap { width:1200px; margin:100px auto 0; }

.item-wrap .item-cont {overflow: hidden; margin-left:-20px;}
.item-wrap .item-cont .item-list {float:left;width: 255px; margin: 0 0 30px 20px;}
.item-wrap .item-cont .item-list .thumb { position: relative; }
.item-wrap .item-cont .item-list .thumb a { display:block; overflow:hidden }
.item-wrap .item-cont .item-list .thumb a img { width:100%;-webkit-transition: -webkit-transform 0.5s ease;transition:transform 0.5s ease;}
.item-wrap .item-cont .item-list .thumb a:hover img {-webkit-transform: scale(1.15);transform: scale(1.15) }
.item-wrap .item-cont .item-list .thumb .clChip {margin-top:5px; }
.item-wrap .item-cont .item-list .thumb .clChip span {display: inline-block;width: 14px;height: 4px;}

/* 롱배너 */
.bannerArea { margin:60px auto 0; }

#ftWrap { margin:0 !important; }

/* 하단 카테고리 제목 및 부가설명 폰트사이즈 25-08-21 */
h3.sub-desc {
    font-size: 16px !important;
    color: #666 !important;
    margin-top: -10px !important;
    margin-bottom: 30px !important;
    font-weight: normal !important;
    line-height: 1.4;
}

/* 중간 이미지 제목배너 정렬변경 25-08-21 */
.recommend-banner-img {
  display: block !important;
  margin: 160px auto 40px auto !important;
  max-width: 1200px;
}

/* 상품진열 섬네일 가운데 정렬 */
.item-wrap {
  max-width: 1200px;
  margin: 0 auto !important;
  width: 100%;
}


/* 더보기 도형 관련 소스 */
/* ========================================================== */
/* ▶ 더보기 버튼 스타일 (다이어리 더보기 등 공통 적용) */
/* ========================================================== */

/* 버튼 전체 박스 영역 */
.section .more_item a {
  display: flex;                   /* flexbox로 중앙 정렬 */
  align-items: center;             /* 세로축 가운데 정렬 */
  justify-content: center;         /* 가로축 가운데 정렬 */
  gap: 6px;                        /* 아이콘과 텍스트 사이 간격 */
  border: 1px solid #e4e4e4;       /* 버튼 외곽선 */
  padding: 12px 30px;              /* 버튼 안쪽 여백 (상하 12px, 좌우 30px) */
  border-radius: 6px;              /* 버튼 모서리 둥글기 */
  text-decoration: none;           /* 기본 a 태그 밑줄 제거 */
  transition: all 0.2s;            /* hover 시 부드럽게 전환 */
  background: #fff;                /* 버튼 배경색 */

  /* ====== 버튼 길이 관련 ====== */
  width: auto !important;          /* 내용 길이에 따라 자동 */
  min-width: 200px;                /* 버튼 최소 길이 (← 이 숫자 바꿔서 조절 가능) */
  max-width: 320px;                /* 버튼 최대 길이 (원하는 경우, 없애도 됨) */
  margin: 0 auto;                  /* 가로 가운데 정렬 */
  box-sizing: border-box;          /* padding 포함 크기 계산 */
}

/* 버튼 안 텍스트 */
.section .more_item a p {
  margin: 0;                       /* 불필요한 기본 여백 제거 */
  font-size: 15px;                 /* 글자 크기 */
  color: #333;                     /* 글자 색상 */
  font-family: 'Noto Sans KR', sans-serif; /* 폰트 */
  letter-spacing: 0.5px;           /* 글자 간격 */
  line-height: 1.4;                /* 줄 간격 */
  font-weight: 400;                /* 글자 굵기 */
  text-align: center;              /* 글자 가운데 정렬 */
  flex: 1;                         /* 텍스트를 flex 안에서 균형 배치 */
}

/* 버튼 hover 효과 */
.section .more_item a:hover {
  border-color: #000;              /* 마우스 올리면 테두리 색 */
  background-color: #f9f9f9;       /* 마우스 올리면 배경 */
}

.section .more_item a:hover p {
  color: #000;                     /* 마우스 올리면 글자색 */
}


/* 신상 배너 이미지 영역 */

.bannerArea {
  width: 100vw;      /* 브라우저 전체 너비 */
  margin: 20px 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* 가운데 보정 */
}

.bannerArea img {
  display: block;
  width: 100%;       /* 부모(.bannerArea)에 맞게 채움 */
  height: auto;
}


/* 제목 설명 하단 검은도형 캡슐 소스 25-08-22 */
/* 강조문구 도형 스타일 (캡슐형 버튼) */
.capsule-caption {
  display: inline-block;               /* 요소를 인라인 블록으로 → 글자 크기만큼 차지하면서 박스 스타일 적용 가능 */
  background-color: #000;              /* 배경색: 검정 */
  color: #fff;                         /* 글자색: 흰색 */

  /* 내부 여백 (padding) → 글자와 박스 테두리 사이 간격 */
  padding-top: 10px;                   /* 위쪽 안쪽 여백 */
  padding-right: 24px;                 /* 오른쪽 안쪽 여백 */
  padding-bottom: 10px;                /* 아래쪽 안쪽 여백 */
  padding-left: 24px;                  /* 왼쪽 안쪽 여백 */

  border-radius: 999px;                /* 모서리를 둥글게 → 아주 크게 주면 완전한 캡슐 형태 */
  font-size: 15px;                     /* 글자 크기 */
  font-weight: 600;                    /* 글자 굵기 (semi-bold) */
  text-align: center;                  /* 글자 가운데 정렬 */
  font-family: 'Noto Sans KR', sans-serif; /* 글꼴 지정 */
  cursor: default;                     /* 마우스 올렸을 때 기본 포인터 유지 (버튼 아님 표시) */

  /* 외부 여백 (margin) → 요소와 다른 요소 사이 간격 */
  margin-top: 6px;                     /* 위쪽 바깥 여백 */
  margin-bottom: 40px;                 /* 아래쪽 바깥 여백 (상품 썸네일과의 간격) */
  margin-right: 0;                     /* 오른쪽 바깥 여백 */  
  margin-left: 0;                      /* 왼쪽 바깥 여백 */
}

/* 호버 효과 (옵션) */
.capsule-caption:hover {
  background-color: #222;              /* 마우스 올리면 배경색을 좀 더 연한 검정으로 변경 */
  color: #f1f1f1;                      /* 글자색도 미묘하게 회색 톤으로 변경 */
}


/* ★★★★ 밑에 부터는 TEST 용 곧 지울것  초기 상태: 안 보임 */
/* ----------------------------- */
/* 스크롤 시 샤르륵 페이드 인 효과 */
/* ----------------------------- */
.fade-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

.fade-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------- */
/* 카운트다운 배너 전용 스타일 */
/* ----------------------------- */

/* 전체 배너 영역을 가운데 정렬 */
.countdown-banner {
  text-align: center;  /* 내부 요소들(링크, 이미지, 박스)을 가운데 정렬 */
}

/* 배너 안의 링크 스타일 */
.countdown-link {
  display: inline-block; /* 블록화하여 margin/padding 적용 가능 */
}

/* 배너 이미지 스타일 */
.countdown-img {
  max-width: 1000px;   /* 이미지 최대 크기 제한 (PC 기준) */
  width: 100%;         /* 반응형: 화면에 맞춰 늘어남 */
  height: auto;        /* 원본 비율 유지 */
  border-radius: 12px; /* 이미지 모서리 둥글게 처리 */
  display: block;      /* 블록 요소화 (줄바꿈됨) */
  margin: 0 auto;      /* 좌우 자동 마진 → 가운데 정렬 */
}

/* 이미지 밑 하단에 표시되는 카운트다운 박스 */
.countdown-box {
  display: inline-block;              /* 가로 크기만 차지, inline 속성처럼 한 줄 배치 */
  margin-top: 16px;                   /* 이미지와의 간격 */
  background: orange;                 /* 배경색 오렌지 */
  color: #fff;                        /* 글자색 흰색 */
  font-weight: bold;                  /* 글자 두껍게 */
  font-size: 22px;                    /* 글자 크기 */
  padding: 12px 24px;                 /* 내부 여백: 위아래 12px, 좌우 24px */
  border-radius: 30px;                /* 캡슐 모양 둥근 모서리 */
  white-space: nowrap;                /* 줄바꿈 방지 (한 줄 유지) */
  box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* 살짝 그림자 효과 */
}


.engrave-container {
  position: relative;
  display: inline-block;
}

.engrave-img {
  display: block;
  max-width: 100%;
}


/* BASIC css end */