/* BASIC css start */
body{ min-width: 1400px;}
#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }

/* header */
#header { position:relative; width:100%; background:#fff; z-index:100;}
#header .headerTop { margin:30px auto 35px; position:relative; width:1240px; *zoom:1 }
#header .headerTop:after { display:block; clear:both; content:'' }
#header .headerTop .tlogo { position: absolute; top: 5px; left: 0; }

/* 검색창 */
#header .headerTop .searchArea { text-align: center; }
#header .headerTop .searchArea .search { display: inline-block; position: relative; width: 41%; max-width: 500px; height: 46px; border: 2px solid #222; border-radius: 25px; }
#header .headerTop .searchArea .search input { padding-right: 33px; width: 80%; height:45px; line-height:40px; border:none; background:#fff }
#header .headerTop .searchArea .search a { display:block; position:absolute; top:0; right:0; width:60px; height:45px; text-indent:-9999em; background:url(//skin.makeshop.co.kr/skin/allshop/pc/icon/searchicon.png) center no-repeat }

/* 미니배너 */
#header .headerTop .minibanBox{ position: absolute; top: -30px; right: 0; width: 255px;}
.minibanBox .slick-prev{ position: absolute; top: 0; right: 9px; width: 26px; height: 49px; background: url(//skin.makeshop.co.kr/skin/allshop/pc/icon/minbanlefticon.png) no-repeat; font-size: 0; z-index: 100; outline: 0;}
.minibanBox .slick-next{ position: absolute; top: 0; right: -10px; width: 26px; height: 49px; background: url(//skin.makeshop.co.kr/skin/allshop/pc/icon/minbanrighticon.png) no-repeat; font-size: 0; z-index: 100; outline: 0;}
.slick-slide{ outline: 0; border: 0;}

/* GNB */
#header .headerGnb { position: relative; width: 100%; border-bottom: 2px solid #414141;}
#header .headerGnb.header-scroll{ position: fixed; top:0; width: 100%; background: #ffc933; box-shadow: 0px 2px 3px rgba(0,0,0,0.1); transition-duration: 0.3s; opacity: 1.0;}
#header .headerGnb .headerGnb_in{ position: relative; width: 1240px; margin: 0 auto;}
#header .headerGnb .headerGnb_in:after{ display:block; clear:both; content:''}
#header .headerGnb .headerGnb_in > div{ float:left; height: 55px; line-height: 55px; }
#header .headerGnb .allmenu{ padding: 0 0px; border: 1px solid #000000; border-bottom: 0; color: #ffffff; font-size: 15px; font-family: "맑은 고딕",'Malgun Gothic', sans-serif; font-weight: bold; cursor:pointer; user-select:none; background-color: #414141;}
#header .headerGnb .allmenu img{ margin: 0 0px 0 0; vertical-align: baseline;}
#header .headerGnb .gnbInner { margin:0 auto; position:relative; max-width:710px; overflow:hidden;}
#header .headerGnb .gnbInner ul { *zoom:1; padding: 0 10px; }
/* 예: 3번째, 4번째 li 글자색 변경 */
#header .headerGnb .gnbInner ul li:nth-child(4) a { color: #bc0000; }
#header .headerGnb .gnbInner ul li:nth-child(5) a { color: #1b3cb8; }
#header .headerGnb .gnbInner ul:after { display:block; clear:both; content:'' }
#header .headerGnb .gnbInner ul li { margin:0 18px; position:relative; float:left }
#header .headerGnb .gnbInner ul li a { display:block; font-size:16px; color:#0e0e0e; white-space:nowrap; font-family: "맑은 고딕",'Malgun Gothic', sans-serif; font-weight: bold; line-height: 55px;}
#header .headerGnb .tnbmiddle{ position:absolute; right:102px; top:0;}
#header .headerGnb .tnbmiddle ul li{ float:left}
#header .headerGnb .tnbmiddle ul li a{ display: block; height: 12px; line-height: 12px; margin: 22px 0 0; padding: 0 10px; color: #000000; font-size: 14px; font-family: "맑은 고딕",'Malgun Gothic', sans-serif; border-right: 1px solid #e3e3e3;}
#header .headerGnb .tnbmiddle ul li:last-of-type a{ border-right:0; padding-right: 0;}
#header .headerGnb .tnbRight{ position:absolute; top:0; right:0;}
#header .headerGnb .tnbRight ul li{ position: relative; float:left; margin: 0 0 0 25px;}
#header .headerGnb .tnbRight ul li a .user_basket_quantity{ position: absolute; display: inline-block; top: 12px; left: 18px; width: 18px; height: 18px; line-height: 18px; background: #212121; border-radius: 50%; color: #fff; font-size: 10px; text-align: center;}

/* GNB hover effect */
#header .headerGnb .gnbInner ul li a {
    position: relative;
    transition: color 0.2s ease;
}

#header .headerGnb .gnbInner ul li a::after {
    content: '';
    position: absolute;
    left: -20px;
    right: -20px;
    top: 0;
    bottom: 0;
    background-color: #ffc933;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.2s ease;
}

#header .headerGnb .gnbInner ul li a:hover {
    color: #ffffff;
}

/* 1-3번째 hover 글자색 */
#header .headerGnb .gnbInner ul li:nth-child(1) a:hover { color: #222222; }
#header .headerGnb .gnbInner ul li:nth-child(2) a:hover { color: #222222; }
#header .headerGnb .gnbInner ul li:nth-child(3) a:hover { color: #222222; }


#header .headerGnb .gnbInner ul li a:hover::after {
    transform: scaleY(1);
}

