/* BASIC css start */
#header { position:relative; width:100%; min-width:1200px; z-index:100 }
#header.fix { margin-top:-195px; position:fixed; top:61px; left:0; right:0 }
#header .gnbArea { position:relative; height:45px; border-bottom:1px solid #dcdcdc }
#header .gnbArea .gnb { position:relative; margin:0 auto; width:1200px; top:0!important;}
#header .gnbArea .gnb ul { float:right }
#header .gnbArea .gnb ul li { padding:17px 0; float:left }
#header .gnbArea .gnb ul li a { display:block; padding:0 12px; line-height:12px; font-weight:300; border-right:1px solid #a3a3a3 }
#header .gnbArea .gnb ul li a.last { padding-right:0; border-right:none }
#header .headerTop {position:relative; display: flex; justify-content: space-between; align-items: center; width:1380px; height:90px; margin:0 auto;}
#header .headerTop h1 {text-align:center;}
#header .headerTop h1 a {font-size: 42px}

#header .headerTop .gnb__wrap{display: flex; gap: 24px;}
#header .headerTop .gnb__wrap li{position: relative;}
#header .headerTop .gnb__wrap a{color:#888; font-size:15px; font-weight: 500; letter-spacing: -0.23px;}
#header .headerTop .gnb__wrap li a::before{content: ''; position: absolute; top:50%; left:-11px; transform: translateY(-50%); width:1px; height:12px; background:#e4e4e4;}
#header .headerTop .gnb__wrap li:first-of-type a::before{display: none;}

#header .headerTnb { position:relative; height:60px; background:#fff; border-top: 1px solid #eaeaea;}
#header .headerTnb .inner{position:relative; margin:0 auto; width:1380px; font-size:0;}
#header .headerTnb .inner a{ display:inline-block; font-size:18px; color:#000; font-weight:700; letter-spacing: -0.27px;}
#header .headerTnb .inner a.board_link { color:#eae3d5 }


