/* BASIC css start */ /*====================================================================*/ /******************************* header *******************************/ /*====================================================================*/ header{position:fixed; left:0; top:0; width:100%; height:46px; background:rgba(253,253,255,0.3); z-index:100; -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;} .toptop_ban { text-align: center; background: #0383e2; width: 100%; height: 34px; left: 0; top: 0; z-index: 99; overflow: hidden; display: none; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .toptop_ban .swiper-slide a { display: block; color: #fff; line-height: 34px; font-size: 12px; letter-spacing: -0.5px; } /* 로고 */ header .logo{position:absolute; left:0; top:40px;} header .logo a{display:block; font-size:15px; letter-spacing:4px; height:46px; line-height:50px; font-family:'Hind Guntur', sans-serif; color:#8a7c7c; font-weight:300; padding:0 30px;} /* 삼선메뉴 */ header #menu{position:absolute; right:0; top:40px; padding:18px 30px; cursor:pointer;} header #menu a{display:block; position:relative; width:12px; height:10px;} header #menu a span{display:block; width:100%; height:2px; opacity:1; position:absolute; right:0; background:#8a7c7c; text-indent:-9999px; z-index:100;} /* 위치 */ header #menu a span:nth-child(1){width:100%; top:0px;} header #menu a span:nth-child(2){width:100%; top:4px;} header #menu a span:nth-child(3){width:100%; top:8px;} /* 카테고리박스 */ #one_cate2{width:100%; padding-top:46px;} #one_cate2 ul{font-size:0; line-height:0; letter-spacing:0; border-bottom:1px solid #f3f3f3; box-sizing:border-box;} #one_cate2 ul li{display:inline-block; vertical-align:top; border-top:1px solid #f3f3f3; border-bottom:0; width:100%; box-sizing:border-box; position:relative;} #one_cate2 ul li:before{content:""; position:absolute; top:11px; left:0px; width:1px; height:12px; background:#f0f0f0;} #one_cate2 ul li:nth-child(3n+1):before{background:transparent;} #one_cate2 ul li a{display:block; text-align:center; padding:9px 0; font-size:10px; line-height:16px; text-transform:uppercase; letter-spacing:0.8px; color:#8a7c7c} /*====================================================================*/ /******************************** side ********************************/ /*====================================================================*/ aside{z-index:100; position:fixed; right:-250px; top:0px; visibility:hidden; opacity:0; overflow:auto; overflow-x:hidden; width:80%; height:100%; font-size:11px; background-color:#fff; box-sizing:border-box; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;} aside.open{right:0; opacity:1; visibility:visible;} aside a{font-size:11px; line-height:16px; letter-spacing:0.5px;} /* 닫기 버튼 */ aside .btnClose{position:absolute; top:0; right:0; display:block; padding:15px 30px; font-size:12px;} aside .inner{width:100%; text-align:left; padding:20px 40px; box-sizing:border-box;} #one_user{padding:15px 46px 15px 39px; background:#f9f9f9;} #one_user ul{font-size:0; line-height:0; letter-spacing:0;} #one_user ul li{display:inline-block; vertical-align:middle; margin-right:15px;} #one_user ul li a{font-size:10px; line-height:16px; letter-spacing:0.8px; color:#8a7c7c;} #one_user ul li.cart a strong{display:inline-block; font-size:10px; margin-left:5px; font-weight:600; color:#dab799; height:15px; border-bottom:1px solid #dab799; box-sizing:border-box;} /* 사이드상단 - 탭 */ #one_sideTop .side_tab{font-size:0; line-height:0; letter-spacing:0;} #one_sideTop .side_tab li{display:inline-block; vertical-align:middle; padding:10px 0; width:50%; font-size:12px; line-height:1; color:#dadada; font-family:'Hind Guntur', sans-serif; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; font-weight:400; -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; transition:0.2s ease-in-out;} #one_sideTop .side_tab li:last-child{margin:0; position:relative; text-align:right;} #one_sideTop .side_tab li:last-child:before{content:""; position:absolute; top:10px; left:-6px; width:1px; height:8px; background:#ddd;} #one_sideTop .side_tab li.active{color:#747474 !important;} /* 사이드상단 - 카테고리, 게시판 목록 */ #one_sideTop section{display:none; padding-top:10px;} #one_sideTop section.active{display:block;} #one_sideTop section ul{} #one_sideTop section ul li{position:relative; padding-left:15px;} #one_sideTop section ul li a{display:block; font-size:10px; font-weight:300; line-height:24px; letter-spacing:0.8px; box-sizing:border-box; color:#747474;} #one_sideTop section ul li:before{content:""; position:absolute; background-color:#afafaf; width:8px; height:1px; left:0; top:11px;} /* 사이드하단 */ #one_sideBottom{position:absolute; bottom:0px; left:0px; width:100%;} /* 사이드하단 - 검색영역 */ #one_sideBottom .searArea{position:relative;} #one_sideBottom .searArea input{width:100%; box-sizing:border-box; height:40px; line-height:40px; padding:5px 46px 5px 20px; background:#f9f9f9;} #one_sideBottom .searArea .btn{position:absolute; top:0; right:0; padding:13px 30px 10px; font-size:13px;} /* 사이드하단 - CS영역 */ #one_sideBottom .csArea{font-size:10px; color:#c5c5c5; padding:20px; box-sizing:border-box; letter-spacing:0.3px; font-weight:300; line-height:18px;} #one_sideBottom .csArea h3{font-size:13px; color:#666; font-weight:normal; letter-spacing:0.5px; padding-bottom:5px; font-weight:300;} #one_sideBottom .csArea h3 span{font-size:10px; margin-left:4px; letter-spacing:0.5px;} #one_sideBottom .csArea b{margin-right:10px; font-weight:400; letter-spacing:0.5px;} #mask{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:99;} .menu_on {height:100%; overflow:hidden;} .menu_off {height:auto; overflow:initial;} /* BASIC css end */