/* BASIC css start */ #shoppay_btn{ text-align: center; margin-top: 20px;} #contents {padding:96px 0 0 !important;} #contents.subpd {padding:60px 0 0 !important;} #basket .title{font-size:30px;color:#2C2C2C;font-weight:400;text-align:center;line-height: 30px;padding:35px 0 25px;} #basket .btn-wrap {padding:15px 10px;} #basket .btn-wrap div {width:49%; float:left;} #basket .btn-wrap div:last-child {float:right;} #basket .all-select:after{content:"";display:block;clear:both} #basket .all-select {background-color: #F5F5F5; padding:18px 15px;} #basket .all-select label{padding-left:25px;font-size:13px;letter-spacing:-0.03em;color:#2c2c2c;line-height: 16px;} #basket .all-select a{border:0;width:auto;height:auto;background:none;display:inline-block;float:right;line-height: 16px;} #basket .type_tit{display:block;font-size:16px;color:#2C2C2C;font-weight:500;letter-spacing: -0.03em;padding:25px 15px 0} #basket .type_tit_line{border-top:10px solid #F5F5F5;} #basket .pd_list{padding:0 15px;margin-top:12px} #basket .pd_list li {padding:18px 0;border-bottom:1px solid #E5E5E5;position: relative;} #basket .pd_list li:first-child{border-top:1px solid #2c2c2c;} #basket .pd_list li .pname a{padding-left:25px;display:inline-block;vertical-align: middle;font-size:16px;color:#2c2c2c;font-weight:500;letter-spacing:-0.03em} #basket .pd_list li .pname a:nth-child(2) {padding:0; position:relative; left:25px; } #basket .pd_list li .pname a span{display:none;width:49px;height:19px;line-height:19px;font-size:9px;color:#fff;text-align:center;vertical-align: middle;font-weight:300} #basket .pd_list li .pname a span.blue-delivery{background:#50696F} #basket .pd_list li .pname a span.red-delivery{background:#505050} #basket .pd_list li .pname a.Close_btn_cart{width:16px;height:16px;background:url('/design/hanstyle/wib/2022wib/img/mo/cart_x.png')no-repeat center/16px;display:inline-block;position: absolute; top: 18px;right: 0;padding:0} #basket figure {width:100%; display: table; box-sizing: border-box; padding:0;} #basket .basketLeft {width:110px; position:relative; float: left;} #basket .basketLeft a {padding-right: 25px; margin-top: 18px; display:block;width: 91px;} #basket .basketLeft .MS_input_checkbox {top:0; left:0; position:absolute;} #basket .basketRight {padding-left:116px;margin-top:18px} #basket .basketRight p {color:#838383; margin-bottom:6px;font-size:12px;letter-spacing:-0.03em} #basket .basketRight p a{color:#838383;font-size: 12px;} #basket .basketRight p.SMSbasketPrice{font-size:16px;color:#2c2c2c;font-weight:500;margin-top:23px} #basket .basketRight p.SMSbasketPrice span{font-size:14px;font-weight:400} #basket .SMS_basket_option{border-top:1px solid #E5E5E5;margin-top:20px;padding:20px 0 0} #basket .SMS_basket_option .SMS_basket_quantity{font-size:0} #basket .SMS_basket_option .SMS_basket_quantity .qbtn{border:1px solid #E5E5E5; box-sizing: border-box;} #basket .SMS_basket_option .SMS_basket_quantity div{display:inline-block;font-size:0} #basket .SMS_basket_option .SMS_basket_quantity .basket_up{border-left:1px solid #e5e5e5;} #basket .SMS_basket_option .SMS_basket_quantity .basket_down{border-right:1px solid #e5e5e5;} #basket .SMS_basket_option .SMS_basket_quantity .basket_up a, #basket .SMS_basket_option .SMS_basket_quantity .basket_down a{display:block;width:100%;height:100%;} #basket .SMS_basket_option .SMS_basket_quantity .basket_up,#basket .SMS_basket_option .SMS_basket_quantity .basket_down{width:35px;height:35px;position: relative;vertical-align: middle;} #basket .SMS_basket_option .SMS_basket_quantity .basket_up:after,#basket .SMS_basket_option .SMS_basket_quantity .basket_down:after,#basket .SMS_basket_option .SMS_basket_quantity .basket_up:before{content:"";display:block;width:10px;height:1px;background:#505050;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%)} #basket .SMS_basket_option .SMS_basket_quantity .basket_up:before{transform:translate(-50%,-50%) rotate(90deg)} #basket .SMS_basket_option .SMS_basket_quantity .basket_in{width:50px;height:34px; vertical-align: middle;} #basket .SMS_basket_option .SMS_basket_quantity .basket_in input{width:100%;border:none;text-align:center;font-size:14px;color:#2C2C2C;font-weight:500;height:100%;padding:0} #basket .SMS_basket_option .SMS_basket_quantity .quan_basket{vertical-align: middle;margin-left:7px;} #basket .SMS_basket_option .SMS_basket_quantity .quan_basket a{width:90px;color:#2C2C2C;border:1px solid #E5E5E5;box-sizing: border-box;border-radius:3px;height:35px;line-height:35px;vertical-align: middle;font-size:12px;background:#fff} #basket .SMS_basket_option .SMS_basket_quantity .buy_basket{vertical-align: middle;margin-left:10px;} #basket .SMS_basket_option .SMS_basket_quantity .buy_basket a{display:inline-block;text-align:center;width:90px;color:#fff;border-radius:3px;height:35px;line-height:35px;vertical-align: middle;font-size:12px;background:#50696F} #basket .basketRight .info-circle{width:14px;height:14px;background:url('/design/hanstyle/wib/2022wib/img/mo/info_icon.png')no-repeat center /14px;display:inline-block;vertical-align: middle;padding:0} #basket .basketRight .pname {border-bottom:1px solid #dedede; padding-bottom: 4px;} #basket .basketRight .pname .blue-delivery {background-color: #74a9e4; color:#fff; font-size:0.917em; padding: 1px 2px;} #basket .basketRight .pname .red-delivery {background-color: #d674e4; color:#fff; font-size:0.917em; padding: 1px 2px;} #basket .basketRight .pname .fa {float:right; margin-top: -6px;} #basket .basketRight .fa-plus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff;} #basket .basketRight .fa-minus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff;} #basket .basketRight .btn_Black {margin-top:5px;} #basket .basketRight .MS_select {width:100%;} #basket .basketRight .amount-input {width:50px;} #basket .price-each-info-top {text-align : right; ; padding:0px 15px 0;width: calc(100% - 30px);margin: 20px auto 0;} #basket .price-each-info-top .txt{font-size:12px;color:#2c2c2c;letter-spacing: -0.03em;background:#F5F5F5;padding: 18px 10px 0;} #basket .price-each-info-top .txt span{display:inline-block;margin: 0 10px} #basket .price-each-info-bottom {text-align : right; padding:10px; background:#eaeaea; border-bottom:1px solid #cbcbcb;} #basket .price-total-info-top {border-top: 2px solid #464646; border-bottom: 1px solid #cbcbcb; background-color: #eaeaea; text-align : right; padding:10px; margin-top:10px;} #basket .price-total-info-bottom {text-align : right; padding:0 15px 20px;width: calc(100% - 30px);margin: 0px auto 0;border-bottom:1px solid #E5E5E5} #basket .price-total-info-bottom_none{border:0;} #basket .price-total-info-bottom p{font-size:14px;color:#2C2C2C;font-weight:500;letter-spacing: -0.03em;background:#F5F5F5;padding: 8px 10px 18px;} #basket .price-total-info-bottom .txt-price {color : #A02727; font-weight:500;margin-left: 3px;} #basket .price-total-info-bottom .txt-reserve {color : #505050; font-size:12px;letter-spacing: -0.05em;font-weight:400;margin-left:3px;} #basket .delivery-type { padding:25px 15px 0;} #basket .order-btn {padding:25px 15px 0;} #basket .order-btn a{display:block;width:100%;height:50px;border:1px solid #505050;font-size:15px;line-height:50px;color:#505050;text-align:center;font-weight:500} #basket .order-btn a.ordernow-btn{background:#243640;color:#fff;margin-top:10px;border:1px solid #243640;} #basket .naver-checkout {margin-top: 20px;} #basket .price-totalResult{padding:25px 15px 0} #basket .price-totalResult ul{border:1px solid #E5E5E5;padding:28px 25px 23px} #basket .price-totalResult ul li:after{content:"";display:block;clear:both} #basket .price-totalResult ul li{font-size:14px;color:#3B3B3B;letter-spacing: -0.03em;margin-bottom:10px} #basket .price-totalResult ul li span.txt-price-total{float:right;font-size:15px;} #basket .price-totalResult ul li span.won{font-size:13px;} #basket .price-totalResult ul li.total{margin:20px 0 0;padding:25px 0 0;border-top:1px dotted #E5E5E5;font-size:16px;color:#2C2C2C;letter-spacing:0.03em;font-weight:500;} #basket .price-totalResult ul li.total .txt-price-total,#basket .price-totalResult ul li.total .won{font-size:24px;color:#2C2C2C;} @media screen and (min-width:768px) { #basket .basketRight .btn_Black {width:315px; display:inline-block; vertical-align: middle; margin-top:0px;} } .cart-ft2 { display: block; text-align: center; } .basket-option-dlist li img { width:30px; height:30px; vertical-align:middle; } .mem_inner > div.mem_img {width:34px; } .mem_inner > div.mem_img img {width:100%; } /* 정기배송 탭 */ #basket .cart-tab { width:100%; height:32px; border-top:1px solid #464646; } #basket .cart-tab:after { clear: both; content: ""; display: block; } #basket .cart-tab li { float:left; width:50%; height:31px; border-bottom:1px solid #cecece; } #basket .cart-tab li a { display:inline-block; width:100%; height:100%; color:#3b3b3b; font-size:12px; text-align:center; text-decoration:none; background:none; } #basket .cart-tab li a span { display:block; height:18px; line-height:18px; margin-top:6px; } #basket .cart-tab li:first-child a span { border-right:2px solid #e2e2e2; } #basket .cart-tab li.now { border-bottom:1px solid #f1191f; } #basket .cart-tab li.now a { font-weight:bold; color:#f1191f; } /*추천상품*/ #basket .pd_area{text-align:center;padding:30px 20px;border:1px solid #E5E5E5;width:calc(100% - 70px);margin:25px auto 60px} #basket .pd_area > p{font-size:26px;color:#2C2C2C;letter-spacing:0.05em;margin-bottom:20px} #basket .pd_area > span{font-size:12px;color:#000000;margin-bottom:40px} #basket .pd_area > span b{font-size:16px;color:#243640;font-weight:500} #basket .pd_area .relat_pd{display:block;border:1px solid #E5E5E5;border-radius:3px;background:#fff;font-size:15px;color:#243640;letter-spacing:-0.03em;height:50px;margin:40px auto 0px;width:100%;line-height:50px} #basket .pd_area .relat_pd img{margin-left:5px;vertical-align: middle;width:14px;} #basket .pd_area .list_shoppingRelationItem1x ul{font-size:0;text-align:left} #basket .pd_area .list_shoppingRelationItem1x ul li{display:inline-block;width:calc(33.33% - 6px);margin-right:9px;margin-top:35px;vertical-align: top;} #basket .pd_area .list_shoppingRelationItem1x ul li figure a img{width:100%} #basket .pd_area .list_shoppingRelationItem1x ul li:nth-child(3n){margin-right:0} #basket .pd_area .list_shoppingRelationItem1x ul li:nth-child(1), #basket .pd_area .list_shoppingRelationItem1x ul li:nth-child(2), #basket .pd_area .list_shoppingRelationItem1x ul li:nth-child(3){margin-top:0} #basket .pd_area .list_shoppingRelationItem1x ul li .list_shoppingInfo{text-align:center;margin-top:8px} #basket .pd_area .list_shoppingRelationItem1x ul li .list_shoppingInfo .listName{font-size:12px;color:#505050;font-weight:400;word-break: keep-all;} #basket .pd_area .list_shoppingRelationItem1x ul li .list_shoppingInfo .listPrice{color:#2C2C2C;font-size:12px;margin-top:2px} #basket .pd_area .shopdetailRelation{display:none;margin-top:40px} #basket .pd_area .shopdetailRelation ul li .list_shoppingInfo .listReserve{display:none} #basket .price-each-info-top .txt span:not(.mktotal_plus) {margin:0} #basket .price-totalResult .MK_total_delivery {display:inline !important} .pd_area_line {display: none;width: 100%;height: 1px;margin-bottom: 60px;} #basket .displaynone {display:none !important} /*승연 추가*/ .relat_pd img { display: inline-block; vertical-align: middle; } .relat_pd img.rotated { transform: rotate(180deg); } /*250828*/ /* 빠른 결제 start */ /* 선물하기 버튼 추가 css 미사용 */ #basket.Quick .order-btn {/* display: flex; gap: 4px; padding: 0 10px;*/ } #basket.Quick .order-btn.use-gift.qorder-none { display: grid; grid-template-columns: 48px 1fr; } /* 선물하기 사용 + 빠른 결제 미사용 */ #basket.Quick .order-btn.use-gift.use-qorder { display: grid; grid-template-columns: 48px 1fr 1fr; } /* 선물하기 사용 + 빠른 결제 사용 */ #basket.Quick .order-btn.gift-none.use-qorder {_display: grid; grid-template-columns: 1fr 1fr; } /* 선물하기 사용 + 빠른 결제 사용 */ #basket.Quick .order-btn a { display: flex; height: 48px; justify-content: center; align-items: center; margin: 2px 0; padding: 0; } #basket.Quick .order-btn a.btn_Present { box-sizing : border-box; background: #fff; border: 1px solid #393939; font-size: 16px; } #basket.Quick .order-btn a.btn_Blue { color: #fff; background: #2a68cc; } /* 빠른 결제 end */ /* 빠른 결제 레이어 */ #quick-swipepay .layer { z-index: 200; } #quick-swipepay .layer-wrap { position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px 10px 0; box-sizing: border-box; background: #f6f6f6; color: #3b3b3b; } #quick-swipepay .layer-wrap .swipepay-close { position: absolute; top: -40px; left: 50%; width: 40px; height: 40px; margin-left: -20px; font-size: 24px; color: #fff; background: none; border: 0; display: flex; justify-content: center; align-items: center; } #quick-swipepay .layer-wrap .swipepay-addr { padding: 0 10px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; text-align: left; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst { padding: 14px 2px; border-top: 1px solid #e3e3e3; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst:first-child { border-top: 0; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd { display: flex; align-items: center; gap: 5px; position: relative; font-size: 11px; white-space: nowrap; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd p.prd-tit { color: #3b3b3b !important; font-size: 14px !important; font-weight: bold; vertical-align: bottom; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd p.prd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #777; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd span { font-size: 11px; color: #777; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd .addr-edit { position: absolute; top: -3px; right: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 24px; font-size: 11px; font-weight: bold; color: #3b3b3b; border: 1px solid #c6c6c6; background: #fff; box-sizing: border-box; line-height: 0; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd.addr-detail span { color: #3b3b3b; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt { margin-top: 6px; font-size: 11px; color: #777; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li strong { font-size: 12px; color: #3b3b3b; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li p:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dt, #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd, #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd p { display: flex; align-items: center; gap: 5px; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd { display: none; } #quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd.on { display: flex; } #quick-swipepay .layer-wrap .swipepay-agree { position: relative; display: flex; justify-content: space-between; margin-top: 10px; padding-left: 2px; font-size: 11px; } #quick-swipepay .layer-wrap .swipepay-agree label input[type=checkbox] { width: 13px !important; height: 13px !important; vertical-align: text-bottom; } #quick-swipepay .layer-wrap .swipepay-agree .view-terms { padding: 0 2px; color: #888; text-decoration: underline; border: 0; background: none; } #quick-swipepay .layer-wrap .swipepay-agree .layer-terms { position: absolute; bottom: -40px; left: 50%; width: 100%; margin-left: -50%; padding: 10px; border: 1px solid #909090; border-radius: 4px; background: #fff; box-sizing: border-box; } #quick-swipepay .layer-wrap .swipepay-agree .layer-terms .terms-close { position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; font-size: 20px; border: 0; background: none; } #quick-swipepay .layer-wrap .swipepay-agree .layer-terms .terms-tit { padding-bottom: 10px; font-size: 13px; font-weight: bold; } #quick-swipepay .layer-wrap .swipepay-agree .layer-terms table { table-layout: fixed; width: 100%; word-wrap: break-word; } #quick-swipepay .layer-wrap .swipepay-agree .layer-terms table th, #quick-swipepay .layer-wrap .swipepay-agree .layer-terms table td { padding: 5px; border: 1px solid #ddd; color: #777; } #quick-swipepay .layer-wrap .swipepay-agree .layer-terms table th { font-weight: 400; background: #f8f8f8; } #quick-swipepay .layer-wrap .swipepay-agree .layer-terms table td strong { color: #000; font-weight: bold; } #quick-swipepay .layer-wrap .swipepay-total { display: flex; justify-content: space-between; padding: 16px 2px; font-size: 11px; } #quick-swipepay .layer-wrap .swipepay-total strong { font-size: 14px; line-height: 18px; } #quick-swipepay .layer-wrap .swipepay-total strong span { margin-left: 5px; font-size: 12px; font-weight: normal; color: #777; } #quick-swipepay .layer-wrap .swipepay-total .total-price strong { font-size: 16px; color: #f1191f; vertical-align: bottom; } #quick-swipepay .layer-wrap .swipepay-wide { position: relative; width: 100%; height: 48px; border-radius: 48px; color: #fff; font-size: 14px; font-weight: bold; overflow: hidden; box-sizing: border-box; background: #2a68cc; } #quick-swipepay .layer-wrap .swipepay-wide .swipepay-text { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); pointer-events: none; user-select: none; } #quick-swipepay .layer-wrap .swipepay-wide .swipepay-slider { display: flex; justify-content: center; align-items: center; width: 48px; height: 100%; color: #fff; font-size: 22px; border-radius: 48px; box-sizing: border-box; background: #1d498f; } #quick-swipepay .layer-wrap .swipepay-wide .swipepay-completed { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1d498f; box-sizing: border-box; border-radius: 48px; pointer-events: none; } #quick-swipepay .layer-wrap .swipepay-order { display: flex; justify-content: center; align-items: center; padding: 8px 0 10px; text-decoration: underline; font-size: 11px; color: #888; } #quick-swipepay{_display:block !important} /* BASIC css end */