/* BASIC css start */
#header {
    margin:0 auto;
    position:absolute;top:0;left:0;right:0;
    z-index:100;
    display: flex;/* 가운데 정렬 추가 */
    justify-content: center;
    align-items: center;
    font-family: "Noto Sans KR", sans-serif;
}
#header.headerFix { position:fixed;top:0;left:0;right:0; }

/* header inner 추가*/
#header .header_inner{
    width: 1920px;
    margin: 0 auto;
    position: relative;
}

#header .headerBox { width:1200px;height:127px;margin:0 auto; position:relative; }

/* 메뉴 전체 배경 */
#header .header_inner::after {
    content: '';
    width: 100%;
    height: 0;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 200px;
    z-index: -1;
    transition: height 400ms;
    pointer-events: none;
}

#header .header_inner.on::after {
    height: 465px;
}

#header .headerBox .logoArea { text-align:center; z-index:10;margin:0 auto;}
#header .headerBox .logoArea .logo a { font-size:48px; color:#2c2c2c;line-height: 120px; font-weight:bold; }
#header .headerTop { position:relative; }
#header .headerTop .hdBoard { float:left;}
#header .headerTop .hdBoard li { position:relative; float:left; padding:20px 20px 0 0; }
#header .headerTop .hdMenu {float:right; position:relative;}
#header .headerTop .hdMenu li { position:relative; float:left; padding:20px 0 0 20px; }
#header .headerTop .hdMenu li a { font-size:12px; }
#header .headerTop .hdMenu li a:hover {text-decoration: underline;}

/* 네비게이션 */
#header .nav {
font-family: "Noto Sans KR", sans-serif;
}
#header .nav > ul {
    display: flex;
    justify-content: space-between;
}
#header .nav > ul > li {
    position: relative;
    list-style: none;
    text-decoration: none;
}
#header .nav > ul > li > a {
    display: block;
    padding: 15px 40px;
    font-size: 22px;
    line-height: 25px;
}
#header .nav > ul > li > a:hover {
    font-weight: bold;
}
#header .nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    display: none;
}
#header .nav > ul > li > ul > li{ 
    list-style: none;
    text-decoration: none;
}
#header .nav > ul > li > ul > li > a {
    padding: 9px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #606060;
    font-size: 17px;
   letter-spacing : -1px;
}
#header .nav > ul > li > ul > li > a:hover {
    font-weight: bold;
}

/* 상단 고정 */
#headerFix { display:none; position:fixed; top:0; left:0; right:0; z-index:200;background:rgba(255,255,255,0.9); }
#headerFix .headerGnb {position:relative;min-width:1200px;width:1200px;margin:0 auto;}
#headerFix .headerGnb .logoArea { position:absolute; left:0; top:5px; z-index:10}
#headerFix .headerGnb .logoArea .logo a { font-size:30px; color:#2e2e2e;font-weight:bold; }

/* 상단 고정 - 카테고리 */
#headerFix .headerGnb .cateWrap {position: relative; text-align:right; font-family: "Noto Sans KR", sans-serif;}
#headerFix .headerGnb .cateWrap:after {content:"";display:block;clear:both;}
#headerFix .headerGnb .cateWrap a:hover { border-bottom:1px solid #2d2d2d }
#headerFix .headerGnb .cateWrap .tmenu {position: relative;display: inline-block; padding:0 18px;}
#headerFix .headerGnb .cateWrap .tmenu a { font-size:15px; line-height:50px; }
#headerFix .headerGnb .cateWrap .tmenu .depth2 { display:none; position: absolute;background:rgba(255,255,255,0.9);top:60px;left: 50%;width: 110px;margin-left: -60px;padding:0 7px; z-index: 97;text-align:center;}
#headerFix .headerGnb .cateWrap .tmenu .depth2 li a {font-size: 12px; line-height: 26px; }
#headerFix .headerGnb .cateWrap .tmenu .depth2 li a:hover { color:#2d2d2d;}

#headerFix .headerGnb .searchOpen { width:50px; height:50px; text-align:center; }
#headerFix .headerGnb .searchArea { display:none; position:fixed; top:80px; left:0; right:0; width:100%; height:80px; background-color: #fff; z-index:10; }
#headerFix .headerGnb .search { position:relative; width:45%; margin:0 auto; border-bottom:2px solid #2e2e2e;padding:10px 0 0; }
#headerFix .headerGnb .search input { width: 100%; height:44px; margin: 0 95px 0 0; border:none; font-size:20px; }
#headerFix .headerGnb .search .btnSch { position:absolute; top:8px; right:4px; color:#2e2e2e; font-size:30px }
#headerFix .headerGnb .search .searchClose { position:absolute; top:0; right:-50px; line-height:40px; font-size:24px; background-color:#fff; }

/* 우측 퀵 버튼 */
.rightQuick { position:fixed;top: 35%;right:23px; z-index:110; display:block; width:48px;text-align:center; }
.rightQuick i { vertical-align:top; margin:6px 0;color:#2c2c2c; font-size:24px;transition:all .4s ease-out }
.rightQuick span.txt { font-size:15px;opacity:0;position:absolute;top:7px;left:-34px; transition:all .4s ease-out}
.rightQuick li:hover span.user_basket_quantity,
.rightQuick li:hover i { opacity: 0.3; }
.rightQuick li:hover span.txt { opacity: 1; }
.rightQuick li { position:relative; }
.rightQuick .cart span.user_basket_quantity {position:absolute; top:0;right:6px;background:#2c2c2c;border-radius:50%; color:#fff;width:18px;height:18px;line-height:18px;}
.rightQuick li a.searchOpen { font-size:24px;cursor:pointer;vertical-align:top; }
.rightQuick .searchArea { display:none; position:fixed; top:0; left:0; right:0; width:100%; height:100%; background:rgba(255,255,255,0.9); z-index:10;padding:10px 0 0; }
.rightQuick .search { position:relative; width:45%; margin:10% auto 0; border-bottom:2px solid #2e2e2e;padding:10px 0 0; }
.rightQuick .search input { width: 100%; height:44px; margin: 20% 0 0 0; border:none; font-size:20px;  background:transparent; }
.rightQuick .search .btnSch { position:absolute; bottom:10px; right:4px; color:#2e2e2e; font-size:30px; }
.rightQuick .search .searchClose { position:absolute; top:0; right:50%; font-size:24px; }
.rightQuick .search i { opacity: 1 !important; }
/* BASIC css end */