/* BASIC css start */ /* 오른쪽퀵버튼 */ #fix_pagescroll { position:fixed; right:-250px; bottom:90px; z-index:99999; -webkit-transition:all 1s; moz-transition:all 1s; -o-transition:all 1s; transition:all 1s; } #fix_pagescroll.active { right:5px; bottom:100px; background:rgba(255,255,255,0); } #fix_pagescroll.active i { font-size:28px; vertical-align: text-bottom; } .updown > div { margin-top:2px; opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background-color: #fff; border-radius: 30%; border: 1px solid #ddd; } .updown div.r_icon { cursor:pointer; position:relative; width:30px; height:30px; line-height:17px; background-color: rgba(255,255,255,0.9); border:1px solid #ddd; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; text-align:center; box-sizing:border-box; font-size:28px; margin-left:auto; margin-right:0; } .updown img { width: 28px; height: 28px; vertical-align: text-bottom; } .mask { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:990 } .updown div.fixIcon.viewTitle { width: 130px; } .updown div.fixIcon a { display: none; } .updown div.fixIcon.viewTitle a { display: inline-block; } .updown div.fixIcon span { color: #000; font-size:12px; } .jcon { font-size: 24px; color: #333; } .jcon-favorite { color: #e74c3c; } /* ============= 사이드 메뉴 ============= */ #asideMenu { position:fixed; top:0; left:-100%; width:100%; height:100%; background-color:rgba(255,255,255,1); overflow-y:auto; overflow-x:hidden; z-index:9999; } #asideMenu .close { width:100%; text-align:left; border:0px solid #ddd; } #asideMenu #asideClose { width:40px; height:40px; line-height:45px; cursor:pointer; } #asideMenu #asideClose i { font-size:30px; padding:10px; font-weight: bold; cursor:pointer; } #asideMenu #asideClose:hover { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); } #asideMenu .logo { text-align:center; } #asideMenu .logo a { font-size:20px; font-weight: 700; } #asideMenu .sideBox { margin: 0 auto; border-bottom: 1px solid #ddd; padding: 30px; } /* 로그인 메뉴 */ .loginBx .loginBtnsArea .tx { font-size:1.3em; } .loginBox { text-align:center; } .loginBox ul { margin-top:15px; } .loginBox li { display:inline-block; text-align:center; width:calc(50% - 4px); } .loginBox li.bt_login { width:100%; } .loginBox li a { display: block; font-size: 1.2em; letter-spacing: 0; line-height: 2.4em; font-weight: 500; background-color: #333; color: #fff; border: 0; } .navWrap nav { border-bottom: 1px solid #ddd; padding-bottom: 20px; } /* 카테고리메뉴 */ aside .asideTop { text-align:center; font-size: 0.875em; overflow:hidden; padding: 0px 0px 10px; margin:3em 0 0; } aside .asideTop a:first-child { border-left: 0px solid #eee; } aside .asideTop a { width:49%; height:40px; line-height: 40px; font-size:1.5em; font-weight:700; position:relative; color:#5f7982; display:inline-block; box-sizing: border-box; } aside .asideTop a .fa { margin-top:10px; } aside .asideTop a.act { font-weight:900; font-size:2em; width:49%; } aside .asideTop a.act em { display:none; position:absolute; left:44%; bottom:-6px; border-top:6px solid #fff; border-left:4px solid transparent; border-right:4px solid transparent; } aside nav li { position:relative; } aside nav li a { display: block; height:50px; line-height: 50px; font-size: 1.5em; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 7em; margin: 0 auto; } aside nav li .fa { position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 35px; line-height:35px; } aside nav li > ul { display:none; border-top:0px solid #333; } aside nav li > ul > li { border-bottom:0px none; border-top:0px solid #333; } aside nav li > ul > li:first-child { border-top:0px none; } aside nav li > ul > li a { padding:0 40px 0 30px; margin: 0; } aside nav li > ul > li > ul { border-top:0px none; border-top:0px solid #333; } aside nav li > ul > li > ul > li { border-bottom:0px none; } aside nav li > ul > li a { padding-left: 40px; margin: 0; font-size: 1em; } aside nav li > ul > li a::before { content:'- ' } aside .navCategory { border-right:1px solid #ddd; margin-right:-1px; } .navWrap::after { display: block; content: ''; clear: both; } .navWrap a.act { width: 100%; display: block; text-align: center; margin: 40px auto 20px; } .navWrap a.act em { font-size:20px; text-align:center; font-weight:bold; } .navWrap .navCategory nav ul, .navWrap .navCommunity nav ul { display:flex; flex-wrap:wrap; margin: 0 auto; } .navWrap .navCategory nav ul li { width: 50%; } .navWrap .navCommunity nav ul li { width: 33%; } .navWrap .navCommunity nav ul li a { font-size: 1.2em; padding: 0; width: 5em; margin: 0 auto; } aside .navCustomer { margin:20px 0; padding: 20px 3em 10px; border-top: 2px solid #000; } aside .navCustomer nav li { border-bottom:0px solid #eee; position:relative; } aside .navCustomer nav p { display: block; /*height:30px; line-height: 30px; */ padding:0 0 0 20px; font-size:11px; font-weight:700; margin-right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:normal; } aside .navCustomer nav p span { font-weight:700; } aside .navCustomer nav .phone a { font-weight:bold; font-size:2em; padding:0 0 5px 0px; } aside .navCustomer nav p.tel { display: block; height:35px; line-height:35px; background:#fff; width:90%; text-align:center; margin:10px auto; padding:0 !important; } aside .navCustomer nav p.tel a { color:#000; font-weight:300; font-size:14px; letter-spacing:0.1em; } .h_layerTitle { height:30px; line-height:30px; padding:0 20px; margin-bottom:0px; border-bottom:0px solid #333; } .h_layerTitle h3 { font-weight:900; color:#fff; } .h_layerTitle .fa-times { float:right; margin-top: 5px; } #header { position:fixed; border-bottom:0px solid #ddd; width:100%; text-align:center; background:rgba(255,255,255,0.95); z-index:100; top:0; } #header.fixed.small { background:rgba(255,255,255,0.95); left:0; top:0; } #header .header-top { position:relative; width:100%; height:50px; text-align:left; } #header .header-top:hover { background:rgba(255,255,255,0.95); } .sub_list_title { border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; } #header .header-top h1 a { display: block; height: 50px; line-height: 50px; vertical-align: 50px; color: #222; text-align: center; width: fit-content; margin: 0 auto; } #header .header-top h1 a p { font-size: 0.4em; line-height: 15px; margin: -7px 0 0 7px; letter-spacing: 1.5em; } #header .header-top .logo img { width:auto; height:24px; margin-top:13px; } /* 로고이미지로사용시 */ #header .header-top p.category { position:absolute; top:10px; left:10px; } #header .header-top p.category .line:after { display:block; height:1px; } #header .header-top p.category a { display:block; position:relative; width:20px; height:30px; } #header .header-top p.category span { display:block; position:absolute; top:50%; width:100%; height:1px; background: rgba(0,0,0,1); transform:translate(0,-50%); color:transparent; } #header .header-top p.category span:before, #header .header-top p.category span:after { content: ""; position:absolute; left:0; top:0; width:100%; height:1px; background: rgba(0,0,0,1); } #header .header-top p.category span:before { top:-6px; } #header .header-top p.category span:after { top:6px; } #header .header-top p.category i { display:block; font-size: 24px; color:#000; cursor:pointer } #header .header-top p.cart { position:absolute; top:20px; right:45px; } #header .header-top p.cart span { width:22px; height:18px; display:block; position:relative; color:transparent; } #header .header-top p.cart .css-cart { width:20px; height:16px; background:; border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; border:1px solid #333; position:relative; } #header .header-top p.cart .css-cart:before { content:''; height:8px; width:12px; border:1px solid #333; border-bottom:none; border-radius:50px 50px 0 0; -webkit-border-radius:50px 50px 0 0; -moz-border-radius:50px 50px 0 0; position:absolute; top:-7px; left:3px; } #header .header-top p.cart a .count { position:absolute; left:50%; top:0px; transform:translateX(-50%); color:#000; font-size:0.8rem; font-weight:300; z-index:99; text-align:center; } /* 검색 */ #header .header-top p.searchToggle { position:absolute; top:14px; right:10px; } #header .header-top p.searchToggle span { width:22px; height:22px; display:block; position:relative; color:transparent; transition:all 0.6s; } #header .header-top p.searchToggle .css-ser:before { content:''; height:16px; display:block; position:absolute; top:0; left:0; width:16px; border:1px #333 solid; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; } #header .header-top p.searchToggle .css-ser:after { content:''; height:10px; display:block; position:absolute; top:0; left:0; width:1px; background:#333; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); top:14px; left:17px; } #header .header-top p.searchToggle.active .css-ser { border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; background:transparent; transition:all 0.6s; } #header .header-top p.searchToggle.active .css-ser:before, #header .header-top p.searchToggle.active .css-ser:after { border:0px #333 solid; height:1px; width:22px; display:block; background:#333; position:absolute; top:10px; left:0px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); } #header .header-top p.searchToggle.active .css-ser:after { content:''; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); } /* 이미지로사용시 #header .header-top p.searchToggle a { display:block; width:30px; height:30px; background:url('/design/d4-0278/wizmobile/t_ser_b.png') no-repeat center / 22px 22px; } #header .header-top p.searchToggle a.active { background-image:url('/design/d4-0278/wizmobile/t_cart_b.png'); background-size:13px; } */ #header .header-top .searchLy { display:none; position:absolute; top:50px; left:0; padding:18px 5% 18px; background:#fff; z-index:100; width: 90%; border-bottom: 1px solid #ddd; } #header .header-top .searchLy .search { position:relative; text-align:center; border-bottom: 1px solid #ddd; } #header .header-top .searchLy .search input { width:100%; height:40px; border:none; border-radius:5px; outline:none } #header .header-top .searchLy .search .btn_search { position:absolute; right:0px; top:0px; border:0; border-radius:5px; background:#fff; padding:11px 8px 10px; } #header .header-top .searchLy .search .btn_search i { width:18px; height:18px; line-height:18px; font-size:15px; border-radius:20px; text-align:center; background:#eee; } #header .header-top .searchLy .search .delete_btn { position:absolute; top:0px; right:40px; width:30px; height:24px; font-size:18px; color:#adadad; line-height:24px; z-index:10 } /* 검색어삭제 */ #header .header-top .searchLy .clearTag { height:200px; } /* 검색영역 */ .searchArea { height: 40px; background-color: #eaeaea; border: 1px solid #eaeaea; border-radius: 4px; } .searchArea form { height:100%; } .searchArea .searchWrap { position:relative; display:block; height:100%; box-sizing:border-box; } .searchArea input { border:0; height:100%; padding: 0 30px 0 5px; width:100%; line-height: 28px; box-sizing:border-box; font-size:12px; } .searchArea .searhBtn { position:absolute; top:0; right:0; bottom:0; display:block; width:30px; text-align:center; font-size:2em; padding:0.3em; } #top_menu.fixed { opacity: 1; /* visibility: visible; */ background:rgba(255,255,255,0.95); left:0; top:50px; border-bottom: 1px solid #999; } #top_menu { opacity: 0; /* visibility: hidden; */ position:fixed; left:0; top:-40px; width:100%; -webkit-transition:all 0.3s ease,-webkit-transform 0.3s ease-out; -moz-transition:all 0.3s ease,-moz-transform 1s ease-out; -ms-transition:all 0.3s ease,-ms-transform 0.3s ease-out; } .top_menu { position:relative; } .top_menu .swiper-container { overflow:hidden; height:40px; padding-right:30px; } .top_menu .swiper-slide { text-align: center; font-size: 18px; width:auto; padding:0 5px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .top_menu .swiper-wrapper .swiper-slide a { display:block; overflow:hidden; text-overflow:ellipsis; width:100%; height:40px; line-height:40px; padding:0 5px; color:#222; font-size:14px; font-weight:400; white-space:nowrap;; } @media screen and (min-width:768px){ #header #menu { width:85px; } #header .headerTop { padding-right:85px; } #header .search { padding-right:85px; } #header .search .searchBox input { width:95%; } #header .search .btn_search { width:85px; } } /* 전체메뉴버튼 */ .all_menu { position:absolute; right:0; top:0px; z-index:10; overflow:hidden; width:30px; height:100%; background:rgba(255,255,255,0.9); border-left:0px solid #ddd; transition:all 0.35s;} .all_menu span:before{content:''; height:10px; width:10px; display:block; border:1px solid #222; border-right-width:0; border-top-width:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); position:absolute; bottom:20px; left:10px; transition:all 0.35s ease;} .all_menu.active span:before{ content:''; height:10px; width:10px; display:block; border:1px solid #222; border-left-width:0; border-bottom-width:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); position:absolute; bottom:15px; left:10px;} .top_menu .allmenuLy {display:none; position:absolute; top:40px; left:0; padding:15px 4% 5px; background:#f5f5f5; z-index:100; width:100%; box-sizing: border-box;} .top_menu .allmenuLy h2 { text-align:left; padding-bottom:5px; color:#222; font-size:10px; font-weight:500; } .allmenuLy .inner_menu { width:100%; background:rgba(255,255,255,0.95); overflow:hidden; margin-bottom:10px;} .allmenuLy .inner_menu:after { content: ""; display: block; clear: both; } /* 가로5개 */ .allmenuLy .inner_menu ul.grid5 { overflow:hidden; position:relative; z-index:1; width:100%; margin-bottom:-1px;} .allmenuLy .inner_menu ul.grid5 > li {float:left; width:calc(20% - 1px ); margin:-1px 0px 0 -1px; border:1px solid #f5f5f5; text-align:center; } .allmenuLy .inner_menu ul.grid5 > li:nth-child(5n+5) {border-right:0;} /* 가로4개 */ .allmenuLy .inner_menu ul.grid4 { overflow:hidden; position:relative; z-index:1; width:100%; margin-bottom:-1px;} .allmenuLy .inner_menu ul.grid4 > li {float:left; width:calc(25% - 1px ); margin:-1px 0px 0 -1px; border:1px solid #f5f5f5; text-align:center; } .allmenuLy .inner_menu ul.grid4 > li:nth-child(4n+4) {border-right:0;} /* 가로3개 */ .allmenuLy .inner_menu ul.grid3 { overflow:hidden; position:relative; z-index:1; width:100%; margin-bottom:-1px;} .allmenuLy .inner_menu ul.grid3 > li {float:left; width:calc(33.33% - 1px ); margin:-1px 0px 0 -1px; border:1px solid #f5f5f5; text-align:center; } .allmenuLy .inner_menu ul.grid3 > li:nth-child(3n+3) {border-right:0;} .allmenuLy .inner_menu ul > li a {display:block; overflow:hidden; height:40px; padding:0 5px; line-height:40px; color:#222; font-size: 13px; font-weight: 400;} /* .allmenuLy .inner_menu ul.smenu > li:nth-child(2) a { color:#ad4d4d; } .allmenuLy .inner_menu ul.smenu > li:nth-child(1) a { color:#ad864d; } */ /* BASIC css end */