#header .headerGnb .gnbInner ul li:first-child a::after {
    left: -30px; /* 25px(margin) + 30px(ul padding) */
}

/* 4번째 li hover 배경색 */
#header .headerGnb .gnbInner ul li:nth-child(4) a:hover::after { background-color: #ffc933; }

/* 5번째 li hover 배경색 */
#header .headerGnb .gnbInner ul li:nth-child(5) a:hover::after { background-color: #ffc933; }


/* ============================================
   햄버거 3depth 메뉴
   ============================================ */

/* 전체 패널 */
#header .headerGnb .headerGnb_in .hammenu {
    display: none;
    float: unset;
    position: absolute;
    top: 56px;
    left: 0;
    width: 845px;      /* depth1(200) + depth2탭+depth3(560) */
    height: 521px;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    z-index: 300;
}
#header .headerGnb .headerGnb_in .hammenu.is-open {
    display: flex;
}

/* depth1 */
.hammenu .depth1 {
    width: 216px;
    min-width: 200px;
    height: 521px;
    padding: 15px 0;
    overflow-y: auto;
    border-right: 1px solid #e5e5e5;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    direction: rtl;   /* 스크롤바 왼쪽 */
}
.hammenu .depth1::-webkit-scrollbar { width: 3px; }
.hammenu .depth1::-webkit-scrollbar-thumb { background: #ccc; }

.hammenu .depth1 > li {
    direction: ltr;
    cursor: pointer;
    margin: 2px 0;
}
.hammenu .depth1 > li > a {
    display: block;
    padding: 10px 20px;
    color: #323232;
    font-size: 14px;
    font-family: "맑은 고딕",'Malgun Gothic', sans-serif;
    line-height: 1.4;
}
.hammenu .depth1 > li > a:hover { color: #000; }
.hammenu .depth1 > li.is-active {
    border-left: 3px solid #222;
}
.hammenu .depth1 > li.is-active > a {
    color: #000;
    font-weight: bold;
    padding-left: 17px;
}

/* depth2+3 출력 패널 */
.hammenu .hammenu_sub {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 521px;
    overflow: hidden;
}

/* depth2 탭 */
.hammenu .hm-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    padding: 10px 16px 0;
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
    margin: 0;
    flex-shrink: 0;
}
.hammenu .hm-tabs .hm-tab {
    padding: 15px 10px 8px;
    font-size: 13px;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    line-height: 1;
    transition: color .15s;
    margin-bottom: -1px;
    font-family: "맑은 고딕",'Malgun Gothic', sans-serif;
}
.hammenu .hm-tabs .hm-tab:hover { color: #333; }
.hammenu .hm-tabs .hm-tab.is-active {
    color: #111;
    font-weight: bold;
    border-bottom: 2px solid #222;
}

/* depth3 브랜드 목록 */
.hammenu .hm-brands {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    box-sizing: border-box;
}
.hammenu .hm-brands::-webkit-scrollbar { width: 3px; }
.hammenu .hm-brands::-webkit-scrollbar-thumb { background: #ddd; }

.hammenu .hm-brand-sec { display: none; }
.hammenu .hm-brand-sec.is-active { display: block; }

.hammenu .hm-brand-sec ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 12px;
}
.hammenu .hm-brand-sec ul li {
    break-inside: avoid;
    padding: 5px 0;
}
.hammenu .hm-brand-sec ul li a {
    display: block;
    font-size: 13px;
    color: #555;
    padding: 3px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "맑은 고딕",'Malgun Gothic', sans-serif;
    border-bottom: 1px solid transparent; /* ← 미리 투명 border 선점 */
}
.hammenu .hm-brand-sec ul li a:hover {
    color: #000;
    border-bottom: 1px solid #000;
}

/* category3 없을 때 */
.hammenu .hm-no-d3 {
    padding: 20px 0;
    font-size: 13px;
}
.hammenu .hm-no-d3 a { color: #555; }
.hammenu .hm-no-d3 a:hover { color: #000; }

/* 데이터 컨테이너 숨김 */
.hammenu .hm-d2-wrap { display: none !important; }

/* ============================================
   GNB 서브메뉴 (등산/캠핑/밀리터리/스포츠 hover)
   ============================================ */
#header .headerGnb .headerGnb_in .gnb-submenu {
    display: none;
    position: absolute;
    top: 57px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    box-sizing: border-box;
    z-index: 200;
    min-height: 120px;
}
#header .headerGnb .headerGnb_in .gnb-submenu.is-open {
    display: flex;
    flex-direction: column;
}

/* GNB 서브메뉴 - depth2 탭 */
.gnb-submenu .hm-tabs {
    max-width: 1000px;   /* ← 원하는 너비로 조절 */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
    flex-shrink: 0;
    background: #fff;
}
.gnb-submenu .hm-tabs .hm-tab {
    padding: 14px 14px 10px;
    font-size: 14px;
    font-weight: bold;      /* ← 추가 */
    color: #555;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    line-height: 1;
    transition: color .15s;
    margin-bottom: -1px;
    font-family: "맑은 고딕",'Malgun Gothic', sans-serif;
    white-space: nowrap;
}
.gnb-submenu .hm-tabs .hm-tab:hover { color: #333; }
.gnb-submenu .hm-tabs .hm-tab.is-active {
    color: #111;
    font-weight: bold;
    border-bottom: 2px solid #222;
}

/* GNB 서브메뉴 - depth3 목록 */
.gnb-submenu .hm-brands {
    width: 1240px;   /* ← 위와 동일하게 */
    margin: 0 auto;
    padding: 16px 24px 20px;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    min-height: 250px; /* ← 이 값 조절 */
}
.gnb-submenu .hm-brand-sec { display: none; }
.gnb-submenu .hm-brand-sec.is-active { display: block; }

.gnb-submenu .hm-brand-sec ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 5;
    column-gap: 10px;
}
.gnb-submenu .hm-brand-sec ul li {
    break-inside: avoid;
    padding: 3px 0;
}
.gnb-submenu .hm-brand-sec ul li a {
    display: block;
    font-size: 13px;
    color: #555;
    padding: 3px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "맑은 고딕",'Malgun Gothic', sans-serif;
    border-bottom: 1px solid transparent;
}
.gnb-submenu .hm-brand-sec ul li a:hover {
    color: #000;
    border-bottom: 1px solid #000;
}
.gnb-submenu .hm-no-d3 {
    padding: 16px 0;
    font-size: 13px;
}
.gnb-submenu .hm-no-d3 a { color: #555; }
.gnb-submenu .hm-no-d3 a:hover { color: #000; }

/* gnbInner li hover 시 활성 표시 */
#header .headerGnb .gnbInner ul li[data-gnb-target].gnb-active > a::after {
    transform: scaleY(1);
}
/* BASIC css end */