/* BASIC css start */
/******************************************************* Side *******************************************************/

#side{position:fixed; left:0; top:0; width: 40%; min-width:550px; max-width:700px; height:100%; background: rgba(255,255,255,1); z-index:9998; visibility: hidden; transform: translateX(-100%); transition: transform .5s ease-in-out, visibility .5s ease-in-out; font-family: 'Cardo', serif; overflow-y:auto;}
#side.open{visibility:visible; transform:translateX(0%);}
#side .inner{width:100%; height:100%; padding:70px 70px 0 140px; box-sizing:border-box; position:relative;}
#side .inner .list_01{position:relative; left: -20px; opacity:0; transition: left .5s ease-in-out, opacity .4s ease-in-out;}

/* 사이드 오픈효과 */
#side.open .inner .list_01{opacity:1; left:0; transition: left .5s ease-in-out, opacity .4s ease-in-out;}

#side.open .inner .list_01.first{transition-delay: .3s !important;}/*memberBox*/
#side.open .inner .list_01:nth-child(1){transition-delay: .37s;}/*listBox 0.7s 차이*/
#side.open .inner .list_01:nth-child(2){transition-delay: .44s;}
#side.open .inner .list_01:nth-child(3){transition-delay: .51s;}
#side.open .inner .list_01:nth-child(4){transition-delay: .58s;}
/*
#side.open .inner .list_01:nth-child(5){transition-delay: .65s;}
*/

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

/* 유틸 */
#memberBox{width:100%;}
#memberBox p{font-size:13px; font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; color:#555; letter-spacing:0.5px; margin-bottom:20px; 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:10px;}
#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(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) span.circle{display:inline-block; width:5px; height:5px; border-radius:5px; background:#f76f59; vertical-align:5px; margin-right:4px;}

/* 리스트 */
#listBox{padding:30px 0;}
#listBox .list_01 > a{display:block; padding:7px 10px; box-sizing:border-box; position:relative; left:0; transition: left .3s ease-in-out; color:#333; font-size:32px; font-family: 'Cardo', 'Jeju Myeongjo', serif;}
#listBox .list_01 > a:hover{left:5px;}

/* 서브카테고리 */
#listBox .list_02{margin: 5px 0 5px 30px; display:none;}
#listBox .list_02 a{font-size:24px; line-height:40px; position:relative; left:0; transition: left .3s ease-in-out; font-family: 'Cardo', 'Jeju Myeongjo', serif;}
#listBox .list_02 a:hover{left:3px;}
#listBox .list_02 .kr{font-size: 20px !important;} /*한글일 경우 a에 kr클래스를 추가해주세요.*/

/* csCenter */
#csCenter{font-size:11px; font-family: 'Open Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; color:#ccc; letter-spacing:0.5px; line-height:20px; padding:25px 10px; border-top:1px solid #edebe8; box-sizing:border-box; margin-top:15px;}
#csCenter b{display:block; padding:15px 0; font-weight:600; font-size:13px; color:#656565;}
#csCenter b:first-child{padding-top:0;}
#csCenter span{color:#656565; font-size:12px; font-weight:600; display:block; padding-bottom:6px;}
/* BASIC css end */