/* BASIC css start */
#header {width: 100%;}
#header .header_fd{ padding: 25px 0;}
#header .header_top {position: relative; width: 100%; z-index: 2; font-size: 0; text-align: center;}
#header .header_top div {display: inline-block; vertical-align: middle; font-size: 12px;}
#header .header_top .menu {width: 28px; left: 10px; position: absolute; top: 50%; transform: translateY(-50%);}
#header .header_top .allmenu_btn {width: 100%;}
#header .header_top .basket, #menuWrap .menu_top .basket {width: 34px; right: 10px; position: absolute; top: 50%; transform: translateY(-50%);}
#header .header_top .basket a, #menuWrap .menu_top .basket a {position: relative;}
#header .header_top .basket a img, #menuWrap .menu_top .basket a img {width: 21px;}
#header .header_top .basket a span, #menuWrap .menu_top .basket a span { position: absolute; top: 13px; right: -9px; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; color: #fff; font-size: 10px; font-family: 'Spoqa Han Sans', sans-serif; vertical-align: bottom; background: #010101;}
#header .header_top .logo {width: 100px;}
#header .header_top .logo img {width: 100%; vertical-align: middle;}
#header .header_top.header-scroll{position: fixed; left: 0; top: 0; padding: 10px 0; background: #ffffff; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1); -webkit-transition-duration: 0.6s; transition-duration: 0.6s; opacity: 0.9;}

