@charset "utf-8";
/* CSS Document */


/*---------- 장바구니 리스트 !! ------------------*/
#order {width:980px; padding:0px 0 0 0; margin: 0 auto;}

#order h3 { height:21px; margin:13px 0;}
#order h3 span { }


#order ul { padding:0; width:100%; height:31px; list-style:none;  z-index:100; background: #fff; border-left:#cfcfcf solid 1px;  }

#order ul li { display:inline; margin:0; padding:0 ; list-style:none; text-align:center}
#order ul li .none { background:none;}
#order ul a { float:left;  text-align:center; width:108px; padding:0; overflow:hidden; color:#353535; border:#cfcfcf solid 1px; border-left:0; text-decoration:none }

#order ul a:hover,
#order ul a:active,
#order ul a:focus,
#order ul a.select { color:#fff; width:109px; border-top:#262626 solid 1px; border:0; background:url(../../img/main/ico_arrow.jpg) no-repeat center bottom;  background-color:#262626; padding-bottom:12px; }


#order .list_option { float:left; width:100%; border-top:#e7e7e7 solid 1px; border-bottom:#e7e7e7 solid 1px; margin-top:20px; background-color:#f7f7f7; height:35px; }
#order .list_option li { float:left; display:inline; padding:0 28px; text-align:center; font:normal 11px/36px 돋움; line-height:36px  }



#order .list_option .list_select { float:right;}
#order .list_option .list_select span { float:left; padding:0 0px; color:#dddddd;  }
#order .list_option .list_select a { float:left;  color:#3c3c3c;  width:38px; text-align:center; opacity:0.65;filter:alpha(opacity=65) }
#order .list_option .list_select a:hover,
#order .list_option .list_select a:active,
#order .list_option .list_select a:focus,
#order .list_option .list_select a.select { font-weight: bold; text-decoration: none; opacity: 1; filter: alpha(opacity=100);}
#order .list_option .list_select img { vertical-align:middle; }


#order .list_option { float:left; width:100%; border-top:#797979 solid 2px; border-bottom:#e7e7e7 solid 1px; margin-top:-10px; background-color:#f7f7f7; line-height:35px; }
#order .list_option input { vertical-align:middle; margin-right:5px }
#order .list_option span { float:left; padding:0 14px; font-weight:bold  }
#order .list_option span strong { color:#3d49d1 }

#order .list_option .list_btn { line-height:35px;   }
#order .list_option .list_btn img {  vertical-align:middle }

#order .div_btn {display: flex; justify-content: center; width:100%; text-align:center;}
#order .div_btn a {display: block; width: fit-content;}




#order .sum_box { float:left; width:100%; margin-top:-11px; padding:10px 0 ; border-top:0 }
#order .sum_box .box {float:left; position:relative; width:160px; height:256px; margin:0; border:0; padding:25px 18px; border-bottom:#e4e4e4 solid 1px; font:normal 11px/16px 돋움;  text-align:center}
#order .sum_box .box a { text-decoration:none }
#order .sum_box .box a img { width:160px; height:160px; }
#order .sum_box .none { border-bottom:0 }

#order .sum_box .box .tit { display:block; margin:8px 0 0 5px;  padding:0; color:#666666; font-weight:bold; }
#order .sum_box .box .text { display:block; margin:2px 0 0 5px;  padding:0; color:#888888;  }
#order .sum_box .box .cate { margin:0; padding:0; width:95px; }

#order .sum_box .box .price { display:block; margin:0; padding:0 0 0 5px; color:#949494; }
#order .sum_box .box .sale { margin:0; padding:0; text-decoration:line-through;   }
#order .sum_box .box .point { margin:0; padding:0 5px; color:#303030;}
#order .sum_box .box .point strong { color:#ff5d31;}
#order .sum_box .box .percent { margin:0; padding:0; color:#0282f0;  }

#order .sum_box .box .amount_box { float:left; width:160px; font:normal 11px/17px 돋움; color:#1d1d1d; border-top:#efebec solid 1px; padding-top:7px; margin-top:7px;}
#order .sum_box .box .amount_box img { vertical-align:middle   }
#order .sum_box .box .amount { border:#cccccc solid 1px; width:34px; height:17px; color:#4c4c4c; text-align:center; margin-left:5px;}
#order .sum_box .box .amount_box input { vertical-align:middle; border-color:#aeaeae;  }
#order .sum_box .box .arrow { display:inline-block; width:18px; vertical-align:middle  }
#order .sum_box .box .arrow img { display:block; padding-bottom:1px;}
#order .sum_box .box .amount_box .check { padding-left:5px; padding-right:5px;}



