/* BASIC css start */
/******************************************************* side *******************************************************/

#mask{position:fixed; top:0; left:0; width:100%; min-width:768px; height:100%; background:rgba(20,20,20,0.8); z-index:999; visibility:hidden; opacity:0; transform:translateX(100%); transition:0.5s ease-in-out;}
#mask.open{visibility:visible; opacity:1; transform:translateX(0);}

#inner{position:fixed; top:50%; left:50%; transform:translate(-315px, -216px); text-align:center; z-index:1000; visibility:hidden; opacity:0; text-align:center; width:630px; height:433px;}
#inner.open{visibility:visible; opacity:1;}

/* 멤버, 카테고리 */
#inner #member,
#inner #category{display:inline-block; vertical-align:top; text-align:left;}
#inner #member a,
#inner #category a{color:#efefef; font-size:16px; position:relative; left:0; transition:0.3s ease-in-out;}
#inner #member{padding-top:3px; margin-right:180px;}
#inner #member a{font-family: 'Montserrat', 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size:16px; line-height:27px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; }
#inner #board{margin-top:40px;}
#inner #category a{font-size:38px; line-height:45px; letter-spacing:0.8px; color:#efefef; font-family:'Rozha One', 'Jeju Myeongjo', serif;}
#inner #member a:hover,
#inner #category a:hover{left:5px;}

#inner #member > ul li:nth-child(4),
#inner #member > ul li:nth-child(6),
#inner #member > ul#board li:nth-child(3){display:none;}
#inner #member > ul#board li:nth-child(4){display:block;}

/* 장바구니갯수 */
#inner #member li.cart strong{display:inline-block; vertical-align:middle; margin:-2px 0 0 3px; font-weight:600; font-size:12px; background:#eee; color:#444; border-radius:14px; width:14px; height:14px; line-height:14px; text-align:center;}

/* 검색창 */
#inner .searWrap{width:100%; margin-top:60px;}
#inner .searWrap .searBox{width:100%;}
#inner .searWrap .searBox fieldset{position:relative;}
#inner .searWrap .searBox fieldset input{width:100%; height:60px; color:#efefef; border:2px solid #efefef; background: transparent; padding:5px 40px 5px 25px; box-sizing:border-box; font-family: 'Montserrat', 'Noto Sans KR', 'Nanum Gothic', sans-serif; font-size:16px; font-weight:400; letter-spacing:0.5px;}
#inner .searWrap .searBox fieldset .btn{position:absolute; top:17px; right:20px;}
#inner .searWrap .searBox fieldset .btn i{font-size:25px; color:#eee;}

/* transition-delay 관련 */
#inner #member,
#inner #category,
#inner .searWrap{position:relative; left:-10px; opacity:0; transition:0.3s ease-in-out;}
#inner.open #member,
#inner.open #category,
#inner.open .searWrap{left:0; opacity:1;}
#inner.open #member{transition-delay: .4s;}
#inner.open #category{transition-delay: .58s;}
#inner.open .searWrap{transition-delay: .76s;}

/* copyright */
#mask .copy{position:fixed; bottom:70px; right:70px; font-size:13px; line-height:1; color:#efefef;}



/************************************ 0~1200px ************************************/
@media screen and (max-width:1200px){

	/* side */
	#inner #member a{line-height:25px;}
	#inner #category a{font-size:34px; line-height:42px;}
	#inner .searWrap .searBox fieldset input{height:55px; padding-left:20px; padding-right:35px;}
	#inner .searWrap .searBox fieldset .btn{top:15px;}
	#mask .copy{bottom:30px; right:40px;}

}
/************************************ //0~1200px ************************************/
/* BASIC css end */