/*====================================================================*/ /******************************** layout ******************************/ /*====================================================================*/ #wrap{width:100%; background:#fff; min-width:580px; position:relative;} #container{ margin:0 auto; padding:200px 112px 0; padding-top: 137px !important;} #container:after{content:""; display:block; clear:both;} #contents{width:100%; min-width:800px; padding:0 0; box-sizing:border-box; margin:0 auto;} #contents:after{content:""; display:block; clear:both;} /* 좁은 컨텐츠 (950) - 게시판, 마이페이지, 이용약관, 개인정보처리방침 좁은 컨텐츠2 (1100) - 관심상품, 장바구니, 주문서작성, 주문완료 */ #contents.narrow{/* max-width:1120px; */min-width:inherit; padding:0;} #contents.narrow2{max-width:1100px; min-width:inherit; padding:0;} #contents.narrow .titleArea, #contents.narrow2 .titleArea{margin-bottom:60px;} /* 드래그 */ ::selection{color:#6d6d6d; background:#eaecf1;} /* 공통 타이틀 */ .titleArea{margin:0 auto 50px;text-align: center;} .titleArea h2 { font-size: 18px;font-weight: 600;letter-spacing: 5px;color: #4a413b;} .titleArea p{margin-top:10px; font-size:13px; line-height:22px; letter-spacing:-0.3px; color:#a7a7a7; font-weight:300;} .titleArea p a{font-weight:400;} /*버튼*/ .btn_none{border:2px solid #bdbdbd; background:#bdbdbd; color:#fff; line-height:1; font-weight:400; font-size:13px; letter-spacing:-0.3px; text-align:center; -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;} .btn_white{border:2px solid #f1f1f1; background:#f1f1f1; color:#909090; line-height:1; font-weight:400; font-size:13px; letter-spacing:-0.3px; text-align:center; -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;} .btn_point{border:2px solid #d2baa5; background:#d2baa5; color:#fdfdfd; line-height:1; font-weight:400; font-size:13px; letter-spacing:-0.3px; text-align:center; -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;} .btn_01{display:block; padding:20px 0px; font-size:15px; box-sizing:border-box;} /* 가로 100 우측장바구니버튼*/ .btn_02{display:inline-block; padding:16px 50px; font-size:13px; box-sizing:border-box;} /* 서브 큰버튼 */ .btn_03{display:inline-block; vertical-align:top; width:100%; height:50px; line-height:46px; font-size:15px; letter-spacing:0px; font-weight:400; box-sizing:border-box;} /* 로그인버튼 */ .btn_04{display:inline-block; vertical-align:top; padding:0 10px; line-height:28px; font-size:12px; letter-spacing:-0.2px; box-sizing:border-box;} /* 우편번호버튼 (input 옆) */ .btn_05{display:inline-block; vertical-align:middle; padding:8px 12px; font-size:12px; letter-spacing:-0.2px; box-sizing:border-box;} /* 글쓰기 버튼/서브 작은버튼 */ .btn_07{display:inline-block; vertical-align:middle; width:90px; line-height:26px; font-size:12px; box-sizing:border-box; margin-bottom:2px;} /* 관심상품 선택영역 */ .btn_08{display:inline-block; vertical-align:middle; width:80px; line-height:46px; font-size:12px; box-sizing:border-box;} /* 댓글 확인 */ /*호버*/ .btn_white:hover{background:#eee; border-color:#eee;} .btn_none:hover{background:#ccc; border-color:#ccc;} .btn_point:hover{background:#c7a384;border:2px solid #c7a384;} /*====================================================================*/ /******************************* header *******************************/ /*====================================================================*/ header{position:fixed;top:0;left:0;width:100%;min-width:1200px;z-index:99;height: 137px;background:#fff;} /* logo */ #leftArea{position:absolute;top:40px;left:112px;font-size:0;line-height:0;letter-spacing:0;} #leftArea * {display: inline-block;vertical-align: middle;line-height: 50px;} #leftArea h1 { position: relative;} #leftArea h1 a { display: block;letter-spacing: 2px;font-weight:600;font-size: 27px;margin-left: 0px;line-height: 25px;color: #403730;font-family: 'Baloo Paaji 2','noto sans kr', cursive;} #leftArea h1 img { height:45px;} /* 상단 대분류 */ #one_cate{display:inline-block; vertical-align:middle; opacity:1; visibility:visible; -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_cate.hide{opacity:0; visibility:hidden;} #one_cate > .position > ul{font-size:0; line-height:0; letter-spacing:0;} #one_cate > .position > ul > li{display:inline-block; vertical-align:middle; position:relative;} #one_cate > .position > ul > li > a{ display: block;font-size: 13px;padding: 0 10px;font-weight: 500;letter-spacing: 1px;color: #656565;} #one_cate > .position > ul > li.point > a:after { content: "";position: absolute;right: 5px;top: 10px;width: 5px;height: 5px;background: #e0b2a3;box-sizing: border-box;border-radius: 100%;} #one_cate > .position > ul > li:first-child > a {padding-left:45px;} /* 상단 대분류 마우스오버시 중분류 */ #one_cate > .position > ul > li > .sub-category{display:block; position:absolute; top:30px; padding-top:13px; opacity:0; visibility:hidden; left:calc(50% - 65px);-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; z-index:99;} #one_cate > .position > ul > li > .sub-category ul{ padding: 15px 0;background: #fff;text-align: center;width: 130px;box-sizing: border-box;} #one_cate > .position > ul > li > .sub-category ul li{display:block;} #one_cate > .position > ul > li > .sub-category ul li a{ display: block;font-size: 12px;line-height:18px;font-weight:300;letter-spacing:1.2px;color: #666;padding: 3px 0;-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_cate > .position > ul > li > .sub-category ul li:hover a{color:#000;} #one_cate > .position > ul > li:hover > .sub-category{opacity:1; visibility:visible;} #one_cate > .position > ul > li > .sub-category ul li a img { width: 14px; margin-left: 5px; margin-top: -4px; } /* 아이콘들 */ #rightIcon{position:absolute;top:40px;right:112px;} #rightIcon > ul{font-size:0; line-height:0; letter-spacing:0;} #rightIcon > ul > li{display: inline-block;vertical-align: middle;font-size: 10px;padding: 0 6px} #rightIcon > ul > li:not(:last-child) {;margin-right: 12px;} #rightIcon > ul > li.search {padding-right: 0;} #rightIcon > ul > li > a{ display: inline-block;vertical-align: middle;height: 50px;line-height: 50px;background-position: center;background-repeat: no-repeat;position: relative;letter-spacing: 1px;font-size: 12px;FONT-WEIGHT:400;} #rightIcon > ul > li > a + div { margin-left:4px;display: inline-block;background: #676563;color: #fff;text-align: center;width: 16px;height: 16px;line-height: 16px;border-radius: 100%;font-weight: 600;font-family: 'Baloo Paaji 2', cursive;} #rightIcon > ul > li > a.search{background-image:url('/_images/btnSearch.png');width:23px; opacity:.55} #rightIcon > ul > li > a.myshop{ background-image: url('/_images/btnMyshop.png');background-size: 60%;width: 23px;opacity: .7;} #rightIcon > ul > li > a.wish{background-image:url('/_images/btnWish.png');width:23px; opacity:.55} #rightIcon > ul > li > a.basket{background-image:url('/_images/btnCart.png');width:23px; opacity:.55} #rightIcon > ul > .kor {margin-right:0 !important;} #rightIcon > ul > .kor a { display: inline-block;vertical-align: middle;height: 50px;line-height: 50px;position: relative;letter-spacing: 1px;font-size: 12px;FONT-WEIGHT:600;} #rightIcon > ul > li span { display: none; position: absolute; top: 40px;} #rightIcon > ul > li span a { line-height: 20px !important; height: 20px !important;} #rightIcon > ul > li:hover span {display:block;} #jointip{background:#303030;border:0 solid #303030;border-radius:10px;color:#fff;font-size:10px;font-weight:400;left:0;margin:-10px 0 0 -5px;padding:3px 5px;position:absolute;text-align:center;width:55px;z-index:110;line-height:15px;} #jointip:after{border-color:transparent transparent #303030;border-style:solid;border-width:5px;color:#fff;content:"";left:28px;position:absolute;top:-10px;} /**************************** 스크롤시 ****************************/ header, #leftArea, #rightIcon, #allCate, #allCate .topText{ -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } body.scroll header{ /* -webkit-box-shadow:3px 3px 10px 0 rgba(0,0,0,0.05); -moz-box-shadow:3px 3px 10px 0 rgba(0,0,0,0.05); -ms-box-shadow:3px 3px 10px 0 rgba(0,0,0,0.05); box-shadow:3px 3px 10px 0 rgba(0,0,0,0.05); */ height:72px; } body.scroll #leftArea{top:10px;} body.scroll #rightIcon{top:10px;} body.scroll #allCate{top:40px;} body.scroll #allCate.open{top:72px;} body.scroll #allCate .topText{line-height:72px; font-size:13px; } /*====================================================================*/ /****************************** 레이어들 ******************************/ /*====================================================================*/ /**************************** 검색 ****************************/ #one_sear{position:fixed; top:0; left:0; background:rgba(21,21,24,0.55); width:100%; height:100%; z-index:999999; opacity:0; visibility:hidden; -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;} #one_sear .searBox{width:50%; position:absolute; left:50%; top:56%; transform:translate(-50%, -140px); font-size:0; line-height:0; letter-spacing:0; -webkit-transition: top 0.3s ease-in-out; -moz-transition: top 0.3s ease-in-out; -o-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out;} #one_sear.open{opacity:1; visibility:visible;} #one_sear.open .searBox{top:52%;} /* 검색창 */ #one_sear .searBox fieldset{} #one_sear .searBox fieldset input, #one_sear .searBox fieldset .btn{display:inline-block; vertical-align:bottom; font-size:25px; line-height:25px; letter-spacing:-0.3px; font-weight:400;} #one_sear .searBox fieldset input{width:89%; margin-right:1%; height:70px; border:0; border-bottom:1px solid rgba(255,255,255,0.7); padding:3px; box-sizing:border-box; color:#fdfdfd;} #one_sear .searBox fieldset .btn{width:10%; color:rgba(255,255,255,0.7); padding:3px; box-sizing:border-box; font-size:36px; letter-spacing:1px; font-weight:400; text-align:center; cursor:pointer; -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_sear .searBox ul{} #one_sear .searBox ul li{ display: inline-block;vertical-align: middle;font-size: 15px;line-height: 20px;letter-spacing: -0.1px;margin: 0 8px 16px 0;font-weight: 200;color: #fdfdfd;background: #947961;padding: 12px 20px;border-radius: 8px;} #one_sear .searBox ul li a{display:block; color:#fdfdfd;} /**************************** 우측 장바구니 ****************************/ #one_basket{ position: fixed; top: 0; right: -20px; background: #464646; width:400px; height: 100%; z-index:999999; opacity: 0; visibility: hidden; -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; -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); -moz-box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); -ms-box-shadow: 0 0 20px 0 rgba(0,0,0,0.05); box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);} #one_basket.open{right:0; opacity:1; visibility:visible;} /* 상단 */ #one_basket h4{ font-weight: 200; padding: 44px; font-size: 13px; letter-spacing: 0.1px; color: #fafafa; background:#a9886c; height: 110px; box-sizing: border-box;} #one_basket h4 strong{font-weight:400;color:#fff; margin-right:3px;} #one_basket i.close{position:absolute; top:18px; right:10px; font-size:24px; padding:26px; cursor:pointer; color:#fdfdfd;} /* 비었을 때 */ #one_basket .xans-order-empty p{padding:50px 0; text-align:center; color:#e5e5e5; font-size:13px; font-weight:200; border:0;} #one_basket .xans-order-empty p i{display:block; font-size:24px; margin-bottom:20px;} /* 목록 */ #one_basket .xans-order-basketpackage{max-height:calc(100% - 169px);} #one_basket .mCSB_inside > .mCSB_container{margin-right:0;} #one_basket .mCSB_scrollTools{width:25px;} #one_basket .xans-order-basketpackage .mCSB_scrollTools .mCSB_draggerContainer, #one_basket .xans-order-basketpackage .mCSB_scrollTools .mCSB_dragger{padding:8px 0;} #one_basket .cartDiv{} #one_basket .cartDiv .item{} #one_basket .cartDiv .item > li{padding:35px; border-top:1px solid rgba(0,0,0,0.1); background:rgba(0,0,0,0.2);} #one_basket .cartDiv .item > li:first-child{border:0;} #one_basket .cartDiv .item > li a{display:block; font-size:0; line-height:0; letter-spacing:0;} #one_basket .cartDiv .item > li a img, #one_basket .cartDiv .item > li a .info{display:inline-block; vertical-align:middle;} #one_basket .cartDiv .item > li a img{max-width:20%; border-radius:10px;} #one_basket .cartDiv .item > li a .info{max-width:65%; font-size:14px; line-height:22px; padding-left:25px; box-sizing:border-box; color:#fdfdfd;} #one_basket .cartDiv .item > li a .info > span{font-weight:400;} #one_basket .cartDiv .item > li a .info > ul{font-size:12px; color:#b7b7b7;} #one_basket .cartDiv .item > li a .info .price{margin-top:12px;} #one_basket .cartDiv .item > li a .info .price strong{font-weight:400; font-size:15px; margin-left:2px;} /* 버튼 */ #one_basket .btn_basket{position:absolute; bottom:0; right:0; width:100%;} #one_basket .btn_basket a{background:rgba(0,0,0,0.3) !important; border-color:transparent !important; color:#fdfdfd !important; font-weight:400; padding:27px 0; letter-spacing:0.3px;} #one_basket .btn_basket a:hover{background:rgba(0,0,0,0.4) !important;} #one_sns {position: fixed;right:30px;top: 0;width: 20px;height: 100%;z-index: 99999; } #one_sns > * {display: table;width:100%;height:100%;} #one_sns > * > * {display:table-cell;vertical-align: middle;} #one_sns .share {height: 50px;position: relative;} #one_sns .share a {display: block;transform: rotate(-90deg);position: absolute;left: -14px;bottom: 20px;letter-spacing: 0;font-weight: 400;font-size: 14px;color: #bfbfbf;} #one_sns i {display: block;font-size: 13px;line-height: 30px;color:#666;} /*====================================================================*/ /******************************* footer *******************************/ /*====================================================================*/ footer{margin-top:150px; padding:0; min-width:1200px; box-sizing:border-box; color:#7b7b7b; font-size:13px; line-height:26px; letter-spacing:0.2px; font-weight:300; text-align:center} footer h2{font-size:16px; font-weight:400; margin-bottom:11px; color:#656569} footer h2 span{padding-left:5px;} footer span.num{font-size:13px; margin-left:3px;font-weight: 400;} footer a{color:#7b7b7b; display:block; font-weight:300;} /* 인스타영역 */ .one_insta { padding:0 0 100px 0 ; text-align: center;width: 1048px;box-sizing: border-box;margin: 0 auto;} .one_insta > h2 { display: inline-block;line-height: 1;padding: 10px 19px;border-radius: 100px;font-size: 11px;margin-bottom: 37px;letter-spacing: 1px;color: #737373;border: 1px solid #e8e8e8;} .one_insta > ul {font-size: 0;line-height: 0;letter-spacing: 0;} .one_insta > ul > * {display: inline-block;vertical-align: top;font-size: 11px;line-height: 1.3;} .one_insta .chatis_is_insta_wrap {height:auto !important;} .one_insta .chatis_is_insta_shopping_title {display: none;} .one_insta .chatis_is_thumbnail_area_2 {padding:1px !important} .one_sns {display: block;margin-top:12px;} .one_sns > ul {display: table;width:100%;} .one_sns li {display: inline-block;padding-right: 5px;} .one_sns .left {display:table-cell;text-align: left;} .one_sns i {display: block;font-size: 14px;color:#aaa} .one_sns .right {display:table-cell;text-align: right;} .one_sns .right li {padding-left: 5px;} .one_sns .right a {font-size: 10px;} /* 3분할 */ footer > ul{font-size:0; line-height:0; letter-spacing:0;background:#f5f5f5} footer > ul > li{display:inline-block; vertical-align:middle; margin:70px 0; padding:20px 0; width:23%; font-size:13px; line-height:24px; letter-spacing:0.2px; position:relative;} footer > ul > li:nth-child(2):after, footer > ul > li:nth-child(3):after{content:""; position:absolute; top:0; left:0; width:1px; height:100%; background:#eee;} /* 하단정보 */ #f_info{ display: block;width: 100%;padding: 30px 0;font-size: 12px;line-height: 23px;background: #eaeaea;box-sizing: border-box; text-transform: uppercase;} #f_info span{margin:0 3px;} #f_info a{display:inline-block;} #f_info .copy{display:block; color:#cacaca; margin-top:20px;} .utilMenu li { display: inline-block; text-transform: uppercase; font-size: 13px; margin: 20px;} /* 고정버튼 */ #fix_bottom{display:none; position:fixed; right:20px; bottom:40px; z-index:1001; text-align:center;} #fix_bottom a{display:block; padding:5px; opacity:0.7; -webkit-transition:0.1s ease-in-out; -moz-transition:0.1s ease-in-out; -o-transition:0.1s ease-in-out; transition:0.1s ease-in-out; font-size:25px;} #fix_bottom a:hover{opacity:1;} #fix_bottom a:first-child{opacity:0.9;} /* 마스크 */ #one_mask, #one_mask2{position:fixed; top:0; left:0; width:100%; height:100%; background:#444448; z-index:98; opacity:0; visibility:hidden; -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_mask2{z-index:99;} #one_mask.show, #one_mask2.show{opacity:0.4; visibility:visible;} /* 팝업 */ #modalBackpanel{display:none; position:absolute; top:0; left:0; z-index:1000; width:100%; height:100%; background:#64646d;} #modalContainer{display:none; position:absolute; top:100px; left:100px; z-index:1001; width:750px; height:680px; border:0; background:#fff; box-shadow:-1px -1px 10px rgba(70,70,70,0.05);} #modalContainer #modalContent{width:100%; height:100%;} #popup{background:#fff;} #popup .ec-base-layer{} #popup .ec-base-layer .header{} #popup .ec-base-layer .close{} #modalBackpanel, #modalContainer{opacity:0; visibility:0; -webkit-transition:opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; -moz-transition:opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; -o-transition:opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; transition:opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;} #modalBackpanel.active{opacity:0.4; visibility:visible;} #modalContainer.active{opacity:1; visibility:visible;} #capp-shop-new-product-optionselect-layer, #capp-shop-new-product-optionselect-iframe{border:0 !important;}