#order .list_box { float:left; width:100%; margin-top:-11px; padding:10px 0 ; border-top:0 }
#order .list_box .box {float:left; position:relative; width:453px; height:60px; margin:0; border:0; padding:14px 0 14px 36px; border-right:#e4e4e4 solid 1px; border-bottom:#e4e4e4 solid 1px; font:normal 11px/16px 돋움;  }

#order .list_box .box .img { display:block; float:left; width:65px }
#order .list_box .box .img img { float:left; width:60px; height:60px; }
#order .list_box .none { border-right:0 }


#order .list_box .text_box { display:block; float:left; width:220px }
#order .list_box .box .tit { margin:2px 0 0 5px;  padding:0; color:#666666; font-weight:bold; }
#order .list_box .box .text { margin:2px 0 0 5px;  padding:0; color:#666666;  }

#order .list_box .box .text2 { display:block; float:left; margin:2px 0 0 5px;  padding:0; color:#888888;  }

#order .list_box .box .price { display:block; float:left; margin:2px 0 0 5px;  padding:0; color:#949494; }
#order .list_box .box .sale { margin:0; padding:0; text-decoration:line-through;   }
#order .list_box .box .point { margin:0; padding:0 5px; color:#303030;}
#order .list_box .box .point strong { color:#ff5d31;}
#order .list_box .box .percent { margin:0; padding:0; color:#0282f0;  }

#order .list_box .box .amount_box { display:block; float:left; width:50px; font:normal 11px/17px 돋움; color:#1d1d1d; margin-top:7px;}
#order .list_box .box .amount { border:#cccccc solid 1px; width:34px; height:17px; color:#4c4c4c; text-align:center;  margin-bottom:2px}
#order .list_box .box .amount_box input { vertical-align:middle; border-color:#aeaeae;  }
#order .list_box .box .amount_box .check { position:absolute; margin:-7px 0 0 -307px}

#order .list_box .box .total_price { display:block; float:left; width:90px; margin-top:24px; color:#000; font:bold 12px/1.0em 돋움; text-align:right}

#btn_addCart  { padding-left:2px;}


