/* BASIC css start */
/* 상단 */
#header {width: 100%;}
#header.fix{position: fixed; top: 0; opacity: 0.9; z-index: 100; }
#header .header_top {position: relative; border-bottom: 1px solid #e7e7e7; background: #fff; z-index: 2;padding: 22px 15px; font-size: 0; }
#header .header_top div {display: inline-block; font-size: 12px; vertical-align: middle;}
#header .header_top div a img{width: 100%;}
#header .header_top .menu { width: 24px; margin: 0 20px 0 0;}
#header .header_top .allmenu_btn {width: 100%;}
#header .header_top .logo {width: 90px;}
#header .header_top .logo img {vertical-align: middle;}
#header .header_top .basket {position: absolute; top: 50%; width: 25px; right: 24px; transform: translateY(-50%);}
#header .header_top .basket a {position: relative;}
#header .header_top .basket a span { position: absolute; top: -4px; right: -7px; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; color: #fff; font-size: 10px; font-family: 'Quicksand', sans-serif; vertical-align: bottom; background: #000; text-align: center;}
#header .header_top .search{position: absolute; top: 50%; transform: translateY(-50%); width: 23px; right: 56px; }

/* 메뉴 */
#menuWrap{ position: fixed; width:100%; height:100%; background: #fff; top: 0; z-index: 1001; display:none; overflow-x: auto;}
#menuWrap .closeBox{position: absolute; right: 13px; top: 15px; z-index: 100000;}
#menuWrap .closeBox img{width: 22px;}
#menuWrap .menuIn{padding: 100px 30px;}
#menuWrap .menuIn .snsBox{}
#menuWrap .menuIn .snsBox ul{text-align: center;}
#menuWrap .menuIn .snsBox ul li{display: inline-block; margin: 0px 5px;}
#menuWrap .menuIn .snsBox ul li a img{width: 50px;}
#menuWrap .menuIn .menu_middle{padding-top: 35px;}
#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: calc(100%/3 - 10px); height:40px; line-height: 40px; margin: 5px 5px; border: 1px solid #e6e6e6; box-sizing: border-box;}
#menuWrap .menuIn .menu_middle .middle_text li a{display: block; font-family: "맑은 고딕",'Malgun Gothic',sans-serif; color: #333;}
#menuWrap .menuIn .menu_middle .middle_text li a img{padding: 20px 0 10px; margin:0 auto; display: block;}

.m_banner{text-align:center; padding: 25px 0;}
.m_banner img{width: 92%;}


/* 슬라이드메뉴 */
.mask{display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 101;}
.mask .closebtn{ position: absolute; top: 16px; right: 14px;}
#all_menu{ position: fixed; width: 87%; height: 100%; top: 0; left: -100%; z-index: 1001; overflow-y: auto;}
.all_menu_main{ width: 100%; height: 100%; background-color: #fff;}
.all_menu_main .header_logo{padding: 35px 24px 28px}

.headerTop{ text-align: left; padding: 0 24px 28px}
.headerTop li{ display: inline-block; width: calc(100%/5 - 11px); margin-right: 8px;}
.headerTop li:last-child{margin-right: 0;}
.headerTop li a{ color: #8c8c8c; font-family: 'InfinitySans-RegularA1', sans-serif; text-transform: uppercase;}

#all_menu .all_menu_main .a_menu{padding: 26px 24px; background: #fff;}
#all_menu .all_menu_main .a_menu > ul{}
#all_menu .all_menu_main .a_menu > ul > li{position: relative;}
#all_menu .all_menu_main .a_menu > ul > li > a{ font-size: 1.2em; font-family:'Spoqa Han Sans', 'Spoqa Han Sans JP','Noto Sans KR', sans-serif; color: #000;  display: inline-block; margin: 15px 0;}
#all_menu .all_menu_main .a_menu > ul > li .sub_menu{display:none; padding: 12px 16px 24px;}
#all_menu .all_menu_main .a_menu > ul > li .sub_menu::after{content: ''; display: table; clear: both}
#all_menu .all_menu_main .a_menu > ul > li .sub_menu li{ line-height: 16px; margin-bottom: 15px;}
#all_menu .all_menu_main .a_menu > ul > li .sub_menu li:last-of-type{margin-bottom: 0px;}
#all_menu .all_menu_main .a_menu > ul > li .sub_menu li a{color: #5c5c5c; font-size: .8rem; font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP','Noto Sans KR', sans-serif;}
#all_menu .all_menu_main .a_menu > ul > li .sub_menu li a:active{color:#000; font-weight:bold}
#all_menu .all_menu_main .a_menu .fa-angle-down:before{font-size: 15px; color: #000; font-weight: bold;}
#all_menu .all_menu_main .a_menu .fa-angle-down{ width: 10px; height: 15px; display: inline-block; margin-left: 7px; transition: 0.3s;}
#all_menu .all_menu_main .a_menu .main_menu.oncol{-webkit-tap-highlight-color:rgba(0,0,0,0); outline:none;}
#all_menu .all_menu_main .a_menu .main_menu.oncol > a{}
#all_menu .all_menu_main .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);
     }


/* ================================================================
   [추가] 전체메뉴 글자 크기 고정

   기존 스킨은 메뉴 글자가 `font-size: 1.2em` 인데, em 은 부모 크기에
   비례합니다. 기존 스킨에서는 부모가 작아 약 15px 로 나왔지만
   리뉴얼 디자인에서는 부모가 16px 라 약 19px 로 커집니다.
   px 로 고정해 기존과 동일한 크기 · 간격으로 맞춥니다.
   ================================================================ */

/* 1차 메뉴 : 카테고리 · 고정 메뉴 모두 동일하게 */
#all_menu .all_menu_main .a_menu > ul > li > a{
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 14px 0;
}

/* 2차 메뉴 */
#all_menu .all_menu_main .a_menu > ul > li .sub_menu li a{
    font-size: 13px;
    line-height: 1.3;
}

/* ----------------------------------------------------------------
   화살표 : 눌러도 위치가 변하지 않도록 CSS 로 직접 그림

   폰트 아이콘은 글자 모양이 네모 박스 안에서 아래쪽에 치우쳐 있어
   180도 회전하면 위아래로 튑니다.
   회전축이 정확히 도형 한가운데가 되도록 다시 그렸습니다.
   ---------------------------------------------------------------- */
#all_menu .all_menu_main .a_menu .fa-angle-down,
#all_menu .all_menu_main .a_menu .fa-angle-down.active{
    display: inline-block;
    position: relative;
    width: 12px;
    height: 15px;
    margin-left: 7px;
    /* 기존 180도 회전은 사용하지 않습니다 (안쪽 도형만 회전) */
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
}

#all_menu .all_menu_main .a_menu .fa-angle-down:before{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    box-sizing: border-box;
    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;
    font-size: 0;
    /* 꼭짓점이 아래를 향하므로 2.5px 위로 올려 시각적 중심을 맞춤 */
    transform: translate(-50%, calc(-50% - 2.5px)) rotate(45deg);
    transition: transform .3s;
}

/* 펼쳤을 때 : 같은 자리에서 방향만 뒤집힘 */
#all_menu .all_menu_main .a_menu .fa-angle-down.active:before{
    transform: translate(-50%, calc(-50% + 2.5px)) rotate(225deg);
}

/* 상단 유틸 메뉴 (LOGIN / JOIN / MY / ORDER / CART) */
.all_menu_main .headerTop li a{
    font-size: 13px;
    letter-spacing: .02em;
}
/* BASIC css end */