/* BASIC css start */ /*====================================================================*/ /******************************* header *******************************/ /*====================================================================*/ header{position:fixed; left:0; top:0; width:100%; height:42px; background:rgba(253,253,255,0.3); z-index:101; -webkit-transition:0.35s ease-in-out; -moz-transition:0.35s ease-in-out; -o-transition:0.35s ease-in-out; transition:0.35s ease-in-out;} /* 로고 */ header .logo{} header .logo a{height: 42px;line-height: 42px;padding: 0 15px 0 15px;font-size: 13px;letter-spacing: 6px;color: #1b1b1b;font-weight: 700;display: inline-block;} header .logo a img {height:60%;} /* 삼선메뉴 */ header #menu { position: relative;width:15px;padding: 16px 0;cursor: pointer;display: inline-block;vertical-align: middle;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} header #menu a{display:block; position:relative; width:14px; height:10px;padding:0;} header #menu a span{display:block; width:100%; height:1px; opacity:1; position:absolute; right:0; background:#757575; text-indent:-9999px; z-index:9999;} /* 위치 */ header #menu a span:nth-child(1){width:100%; top:2px;} header #menu a span:nth-child(2){width:100%; top:6px;left:5px;} /* 장바구니 */ header .cart { position: absolute;right: 10px;top: 12px;padding: 0;cursor: pointer;} header .cart a{display: block;position:relative;} header .cart a img{width:13px; height:auto;} header .cart a span{ position: absolute;top:0px;right:0px;width: 16px;height: 16px;line-height: 10px;text-align: center;background: #776c63;color: #fff;border-radius: 50%;} header .cart a span strong span { display: block;font-weight: 300;font-size: 11px;transform: scale(0.8);padding-top: 1px;line-height: 15px;} /* 검색창 */ #one_search {position: fixed;left: calc(50% - 400px);top: calc(50% - 150px);border-radius: 9px;width: 800px;height: 300px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;text-align: center;z-index: 9999;background: #fff;opacity: 0;visibility: hidden;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;transition-timing-function: ease;-webkit-transition-timing-function: ease;} #one_search.active {opacity: 1;visibility: visible;} #one_search > div {display: table;width: 100%;height: 100%;} #one_search > div > ul {display:table-cell;vertical-align: middle;} #one_search .cate {width:700px;margin:0 auto;display: none;} #one_search .cate h2 { display: block;padding: 51px 0 28px;text-align: center;font-size: 10px;font-weight: 400;letter-spacing: 1.4px;color: #bbb;} #one_search .cate li { display: inline-block;padding: 0 16px;position: relative;} #one_search .cate li:after { position: absolute;content: "";width: 1px;height: 13px;right: -1px;top: 12px;background: #484848;transform: skewX(-30deg);} #one_search .cate li a { font-size: 11px;letter-spacing: 0px;line-height:40px;} #one_search .cate li:last-child:after {display: none;} #one_search .cate .sub-category{display: none !important;} #one_search input[name="keyword"]::-webkit-input-placeholder {color: #ddd;font-size: 13px;letter-spacing: 3px;} /*====================================================================*/ /******************************** side ********************************/ /*====================================================================*/ aside{z-index:99999; position:fixed; left:-250px;top:0px; visibility:hidden; opacity:0;overflow:auto; overflow-x:hidden; width:70%; height:100%; font-size:11px; background-color:#fff; box-sizing:border-box; transition:.3s ease-in-out;} aside a{font-size:10px; line-height:16px; letter-spacing:0.5px;} /* 닫기 버튼 */ aside .btnClose{ position: absolute;top: 19px;left: 25px;display: block;padding: 11px;font-size: 17px;color: #222;z-index: 999;;} /* 유저영역 */ #user{padding:13px 0 13px 30px;} #user ul{font-size:0; line-height:0; letter-spacing:0;} #user ul li{display:inline-block; vertical-align:middle; margin-right:20px; position:relative;} #user ul li a{font-size:10px; line-height:16px; letter-spacing:0.3px; color:#8a7c7c;} #user ul li.xans-layout-orderbasketcount a strong{display:inline-block; font-size:10px; margin-left:5px; font-weight:600; color:#2f2f2f; height:15px; border-bottom:1px solid #2f2f2f; box-sizing:border-box;} #joinpoint{position:absolute; bottom:-26px; left:-6px; background:#f5f5f5; width:52px; text-align:center; line-height:20px; border-radius:3px; font-size:10px;} #joinpoint .tail{position:absolute; left:23px; top:-5px; border-bottom:5px solid #f5f5f5; border-right :5px solid transparent; border-left :5px solid transparent;} aside .inner { width: 100%;text-align: left;padding: 78px 35px 0;position: relative;height: 100%;box-sizing: border-box;} #cate ul li:nth-child(1) a{} #cate ul li:nth-child(2) a{} /* 검색영역 */ aside .searArea{position:relative; width:100%; margin-bottom:30px;} aside .searArea input{ background:transparent;} aside .searArea input#keyword{width:85%; box-sizing:border-box; height:30px; line-height:30px; border-bottom:1px solid #afafaf; background:transparent;} aside .searArea .btn{position:absolute; top:0; right:0; font-size:14px; padding:8px;} /* 카테고리, 게시판 목록 */ aside .inner .list{font-size:0; line-height:0; letter-spacing:0; margin-bottom:30px;} aside .inner .list section{ display: block;vertical-align: top;border-top: 1px solid #ddd;padding: 15px 0;} aside .inner .list section ul{} aside .inner .list section ul li{position:relative; font-weight:400; line-height:20px; letter-spacing:0.3px; box-sizing:border-box; color:#747474; text-transform:uppercase;} /* 소셜 */ aside .social li {display: inline-block;padding-right: 11px;} aside .social li:hover a { padding-left:0px;opacity: .5;} aside .social li a i{ font-size: 14px;color: #4c4c4c;line-height: 25px;} aside .copyright {position: absolute;bottom:20px;left:0;border:0;padding-left:35px;color:#111;letter-spacing: 1px;} /* 확장 */ html.expand body{position:fixed; top:0; left:0; width:100%;} html.expand #container{} html.expand #btnFoldLayout{} html.expand aside{overflow-x:hidden;visibility:visible;opacity:1;left:0;top:0;} #mask{opacity:0;visibility:hidden;position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:9999;} html.expand #mask {opacity:0.35;visibility:visible;} /* 트랜지션 */ html.expand aside, html aside, #mask, html.expand #mask{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;transition-delay:.13s} /* BASIC css end */