@charset "utf-8";


/** 웹폰트 **/
@import url('../webfont/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap');


/** 공통 **/
img { max-width: 100%; }


/** 반응형 **/
html { font-size: 10px; }
.pc-contents { display: block; }
.mobile-contents { display: none; }
@media screen and (max-width: 1200px) {
    html { font-size: 8px; }
}
@media screen and (max-width: 1000px) {
    html { font-size: 7px; }
    .pc-contents { display: none; }
    .mobile-contents { display: block; }
}
@media screen and (max-width: 768px) {
    html { font-size: 6px; }
}
@media screen and (max-width: 500px) {
    html { font-size: 5px; }
}


/** 헤더 **/
#header { font-family: 'Pretendard'; }
#header .header-wrap { border-bottom: none; }
#header .header-inner { position: relative; max-width: 138rem; padding: 0; }
#header .header-banner { background-color: #424242; }
#header .header-banner a { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 5rem; font-size: 2.2rem; font-weight: 400; color: #fff; margin: 0 auto; }
#header .header-banner .close-button { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 2rem; height: 2rem; cursor: pointer; }
#header .header-contents { background-color: #000; padding-top: 1.5rem; }
#header .header-contents .header-inner { display: flex; justify-content: space-between; align-items: center; height: 10.5rem; }
#header .header-contents .header-left { width: 25%; padding: 0; }
#header .header-contents .header-left img { max-width: 16.4rem; }
#header .header-contents .header-center { width: 50%; }
#header .header-contents .header-center .top_search { width: calc(100% - 6rem); background-color: transparent; padding: 0 3rem; }
#header .header-contents .header-center .top_search .top_text_cont { width: 100%; height: 6rem; border: none; background-color: #3b3b3b; border-radius: 3rem; }
#header .header-contents .header-center .top_search .top_text_cont .top_srarch_text { width: 100%; padding: 0; text-align: center; font-size: 2rem; font-weight: 500; color: #cacaca; }
#header .header-contents .header-center .top_search .top_text_cont .btn_top_srarch { width: 7rem; }
#header .header-contents .header-center .top_search .top_text_cont::before { top: 50%; right: 2rem; transform: translate(0, -50%); width: 3rem; height: 3rem; background: url("../../img/main/icon_search.png") no-repeat center; background-size: 100%; cursor: pointer; }
#header .header-contents .header-center .top_search .search_cont { left: 50%; right: auto; transform: translate(-50%, 0); width: 100%; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15); border-radius: 3rem; overflow: hidden; }
#header .header-contents .header-right { position: relative; width: 25%; margin: 0; text-align: right; }
#header .header-contents .header-right .header-menu a { display: inline-block; font-size: 1.1rem; color: #fff; }
#header .header-contents .header-right .header-menu a::before { content: '|'; color: #979797; margin: 0 0.8rem; }
#header .header-contents .header-right .header-menu a:first-child::before { display: none; }
#header .header-contents .header-right .header-menu a strong { font-weight: 400; color: #0fffb7; }
#header .header-contents .header-right .header-member-info { display: flex; align-items: center; position: absolute; left: 105px; bottom: 0px; color: #fff; font-weight: 500; }
#header .header-contents .header-right .header-member-info em { padding: 2px 7px; border-radius: 3px; background-color: #999; font-weight: 500; margin-right: 5px; }
#header .header-contents .header-right .header-member-info em.membership { background-color: #aa86f6; }
#header .header-contents .header-right .header-member-info strong { color: #0ff1ff; font-weight: 500; margin-right: 5px; } 
#header .header-contents .header-right .cart { display: inline-block; position: relative; width: 3.1rem; margin-top: 1rem; }
#header .header-contents .header-right .cart .count { display: flex; justify-content: center; align-items: center; position: absolute; top: -0.8rem; right: -0.8rem; width: 1.5rem; height: 1.5rem; background-color: #777; border-radius: 50%; padding: 0; font-size: 1rem; font-weight: 500; color: #fff; padding-top: 0.05rem; }
#header .header-category { background-color: #000; border-top: solid 1px #fff; }
#header .header-category #category { justify-content: center; }
#header .header-category #category .gnb_all { margin-right: 2rem; }
#header .header-category #category .gnb_all .btn_all_menu_open { display: flex; align-items: center; height: 4.5rem; }
#header .header-category #category .gnb_all .btn_all_menu_open > span { position: static; height: auto; transform: translate(0, 0); font-size: 1.4rem; color: #fff; line-height: 100%; padding-left: 2.2rem; }
#header .header-category #category .gnb_all .btn_all_menu_open > span::before { width: 1.6rem; border-color: #fff; }
#header .header-category #category .gnb_all .btn_all_menu_open > span::after { width: 1.6rem; border-color: #fff; }
#header .header-category #category .sub_menu_box { margin: 0; }
#header .header-category #category .sub_menu_box > ul > li { display: flex; align-items: center; height: 4.5rem; padding: 0; margin: 0; }
#header .header-category #category .sub_menu_box > ul > li::before { content: '|'; font-size: 1.4rem; color: #979797; margin: 0 2rem; }
#header .header-category #category .sub_menu_box > ul > li:first-child::before { display: none; }
#header .header-category #category .sub_menu_box > ul > li > a { position: relative; font-size: 1.4rem; color: #fff; line-height: 100%; }
#header .header-category #category .sub_menu_box > ul > li > a:hover { color: #0ff1ff; }
#header .header-category #category .sub_menu_box > ul > li > a:hover::after { content: ''; position: absolute; left: 50%; bottom: -1.6rem; transform: translate(-50%, 0); width: 120%; height: 2px; background-color: #0ff1ff; }
@media screen and (max-width: 1000px) {
    #header .header-banner .close-button { right: 1.5rem; }
    #header .header-contents .header-left { width: 50%; }
    #header .header-contents .header-left img { max-width: 27rem; margin-left: 1.5rem; }
    #header .header-contents .header-right { width: 50%; }
    #header .header-contents .header-right .header-member-info { left: auto; right: 40px; top: -15px; white-space: nowrap; }
    #header .header-contents .header-right .cart { position: relative; top: -10px; width: 5.4rem; margin-right: 1.5rem; }
    #header .header-contents .header-right .cart .count { right: -1.6rem; top: -1.6rem; width: 3rem; height: 3rem; font-size: 2rem; }
    #header .header-category #category .sub_menu_box > ul > li { height: 7rem; }
    #header .header-category #category .sub_menu_box > ul > li::before { font-size: 2.8rem; margin: 0 2rem; }
    #header .header-category #category .sub_menu_box > ul > li > a { font-size: 2.8rem; font-weight: 400; padding: 0; }
}


