/* BASIC css start */
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}



/******************************************************* Header *******************************************************/

#header{width:100%; height:60px; position:fixed; left:0; top:0; background:rgba(255,255,255,0.7); z-index:99996; }

/* 삼선메뉴 */
#header #menu{position:absolute; left:15px; top:17px;}
#header #menu a{display:block; width:26px; height:26px; overflow:hidden; position:relative; }
#header #menu a span{display:block; width:100%; height:2px; opacity: 1; position:absolute; background:#333; text-indent:-9999px;
z-index:99999;}

/* 위치 */
#header #menu a span:first-child{top:5px;}
#header #menu a span:nth-child(2){top:12px;}
#header #menu a span:last-child{top:19px;}

/* 로고 */
#header .logo{position:absolute; *right:15px; left:50px; top:13px;}
#header .logo a{display:block; padding:5px; color:#333; font-size:26px; line-height:1; letter-spacing:0.3px; font-family:'Cardo', 'Jeju Myeongjo', serif;}





/******************************************************* Side *******************************************************/

#side{position:fixed; left:0; top:0; min-width: 225px; width: 87%; height:100%; font-size: 12px; background-color: #fff; padding: 15px;
box-sizing: border-box;  visibility: hidden; transform: translateX(-100%); transition: transform .4s ease-in-out, visibility .4s ease-in-out; overflow-y:auto; z-index:99998;}
#side.open{visibility:visible; transform:translateX(0%);}

/* 외부 클릭 시 닫히는효과 */
#mask{position:fixed; left:0; top:0; width:100%; height:100%; background: rgba(51,51,51,0.2); z-index:99997; display:none;}
#mask.show{display:block;}

/* 닫기 버튼 */
#side .btnClose { position:absolute; top:15px; right:15px; display:block; padding:5px; }
#side .btnClose img { width:15px; }

/* 로그인 메뉴 */
#memberBox {padding:5px 0;}
#memberBox p{font-size:12px; color:#555; letter-spacing:0.5px; margin-bottom:15px; line-height:20px;}
#memberBox p i{font-size:18px; vertical-align:top; line-height:20px;}
#memberBox p strong{font-size:14px; color:#333; font-weight:600; letter-spacing:0.2px;}
#memberBox ul{font-size:0; line-height:0; letter-spacing:0;}
#memberBox ul li{margin-bottom:7px;}
#memberBox ul li a{text-align:center;}
#memberBox ul li strong{font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; letter-spacing:1px; font-weight:600; font-size:11px;}
#memberBox ul li:nth-child(1),
#memberBox ul li:nth-child(2){display:inline-block; width:49%;}
#memberBox ul li:nth-child(1){margin-right:1%;}
#memberBox ul li:nth-child(2){margin-left:1%;}
#memberBox ul li:nth-child(3),
#memberBox ul li:nth-child(4),
#memberBox ul li:nth-child(5){display:inline-block; width:32%; margin-right:2%;}
#memberBox ul li:nth-child(5){margin-right:0;}
#memberBox ul li:nth-child(3) .circle{display:inline-block; width:5px; height:5px; border-radius:5px; background:#f76f59; vertical-align:5px; margin-right:4px;}

/* 리스트 */
#listBox{margin-top:15px;}
#listBox .list_01 > a,
#listBox .list_01 > h2{display:block; padding:10px; box-sizing:border-box; position:relative; left:0; transition: left .3s ease-in-out; color:#333; font-size:22px; font-family: 'Cardo', 'Jeju Myeongjo', serif; font-weight:normal;}

/* 서브카테고리 */
#listBox .list_02{margin:10px 0; display:none;}
#listBox .list_02 a{ display:block; font-family: 'Cardo', 'Jeju Myeongjo', serif; font-size:16px; padding:7px 20px;}
/* BASIC css end */