/* BASIC css start */
html { -webkit-tap-highlight-color : transparent;}

.header_scroll_wrap { width:100%; overflow-x:scroll; }
.header_scroll_wrap .header_scroll { width:805px; background:#000; height:38px; }
.header_scroll_wrap .header_scroll a { font-size:15px; height:38px; line-height:38px; text-align:center; color:#fff; display:inline-block; float:left; }
.header_scroll_wrap .header_scroll a.hs_01 { width:75px; }
.header_scroll_wrap .header_scroll a.hs_02 { width:55px; }
.header_scroll_wrap .header_scroll a.hs_03 { width:75px; }
.header_scroll_wrap .header_scroll a.hs_04 { width:85px; }
.header_scroll_wrap .header_scroll a.hs_05 { width:95px; }
.header_scroll_wrap .header_scroll a.hs_06 { width:105px; }
.header_scroll_wrap .header_scroll a.hs_07 { width:95px; }
.header_scroll_wrap .header_scroll a.hs_08 { width:135px; }
.header_scroll_wrap .header_scroll a.hs_09 { width:85px; }
.header_scroll_wrap .header_scroll::after { clear:both; content:""; display:block; }

.header_scroll_wrap {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.header_scroll_wrap::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.header_with_logo { width:100%; height:50px; position:relative; background:#fff; }
.header_with_logo img { width:22px;}
.header_with_logo .header_menu_icon { position:absolute; width:23px; height:23px; top:14px; left:15px; }
.header_with_logo .search_on { position:absolute; width:23px; height:23px; top:14px; left:55px; }
.header_with_logo .cart { position:absolute; width:23px; height:23px; top:14px; right:55px; }
.header_with_logo .cart sup { position: absolute; background: #eb6391; width: 15px; height: 15px; text-align: center; border-radius: 10px; color: #fff; line-height: 15px; top: -3px; right: -5px; }

.header_with_logo .header_mypage_icon { position:absolute; width:23px; height:23px; top:14px; right:15px; }
.header_with_logo .header_mypage_icon .mypageKakao { position:absolute; bottom:-25px; left:-40px; width:auto; height:26px; z-index:2;}
.header_with_logo h1 { text-align:center; }
.header_with_logo h1 a { line-height:47px; font-size:25px; font-weight:900; color:#000; }

#header {width:100%;}
#header .top-pt-01 {position:fixed; top:0; left:0; right:0; z-index:100;}
#header .top-pt-02 {position:fixed; top:0; left:0; right:0; z-index:100;}
#header .search { width:calc(100% - 20px); height:50px; padding:10px; position:absolute; left:0; top:50px; background-color:#fff; border-bottom:#ddd solid 1px; z-index:10; display:none; }
#header .search .searchBox {width:100%;}
#header .search .searchBox input { font-size:15px; width:100%; height:50px; border:none !important; outline:2px solid #000; border-radius:0 !important;}
#header .search .btn_search { width:22px; height:23px; position:absolute; top:24px; right:15px; }
#header .search .btn_search img { width:22px; }
#header .headerTop { border-bottom: 1px #ddd solid; }

#aside {position:fixed; top:0; left:-100%; bottom:0; width:100%; z-index:999; transition: all 0.5s ease; }
#aside.show {left:0; opacity:1; visibility: visible; }
#aside .asideClose { position: absolute; top: 23px; left: 83%; z-index:1000; }
#aside .asideClose img { width: 23px; height:23px; }
#aside .asideCont {position:relative; z-index:1000; width:80%; height:100%; overflow: scroll; background: #fff; }
#aside .asideCont .login_wrap { width:100%; height:40px; background:#000; }
#aside .asideCont .login_wrap a { width:50%; display:inline-block; float:left; font-size:13px; color:#fff; text-align:center; line-height:40px; }
#aside .asideCont .login_wrap::after { clear:both; content:""; display:block; }
#aside .asideCont .menu_wrap { width:auto; padding:20px 15px; }
#aside .asideCont .menu_wrap > ul > li { position:relative; margin:10px 0 20px 0; font-weight:500; }
#aside .asideCont .menu_wrap > ul >li > div,
#aside .asideCont .menu_wrap a { font-size:15px; color:#000; font-weight:500; display:block; }
#aside .asideCont .menu_wrap > ul > li > ul { margin-top:10px; padding:0 5%; background:#f9f9f9; }
#aside .asideCont .menu_wrap > ul > li > ul li { width:50%; display:inline-block; float:left; }
#aside .asideCont .menu_wrap > ul > li > ul::after { clear:both; content:""; display:block; }
#aside .asideCont .menu_wrap > ul > li > ul li a { color:#666; padding:10px 0; font-size:12px; font-weight:300; }
#aside .asideCont .menu_wrap .depth1_icon { background: url(/design/hairbest/mobile/topmenu+.png) no-repeat right; background-size: 12px; }
#aside .asideCont .menu_wrap .depth1_icon.active { background: url(/design/hairbest/mobile/topmenu-.png) no-repeat right; background-size: 12px; }
#aside .asideCont .aside_insta { width:85%; margin:5% 0 0 5%; background: url(/design/hairbest/mobile/insta_bg.jpg) center no-repeat; background-size:100%; height:40px; line-height:40px; color:#fff; padding-left:20px; border-radius:20px; display:block; }
#aside .asideCont .aside_insta img { padding-right:10px; width:24px; padding-top:8px; }
#aside .asideCont .aside_call { width:85%; margin:2% 0 0 5%; background:#000; height:40px; line-height:40px; color:#fff; padding-left:20px; border-radius:20px; display:block; }
#aside .asideCont .aside_call img { padding-right:10px; width:24px; padding-top:8px; }

.nav_sns_wrap { padding-top:20px; margin:20px auto 0 auto; width:85%; border-top:1px #ddd solid; font-size:0; text-align:center;}
.nav_sns_wrap li { display:inline-block; vertical-align:top; width:18%; font-size:12px; color:#666; font-weight:300;}
.nav_sns_wrap li img { width:25px; margin-bottom:4px;}

.asideLayer { position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; background:rgba(0,0,0,0.65); visibility: hidden; transition: all 0.7s ease; opacity:0; }
.asideLayer.show { position:fixed; z-index:998; opacity:1; visibility: visible; }
.asideLayer:after {content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:url(/design/hairbest/mobile/aside_layer.jpg) center no-repeat; background-size:auto 100%; opacity:0;  }

/* BASIC css end */