/* BASIC css start */
#header :is(*){font-family: 'Jost','Noto Sans KR', sans-serif ;}
#header{width: 100%; position: sticky; top: 0; z-index: 100; background-color: #fff; border-bottom: 1px solid #eeeeee;}
#header .head_inner{width: 1300px; margin: 0 auto;}
#header .top_banner{background-color:var(--main-color);display: none;}
#header .top_banner.show{display: block;}
#header .top_banner .head_inner{position: relative;}
#header .top_banner .head_inner p{color: #ffffff; font-size: 14px;text-align: center; padding: 10px 0; font-weight: 400; max-width: 90%; margin: 0 auto;}
#header .top_banner .head_inner a{display: block; position: absolute; right: 0; z-index: 100; top: 50%; transform: translateY(-50%);}
#header .top_banner .head_inner a img{}
#header .header_cont{background-color: #fff;}
#header .header_cont .head_inner{display: flex; justify-content: space-between; align-items: center; padding: 35px 0;}
#header .header_cont .head_inner ul{display: flex; gap: 35px; align-items: center;}
#header .header_cont .head_inner h1.logo{}
#header .header_cont .head_inner h1.logo a{display: block; font-size:35px; color:var(--main-color);}
#header .header_cont .head_inner h1.logo a img{}
#header .header_cont .head_inner h1.logo s { text-decoration:none; font-size:16px; font-weight:300;color:#999; }
#header .header_cont .head_inner ul.cate_m{}
#header .header_cont .head_inner ul.cate_m>li{}
#header .header_cont .head_inner ul.cate_m>li:not(.li_ham):hover>a{color: var(--main-color);}
#header .header_cont .head_inner ul.cate_m>li>a{display: block;font-size: 18px; font-weight: 500;transition: all .1s;}

/* 헤더 서치 영역 */
#header .head_inner li.li_search{margin-top:-2px}
#header .head_inner li.li_search .search fieldset{position:relative; transition: all .5s;}
#header .head_inner li.li_search .search fieldset input{transition:all .4s;width:0; height:100%; background:none !important; border:none !important}
#header .head_inner li.li_search .search fieldset a{display:inline-block}


