@charset "utf-8";

/* header css */

*{
  font-family: 'Arita-dotum-Medium';
}

#JD-Header{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    background:#ffc89b;
    transition:all 0.35s ease;
    z-index:60;
    border-bottom:1px solid #eee;
}

#JD-Header .headerWrap{position:relative;max-width:1482px;margin:0 auto}
#JD-Header .logo{
    float:left;
    height:100%;
    box-sizing:border-box;
    padding-top:10px;
    width:30%;
    text-align:center
}
#JD-Header .navi{
    white-space:nowrap;
    float:left;
    width:33%;
    margin-left: 40px;
}
#JD-Header .navi > li{position:relative;display:inline-block;height:72px}
#JD-Header .navi > li + li{margin-left:20px}
#JD-Header .navi > li > a{
    display:block;
    height:72px;
    line-height:72px;
    font-size:14px;
    color:#fff;
    font-family: 'GmarketSansMedium';
    transition:all 0.35s ease;
    -webkit-transition:all 0.35s ease;
    -khtml-transition:all 0.35s ease;
    -ms-transition:all 0.35s ease;
    -o-transition:all 0.35s ease
}
#JD-Header .navi .sub{
    display:none;
    position:absolute;
    left:50%;
    top:72px;
    min-width:160px;
    margin-left:-80px;
    background:#fff;
    opacity: 70%;
    padding:0;
}
#JD-Header .navi > li:hover .sub{display:block}
#JD-Header .navi .sub:after{content:"";display:block;position:absolute;top:-7px;left:50%;margin-left:-7px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000}
#JD-Header .navi .sub > li{position:relative;padding:0;}

/* depth_1 */
#JD-Header .navi .sub > li{position:relative}
#JD-Header .navi .sub > li > a{
    display:block;
    height:48px;
    line-height:48px;
    font-size:13px;
    color:#000;
    padding:0 16px;
    box-sizing:border-box;
    font-family: 'GmarketSansMedium';
    letter-spacing: 1.4px;
}
#JD-Header .navi .sub > li:hover > a{background:rgba(0,0,0,0.5)}
#JD-Header .navi .sub > li > ul{display:none;position:absolute;left:100%;top:0;width:auto;border:0;background:rgba(0,0,0,0.55)}
#JD-Header .navi .sub > li:hover > ul{display:block}
/* depth_2 */
#JD-Header .navi .sub > li > ul > li{position:relative}
#JD-Header .navi .sub > li > ul > li > a{display:block;padding:0 16px;height:36px;line-height:36px;font-size:11px;color:#fff}
#JD-Header .navi .sub > li > ul > li > a:hover{background:rgba(0,0,0,0.5)}
#JD-Header .navi .sub > li > ul > li > ul{display:none;position:absolute;left:100%;top:0;width:auto;border:0;background:rgba(0,0,0,0.55)}
#JD-Header .navi .sub > li > ul > li:hover > ul{display:block}
/* depth_3 */
#JD-Header .navi .sub > li > ul > li > ul > li{position:relative;border:0;padding:0}
#JD-Header .navi .sub > li > ul > li > ul > li > a{display:block;border:0;padding:0 16px;height:36px;line-height:36px;font-size:11px;color:#fff}
#JD-Header .navi .sub > li > ul > li > ul > li > a:hover{background:rgba(0,0,0,0.5)}
/* depth_4 */
#JD-Header .navi .sub > li > ul > li > ul > li > ul > li > a{position:relative;display:block;padding:0 16px;height:26px;line-height:26px;font-size:11px;color:#eee;text-indent:8px;}
#JD-Header .navi .sub > li > ul > li > ul > li > ul > li > a:after{content:"";display:block;width:2px;height:2px;position:absolute;left:18px;top:50%;margin-top:-1px;background:#fff}
#JD-Header .navi .sub > li > ul > li > ul > li > ul > li > a:hover{background:rgba(0,0,0,0.4)}