/* 메뉴 */
.menuArea{ position: relative; border-bottom: 1px solid #d8d8d8; padding: 0 0 10px;}
.menuArea .menu_swip{ padding: 0 10px; overflow: hidden;}
.menuArea .menu_swip:after{content:''; display:block; clear:both}
.menuArea .menu_swip > .swiper-wrapper{float: left;}
.menuArea .menu_swip > .swiper-wrapper .swiper-slide{ width: initial !important; float: left; margin-right: 20px;}
.menuArea .menu_swip > .swiper-wrapper .swiper-slide a{ color: #333; font-family: 'Spoqa Han Sans', sans-serif; font-size: 0.9rem;}
.menuArea .menopen{ float: right; vertical-align: text-bottom; position: absolute; top: 0; right: 0; width: 65px; padding: 5px 10px 0 0; text-align: right; background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(50%,#fff));
    background: -webkit-linear-gradient(left,rgba(255,255,255,0),#fff 50%);
    background: linear-gradient(to right,rgba(255,255,255,0),#fff 50%); z-index: 10;}
.menuArea .menopen img{width:20px;}

/* in the menu */
.innerTop{padding:0 10px}
.innerTop:after{content:''; display:block; clear:both}
.menuInner{ display: none; position: absolute; top: 0; width: 100%; background: #fff; z-index: 100;}
.menuInner p{ float: left; padding: 0 0 15px 0; color: #000000; font-family: 'Spoqa Han Sans', sans-serif;  font-size: 1rem; font-weight: 300;}
.menuInner ul{ display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; border-top: 1px solid #d8d8d8;}
.menuInner ul li{ display: flex; display: -webkit-flex;   float: left; width: 25%; border: 1px solid #d8d8d8; border-top: 0; border-left: 0; padding: 10px 5px; text-align: center; align-items: center; box-sizing: border-box;}
.menuInner ul li a{display: block; width: 100%; color: #767676; font-family: 'Spoqa Han Sans', sans-serif; font-size: 0.9rem;}

/* 햄버거 영역 */
#menuWrap{ position: fixed; width:100%; height:100%; background: #1a1e20; top: 0; z-index: 101; display:none; overflow-x: auto;}
#menuWrap .menu_top{ position: relative; padding: 17px 15px; text-align: center; background: #262a2d;}
#menuWrap .menu_top .closeBox{ position: absolute; top: 50%; transform: translateY(-50%); width: 24px;}
#menuWrap .menu_top .closeBox img{width: 100%;}
#menuWrap .menu_top .search{ width: 62%; margin: 0 auto; padding: 0 14px; background: #1a1e20; border-radius: 23px;}
#menuWrap .menu_top .search .searchBox{display: inline-block; width: 80%; margin: 6px 0 2px;}
#menuWrap .menu_top .search .searchBox input{ width: 100%; height: 22px; color: #fff; background: #1a1e20; border: 0; }
#menuWrap .menu_top .search .btn_search{display: inline-block; float: right; width: 20px; margin: 6px 0 0; vertical-align: top;}
#menuWrap .menu_top .search .btn_search img{width: 100%;}

#menuWrap .menuIn{}
#menuWrap .menuIn .menu_middle{ background: #262a2d;}
#menuWrap .menuIn .menu_middle:after{content: ''; display: block; clear: both}
#menuWrap .menuIn .menu_middle .middle_text, #menuWrap .menuIn .menu_middle .middle_icon{text-align: center;}
#menuWrap .menuIn .menu_middle .middle_text li{float:left; width:25%; height:100px; box-sizing: border-box;}
#menuWrap .menuIn .menu_middle .middle_text li a{ position: relative; display: block; width: 100%; height: 100%; color: #c3c7cb; font-family: 'Lato', 'NanumBarunGothic', sans-serif; font-weight: 300; font-size: .8rem; }
#menuWrap .menuIn .menu_middle .middle_text li a img{padding: 20px 0 10px; margin:0 auto; display: block;}
#menuWrap .menuIn .menu_middle .middle_text li a .point{position: absolute; left: 50%;  transform: translateX(-50%); bottom: -7px; width: 43px; height: 16px; line-height: 16px; border-radius: 10px; background: #607ed4; color: #fff; text-align: center; z-index: 10;}
#menuWrap .menuIn .menu_middle .middle_text li a .point span{position: absolute; top: -9px; left: 50%; width: 8px; height: 4px; margin-left: -4px; color: #607ed4; z-index: -1;}
#menuWrap .menuIn .menu_middle .middle_text li a .point em{font-size: 0.75rem; letter-spacing: 1px; font-family: 'Lato', sans-serif; font-weight: bold;}

#menuWrap .menuIn .menu_contents{display: flex;}
#menuWrap .menuIn .menu_contents .a_menu, #menuWrap .menuIn .menu_contents .a_center{width: 100%;}
#menuWrap .menuIn .menu_contents .a_menu ul, #menuWrap .menuIn .menu_contents .a_center ul{line-height: 35px;}
#menuWrap .menuIn .menu_contents .a_menu > ul{border-top: 1px solid #3a3e41;}
#menuWrap .menuIn .menu_contents .a_menu > ul > li{position: relative; border-bottom: 1px solid #3a3e41; background: #1a1e20;}
#menuWrap .menuIn .menu_contents .a_menu > ul > li > a{ display: block; padding: 7px 0 7px 20px; color: #9d9d9d; font-size: 1.2em; font-family: 'Noto Sans KR','Brandon Grotesque', sans-serif; }
#menuWrap .menuIn .menu_contents .a_menu > ul > li .sub_menu{display:none; background: #262a2d; }
#menuWrap .menuIn .menu_contents .a_menu > ul > li .sub_menu::after{content: ''; display: table; clear: both}
#menuWrap .menuIn .menu_contents .a_menu > ul > li .sub_menu li{ border-bottom: 1px solid #3a3e41;}
#menuWrap .menuIn .menu_contents .a_menu > ul > li .sub_menu li:last-of-type{border-bottom: 0px;}
#menuWrap .menuIn .menu_contents .a_menu > ul > li .sub_menu li a{ display: block; padding: 16px 20px; line-height: 18px; color: #858e94; font-size: 1.2em; font-family: 'Noto Sans KR','Brandon Grotesque', sans-serif;}
#menuWrap .menuIn .menu_contents .a_menu .fa-angle-down:before{font-size: 18px;}
#menuWrap .menuIn .menu_contents .a_menu .fa-angle-down{position: absolute; right: 0; top: 0; width: 40px; height: 49px; text-align: center; line-height: 49px;  color: #9d9d9d;}
#menuWrap .menuIn .menu_contents .a_menu .main_menu.oncol{ -webkit-tap-highlight-color:rgba(0,0,0,0); outline:none;}
#menuWrap .menuIn .menu_contents .a_menu .main_menu.oncol > a{color:#fff; background: #6280d6;}
#menuWrap .menuIn .menu_contents .a_menu .fa-angle-down.active{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background: #6280d6; color:#fff;}

/* 카테고리 */
aside {position:fixed; width:100%; height:100%; top:0; right:0; bottom:0; background-color:#fff; overflow-y:auto; -webkit-overflow-scrolling: touch; z-index:1001; display:none;}
aside .asidlogBox{ padding: 15px; background: #000;}
aside .asidlogBox:after{content:''; display:block; clear:both}
aside .asidlogBox .headerTop{ float: left;}
aside .asidlogBox .headerTop a{ padding: 0 15px 0 0; color: #fff; font-family: 'Martel Sans', sans-serif; }
aside .asidlogBox .headerTop a:last-of-type{padding:0}
aside .asidlogBox .closeBox{ float: right; width: 14px;}
aside .asidlogBox .closeBox img{width: 100%; vertical-align: middle;}
aside .search{background: #f5f5f5;}
aside .search .searchBox{ display: inline-block; width: 82%; padding: 5px 5px 0; }
aside .search .searchBox fieldset input{width: 100%; background: #f5f5f5; border: 0; }
aside .search .btn_search{display: inline-block; float: right; padding: 12px 14px; text-align: center;}
aside .search .btn_search img{width: 20px;}
aside .asideTop { padding: 35px 20px; text-align:center;}
aside .asideTop a {width:50%; height: 30px; display:inline-block; border-bottom:1px solid #b0b0b0; color:#b0b0b0; font-weight:bold; font-family: 'Martel Sans', sans-serif; letter-spacing: 1px; font-size: 1rem;}
aside .asideTop a .fa {margin-top:10px;}
aside .asideTop a.act {color:#000; border-bottom:1px solid #000;}
aside nav{ text-align: center;}
aside nav li { position:relative;}
aside nav li a {display: block; height: 40px; line-height:40px; font-family: 'Martel Sans', 'Spoqa Han Sans', sans-serif; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
aside nav li .fa {position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 35px; line-height:35px;}
aside nav li > ul {background-color:#f4f4f4; display:none; border-top:1px solid #6e6e6e;}
aside nav li > ul > li {border-bottom:0px none; border-top:1px solid #ccc;}
aside nav li > ul > li:first-child {border-top:0px none;}
aside nav li > ul > li a {padding:0 40px 0 30px; margin: 0;}
aside nav li > ul > li > ul {border-top:0px none; border-top:1px solid #ccc;}
aside nav li > ul > li > ul > li {border-bottom:0px none;}
aside nav li > ul > li > ul > li a {padding:0 0 0 40px; margin: 0; background-color: #DDDDDD;}
aside .asideBottom {padding:20px 22px; text-align:center}
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; color: #adadad; font-size: .8rem; font-family: 'Martel Sans', 'Spoqa Han Sans', sans-serif; font-weight: 300;}
aside .navCommunity {display:none;}
aside .navMypage {display:none;}
/* //카테고리 */

/* BASIC css end */