/* BASIC css start */
#header {position:relative;width:100%;background:#fff; z-index:100}
.headerFix #header{ margin-top:-30px;position:fixed; top:0; left:0; right:0 }
.headerFix{padding-top:111px;}

.headerTop{height:30px;text-align:center;width:1200px;margin:0 auto;}
.headerTop .btnsLeft{float:left;height:100%;}
.headerTop .btnsRight{float:right;height:100%;}
.headerTop .list{float:left;}
.headerTop .link{display:block;padding:0 8px;line-height:31px;height:30px;color:#777;font-size:12px;font-weight:300;}
.headerTop .link:hover{color:#000;}
.headerTop .link.favorite{background-color:#00008C;color:#fffefe;width:102px;padding:0;margin-right:8px;}
.headerTop .link.favorite .ico{color:#fffd7d;display:inline-block;margin-right:4px;vertical-align:middle;}
.headerTop .link.basket .qual{display:inline-block;border-radius:5px;min-width:8px;padding:2px 7px;margin-left:4px;line-height:9px;background-color:#383838;color:#f3f3f3;}
.headerTop .link.lastLink{padding-right:0;}

.headerBottom{height:80px;background-color:#00008C;box-shadow:0px 1px 7px rgba(0,0,0,0.5);}
.headerBottom .headerBottomWrap{margin:0 auto;width:1200px;height:100%;position:relative;}
.headerBottom .tlogo{float:left;height:100%;}
.headerBottom .tlogo .logoLink{font-size:35px;font-weight:500;color:#fff;line-height:81px;}

.headerBottom .gnb{position:absolute;top:8px;left:233px;right:230px;}
.headerBottom .gnb .list{text-align:center;position:relative;float:left;}
.headerBottom .gnb .link{display:inline-block;padding:20px 31px;text-align:center;color:#fffefe;font-size:16px;font-weight:300;white-space:nowrap;}
.headerBottom .gnb .link:hover + .midCateArea, .headerBottom .gnb .midCateArea:hover{display:block;}
.headerBottom .midCateArea{display:none;position:absolute;top:100%;min-width:100%}
.headerBottom .midCateArea ul{padding:10px;}
.headerBottom .gnb .midLink{padding:10px;display:block;line-height:1;color:#7f7f7f;white-space:nowrap;text-align:left;}
.headerBottom .gnb .midLink:hover{color:#000;}

.headerBottom .searchArea{position:relative;float:right;width:220px;height:34px;margin-top:23px;}
.headerBottom .searchArea input{height:34px;border:0;color:#7d7d7d;font-weight:300;padding:0 50px 0 15px;width:155px;}
.headerBottom .searchArea .searchBtn{display:block;width:50px;height:34px;text-align:center;line-height:1;color:#979797;font-size:20px;position:absolute;top:0;right:0;}
.headerBottom .searchArea .searchBtn .fa{vertical-align:top;margin-top:7px;}

/* scroll 영역 */
.asideMenu{display:none;position:fixed;top:143px;right:0;z-index:999;border:1px solid #383838;border-right:0;background-color:#fff;padding:0 10px 19px;}
.asideMenu.on{display:block;}
.asideMenu .utilMenu .list{border-top:1px solid #eee;}
.asideMenu .utilMenu .list:first-child{border-top:0;}
.asideMenu .utilMenu .link{display:block;text-align:center;color:#777;font-size:12px;font-weight:300;padding:10px 0 6px;}
.asideMenu .utilMenu .fa{color:#383838;font-size:22px;display:block;}

.asideMenu .topBtn{display:block;position:absolute;bottom:0;left:0;right:0;font-size:16px;height:19px;background-color:#383838;color:#fff;text-align:center;line-height:1;}
.asideMenu .topBtn .fa{vertical-align:top;margin-top:1px;}

#today .today-cont{text-align: center;overflow:hidden;max-height:210px;width:100%;}
#todayWrap .title{text-align:center;color:#777;font-size:12px;font-weight:300;display:block;border-top:1px solid #eee;padding:10px 0 7px;}
#today .todaySlideArea li{padding-bottom:10px}
#today .todaySlideArea li:last-child{padding-bottom:0;}
#today .todaySlideArea a{display:block;}
#today .todaySlideArea img{width:76px;height:100px;}
#today .bx-viewport .listArea{height:210px;}
#today .today-btns {text-align: center;font-size:0;padding-bottom:7px;}
#today .today-btns button{background-color:transparent;padding:3px;line-height:0;color:#383838;font-size:17px;}
#today .today-btns .off{display:none;}

/* =========================
   HEADER CLEAN SKIN OVERRIDE
   - Noto Sans + Bigger Menu
   ========================== */

/* 전체 사이트 기본 폰트 Noto Sans로 통일 */
html, body, #wrap, #header,
#header * {
  font-family: "Noto Sans KR", "Noto Sans",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", sans-serif;
}

/* 헤더 전체 기본 톤 */
#header {
  background-color: #ffffff;
  box-shadow: none;
  border-bottom: 1px solid #f0f0f0;
}

/* 고정 헤더 상태일 때도 동일 톤 유지 */
#wrap.headerFix #header {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* 헤더 안 글자/컨트롤 공통 컬러 */
#header,
#header a,
#header button,
#header input,
#header select {
  color: #222222;
}

/* 링크 기본/호버 컬러 */
#header a {
  color: #333333;
}
#header a:hover {
  color: #111111;
}

/* =========================
   상단바 (headerTop)
   ========================== */
#header .headerTop {
  background-color: #ffffff;
  border-bottom: 1px solid #f3f3f3;
  color: #333333;
}

/* 상단바 메뉴 텍스트 */
#header .headerTop a {
  font-size: 12px;
  color: #555555;
  letter-spacing: 0.02em;
}
#header .headerTop a:hover {
  color: #111111;
}

#header .headerTop ul li {
  margin-right: 14px;
}
#header .headerTop ul li:last-child {
  margin-right: 0;
}

/* =========================
   하단바 (headerBottom)
   ========================== */
#header .headerBottom {
  background-color: #ffffff;
  box-shadow: none;
  border-bottom: 1px solid #f0f0f0;
}

/* 로고 텍스트 (텍스트 로고일 경우) */
#header .headerBottom h1.tlogo a,
#header .headerBottom .tlogo a {
  color: #111111;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* GNB 1depth 메뉴 – 폰트 사이즈 업 */
#header .headerBottom .gnb > li > a,
#header .headerBottom .gnbDepth1 > li > a {
  color: #222222;
  font-size: 15px;          /* ← 메뉴 글씨 키운 부분 */
  font-weight: 500;
  padding: 0 16px;
  line-height: 1;
}

/* GNB 1depth hover – 밑줄 대신 하단 라인 */
#header .headerBottom .gnb > li > a:hover,
#header .headerBottom .gnbDepth1 > li > a:hover {
  color: #111111;
  border-bottom: 2px solid #111111;
}

/* GNB 2depth (드롭다운) */
#header .headerBottom .gnbDepth2,
#header .headerBottom .sub_menu,
#header .headerBottom .depth2 {
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

#header .headerBottom .gnbDepth2 a,
#header .headerBottom .sub_menu a,
#header .headerBottom .depth2 a {
  color: #444444;
  font-size: 13px;
}
#header .headerBottom .gnbDepth2 a:hover,
#header .headerBottom .sub_menu a:hover,
#header .headerBottom .depth2 a:hover {
  color: #111111;
  background-color: #fafafa;
}

/* =========================
   검색 영역
   ========================== */
#header .headerBottom .searchWrap,
#header .headerBottom .search_area,
#header .headerBottom .headerSearch {
  background-color: transparent;
  border: none;
  position: relative;
}

/* 인풋 – 라운드 라인 스타일 */
#header .headerBottom input[type="text"],
#header .headerBottom input[type="search"] {
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  padding: 7px 32px 7px 12px;
  font-size: 12px;
  color: #222222;
}

