/* BASIC css start */ .dn {display:none !important;} /********************************* header *********************************/ .top_inner {position:relative; z-index:101;} .top_banner {height:40px; background:#0083dd; overflow:hidden;} .top_banner .swiper-slide a {height:40px; line-height:40px; color:#fff; display:block; text-align:center; font-size:16px;} .top_inner .language {position:absolute; top:5px; left:30px; z-index:100;} .top_inner .language > a {display:block; font-size:14px; color:#fff; font-weight:bold; height:30px; line-height:30px;} .top_inner .language > a i {line-height:32px; vertical-align:top;} .top_inner .language .language_inner {display:none; border:1px solid #000; background:#fff; position:absolute; top:30px; left:0; padding:10px; text-align:center;} .top_inner .language .language_inner a {font-size:14px; color:#878787; font-weight:500;} #topBar { position: relative; width: 100%; height: 80px; height: auto; background: #e7dbd3; text-align: center; -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; } #topBar img { display:inline-block; *display:inline; *zoom:1; width: 100%; height: auto; -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; } #topBar.fixed { display: none; } #topAppBox { display: none; opacity: 0; position: absolute; bottom: 0;z-index: 9999;background: #fff;border-radius: 10px;padding: 20px;right: -270px;top: 30px;height: 25px;overflow: hidden; -webkit-box-shadow: 5px 6px 5px -6px rgba(0,0,0,0.19);-moz-box-shadow: 5px 6px 5px -6px rgba(0,0,0,0.19);box-shadow: 5px 6px 5px -6px rgba(0,0,0,0.19); -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; } #topAppBox .btn a { color: #fff; background: #888;vertical-align: top; } #topAppBox.showBox { display: block; opacity: 1; -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; } #header_wrap.headroom--top {position:relative;} #header_wrap.headroom--not-top {position:fixed; top:0; left:0; width:100%;} #header_wrap.slideDown.animated { -webkit-animation-name: slideDown; animation-name: slideDown; } #header_wrap.slideUp.animated { -webkit-animation-name: slideUp; animation-name: slideUp; } #header_wrap.slideUp { height: 59px; } /* 전체카테고리 와이드일때 */ #header #allCate.hasWide{ position: absolute;top: 92px;left: 30px;width: calc(100% - 60px);padding: 40px;background: rgba(255,255,255,0.96);box-sizing: border-box;box-shadow: 0px 5px 13px 5px rgba(27, 27, 27, 0.17);} #header #allCate.hasWide h1 {display:block !important} /* 전체카테고리 와이드아닐때 */ #header_wrap.fixHeader2 #allCate.hasWide, #header #allCate { box-shadow: 0px 4px 5px 0px rgba(56, 56, 56, 0.08);left: 0;width: 100%;top: 58px;padding: 29px 40px 44px 40px;border-top: 1px solid #eee;background: #fff;} #header_wrap.fixHeader2 #allCate.hasWide h1, #header #allCate h1 {display:none !important} /* 탑라인 */ #topLine_wrap {position:relative;} #topLine{position: relative; width: 100%; height: 50px; min-width:1200px;background:#000;padding:15px 30px;z-index: 9999;box-sizing: border-box;border-bottom: 1px solid #000;} #topLine .btHome {opacity:0;visibility:hidden;position:absolute;left:30px;text-align:center;top:19px;z-index:99;width: 18px;height: 18px;font-size:12px;color:#888} #topLine a {display:inline-block;font-size:12px;letter-spacing:-0.5px;color:#fff;font-weight:500; text-align:center; line-height:18px;} #topLine a:hover{color:#fff;} #topLine.fixTopLine {background:#f7f7f7; display: none; } /* world */ #topLine .worldver { position:relative;display:inline-block;} #topLine .worldver div { position: absolute;left: -8px;top: 1px;opacity: 0;visibility: hidden;padding-top: 25px;} #topLine .worldver:hover div { opacity:1;visibility:visible;} #topLine .worldver div ul { background: #fff;padding: 6px 9px 6px 9px;width: 82px;box-shadow: 0px 7px 5px rgba(45,45,45,0.22);} #topLine .worldver > a { display:inline-block;position:relative;padding-right:12px;font-family:lato;font-size:10px;letter-spacing:1px;} #topLine .worldver > a:after { content: "";position: absolute;right: 8px;top: 4px;width: 1px;height: 11px;background: #dcdcdc;} #topLine .worldver a img { vertical-align:middle !important;margin-right:4px;} #topLine .worldver div a { color:#000; text-align: left;display: BLOCK;position: relative;font-family: lato;font-size: 10px;letter-spacing:0.5px;height: 25px;line-height: 25px;border-bottom: 1px solid #f5f5f5;} #topLine .worldver div img { margin-right: 10px;} #topLine .worldver div a:last-child { border-bottom:0;} #topLine .inline_left {display:inline-block; position: relative;} #topLine .inline_left > a { display:inline-block;position:relative;padding-right:20px;font-family:lato;font-size:10px;letter-spacing:1px;} #topLine .inline_left > a:after { content: "";position: absolute;right: 8px;top: 4px;width: 1px;height: 11px;background: #dcdcdc;} #topLine .inline_left > a#appBtn {padding-right:0;} #topLine .inline_left > a#appBtn:after { content:"";display:none;} #topLine .left {float:left; line-height:18px;} #topLine .left h1 {color:#fff; font-size:11px; letter-spacing:-0.5px;} #topLine .left h1 a {display:inline-block; padding-left:50px; position:relative; font-weight:normal;} #topLine .left h1 a img {vertical-align:middle;} #topLine .left h1 a:after {content: "";position: absolute;left:24px;top: 4px;width: 1px;height: 11px;background: #dcdcdc;} #topLine .left h1 a i {display:inline-block; width:14px; height:14px; line-height:14px; border-radius:16px; background:#dcdcdc; color:#000; font-size:8px; margin-top:2px; margin-left:5px;} #topLine .right {float:right;} #topLine .right > li {display:inline-block;position:relative;padding-left:20px;} #topLine .right > li:after {content: "";position: absolute;left:8px;top: 4px;width: 1px;height: 11px;background: #dcdcdc;} #topLine .right > li.first:after {content:"";display:none;} #topLine .right > li a {line-height:18px;} #topLine .right > li img {vertical-align:middle !important;margin-left:4px;margin-top:-2px;opacity:0.8;} #topLine .right > li.btn_join {position:relative;} #topLine .right > li.btn_join .ani {position: absolute;left:9px;min-width:52px;bottom: -23px;text-align: center;padding: 1px 6px;background:#8a8a8a;border-radius: 5px;letter-spacing: 1px;color: #fff;font-family: lato;z-index:99;} #header_wrap.slideDown #topLine .right > li.btn_join .ani {display:block;} #header_wrap.slideUp #topLine .right > li.btn_join .ani {display:none;} #topLine.fixTopLine {} #topLine.fixTopLine .left{padding-left:25px;} #topLine.fixTopLine .btHome {transition-delay:0.5s;opacity:1;visibility:visible;} /* 탑라인 우측 서브메뉴 */ #topLine .right > li:hover > .subMenu {display:block;top:5px;} #topLine .subMenu { position: absolute;width: 120px;padding: 15px 20px;margin: 20px 0 0;box-shadow: 0 0 5px 2px rgba(195,195,195,0.1);box-sizing: border-box;background: #fff;right: -21px;top: 15px;z-index: 999;display:none;} #topLine .subMenu::before { position: absolute;top: -7px;right: 42px;width: 0;height: 0;border-style: solid;border-width: 0 12px 17px 12px;border-color: transparent transparent #ffffff transparent;display: block;z-index: 1;content: "";} #topLine .subMenu::after { position: absolute;top: -4px;right: 53px;width: 3px;height: 4px;box-shadow: 0 0 7px 2px rgba(195,195,195,0.1); display: block;z-index: -1;content: "";} #topLine .subMenu li {display: block; line-height: 26px; border-bottom: 1px solid #ececec; padding:0 2px;} #topLine .subMenu li:last-child {border:0;margin:0;} #topLine .subMenu li, #topLine .subMenu li a {color:#000; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;} #topLine .subMenu li:hover a {padding-left:2px; color:#000;} .headerMyshop .subMenu li i { display: none !important; } /* 로고라인 */ #header_wrap{position:relative; width:100%;min-width:1380px; z-index:1002;} #header{position:relative; width:100%; padding:0px 30px 0; box-sizing:border-box; z-index:100; background:#fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1); min-width: 1380px;} #header .logoArea{padding:0; box-sizing:border-box; transition:.4s ease-in-out;} #header .logoArea:after{content:""; clear:both; display:block;} #header .logoArea .logo{display:inline-block; vertical-align:middle; float: left; margin-bottom:0;} #header .logoArea .logo a{display:inline-block; *display:inline; *zoom:1; color:#000; letter-spacing:0.4px; font-weight:600; font-size:24px;line-height:70px; vertical-align: unset; } #header .logoArea .logo a#btn-allCate{display:inline-block; *display:inline; *zoom:1; color: #000; letter-spacing: 0.4px; font-size: 24px; line-height: 11px; vertical-align: text-top; margin-top: -2px;} #header .logoArea .logo a.one {display:none;} #header .logoArea .logo a span{font-family: Poppins;} #header .logoArea_left{float:left; width: calc(100% - 170px); text-align: center; white-space: nowrap;} #header .logoArea_right{float:right; width: 170px; font-size:0; line-height:0; letter-spacing:0;} #header .logoArea_right .rightIcon{position:relative; display:inline-block; vertical-align:middle; text-align:center; padding:23.5px 16px; cursor:pointer;} #header .logoArea_right .rightIcon:before{content:""; width:1px; height:20px; top:27px;left:0px; background:#ececec; position:absolute;} #header .logoArea_right .rightIcon a{position:relative;} #header .logoArea_right .rightIcon a img{opacity:0.95;} #header .logoArea_right .rightIcon i{font-size:19px;line-height:36px;text-align:center; color:#5b5b5b; *color:#bcbab8; transition: .1s ease-in-out;} #header .logoArea_right .rightIcon:first-child:before{background:transparent;} #header .logoArea_right .rightIcon:last-child{padding-right:0;} #header .logoArea_right .rightIcon i:hover{color:#988d81;} #header .logoArea_right .rightIcon.cart {position:relative;} #header .logoArea_right .rightIcon.cart span {position: absolute; bottom: -10px; right: -5px; background: #ff6a10; width: 16px; height: 16px; border-radius: 100%; color: #fff; line-height: 16px; text-align: center; font-size: 11px;} #header .logoArea_right .rightIcon.user > a > img {width:23px;} #header .logoArea_right .rightIcon.user > a .ani {position: absolute; left:50%; margin-left:-32px; width:64px; top: -22px; text-align: center; background:#8a8a8a; border-radius: 5px;letter-spacing: 1px;color: #fff;font-family: lato;z-index:99;} #header .logoArea_right .rightIcon.user .dep_user {display:none; position:absolute; top:50px; left:-10px; width:60px; text-align:center; padding:10px; border:1px solid #000; background:#fff;} #header .logoArea_right .rightIcon.user .dep_user a {display:block; font-size:14px; color:#000; line-height:22px;} #header .logoArea_right .rightIcon.user:hover .dep_user {display:block;} /* 검색영역 */ .headerSearch { position: absolute;right: 125px;top: 13px;width: 380px;z-index: 101;box-sizing: border-box;border-radius: 2px;display: none;background: #f5f5f5;border-radius: 17px;} .headerSearch > ul {text-align:Center;} .headerSearch input {display:inline-block;width:100%;border:0 !important;height:30px !important;line-height:30px !important;box-sizing:border-box;padding:5px !important;padding-left:15px !important;background:transparent; font-size:14px;} .headerSearch .btn_search {position:absolute; right:5px; top:4px;cursor:pointer;} .headerSearch .btn_search i { font-size: 17px;padding: 2px 8px 0 0;border-radius: 15px;color: #484848;} /* 카테고리 */ #header .category{display:inline-block; vertical-align:middle; position:relative; text-align:left; box-sizing:border-box; font-size:0; line-height:0; letter-spacing:0;} #header .category > ul{display:inline-block; vertical-align:middle;} #header .category > ul > li{position:relative; display:inline-block; vertical-align:middle; position:relative;} #header .category > ul > li > a {position: relative; display: block; padding: 0 18px; font-size: 15px; line-height: 70px; height: 70px; font-weight: 400; color: #000; visibility: visible; letter-spacing: -0.7px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} #header .category > ul > li > a.bold {font-weight:600;} #header .category > ul > .cate1 + .etc{position:relative; padding-left:25px;} #header .category > ul > .cate1 + .etc:before{content:""; position:absolute;left:12px;top:27px;height:15px; width:1px; background:#ddd;} #header .category > ul > li > a .point {display:inline-block; position:relative;} #header .category > ul > li > a .point:after { content: ''; display: block; position: absolute; top: 20px; right: -6px; width: 6px; height: 6px; border-radius: 6px; background: #f1191f;} #header .category > ul > li > a .point2 {display:inline-block; position:relative;} #header .category > ul > li > a .point2:after { content: ''; display: block; position: absolute; top: 20px; right: -6px; width: 6px; height: 6px; border-radius: 6px; background: #1947f1;} #header .category > ul > li.sPadding > a {padding:0 10px;} /* 말풍선 중분류 */ #header .category .sub-category{ position:absolute; top:60px; left:calc(50% - 75px); -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;opacity:0;visibility:hidden; padding-top:40px; background:transparent;z-index:99;} #header .category > ul > li:hover .sub-category{top:43px; opacity:1; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;visibility:visible;} #header .category .sub-category ul{background:#fff; min-width:150px; padding:14px 20px 10px; box-sizing:border-box; position:relative; box-shadow: 0 0 5px 2px rgba(195,195,195,0.1);} #header .category > ul > li .sub-category ul::before {bottom: 100%;left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(255, 255, 255, 0);border-bottom-color: #ffffff;border-width: 9px;margin-left: -9px;} #header .category > ul > li .sub-category ul::after { position: absolute;top: -4px;right: 53px;width: 3px;height: 4px;box-shadow: 0 0 7px 2px rgba(195,195,195,0.1); display: block;z-index: -1;content: "";} #header .category .sub-category li{display:block; padding:0; cursor:pointer; border-radius:0px; box-sizing:border-box; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;} #header .category .sub-category li:first-child{ border-left:0;} #header .category .sub-category li a{position:relative; display:inline-block; line-height:25px; padding:0 2px; font-size:13px; color:#787878; text-decoration:none; box-sizing:border-box;} #header .category .position > li:hover .sub-category{display:block;opacity:1;} #header .category > ul > li .st{display:none;} #header .category .position > li:hover .sub-category .st{display:block;} .sub-category .st{position:absolute;right:0px;top:0px;} #header .category .sub-category li:hover{background:#efefef; padding-left:4px;} #header .category .sub-category li:hover a{color:#535353;} /* 전체카테고리 아이콘 */ #header .category > ul > li > a#btn-allCate{display:block; position:absolute;left:-30px;top:-12px; width:24px;height:24px; padding:0; margin:0;text-align:center;} #header .category > ul > li > a#btn-allCate:before{background:#fff;} #header .category > ul > li > a#btn-allCate.hvr-rectangle-in{background:#f7f7f7;} #btn-allCate .iconBox{position:relative; margin:0 25px; width:12px; height:11px; overflow:hidden;} #btn-allCate .icon{position:absolute;top:0;left:0; width:12px;height:1px; background:#666; display:block;line-height:0;font-size:0; transform: rotate(0deg);} #btn-allCate .line1{top:0} #btn-allCate .line2{top:5px} #btn-allCate .line3{top:10px} /* 전체카테고리 내용 */ #allCate{ display: none;position: absolute;top: 92px;left: 30px;width: calc(100% - 60px);padding: 40px;background: rgba(255,255,255,0.96);box-sizing: border-box;box-shadow: 0px 5px 13px 5px rgba(27, 27, 27, 0.17); text-align: left; } #allCate:after{content:""; display:block; clear:both;} #allCate h1{display: block;font-size: 15px;font-weight: 200;letter-spacing: 0.4px;line-height: 17px;padding-bottom: 18px;border-bottom: 1px solid #e2e2e2;margin-bottom: 17px;color: #777777;;} #allCate .cateArea{float:left; width:50%; max-height:350px;} #allCate .cateArea .mCSB_inside > .mCSB_container{padding-right:5%} #allCate .cateArea ul{font-size:0; line-height:0; letter-spacing:0;} #allCate .st{display:none;} #allCate .all_menu_inner {display:flex;} #allCate .menu_box {display:inline-block; vertical-align:top; margin-right:32px; padding-right:32px; min-height:430px; border-right:1px solid #000; box-sizing:border-box; position:relative; width:20%;} #allCate .menu_box:nth-child(1) {width:430px} #allCate .menu_box:nth-child(2) {width:534px} #allCate .menu_box:last-child {border-right:0; margin-right:0; padding-right:0;} #allCate .menu_list li {margin-bottom:26px; display: flex; align-items:center;} #allCate .menu_list li .item { display: flex; align-items:center; font-size: 16px; font-weight:600; color:#000; letter-spacing:1px} #allCate .menu_list li .sub_item {font-size: 14px; color:#999; font-weight: normal; letter-spacing: 0px; margin-left:6px; margin-top:-1px} #allCate .menu_list li .sub_item a {display:inline-block; color:#999; font-size: 14px;} #allCate .menu_list li.flexNone {display:inline-block; } #allCate .menu_list li.flexNone .sub_item {display:inline-block; margin-left:0; margin-top:8px; } #allCate .personal_list {margin-bottom:32px; } #allCate .personal_list:last-child {margin-bottom:0} #allCate .personal_list dt, #allCate .personal_list dt a {display:block; font-size:18px; font-weight:600; margin-bottom:24px; color:#000;} #allCate .personal_list dd {display:block; font-size: 13px; font-weight: normal; letter-spacing: 0px;} #allCate .personal_list dd a {display:block; margin-bottom:16px; font-size:14px;} #allCate .personal_list dd a:last-child { margin-bottom:0; } #allCate .personal_list .customer_num {font-size:20px; font-weight:bold; } /* 단락별 마우스 오버시 타이틀 색상변화 */ #allCate .cateArea:hover h1, #allCate > div > div:hover > h1 {color:#3a3a3a;} /* 대분류 */ #allCate .position > li{display:inline-block;vertical-align:top; width:20%; margin-bottom:13px;} #allCate .position li .cName{ display: block;font-size: 14px;line-height: 22px;font-weight: 500;position: relative;z-index: 1;color: #6f6767;} #allCate .position li .cName i:first-child {display:inline-block;opacity:0;visibility:hidden;width:3px;line-height: 21px;color:#da6025} /* li.etc 는 보이지 않습니다. */ #allCate .position > li.etc{display:none !important;} /* 중분류 */ #allCate .sub-category{padding:14px 2px;} #allCate .sub-category > ul > li{position:relative;cursor:pointer; } #allCate .sub-category > ul > li > a{display:inline-block; font-size:12px; line-height:23px;} #allCate .position li .sub-category > ul > li i {display:inline-block;opacity:0;visibility:hidden;width:1px;line-height: 21px;color:#da6025} #allCate .position li:hover .sub-category > ul > li i {opacity:1;visibility:visible;width:15px;color:#ccc;} #allCate .sub-category > ul > li:hover > a{opacity:1;padding-left:2px;} #allCate .position > li:hover .cName i {opacity:1;visibility:visible;width:16px;} /* 트랜지션 */ #allCate .position li .cName, #allCate .position li:hover .cName, #allCate .position > li:hover .cName i, #allCate .position > li .cName i, #allCate .position li .sub-category > ul > li i, #allCate .banArea .leftArea > div > ul > li > a i {-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} /* 우측 */ #allCate .banArea{ float: right;width:50%;font-size: 0;line-height: 0;letter-spacing: 0;padding-left:1.8%;box-sizing: border-box;height:350px;} #allCate .banArea > div{display:inline-block; vertical-align:top;} #allCate .banArea h1{margin-bottom:20px;} #allCate .banArea .leftArea{ width:63%} #allCate .banArea .leftArea > div {width:calc(100% / 3);float:left;padding-right: 30px;box-sizing: border-box;} #allCate .banArea .leftArea > div > ul > li > a{display:inline-block; *display:inline; *zoom:1; font-size:12px; line-height:26px;-webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;transition-timing-function:ease; -webkit-transition-timing-function:ease;} #allCate .banArea .leftArea > div > ul > li > i {display:inline-block;opacity:0;width:3px;line-height: 21px;color:#da6025} #allCate .banArea .leftArea > div.community li a i, #allCate .banArea .leftArea > div.myshop li a i {display:inline-block;opacity:0;visibility:hidden;width:1px;line-height: 21px;color:#da6025,-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; font-size: 13px; } #allCate .banArea .leftArea > div.community li:hover a i, #allCate .banArea .leftArea > div.myshop li:hover a i {display:inline-block;opacity:1;visibility:visible;width:12px;line-height: 21px;color:#da6025; -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out; font-size: 13px;} /* 전체카테고리 이벤트배너 */ #allCate .banArea .rightArea{ width:37%;float: right;box-sizing: border-box;height: 350px;overflow: hidden;} #allCate .banArea .rightArea .listEvent_wrap {position:relative;display: block;;position: relative;} #allCate .banArea .rightArea .listEvent_wrap .listEvent {margin-bottom: 8px} #allCate .banArea .rightArea .listEvent_wrap .listEvent:last-child {margin-bottom:0;} #allCate .banArea .rightArea .listEvent {cursor:pointer;position:relative;} #allCate .banArea .rightArea .listEvent img {width:100%;} #allCate .banArea .rightArea .listEvent a:nth-child(2){ display: block;width: 100%;color: rgba(255, 255, 255, 0.8);font-size: 13px;font-weight: 300;text-align: center;box-sizing: border-box;padding: 18px;letter-spacing: 0;position: absolute;bottom: 0;left: 0;background: rgba(72,72,72,0.7);} #allCate .banArea .rightArea .mCSB_inside > .mCSB_container {padding-right:7%} /* 다찾다 자동완성*/ /* 다찾다 검색 파인더 */ #allfinder-layer { z-index: 9999; position: fixed; top: 0; right: -100%; width:480px; height:100%; background:#fff; overflow: hidden; transition:all 0.5s;} #allfinder-layer.open {right:0;} #allfinder-layer .finder-body { z-index:1; position: relative; width:480px; overflow-y: auto; box-sizing: border-box; padding:40px 35px 80px; } #allfinder-layer .finder-body .finder-close { position: absolute; top: 15px; right: 10px; font-size:24px; color:#000; width:24px; height:24px;} #allfinder-layer .finder-body .finder-close:before {content:"\e921";} #allfinder-ctr { z-index: 10000; position: fixed; top: 50px; right: 0; width: 103px; height:86px; } #allfinder-ctr a { display:block; width:100%; height:100%; background:url('/images/common/allfinder_ctrl_pc.png') no-repeat right top; border:none; outline:none; font-size:0; } #allfinder-layer .fa {font-family:'xeicon';} .all-finder-layer .finder-body .finder-tbl table {} .all-finder-layer .finder-body .finder-tbl tr {display:block;} .all-finder-layer .finder-body .finder-tbl th, .all-finder-layer .finder-body .finder-tbl td {display:block; font-size: 13px; color: #000;} .all-finder-layer .finder-body .finder-tbl .finder-category_wrap td {margin-bottom:0;} .all-finder-layer .finder-body .finder-tbl tr:first-child th, .all-finder-layer .finder-body .finder-tbl tr:first-child td { border-top:none; } .all-finder-layer .finder-body .finder-tbl th { margin-top:40px; margin-bottom:10px; text-align: left; vertical-align:top; } .all-finder-layer .finder-body .finder-tbl tr:first-child th {margin-top:0;} .all-finder-layer .finder-body .finder-tbl th .txt-l { position:relative; font-size:24px; font-weight:500; color:#000;} .all-finder-layer .finder-body .finder-tbl th .txt-l .fa { position:absolute; top:50%; right:15px; margin-top:-6px; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-tooltip-btn { display:inline-block; width:20px; height:20px; line-height:22px; border:1px solid #cecece; border-radius:20px; color:#666; font-size:11px; background:#fff; text-align:center; outline:none; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer { display:none; position:absolute; top:33px; left:52px; width:270px; padding:0 20px 18px; border:1px solid #000; background:#fff; text-align:left; font-weight:normal; color:#000; z-index:1} .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-btn-close { display:inline-block; position:absolute; top:14px; right:20px; margin:0; font-size:21px; color:#000; outline:none; *width:19px; *height:22px; *background:url('/images/common/btn_h11_close.gif') no-repeat center center; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-tit { padding:18px 0; border-bottom:1px solid #e5e5e5; font-size:15px; font-weight:bold; line-height:15px; } .all-finder-layer .finder-body .finder-tbl th .txt-l .finder-comm-layer .finder-layer-cnt { padding-top:16px; line-height:1.5; font-size:13px; } .all-finder-layer .finder-body .txt-input { height: 21px; line-height: 21px; padding: 0 5px; font-size: 13px;} .all-finder-layer .finder-body .finder-category {} .all-finder-layer .finder-body .finder-category.open { height:100%; overflow:visible; } .all-finder-layer .finder-body tr.finder-child-category {display:none; margin-top:-40px;} .all-finder-layer .finder-body tr.finder-child-category th {margin-bottom:0; margin-top:10px;} .all-finder-layer .finder-body tr.finder-child-category th, .all-finder-layer .finder-body tr.finder-child-category td { border-top:none; } .all-finder-layer .finder-body tr.finder-child-category td { background:#f0f0f0; padding:10px;} .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 { display:inline-block; margin:3px 5px 3px 0; padding: 5px 10px; cursor:pointer; line-height:22px; vertical-align:top; word-break:break-all; background:#d4d4d4; color:#000; font-size:13px;} .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2 .fa-check { display:none; } .all-finder-layer .finder-body tr.finder-child-category td .finder-category2 .finder-cate2.on { font-weight:bold; color:#fff; background:#000; border:1px solid #000; } .all-finder-layer .finder-body .finder-price .finder-price-input { display: inline-block; padding-top:5px} .all-finder-layer .finder-body .finder-price .finder-price-input label { position:relative; display: inline-block; width: 110px; padding: 0 10px; border: 1px solid #ccc; border-radius:3px; color: #666; } .all-finder-layer .finder-body .finder-price .finder-price-input label .txt-input { display: inline-block; width: 90px; height: 29px; line-height: 29px; padding: 0; border: none; background: none; color: #333; text-align: right; } .all-finder-layer .finder-body .finder-search { position:relative; } .all-finder-layer .finder-body .finder-search label {position:relative; display: inline-block; width: 100%; border: 2px solid #000; box-sizing: border-box; height: 40px;} .all-finder-layer .finder-body .finder-search label:after {content: url('//cdn4-aka.makeshop.co.kr/design/odeshop/ode_m/ico_search.png'); position:absolute; top:6px; right:12px; z-index:10; display:none; } .all-finder-layer .finder-body .finder-search label .txt-input { display: block; width:100%; height:36px; line-height: 36px; padding: 0 40px 0 10px; border: none; background: none; color: #333; text-align: left; box-sizing: border-box;} .all-finder-layer .finder-body .finder-btn-c { padding: 30px 0; text-align: center; font-size:0;} .all-finder-layer .finder-body .finder-btn-c button { display: inline-block; height: 50px; line-height: 50px; width: calc(50% - 5px); border:none; background: #000; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: -0.5px; cursor:pointer; } .all-finder-layer .finder-body .finder-btn-c button span.ico-search { visibility:visible; display:inline-block; width:16px; height:15px; margin-right:10px; margin-top:-4px; *margin-top:0; vertical-align:middle; background:url('/images/common/btn_h15_search.png') no-repeat 0 0; } .all-finder-layer .finder-body .finder-btn-c button span.finder-count { visibility:visible; display:inline-block; height:50px; color:#ffd800; font-size:23px; vertical-align:top; margin-right:2px; } .all-finder-layer .finder-body .finder-btn-c button span.finder-count-toggle { visibility:visible; display:none; } .all-finder-layer .finder-body .finder-btn-c a.reset { display: inline-block; width: calc(50% - 5px); height: 50px; line-height: 50px; border:none; background: #999; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 1px; margin-right:10px; } .all-finder-layer .finder-body .finder-category .finder-options { display:inline-block; margin:3px 6px 3px 0; padding: 5px 10px; cursor:pointer; line-height:24px; background:#fff; border-radius: 24px; font-size:15px; color:#5c5c5c; border: 1px solid #ccc; vertical-align:top; word-break:break-all; } .all-finder-layer .finder-body .finder-category .finder-options.on { font-weight: bold; color:#000; background:#fff; border: 1px solid #000;} .all-finder-layer .finder-body .finder-options { display:inline-block; margin:3px 5px 3px 0; padding: 5px 10px; cursor:pointer; line-height:24px; border-radius: 24px; font-size:15px; background:#f3f3f3; color:#474747; border: 1px solid #f3f3f3; vertical-align:top; word-break:break-all; } .all-finder-layer .finder-body .finder-options.on { font-weight: bold; color:#fff; border: 1px solid #000; background:#000;} .all-finder-layer .finder-body .finder-color label {display:inline-block;} .all-finder-layer .finder-body .finder-option-color em { display: inline-block; width: 22px; height: 22px; border-radius:20px; font-size:0; vertical-align:top; } .all-finder-layer .finder-body .finder-option-color.color-picker { width:22px; height:22px; padding: 0; border:0; background: none;} .all-finder-layer .finder-body .finder-option-color.color-picker .fa-check { display:none; width:22px; margin-top:-22px; color:#fff; text-align:center; } .all-finder-layer .finder-body .finder-option-color.color-picker .fa-check:before {content:"\e929";font-size:20px;} .all-finder-layer .finder-body .finder-option-color.color-picker.on .fa-check {display:block;} .all-finder-layer .finder-body .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-black em { background-color: #000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-gray em { background-color: #808080; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-brown em { background-color: #aa6810; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-navy em { background-color: #425583; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-blue em { background-color: #0000ff; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-light-blue em { background-color: #62acff; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-red em { background-color: #ff0000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-orange em { background-color: #ffa500; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-yellow em { background-color: #ffff00; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-purple em { background-color: #800080; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-green em { background-color: #008000; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-light-green em { background-color: #72dd95; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; } .all-finder-layer .finder-body .finder-option-color.finder-option-color-apricot em { background-color: #fbceb1; } .all-finder-layer .finder-body .search-auto-complete-list { display:none; z-index:1; position:absolute; top:30px; left:5px; border:1px solid #ddd; line-height:14px; background:#fff; } .all-finder-layer .finder-body .search-auto-complete-list ul { width:340px; padding:4px 0 6px; border-bottom:1px solid #ddd; } .all-finder-layer .finder-body .search-auto-complete-list ul li { text-align:left; } .all-finder-layer .finder-body .search-auto-complete-list ul li.on { background:#f3f3f3; } .all-finder-layer .finder-body .search-auto-complete-list ul li a{ display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; } .all-finder-layer .finder-body .search-auto-complete-list ul li a strong { color:#ab3e41; } .all-finder-layer .finder-body .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .all-finder-layer .finder-body .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; } .all-finder-layer .finder-body .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; } .all-finder-layer .finder-body .finder-search-data .finder-options { border: 1px solid #e5e5e5; box-shadow:none; } .all-finder-layer .finder-body .finder-search-data .finder-options .fa-close { margin-left:10px; color: #999; } .animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-40px) } 100% { -webkit-transform: translateY(0) } } @keyframes slideDown { 0% { transform: translateY(-40px) } 100% { transform: translateY(0) } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(0) } 100% { -webkit-transform: translateY(-40px) } } @keyframes slideUp { 0% { transform: translateY(0) } 100% { transform: translateY(-40px) } } .cateSlide {height:70px; overflow:hidden; width:85px} .cateSlide a {position: relative; display: block; padding: 0 18px; font-size: 15px; line-height:70px; height:70px; font-weight:600; color: #000; visibility: visible; letter-spacing: -0.7px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; text-align: center; letter-spacing:1px;} .cateSlide a .point {display:inline-block; position:relative;} .cateSlide a .point:after { content: ''; display: block; position: absolute; top: 20px; right: -6px; width: 6px; height: 6px; border-radius: 6px; background: #f1191f;} /* BASIC css end */