/* BASIC css start */
.ff1{font-family: 'Lato', 'Noto Sans KR', sans-serif;}
.t_ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.st1_show,
.st2_show{opacity:0; }



#header {width:100%; }
#header .header_inner{width:100%; background:#FFF; top:0; left:0; z-index:15; }
#header.fixed .header_inner{position:fixed; }

#header *{font-family: 'Lato', 'Noto Sans KR', sans-serif;}
#header .wh_top_tab{}
#header .wh_top_tab .tabs{width:100%; display:table; table-layout:fixed; }
#header .wh_top_tab .tabs a{display:table-cell; line-height:30px; text-align:center; background:#333333; color:#FFF; font-size:11px; border-left: 1px solid #eaeaea;}
#header .wh_top_tab .tabs a:nth-of-type(1){border-left:0;}

/*
#header .wh_top_tab.st1 .tabs a:nth-of-type(1),
#header .wh_top_tab.st2 .tabs a:nth-of-type(2){color:#333; background:#FFF;}
*/

#header .wh_mid{height:57px; box-sizing:border-box; border-bottom:1px solid #dedede; position:relative; }
#header .wh_mid .top_logo{position:absolute; top:0; left:50%; width:calc(100% - 200px); height:100%; margin-left:calc((50% - 100px) * -1); text-align:center; line-height:56px; }
#header .wh_mid .top_logo a{display:inline-block; vertical-align:middle;}
#header .wh_mid .top_logo a img{height:31px; vertical-align:middle;}

#header .wh_mid .btn_all{float:left; width:49px; height:100%; box-sizing:border-box; padding:23px 15px 18px; font-size:0; text-indent:-10000px; overflow:hidden;    }
#header .wh_mid .btn_all:before,
#header .wh_mid .btn_all:after{display:block; width:100%; height:1px; background:#333333; content:"";}
#header .wh_mid .btn_all .line{display:block; width:100%; height:1px; background:#333333; margin:7px 0;}
#header .wh_mid .h_basket_wrap{float:right; width:35px; height:100%; position:relative; padding-right:8px; }
#header .wh_mid .h_basket_wrap .btn_basket{display:block; width:35px; height:100%; padding:23px 8px 18px; box-sizing:border-box;  font-size:0; text-indent:-10000px; overflow:hidden; background:url(/design/wonha0108/mshop_202007/images_m/ic_top_cart.png) center 21px no-repeat; background-size:19px; }
#header .wh_mid .h_basket_wrap sup{display:block; position:absolute; top:12px; right:7px; min-width:7px; height:17px; padding:0 5px; line-height:17px; color:#fff; text-indent:0; font-size:10px; text-align: center; border-radius: 9px; background: #0054a6;  }

#header .wh_mid .h_serch_wrap{float:right; width:35px; height:100%; position:relative; }
#header .wh_mid .h_serch_wrap .btn_search{display:block; width:35px; height:100%; padding:23px 8px 18px; box-sizing:border-box;  font-size:0; text-indent:-10000px; overflow:hidden; background:url(/design/wonha0108/mshop_202007/images_m/ic_search.png) center 21px no-repeat; background-size:19px; }
#header .wh_mid .h_serch_wrap .top_search{display:none; position:absolute; top:56px; right:-43px; width:100vw; height:37px; background:#FFF; z-index:3; border:1px solid #0054a6; box-sizing:border-box; }
#header .wh_mid .h_serch_wrap .top_search input.MS_search_word{display:float; width:calc(100% - 59px); box-sizing:border-box; height:35px; line-height:35px;  border:0; background:#FFF; padding:0 10px; outline:none;}
#header .wh_mid .h_serch_wrap .top_search .search_btn{float:right; width:59px; height:35px; line-height:35px; text-align:center; border-left:1px solid #e6e6e6; font-size:11px; color:#333; box-sizing:border-box;  }
#header .wh_bottom{height:35px; border-bottom:1px solid #dedede;}
#header .wh_bottom nav{padding:0 5px; height:36px; font-size:0; text-align:center; white-space: nowrap; overflow-x:auto; }
#header .wh_bottom nav a{display:inline-block; margin:0 17px; vertical-align:top; padding:13px 2px 0; box-sizing:border-box; height:36px; line-height:100%; color:#333333; font-size:12px; font-weight:300; letter-spacing:-1px;}
#header .wh_bottom nav a.on{color:#0054a6; border-bottom:3px solid #0054a6;}