#header .headerBottom input[type="text"]::placeholder,
#header .headerBottom input[type="search"]::placeholder {
  color: #b7b7b7;
}

#header .headerBottom input[type="text"]:focus,
#header .headerBottom input[type="search"]:focus {
  outline: none;
  border-color: #bbbbbb;
}

/* 검색 버튼(아이콘) */
#header .headerBottom .btnSearch,
#header .headerBottom .search_btn,
#header .headerBottom button[type="submit"] {
  background: none;
  border: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #777777;
  cursor: pointer;
}
#header .headerBottom .btnSearch:hover,
#header .headerBottom .search_btn:hover,
#header .headerBottom button[type="submit"]:hover {
  color: #333333;
}

/* =========================
   아이콘/카운트 톤 다운
   ========================== */
#header .cartCnt,
#header .basket_count,
#header .icon_cnt {
  background-color: #111111;
  color: #ffffff;
  font-size: 10px;
}

/* 아이콘 컬러 */
#header .topUtil a i,
#header .headerTop .ico,
#header .headerBottom .ico {
  color: #555555;
}

/* =========================
   GNB 메뉴 텍스트 오버라이드
   ========================== */

/* 1뎁스 메뉴 텍스트 */
#header .headerBottom .gnb .link {
  font-family: "Noto Sans KR", "Noto Sans", -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif !important;
  font-size: 17px !important;  /* ← 메뉴 크게 */
  font-weight: 500 !important;
  color: #222222 !important;
  padding: 20px 24px;          /* 필요하면 간격도 조절 */
  white-space: nowrap;
}