#JD-Header .section_right{
    float:right;
    width:30%;
    margin-right: 40px;
}
#JD-Header .section_right .member{
    text-align:right;
}
#JD-Header .section_right .menu_mem{text-align:left;display:inline-block}
#JD-Header .section_right .menu_mem:after{content:"";display:block;zoom:1;clear:both;height:0;font-size:0;line-height:0}
#JD-Header .section_right .menu_mem > li{display:inline-block;zoom:1;*display:inline;vertical-align:middle;box-sizing:border-box}
#JD-Header .section_right .menu_mem > li > a{
    position:relative;
    display:inline-block;
    min-height:72px;
    line-height:72px;
    padding:0 10px 2px;
    box-sizing:border-box;
    text-align:center;
    vertical-align:middle;
    font-size: 14px;
    font-family: 'GmarketSansMedium';
    color: #fff;
}
#JD-Header .section_right .menu_mem > li > a i{font-size:22px;vertical-align:middle}
#JD-Header .section_right .menu_mem > li .sub {display:none;position:absolute;left:0;top:54px;border:1px solid #777;background:#fff;padding:10px 0}
#JD-Header .section_right .menu_mem > li:hover .sub{display:block}
#JD-Header .section_right .menu_mem > li .sub li a{display:block;height:26px;line-height:26px;white-space:nowrap;padding:0 15px 0 10px}
#JD-Header .section_right .menu_mem > li .sub li a span{position:relative;display:inline-block;font-size:11px;color:#333;letter-spacing:1px}
#JD-Header .section_right .menu_mem > li .sub li a:hover span:after{content:"";position:absolute;display:block;left:0;bottom:5px;width:100%;height:1px;background:#333;}
#JD-Header .section_right .menu_mem > li.btn_search a:after{display:none}
#JD-Header .section_right.menu_mem > li > a > span{display:inline-block;position:relative;font-size:11px;color:#333;letter-spacing:1px;transition:all 0.35s ease;-webkit-transition:all 0.35s ease;-khtml-transition:all 0.35s ease;-ms-transition:all 0.35s ease;-o-transition:all 0.35s ease}
#JD-Header .section_right .menu_mem > li > a > span #xans_myshop_basket_cnt{background:#555;padding:1px 4px 2px;border-radius:3px;color:#fff}

#JD-Header .multishopList{position:absolute;right:4px;top:4px;}
#JD-Header .multishopList li{display:inline-block}

/* main change header */
.body-main #JD-Header{
    border-bottom:0;
    background:#ffc89b;
}
.body-main #JD-Header.bgChange{background-color: #ffc89b;}
.body-main #JD-Header.bgChange .logo .change{display:block}
.body-main #JD-Header.bgChange .logo .default{display:none}

.search_section{display:none;position:fixed;width:100%;height:100%;top:0;left:0;z-index:99}
.search_section .btn_mask_seach{width:55px;height:55px;background:#222;position:absolute;right:-3px;top:3px}
.search_section .icon_search{position:absolute;right:16px;top:15px}
.search_bg{position:fixed;background:rgba(0,0,0,0.64);width:100%;height:100%;top:0;left:0;}
.searchWrap{position:absolute;right:0;top:30%;width:100%;text-align:center}
.searchWrap .top_search:after{content:"";display:block;clear:both;}
.searchWrap .top_search legend{font-size:0;line-height:0;height:0;overflow:hidden}
.searchWrap .txt{text-align:center;margin:40px 0;font-size:28px;letter-spacing:3px;color:#fff;font-weight:600}
.searchWrap .top_text_cont{position:relative;max-width:768px;margin:0 auto}
.searchWrap .top_srarch_text{height:55px;border:0;margin-right:7px;padding:0;width:100%;font-size:18px;font-weight:600;text-align:center;border:3px solid #222}
.searchWrap .btn_mask_search{position:absolute;right:0px;top:0px;width:55px;height:55px;background:#222 url(https://www.ranicake.com/data/skin/front/jeonyul/urban/images/common/icon_search_w.png) no-repeat center;font-size:0;line-height:0;text-indent:-100px;outline:none}
.searchWrap .search_cont{position:relative;max-width:710px;margin:0 auto;background:#fff;top:-2px;left:-26px}
.searchWrap .search_cont .recent_box{display:block;float:none;width:auto}
.searchWrap .search_cont .recent_box li{text-indent:5px}
.searchWrap .search_cont .recent_box li:hover{background:#eee}
.searchWrap .search_cont .recent_box li:hover a{color:#000}
.searchWrap .search_cont dt{margin-bottom:5px}
.searchWrap .hit_keyword{text-align:center;padding-top:10px}
.searchWrap .hit_keyword span,
.searchWrap .hit_keyword a{position:relative;display:inline-block;vertical-align:middle;font-size:13px;color:#fff}
.searchWrap .hit_keyword .tit{font-size:14px;font-weight:600}
.searchWrap .hit_keyword a{padding:0 6px 0 9px}
.searchWrap .hit_keyword a + a:after{content:"";display:block;width:1px;height:8px;position:absolute;left:0;top:50%;margin-top:-4px;background:#eee;}