.cartCss {border-bottom:1px solid #cccccc;}
.cart_default {color:#7a7a7a; font-size:11px; line-height:16px;}
.cart_none {color:#000000; font-size:16px; line-height:16px;font-weight:bold;border-bottom:1px solid #cccccc;}

.cart_pblack {color:#666666; font-size:12px; letter-spacing:0px;}
.cart_pblue {color:#0282F0; font-size:11px; letter-spacing:0px;}
.cart_pbblack {color:#303030; ont-size:12px; letter-spacing:0px;font-weight:bold;}
.cart_porange {font-size:19px; font-weight: bold;color:#ff5503;}
.cart_porangewon {color:#ff5503; font-size:12px; letter-spacing:0px;font-weight:bold;}
table {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-spacing:0px; border-collapse:collapse; border:0px solid blue;}
td {padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; font-size:12px; color:#666666; line-height:16px;}


.cart_red {color:#ff5700; font-size:11px; line-height:16px;}
.cart_redb {color:#ff5700; font-size:12px; line-height:16px;font-weight: bold;}
.order_black {color:#2d2d2d; font-size:12px; line-height:16px;}
.order_tok {color:#525252; font-size:11px;border-bottom:1px solid #e7e7e7;background:#eef7fc;}
.order_numb {color:#dc483e; font-size:12px;font-weight:bold;padding:0 3px 0 3px;}

#cartTable img {display: block}


.cart-container {max-width: 800px; margin: 20px auto; background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;}
.cart-header {padding: 15px; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold;}
.cart-item {display: flex; padding: 15px; border-bottom: 1px solid #ddd; align-items: center;}
.cart-item:last-child {border-bottom: none;}
.item-checkbox {margin-right: 15px;}
.item-image {width: 80px; height: 80px; margin-right: 15px; background-color: #eee; border-radius: 8px; overflow: hidden;}
.item-image img {width: 100%; height: 100%; object-fit: cover;}
.item-details {flex-grow: 1;}
.item-title {font-size: 16px; font-weight: bold; margin-bottom: 5px;}
.item-option {color: #777; font-size: 14px; margin-bottom: 5px;}
.item-discount {color: #e63946; font-size: 14px; font-weight: bold;}
.item-actions {display: flex; align-items: center;}
.item-quantity {display: flex; align-items: center; margin-right: 15px;}
.item-quantity button {width: 30px; height: 30px; border: 1px solid #ddd; background: #fff; font-size: 16px; cursor: pointer;}
.item-quantity input {width: 40px; height: 30px; text-align: center; border: 1px solid #ddd; margin: 0 5px;}
.item-price {text-align: right;}
.price-original {text-decoration: line-through; color: #aaa; font-size: 14px;}
.price-current {color: #e63946; font-size: 18px; font-weight: bold;}
.cart-notice {padding: 20px; font-size: 14px; color: #555555; margin-top: 24px; border-radius: 20px; border: 1px solid #e4e4e4;}
.cart-notice .title {display: block; font-size: 15px; font-weight: 700; margin: 0 0 6px; color: #333333;}

.order-summary-wrap {position: sticky; top: 40px; height: fit-content;}
.order-summary {box-sizing: border-box; padding: 24px; border-radius: 20px; width: 280px; background: #f8f8f8;}
.order-summary .order-summary-title {font-size: 18px; line-height: 1; color: #111111; font-family: "PLBold"; margin: 0 auto 20px;}
.order-summary .order-summary-list {margin: 16px 0;}
.order-summary .order-summary-item {display: flex; font-size: 14px; justify-content: space-between; margin-bottom: 8px;}
.order-summary .order-summary-item .value img {vertical-align: middle; margin: -2px 4px 0 0;}
.order-summary .order-summary-item dt {color: #888888;}
.order-summary .order-summary-item dd {color: #555555; font-weight: 600; margin: 0;}
.order-summary .order-summary-total {display: flex; justify-content: space-between; margin-top: 20px; align-items: center;}
.order-summary .order-summary-total .label {color: #333333; font-size: 18px; font-weight: 500;}
.order-summary .order-summary-total .value {color: #ff3838; font-size: 22px; font-weight: 700;}
.order-summary .order-summary-total .value .txt-USD {color: #ff3838 !important;}
.divider {margin: 16px 0;}

.price-box {background: #f8f8f8; padding: 6px 12px; border-radius: 8px;}
.price-box div {width: 100%; display: flex; justify-content: space-between; line-height: 24px; font-size: 13.5px;}
.price-box .dc-badge,
.price-box .dc-badge2 {display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 4px; line-height: 14px; border-radius: 4px; border-width: 1px; border-style: solid;}
.price-box .dc-badge {background: #ffe9e9; border-color: rgba(255,56,56,0.1); color: #ff3838;}
.price-box .dc-badge2 {background: #ff3838; border-color: #ff3838; color: #ffe9e9}
.sale_tit strong {color: #111111; font-size: 14px; font-weight: 600;}

    #wrap {width: 1200px;}
    #order {width: 1200px;}
	#order ul {height: auto; border-left: none;}
	#order ul a {border: 0; float: none; color: #555555; font: inherit; text-align: left; line-height: 1.3;}
	#order ul a:hover,
	#order ul a:active,
	#order ul a:focus,
	#order ul a.select {color: inherit; background: none;}
	#order .list_option {display: flex; justify-content: space-between; float: none; border: 0; background: 0; margin: 0 0 24px 0; line-height: 1; height: auto;}
	.subTop-A {display: flex; margin: -4px 0 40px; justify-content: space-between;}
	.subTop-A .subTitle-A {font-size: 22px; line-height: 1; color: #111111; font-family: "PLBold";}
	.subTop-A .indicator {display: flex; font-size: 16px; font-family: "PLBold"; color: #888888;}
	.subTop-A .indicator > div {position: relative; margin-right: 36px;}
	.subTop-A .indicator > div.active-page {color: #555555;}
	.subTop-A .indicator > div::after {display: block; content: ""; width: 24px; height: 24px; background: url('../../img/ico/ico-next-h24.svg') no-repeat; background-size: 24px; position: absolute; right: -30px; top: -3px;}
	.subTop-A .indicator > div:last-child {margin-right: 0;}
	.subTop-A .indicator > div:last-child::after {display: none;}
	.column-div {margin-bottom: 64px; display: flex; gap: 40px; position: relative;}
	
	.cartCss {border-bottom: none;}
	.cart-row {display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #dedede; gap: 12px;}
	.cart-row .cart-cell {font-size: 14px; color: #333333;}
    .cart-row .cart-cell > a {text-align: left;}
	.cart-row .cart-cell.numCss {align-self: flex-start; width: 24px; height: 100%;}
	.cart-row .cart-cell.thumbCss {align-self: flex-start; flex-shrink: 0; height: 100%; border-radius: 8px; overflow: hidden; border: 1px solid #ededed; border-width: 0 1px 1px 1px;}
	.cart-row .cart-cell.thumbCss .item-num {background: #162A4A; color: #ffffff; font-size: 14px; font-weight: 500; line-height: 20px;}
    .cart-row .cart-cell.priceCss {display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; width: 112px;}
	.cart-row .cart-cell.priceCss span {display: inline-block; width: fit-content; font-size: 18px; color: #111111;}
	.cart-row .cart-cell.priceCss span.cart_pblack {font-size: 15px; color: #888888;}
	.cart-row .cart-cell.priceCss span.cart_pblue {
		font-size: 12px; color: #FF3838; padding: 0px 4px; border-radius: 4px; font-weight: 700; background: #FFE9E9; margin-bottom: 4px; border: 1px solid rgba(255,56,56,0.1);
	}
	.cart-row .cart-cell.qtyCss {display: flex; width: 80px; flex-direction: column; justify-content: center; text-align: center;}
	.cart-row .cart-cell.weightCss {width: 72px; font-size: 14px;}
	.cart-row .cart-cell.itemCss {text-align: left; font-size: 15px; flex-grow: 1;}
	.cart-row .cart-cell.itemCss > a > span {display: inline-block;}
	.cart-row .cart-cell.itemCss > a > span.info-wrap {font-size: 14px; color: #555555; font-weight: 600; padding-bottom: 8px; display: flex; gap: 8px; align-items: center;}
	.cart-row .cart-cell.itemCss > a > span.info-wrap > span {display: flex; align-items: center; gap: 4px; margin-right: 12px;}
    .cart-row .cart-cell.itemCss > a .box-wrap {display: flex; align-items: center; gap: 6px; position: relative;}
    .cart-row .cart-cell.itemCss > a .box-wrap::before {content: ""; display: block; width: 1px; height: 12px; position: absolute; top: 2px; left:-12px; background: #d4d4d4;}
    .cart-row .cart-cell.itemCss > a .box-wrap > span {display: flex; gap: 4px; align-items: center; font-weight: 400; font-size: 13px;}
    .cart-row .cart-cell.itemCss > a > span.option,
	.cart-row .cart-cell.itemCss > a > span.capacity,
	.cart-row .cart-cell.itemCss > a > span.capacity + span {color: #888888; font-size: 14px;}
	.cart-row .cart-cell.itemCss > a span.item-name {font-size: 15px; color: #333333; font-weight: 600;}
	.cart-row .cart-cell.optCss {width: 104px; font-weight: 500;}
    .cart-row .cart-cell.deleteBtn {display: flex; width: 20px;}
	.cart-row .cart-cell .cart-input-wrapper {display:flex; flex-direction:column; align-items:center; gap: 8px; position: relative;}
	.cart-row .cart-cell .cart-input-wrapper .tooltip {
		position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 8px); width: max-content;
	}
	.cart-row .cart-cell .cart-input-wrapper .tooltip span {
		display: block; padding: 8px 16px; background-color: rgb(233 241 255 / 90%); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
		font-size: 13px; color: #005bf1;
	}
	.cart-row .cart-cell .cart-input-wrapper .tooltip span strong {color: #ff3838;}
	.cart-row .cart-cell .cart-input-wrapper .tooltip font {
		display: block; padding: 8px 16px; background-color: rgb(255 242 242 / 90%); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
		font-size: 13px; color: #ff3838;
	}
	.cart-row .cart-cell .quantity-controls {display: flex; justify-content: center;}
	.cart_input {text-align: center; color: #555555; font-size: 14px; width: 32px; border: 1px solid #dedede; border-width: 1px 0; border-radius: 0; line-height: 22px; padding: 0; height: 24px;}
	.cart-row .cart-cell.priceCss span.cart_pblue2 {
		font-size: 12px; color: #ffe9e9; padding: 0px 4px; border-radius: 4px; font-weight: 700; background: #ff3838; margin-bottom: 4px; border: 1px solid rgba(255,56,56,0.1);
	}
	.popup-overlay {
		position: fixed; top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0, 0, 0, 0.3); z-index: 9999;
		display: flex; align-items: center; justify-content: center;
	}
	.popup-box {
		background: #fff; padding: 20px; width: 700px;
		max-height: 90vh; overflow-y: auto; border-radius: 10px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	}
	.popup-header {
		display: flex; justify-content: space-between; align-items: center;
		margin-bottom: 10px;
	}
	.canvas-container {
		width: 100%; height: 400px; margin-top: 10px;
	}