/* hover 스타일 */
#header .headerBottom .gnb .link:hover {
  color: #111111 !important;
  border-bottom: 2px solid #111111;
}

/* 2뎁스 메뉴 (중분류) */
#header .headerBottom .midCateArea .midLink {
  font-family: "Noto Sans KR", "Noto Sans", -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", sans-serif !important;
  font-size: 13px;
  color: #444444;
}
#header .headerBottom .midCateArea .midLink:hover {
  color: #111111;
  background-color: #fafafa;
}
/* 상단 얇은바 + 우측 플로팅 메뉴 숨기기 */
.headerTop {
  display: none !important;
}

.asideMenu {
  display: none !important;
}


/* 헤더 하단 플렉스 (이미 썼다면 그대로 두고, 없으면 추가) */
#header .headerBottom .headerBottomWrap {
  margin: 0 auto;
  width: 1200px;
  height: 80px;
  display: flex;
  align-items: center;
}

/* 로고 오른쪽 여백 */
#header .headerBottom .tlogo {
  float: none;
  margin-right: 32px;
}

/* GNB는 가운데 쪽에 */
#header .headerBottom .gnb {
  position: static;
  flex: 1 1 auto;
}

/* 유틸 메뉴 전체 */
#header .headerBottom .headerUtil ul {
  display: flex;
  align-items: center;
}

#header .headerBottom .headerUtil .list {
  margin-left: 12px;
}
#header .headerBottom .headerUtil .list:first-child {
  margin-left: 0;
}

#header .headerBottom .headerUtil .link {
  font-size: 13px;
  color: #555555;
}
#header .headerBottom .headerUtil .link:hover {
  color: #111111;
}

/* 검색 li 안의 인풋/버튼 정리 */
#header .headerBottom .headerUtil .list-search {
  position: relative;
  margin-left: 16px;
}

#header .headerBottom .headerUtil .list-search input[type="text"],
#header .headerBottom .headerUtil .list-search input[type="search"] {
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  padding: 6px 30px 6px 10px;
  font-size: 12px;
  color: #222222;
  min-width: 150px;
}

#header .headerBottom .headerUtil .list-search input::placeholder {
  color: #b7b7b7;
}

#header .headerBottom .headerUtil .list-search button,
#header .headerBottom .headerUtil .list-search .btnSearch,
#header .headerBottom .headerUtil .list-search .search_btn {
  background: none;
  border: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #777777;
  cursor: pointer;
}

/* 장바구니 수량 배지 */
#header .headerBottom .headerUtil .basket .qual {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px 0;
  margin-left: 4px;
  border-radius: 10px;
  background-color: #222222;
  color: #ffffff;
  font-size: 11px;
  text-align: center;
  line-height: 1.3;
}
/* 로고 이미지를 위한 오버라이드 */
#header .headerBottom .tlogo {
  float: none;          /* 이미 flex로 정렬 중이라 float 제거 */
  margin-right: 32px;
  height: 100%;
  display: flex;
  align-items: center;
}

#header .headerBottom .tlogo .logoLink {
  display: inline-flex;
  align-items: center;
  font-size: 0;         /* 텍스트 로고 스타일 제거 */
  line-height: 1;
  color: transparent;
}

