/************************************************** * 버전관리 * version : v=1 * Last Update : **************************************************/ /*************************************************** ■ LIST 페이지 ****************************************************/ .mall_container{margin-top:2rem;} /* 페이지타이틀, 페이지경로 */ .page_loca{font-size:0.75rem; text-align:right; margin:0 0 0.75rem; padding-top:1.5rem;} .page_loca b{color:var(--black);} .cate_pt{text-align:center; margin-bottom:2.5rem;} .cate_pt h3{font-size:1.9rem; color:var(--black); line-height:1; } .cate_pt h3 b{color:var(--main);} /* 카테고리 영역 */ .sub_cate_depth1{display:flex; justify-content: center; align-items: flex-start;} .sub_cate_depth1 .cate_list_box{max-width:50rem; display:flex; justify-content: center; gap:0.5rem 1rem; flex-wrap:wrap; height:2.5rem; overflow:hidden; } .sub_cate_depth1 .cate_list_box.open{height:auto; } .sub_cate_depth1 .cate_list_box li a{position:relative; display:block; height:2.5rem; line-height:2.5rem; padding:0 1rem; background:#FAFAFA; border:1px solid #EFEFEF; border-radius:1.25rem; } .sub_cate_depth1 .cate_list_box li a:before{content:""; position:absolute; left:50%; top:0.1rem; width:0; height:0.15rem; background:#fff; border-radius:0 0 0.2rem 0.2rem; transform:translateX(-50%); transition: all 0.2s ease-out 0s; } .sub_cate_depth1 .cate_list_box li:first-child a{background:#222222; color:#fff; font-weight:500;} .sub_cate_depth1 .cate_list_box li:not(:first-child).on a{background:var(--main); color:#fff; font-weight:500;} .sub_cate_depth1 .cate_list_box li:not(:first-child).on a:before{width:50%;} .sub_cate_depth1 .cate_list_box li:not(:first-child):hover a{background:#fff; color:var(--main); border-color:var(--main);} .sub_cate_depth1 .cate_moreBtn{flex-shrink: 0; margin-left:1rem; display:block; width:2.2rem; height:2.2rem; line-height:2.3rem; border:1px solid #B2B3B9; border-radius:50%; color:var(--main); font-size:1.1rem; font-weight:600; } .sub_cate_depth1 .cate_moreBtn i{ vertical-align: inherit !important; } .detail_list{margin-top:1rem; border-radius:1rem; padding:1rem 2rem; border:1px solid #DBDCE0; background:#F4F5FA url('/images/default/main/cate_bg.jpg')no-repeat 50% top; background-size:100% auto;} .detail_list > p{position:relative; text-align:center; font-size:1.1rem; font-weight:500; color:var(--black);} .detail_list > p .depth_moreBtn{position:absolute; right:0px; top:0px; display:block; width:2rem; height:1.7rem; line-height:1.9rem; border-radius:0.80rem; background:var(--main); color:#fff; font-size:0.9rem; font-weight:600;} .detail_list > p .depth_moreBtn i{transition: all 0.2s ease-out 0s;} .detail_list .depth3{display:none; margin-top:1rem; border:1px solid #DBDCE0; background:#fff; border-radius:1rem; padding:1rem 2rem;} .detail_list .depth3 ul{display:flex; gap:0.5rem 1rem; flex-wrap:wrap;} .detail_list .depth3 ul li .active{color:var(--main); font-weight:600;} .detail_list.open .depth3{display:block;} .detail_list.open > p .depth_moreBtn i{transform: rotate(180deg );} @media (max-width:767px){ .sub_cate_depth1 .cate_list_box{gap:0.5rem;} .sub_cate_depth1 .cate_list_box li a{height:2rem; line-height:2rem; font-size:0.9rem; padding: 0 0.5rem;} .detail_list{padding:1rem;} .detail_list .depth3{padding:0.75rem;} .detail_list .depth3 ul{gap:0.4rem 0.7rem;} } /* 정렬 */ .order_wrap{position:relative; height:3.5rem; display: flex; align-items: center; justify-content: space-between; z-index:0;} .order_wrap:before{content:""; position:absolute; left:50%; top:0; width:100vw; height:100%; background:#F6F6F6; z-index:-1; transform:translateX(-50%);} .order_wrap .order_txt b{color:var(--main); font-size:1rem;} .order_wrap .order form{display: flex; align-items: center;} .order_wrap .order .sel_type ul{display:flex;} .order_wrap .order .sel_type ul li{position:relative; padding:0 0.4rem; line-height:3.5rem; cursor:pointer;} .order_wrap .order .sel_type ul li.on{font-weight:600; color:var(--black); } .order_wrap .order .sel_type ul li.on:before{content:""; position:absolute; left:50%; top:0.2rem; width:80%; height:0.3rem; background:var(--main); border-radius:0 0 1rem 1rem; transform:translateX(-50%); } .order_wrap .order .type_sort{position:relative; margin-left:1.5rem; padding-left:1.5rem; display: flex; align-items: center; gap:0.3rem;} .order_wrap .order .type_sort:before{content:""; position:absolute; left:0; top:50%;width:1px; height:0.8rem; background:#A6A6A6;transform:translateY(-50%); } .order_wrap .order .type_sort button {font-size:1.2rem; width:1.2rem; height:1.2rem; line-height:1.2rem; color:#a6a6a6;} .order_wrap .order .type_sort button.on{color:var(--black);} .order_wrap .order .type_sort button.list{padding:0; border:none; padding:0; margin:0; display:block; } .order_wrap .order .type_sort button.list i{transform: rotate(90deg );} @media (max-width:767px){ .order_wrap .order .type_sort{margin-left: 0.5rem; padding-left: 0.5rem;} .order_wrap .order .sel_type ul{display:none;} .order_wrap .order .sel_type select{background-color:transparent; border:none; padding:0 1.2rem 0 0; background-position:right 50%;} } /*상품리스트 갤러리형*/ .view_thumb .prdList{display:flex; gap:3rem 1.5rem; flex-wrap:wrap; margin-top:3rem;} .view_thumb .prdList li{width:calc((100% - 1.5rem * 5) / 6);} /*상품리스트*/ .item{display:block;} .item .prdInner{position:relative; border:1px solid #ddd; border-top-left-radius:0.5rem; border-top-right-radius:0.5rem; background:#fff; overflow: hidden; cursor:pointer;} .item .prdInner:before{content:""; position:absolute; left:0px; top:0px; width:calc(100% - 0.4rem); height:calc(100% - 0.4rem); border:0.2rem solid var(--main); opacity:0; transition: all 0.2s ease-out 0s; border-top-left-radius: 0.45rem; border-top-right-radius: 0.45rem; z-index: 1;} .item .prd_thumb{position:relative; text-align:center; overflow: hidden; background:#fff;} .item .prd_thumb .mark img{width:50px; height:50px;} .item .prd_thumb .mark00{z-index:10; position:absolute; top:5px; left:5px;} .item .prd_thumb .mark01{z-index:10; position:absolute; top:5px; left:5px;} .item .prd_thumb .mark02{z-index:10; position:absolute; top:5px; right:5px;} .item .prd_thumb .mark03{z-index:10; position:absolute; bottom:35px; left:5px;} .item .prd_thumb .mark04{z-index:10; position:absolute; bottom:45px; left:5px;} .item .prd_thumb img{width: 100%; max-width:100%; aspect-ratio: 1 / 1;} .item .prd_thumb .soldout{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/soldout.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .item .prd_thumb .proStop{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/proStop.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .item .prd_thumb .proStop2{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/proStop2.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .item .prd_info{background:#f5f5f5; padding:0.5rem 1rem;} .item .prd_info .icon{height:1.2rem; display:flex; gap:0.15rem 0.2rem; } .item .prd_info .icon img{height:0.75rem;} .item .prd_info .ord_name{font-size:0.7rem; font-weight:300; color:#888; } .item .prd_info .prd_name{font-size:0.8rem; font-weight:600; color:var(--black); height:1.3em; line-height:1.3em; display: block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word;} .item .prd_info .prd_name.row2{-webkit-line-clamp: 2; height:2.6em;} .item .prdMade{height:1.5rem; line-height:1.5rem; padding:0px 1rem; font-size:0.7rem;} .item .sub_title{position:relative; margin-top:0.5rem; color:#333; height:1.5rem; line-height:1.5rem; padding:0 0.5rem 0 2.3rem; border:none; border-radius:0.2rem; background:#F5F5F5; font-size:0.6rem; display: block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;} .item .sub_title:before{content:"MD"; position:absolute; left:0.5rem; top:50%; display:inline-block; line-height:0.9rem; padding:0 0.25rem; font-size:0.5rem; font-weight:600; color:#fff; background:var(--sub); border-radius:0.2rem; transform:translateY(-50%);} .item .prdInner .btns{ display:flex; gap:0.4rem; position: absolute; top:1rem; right:1rem; z-index:10; transition: all 0.4s ease-out 0s; opacity:0;} .item .prdInner .btns button { width: 1.5rem; height: 1.5rem; border-radius:0.2rem; outline:none; border:none; font-size: 0; cursor:pointer; background-repeat:no-repeat; background-position:50% 50%; background-size:1rem 1rem; box-shadow:0 0 5px rgba(0,0,0,0.2); background-color:#F5F5F5;} .item .prdInner .btns .btn_basket {background-color:var(--main); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3.65438 8.60761C3.52464 8.60761 3.39057 8.56868 3.27813 8.48651C2.98837 8.27892 2.91917 7.87239 3.13108 7.58263L7.66346 1.26844C7.87105 0.978676 8.27758 0.913804 8.56734 1.12139C8.85711 1.32898 8.9263 1.73551 8.71439 2.02527L4.17768 8.33514C4.05226 8.51246 3.85332 8.60328 3.65006 8.60328L3.65438 8.60761Z' fill='%23fff'/%3E%3Cpath d='M15.9802 8.60761C15.777 8.60761 15.578 8.51246 15.4526 8.33947L10.9202 2.02527C10.7126 1.73551 10.7775 1.32898 11.0673 1.12139C11.357 0.913804 11.7636 0.978676 11.9711 1.26844L16.5079 7.5783C16.7154 7.86807 16.6506 8.2746 16.3608 8.48219C16.2484 8.56436 16.1143 8.60328 15.9846 8.60328L15.9802 8.60761Z' fill='%23fff'/%3E%3Cpath d='M12.9702 19H6.66461C5.44934 19 4.23408 18.0875 3.89242 16.9198L1.41431 8.37835C1.31484 8.03237 1.51378 7.67341 1.85544 7.57394C2.20142 7.47015 2.56038 7.67341 2.65985 8.01507L5.14228 16.5565C5.3196 17.1663 6.03319 17.7026 6.66461 17.7026H12.9702C13.6059 17.7026 14.3152 17.1663 14.4925 16.5565L16.9749 8.01507C17.0744 7.67341 17.4333 7.47447 17.7793 7.57394C18.121 7.67341 18.3199 8.03237 18.2204 8.37835L15.738 16.9198C15.3964 18.0875 14.1811 19 12.9702 19Z' fill='%23fff'/%3E%3Cpath d='M18.9858 8.6075H0.648719C0.289761 8.6075 0 8.31773 0 7.95878C0 7.59982 0.289761 7.31006 0.648719 7.31006H18.9858C19.3448 7.31006 19.6345 7.59982 19.6345 7.95878C19.6345 8.31773 19.3448 8.6075 18.9858 8.6075Z' fill='%23fff'/%3E%3Cpath d='M6.66483 15.6483C6.30587 15.6483 6.01611 15.3585 6.01611 14.9996V11.1548C6.01611 10.7959 6.30587 10.5061 6.66483 10.5061C7.02379 10.5061 7.31355 10.7959 7.31355 11.1548V14.9996C7.31355 15.3585 7.02379 15.6483 6.66483 15.6483Z' fill='%23fff'/%3E%3Cpath d='M9.81718 15.6483C9.45822 15.6483 9.16846 15.3585 9.16846 14.9996V11.1548C9.16846 10.7959 9.45822 10.5061 9.81718 10.5061C10.1761 10.5061 10.4659 10.7959 10.4659 11.1548V14.9996C10.4659 15.3585 10.1761 15.6483 9.81718 15.6483Z' fill='%23fff'/%3E%3Cpath d='M12.9739 15.6483C12.615 15.6483 12.3252 15.3585 12.3252 14.9996V11.1548C12.3252 10.7959 12.615 10.5061 12.9739 10.5061C13.3329 10.5061 13.6226 10.7959 13.6226 11.1548V14.9996C13.6226 15.3585 13.3329 15.6483 12.9739 15.6483Z' fill='%23fff'/%3E%3C/svg%3E");} .item .prdInner .btns .btn_zzim {background-color:#fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.99964 18.5532C9.87625 18.5532 9.76138 18.5192 9.65927 18.4554C1.26931 14.0689 0.920435 8.5593 1.00978 6.97236C1.14167 4.74723 2.29891 2.95606 4.03476 2.29661C7.00444 1.16915 9.05513 3.53043 9.99964 4.78977C10.9484 3.53043 12.9991 1.16915 15.9645 2.29661C17.7004 2.95606 18.8576 4.74723 18.9895 6.97236C19.0831 8.5593 18.73 14.0774 10.323 18.4681C10.323 18.4681 10.323 18.4681 10.3187 18.4681C10.2804 18.4894 10.2379 18.5107 10.1953 18.5234C10.1315 18.5447 10.0635 18.5532 9.99964 18.5532ZM5.57491 3.27941C5.23029 3.27941 4.87291 3.34323 4.49 3.48788C3.23065 3.96439 2.38825 5.3301 2.28614 7.04468C2.20531 8.42316 2.53291 13.184 10.0039 17.1918C17.4706 13.184 17.7982 8.42316 17.7174 7.04468C17.6153 5.3301 16.7729 3.96439 15.5135 3.48788C13.4543 2.70079 11.9695 4.24945 10.7952 5.86192C10.6676 6.03636 10.5655 6.17676 10.4847 6.2661C10.2421 6.5469 9.75713 6.5469 9.51462 6.2661C9.43804 6.17676 9.33167 6.03636 9.20404 5.86192C8.24251 4.54726 7.08102 3.27941 5.57065 3.27941H5.57491Z' fill='%23C87A7A'/%3E%3C/svg%3E");} .item .prdInner:hover:before{opacity:1;} .item .prdInner:hover .prd_info{background:var(--main);} .item .prdInner:hover .prd_info .ord_name, .item .prdInner:hover .prd_info .prd_name{ color:#fff;} .item .prdInner:hover .btns{ opacity:1;} @media (max-width:1750px){ .view_thumb .prdList li{width:calc((100% - 1.5rem * 4) / 5);} } @media (max-width:1300px){ .view_thumb .prdList li{width:calc((100% - 1.5rem * 3) / 4);} } @media (max-width:1030px){ .view_thumb .prdList{gap:2rem 1rem;} .view_thumb .prdList li{width:calc((100% - 1rem * 2) / 3);} .item .prd_info .prd_name.row2 .flex {display: flex; align-items: center; height: 100%; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; word-wrap: break-word;} } @media (max-width:767px){ .view_thumb .prdList li{width:calc((100% - 1rem * 1) / 2);} .item .prd_info{padding:0.75rem 0.5rem;} .item .prdMade{padding:0 0.5rem; font-size:0.80rem; height: 2rem; line-height: 2rem;} .item .prd_info .prd_name {font-size:1rem;} .item .prd_info .ord_name{font-size:0.80rem;} .item .sub_title{font-size:0.8rem; height:2rem; line-height:2rem;} .item .sub_title:before{font-size:0.7rem;} .item .prdInner .btns{ opacity:1;} .item .prdInner .btns button { width: 2rem; height: 2rem;} } /*상품리스트 리스트형*/ .view_list .prdList{position:relative; display:flex; flex-wrap:wrap; margin-top:3rem; } .view_list .prdList:after{content:""; position:absolute; left:0px; bottom:0px; width:100%; height:1px; background:#ddd;} .view_list .prdList li{width:33.3%; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:0.5rem;} .view_list .prdList li:nth-child(3n){border-right:none;} .view_list .item .prdInner{display:flex; border-radius:0; border:none; } .view_list .item .prdInner:before{display:none;} .view_list .item .prdInner .btns{opacity: 1; top:auto; bottom:0.75rem; right:0.5rem;} .view_list .item .prd_thumb{ position: unset; width:35%; overflow: visible;} .view_list .item .prd_thumb img{width:80%; margin-top: 10%; } .view_list .item .prd_thumb .proStop, .view_list .item .prd_thumb .proStop, .view_list .item .prd_thumb .proStop2{width:35%;} .view_list .item .prd_txt{flex:1;} .view_list .item .prd_info{background:#fff;} .view_list .item .sub_title{background:#fff; margin:0; padding-left:44%;} .view_list .item .sub_title:before{left:38%} .view_list .item .prdInner:hover .prd_info{background:#fff; } .view_list .item .prdInner:hover .prd_info .ord_name{color:#888} .view_list .item .prdInner:hover .prd_info .prd_name{color:var(--main);} @media (max-width:1300px){ .view_list .prdList li{width:50%;} .view_list .prdList li:nth-child(3n){border-right:1px solid #ddd;;} .view_list .prdList li:nth-child(even){border-right:none;} } @media (max-width:767px){ .view_list .prdList li{width:100%; border-right:none;} .view_list .item .prd_thumb img{width:100%; margin-top: 0%; } .view_list .prdList li:nth-child(3n){border-right:none;} } @media (max-width:450px){ .view_list .item .sub_title {padding-left:48%;} } /* 상품 정렬 타입 */ .cate_prd_list:after { content: ''; display: block; clear: both;} .cate_prd_list > li div.prd_thumb{position:relative; text-align:center; margin-bottom:15px; height:220px; border-radius:5px; overflow:hidden;} .cate_prd_list > li div.prd_thumb div.inner a{position:relative; display:block; width:100%; height:100%; } .cate_prd_list > li div.prd_thumb div.inner a:before{content : ""; display : block; position : absolute; left : 0; bottom : 0; width : 100%; height : 100%; background : rgba(0,0,0,0.05);} .cate_prd_list > li div.prd_thumb div.inner{position:relative; overflow:hidden; display:block;} .cate_prd_list > li div.prd_thumb img{width: 220px; height:220px;} .cate_prd_list > li div.prd_thumb .btn{ position: absolute; bottom:45px; right:-35px; width:35px;} .cate_prd_list > li div.prd_thumb:hover .btn{right:15px; transition: all 0.2s ease-out 0s;} .cate_prd_list > li div.prd_thumb button { width: 35px; height: 35px; outline:none; border:none; text-indent: -999999px; font-size: 0; cursor:pointer; margin:2px 0px;} .cate_prd_list > li div.prd_thumb .btn_zzim {background: url('/images/mall/btn_wish.png') no-repeat 50% 50%; background-size:35px 35px;} .cate_prd_list > li div.prd_thumb .btn_zzim:hover{background: url('/images/mall/btn_wish_ov.png') no-repeat 50% 50%;background-size:35px 35px;} .cate_prd_list > li div.prd_thumb .btn_basket {background: url('/images/mall/btn_basket.png') no-repeat 50% 50%; background-size:35px 35px;} .cate_prd_list > li div.prd_thumb .btn_basket:hover{background: url('/images/mall/btn_basket_ov.png') no-repeat 50% 50%;background-size:35px 35px;} .cate_prd_list > li div.prd_thumb div.img_zone .show_mark{z-index:10; position:absolute; top:5px; right:5px;} .cate_prd_list > li div.prd_thumb div.img_zone .mark img{width:50px; height:50px;} .cate_prd_list > li div.prd_thumb div.img_zone .mark00{z-index:10; position:absolute; top:5px; left:5px;} .cate_prd_list > li div.prd_thumb div.img_zone .mark01{z-index:10; position:absolute; top:5px; left:5px;} .cate_prd_list > li div.prd_thumb div.img_zone .mark02{z-index:10; position:absolute; top:5px; right:5px;} .cate_prd_list > li div.prd_thumb div.img_zone .mark03{z-index:10; position:absolute; bottom:35px; left:5px;} .cate_prd_list > li div.prd_thumb div.img_zone .mark04{z-index:10; position:absolute; bottom:45px; left:5px;} .cate_prd_list > li div.prd_thumb div.img_zone .soldout{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/soldout.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .cate_prd_list > li div.prd_thumb div.img_zone .proStop{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/proStop.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .cate_prd_list > li div.prd_thumb div.img_zone .proStop2{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/proStop2.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .cate_prd_list > li div.prd_thumb span.sub_title{display:block; width:100%; position:absolute; height:35px; line-height:35px; font-size:12px; color:#fff; bottom:-15px; left:0; background:rgba(0,0,0,0.6); padding:0px 10px; margin-bottom:15px; } .cate_prd_list > li div.prd_thumb span.sub_title b{display:block; width:100%; overflow:hidden;white-space:nowrap;text-overflow:ellipsis; font-weight:400;} .cate_prd_list > li .prd_name{position:relative; margin-bottom:10px} .cate_prd_list > li .prd_name a {overflow: hidden; display:block; height: 36px; margin-top: 2px; padding: 2px 0; -webkit-box-orient: vertical; line-height: 18px; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; word-break: keep-all; color:#000; font-weight:600;} .prd_price { margin-top:0.2rem; font-size: 0.85rem; padding: 0px 1rem;} .prd_price .regular_tit{background:#23A5DD; color:#fff; padding:1px 3px; border-radius:5px; vertical-align:top;} .prd_price .tx_org {color:#b5b5b5;font-size:0.8rem;text-decoration:line-through;vertical-align:middle;} .prd_price .tx_org > span {display:inline-block;font-size:0.8rem;text-decoration:line-through;vertical-align:0;letter-spacing:-0.02em; margin-left:5px;} .prd_price .tx_cur {display:inline-block;} .prd_price .tx_cur > span {display:inline-block;font-size: 0.9rem;vertical-align:-1px; margin-right:0.1rem; color:#dc1508; font-weight:600;} .prd_price .tx_cur > span.regularPrice {color:#23A5DD;} .prd_price .tx_org+.tx_cur {margin:0 0 0 7px;vertical-align:bottom} .prd_price span.proReplace{font-size:14px; font-weight:bold;} .prd_price a.proReplace{font-size:14px; background:#dc1508; color:#fff; font-weight:bold; padding:3px 5px;} .prd_price span.proSoldOut{font-size:14px; font-weight:bold;} .prd_price a.proSoldOut{font-size:14px; background:#dc1508; color:#fff; font-weight:bold; padding:3px 5px;} .boardList{overflow:hidden;} .boardList ul.cate_prd_list li{width:20%; float:left; box-sizing:border-box; padding:20px 20px; min-height:450px;} .boardList ul.cate_prd_list2 li{min-height:400px;} .boardList ul.cate_prd_list li.nodate{padding:160px 0px 30px 0px !important; background:url('/images/content/nodata.png') no-repeat center 25px !important; background-size: 105px auto !important;} .boardList ul.cate_prd_list li .prd_ori_star{margin-top:10px; margin-bottom:5px; position:relative;} .boardList ul.cate_prd_list li .prd_ori_star em{padding-left:110px;} .boardList ul.cate_prd_list li .prd_ori_star span.grade{background: url('/images/main/star.png') no-repeat 0px -18px;background-size:98px 36px;} .boardList ul.cate_prd_list li .prd_ori_star span.state{background: url('/images/main/star.png') no-repeat 0px 1px; background-size:98px 36px;} .boardList ul.cate_prd_list li .prd_ori_star span.grade, .boardList ul.cate_prd_list li .prd_ori_star span.state{position: absolute; left: 0; top:0; display: inline-block; text-indent: -9999px; max-width: 100%; width: 100px; height: 18px; } .boardList ul.cate_prd_list li .prd_ori_star span i{vertical-align:middle; color:#71A0FF; font-size:18px; } .boardList ul.cate_prd_list li .prd_ori_deli{ font-size: 14px; color: #0051C9;} .relationList{position:relative;clear:both; /* padding-bottom:50px; */} .relationList div.title {position:relative; text-align:center; padding-bottom:20px; } .relationList div.title b{font-size:30px; font-weight:bold; color:#000; } .relationList div.title span{color:#d9121f; font-weight:400; font-size:18px;} .relationList ul.related_button{} .relationList ul.related_button li{display:inline-block;} .relationList ul.related_button li img{cursor:pointer;} .relationList div.boardList {position:relative; background:#fff; width:1300px;} .relationList div.boardList ul.cate_prd_list li{width:240px;} .relationList div.boardList .img_zone img{display:block;} .relationList div.boardList p.prev {position:absolute; cursor:pointer; top:50%;margin-top:-27.5px;z-index:9;} .relationList div.boardList p.next {position:absolute; cursor:pointer; top:50%;right:0;margin-top:-27.5px;z-index:9;} .relationList .rel_buy{padding:45px 35px; background:#fff;} .relationList .rel_buy table.tb_title{border-top:3px solid #e5e5e5; border-bottom:1px solid #e5e5e5;} .relationList .rel_buy table.tb_title th{padding:15px 0; position:relative;} .relationList .rel_buy table.tb_title th:before{content:""; position:absolute; left:0; width:1px; height:26px; background:#e5e5e5;} .relationList .rel_buy table.tb_title th:first-child:before{width:0;} .relationList .rel_buy table.tb_view .center{text-align:center;} .relationList .rel_buy table.tb_view td{border-bottom:1px solid #e5e5e5; padding:5px 0; position:relative;} .relationList .rel_buy table.tb_view td .soldout{width:125px; height:100px; position:absolute; top:0; left:0; background:url('/images/content/soldout.png?v=1') no-repeat center center; background-size:cover;} .relationList .rel_buy table.tb_view td a.proReplace{font-size:14px; background:#dc1508; color:#fff; font-weight:bold; width:125px; height:40px; line-height:40px; display:inline-block; text-align:center;} .relationList .rel_buy .prd_list{width:100%; max-height:400px; overflow-y:scroll;} .relationList .rel_buy .prd_list .prd_btn_area span{display:inline-block; width:85px; height:40px; line-height:40px; background:#fff; cursor:pointer;} .relationList .rel_buy .prd_list .relBuy{color:#f25a4d; border:1px solid #f25a4d;} .relationList .rel_buy .prd_list .relCart{color:#00c6d7; border:1px solid #00c6d7;} .relationList .rel_buy .prd_list .rel_select{width:70px; height:42px;} .relationList .rel_buy .relation_button{width:100%; text-align:right; margin-top:25px;} .relationList .rel_buy .relation_button a{background:#888;color:#fff; font-size:15px; padding:10px 20px;} .r_productCount {width:50px;text-align:right;} /* 보기방식 - 리스트 */ .mall_container .boardList .tb_view{} .mall_container .boardList .tb_view td{border-bottom:1px solid #ccc; } .mall_container .boardList .tb_view td.pimg{padding:10px 0px;} .mall_container .boardList .tb_view td.pimg img{width:125px; height:100px;} .mall_container .boardList .tb_view td.pimg .mark img{width:50px; height:50px;} .mall_container .boardList .tb_view td.pimg .mark00{z-index:10; position:absolute; top:5px; left:5px;} .mall_container .boardList .tb_view td.pimg .mark01{z-index:10; position:absolute; top:5px; left:5px;} .mall_container .boardList .tb_view td.pimg .mark02{z-index:10; position:absolute; top:5px; right:30px;} .mall_container .boardList .tb_view td.pimg .mark03{z-index:10; position:absolute; bottom:5px; left:5px;} .mall_container .boardList .tb_view td.pimg .mark04{z-index:10; position:absolute; bottom:5px; right:30px;} .mall_container .boardList .tb_view td.title{font-size:14px; text-align:left; color:#888; font-weight:bold; line-height:23px;} .mall_container .boardList .tb_view td.title a{color:#888;} .mall_container .boardList .tb_view td p.icon{margin-bottom:10px;} .mall_container .boardList .tb_view td.price p{margin:4px 0px; overflow:hidden; line-height:25px; font-weight:bold; font-size:14px; color:#3e3e3e; text-align:left;} .mall_container .boardList .tb_view td.price p span{border:1px solid #ccc; width: 104px; height:23px; line-height:25px; float:left; display:block; margin-right:5px;font-size:14px; color:#888; font-weight:normal; text-align:center; margin-right:15px;} .prd_btn_area{text-align:center;} .cartBtn{width:85px;height:40px;color:#00b9c9;border:1px solid #00C6D7;background:#fff; margin:0px 5px;} .wishBtn{width:85px;height:40px;color:#8A61FF;border:1px solid #8A61FF;background:#fff; margin:0px 5px;} /* 검색완료페이지 */ .tit-search h2{text-align: center; position: relative; height: 3rem; margin-bottom: 0.5rem; } .tit-search h2 span{display: inline-block; line-height: 3rem; font-size: 1.15rem; color: #352f29; padding: 0 1rem; } .tit-search h2 em{font-family: Tahoma; font-weight: bold; color: #e2704b;} .mall_container .boardList ul .search_none{border:none; text-align:center; width:100%; margin:2.5rem 0px; color:#898989;} .mall_container .boardList ul .search_none img{margin-bottom: 1.5rem;} /*************************************************** ■ VIEW 페이지 ****************************************************/ .view_container{max-width:65rem; margin:0 auto;} .prod_notice {margin-top: 0.5rem; color: #f25a4d; font-size: 0.8rem; text-align: center;} .prod_notice span {color: #5c5c5c;} /* 페이지경로 */ .select_location {display:flex; align-items: center; font-size:0.75rem; padding-top:1.5rem;} .select_location a {display:inline-block;} .select_location .dsn_select {height:1.6rem; width:7.5rem; border:1px solid #E6E6E6; } .select_location .dsn_select > a {display:block; position:relative; overflow:hidden ;height:1.6rem; padding:0 1.5rem 0 0.5rem ; line-height:1.6rem; text-decoration:none;} .select_location .dsn_select > a span {position:absolute; top:50%; right:0.5rem; display:block; width:0.6rem; height:0.35rem; overflow:hidden; vertical-align:top; background:url('/images/default/content/sel_icon.svg') 0 0 no-repeat; background-size:100% 100%; transform:translateY(-50%);} .select_location .dsn_select > a:hover, .select_location .dsn_select.active > a, .select_location .dsn_select > a.selected {color:var(--sub);} .select_location .dsn_select.active {position:relative;z-index:110;} .select_location .dsn_select ul {display:none;position:absolute;top:calc(1.6rem - 1px);left:-1px; width: calc(100% + 2px);overflow:hidden;background-color:#FFF; border:1px solid #e5e5e5;border-top:0 none;} .select_location .dsn_select.active ul {display:block} .select_location .dsn_select ul li {line-height:1;display: block;} .select_location .dsn_select ul li a {display: block;padding: 0 10px 0;line-height: 25px;font-size:13px;font-weight:normal; text-align:left;} .select_location .dsn_select ul li a:hover, .select_location .dsn_select ul li a:focus, .select_location .dsn_select ul li a:active, .select_location .dsn_select ul li a.selected {background-color: var(--sub); color: #fff;} .select_location .btn_list{display:inline-block; height:1.6rem; line-height:1.6rem; margin-left:0.4rem; background:var(--main); color:#fff; padding:0 0.4rem;} /* 큰이미지 롤링 */ .gal .bimg{position:relative; } .gal .bimg .gallery-top .swiper-slide:before{content:""; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.01);} .gal .bimg .gallery-top .swiper-slide img{width:100%; aspect-ratio:1 / 1;} .gal .bimg .mark00{z-index:10; position:absolute; top:1rem; left:1rem; width:5rem} .gal .bimg .mark01{z-index:10; position:absolute; top:1rem; left:1rem; width:5rem} .gal .bimg .mark02{z-index:10; position:absolute; top:1rem; right:1rem; width:5rem} .gal .bimg .mark03{z-index:10; position:absolute; bottom:1rem; left:1rem; width:5rem} .gal .bimg .mark04{z-index:10; position:absolute; bottom:1rem; right:1rem; width:5rem} .gal .bimg .soldout{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/soldout.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .gal .bimg .proStop{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/proStop.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .gal .bimg .proStop2{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/proStop2.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .gal .smallbox{margin-top:1rem;} .gal .smallbox .swiper-slide{ cursor:pointer; border:1px solid #e0e0e0; } .gal .smallbox .swiper-slide img{aspect-ratio:1 / 1;} .gal .smallbox .swiper-slide:hover{border:1px solid var(--main);} /* 탑이미지, 제품명 박스 */ .pro_box{margin-bottom: 4rem; display:flex; } .pro_box .pleft{ flex-shrink: 0; width:30rem; text-align:center;} .pro_box .pright{flex-grow:1; position:relative; padding-left:2rem;} .pro_box .pright .prd_title{padding-bottom: 1rem; margin-bottom:1rem; border-bottom:2px solid var(--black); } .pro_box .pright .prd_title .prd_ori{display:flex; gap:1rem; color:#777; font-size:0.75rem; margin-bottom:0.5rem;} .pro_box .pright .prd_title .prd_name{display:flex; margin-bottom:1rem;} .pro_box .pright .prd_title .prd_name h3{flex-grow:1; font-size:1.3rem; color:var(--black); font-weight:600; line-height:1.3;} .pro_box .pright .prd_title .prd_name .btn_pick{flex-shrink: 0; display:block; height:2.5rem; width:2.5rem; background-repeat:no-repeat; background-position:50% 50%; background-size:1.5rem 1.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.99964 18.5532C9.87625 18.5532 9.76138 18.5192 9.65927 18.4554C1.26931 14.0689 0.920435 8.5593 1.00978 6.97236C1.14167 4.74723 2.29891 2.95606 4.03476 2.29661C7.00444 1.16915 9.05513 3.53043 9.99964 4.78977C10.9484 3.53043 12.9991 1.16915 15.9645 2.29661C17.7004 2.95606 18.8576 4.74723 18.9895 6.97236C19.0831 8.5593 18.73 14.0774 10.323 18.4681C10.323 18.4681 10.323 18.4681 10.3187 18.4681C10.2804 18.4894 10.2379 18.5107 10.1953 18.5234C10.1315 18.5447 10.0635 18.5532 9.99964 18.5532ZM5.57491 3.27941C5.23029 3.27941 4.87291 3.34323 4.49 3.48788C3.23065 3.96439 2.38825 5.3301 2.28614 7.04468C2.20531 8.42316 2.53291 13.184 10.0039 17.1918C17.4706 13.184 17.7982 8.42316 17.7174 7.04468C17.6153 5.3301 16.7729 3.96439 15.5135 3.48788C13.4543 2.70079 11.9695 4.24945 10.7952 5.86192C10.6676 6.03636 10.5655 6.17676 10.4847 6.2661C10.2421 6.5469 9.75713 6.5469 9.51462 6.2661C9.43804 6.17676 9.33167 6.03636 9.20404 5.86192C8.24251 4.54726 7.08102 3.27941 5.57065 3.27941H5.57491Z' fill='%23232323'/%3E%3C/svg%3E");} .pro_box .pright .prd_title .sub_title{color:var(--main);} .pro_box .pright .prd_title .prd_icons{display:flex; margin-top:0.2rem; } .pro_box .pright .info_list{padding:1rem 0;} .pro_box .pright .info_list li{position: relative; display:flex; padding:0.25rem 0px; font-size:0.8rem; } .pro_box .pright .info_list li .tit{flex-shrink: 0; width:8rem; font-weight:500;} .pro_box .pright .info_list li .tb_cont{flex-grow:1; text-align:left; color:#555;} .pro_box .pright .info_list li .tb_cont a{color:var(--main); text-decoration:underline; text-underline-position: under;} .pro_box .pright .info_list li .tb_cont_left{position:relative;} .pro_box .pright .info_list li.br{border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:0.7rem 0; margin:0.25rem 0px;} .pro_box .pright .info_list li.br_t{border-top:1px solid #ddd; padding-top:0.7rem; margin-top:0.25rem; } .pro_box .pright .info_list li.br_b{border-bottom:1px solid #ddd; padding-bottom:0.7rem; margin-bottom:0.25rem;} .pro_box .pright .info_list li.price{align-items: center} .pro_box .pright .info_list li.price .tx_cur{font-size:1.2rem; color:var(--black); font-weight:500;} .pro_box .pright .info_list li:last-child{border-bottom:none; padding-bottom:0;} /*고유번호*/ .more_orinum{cursor:pointer; display:inline-block; border:1px solid #e0e0e0; padding:0.2rem 0.75rem; border-radius:1rem; } .more_orinum i{color:var(--main); font-weight:700;} .option_oriPopup{display:none; position:absolute; top:2.2rem; left:8rem; z-index:9; background:#fff; border-radius:0.25rem; padding:0; border:1px solid #aaa;} .option_oriPopup h5{font-size:0.9rem; border-bottom:1px solid #aaa; height:2rem; line-height:2rem; padding:0 2.5rem 0 0.5rem; color:var(--main); background:#f7f7f7; border-radius:0.25rem 0.25rem 0 0;} .option_oriPopup .oriPopupClose{position:absolute; top:0; right:0.5rem; line-height:2rem; cursor:pointer;} .option_oriPopup ul{max-height:360px; overflow-y:auto; padding:0.25rem 0.5rem 0.5rem;} .option_oriPopup ul li{font-size:0.8rem; } /*보험코드*/ .more_insure{cursor:pointer;} .insurePopup{display:none; position:absolute; top:25px; left:0px; z-index:9; background:#fff; border-radius:5px; padding:0; border:1px solid #333;} .insurePopup h5{font-size:16px; border-bottom:1px solid #333; padding:5px 30px 0px 10px;} .insurePopup span.insurePopupClose{position:absolute; top:5px; right:10px; cursor:pointer;} .insurePopup ul{max-height:360px; overflow-y:auto; padding:10px;} .insurePopup ul li{} /* 상품 개수 변경 영역 (상품상세) */ .option_resultZone{margin-top:0.5rem;} .option_add_area + .option_add_area{border-top:1px solid #e9e9e9;} .prd_cnt_box {position:relative; min-height:3rem; padding:1rem; background:#f9f9f9; } .prd_cnt_box p{font-size:1.05rem; color:var(--black); font-weight:600; margin-bottom:0.5rem;} .prd_cnt_box p.sel_name{font-size:1rem; font-weight:400;} .prd_cnt_box .cont_area{display:flex; justify-content: space-between; align-items: center;} .prd_cnt_box .option_cnt_box {display:flex; max-width:6rem; border-radius:1rem; border:1px solid #ddd; overflow:hidden; background-color: #fff;} .prd_cnt_box .option_cnt_box input[type="text"] {font-weight:700; width:2rem; height:2rem; padding:0 0.5rem; border:0; text-align:center; color:#222; background-color: #fff;} .prd_cnt_box .option_cnt_box .btnCalc{position:relative; width:2rem; height:2rem; font-size:0;} .prd_cnt_box .option_cnt_box .btnCalc:before{content:""; position:absolute; left:0px; top:0px; width:100%; height:2rem; line-height:2rem; font-size: 1rem; color:#a5a5a5; text-align:center; font-family: 'xeicon' !important; } .prd_cnt_box .option_cnt_box .btnCalc.minus:before {content: "\e91a";} .prd_cnt_box .option_cnt_box .btnCalc.plus:before {content: "\e913";} .prd_cnt_box .cont_area .option_price {display:inline-flex; align-items: center; color:var(--black); font-size:0.9rem;} .prd_cnt_box .cont_area .option_price .tx_num {display:inline-block; font-size:1.15rem;margin-right:0.2rem; font-weight:700;} .prd_cnt_box .cont_area .option_price .btn_opt_del{position:relative; display:inline-block;width:1rem; height:1rem; margin-left:0.5rem; font-size:0;} .prd_cnt_box .cont_area .option_price .btn_opt_del:before{content: "\e921"; position:absolute; left:0px; top:0px; width:100%; height:1rem; line-height:1rem; font-size: 1rem; color:#a5a5a5; text-align:center; font-family: 'xeicon' !important; } .pack_tit{display:flex; align-items: center; justify-content: space-between; height:2.75rem; padding:0 1rem; border:1px solid var(--red); background:#fff3f0; color:var(--red);} .pack_tit .btn_opt_zone_del{background:var(--red); color:#fff; font-size:0.8rem; line-height:1.8rem; padding:0 1rem; border-radius:1rem;} /* 옵션 */ .prd_option_box {position:relative;width:100%; height:3rem; background:#fff; margin-top:1rem;} .prd_option_box .sel_option{position:relative; display:block; height:3rem; line-height:3rem; border-radius:0.1rem; padding:0 1rem; border:1px solid #aaa; font-weight:700;} .prd_option_box .sel_option:before{content: "\e941"; position:absolute; right:0px; top:0px; width:2rem; height:3rem; line-height:3rem; font-size: 1rem; color:#a5a5a5; text-align:center; font-family: 'xeicon' !important; transition: all 0.2s ease-out 0s;} .prd_option_box .sel_option.open:before{transform: rotate(180deg );} .prd_option_box .sel_option > .icon_flag {margin-right:5px} .prd_option_box .sel_option_list {display:none; position:absolute; top:3rem; left:0; width:100%; max-height:12rem; overflow-x:hidden; border:1px solid #aaa; border-top:none; background:#fff; z-index:1} .prd_option_box .sel_option_list > li {position:relative;width:100%} .prd_option_box .sel_option_list > li > h3{padding:0.5rem 1rem; color: var(--main); background: #e4f2eb;} .prd_option_box .sel_option_list > li ul li a{display:flex; align-items: center; justify-content: space-between; padding:0.5rem 1rem; border-bottom:1px solid #e0e0e0;} .prd_option_box .sel_option_list > li ul li a:hover{background: #f7f8f9; font-weight:600;} .prd_option_box .sel_option_list > li ul li:last-child a{border-bottom:none;} .prd_option_box .sel_option_list > li+li {border-top:1px solid #e5e5e5} .prd_option_box .sel_option_list > li > a {overflow:hidden;display:block; font-size:0.9rem; width:100%; min-height:46px; padding:12px 115px 12px 20px; color:#666; box-sizing:border-box; } .prd_option_box .sel_option_list > li > a.option_soldout{background:#efefef; color:#999; position:relative;} .prd_option_box .sel_option_list > li > a.option_stop{background:#efefef; color:#999; position:relative;} .prd_option_box .sel_option_list > li.on{background:#f2f2f2} .prd_option_box .sel_option_list > li .icon_flag {display:block;float:left;vertical-align:top;font-weight:normal;} .prd_option_box .sel_option_list > li .option_value {display:block;max-width:271px;text-overflow:ellipsis;/*white-space:nowrap;*/} .prd_option_box .sel_option_list > li .icon_flag+.option_value {max-width:226px;} .prd_option_box .sel_option_list > li .color+.option_value {max-width:245px;} .prd_option_box .sel_option_list > li .color {display:block;float:left;width:16px;height:16px;margin-right:10px;vertical-align:middle} .prd_option_box .sel_option_list > li .color img {width:16px;height:16px} .prd_option_box .sel_option_list > li .coupon_info {padding-left:15px;background:url("/images/mall/bar_repeat.png") repeat-x 0 0;margin:0 20px;height:46px;line-height:46px;color:#969937;font-weight:700} .prd_option_box .sel_option_list > li .coupon_info:before {display:inline-block;content:"";margin:0 3px 0 -15px;background:url("/images/mall/icon_prd_coupon.png") no-repeat 0 center;width:11px;height:11px;} .prd_option_box .color img{width:16px;vertical-align:middle;} .prd_option_box .color{margin-right:10px;} .prd_option_box .sel_option_list > li .coupon_info button {top:auto;bottom:11px;color:#969937;border-color:#969937;line-height:20px} /* 상품금액 */ .prd_total_price {margin-top:1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color:var(--black); font-weight:600;} .prd_total_price .tx_cont .price_detail{font-size:1.8rem; font-weight:800; color:var(--main);} /* 버튼 */ .prd_btn {margin-top:1.5rem; display:flex; gap:0.5rem;} .prd_btn a{display:block; border:1px solid var(--main); color:var(--main);height:3.5rem; line-height:3.5rem; font-weight:600; font-size:1.2rem; text-align:center;} .prd_btn .btn_cart{width:10rem;} .prd_btn .btn_purchase{flex-grow:1; background:#c74a43; color:#fff; border-color:#fff;} /*경고문구*/ .warningBox{background:#f7f7f7; padding:1.5rem;} .warningBox h4{font-size:1.75rem; padding-bottom:1rem; text-align:center; color:var(--black); font-family: 'GongGothic';} .warningBox h4 span, .warningBox h4 i{color:var(--red)} .warningBox ul {padding:1rem; background:#fff; border:1px solid #e0e0e0; } .warningBox ul li{position:relative; display:flex; gap:0.4rem;} .warningBox ul li:not(:first-child){margin-top:0.5rem;} .warningBox ul li i{color:var(--red); line-height:1.5;} /* 상품정보 탭 */ .prodetail{position:relative; margin-top:3rem; padding-right:18rem;} .prodetail ul.tab{display:flex; width:100%; position:relative; background:#fff; z-index:10; } .prodetail ul.tab:before{content:'';display : block; position : absolute; left :-50%; bottom:0px; width :250%; height : 1px; border-bottom:1px solid #dedede; z-index:1; } .prodetail ul.tab li{display:block; flex:1 0 33.3%; height: 3rem; line-height: 3rem; box-sizing:border-box; text-align: center;} .prodetail ul.tab li a { display: block; text-align:center; color: #888; font-size:1rem; font-weight: bold; cursor:pointer;} .prodetail ul.tab li.current a {position:relative; color: var(--main); background-color: #fff; border:none; cursor:pointer;} .prodetail ul.tab li.current a:before{content:'';display : block; position : absolute; left :0px; bottom:-1px; width :100%; height : 3px; z-index:1; background: var(--main); } .prodetail ul.tab.fix{position:fixed; top:0; left:50%; margin-left:-32.5rem; width:65rem; margin-top:0; padding-right:18rem;} .prodetail ul.tab.fix:after{content:""; display : block; position : absolute; left :-50%; bottom:0px; width :200%; height : 100%; background:#fff; z-index:-1; } .prodetail .fix_cost{display: flex; flex-direction: column; position:absolute; height:100%; top:3rem; right:0; padding: 1rem 0 1rem 1rem; width:18rem; padding-left:1rem; border-left:1px solid #e0e0e0;} .prodetail .fix_cost .openBtn{display:none;} .prodetail .fix_cost .box{display: flex; flex-direction: column; flex: 1;} .prodetail .fix_cost .scroll{overflow-y:auto; min-height:61vh; max-height: 70vh;} .prodetail .fix_cost .scroll::-webkit-scrollbar {width:5px;height:3px;background-color:#eae9e9;} .prodetail .fix_cost .scroll::-webkit-scrollbar-thumb {background-color:var(--black); -webkit-border-radius:3px;border-radius:3px;} .prodetail .fix_cost .prd_total_price .tx_cont .price_detail{font-size:1.3rem;} .prodetail .fix_cost .prd_total_price{margin-top:1rem; border-top:2px solid var(--black); padding-top:1rem;} .prodetail .fix_cost .prd_btn{margin-top:1rem;} .prodetail .fix_cost .prd_btn a{font-size:0.9rem;} .prodetail .fix_cost .prd_btn .btn_cart{width:5rem;} .prodetail.fix{} .prodetail.fix .fix_cost{ position:fixed; top:0; right: 50%; width:65rem; margin-right: -79.5rem; padding: 4rem 0 1rem 1rem;} .prodetail.fix .fix_cost .box{width:18rem;} .prodetail.fix .fix_cost .scroll{flex:1;} .prodetail.noFix .fix_cost{position:absolute; height:100%; top:auto; bottom:-6rem; right:0; margin-right:0; width:18rem; padding: 1rem 0 1rem 1rem; justify-content: flex-end; } .prodetail.noFix .fix_cost .box{ justify-content: flex-end;} .prodetail.noFix .fix_cost .scroll{flex:0;} /* 뷰 아래 선택옵션 크기 조절*/ .prodetail .pack_tit{padding:0 0.5rem;} .prodetail .prd_option_box{margin-top:0} .prodetail .prd_cnt_box{padding:0.5rem;} .prodetail .prd_cnt_box p.sel_name{font-size:0.8rem;} .prodetail .prd_cnt_box .option_cnt_box input[type="text"], .prodetail .prd_cnt_box .option_cnt_box .btnCalc{height:1.75rem;} .prodetail .prd_cnt_box .option_cnt_box .btnCalc:before{height:1.75rem; line-height:1.75rem;} .prodetail .prd_option_box .sel_option_list > li{font-size:0.8rem;} .prodetail .prd_option_box .sel_option_list > li ul li a, .prodetail .prd_option_box .sel_option_list > li > h3{padding:0.5rem; } /* 배송안내 */ .prodetail .p_detail{padding: 2rem 0; padding-right:2rem; clear: both;} .prodetail .prod_info{text-align:center; word-break: break-all;} .prodetail .prod_info img{max-width:60rem; margin:0 auto;} .prodetail .p_detail h2{color:#000; border-bottom:2px solid #000; font-size:1.4rem; padding-bottom:0.75rem; margin-bottom:1.75rem; } .prodetail .p_detail .info h4{font-size:1.2rem; color:var(--black); padding-left:.5rem;} .prodetail .p_detail .info h4:not(:first-child){margin-top:3rem;} .prodetail .p_detail .info h5{margin-top:2rem; color:var(--black);} .prodetail .p_detail .info_div{padding:1.5rem; background:#f7f7f8; border-radius:1rem; margin-top:0.5rem;} .prodetail .p_detail .info_div b{color:var(--black);} .prodetail .p_detail .info_div strong{color:var(--red);} .prodetail .p_detail .info_div ul{margin-top:0.5rem;} .prodetail .p_detail .info_div ul li{display:flex; gap:0.4rem;} .prodetail .p_detail .info_div ul li:not(:first-child){margin-top:0.25rem;} .prodetail .p_detail .info_div ul li i{width:1rem; } .prodetail .p_detail .info_div ul + p{color:var(--main);} .prodetail .p_detail .info_div .how{display:flex; gap:2rem; padding:1rem; background:#fff; border-radius:0.5rem;} .prodetail .p_detail .info_div .how li{position:relative; text-align:center; flex-direction: column; align-items: center; justify-content: space-between;} .prodetail .p_detail .info_div .how li:not(:first-child):before{content:""; position:absolute; left:-1rem; top:0px; width:1px; height:100%; background:#eee; } .prodetail .p_detail .info_div .how li img{display:block; margin:0 auto;} .prodetail .p_detail .info_center{margin-top:3rem; display:flex; gap:1rem;} .prodetail .p_detail .info_center > div{flex:1; background:#FCFCFC; border:1px solid #F4F4F4; border-radius:1rem; padding:1rem; font-size:0.8rem;} .prodetail .p_detail .info_center h6{color:var(--black); margin-bottom:0.5rem; font-size:1.1rem;} .prodetail .p_detail .info_center a{font-size:1.5rem; font-weight:600;} @media (max-width:1400px){ .prodetail .p_detail{padding-right:1rem;} .prodetail.fix ul.tab.fix{padding-right:19rem;} .prodetail.fix .fix_cost{right:0; margin-right:0; width:19rem; padding:4rem 1rem 1rem;} .prodetail.fix .fix_cost .box{width:100%;} .prodetail.noFix .fix_cost{width:18rem; padding: 1rem 0 1rem 1rem;} } @media (max-width:1300px){ /* 탑이미지, 제품명 박스 */ .pro_box .pleft{width:25rem;} /* 상품정보 탭 */ .prodetail ul.tab.fix{left:0; margin-left:0; width:100%; } } @media (max-width:1030px){ /* 탑이미지, 제품명 박스 */ .pro_box .pleft{width:20rem;} .prodetail{padding-right:0;} .prodetail .p_detail{padding-right:0;} .prodetail.fix ul.tab.fix{padding-right:0;} .prodetail .fix_cost{position: fixed; height:auto; top:auto; bottom:-100%; width: 100%; transition: bottom 0.2s ease-out 0s; padding:0; z-index: 10; box-shadow:0 0 10px rgba(0,0,0,0.1);} .prodetail.fix .fix_cost{position: fixed; height:auto; top:auto; bottom:0; width: 100%; transition: bottom 0.2s ease-out 0s; padding:0; } .prodetail.noFix .fix_cost{bottom:-100%;} .prodetail .fix_cost .box{background:#fff; padding:1rem;} .prodetail .fix_cost .scroll, .prodetail .fix_cost .prd_total_price{display:none;} .prodetail .fix_cost .prd_btn{margin-top:0;} .prodetail .fix_cost .prd_btn .btn_cart{width:35vw;} } @media (max-width:767px){ .prd_price {padding: 0.5rem 0.5rem;} /* 탑이미지, 제품명 박스 */ .pro_box{flex-direction: column} .pro_box .pleft{display:none;} .pro_box .mob{width:100%; position:relative;} .pro_box .mob .mark01{z-index:10; position:absolute; top:0.5rem; left:0.5rem; width:5rem;} .pro_box .mob .mark02{z-index:10; position:absolute; top:0.5rem; right:0.5rem; width:5rem;} .pro_box .mob .mark03{z-index:10; position:absolute; bottom:0.5rem; left:0.5rem; width:5rem;} .pro_box .mob .mark04{z-index:10; position:absolute; bottom:0.5rem; right:0.5rem; width:5rem;} .pro_box .mob .soldout{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/soldout.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .pro_box .mob .proStop{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/proStop.png?v=1') no-repeat center center; background-size:cover; z-index:99;} .pro_box .mob .proStop2{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/proStop2.png?v=1') no-repeat center center; background-size:cover; z-index:99;} /* 큰이미지 롤링 - 모바일에서만 적용 */ .pro_box .gallery .swiper-slide{width:100% !important;} .pro_box .gallery .swiper-slide:before{content:""; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.01);} .pro_box .gallery .swiper-slide img{width:100%; aspect-ratio:1 / 1;} .pro_box .gallery .swiper-button-prev, .pro_box .gallery .swiper-button-next{position:absolute; top:50%; width:2.5rem; height:2.5rem; background:#fff; transform:translateY(-50%); opacity:1; z-index:10;} .pro_box .gallery .swiper-button-prev{left:0rem; } .pro_box .gallery .swiper-button-next{right:0rem; } .pro_box .gallery .swiper-button-prev:after, .pro_box .gallery .swiper-button-next:after{ width:2.5rem; height:2.5rem; line-height:2.5rem; text-align:center; font-family: 'xeicon'; color: #3f3f3f; font-size: 1.2rem;} .pro_box .gallery .swiper-button-prev:after{content : "\e93b";} .pro_box .gallery .swiper-button-next:after{ content : "\e93e";} .pro_box .gallery .swiper-button-prev:hover, .pro_box .gallery .swiper-button-next:hover{background:var(--main); border-color:var(--main);} .pro_box .gallery .swiper-button-prev:hover:after, .pro_box .gallery .swiper-button-next:hover:after{color:#fff;} .pro_box .gallery .swiper-button-disabled{display:none;} .pro_box .pright{padding-left:0; margin-top:1rem;} .pro_box .pright .prd_title{margin-bottom:0;} .pro_box .pright .prd_title .prd_ori{font-size:0.9rem;} .pro_box .pright .prd_title .prd_name h3{font-size:1.5rem;} .pro_box .pright .info_list li{font-size:1rem;} .pro_box .pright .info_list li .tit{ width: 7rem; font-size:0.9rem;} .pro_box .pright .info_list li.price .tx_cur{font-size:1.3rem;} .option_oriPopup{left:7rem; width:calc(100% - 7rem);} .pro_box .pright .info_list li{line-height:1.2;} /* 버튼 */ .prd_btn a{font-size:1.1rem;} .prd_btn .btn_cart{width:7rem; } /*경고문구*/ .warningBox{ padding: 1.5rem 1rem 1rem; width:calc(100% + 2rem); margin-left:-1rem;} .warningBox h4{font-size:1.5rem;} .warningBox ul{font-size:0.9rem;} /* 배송안내 */ .prodetail .p_detail .info_div{padding:1rem;} .prodetail .p_detail .info_div .how{flex-direction: column;} .prodetail .p_detail .info_div .how li:not(:first-child):before{left:0; top:-1rem; width:100%; height:1px;} .prodetail .p_detail .info_center{flex-direction: column; gap:0.5rem;} .prodetail .p_detail .info_center > div{font-size:0.9rem;} } /*************************************************** ■ 주문하기 ****************************************************/ .pay_container{max-width:65rem; margin:2rem auto 0;} /* 제목 및 단계 */ .mall_step{display: flex; justify-content: space-between; align-items: center;} .mall_step h3{font-size:2rem; font-weight:700; color:#191919;} .mall_step ul li{position:relative; display:inline-block; padding-right:1.75rem; font-size:.8rem; color:#aaa; } .mall_step ul li:before{content : "\ea6c"; display : block; position : absolute; right :0; top:50%; transform:translateY(-50%);font-size:1.2rem; font-family: "remixicon"; } .mall_step ul li span{ font-weight:600; } .mall_step ul li.on{color:#191919; } .mall_step ul li:last-child{padding-right:0;} .mall_step ul li:last-child:before{display:none;} /* 주문하기 */ .pay_wrap{position: relative; display: flex; align-items: flex-start; margin-top: 3rem;} .pay_area {flex:1;} .pay_area .tit{border-bottom:1px solid #191919; font-size:1.1rem; color:#191919; padding-bottom:.5rem;font-weight:700; position:relative;} .pay_area .tit p.tit_alert{font-size:16px; position:absolute; bottom:0px; right:0px; color:red;} .pay_area .tit span{margin-left:.25rem;font-weight:500; } .pay_area .tit em{color:#F34921;} .pay_area .box{ margin-top:1rem; margin-bottom: 2.5rem;} .pay_area .box:last-child{margin-bottom:0;} .pay_area .box .list:first-child{padding-top:0;} .pay_area .box .list .price_box{padding-right:0;} .pay_area .box .chks{margin-bottom:1rem;} .pay_area .box .table_box .th .star{color:red;} .pay_area.fix{padding-right: 19rem;} /* 주문 table */ .table_box > li{display:flex;} .table_box > li:not(:first-child){margin-top:.75rem} .table_box li .th{flex-shrink: 0; width:6.5rem; font-weight:600; line-height:2rem; margin-right: 1rem;} .table_box li .th em{color:var(--sub)} .table_box li .td{width:100%; } .table_box li .td input, .table_box li .td select{width:93%; border-radius:0; height:2rem; border-color:#e0e0e0;} .table_box li .td input:read-only{background:#f7f7f7;} .table_box li .td input:focus, .table_box li .td select:focus{border-color:#ddd;} .table_box li .td input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #f7f7f7 inset;} .table_box li .td textarea{width:93%; border-color:#e0e0e0; padding:0.5rem;} .table_box li .td p{color:#888; margin-top:.25rem;} .table_box li .flex_box{display:flex; align-items: center;} .table_box li .flex_box.phone input, .table_box li .flex_box.phone select{width:30%;} .table_box li .add_box{flex-wrap: wrap} .table_box li .add_box .zCode{ display: flex; width: 100%;} .table_box li .add_box .zCode input[type="text"]{width:100%; margin-top:0;} .table_box li .add_box .zCode a{display:block; height:2rem; line-height:1.9rem; color:var(--main); border:1px solid var(--main); text-align:center; padding:0 1rem; margin-left:.5rem; font-size:0.8rem; cursor:pointer; font-weight: 500;} .table_box li .add_box input[type="text"]{margin-top:.5rem} /* 결제수단 */ .pay_btn{display:flex; gap:0 10px;} .pay_btn li{flex-basis:20%;} .pay_btn li.bankbook {position:relative;} .pay_btn li.bankbook .bubble {display:flex; align-items: center; justify-content: center; gap: 0.3rem;width: 100%; position:absolute; top: -2.5rem; right:0; background:var(--sub); padding: 0.2rem 0.2rem; color: #fff; text-align: center; border-radius: 0.5rem; font-weight: 500;} .pay_btn li.bankbook .bubble:before {content:''; display:block; width:0.75rem; height:auto; aspect-ratio:1; background:url('/images/default/mall/bankbook_icon.svg') no-repeat center center; background-size:100% auto;} .pay_btn li.bankbook .bubble:after {content:''; display:block; border-bottom: 0.5rem solid transparent; border-top: 1rem solid #EF626A; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; position:absolute; bottom:-55%; left:50%; transform:translate(-50%,0);} .pay_btn li label{display:block; position:relative;} .pay_btn li label input{position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; cursor: pointer;} .pay_btn li label span{display: block; width:100%; height: 2.2rem; line-height: 2.2rem; background:#fff; font-weight: 500; color: #bbb; border:1px solid #ddd; text-align: center; transition: all .3s; cursor:pointer;} .pay_btn li label input:checked + span{ color:var(--main); border-color:var(--main); font-weight: 700;} @media (max-width:1300px){ .pay_btn li.bankbook .bubble {font-size: 0.75rem;} .pay_btn li.bankbook .bubble:after {bottom: -1.1rem;} } @media (max-width:1030px){ .pay_btn li.bankbook .bubble {font-size: 0.95rem; top: -2.7rem;} } @media (max-width:767px){ .pay_btn li.bankbook .bubble {width: 150%; right:auto; left:50%; transform: translate(-50%, 0);} } /* 캐시 */ .cash_box {display:flex; gap:0 0.5rem; align-items: center} .cash_box span{display:flex; align-items: center} .cash_box .txt_won{border: 1px solid #e0e0e0; height: 2rem; display: flex; align-items: center; overflow: hidden; width:15rem;} .cash_box .txt_won input{border:none; } .cash_box .all_cash{height:2rem; margin-left:0.5rem; background:#fff !important; color:var(--main); border:1px solid var(--main) !important; width:5rem !important; font-weight: 500; cursor:pointer; font-size:0.8rem;} /* 주문 상품내역 */ .list{position:relative; display:flex; align-items: center; width:100%; border-bottom:1px solid #ddd; padding:1rem 0;} .list.cancelProduct{background:rgba(255,0,0,0.1)} .list:first-child{padding-top:0;} .list .noPost{display:block; width:100%; color:#888; text-align:center; line-height:1rem; } .list .noPost em{display:block; margin:1rem 0; font-size:2rem;} .list .check_box{width:2rem;} .list .goods_box{width:100%;} .list .goods_box .detailField{display:flex; align-items: center; } .list .goods_box .proimg{position:relative; width:5rem; height:5rem; overflow:hidden; border:1px solid #eee; border-radius:.5rem;} .list .goods_box .proimg img{position: relative;width:100%;top: 50%; transform: translateY(-50%);} .list .goods_box .protext{padding-left:1rem;} .list .goods_box .protext .pro_name{display:block; margin-bottom:.25rem; font-size:1rem; color:var(--black);} .list .goods_box .protext .pro_option{color:#aaa; font-weight:normal;} .list .status_box{width:7rem;flex-shrink: 0; text-align:center; } .list .count_box{padding-left:1rem;} .list .count_box input[type="button"]{margin-top:.25rem; width:100%; border:1px solid #ddd; background:#fff; height:1.5rem; line-height:1.5rem; cursor:pointer; padding: 0 0.5rem;} .list .price_box{flex-shrink: 0; position: relative; width:14rem; padding-right:1rem;; text-align:right;} .list .price_box .btn_delete{position:absolute; right:0rem; top:0; font-size:1.2rem;} .list .price_box .total{font-size:1.1rem;} .list .price_box .total span{display:none; color:#F34921; font-size:.8rem; margin-left:.25rem;} .list .price_box .price{color:#bbb; font-size:.8rem; text-decoration: line-through;} .list .info_btn{flex-shrink: 0; width:7rem; padding:0 .5rem;} .list .info_btn button{display:block; width:100%; height: 1.5rem; line-height: 1.5rem; color: #FE3636; border: 1px solid #FE3636; border-radius: 0.5rem;} .list .info_btn button.gray{color:#888; border-color:#888; } .list .info_btn button:not(:first-child){margin-top:.2rem;} /* 주문 안내박스 */ .cationBox{margin-top:2rem; padding:2rem; background:#f7f7f7;} .cationBox h6{color:var(--black); margin-bottom:0.5rem; font-size:1rem;} .cationBox h6 i{color:var(--red); vertical-align:middle;} .cationBox ul li{position:relative; padding-left:0.5rem; font-size:0.8rem; } .cationBox ul li:before{content:""; position:absolute; left:0px; top:0.5em; display: inline-block; width: 0.15rem; height: 0.15rem; background-color: #767676; vertical-align: top;} .cationBox ul li:not(:first-child){margin-top:0.25rem;} /* 주문 결과 */ .pay_result{ width: 17rem; margin-left: 3rem; margin-top: 2rem; flex: 0 0 auto; border: 1px solid #ddd; background: #fff; border-top: 1px solid #191919; box-shadow: 0 10px 30px 0 rgb(0 0 0 / 5%); padding: 1rem;} .pay_result .res_tit{ padding-bottom:.5rem; margin-bottom:1rem; } .pay_result .res_tit h3{font-size:1.2rem; font-weight:600; color:#191919; } .pay_result .amount_box{padding-bottom:.5rem; margin-bottom:1rem; border-bottom:1px solid #ddd;} .pay_result .amount_box li{ margin-top:.5rem; display: flex; justify-content: space-between;} .pay_result .amount_box li span{font-weight:600; color:#333;} .pay_result .amount_box li.discLi{position: relative; padding-left:.5rem; color:#888;} .pay_result .amount_box li.discLi:before{content:'';position:absolute; left:0px; top:.25rem; width:.3rem; height:.3rem; border-left:1px solid #bbb; border-bottom:1px solid #bbb; } .pay_result .amount_box li.discLi span{color:#888;} .pay_result .tatal_tox{margin-bottom:1.5rem;} .pay_result .tatal_tox > div{display: flex; justify-content: space-between; font-weight:600; align-items: center;} .pay_result .tatal_tox span.tatal_num{font-size:1.4rem; color:#191919;} .pay_result .tatal_tox div.point{color:#888; margin-top:.5rem; font-weight:normal;} .pay_result .btn_box{text-align:center;} .pay_result .btn_box a{display:block; width:100%; margin:0; height:2.5rem; line-height:2.5rem; text-align:center;} .pay_result .btn_box.flex{display:flex; gap:0.25rem;} .pay_result.fix{position: fixed; top: 6rem; left: 50%; margin-left:15.5rem;} .pay_result.nofix{position: absolute; top: auto; bottom: 0; right: 0;} @media (max-width:1750px){ .pay_container{width:100%; max-width:unset;} } @media (max-width:1300px){ .pay_area.fix{padding-right:18rem;} .pay_result{margin-left:1rem;} .pay_result.fix{left:auto; right:1rem; margin-left:0;} .pay_result.nofix{right:0;} } @media (max-width:1030px){ .pay_wrap{display:block;} .pay_area.fix{padding-right:0;} .pay_result{width:100%; margin-left:0;} .pay_result.fix{position: relative; top: auto; right: auto;} .pay_result.nofix{position: relative; top: auto; right: auto; bottom:auto;} } @media (max-width:767px){ .mall_step{flex-direction: column;} .table_box > li{flex-direction: column} .table_box li .th{width:100%;} .table_box li .td input, .table_box li .td select{width:100%; height:2.5rem;} .table_box li .add_box .zCode a{height:2.5rem; line-height:2.4rem;} .table_box li .flex_box.phone input, .table_box li .flex_box.phone select{} .cationBox{padding:1rem;} .list{flex-wrap: wrap; padding-left:5rem; padding-top:0; margin-top:1rem;} .list .goods_box .proimg{position:absolute; left:0px; top:0px;} .list .goods_box .protext .pro_name{height:3.9em; line-height:1.3em; display: block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;word-wrap:break-word;} .list .goods_box .protext .pro_option{font-size:0.9rem;} .list .price_box{display:flex;align-items: center; width:100%; text-align:left; padding-left:1rem;} .list .price_box .price{margin-left:.5rem;} .list .price_box .total{font-size:1.2rem;} .list .count_box{display: flex; margin-top:.5rem; } .list .count_box input[type="button"]{height:2.26rem; line-height:2.26rem; margin-left:.5rem; margin-top:0;} .list .check_box{position:absolute; left:5px; top:5px; z-index:5;} .list .status_box{position:absolute; left:0px; top:5.5rem; width:100%; text-align:left; font-size:0.9rem;} } /* 주문완료 */ .order_complete{display:flex; justify-content: center; gap:0 4rem; border:5px solid #f7f7f7; margin-top:2rem; padding:2rem; } .order_complete .icons img{display:block; margin:2rem auto 0; width:7rem;} .order_complete h4{ color:var(--black); font-size:1.5rem; font-weight:700; margin-bottom:1rem; } .order_complete .order_name{display: flex; align-items: center; justify-content: center; gap:0.5rem; margin-bottom:1rem; background:#f7f7f7; border-radius:0.25rem; padding:1rem; font-size:1rem; font-weight:500; } .order_complete .order_name span{display:inline-block; background:#fff; padding:0 3rem; height:2.5rem; line-height:2.5rem; border-radius:0.15rem; margin-left:0.5rem; width:20rem; letter-spacing: 2px; text-align:center;} .order_complete .order_name a{display:block; height:2.5rem; line-height:2.5rem; padding: 0 1rem; background: var(--main); color: #fff; font-size: 0.8rem;} .order_complete .inner_txt{display: inline-block; width: 31rem;} .order_complete .inner_txt li{position:relative; padding-left:0.5rem; font-size:0.8rem; text-align:left; } .order_complete .inner_txt li:before{content:""; position:absolute; left:0px; top:0.5em; display: inline-block; width: 0.15rem; height: 0.15rem; background-color: #767676; vertical-align: top;} .order_complete .inner_txt li:not(:first-child){margin-top:0.25rem;} @media (max-width:1030px){ .order_complete{gap:0 2rem;} .order_complete .order_name span{padding:0 1rem; width:auto;} } @media (max-width:767px){ .order_complete{flex-direction: column; padding:1rem;} .order_complete .icons{margin-bottom:1rem;} .order_complete h4{text-align:center; margin-bottom:2rem; font-size:1.2rem;} .order_complete .order_name{flex-direction: column; align-items: flex-start; } .order_complete .order_name p{width:100%; display:flex; align-items: center;} .order_complete .order_name span{letter-spacing: 0; flex:1} .order_complete .order_name a{margin:0 auto;} .order_complete .inner_txt{display:block; width:100%;} } /*************************************************** ■ 마이쇼핑 페이지 ****************************************************/ #wrap #container.myLayout{ background:#f7f7f7; padding-bottom:0;} #wrap #container.myLayout .inner{display:flex; width: 80rem; margin: 0 auto; padding-top:3rem;} #wrap #container.myLayout #section2 .content_body{width:100%;} .myLayout #sepration2{width:12rem; flex-shrink: 0;} .myLayout #sepration2 .leftMenu{} .myLayout #sepration2 .leftMenu h2{color:var(--black); font-size:1.5rem; padding:0 0.5rem 0.75rem;} .myLayout #sepration2 .leftMenu h4{position:relative; padding:0.4rem 0.5rem; font-size:0.75rem; color:#aaa; } .myLayout #sepration2 .leftMenu h4:not(:first-child){margin-top:2.25rem;} .myLayout #sepration2 .leftMenu h4 i{display:none;} .myLayout #sepration2 .leftMenu ul li{ font-size:0.8rem;} .myLayout #sepration2 .leftMenu ul li.on a{color:var(--main); font-weight:700;padding:0.75rem 0.5rem; background:#fff; border-top-left-radius:0.75rem; border-bottom-left-radius:0.75rem; box-shadow: 0 0 5px rgba(0,0,0,0.06);} .myLayout #sepration2 .leftMenu ul li.on + li a{padding-top:0.5rem;} .myLayout #sepration2 .leftMenu ul li a{display:block; padding:5px 0.5rem; color:#333; font-weight:500;} .myLayout #sepration2 .cartBox{margin-top:0.5rem; border:1px solid #ddd; padding:1.5rem 1rem;} .myLayout #sepration2 .cartBox i{color:#0050CD; margin-left:3rem;} .myLayout #sepration2 .lm_bg{display:none;} /*레프트메뉴 쪽으로 이동*/ .myLayout #sepration2 .total{padding:0; padding-right: 2.5rem; margin-top:2.25rem;} .myLayout #sepration2 .total li{float:none; width:100%; margin-left:0;} .myLayout #sepration2 .total li div{background:var(--main); width:100%; height:auto; padding:0.5rem; text-align:left;} .myLayout #sepration2 .total li h3{position:relative; margin-bottom:0.25rem; color:#fff;} .myLayout #sepration2 .total li h3 a{position:absolute; right:0px; top:0.25rem; font-size:0.7rem;} .myLayout #sepration2 .total li div p.num{background:#fff; color:#111; border-radius:0.25rem; padding:0.25rem; text-align:right; font-size:0.7rem;} .myLayout #sepration2 .total li.t02 div{border-top-left-radius:0.25rem; border-top-right-radius:0.25rem; } .myLayout #sepration2 .total li.t03 div{border-bottom-left-radius:0.25rem; border-bottom-right-radius:0.25rem; border-top:1px dashed rgba(255,255,255,0.2); } .myLayout #section2{ width:100%; position:relative; background:#fff; padding: 2rem 2rem 6rem; padding-right:0; border-top-left-radius: 1rem; } .myLayout #section2:before{content:""; position:absolute; right:-100vw; top:0px; width:100vw; height:100%; background: #fff;} @media (max-width:1700px){ #wrap #container.myLayout .inner{width:100%; } .myLayout #sepration2{padding-left:1rem;} #wrap #container.myLayout #section2 .content_body{padding:0 1rem 0 0;} } @media (max-width:1400px){ .myLayout #sepration2{width:10rem;} .myLayout #sepration2 .total{padding-right:1rem;} .myLayout #section2{padding:2rem 1rem 6rem;} #wrap #container.myLayout #section2 .content_body{padding:0;} } @media (max-width:767px){ #wrap #container.myLayout .inner{display:block; padding-top:0;} .myLayout #sepration2{width:100%; padding:0; margin:0 !important;} .myLayout #sepration2 .leftMenu, .myLayout #sepration2 .leftMenu2{display:none;} .myLayout #sepration2 .lm_bg{display:block;} .myLayout #section2{border-radius:0;} .tab_view{display:block; cursor:pointer;background:var(--main); font-size:1.05rem; color:#fff; padding-left:1rem; font-weight:normal; position:relative; text-align: left;height:3.5rem;line-height:3.5rem;} .tab_view i{position:absolute; top:50%; right:1rem; margin-top:-9px; display:block; } .tab_view.on{cursor:pointer; } .tab_view.on i{transform:rotateX(180deg);} .lm_bg .left_menu_mob {position:relative;box-sizing:border-box; height:0; width:100%;} .lm_bg .left_menu_mob ul{display:none; z-index:30;position:absolute;width:100%;left:0; margin:0 auto; line-height:0; background:#fff; box-shadow:3px 2px 15px 1px rgb(0 0 0 / 15%);} .lm_bg .left_menu_mob ul:after{display:none;} .lm_bg .left_menu_mob ul li {width:100% !important; border-top:1px solid #EAECF1; height:3rem; line-height:3rem; margin-left:0; vertical-align:middle; box-sizing:border-box; text-align:left;padding:1rem; } .lm_bg .left_menu_mob ul li a {display:block; line-height: 1.0; height: auto; font-weight:500; font-size:1rem; color:#888;text-transform:capitalize;} .lm_bg .left_menu_mob ul li a:before{display:none;} .lm_bg .left_menu_mob ul li strong{ font-weight:600;} .lm_bg .left_menu_mob ul li.on a:before{display:none;} .lm_bg .left_menu_mob ul li.on a{background:none; color:var(--main); font-weight:600;} .lm_bg .left_menu_mob ul li.on a:after{display:none;} } /* 타이틀 */ .mall_title{position:relative;} .mall_title h3{font-size:1.7rem; font-weight:700; color:var(--black); margin-bottom:1rem;} .txt01{border:1px solid #ddd; border-top-color:#000; padding:1.5rem; text-align:center; font-size:1rem; margin-bottom:2rem; } .txt01 b{color:var(--sub);} /* 탭메뉴 */ .tab_menu{margin-bottom:2rem;} .tab_menu ul{position:relative; display:flex; width:100%;} .tab_menu ul li{flex:1; } .tab_menu ul li a{display:block; width:100%; height:3rem; line-height:3rem; text-align:center; font-size:1rem; border:1px solid #e0e0e0; font-weight:500; color:#777; } .tab_menu ul li:not(:first-child) a{border-left-color:transparent} .tab_menu ul li:first-child a{border-radius: 0.25rem 0 0 0.25rem;} .tab_menu ul li:last-child a{border-radius: 0 0.25rem 0.25rem 0;} .tab_menu ul li.selected a{color:var(--main); border-color:var(--main); font-weight:700;} /* 검색필터 */ .search-filter-wrap{margin:1rem 0 1.75rem; } .search-filter-wrap .filter-wrap{display:flex; justify-content: space-between; gap:0 1rem; font-size:0.8rem;} .search-filter-wrap .filter-group{display:flex;} .search-filter-wrap .month-box{display:flex; gap:0 0.5rem;} .search-filter-wrap .month-box li a{display:block; height:2rem; line-height:2rem; width:4.5rem; text-align:center; border:1px solid #e0e0e0; color:#555; } .search-filter-wrap .month-box li.on a{color:var(--main); border-color:var(--main); font-weight:700;} .search-filter-wrap .date-box{display:flex; align-items: center; gap: 0 0.2rem;} .search-filter-wrap .date-box input.hasDatepicker{height:2rem; background:url('/images/default/mall/icon_date.svg')no-repeat right 0.5rem top 50%; background-size:0.9rem 0.9rem;} .search-filter-wrap .btn_search{height:2rem; line-height:2rem; width:4.5rem; text-align:center; background:var(--main); color:#fff; font-size:0.8rem; margin-left:0.5rem;} .search-filter-wrap .btn_search_reset{height:2rem; line-height:2rem; width:4.5rem; text-align:center; background:var(--black); color:#fff; font-size:0.8rem; margin-left:0.25rem;} .search-filter-wrap .search-box{display:flex; gap:0 0.5rem;} .search-filter-wrap .search-box input{height:2rem;} @media (max-width:1400px){ .search-filter-wrap .month-box li a{width:3rem;} .search-filter-wrap .btn_search{width:3rem;} } @media (max-width:767px){ .search-filter-wrap .filter-wrap{flex-direction: column; gap:0.5rem;} .search-filter-wrap .month-box{width:100%;} .search-filter-wrap .month-box li{flex:1; } .search-filter-wrap .month-box li a{width:auto;} .search-filter-wrap .date-box, .search-filter-wrap .search-box{flex:1;} .search-filter-wrap .btn_search{font-size:0.9rem;} } /* 인포박스 */ .info-box{background:#F7F7F7; border-radius:0.25rem; padding:1rem; margin-top:2rem;} .info-box h4{font-size:1rem; margin-bottom:0.5rem; color:var(--black)} .info-box ul li{position:relative; padding-left:0.5rem; font-size:0.8rem; } .info-box ul li:before{content:""; position:absolute; left:0px; top:0.5em; display: inline-block; width: 0.15rem; height: 0.15rem; background-color: #767676; vertical-align: top;} .info-box ul li:not(:first-child){margin-top:0.25rem;} @media (max-width:767px){ .info-box ul li{font-size:0.9rem;} } /* 상품수 */ .top_area{margin-bottom:1rem; display:flex; justify-content: space-between; align-items: center; font-size:0.9rem;} .top_area p{color:var(--black); font-weight:500;} .top_area p b{color:var(--main);} .top_area p .btn_sel_del{position: relative; padding-left: 0.5rem; color: var(--black);} .top_area p .btn_sel_del:before{content: ""; position: absolute; left: 0px; top: 0.2em; width: 1px; height: 1em; background: #e0e0e0;} @media (max-width:767px){ .top_area{font-size:1rem;} } /* 아이콘있는 버튼*/ .ibtn{display:inline-flex; align-items: center; height:1.75rem; padding:0 0.5rem; font-size:0.75rem; border-radius:0.2rem; color:#fff; cursor:pointer;} .ibtn:has(i){padding-right:0;} .ibtn i{display:inline-block; width:1.6rem; line-height:1.75rem; background:rgba(255,255,255,0.2); text-align:center; margin-left:0.5rem;} .ibtn.green{background:var(--main);} .ibtn.red{background:var(--red);} .ibtn.blue{background:var(--blue);} .ibtn.sky{background:var(--sky);} /* 버튼*/ .sbtn { display: inline-block; font-size: 0.7rem; line-height: 1; font-weight: bold; padding:0.2rem 0.5rem; border-radius: 0.2rem;} .sbtn.dark { color: #fff; background: #666; border: 1px solid #666; } .sbtn.white { color: #626770; background: #fff; border: 1px solid #363c47; box-shadow: 0 1px 1px #d8d8d8; } .sbtn.grey { color: #797877; background: #e7e5e5; border: 1px solid #a0a0a0; } .sbtn.red { color: #fff; background: #ff414d; border: 1px solid #ff414d; } .sbtn.yellow { color: #fff; background: #f7b500; border: 1px solid #f7b500; } @media (max-width:767px){ .ibtn{font-size: 0.80rem;} .sbtn{font-size: 0.80rem;} } /*************************************************** ■ 주문내역 ****************************************************/ /*주문내역 조회*/ .order-list-wrap{ border-top:1px solid #333;} .order-list{border-bottom:1px solid #e0e0e0;} .order-list .ordbtn{display:inline-block; background:#fff; color:var(--main); border:1px solid var(--main); line-height:1.5rem; width:5rem; text-align:center; font-size:0.75rem; font-weight:500;} .order-list .ordbtn + .ordbtn{margin-top:0.2rem;} .order-list .package{display:flex; align-items: center; background:#f7f7f7; border-bottom:1px solid #e0e0e0; padding:0.75rem 1rem;} .order-list .package p{flex:1;} .order-list .package .count{margin-left:0.5rem;} .order-list .package .count b{margin-left:0.4rem;} .order-list .order-value{margin:0;} .order-list .product{display:flex; align-items: center; padding:1rem; font-size:0.8rem;} .order-list .product > a{display:flex; align-items: center; gap:0.5rem; flex:1;} .order-list .product > .product_a{display:flex; align-items: center; gap:0.5rem; flex:1;} .order-list .product .thumb{flex-shrink: 0; position:relative; display:block; width:5rem; height:5rem; overflow:hidden;} .order-list .product .thumb .check{position:absolute; left:0; top:0;} .order-list .product .thumb .check input[type="checkbox"]{ border-radius:0;} .order-list .product .thumb img{width:100%; height:100%;} .order-list .product .txt{display:block;} .order-list .product .txt .title{display:block; font-size:1rem; color:var(--black); font-weight:600;} .order-list .product .txt .code{display:block; color:var(--main);} .order-list .product .txt .count{display:block;} .order-list .product .txt .date{display:block;} .order-list .product .txt .price{display:none; color:var(--main); font-size:1rem; text-align:left; margin-top:0.5rem;} .order-list .product .price{width:10rem; text-align:center; color:var(--main); font-size:1rem;} .order-list .product .btn-column{text-align:center;} .order-list .product .btn-column .ordbtn{display:block;} .order-list-wrap .no-data{padding:3rem 0; text-align:center;} .order-list-wrap .no-data span{display:block; width:4rem; height:4rem; border:1px solid #ddd; line-height:4rem; text-align:center; font-size:1.4rem; font-weight:700; color:var(--main); border-radius:50%; margin:0 auto 0.5rem; font-family: 'GongGothic';} .ui-spinner{position:relative; display: flex; max-width: 6rem; margin:0; padding:0 1.8rem; border-radius: 1rem; border: 1px solid #ddd; overflow: hidden; background-color: #fff; margin-top: 0.5rem; } .ui-spinner input[type="text"]{height:2rem; margin:0; padding:0 0.5rem; border:0; text-align:center; } .ui-spinner .ui-spinner-button{position:absolute; top: 0; display:block; width:1.5rem; height:2rem; background:#fff; border:none; cursor:pointer;} .ui-spinner .ui-spinner-button .ui-icon{display:none;} .ui-spinner .ui-spinner-button .ui-button-text{position:relative; line-height:2rem; text-align:center;height:2rem;} .ui-spinner .ui-spinner-button .ui-button-text:before{content:""; position: absolute; left: 0px; top: 0px; width: 100%; height: 2rem; line-height: 2rem; font-size: 1rem; color: #a5a5a5; text-align: center; font-family: 'xeicon' !important;} .ui-spinner .ui-spinner-up{right:0.2rem; } .ui-spinner .ui-spinner-up .ui-button-text:before{content:"\e913" ;} .ui-spinner .ui-spinner-down{left:0.2rem} .ui-spinner .ui-spinner-down .ui-button-text:before{content: "\e91a";} @media (max-width:767px){ .order-list .package{padding:0.75rem;} .order-list .package span{display:block;} .order-list .package .count{margin-left:0;} .order-list .package .btn .ordbtn{ width:4rem;} .order-list .product{flex-wrap:wrap; padding:1rem 0;} .order-list .product .txt .price{display:block;} .order-list .product .price{display:none; } .order-list .product .btn-column{width:100%; margin-top:0.5rem; display:flex; gap:0.25rem; justify-content: flex-end; padding-left:5.5rem;} .order-list .ordbtn{font-size:0.9rem; line-height:2.2rem; width:calc((100% - 0.25rem * 1) / 2);} .order-list .ordbtn + .ordbtn{margin-top:0;} } @media (max-width:450px){ .order-list .product .btn-column {padding-left:0;} } /* 주문내역 상세 */ .order-value{border-top: 1px solid #333; display: flex; align-items: center; background: #f7f7f7; border-bottom: 1px solid #e0e0e0; padding: 0.75rem 1rem; margin-bottom:2rem;} .order-value p{flex:1;} .order-value p b{font-weight:500; color:var(--black); margin-right:0.2rem;} .order-value p span:not(:first-child){margin-left:0.75rem; padding-left:0.75rem; border-left:1px solid #e0e0e0;} .order-value .ordbtn{display:inline-block; background:#fff; color:var(--main); border:1px solid var(--main); line-height:1.5rem; width:5rem; text-align:center; font-size:0.75rem; font-weight:500; cursor:pointer;} .order_area{} .order_area h4{border-bottom: 1px solid #191919; font-size: 1.1rem; color: #191919; padding-bottom: .5rem; font-weight: 700; } .order_area h4:not(:nth-of-type(1)){margin-top:3rem;} .order_area h5{font-size:1rem; margin-bottom:0.5rem; color:#777; margin-top:1.5rem; } .order_area .box{margin-top:1rem;} .total-box{background:#f7f7f7; text-align:right; padding:1rem; border-bottom:1px solid #e0e0e0; } @media (max-width:767px){ .order-value .ordbtn{font-size:0.9rem; line-height:2.2rem; } .order-value p span:not(:first-child){display:block; margin-left: 0; padding-left: 0; border-left: none;} } /* 상태정보 */ .mall_title.flex{display:flex; justify-content: space-between; align-items: center;} .state_box .box{position:relative; display:inline-block; padding-left:1.4rem; margin-left:1.5rem;} .state_box .box:before{content:""; position:absolute; left:0px; top:0.2em; width:1rem; height:1rem;} .state_box .box_1:before{background:#ffce09} .state_box .box_2:before{background:#0ff} .state_box .box_3:before{background:#6df189} .state_box .box_4:before{background:#f2bffb} .info_state_box{background:#f7f7f7; padding:1.5rem; margin-bottom:2rem;} .info_state_box p b{font-weight:500;} .info_state_box p{position:relative; padding-left:1.4rem; } .info_state_box p:not(:first-child){margin-top:0.25rem;} .info_state_box p:before{content:""; position:absolute; left:0px; top:0.2em; width:1rem; height:1rem;} .info_state_box p.box_1:before{background:#ffce09} .info_state_box p.box_2:before{background:#0ff} .info_state_box p.box_3:before{background:#6df189} .info_state_box p.box_4:before{background:#f2bffb} @media (max-width:767px){ .mall_title.flex{justify-content: flex-start; align-items: flex-start; flex-direction: column;} .state_box{margin-bottom:0.25rem;} .state_box .box:first-child{margin-left:0;} .info_state_box{padding:1rem;} } /* 레프트 테이블 */ .left_tb {border-collapse: collapse; width: 100%; table-layout: fixed; border-top:1px solid #333;} .left_tb th {text-align: left; background-color: #f7f7f7; letter-spacing:0em; font-weight:bold; color:#474747; padding:0.75rem 1rem; border-bottom: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; } .left_tb td { border-bottom: 1px solid #e0e0e0; padding: 0.5rem 0.75rem; border-top: 1px solid #e0e0e0; padding:0.75rem 1rem; } .left_tb td input[type="text"], .left_tb td input[type="password"]{ line-height: 1; height: 40px; padding: 3px 0 5px; vertical-align:middle; border: 1px solid #e0e0e0; border-radius: 0 !important; -webkit-appearance: none !important; background: #fff; color: #4d4d4d; text-indent: 5px !important; } .left_tb td input[type="file"]{height:40px;} .left_tb th.t_row, table.left_tb td.t_row{border-top: 3px solid #e0e0e0;} .left_tb select{padding: 0.25rem 0.5rem; border: 1px solid #e0e0e0; } .left_tb textarea{width:100%; padding:0.5rem; border: 1px solid #e0e0e0; } .left_tb td label{margin-left:0.75rem;} .left_tb td label:first-child{margin-left:0;} .left_tb td .addflex{display:flex; gap:0.25rem; margin-bottom:0.25rem; } .left_tb td .addflex input{width:8rem;} .left_tb td .addflex a{background:#000; color:#fff; line-height:40px; height:40px; padding:0 0.5rem; font-size:0.8rem;} @media (max-width:767px){ .left_tb{table-layout: auto;} .left_tb th, .left_tb td{ padding:0.75rem 0.5rem; font-size:0.9rem;} } /* 주문취소 */ .cancel_div{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(27,28,28,0.76); z-index:103; } .cancel_div .layerPop{display:block;} .cancel_div .insert_cancel{margin-top:1rem; width:15rem; height:3rem; background:var(--main); color:#fff; border-radius:0.2rem; font-size:0.9rem;} .cancel_div .popbody{text-align: center;} /* 반품 */ .btn_return{display:inline-block; background:#fff; color:var(--red); border:1px solid var(--red); line-height:1.5rem; width:5rem; text-align:center; font-size:0.75rem; font-weight:500; cursor:pointer} .return_zone{position:relative;} .return_div{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(27,28,28,0.76); z-index:103; } .return_div .layerPop{display:block;} .return_div .insert_return{margin-top:1rem; width:15rem; height:3rem; background:var(--main); color:#fff; border-radius:0.2rem; font-size:0.9rem;} @media (max-width:767px){ .btn_return{font-size:0.9rem; } } /* 팁 박스구성 */ .tip{position: relative;} .tip .tip_open{ color:#888; cursor:pointer;} .tip .tip_open i{vertical-align:middle !important; font-weight:500;} .tip .tip_box{display:none; position:absolute; left:1.7rem; top:0; width:15rem; padding:.75rem; background:#fff; border:1px solid #eee; z-index:2;} .tip .tip_box h5{margin-bottom:.5rem;} .tip .tip_box p{font-size:.75rem; color:#555} .tip .tip_box .dot_indent p{position: relative; padding-left:.4rem; } .tip .tip_box .dot_indent p:before{content: ''; position: absolute; top: .4rem; left: 0; width: .15rem; height: .15rem; background: #bbb; border-radius: 100%;} /*************************************************** ■ 레이어팝업 ****************************************************/ .layerPop {display:none; position: fixed; top: 50%; left: 50%; width: 30rem; transform: translate(-50%, -50%); background: #fff; z-index:110;} .layerPop .pophead{height:3rem; line-height:3rem; padding:0 1rem; text-align:left; border-bottom: 1px solid #ddd; } .layerPop .pophead h4{color:var(--black); font-size:1.2rem; font-weight:600; border:none; padding:0; margin:0; } .layerPop .pophead .btn_close{position:absolute; right:1rem; top:-1rem; display:block; width:2.5rem; height:2.5rem; line-height:2.5rem; text-align:center; background:var(--black); color:#fff; border-radius:50%; cursor:pointer;} .layerPop .popbody{padding:1rem;} .layerPop .popbody.scroll{max-height:30rem; overflow-y: auto;} .layerPop .popbody .left_tb td p:not(:first-child){margin-top:0.4rem;} .layerPop .popbody .left_tb td label{margin-left:0;} .layerPop .popbody h4{color:#888; font-size:1rem; margin-bottom:0.25rem;} .layerPop .popbody h4:not(:nth-of-type(1)){margin-top:1.5rem;} .layerPop .popbtn{display:flex;} .layerPop .popbtn .pop_cancel, .layerPop .popbtn .pop_confirm{height:3.5rem; line-height:3.5rem; font-size:1rem; font-weight:500; text-align:center; cursor:pointer;} .layerPop .popbtn .pop_cancel{width:35%; background:#d9d9d9; color:#777;} .layerPop .popbtn .pop_confirm{width:65%; background:var(--main); color:#fff;} @media (max-width:767px){ .layerPop {width:90vw;} } /*마이쇼핑 옵셥팝업창*/ .order_popup h5{font-size:18px; margin-bottom:10px;} .order_popup .optionZone{display:none;} .order_popup .optionZone select{width:100%; height:35px; margin-bottom:10px;} .order_popup .optionZone .orderOptionList{ background:#F9F9F9; border:1px solid #E9E9E9; margin-bottom:20px;} .order_popup .optionZone .orderOptionList li{margin:10px 0; padding:0 10px; position:relative; padding-right:20px;} .order_popup .optionZone .orderOptionList li span{margin-right:10px;} .order_popup .optionZone .orderOptionList li span input[type="text"]{border:none !important; text-align:center !important; } .order_popup .optionZone .orderOptionList li span.optionDel{position:absolute; top:50%; right:5px; transform:translateY(-50%); margin:0; cursor:pointer;} .order_popup table{width:100%;} .order_popup table td{height:40px;} .order_popup table tr.optionZone{} .order_popup div.order_button{text-align:center;} .order_popup div.order_button span.order_save{display:inline-block; background:#0050CD; cursor:pointer; color:#fff; font-size:20px; height:55px; line-height:55px; width:180px;} /*************************************************** ■ 쿠폰 ****************************************************/ .cpn_box{display:flex; gap:1rem; flex-wrap:wrap;} .cpn_box .box{position:relative; width:calc((100% - 1rem * 1) / 2); border:1px solid #ddd; border-radius:.5rem; padding:1rem 2rem; } .cpn_box .box:after, .cpn_box .box:before{content:''; position:absolute; right:-1px; top:50%; margin-top:-1rem; width:1rem; height:2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40' fill='none'%3E%3Cpath d='M20 40V0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z' fill='white'/%3E%3Cpath d='M0 20C0 9.28955 8.41895 0.545654 19 0.0246582C19.3313 0.00830078 19.6648 0 20 0V1L19.1016 1.02588H19C8.97144 1.5459 1 9.84204 1 20C1 30.158 8.97144 38.4541 19 38.9741H19.1367L20 39V40C19.6648 40 19.3313 39.9917 19 39.9753C8.41895 39.4543 0 30.7104 0 20Z' fill='%23DDDDDD'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:0 0; background-size:100%; } .cpn_box .box:after{left:-1px; transform: scaleX(-1);} .cpn_box .box h2{font-size:2rem; color:var(--main); font-weight:700; } .cpn_box .box h4{font-size:1.1rem; color:#000; margin:.25rem 0 1rem;} .cpn_box .box ul li{position:relative; color:#888; padding-left:.5rem; margin-top:.25rem;} .cpn_box .box ul li:before{content:''; position:absolute; left:0px; top:50%; margin-top:-0.125rem; width:.25rem; height:.25rem; background:#bbb; border-radius:50%; } .cpn_box .box .state{ position:absolute; right:1rem; top:1rem; display:inline-block; background:#f0f2f2; border-radius:1rem; padding:.25rem .5rem; font-size:.8rem; font-weight:500;} .cpn_box .no-data{width:100%; padding:3rem 0; text-align:center;} .cpn_box .no-data span{display:block; width:4rem; height:4rem; border:1px solid #ddd; line-height:4rem; text-align:center; font-size:1.4rem; font-weight:700; color:var(--main); border-radius:50%; margin:0 auto 0.5rem; font-family: 'GongGothic';} @media (max-width:767px){ .cpn_box{} .cpn_box .box{width:100%;} } /*************************************************** ■ 배송지리스트 ****************************************************/ .left-btn{display: flex; justify-content: space-between; align-items: center; border:1px solid #ddd; border-top-color:#000; padding:1.5rem; margin-bottom:2rem;} .left-btn p{font-size:1rem; font-weight:600; color:var(--black);} .left-btn a{display:block; height:2.25rem; line-height:2.25rem; padding:0 1rem; background:#fff; color:var(--main); border:1px solid var(--main); white-space: nowrap; transition: background 0.2s ease-out 0s;} .left-btn a:hover{background:var(--main); color:#fff;} .shipping_box{} .shipping_box ul{display: flex; flex-wrap: wrap; gap:1rem;} .shipping_box ul li{width:calc((100% - 1rem * 1) / 2); border:1px solid #ddd; padding:1rem; } .shipping_box ul li p{display:flex; } .shipping_box ul li p:not(:first-child){margin-top:0.4rem; } .shipping_box ul li p b{width:5rem; flex-shrink: 0; font-weight:500; color:var(--black);} .shipping_box ul li p span{flex:1; color:#555;} .shipping_box ul li p.name{border-bottom:1px solid #ddd; padding-bottom:0.5rem; align-items: center} .shipping_box ul li p.name .msName{display:flex; justify-content: space-between; align-items: center} .shipping_box ul li p.name .msName .btn {flex-shrink: 0;} .shipping_box ul li p.name .msName .btn a{display:inline-block; height:1.75rem; line-height:1.75rem; padding:0 0.5rem; font-size:0.8rem; vertical-align: middle;} .shipping_box ul li p.name .msName .btn a.edit{background:var(--main); color:#fff;} .shipping_box ul li p.name .msName .btn a.delete{color:var(--red); border:1px solid var(--red);} .shipping_box ul li.no_data{border:none; border-top:1px solid #000; width:100%; padding:3rem 0; text-align:center;} .shipping_box ul li.no_data span{display:block; width:4rem; height:4rem; border:1px solid #ddd; line-height:4rem; text-align:center; font-size:1.4rem; font-weight:700; color:var(--main); border-radius:50%; margin:0 auto 0.5rem; font-family: 'GongGothic';} .shipping_form{border-top:1px solid #000;} .shipping_form .table_box{display: flex; flex-wrap: wrap;} .shipping_form .table_box > li{flex:1 0 50%; border-bottom:1px solid #ddd; padding:1rem;} .shipping_form .table_box > li:not(:first-child){margin:0;} .shipping_form .table_box > li input{width:100%;} @media (max-width:1030px){ .shipping_box ul li{width:100%;} .shipping_form .table_box > li{flex:1 0 100%; padding:1rem 0;} } @media (max-width:767px){ .left-btn{padding:1rem; gap:1rem;} .left-btn a{padding:0 0.5rem} } /*************************************************** ■ 찜한 상품 ****************************************************/ .search-box-group{display: flex; justify-content: center; align-items: center; gap: 0.25rem; border: 1px solid #ddd; border-top-color: #000; padding: 1.5rem; margin-bottom: 2rem;} .search-box-group h4{color:var(--black); margin-right:1.5rem;} .search-box-group input{height:2rem; line-height: 2rem;} .search-box-group .btn_search{height:2rem; line-height: 2rem; width: 4.5rem; text-align: center; background: var(--main); color: #fff; font-size: 0.8rem; font-weight:500;} .search-box-group .btn_search_reset{height:2rem; line-height: 2rem; width: 4.5rem; text-align: center; background: #fff; border:1px solid var(--main); color: var(--main); font-size: 0.8rem; font-weight:500;} .wish_wrap{display:flex; gap:0 2rem;} .wish_Box{width:15rem; padding:1rem; background:#f7f7f7; min-height: 20rem;} .wish_Box .wish_button{display:flex; gap:0.25rem; flex-wrap:wrap;} .wish_Box .wish_button select{width:100%;} .wish_Box .wish_button button{flex:1; height:2rem; line-height:2rem; background:var(--main); color:#fff; text-align:center; font-size:0.8rem;} .wish_Box .wish_button .btn_setting{flex:1; height:2rem; line-height:2rem; text-align:center; font-size:0.8rem; background: #ffc93c; color:#111; cursor:pointer} .wish_bookmark_list{margin-top:1rem;} .wish_bookmark_list h4{color:var(--black); padding-bottom:0.25rem; border-bottom:1px solid #ddd; } .wish_bookmark_list .wish_list{position:relative; } .wish_bookmark_list .wish_list li{position:relative; display:block; padding:0.2rem 0 0.2rem 2rem; font-size: 0.8rem; word-break: break-all;} .wish_bookmark_list .wish_list li:before{content:""; position:absolute; left:0.5rem; top:0; width:1px; height:100%; border-left:2px dotted #bbb;} .wish_bookmark_list .wish_list li:after{content:""; position:absolute; left:0.5rem; top:0.8em; width:1rem; height:1px; border-top:2px dotted #bbb;} .wish_bookmark_list .wish_list li:last-child:before{height:50%;} .wish_bookmark_list .wish_list li b{color:var(--main);} .wish_bookmark_list .wish_list li.on a{font-weight:600; color:var(--main);} .wish_product_list{flex:1;} .wish_product_list .order-list .product .price{width:6rem;} @media (max-width:1300px){ .wish_Box{width:12rem;} } @media (max-width:1030px){ .wish_wrap{display:block;} .wish_Box{width:100%; min-height:auto;} .wish_Box .wish_button select{width:auto; flex:1; height:2rem; line-height:2rem;} .wish_bookmark_list .wish_list ul{display:flex; flex-wrap:wrap; margin-top:0.5rem;} .wish_bookmark_list .wish_list li{width:25%;} .wish_bookmark_list .wish_list li:before{height:50%;} .wish_product_list{margin-top:2rem;} } @media (max-width:767px){ .search-box-group{padding:1rem;} .search-box-group h4{display:none;} .wish_bookmark_list .wish_list li{width:50%;} } /*************************************************** ■ 장바구니 ****************************************************/ .result_box{display: flex; justify-content: center; align-items: center; gap: 0.25rem; border: 1px solid #ddd; border-top-color: #000; padding: 1.5rem; margin-bottom: 2rem;} .result_box ul{display:flex; align-items: center; gap:2rem; font-size:1rem;} .result_box ul b{color:var(--black); margin-right:0.5rem;} .result_box ul span{display:inline-block; width:10rem; padding:0 0.5rem; height:2rem; line-height:2rem; border:1px solid #e0e0e0; background:#f7f7f7; text-align:right; color:var(--main); font-weight:600;} .cart_wrap{display:flex; gap:2rem;} .cart_wrap h3{color:var(--black); font-size:1.1rem; margin-bottom:0.5rem;} .buyTop{border-bottom:1px solid #000; display:flex; justify-content: space-between; align-items: center; padding-bottom:0.5rem; } .buyTop label{color:var(--black); font-weight:500;} .buyTop a.sd_btn{position:relative; padding-left:0.5rem; color:var(--black); font-weight:500; display: flex; float: right; gap:0.2rem;} .buyTop a.sd_btn:before{content:""; position:absolute; left:0px; top:0.2em; width:1px; height:1em; background:#e0e0e0;} .buyTop a.btn_confirm{display:inline-block; height:2rem; line-height:1.9rem; border:1px solid var(--main); background:var(--main); color:#fff; width:4rem; text-align:center; font-size:0.8rem;} .buyTop .btn a{display:inline-block; height:2rem; line-height:1.9rem; border:1px solid #e0e0e0; background:#fff; color:#555; width:3rem; text-align:center; font-size:0.8rem;} .buyTop .btn a.on{color:var(--main); border-color:var(--main);} .buyZone{width:40%; position:relative;} .buyZone_inner{width: 100%; max-height: 28.5rem; overflow: hidden; overflow-y: auto; } .buyZone_inner::-webkit-scrollbar {width:5px;height:3px;background-color:#eae9e9;} .buyZone_inner::-webkit-scrollbar-thumb {background-color:var(--black); -webkit-border-radius:3px;border-radius:3px;} .buyZone_inner > ul > li{border-bottom:1px solid #ddd; padding:0.75rem 0; padding-right:0.5rem; overflow:hidden;} .buyZone_inner > ul > li .buyImg{float:left; width:3.5rem; } .buyZone_inner > ul > li .buyImg img{width:3rem; height:3rem; } .buyZone_inner > ul > li .buyInfo{position:relative; float:left; width:calc(100% - 3.5rem); padding-right:3.5rem;} .buyZone_inner > ul > li .buyInfo .name{font-weight:600; color:var(--black); margin-bottom:0.25rem; } .buyZone_inner > ul > li .buyInfo .name span{white-space: nowrap; background:#f7f7f7; color:var(--main); font-size:0.7rem; padding:0.1rem 0.2rem;} .buyZone_inner > ul > li .buyInfo .dst{margin-top:3px;} .buyZone_inner > ul > li .buyInfo .dst span{background:#f7f7f7; padding:3px 5px; color:var(--black); font-size:14px;} .buyZone_inner > ul > li .buyInfo .dst em{margin-left:10px; color:#777; font-size:14px;} .buyZone_inner > ul > li .buyInfo .cost{color:var(--main); font-weight:600; margin-top: 0.5rem;} .buyZone_inner > ul > li .buyInfo .btn{position:absolute; right:0px; top:50%; transform:translateY(-50%); margin-top:0;} .buyZone_inner > ul > li .buyInfo .btn .bmod, .buyZone_inner > ul > li .buyInfo .btn .bdel{display:block; width:3rem; height:1.5rem; line-height:1.5rem; text-align:center; border:1px solid var(--main); color:var(--main); font-size:0.7rem;} .buyZone_inner > ul > li .buyInfo .btn .bdel{margin-top:0.2rem; } .buyZone_inner > ul > li.no_data{width:100%; padding:3rem 0; text-align:center;} .buyZone_inner > ul > li.no_data span{display:block; width:4rem; height:4rem; border:1px solid #ddd; line-height:4rem; text-align:center; font-size:1.4rem; font-weight:700; color:var(--main); border-radius:50%; margin:0 auto 0.5rem; font-family: 'GongGothic';} .buyZone div.buyZone_inner > ul > li .buyInfo a.buyCart { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); height: 53px; line-height: 1.3; font-size: 14px; padding: 9px 0; width: 60px; color: #888; text-align: center; border-radius: 10px; background: #f7f7f7; cursor: pointer } .option_list.list2{color:var(--main); font-size:0.8rem; } .option_list.list2 li{display:inline-block; margin-right:0.25rem; border-right:1px solid #ddd; padding-right:0.25rem; } .option_list.list2 li:last-child{border-right:none;} .cartZone{flex:1;} .cartZone h3 .allCheck{position:absolute; right:220px; top:-10px; background:#fff; font-size:15px; width:100px; height:40px; line-height:40px; text-align:center; border:1px solid #000;} .cartZone h3 .sd_btn{position:absolute; right:110px; top:-10px; background:#fff; font-size:15px; width:100px; height:40px; line-height:40px; text-align:center; border:1px solid #000;} .cartZone .buyImg{position:relative;} .cartZone .buyImg input[type="checkbox"]{position:absolute; top:0px; left:0px; z-index:10;} .cartZone .buyImg .soldout{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/soldout.png?v=1') no-repeat center center; background-size:cover; z-index:9;} .cartZone .buyImg .proStop{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/default/content/proStop.png?v=1') no-repeat center center; background-size:cover; z-index:9;} .result_zone{display: flex; justify-content: space-between; align-items: center; background:#f7f7f7; border-bottom:1px solid #ddd; padding:0.75rem 1rem; } .result_zone .cost {display: flex; align-items: center;} .result_zone .btn {display: flex;align-items: center;} .result_zone .btn label{color:var(--black); font-weight:500;} .result_zone .btn .chks label { margin-bottom: 0.1rem;} .result_zone .btn a.sd_btn{position:relative; padding-left:0.5rem; color:var(--black); font-weight:500; display: flex; float: right; gap:0.2rem;} .result_zone .btn a.sd_btn:before{content:""; position:absolute; left:0px; top:0.2em; width:1px; height:1em; background:#e0e0e0;} .result_zone .cost .price_detail{font-size:1.1rem; color:var(--main); font-weight:600; } .result_zone .cost b{color:var(--black); font-weight:500;} @media (max-width:1300px){ .cart_wrap{display:block; } .buyZone{width:100%; margin-bottom:2rem;} } @media (max-width:767px){ .result_box{display:block; padding:1rem;} .result_box ul{flex-direction: column; align-items: flex-start; gap:0.5rem;} .result_box ul li{display:flex; align-items: center; width:100%;} .result_box ul b{display:block; width:6rem; flex-shrink;} .result_box ul span{width:auto; flex:1; height:2.4rem; line-height:2.4rem;} .buyZone_inner > ul > li .buyInfo .name{font-size:1rem;} .buyZone_inner > ul > li .buyInfo .name span{font-size:0.9rem;} .buyZone_inner > ul > li .buyInfo .btn .bmod, .buyZone_inner > ul > li .buyInfo .btn .bdel{font-size:0.9rem;} .result_zone .cost .price_detail{font-size:1.2rem;} } @media (max-width:567px){ .buyTop .date{font-size:0.9rem;} .buyZone_inner{max-height: 24.8rem;} .buyZone_inner > ul > li .buyInfo{padding-right:0;} .buyZone_inner > ul > li .buyInfo .cost{font-size:1rem;} .buyZone_inner > ul > li .buyInfo .btn{position:relative; right:auto; top:auto; transform: translateY(0); margin-top:0.5rem; display:flex; gap:0.5rem;} .buyZone_inner > ul > li .buyInfo .btn .bmod, .buyZone_inner > ul > li .buyInfo .btn .bdel{width:auto; flex:1; height:2.2rem; line-height:2.2rem;} .buyZone_inner > ul > li .buyInfo .btn .bdel{margin-top:0;} .result_zone{flex-direction: column; align-items: normal; gap:0.5rem;} .result_zone .cost{text-align:right; justify-content: flex-end;} } @media (max-width:340px){ .buyTop .date{font-size:0.80rem;} .buyTop .btn a{width:2.5rem; font-size:0.80rem;} } /*************************************************** ■ 테이블 ****************************************************/ table.tb_shop { clear:both; border-collapse:collapse; width:100%;table-layout: fixed; } table.tb_shop th, table.tb_shop td { box-sizing:border-box; } table.tb_shop td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; background: #fff; text-align:center; vertical-align: middle; padding: 1rem; font-size:0.8rem;} table.tb_shop th{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-top:1px solid #333; color: #333; background: #f7f7f7; font-weight:500; padding: 0.75rem 1rem; font-size:0.9rem;} table.tb_shop th:last-child, table.tb_shop td:last-child{border-right:none;} table.tb_shop td.t_left{text-align:left;} table.tb_shop td.t_right{text-align:right;} table.tb_shop td.title ul{} table.tb_shop td.title ul li{text-align:left; overflow:hidden;width:100%;} table.tb_shop td.title ul li.productImg{float:left; width:20%;} table.tb_shop td.title ul li.productImg img{width:300px; height:300px;} table.tb_shop td.title div.detailField ul{display:table;} table.tb_shop td.title div.detailField ul li{display:table-cell; width:80%; padding-left:10px;} table.tb_shop td.title div.detailField ul li.proimg{position:relative;} table.tb_shop td.title div.detailField ul li:first-child{width:70px;} table.tb_shop td.title div.detailField ul li.proname a{color:#333;} table.tb_shop td.title div.detailField ul li img{width:100%; height:auto; } table.tb_shop td.title div.detailField ul li .soldout{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/soldout.png?v=1') no-repeat center center; background-size:cover;} table.tb_shop td.title div.detailField ul li .proStop{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/proStop.png?v=1') no-repeat center center; background-size:cover;} table.tb_shop td.title div.detailField ul li .proStop2{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/proStop2.png?v=1') no-repeat center center; background-size:cover;} table.tb_shop td.title ul li.productOpt{width:100%;} table.tb_shop td.title ul li.productOpt div.optCon{margin-top:5px;} table.tb_shop td.title ul li.productOpt div.optCon h5{padding:5px;border:1px solid #ddd; font-weight:bold;} table.tb_shop td.title ul li.productOpt ul{background:#f8f8f8; padding:10px; position:relative;} table.tb_shop td.title ul li.productOpt ul li{float:none; font-weight:normal; line-height:18px;} table.tb_shop td.title ul li.productOpt ul li p{position:absolute; top:-23px; right:5px; font-weight:bold; color:#666;} table.tb_shop td.title ul li.productOpt ul li span{float:right; font-weight:bold; color:#666;} table.tb_shop td.title ul li.pro_tit a{color: #242424;} table.tb_shop td input[type="text"]{border:1px solid #ddd; height:20px; line-height:20px; text-indent:10px;} table.tb_shop td input.datepicker{background: #fff url('/images/mall/calendar.gif') no-repeat right 50%; width:140px;} .btn_delete{font-size:13px; border:1px solid #666; padding:5px; color:#666;} @media (max-width:1440px){ table.tb_shop th {padding: 0.75rem 0.5rem; font-size: 0.8rem;} table.tb_shop td {padding: 0.75rem 0.5rem;} } @media (max-width:1030px){ .table_scroll {overflow-x:scroll; width:100%;} .myBuy_table {min-width:60rem;} table.myBuy_table th {font-size:1rem} table.myBuy_table td {font-size:1rem;} } /* 관리자 테이블 */ .tblDataList { width:100%; border-collapse:collapse; font-size:0.8rem; border-top:1px solid #333;} .tblDataList th { padding:0.7rem 0.5rem; background:#F8F8F8; border-bottom:1px solid #ddd; } .tblDataList td { padding:0.4rem 0.5rem; text-align:center; border-bottom:1px solid #ddd; border-right:1px solid #e0e0e0;} .tblDataList td:last-child{border-right:none;} .tblDataList td img { vertical-align:middle; } .tblDataList td.left { text-align:left; } .tblDataList td.right { text-align:right; } .tblDataList td.nowrap { white-space:nowrap; } .tblDataList td p.option{font-size:14px; color:#888; font-weight:400;} .tblDataList td a{color:var(--main);} .tblDataList td .no-data{padding:3rem 0; text-align:center;} .tblDataList td .no-data span{display:block; width:4rem; height:4rem; border:1px solid #ddd; line-height:4rem; text-align:center; font-size:1.4rem; font-weight:700; color:var(--main); border-radius:50%; margin:0 auto 0.5rem; font-family: 'GongGothic';} /* 폼 테이블 */ table.tblForm { width:100%; border-collapse:collapse; } table.tblForm th, table.tblForm td { border:1px solid #dbdbdb; } table.tblForm th { padding:5px; background:#f6f6f6; color:#333; } table.tblForm td { padding:4px 5px; color:#333; } table.tblForm td input, table.tblForm td select, table.tblForm td textarea { margin-top:2px\0IE8+9; margin-bottom:2px\0IE8+9; }/*ie*/ table.tblForm td a img { margin-top:-2px; vertical-align:middle; } table.tblForm td textarea { width:99%; } table.tblForm td input[type="text"], table.tblForm td input[type="password"], table.tblForm td textarea { border:1px solid #cecece; -webkit-box-shadow:0 0 3px #e0e0e0; box-shadow:0 0 3px #e0e0e0; } table.tblForm td input[type="text"], table.tblForm td input[type="password"] { padding:2px\9; }/*ie*/ table.tblForm td label { white-space:nowrap; } table.tblForm td label input[type="checkbox"], table.tblForm td label input[type="radio"] { margin:4px; vertical-align:middle; } /* 주문서 작성 */ div.shop h3{font-size:20px; color:#222; font-weight:500; margin-bottom:10px; letter-spacing:-0.06em; margin-top:20px;} div.shop h4{font-size:16px; color:#263F8F; font-weight:400;letter-spacing:-0.06em; position:relative; padding-left:15px; margin-bottom:10px; margin-top:40px;} div.shop h4:before{ content : ""; display : block; position : absolute; left :0; top:50%; margin-top:-3px; width : 6px; height : 6px; background : #263F8F; border-radius:50%; } .shop h4 span{font-size:14px;} .shop h4 input{margin-left:15px;} /* 옵션테이블 */ table.opt_table {border-collapse: collapse; width: 100%; table-layout: fixed;background-color: #fff;} table.opt_table th {background-color: #fff;text-align: left;letter-spacing:0em; font-weight:bold; color:#474747; padding:5px !important; line-height:100%; border: 1px solid #cecece;} table.opt_table td { padding:5px !important; line-height:100%; border: 1px solid #cecece;} table.opt_table td input[type="text"], table.opt_table td input[type="password"]{ line-height: 1; height: 10px; padding: 3px 0 5px; vertical-align:middle; border:none; border-radius: 0 !important; -webkit-appearance: none !important; background: #fff; color: #4d4d4d; text-indent: 5px !important; } table.opt_table th ul.opt_name li{} table.opt_table td.pbold{font-size:14px !important; font-weight:bold;} /* 결제정보 테이블 */ .tb1 { width: 100%; border-collapse: collapse; border-spacing: 0; border: 0 none;} .tb1 th { height: 38px; text-align: left; background: #f3f3f3; border-top: 1px solid #898989; border-bottom: 1px solid #898989;} .tb1 td { height: 82px; border-bottom: 1px solid #ddd; text-align: right; color: #333;} .tb1 td.num_deliv{background: url('/images/mall/ico_plus.gif') no-repeat 0 50%;} .tb1 td.num_minus{background: url('/images/mall/ico_minus.gif') no-repeat 0 50%;} .tb1 td.num_total{background: url('/images/mall/ico_total.gif') no-repeat 0 50%;} span.price{font: bold 24px tahoma; text-align: right; color: #333;} span.txt_won{top: -3px; padding: 0px 5px; font-size: 14px; } div.poin{margin-top:10px; background:#f5f5f5; padding:10px 30px;} .tb1 td input[type="text"]{border:1px solid #ddd; height:35px; line-height:35px; padding:0px 5px;} .pnlNone{margin-top:10px; } .res_tb th{padding:10px 30px; text-align:left; color:#111; font-weight:500; border-bottom:1px solid #ddd;} .res_tb td{padding:10px ; border-bottom:1px solid #ddd;} .res_tb .first_th th, .res_tb .first_th td{border-top:1px solid #111} .res_tb td input[type="text"], .res_tb td input[type="password"] {line-height: 1; height: 35px; padding: 3px 0 5px; vertical-align: middle; border: 1px solid #cecece; border-radius: 0 !important; -webkit-appearance: none !important; background: #fff; color: #4d4d4d; text-indent: 5px !important;} .res_tb select{line-height: 1; height: 35px; width:115px; padding: 3px 0 5px; vertical-align: middle; border-radius: 0 !important; color: #4d4d4d; border: 1px solid #cecece;} .res_tb td.phone input[type="text"]{width:115px !important;} .res_tb .cash_no label{margin-right:15px;} /*마이쇼핑 하단 슬라이드*/ .swiper1{} .swiper1 li{border:1px solid #eee; border-radius:5px; overflow:hidden;} .swiper1 li .prd_thumb{position:relative; z-index:1; } .swiper1 li .prd_thumb a{position:relative; display:block; width:100%; height:100%;} .swiper1 li .prd_thumb a:before{content : ""; display : block; position : absolute; left : 0; bottom : 0; width : 100%; height : 100%; background : rgba(0,0,0,0.05); } .swiper1 li .prd_thumb img{display:block; margin:0 auto;} .swiper1 li .prd_thumb a.buyCart{position:absolute; bottom:15px; right:-150px; z-index:10; opacity:0; height:60px; width:60px; border-radius:50%; background:#fff url('/images/main/btn_basket2.png')no-repeat 50% 50%; text-indent:-10000px; cursor:pointer;} .swiper1 li .prd_thumb a.buyCart:before{display:none;} .swiper1 li:hover .prd_thumb a.buyCart{transition: all 0.2s ease-out 0s; opacity:1; right:20px; } .swiper1 li .prd_info{padding:15px 10px 10px;} .swiper1 li .prd_info .name{font-size:16px; color:#000; margin:10px 0; display: block;text-overflow:ellipsis;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.3em;height: 2.6em;} .swiper1 li .prd_info .prd_ori_number span{background:#f7f7f7; padding:2px 4px;} .swiper1 li .prd_info .price .tx_org{color:#b5b5b5;font-size:12px;text-decoration:line-through;} .swiper1 li .prd_info .price .tx_cur{color:#000; font-size:18px; font-weight:500;} .swiper1 .swiper-button-prev, .swiper1 .swiper-button-next{margin:0; top:65%;width:27px; height:44px; transform:translateY(-50%); z-index:1000; position:absolute; cursor:pointer; background:none;} .swiper1 .swiper-button-prev{left:0px;} .swiper1 .swiper-button-prev:after{ content : "\e93d"; display : block;font-size:30px; font-weight:700; text-align:center; position : absolute; left:0px; top:0; width : 100%; height : 100%; line-height:2.5rem; font-family:'xeicon'; color:#333; } .swiper1 .swiper-button-next{right:0px;} .swiper1 .swiper-button-next:after{ content : "\e940"; display : block;font-size:30px; font-weight:700;text-align:center; position : absolute; left:0px; top:0; width : 100%; height : 100%; line-height:2.5rem; font-family:'xeicon'; color:#333; } .swiper1 div.prd_thumb .btn{ position: absolute; bottom:45px; right:-75px; width:35px; z-index:10;} .swiper1 div.prd_thumb button { width: 35px; height: 35px; outline:none; border:none; text-indent: -999999px; font-size: 0; cursor:pointer; margin:2px 0px;} .swiper1 div.prd_thumb .btn_basket {background: url('/images/mall/btn_basket.png') no-repeat 50% 50%; background-size:35px 35px;} .swiper1 div.prd_thumb .btn_basket:hover{background: url('/images/mall/btn_basket_ov.png') no-repeat 50% 50%;background-size:35px 35px;} /*마이쇼핑 바로구매팝업창*/ div.buy_popup{display:none; position:absolute; top:0%; left:50%; transform:translateX(-51% ); width:1100px; background:#fff; border-radius:5px; border:1px solid #777; padding:20px; z-index:1010; } div.buy_popup h2{padding:0 0 10px; margin:0 0 10px; font-size:24px; font-weight:600; border-bottom:1px solid #111;} div.buy_popup h2 span{float:right; cursor:pointer; font-size:30px;} /* 주문 배송 조회 관심상품 */ button, input[type=submit] { border: 0 none; outline: none; cursor: pointer;} ul.sbtn_list li{margin-top:3px;} ul.sbtn_list li:first-child{margin-top:0px;} .choice{margin-top:5px;} div.change h3{ font-size:24px; font-weight:bold; color:#666; margin-top:30px; margin-bottom:5px;background: url("/images/mall/h4.gif") no-repeat 0 3px; } div.popArea{background-color:#f8f8f8; padding:20px; font-size:15px;} div.popArea h4{font-weight:bold; margin-top:20px; color:#fb366b; font-size:14px; } div.popArea span{font-weight:bold;} .mt0{margin-top:0px !important;} /* 주문상품확인 */ .boardOrder h2{font-size:16px; font-weight:bold; color:#333; margin-bottom:10px; margin-top:30px;} .boardOrder h3{font-size: 15px; margin-top:20px; margin-bottom:10px;} .btn_white{padding:5px 20px; border:1px solid #454545; font-weight:bold; color:#454545;} /* 마이쇼핑-today */ .mall_tab{position: relative; overflow: hidden; width: 100%; height: 40px; background: url('/images/mall/tab_line.png'); margin:15px 0px;} .mall_tab ul{} .mall_tab ul li{float:left;} .mall_tab ul li a { display: inline-block; margin: 0; padding: 3px 0 0 0; vertical-align: middle; text-align: center; text-decoration: none !important; white-space: nowrap; line-height: 35px;} .mall_tab ul li.on{background-color: #fc5e08;} .mall_tab ul li.on a { width: 162px; padding: 2px 0; border: 0px solid #5c5c5c; border-right: 0; color: #fff; font-weight:bold; text-decoration: none;} .mall_tab ul li.off a { width: 160px; border: 1px solid #c5c5c5; border-right: 0; color: #555; text-decoration: none; background-color: #f7f7f7;} .mall_tab ul li:last-child { border-right: 1px solid #c5c5c5;} /* Table */ .tb_date{border-collapse: collapse; border-spacing: 0; table-layout: fixed; margin-bottom: 25px;} .tb_date tbody th{background-color: #e2e2e2; color: #242424; font-weight: bold; border-bottom: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2; } .tb_date tbody td{border-bottom: 1px solid #e2e2e2;border-top: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2; color: #333; height:40px; vertical-align:middle; padding:0px 10px;} .tb_date tbody td ul li{float:left; margin-right:10px;} .tb_date tbody td input[type="text"]{line-height: 1; height: 15px; padding: 3px 0 5px; vertical-align:middle; border: 1px solid #cecece; border-radius: 0 !important; -webkit-appearance: none !important; background: #fff; color: #4d4d4d; text-indent: 5px !important; } .tb_date tbody td select{ height: 25px; vertical-align:middle; border: 1px solid #cecece; width:90px; border-radius: 0 !important; -webkit-appearance: none !important; background: #fff; color: #4d4d4d; text-indent: 5px !important;} h3 span.stxt{font-weight:normal; color: #898989; font-size:16px;} div.period .my_grade{float:left; position:relative; width:310px; text-align:center;} div.period .my_grade h3{font-size:26px; color:#222; margin:15px 0px;} div.period .my_grade:after {content:'';display : block; position : absolute; right :0px; top:20px; width :1px; height : 157px; background : #ddd; } div.period .my_grade a{border:1px solid #111; margin-top:10px; padding:3px 10px; font-size:15px; display:inline-block; cursor:pointer} div.timg{overflow:hidden; margin-top:15px; position:relative; width:100%; padding:0; border-top:2px solid #00C6D7; border-bottom:1px solid #ddd; padding:50px 30px;} div.timg ul{width: 100%; margin:0 auto; overflow:hidden;} div.timg ul li a{float:left; display:inline; width:180px; margin-left:10px; text-align:left;} div.timg ul li a img{ border:1px solid #d9d9d9 !important; width:140px; height:140px; margin-bottom:10px;} div.timg ul li a p{margin:0; padding:0;} div.timg ul li a p.name{ color:#444646; margin-bottom:10px; height:50px;} div.timg ul li a p.price{margin-top:5px;} div.timg ul li a p.price .tx_org {color:#b5b5b5;font-size:10px;text-decoration:line-through;vertical-align:middle;} div.timg ul li a p.price .tx_org > span {display:inline-block;font-size:12px;text-decoration:line-through;vertical-align:0;letter-spacing:-0.02em} div.timg ul li a p.price .tx_cur {display:inline-block;} div.timg ul li a p.price .tx_cur > span {display:inline-block;font-size:16px;vertical-align:-1px; color:#dc1508;} div.timg ul li a p.price .tx_org+.tx_cur {margin:0 0 0 7px;vertical-align:bottom} div.timg .swiper-button-prev, .swiper-button-next{width:52px; height:52px; margin-top:-20px; } div.timg .swiper-button-prev{background: url('/images/main/prev.png') no-repeat center top; background-size:52px 52px; left:0;} div.timg .swiper-button-next{background: url('/images/main/next.png') no-repeat center top; background-size:52px 52px; right:0;} /* BEST */ div#wrap div#container h3 a{margin-left:10px;} div#wrap div#container div.best{position:relative;} div#wrap div#container div.best h3{ color:#222; font-size:27px; padding-top:40px; font-weight:600;} div#wrap div#container div.best div.best_tab{position: absolute;top:0; right:0; z-index:10; } div#wrap div#container div.best div.best_tab ul{overflow:hidden;} div#wrap div#container div.best div.best_tab ul li{float:left; margin:0px 5px;} div#wrap div#container div.best div.best_tab ul li a{display:block; color:#a5a5a5; padding:0px 5px;font-size:13px; padding-top:52px;} div#wrap div#container div.best div.best_tab ul li.on a{ color:#00c6d7;} div#wrap div#container div.best div.best_tab ul li a.b00{background: url('/images/main/cate00.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b01{background: url('/images/main/cate01.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b02{background: url('/images/main/cate02.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b03{background: url('/images/main/cate03.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b04{background: url('/images/main/cate04.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b05{background: url('/images/main/cate05.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b06{background: url('/images/main/cate06.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b07{background: url('/images/main/cate07.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b08{background: url('/images/main/cate08.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li a.b09{background: url('/images/main/cate09.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b00{background: url('/images/main/cate00_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b01{background: url('/images/main/cate01_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b02{background: url('/images/main/cate02_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b03{background: url('/images/main/cate03_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b04{background: url('/images/main/cate04_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b05{background: url('/images/main/cate05_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b06{background: url('/images/main/cate06_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b07{background: url('/images/main/cate07_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b08{background: url('/images/main/cate08_on.png') no-repeat center top;} div#wrap div#container div.best div.best_tab ul li.on a.b09{background: url('/images/main/cate09_on.png') no-repeat center top;} div#wrap div#container div.best div.pcon{margin-top:0px;} .cate_prd_list > li div.prd_thumb div.inner > h3 {position:absolute;top:1px;left:4px;width:32px;height:23px;background-color:#f3f3f3;padding-top:5px;color:#898989;font-weight:bold;font-size:13px;text-align:center;} .cate_prd_list > li div.prd_thumb div.inner > h3.first {background:url('/images/mall/best_ico.gif') no-repeat center top; height:25px; padding-top:13px; color:#fff; width:40px;} .view_list td.pimg .img_zone{position:relative;} .view_list td.pimg .img_zone > h3 {position:absolute;top:1px;left:4px;width:32px;height:23px;background-color:#f3f3f3;padding-top:5px;color:#898989;font-weight:bold;font-size:13px;text-align:center;} .view_list td.pimg .img_zone > h3.first {background:url('/images/mall/best_ico.gif') no-repeat center top; height:25px; padding-top:13px; color:#fff; width:40px;} .view_list td.pimg .img_zone .soldout{width:125px; height:100px; position:absolute; top:0; left:0; background:url('/images/content/soldout.png?v=1') no-repeat center center; background-size:cover; z-index:9999;} .view_list td.pimg .img_zone .proStop{width:125px; height:100px; position:absolute; top:0; left:0; background:url('/images/content/proStop.png?v=1') no-repeat center center; background-size:cover; z-index:9999;} .view_list td.pimg .img_zone .proStop2{width:125px; height:100px; position:absolute; top:0; left:0; background:url('/images/content/proStop2.png?v=1') no-repeat center center; background-size:cover; z-index:9999;} /*배송지리스트*/ .btn_shipping{display:inline-block; padding:3px 5px; background:#333; color:#fff; margin-left:10px; font-size:15px; cursor:pointer;} /*리뷰페이지*/ .review_table{border-collapse: collapse; border-spacing:0; margin-bottom:20px;} .review_table thead th{color:#474747;background-color:#f8f8f8;font-weight:bold;padding:13px 10px 11px 10px;border-bottom:1px solid #606264;border-top:2px solid #606264;} .review_table tbody td{color:#454545;padding:15px 10px 14px 10px;text-align:center;vertical-align:middle; border-bottom:1px solid #dee2e7;} .review_table tbody td.t_left{color:#454545;padding:15px 10px 14px 10px;text-align:left;vertical-align:middle;} .review_table tbody td img{width:100px;height:100px;} .review_bottom{text-align:right;margin-top:5px;} .review_table tbody td p{padding:0;margin:0} ul.start_list{list-style:none; padding:0; margin:0;} ul.start_list li{float:left;} ul.start_list li span{display:inline-block; width:22px; height:22px; background: url('/images/main/star.png') no-repeat 0px -22px;background-size:126px 43px;} ul.start_list li.on span{display:inline-block; width:22px; height:22px; background: url('/images/main/star.png') no-repeat 0px 1px;background-size:126px 43px;} /* .pro_text{ padding-top:20px; border-bottom: 1px solid #ddd; text-align:left; } .pro_text_tit h4{display:inline-block; font-size:24px; color:#333333; margin:0; margin-right:30px;} .pro_text_tit h5{display:inline-block; font-size:24px; color:#01559E; margin:0; margin-right:30px;} .prd_ori_star{position:relative; display:inline-block;vertical-align:middle; margin:0; height:25px;} .prd_ori_star span.grade{background: url('/images/main/star.png') no-repeat 0px -22px;background-size:126px 43px;} .prd_ori_star span.state{background: url('/images/main/star.png') no-repeat 0px 1px; background-size:126px 43px;} .prd_ori_star span.grade, .prd_ori_star span.state{position: absolute; left: 0; top:0; display: inline-block; text-indent: -9999px; max-width: 100%; width: 100px; height: 23px; } .prd_ori_star span i{vertical-align:middle; color:#71A0FF; font-size:18px; } .prd_ori_star em{font-size:16px; padding-left:135px; font-style:normal; font-weight:400;} */ ul.review_list{width:100%; list-style:none; padding:0; margin:0;} ul.review_list li{border-bottom:1px solid #ddd; padding:10px;cursor:pointer;} ul.review_list li div.list_top{position:relative; height:80px; padding-left:120px; box-sizing:border-box;} ul.review_list li div.list_top div.img_zone{position:absolute; top:0px; left:10px; width:100px; height:80px;} ul.review_list li div.list_top a.review_edit{position:absolute; top:0px; right:0px; display:inline-block; padding:5px 10px; background:#002590; color:#fff;} ul.review_list li div.list_top h4{margin:0;} ul.review_list li div.list_top h5{margin:0; margin-top:5px; color:#888;} ul.review_list li div.list_top .prd_ori_star em{color:#aaa;} ul.review_list li p{margin:0px;} ul.review_list li p.productName{color:#002590; font-size:14px;} ul.review_list li p.subject{color:#000; font-size:16px;} ul.review_list li div.content{display:none; color:#333; font-size:14px; background:#f7f7f7; padding:5px; margin-top:5px;} ul.review_list li.active div.content{display:block;} ul.review_list li.active div.list_top{height:auto; } /*정기배송 달력팝업*/ .datePopup{width:500px; position: fixed !important; top: 50%; left: 50%; transform: translate(-30%, -40%); background: #fff; border-radius: 15px; padding: 10px; z-index: 1006;} .datePopup .btn_close i{font-size:20px; color:#000;} .datePopup table{width:100%; border-top:1px solid #002590;} .datePopup table thead{} .datePopup table thead th{background:#066CF6; color:#fff; padding:10px 10px;} .datePopup table tbody td{border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center; padding:5px 10px;} .datePopup table tbody td:first-child{border-left:1px solid #eee;} .datePopup table tbody td a{display:block; width:100%; height:100%;} .datePopup table tbody td:hover{background:#9cd3fb;} .datePopup table tbody td:hover a{color:#000;} /*최저가격 ~ 표시*/ .cur_over{font-size:22px; color:red;} .cur_over .cur_circle{vertical-align: middle; position:relative;} .cur_over .cur_circle i{color:#23A5DD; cursor:pointer;} .cur_over .cur_circle .cur_alert{display:none; position:absolute; top:-60px; left:-10px; width:120px; font-size:14px; text-align:center; background:#23A5DD; color:#fff;line-height:1.2; border-radius:10px; padding:5px 10px;} .cur_over .cur_circle .cur_alert:before{ display: block; content: ''; position: absolute; bottom: -7px; left:18px; width: 0px; height: 0px; border-top: 8px solid #23A5DD; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid none;} /*분석(구입상품)*/ .mybuyTop { position: relative; clear: both; padding: 0.4rem 0.75rem; box-sizing: border-box; text-align: right;} .mybuyTop .myBuy_down {position: absolute; top: 0; left: 0; display:flex; align-items: center; justify-content: center; gap: 1rem;} .mybuyTop .alignOption {display:flex; justify-content: flex-end; gap: 0.8rem; align-items: center;} .mybuyTop .alignReset {background: #999; padding: 0.1rem 0.5rem; color: #fff; font-weight: 500;} .tb_shop .product_zone{text-align:left; position:relative; padding-right: 5rem;} .tb_shop .product_zone > {margin-top:1rem;} .tb_shop .product_zone .rebuy{display: inline-block; color: var(--main); line-height: 1.5rem; width: 4rem; text-align: center; font-size: 0.75rem; font-weight: 500; background: rgb(255, 255, 255); border: 1px solid var(--main); position: absolute; top: 0.5rem; right: 0.5rem; cursor: pointer; transition: all 0.3s;} .tb_shop .product_zone .rebuy:hover {background:var(--main); color:#fff;} .tb_shop .product_zone table.myBuy_option {margin-top:1rem;} .tb_shop .product_zone table.myBuy_option td {text-align: left; padding:0 0.5rem; border:0; vertical-align: baseline;} .tb_shop .product_zone table.myBuy_option tbody > tr > td:first-child {padding:0;} .tb_shop .product_zone .ui-spinner {margin-top:0; display: flex; align-items: center; justify-content: center;} .period_con .period{position: relative; border: 1px solid #ddd; background: url('/images/mall/pattern_bg.gif') repeat 0 0; text-align: right; width: 100%; box-sizing: border-box; display: inline-block; vertical-align: top; padding: 5px 0; margin-bottom: 10px;} .period_con .period label{display:inline-block; margin-right:15px;} .period_con .tb_period { width: 100%; border-collapse: collapse; border-spacing: 0; border: 0 none; } .period_con .tb_period td input[type="text"]{line-height: 1; padding: 5px 0 7px; vertical-align:middle; border: 1px solid #cecece; border-radius: 0 !important; -webkit-appearance: none !important; background: #fff; color: #4d4d4d; text-indent: 5px !important; background: #fff ;} .period_con .tb_period td input.input_year{background: #fff url('/images/mall/calendar.gif') no-repeat right 50%; width:140px;} .period_con .tb_period span.btn_search{display:inline-block; width:70px; height:33px; line-height:33px; text-align:center; color:#fff; background-color:#002590; font-size:14px; } @media (max-width:767px){ .mybuyTop {padding:0.4rem 0;} .mybuyTop .myBuy_down {position:static; justify-content: flex-start; margin-bottom: 1rem;} }