/* BASIC css start */
/* Çì´õ ÄÁÅ×ÀÌ³Ê */
#header{border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; left: 0; width: 100%; z-index: 100; background-color: #fff;}

/* Çܹö°Å ¿ÀÇÂ*/
.allCate{display: none;}
.allCate.active{display: block; background-color: #fff; position: absolute; top: 165px; width: 100%; left: 0; padding: 50px 0; z-index: 20;}
.allCate.active+.dim{content: ""; position: fixed; top: 165px; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 10;}
.allCate .cate-wrap{display: flex; justify-content:space-between;}
.allCate .cate-wrap .menu-list{width:100%; box-sizing:border-box; padding-right:50px;}
.allCate .cate-wrap .menu-commu{width: 190px; padding-left: 40px;}
.allCate .cate-wrap .menu-commu div:first-of-type{margin-bottom: 20px;}
.allCate .cate-wrap .menu-banner{width: 240px; position:relative; flex-shrink: 0; align-self: baseline;     visibility: hidden;}
.allCate .cate-wrap .tit{font-size: 16px; font-weight: 500; margin-bottom: 13px; display: block;}
.allCate .cate-wrap ul li a{position: relative; display: block; font-size: 14px; color: #8f8f8f; margin-bottom: 13px; line-height:1.4;}
.allCate li:hover a{color: #111 ! important;}

.allCate{border-top: 1px solid #e5e5e5;}
.allCate .menu-list ul{width: 108px;}
.allCate .menu-list ul div {margin-top:30px;}
.allCate .menu-list .all-ham{display: flex; justify-content:space-between;}
.allCate .menu-list .all-ham .cate-01 a{color: #000; font-size: 16px; font-weight: 500;}
.allCate .menu-list .all-ham li a{position: relative; display: block; font-size: 15px; color: #8f8f8f; margin-bottom: 13px;}

.allCate .menu-list{display: none;}
.allCate .menu-list.active{display: block;}


/* »ó´Ü ³×ºñ°ÔÀÌ¼Ç */
#header .top {padding: 40px 0 12px; display: flex; justify-content: space-between; align-items: center;}

/* ·Î°í */
#header .logo { display: inline-block; height: 24px; vertical-align: top; margin-right: 32px; }
#header .logo img { width: 100%; height: 100%; display: block; }

/* »ó´Ü ¸Þ´º (gnb) */
#header .gnb { display: inline-block; vertical-align: middle; }
#header .gnb li { display: inline-block; }
#header .gnb li a { display: inline-block; padding: 0 10px; line-height: 30px; font-weight: 400; font-size: 15px;}
#header .gnb li:first-child a { font-family: var(--mont), sans-serif; font-weight: 600; }
#header .gnb li a.primary { color: #fe7900; }
#header .gnb li a.new { position: relative; }
#header .gnb li a.new::after { content: ''; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; background-color:#fe7900; border-radius:50px;}

/* ¿ìÃø ¾ÆÀÌÄÜ (util) */
#header .util { float: right; }
#header .util > li { display: inline-block; margin-left: 8px; vertical-align: middle; position: relative;}
#header .util > li:first-child { margin-left: 0; }
#header .util > li .joinChat{transform: translateZ(0); -webkit-animation: Animation 1s 0.2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; position: absolute; background: #000; color: #fff; text-align: center; padding: 0 12px; border-radius: 50px; line-height: 23px; font-size: 10px; font-weight: 600; top: -28px; left: 50%; width: 94px;}
#header .util > li .joinChat::after{content: ''; display: block; width: 5px; height: 9px; background-color: #000; transform: translateX(-50%) rotate(45deg);position: absolute; left: 50%; bottom: -5px;}

@-webkit-keyframes Animation {
    0%   { -webkit-transform: translate(-50%, 4px); }
    30%  { -webkit-transform: translate(-50%, 0); }
    100% { -webkit-transform: translate(-50%, 4px); }
}

#header .util li .mypageDown { position:absolute; z-index:40; display:none; left:50%; width:100px; padding:15px; transform: translateX(-50%); background:#fff; border:1px solid #eeeeee; text-align:center; }
#header .util li .mypageDown a { display:block; font-size: 14px; line-height: 33px; }
#header .util li.mypage:hover .mypageDown { display:block; }
#header .util li.mypage:hover .mypageDown a:hover { color: #fe7900; text-decoration: underline; text-underline-position: under; }


#header .util .cart a { position: relative; display:block;}
#header .util .cart .count { position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: #fe7900; border-radius: 50%; line-height: 18px; text-align: center;  font-weight: 600; font-size: 12px; color: #fff; }

/* Ä«Å×°í¸® ¸Þ´º */
#header .bottom{display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;}
#header .bottom .right{display: flex; align-items: center; gap: 16px;}
/* Çܹö°Å ¸Þ´º */
#header .hamburger { display: inline-block; vertical-align: middle; cursor: pointer; margin-right: 12px;}

/* Ä«Å×°í¸® ¸µÅ© (lnb) */
#header .lnb { display: inline-block; vertical-align: middle; }
#header .lnb li { display: inline-block; }
#header .lnb li a { display: inline-block; padding: 0 12px; line-height: 36px;  font-weight: 400; font-size: 17px; position: relative;}
#header .lnb li a:hover::before{content: ""; position: absolute; bottom: -12px; left: 0; width: 100%; height: 3px; background: #000;}

/* °Ë»ö ¿µ¿ª */

/* Àα⠰˻ö¾î */
#header .popular { display: inline-block; width: 156px; padding-right: 16px; font-size: 12px; line-height: 36px; vertical-align: middle; height: 30px; overflow: hidden;}
#header .popular ul{position: relative; top: 0;} 
#header .popular ul li{display: flex; justify-content: space-between; align-items: center; position: relative; padding-left: 20px;  height: 30px; line-height: 30px;} 
#header .popular ul li a{display: block; line-height: 30px;}
#header .popular ul li .numb{ position: absolute; left: 0; top: 0; color: #fe7900; font-weight: 600; font-size: 14px;}
#header .popular ul li span{float: right;}

#header .hd_search{display: none;}
#header .hd_search.show{display: flex;}


/* °Ë»ö ¹Ú½º */
#header .search { display: inline-block; width: 230px; padding: 0 12px; line-height: 36px; border-bottom: 1px solid #111; position: relative;}
#header .search input { width: calc(100% - 28px); border: none; background: transparent; font-size: 14px; outline: none; vertical-align: middle; }
#header .search .sch_btn{position: absolute; top: 6px; right: 12px;}

/* ȸ¿ø°¡ÀÔ À¯µµ ¹è³Ê */
#header .join_tooltip { position: absolute; top: 50%; right: 94px; transform: translateY(-50%); text-align: center; }
#header .join_tooltip a { display: inline-block; padding: 0 12px; line-height: 22px; background: #000; border-radius: 999px;  font-weight: 600; font-size: 12px; color: #fff; }
#header .join_tooltip .arrow { display: block; width: 10px; height: 8px; transform: scaleY(-1); margin: 0 auto; }
#header .join_tooltip .arrow img { width: 100%; height: 100%; }


/* ¶ì¹è³Ê */
.line-banner{background-color: #111; overflow: hidden; height:35px; line-height:35px;}
.line-banner a{color: #fff; font-size: 14px; text-align: center; display: block; line-height: 35px;}
.line-banner a b {animation: underlinetext 1s infinite;}
@keyframes underlinetext {
    0% {
        text-decoration: none;
    }

    50% {
        text-decoration: underline;
    }

    100% {
        text-decoration: none;
    }
}

/* Çܹö°Å ¸Þ´º */
#header .menu-banner img{width: 240px;}
#header .menu-banner .swiper-pagination .swiper-pagination-bullet-active{background-color: #000;}
/* BASIC css end */