#header .headerBottom .tlogo .logoLink img {
  display: block;
  height: 60px;         /* 로고 높이 여기서 조절 */
  width: auto;
}
/* 유틸 전체를 세로 중앙 정렬 */
#header .headerBottom .headerUtil {
  display: flex;
  align-items: center;
  margin-top: 0;
  font-family: "Noto Sans KR", "Noto Sans",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", sans-serif !important;
}

#header .headerBottom .headerUtil ul {
  display: flex;
  align-items: center;
}

/* 유틸 항목 간 간격 */
#header .headerBottom .headerUtil .list {
  margin-left: 12px;
}
#header .headerBottom .headerUtil .list:first-child {
  margin-left: 0;
}

/* 유틸 텍스트 공통 스타일 (로그인/회원가입 등) */
#header .headerBottom .headerUtil .link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: #555555;
}
#header .headerBottom .headerUtil .link:hover {
  color: #111111;
}

/* =========================
   검색 영역 정렬 & 버튼 스타일
   ========================== */

/* 검색 li 자체도 중앙정렬 */
#header .headerBottom .headerUtil .list-search {
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 16px;
}

/* searchArea / fieldset 여백 제거 + 플렉스 */
#header .headerBottom .headerUtil .list-search .searchArea {
  margin: 0;
  padding: 0;
}
#header .headerBottom .headerUtil .list-search .searchArea fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
}

#header .headerBottom .headerUtil .list-search input::placeholder {
  color: #b7b7b7;
}

#header .headerBottom .headerUtil .list-search .searchBtn i {
  display: block;
}

/* =========================
   장바구니 아이콘만 + 수량 뱃지 위치
   ========================== */

#header .headerBottom .headerUtil .basket {
  position: relative;
}

#header .headerBottom .headerUtil .basketIcon {
  font-size: 18px;
}

#header .headerBottom .headerUtil .basket .qual {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: #222222;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
}
/* 헤더 하단 전체 플렉스 (이미 있다면 그대로 두고) */
#header .headerBottom .headerBottomWrap {
  margin: 0 auto;
  width: 1200px;
  height: 80px;
  display: flex;
  align-items: center;   /* ← 세로 가운데 */
}

/* 유틸 영역 자체도 세로 가운데 */
#header .headerBottom .headerUtil {
  display: flex;
  align-items: center;
  height: 100%;
}

#header .headerBottom .headerUtil ul {
  display: flex;
  align-items: center;
}

#header .headerBottom .headerUtil .list {
  margin-left: 12px;
}
#header .headerBottom .headerUtil .list:first-child {
  margin-left: 0;
}

/* 유틸 텍스트 공통 스타일 */
#header .headerBottom .headerUtil .link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: #555555;
}
#header .headerBottom .headerUtil .link:hover {
  color: #111111;
}

/* 검색 li */
#header .headerBottom .headerUtil .list-search {
  position: relative;
  margin-left: 16px;
  display: flex;
  align-items: center;
}

/* searchArea / fieldset 여백 제거 */
#header .headerBottom .headerUtil .list-search .searchArea {
  margin: 0;
  padding: 0;
}
#header .headerBottom .headerUtil .list-search .searchArea fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* 검색 입력창 – 높이 줄이기 */
#header .headerBottom .headerUtil .list-search .searchInput input,
#header .headerBottom .headerUtil .list-search input[type="text"],
#header .headerBottom .headerUtil .list-search input[type="search"] {
  background-color: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  padding: 0px 10px 0px 10px;  /* ← 여기로 높이 조절 */
  font-size: 12px;
  color: #222222;
  min-width: 150px;
}

#header .headerBottom .headerUtil .list-search .searchBtn i {
  display: block;
}

#header .headerBottom .headerUtil .list-search input::placeholder {
  color: #b7b7b7;
}
/* 장바구니 아이콘 + 배지 */
#header .headerBottom .headerUtil .basket {
  position: relative;
}

#header .headerBottom .headerUtil .basketIcon {
  font-size: 24px;
}

#header .headerBottom .headerUtil .basket .qual {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: #222222;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
}
/* 장바구니 아이콘 이미지를 사용하는 스타일 */
#header .headerBottom .headerUtil .basket {
  position: relative;
}