/** 하단 고정 레이어 **/
@media screen and (max-width: 1000px) {
    #mobile-footer-quick-menu { display: flex; align-items: center; justify-content: space-between; position: fixed; left: 0; bottom: 0; width: 100%; height: 11rem; background-color: #000000; border-bottom: 1px solid #868686; z-index: 999; }
    #mobile-footer-quick-menu li { display: flex; justify-content: center; width: 25%; }
    #mobile-footer-quick-menu li a { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2rem; color: #fff; }
    #mobile-footer-quick-menu li a img { width: 4.6rem; height: 4.6rem; margin-bottom: 0.5rem; }
}


/** 검색 레이어 **/
@media screen and (max-width: 1000px) {
    #header .search-layer.on { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; background-color: #fff; }
    #header .search-layer.on .top_search { padding: 3rem; }
    #header .search-layer.on .top_search .top_text_cont { height: 8rem; border-radius: 4rem; }
    #header .search-layer.on .top_search .top_text_cont .top_srarch_text { font-size: 3rem; }
    
    #header .search-layer.on .top_search .search_cont { display: grid !important; }
    #header .search-layer.on .top_search .search_cont .recent_box dt { font-size: 16px; }
    #header .search-layer.on .top_search .search_cont .recent_box dd ul.js_recent_list { margin: 0; }
    #header .search-layer.on .top_search .search_cont .recent_box dd ul.js_recent_list li { display: inline-block; }
    #header .search-layer.on .top_search .search_cont .recent_box dd ul.js_recent_list li > a { width: auto; background-color: #333; color: #fff; padding: 4px 12px; border-radius: 13px; font-size: 14px; }
    #header .search-layer.on .top_search .search_cont .recent_box dd ul.js_recent_list li > span { display: none; }

    #header .search-layer.on .top_search .search_cont .recom_box { display: block; float: none; width: calc(100% - 30px); margin: 20px 15px; padding: 0; border: none; order: 2; }
    #header .search-layer.on .top_search .search_cont .recom_box dt { text-align: left; font-size: 16px; }
    #header .search-layer.on .top_search .search_cont .recent_box { display: block; width: 100%; order: 1; }
    #header .search-layer.on .top_search .search_cont .seach_top_all { order: 3; }
}


/** 카테고리 레이어 **/
@media screen and (max-width: 1000px) {
    #header .gnb_allmenu_wrap { position: fixed; top: 0; }
    .gnb_allmenu_box > ul > li a { font-size: 3rem; }
    #category .cate-main { white-space: nowrap; overflow-x: auto; }
}


/** 모바일 팝업 **/
@media screen and (max-width: 1000px) {
    .main_popup_layer { width: 100% !important; height: 100% !important; }
    .main_popup_layer .sys_pop { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7) !important; }
    .main_popup_layer .sys_pop .box .view { width: 100% !important; height: auto !important; }
    .main_popup_layer .sys_pop .box .view img { max-width: 95%; }
    .main_popup_layer .sys_pop .box .check label { color: #fff; font-weight: 400; }
}



/** 레이어 멤버십 **/
#layer-membership { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 5px; background-color: #fff; z-index: 201; }
#layer-membership h3 { text-align: center; font-size: 18px; line-height: 1.2; font-weight: 500; }
#layer-membership .desc { font-size: 14px; line-height: 1.2; margin: 20px 0; text-align: center; }
#layer-membership .button { display: flex; justify-content: space-between; align-items: center; }
#layer-membership .button a { width: calc(50% - 5px); height: 40px; line-height: 40px; border: solid 1px #999; border-radius: 5px; color: #333; font-size: 14px; font-weight: 500; text-align: center; }
#layer-membership .button a:nth-child(2) { background-color: #84398e; border-color: #84398e; color: #fff; }
@media screen and (max-width: 1000px) {
    #layer-membership { width: calc(100% - 70px)}
}