@media screen and (max-width:345px) {
    #header .wh_bottom nav a{margin:0 13px;}

}

/* 카테고리 */
aside {position:fixed; width:100%; height:100vh; top:0; left:-100%; bottom:0; background-color:#fff; overflow-y:auto; -webkit-overflow-scrolling: touch; z-index:1001; background:#f2f2f2; }
aside .wh_inner{padding-bottom:15px;}

aside .aside_head{height:50px; border-bottom:1px solid #eaedf1; background-color:#FFF;}
aside .aside_head .top_logo{float:left; height:50px; margin-left:15px; line-height:50px; }
aside .aside_head .top_logo a{display:inline-block; vertical-align:middle;}
aside .aside_head .top_logo a img{height:31px; vertical-align:middle;}
aside .aside_head .btn_closeX{float:right; width:50px; height:50px; font-size:0; overflow:hidden; line-height:50px; text-align:center; }
aside .aside_head .btn_closeX:before{width:17px; height:17px; display:inline-block; overflow:hidden; content:""; vertical-align:middle; background:url(/design/wonha0108/mshop_202007/images_m/btn_closeX_27.png) center no-repeat;  }

aside .aside_top_menu{border-bottom:1px solid #eaedf1; display:table; table-layout:fixed; font-size:0; width:100%; background:#FFF; margin-bottom:9px; }
aside .aside_top_menu a{border-left:1px solid #eaedf1; display:table-cell; position:relative; padding-top:39px; height:69px; box-sizing:border-box; line-height:30px; font-size:11px; color:#2c2c2c; text-align:center; overflow:hidden; background-repeat:no-repeat; background-position:center 14px; background-size: auto 25px; }
aside .aside_top_menu a:nth-of-type(1){border-left:0;}
aside .aside_top_menu a.nav_logout{background-image:url(/design/wonha0108/mshop_202007/images_m/nav_logout.png);}
aside .aside_top_menu a.nav_login{background-image:url(/design/wonha0108/mshop_202007/images_m/nav_login.png);}
aside .aside_top_menu a.nav_join{background-image:url(/design/wonha0108/mshop_202007/images_m/nav_join.png);}
aside .aside_top_menu a.nav_mypage{background-image:url(/design/wonha0108/mshop_202007/images_m/nav_mypage.png);}
aside .aside_top_menu a.nav_view_prd{background-image:url(/design/wonha0108/mshop_202007/images_m/nav_view_prd.png);}

aside .aside_top_menu a em.coupon{position:absolute; top:28px; left:calc(50% - 6px); display:inline-block; line-height:100%; font-size:7px; padding:3px; border-radius: 10px ; color:#FFF; font-weight:700; background-color:#0054a6;  font-family:Malgun Gothic, '맑은 고딕', dotum, '돋움'; text-align:center;}

aside .aside_nav{margin:0 10px 19px; border:1px solid #eaedf1; box-shadow: -2px 1px 4px 0px #d8d8d8; background:#FFF;}
aside .aside_nav .nav_tab{height:40px; border-bottom:1px solid #eaedf1; background-color:#fbfbfb;} 
aside .aside_nav .nav_tab .tab{display:block; float:left; width:50%; height:41px; line-height:40px; text-align:center; box-sizing:border-box; color:#888; font-size:13px;  }
aside .aside_nav .nav_tab .tab + .tab{border-left:1px solid #eaedf1;}
aside .aside_nav .nav_tab .tab.on{background:#FFF; color:#333;}
aside .aside_nav .nav_container > ul{display:none;}
aside .aside_nav .nav_container > ul.on{display:block; }
aside .aside_nav .nav_container ul li {border-bottom:1px solid #eaedf1; position:relative;}
aside .aside_nav .nav_container > ul > li:nth-last-of-type(1){border-bottom:0;}
aside .aside_nav .nav_container ul li a {display: block; height: 40px; line-height:40px; padding:0 0 0 20px; margin-right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:12px; color:#333; }
aside .aside_nav .nav_container ul li.st1 > a {margin-right:0;}
aside .aside_nav .nav_container ul li .fa {position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 40px; line-height:40px;}
aside .aside_nav .nav_container ul li .fa-angle-down:before{color:#bfbfbf;}
aside .aside_nav .nav_container ul li .fa-angle-down.fa-rotate-180:before{color:#222222;}
aside .aside_nav .nav_container ul li > ul {background-color:#fbfbfb; display:none;}
aside .aside_nav .nav_container ul li > ul:before,
aside .aside_nav .nav_container ul li > ul:after{width:100%; content:""; display:table;}
aside .aside_nav .nav_container ul li > ul > li {float:left; width:50%; border-top:1px solid #eaedf1; border-right:1px solid #eaedf1; box-sizing:border-box; margin-bottom:-1px;}
aside .aside_nav .nav_container ul li > ul > li:nth-of-type(2n){border-right:0;} 
aside .aside_nav .nav_container ul li > ul > li a {padding:0 20px 0 20px; margin: 0; color:#6a6a6a; }
aside .aside_nav .nav_container ul li > ul > li a:before{content:"- ";}
aside .sns_wrap{height:35px; margin-bottom:11px;  padding:2px 0;}



aside .sns_wrap{overflow:hidden; text-align:center; padding:0 50px;}
aside .sns_wrap ul{display:table; width:100%; table-layout:fixed; }
aside .sns_wrap ul li{display:table-cell; vertical-align:middle;}
aside .sns_wrap ul li a{display:inline-block ; width:31px; height:31px; background:center no-repeat; overflow:hidden; font-size:0; text-indent:-1000px;}
aside .sns_wrap ul li a.ic_fb{background-image:url(/design/wonha0108/mshop_202007/images/ic_sns_fb.png); }
aside .sns_wrap ul li a.ic_insta{background-image:url(/design/wonha0108/mshop_202007/images/ic_sns_insta.png); }
aside .sns_wrap ul li a.ic_blog{background-image:url(/design/wonha0108/mshop_202007/images/ic_sns_blog.png); }
aside .sns_wrap ul li a.ic_yt{background-image:url(/design/wonha0108/mshop_202007/images/ic_sns_yt.png); }




aside cite{text-align:center; display:block; height:15px; line-height:15px; color:#b1b1b1; font-size:8px; font-style:normal; font-family:Malgun Gothic, '맑은 고딕', dotum, '돋움'; }

aside .asideTop {text-align:center;}
aside .asideTop a {width:33.33%; height:62px; display:inline-block; border-bottom:2px solid #c3c3c3; color:#8f8f8f; font-weight:bold;}
aside .asideTop a .fa {margin-top:10px;}
aside .asideTop a.act {color:#ab3e41; border-bottom:2px solid #ab3e41;}
aside .asideBottom {padding:20px 22px;}
aside .asideBottom .tel {color:#ab3e41; font-size:1.333em; font-weight:bold; display: block;}
aside .asideBottom .fa-stack {color:#000; margin-top: -5px;}
aside .asideBottom .copyright {margin-top:10px;}
aside .navCommunity {display:none;}
aside .navMypage {display:none;}
/* //카테고리 */

/* 최근 본 상품 */
#ly_lastView {width:100%; position:absolute; top:36px; left:0; background-color:#fff; z-index:1002; padding-bottom:20px; box-shadow: 0 1px 10px #717171; display:none;}
/* //최근 본 상품 */

@media screen and (min-width:768px) {
    #header #menu {width:85px;}
    #header .headerTop {padding-right:85px;}
    #header .search {padding-right:85px;}
    #header .search .searchBox input {width:95%;}
    #header .search .btn_search {width:85px;}
}



/*2017-02-07 동진디자인*/

#logo_area  {
	text-align:center;
	position:relative;
}

#logo_area  #bookmark{
	text-align:center;
	position:absolute;
	left:-20px;
	top:0px;
	z-index:10
}

#logo_area  #bookmark img{
	width:60%;
	border:none
}


#logo_area #logo {
    margin:10px 0 10px 0;
	text-align:center;
	position:relative;
}

#logo_area #logo  img {
	width:40%;
	border:none
}

#logo_area #logo a img {
	vertical-align:top;
}


#logo_area  #search_area{
	position:absolute;
	right:10px;
	top:20px;
	z-index:15
}

/* BASIC css end */