/* 아이콘 자체 */
#header .headerBottom .headerUtil .basketIcon {
  display: inline-block;
  width: 20px;         /* 아이콘 가로 */
  height: 22px;        /* 아이콘 세로 */
  background: url("/design/keepaw/icons/shopping-bag_1656850.png") no-repeat center center;
  background-size: contain;
  margin-top: 7px;
}

/* 수량 뱃지 위치 */
#header .headerBottom .headerUtil .basket .qual {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 10px;
  padding: 0 2px;
  border-radius: 999px;
  background-color: #222222;
  color: #ffffff;
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
}
/* 검색 li 자체 정렬 (이미 있으면 그대로 두고, 없으면 추가) */
#header .headerBottom .headerUtil .list-search {
  position: relative;
  margin-left: 16px;
  display: flex;
  align-items: center;
}

/* searchArea와 fieldset 기본 여백 제거 */
#header .headerBottom .headerUtil .list-search .searchArea {
  margin: 0;
  padding: 0;
}
#header .headerBottom .headerUtil .list-search .searchArea fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#header .headerBottom .headerUtil .list-search input::placeholder {
  color: #b7b7b7;
}

/* 검색 버튼 – 배경/테두리 없이, 안에 이미지 아이콘만 */
#header .headerBottom .headerUtil .list-search .searchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 20px;
  background: none;
  border: none;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* 돋보기 아이콘 이미지 */
#header .headerBottom .headerUtil .list-search .searchIcon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/design/keepaw/icons/loupe_15387543.png") no-repeat center center;
  background-size: 20px;
  margin-top: 7px;
}

/* 아이콘 폰트가 Noto에 덮이지 않도록 복구 */
#header .fa,
#header .fa::before {
  font-family: "FontAwesome" !important;
  font-style: normal;
}
/* 회원가입,로그인 오른쪽 여백 더 주기 */
#header .headerBottom .headerUtil .list-join {
  margin-right: 8px;   /* 원하는 만큼 숫자 조절 */
}
#header .headerBottom .headerUtil .list-login {
  margin-right: 8px;   /* 예시 */
}



/* =========================
   GNB hover 한글 서브라벨
   ========================== */

/* 각 상단 메뉴 li 기준점 */
#header .headerBottom .gnb > ul > li {
  position: relative;
}

/* 공통 서브라벨 스타일 (기본 숨김) */
#header .headerBottom .gnb > ul > li::after {
  content: "";
  position: absolute;
  top: calc(100%);      /* 메뉴 아래 여백 */
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 16px 20px;
  color: #363636;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}

/* 메뉴 순서: notice / Shop / Brand Story / Reviews / QnA
   → Shop(2번)은 content 비워두고 나머지만 매핑 */
#header .headerBottom .gnb > ul > li:nth-child(1)::after {
  content: "공지사항";        /* notice */
}
#header .headerBottom .gnb > ul > li:nth-child(3)::after {
  content: "브랜드 철학";      /* Brand Story */
}
#header .headerBottom .gnb > ul > li:nth-child(4)::after {
  content: "구매후기";         /* Reviews */
}
#header .headerBottom .gnb > ul > li:nth-child(5)::after {
  content: "질문과 대답";      /* QnA */
}

/* hover 되었을 때만 보이게 */
#header .headerBottom .gnb > ul > li:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* =========================
   headerUtil hover 한글 서브라벨
   ========================== */

/* 각 유틸 li 기준점 */
#header .headerBottom .headerUtil .list {
  position: relative;
}

/* 공통 서브라벨 스타일 */
#header .headerBottom .headerUtil .list::after {
  content: "";
  position: absolute;
  top: calc(100% + 20px);    /* 요소 아래 여백 */
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 16px 20px;
  color: #363636;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 10;
}

/* log in / join / search 에만 한글 캡슐 지정 */
#header .headerBottom .headerUtil .list-login::after {
  content: "로그인";
}
#header .headerBottom .headerUtil .list-join::after {
  content: "회원가입";
}
#header .headerBottom .headerUtil .list-search::after {
  content: "상품 검색";
}

/* hover 시 노출 */
#header .headerBottom .headerUtil .list:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Shop 메뉴에는 서브라벨/호버 영역 아예 제거 */
#header .headerBottom .gnb > ul > li:nth-child(2)::after {
  content: none;
  padding: 0;
  background: none;
  border: none;
}
/* BASIC css end */