/* 우측 고정 메뉴 css */
.rightFixMenu{position:fixed;top:50%;right:20px;margin-top:-170px;z-index:210;}
.rightFixMenu .listWrap{}
.rightFixMenu .listWrap li{background-color:#fff; margin-bottom:-1px; border:1px solid #ddd;}
.rightFixMenu .link{display:block;width:36px;height:36px;color:#383838;font-size:20px;text-align:center;}
.rightFixMenu .link:hover{color:#fff; background:#808080; }
.rightFixMenu .link i{vertical-align:top;padding-top:9px;}

.joinPoint{position: absolute;top:-26px; left:50%; transform: translateX(-50%); display:inline-block; width:56px; background:#2756f6; color:#fff;font-size: 13px; font-weight: 700; letter-spacing: -0.2px; padding:2px 4px; border-radius: 3px;}
.joinPoint::before{content: ""; position: absolute; bottom: -5px; left: 50%; display: block; width: 0; margin: 0 0 0 -3px; border-style: solid; border-width: 5px 4px 0; border-color: #2756f6 transparent; z-index: 1;}
#header.fix .joinPoint { display:none; }

.rightFixMenu .hidden{position:absolute;left:-5000px;top:0;visibility:hidden;overflow:hidden;line-height:0.1%;font-size:0.1%;width:0.1%;height:0.1%;}


/* gnb */
/*#header .gnb { position: fixed; top: 228px; height:45px; width:100%; line-height:45px; z-index:100; border-top:1px solid #ddd; border-bottom:3px double #ddd; background-color:#fff; }*/
#header .gnb{display: flex; justify-content: space-between; align-items: center;}
#header .gnb .logo-float{display: none;}
#header.fix .gnb .logo-float{display: block;}
#header .gnb .gnb-list{display: flex; gap:40px;}
#header .gnb .gnb-list li.menu { position:relative; display:inline-block;}
#header .gnb .gnb-list li.menu a {height: 60px; font-size:18px; line-height: 60px; color:#000; display:block; /*text-transform:uppercase;  overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; width: 80px;*/}
#header .gnb .gnb-list li.menu a:hover { color:#000; }
#header .gnb .gnb-list li.menu:hover .subbox{opacity: 1; visibility: visible;}
#header .gnb .gnb-list .subbox{ display:block; position:absolute; padding:10px 0; background-color:#fff; width: 150px; left: 50%; transform: translateX(-50%); border:1px solid #ebebeb; box-sizing:border-box; opacity: 0; visibility: hidden; transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;}
#header .gnb .gnb-list .subbox li{padding:0 10px;}
#header .gnb .gnb-list .subbox li a{ display:block; height: auto; color:#333; font-size:13px; font-weight: 500; line-height:33px; text-align: center; transition: background 0.2s ease;}
#header .gnb .gnb-list .subbox li a:hover {background: rgba(100, 100, 100, 0.05);}

#header .gnb .gnb-my{display: flex; align-items: center; gap:20px;}
#header .gnb .gnb-my > li > span{position: absolute; right: -6px; top: 17px;}
#header .gnb .gnb-my > li #user_basket_quantity{display: inline-block; width:15px; height:15px; background: #2656f6; color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; letter-spacing: -0.15px; border-radius: 50%;}
#header .gnb .gnb-my > li{position: relative;}
#header .gnb .gnb-my > li > a{height: 60px; line-height: 60px;}
#header .gnb .gnb-my > li:hover .subbox{opacity: 1; visibility: visible;}
#header .gnb .gnb-my .subbox{ display:block; position:absolute; padding:10px 0; background-color:#fff; width: 150px; left: 50%; transform: translateX(-50%); border:1px solid #ebebeb; box-sizing:border-box; opacity: 0; visibility: hidden; transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;}
#header .gnb .gnb-my .subbox li{padding:0 10px;}
#header .gnb .gnb-my .subbox li a{display:block; height: auto; color:#333; font-size:13px; font-weight: 500; line-height:33px; text-align: center; transition: background 0.2s ease;}
#header .gnb .gnb-my .subbox li a:hover {background: rgba(100, 100, 100, 0.05);}


/* custom */
#header .top__banner a{display: block; width:100%; height: 44px; background:#000; color:#fff; font-size:15px; font-weight: 700; line-height: 44px; text-align: center;}

#header .gnb-my .ham_wrap {cursor: pointer; display: flex;transition: all .3s; align-items: center;gap: 10px; padding: 15px 0;}
#header .gnb-my .ham_wrap.clicked{background-color: #fff; }
#header .gnb-my .ham_wrap .ham{}
#header .gnb-my .ham_wrap .ham a{width: 22px;height: 18px;display: block; position: relative;transition: all .3s;}
#header .gnb-my .ham_wrap .ham a span{position: absolute;left: 0;width: 100%;height: 2px;transform-origin: center center; background-color: #222;border-radius: 4px;transition: all .3s;}
#header .gnb-my .ham_wrap.clicked .ham a span{background-color: #222;}
#header .gnb-my .ham_wrap .ham a span:nth-of-type(1) {top: 0;transform-origin: left center;}     
#header .gnb-my .ham_wrap .ham a span:nth-of-type(2) {top: 8px;}      
#header .gnb-my .ham_wrap .ham a span:nth-of-type(3) {bottom: 0;transform-origin: left center;}
#header .gnb-my .ham_wrap .ham a.active-1 span:nth-of-type(1) { transform :  rotate(45deg); -webkit-transform:rotate(45deg)}     
#header .gnb-my .ham_wrap .ham a.active-1 span:nth-of-type(2) {  left : 200%;opacity : 0;-webkit-animation : active-menu-bar06 .8s forwards;animation : active-menu-bar06 .8s forwards;}      
#header .gnb-my .ham_wrap .ham a.active-1 span:nth-of-type(3) { transform :  rotate(-45deg); -webkit-transform :  rotate(-45deg);}


#header .headerTnb nav{position: absolute; left: 0; width: 100%; background: #fff; z-index: 20; border-bottom: 1px solid #efefef; transform: translateY(5px); opacity: 0; visibility: hidden;
-webkit-transition: transform 0.3s cubic-bezier(0.4,0.4,0.000,1.0), opacity 0.3s cubic-bezier(0.4,0.4,0.000,1.0), visibility 0.3s cubic-bezier(0.4,0.4,0.000,1.0);
transition: transform 0.3s cubic-bezier(0.4,0.4,0.000,1.0), opacity 0.3s cubic-bezier(0.4,0.4,0.000,1.0), visibility 0.3s cubic-bezier(0.4,0.4,0.000,1.0);}
#header .headerTnb nav.clicked{opacity: 1; visibility: visible; transform: translateY(0);}
#header .headerTnb nav .inner{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; margin:40px auto;}
#header .headerTnb nav .inner-l{flex:2;}
#header .headerTnb nav .inner-l > ul{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#header .headerTnb nav .inner-l > ul > li{position: relative; display: block; width: calc(100% / 6);}
#header .headerTnb nav .inner-l > ul > li > a{display: inline-block; color: #000; font-size: 15px; font-weight: 600;}
#header .headerTnb nav .inner-l .side_menu{padding:15px 0 0;}
#header .headerTnb nav .inner-l .side_menu li{padding:0;}
#header .headerTnb nav .inner-l .side_menu li:not(:last-child){position: relative; padding: 0 0 15px;}
#header .headerTnb nav .inner-l .side_menu a{display: inline-block; color:#888; font-size:14px; font-weight: 500;}
#header .headerTnb nav .inner-r{padding-left: 40px; border-left: 1px solid #efefef;}
#header .headerTnb nav .inner-r .title__wrap h4{display: inline-block; color: #000; font-size: 15px; font-weight: 600;}
#header .headerTnb nav .inner-r .list__wrap{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding:15px 0 0;}
#header .headerTnb nav .inner-r .list__wrap li{padding:0;}
#header .headerTnb nav .inner-r .list__wrap li:not(:last-child){position: relative; padding: 0 0 15px;}
#header .headerTnb nav .inner-r .list__wrap a{display: inline-block; color:#888; font-size:14px; font-weight: 500;}


#header .searchArea{display: none; position: absolute; right: 0; left: 0; width: 100%; text-align: center; background: #fff; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;}
#header .searchArea .inner{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap:30px; width: 100%; max-width: 420px; margin: 0 auto; padding: 30px 0 24px;}
#header .searchArea .inner-top{width:100%;}
#header .searchArea .search{position: relative; width: 100%;}
#header .searchArea .search input[name="search"]{border: none; padding: 0; margin: 0; height: 50px; width: 100%; font-size: 15px; color: #888; margin: 0; box-sizing: border-box; text-indent: 20px; font-weight: 600; border: 1px solid #f5f6f7; background: #f5f6f7; border-radius: 40px; transition: 0.3s;}
#header .searchArea .search input[name="search"]:focus{border-color:#333;}
#header .searchArea .search a{position: absolute; top: 50%; right: 20px; transform: translateY(-50%); cursor: pointer;}
#header .inner-bot .title__wrap{text-align: left;}
#header .inner-bot .title__wrap h4{display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 12px;}
#header .inner-bot .keword_wrap{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#header .inner-bot .keword_wrap a{border: 1px solid rgb(219, 222, 226); border-radius: 40px; padding: 9px 16px; font-size: 14px; line-height: 1; display: flex; cursor: pointer; color: #333; margin: 0 5px 5px 0; transition: border-color 0.3s ease;}
#header .inner-bot .keword_wrap a:hover{border-color: #868686;}

/* BASIC css end */