#header .header_cont .head_inner ul.cate_m>li.li_ham{}
#header .header_cont .head_inner ul.cate_m>li.li_ham{ }
#header .header_cont .head_inner ul.cate_m>li.li_ham a{}
#header .header_cont .head_inner ul.cate_m>li.li_ham a{  width: 20px;height: 15px;display: block; position: relative;transition: all .4s;}
#header .header_cont .head_inner ul.cate_m>li.li_ham a span{position: absolute;left: 0;width: 100%;height: 2px;background-color: #000;border-radius: 4px;transition: all .4s;}
#header .header_cont .head_inner ul.cate_m>li.li_ham a span:nth-of-type(1) {top: 0;}     
#header .header_cont .head_inner ul.cate_m>li.li_ham a span:nth-of-type(2) {top: 6.5px;}      
#header .header_cont .head_inner ul.cate_m>li.li_ham a span:nth-of-type(3) {bottom: 0;}
#header .header_cont .head_inner ul.cate_m>li.li_ham a.active-1 span:nth-of-type(1) {transform: translateY(6.5px) rotate(-45deg);}     
#header .header_cont .head_inner ul.cate_m>li.li_ham a.active-1 span:nth-of-type(2) {opacity: 0;}      
#header .header_cont .head_inner ul.cate_m>li.li_ham a.active-1 span:nth-of-type(3) {transform: translateY(-6.5px) rotate(45deg);}
#header .header_cont .head_inner ul.cate_m>li.li_commu{}
#header .header_cont .head_inner ul.user_m{}
#header .header_cont .head_inner ul.user_m>li{}
#header .header_cont .head_inner ul.user_m>li>a{display: block;}
#header .header_cont .head_inner ul.user_m>li>a>img{}
#header .header_cont .head_inner ul.user_m>li.li_cart{}
#header .header_cont .head_inner ul.user_m>li.li_cart a{position: relative; padding-right: 10px;}
#header .header_cont .head_inner ul.user_m>li.li_cart a span{display: inline-block; background-color:var(--main-color); color: #fff; width: 20px; height: 20px; text-align: center; border-radius: 50%; line-height: 20px; font-size: 10px; position: absolute; top: -7px; right: 0;}
#header .header_cont .head_inner ul.user_m>li.my_btn{position: relative;}
#header .header_cont .head_inner ul.user_m>li.my_btn:hover>ul.my_ul{display:flex}
#header .header_cont .head_inner ul.user_m>li.my_btn ul.my_ul{width: 100px; padding-top:20px; position: absolute; z-index: 10; top: 98%; background-color: transparent; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; gap: 4px; }
#header .header_cont .head_inner ul.user_m>li.my_btn ul.my_ul li{width: 100%;}
#header .header_cont .head_inner ul.user_m>li.my_btn ul.my_ul li a{padding: 5px 0; display: block; width: 100%; text-align: center; border: 1px solid #000; background:#fff}
#header .header_cont .head_inner ul.user_m>li.my_btn ul.my_ul li:first-child a{ background:#222; color:#fff}
#asi_bg{background-color: rgba(0, 0, 0, 0.45); position: fixed; width: 100%; height: 100%; z-index: 99;top: 0;transition: opacity .5s;  display: none; opacity: 0;}
#asi_bg.show1{display: block;}
#asi_bg.show2{opacity: 1;}
#asi{position: absolute; width: 100%; top:80%; background-color: #fff;z-index: 100;opacity: 0;display: none;transition: opacity .4s,top .4s; }
#asi.show1{display: block;}
#asi.show2{top:100%; opacity: 1;}
#asi .head_inner{position: relative;padding: 50px 0;}
#asi .head_inner .asi_close{position: absolute; right: 0; top: 50px;}
#asi .head_inner .asi_close a{}
#asi .head_inner .asi_close a img{}
#asi .head_inner nav{padding-right: 50px; }
#asi .head_inner nav ul.main_m{width: 100%; display: flex; flex-wrap: wrap;gap: 40px 0; max-height: 400px; overflow-y: auto;}
#asi .head_inner nav ul.main_m>li{width: 250px;padding-right: 40px;}
#asi .head_inner nav ul.main_m>li>a{font-weight: 700; font-size: 17px; display: block; }
#asi .head_inner nav ul.sub_m{padding-top: 15px;}
#asi .head_inner nav ul.sub_m>li{margin-bottom: 10px;}
#asi .head_inner nav ul.sub_m>li>a{line-height: 1.2; color: #999999;transition: all .2s; font-weight: 400; font-size: 15px;display: inline-block;}
#asi .head_inner nav ul.sub_m>li>a:hover{text-decoration: underline; color: #000;}
#asi :is(*)::-webkit-scrollbar{width: 3px;background-color: transparent;}
#asi :is(*)::-webkit-scrollbar:hover{width: 10px;}
#asi :is(*)::-webkit-scrollbar-thumb{background-color: var(--main-color); border-radius: 20px; }
#asi :is(*)::-webkit-scrollbar-track{background-color: rgb(243, 243, 243);border-radius: 20px; }

#fix_icon{z-index: 50; position: fixed; right:calc(50% - 890px) ; bottom: 10%; opacity: 0; transform: translateX(100px); transition: all .6s;}
#fix_icon.show{opacity: 1; transform: translateX(0px);}
#fix_icon ul{display: flex; flex-direction: column; gap: 10px;}
#fix_icon ul li{}
#fix_icon ul li a{display: block;}
#fix_icon ul li a img{transition:transform .2s}
#fix_icon ul li:hover img{transform:scale(1.15);}


/* BASIC css end */