@charset "utf-8";

.shop-filter {background:#eef1f9; margin-bottom:var(--size60);}
.shop-filter .tit {position:relative; padding:var(--size40) var(--size50); font-size:var(--font-size-22); font-weight:700; line-height:1.2; color:#222; cursor:pointer;}
.shop-filter .tit:before {content:''; position:absolute; top:50%; right:var(--size50); margin-top:-5px; width:10px; height:10px; border-right:2px solid #0d2f8b; border-top:2px solid #0d2f8b; transform:rotate(135deg); transition:0.2s all ease;}
.shop-filter .inner {padding:var(--size50); padding-top:0;}
.shop-filter .col {padding:var(--size30) 0; border-bottom:1px solid #ddd;}
.shop-filter .col:first-child {padding-top:0;}
.shop-filter .col dl {display:flex;}
.shop-filter .col dt {width:120px; font-weight:600; color:#333;}
.shop-filter .col dd {flex:1 1 auto; min-width:0; width:1%;}
.shop-filter .col .item {margin-right:var(--size40);}
.shop-filter .col .item:last-child {margin-right:0;}
.shop-filter .tit.active:before {transform:rotate(-45deg);}

/* 리스트 */
.goods-list .items {display:flex; flex-wrap:wrap; margin:0 -13px;}
.goods-list .item {width:25%; padding:0 13px; margin-bottom:var(--size55);}
.goods-list .item.none {width:100%; padding:var(--size70) 0; margin:0; text-align:center; color:#767676;}
.goods-list .item .inner {display:block; text-align:center;}
.goods-list .item .thumb {position:relative; padding-bottom:142%; margin-bottom:var(--size30); overflow:hidden;}
.goods-list .item .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.goods-list .item .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.goods-list .item .cate {color:#0d2f8b; line-height:1.3em; margin-bottom:0.3em;}
.goods-list .item .tit {color:#222; font-size:var(--font-size-18); font-weight:700; line-height:1.4em;}

/* 제품 상세 */
.goods-depth {margin-bottom:var(--size60);}
.goods-depth span {display:inline-block; position:relative; padding-right:0.75em; margin-right:0.75em; font-weight:600; line-height:1; color:#999;}
.goods-depth span:last-child {padding-right:0; margin-right:0; color:#0d2f8b;}
.goods-depth span:before {content:''; position:absolute; right:-4px; top:50%; margin-top:-4px; width:8px; height:8px; border-right:2px solid #ddd; border-top:2px solid #ddd; transform:rotate(45deg);}
.goods-depth span:last-child:before {display:none;}

/* 제품 정보 */
.goods-summary {display:flex; align-items:flex-start; gap:clamp(40px, calc(125/ var(--inner) * 100vw ),125px); margin-bottom:var(--size120);}
.goods-summary .image {position:relative; width:40%; max-width:540px;}
.goods-summary .thumb {position:relative; padding-bottom:142%; overflow:hidden;}
.goods-summary .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.goods-summary .thumb:after {content:""; position:absolute; z-index:1; top:0; left:0; right:0; bottom:0; border:1px solid #ddd; pointer-events:none;}

.goods-summary .links {display:flex; position:absolute; left:0; bottom:0; width:100%; border-top:1px solid #ddd;}
.goods-summary .links a {display:flex; align-items:center; justify-content:center; width:50%;}
.goods-summary .links a img {display:block; max-height:72px;}
.goods-summary .links a:hover {background:#fafafa;}

.goods-summary .info {flex:1 1 auto; min-width:0; width:1%;}
.goods-summary .cate {margin-bottom:var(--size25);}
.goods-summary .cate span {display:inline-block; position:relative; padding-right:0.5em; margin-right:0.5em; font-size:1.13em; font-weight:600; line-height:1.4; color:#999;}
.goods-summary .cate span:before {content:''; position:absolute; right:-1px; top:50%; margin-top:-0.395em; width:1px; height:0.78em; background:#ccc;}
.goods-summary .cate span:last-child {margin-right:0; padding-right:0;}
.goods-summary .cate span:last-child:before {display:none;}
.goods-summary .tit {padding-bottom:0.5em; font-size:clamp(20px, calc(48/var(--inner) * 100vw ),48px); font-weight:700; line-height:1.2; color:#222;}
.goods-summary .info-list {padding:var(--size25) 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.goods-summary .info-list ul li {position:relative; padding-left:0.69em;}
.goods-summary .info-list ul li:before {content:''; position:absolute; left:0; top:0.8em; width:0.19em; height:0.19em; background:#0d2f8b; border-radius:100%;}
.goods-summary .box {padding:var(--size20) 0; border-bottom:1px solid #ddd;}
.goods-summary .box dl {display:flex;}
.goods-summary .box dt {width:115px; font-size:1.13em; font-weight:600; color:#999;}
.goods-summary .box dd {flex:1 1 auto; min-width:0; width:1%}
.goods-summary .box dd strong {font-weight:1.13em; font-weight:600; color:#222;}.goods-summary .box dd .item {display:inline-block; padding:0.5em 1em; border:1px solid #ddd; background:0; border-radius:100vh; line-height:1; margin-right:5px; margin-bottom:-5px;}

.goods-summary .total {margin:var(--size70) 0 var(--size40); font-weight:600; line-height:1.1; text-align:right;}
.goods-summary .total .price {margin-left:0.65em; font-size:1.5em; color:#0d2f8b;}
.goods-summary .btns .row {display:flex; gap:10px;}
.goods-summary .btns .cart,
.goods-summary .btns .buy {flex:1;}
.goods-summary .btns .buy a {background:#0d2f8b; color:#fff; border-color:#0d2f8b;}
.goods-summary .btns .col a {display:flex; height:100%; align-items:center; justify-content:center; border:1px solid #ddd; font-size:1.13em; font-weight:600; line-height:1;} 
.goods-summary .btns .col .btn-wish {width:65px; height:65px; text-indent:-999em; overflow:hidden; background:url('/images/shop/icon-wish.png') no-repeat 50% 50%/36% auto;}
.goods-summary .btns .col .btn-wish.on {background-image:url('/images/shop/icon-wish-on.png');}
.opt-toggle {display:none;}
.cart-opt .btns.mobile-btn {display:none;}

/* 전체금액 */
.total-price {display:flex; justify-content:space-between; background:#f6f6f6; color:#555; padding:37px 40px; font-size:17px; font-weight:400; line-height:1.4em; margin:40px 0;}
.total-price h3 {width:50%; color:#2c2c2c; font-size:25px; font-weight:500; line-height:1.3em; margin-top:-5px;}
.total-price ul {width:50%;}
.total-price ul li {display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid #eee; overflow:hidden;}
.total-price ul li:first-child {padding-top:0;}
.total-price ul li:last-child {padding-bottom:0; border-bottom:0; color:#000; font-weight:700;}
.total-price ul li:last-child .price {font-size:1.2em; font-weight:700;}
.total-price ul li .item {}
.total-price ul li .price {text-align:right;}
.total-price + .buttons {margin-top:70px;}

/* 수량 */
.quantity {display:inline-block; position:relative; vertical-align:middle; width:90px; padding:0 29px;}
.quantity .input {display:block; width:100%; height:28px; text-align:center; color:#000; font-size:12px; padding:6px; border:1px solid #e5e5e5;}
.quantity .qty-bt {position:absolute; top:0; width:30px; height:28px; overflow:hidden; text-indent:-999em; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; border:1px solid #e5e5e5;}
.quantity .qty-down {left:0; background-image:url("../images/shop/icon_minus.png"); border-radius:100vh 0 0 100vh;}
.quantity .qty-up {right:0; background-image:url("../images/shop/icon_plus.png"); border-radius:0 100vh 100vh 0;}

/* 비슷한 제품 */
.relative-list {margin-top:var(--size120);}
.relative-list h3 {margin-bottom:1em; font-size:clamp(20px, calc(38/var(--inner) * 100vw ),38px); font-weight:700; line-height:1.2; color:#222;}

/* 적립금 */
.point .head {margin-bottom:15px;}
.point .head dl {border:1px solid #ccc; background:#fff; text-align:center; font-weight:bold;}
.point .head dt {padding:8px 0; background:#f0f0f0; border-bottom:1px solid #ddd; color:#666;}
.point .head dd {padding:8px 0;}
.point table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:15px; line-height:1.5em;}
.point table th {padding:12px 20px; font-weight:400; border-top:1px solid #333; border-bottom:1px solid #333;}
.point table td {padding:12px 20px; text-align:center; border-bottom:1px solid #dfdfdf; font-weight:400; color:#686868;}
.point .title {font-weight:bold; margin:0 0 5px 0;}
.point .list dl {border:1px solid #ccc; background:#fff; margin:0 0 10px 0;}
.point .list dt {padding:8px 10px; background:#f0f0f0; font-weight:bold; border-bottom:1px solid #ddd; color:#333;}
.point .list dd {padding:3px 10px; font-size:12px; overflow:hidden;}
.point .list dd:nth-child(2) {padding-top:10px;}
.point .list dd:last-child {padding-bottom:10px;}
.point .list dd .fl {color:#666;}
.point .list dd .fr {color:#999;}
.point .list dd strong {color:#d20000;}

/* 쇼핑 테이블 */
.cart-all-select {color:#333; font-size:16px; font-weight:500; line-height:1.3em; padding:0 7px; margin-bottom:15px;}

.shop-table {border-top:1px solid #242424; margin-bottom:10px;}
.shop-table ul li {display:flex; align-items:center; padding:25px 7px; border-bottom:1px solid #dfdfdf;}
.shop-table .order-check {width:50px;}
.shop-table .order-image {width:70px; margin-right:20px;}
.shop-table .order-title {flex:1 1 auto; min-width:0; width:1%;}
.shop-table .order-title .tit {color:#222; font-size:17px; font-weight:500; line-height:1.5em; margin-bottom:5px;}
.shop-table .order-title .opt {color:#888; font-size:14px; font-weight:400; line-height:1.5em;}
.shop-table .order-quantity {width:86px; text-align:center;}
.shop-table .order-quantity .input {width:100%; height:30px; padding:0; font-size:14px; line-height:1.5em; text-align:center; margin-bottom:4px;}
.shop-table .order-quantity .btn-pack {display:block; width:100%;}
.shop-table .order-qnt {width:100px; text-align:center;}
.shop-table .order-price {width:130px; font-weight:500; margin:0 20px; text-align:right;}
.shop-table .order-delete {width:18px; text-align:right; margin-left:20px;}
.shop-table .order-btn {width:95px; text-align:center; margin-left:20px;}
.shop-table .order-btn p {margin:4px 0;}
.shop-table .order-btn strong {font-weight:500;}
.shop-table .order-btn .btn-pack.small {display:block; margin:4px auto; width:100%; padding:0;}
.shop-table .ico-delete {position:relative; vertical-align:middle; margin-top:-.2em; display:inline-block; overflow:hidden; text-indent:-999em; width:18px; height:18px; overflow:hidden;}
.shop-table .ico-delete:before, .shop-table .ico-delete:after {content:""; position:absolute;top:0;left:8px; height:100%;width:2px;background-color:#999;}
.shop-table .ico-delete:before {transform:rotate(45deg);}
.shop-table .ico-delete:after {transform:rotate(-45deg);}
.shop-table .ico-delete:hover {opacity:.5;}

/* 주문정보 설명 */
.order-info {margin:20px 0; color:#666; font-size:14px; line-height:24px;}
.order-info em {color:#ed1c24; font-style:normal;}

.order-desc {margin-top:var(--size60); background:#f5f5f5; padding:var(--size30); border-radius:0.5em; color:#787878; line-height:1.5;}
.order-desc ul li:not(:last-child) {margin-bottom:0.5em;}

.order-complete {margin-bottom:20px; padding:25px 30px; font-size:16px; line-height:1.3em; color:#2c2c2c; letter-spacing:-.02em; background:#fafafa;}
.order-complete .item {display:inline-block; margin-right:40px;}
.order-complete .item strong {margin-left:5px;}
.order-complete .item:last-child {margin-right:0;}

.order-date {background:#fafafa; padding:20px; margin-top:50px; font-size:16px; line-height:1.3em; border:1px solid #333; border-bottom:0;}
.order-date:after {content:""; display:block; clear:both;}
.order-date strong {margin-left:10px;}
.order-date a {float:right; color:#888; letter-spacing:-.03em;}
.order-date a:after {content:"+"; color:#2c2c2c; font-weight:500; margin-left:10px;}
.order-date .bar {color:#ddd; margin:0 12px; vertical-align:top; font-weight:100;}

/* 주문정보 테이블 */
.order-info-title {margin-bottom:10px; margin-top:50px;}
.order-info-title:after {content:" "; display:block; clear:both;}
.order-info-title h3 {float:left; color:#333; font-size:20px; font-weight:700; line-height:1.3em;}
.order-info-title .chk {float:left; margin:6px 0 0 20px; font-family:dotum; font-size:14px; line-height:16px;}
.order-info-table {width:100%; border-collapse:collapse; border-spacing:0px; margin-bottom:50px;}
.order-info-table tbody th {padding:7px 15px; height:59px; background:#f8f8f8; border:1px solid #ddd; font-weight:400; color:#333; text-align:left;}
.order-info-table tbody td {padding:7px 15px; background:#fff; border:1px solid #ddd; color:#666;}
.order-info-table tbody td * {vertical-align:middle;}
.order-info-table tbody td .input-point {padding:0 5px; height:30px; border:1px solid #ccc; background:#fafafa; line-height:28px;}
.order-info-table tbody td .txt {color:#4d6ccd; font-size:11px; margin-top:4px;}
.order-info-table tbody td .point {color:#ff0000;}
.order-info-table tbody td .radiobox {margin-right:25px;}
.guest-private-agree {text-align:center; margin-bottom:50px;}
.guest-private-agree .scroll-box {position:relative; height:120px; border:1px solid #d8d8d8; text-align:left; font-size:14px; line-height:18px; background:#f7f7f7; color:#666; padding:10px; margin-bottom:20px; overflow:auto;}



@media (max-width:640px) {
	.goods-summary .links a {padding:5px;}

	/* .cart-opt {position:fixed; bottom:0; left:0; width:100%; background:#fafafa; z-index:100;}
	.cart-opt .opt-toggle {position:absolute; top:-19px; left:0; width:100%; height:19px; overflow:hidden; text-indent:-9999em; background:url("../images/shop/btn_view_cart_dropdonw.png") 50% 50% no-repeat; background-size:auto 100%;}
	.cart-opt .inner {display:none;}
	.cart-opt .btns.mobile-btn {display:block;}
	.cart-opt .table th {display:none;}
	.cart-opt .table td {border:0 !important; padding:0 !important;}
	.cart-opt.active {padding:14px 10px;}
	.cart-opt.active .opt-toggle {display:block;}
	.cart-opt.active .inner {display:block;}
	.cart-opt.active .btns.mobile-btn {display:none;}
	 */
	.cart-all-select {padding:0 5px; margin-bottom:12px; font-size:14px;}

	.shop-table ul li {flex-wrap:wrap; padding:15px 5px; position:relative;}
	.shop-table .order-check {width:35px; order:1;}
	.shop-table .order-image {position:relative; width:45px; height:45px; overflow:hidden; margin-right:15px; order:2;}
	.shop-table .order-image img  {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
	.shop-table .order-title {flex:0 0 auto; width:calc(100% - 110px); order:3;}
	.shop-table .order-title .tit {font-size:15px; margin-bottom:0;}
	.shop-table .order-title .opt {font-size:12px; margin-top:3px;}
	.shop-table .order-delete {position:absolute; top:15px; right:5px;}
	.shop-table .order-price {order:4; width:auto; margin:5px 0 0 0; text-align:left; margin-top:6px;}	
	.shop-table .order-quantity {order:5; width:auto; display:flex; margin:5px 0 0 60px;}
	.shop-table .order-quantity .input {width:60px; height:26px; margin-bottom:0;}
	.shop-table .order-qnt {order:3; width:auto; text-align:left; margin:6px 15px 0 60px;}
	.shop-table .order-image + .order-title + .order-price {margin-left:60px;}
	.shop-table .order-check + .order-image + .order-title + .order-quantity + .order-price {margin-left:95px;}
	.shop-table .order-check + .order-image + .order-title + .order-quantity {margin-left:95px;}
	.shop-table .order-btn {order:10; display:flex; align-items:center; margin:10px 0 0 60px; text-align:left; width:calc(100% - 60px); font-size:12px;}
	.shop-table .order-btn p {width:calc(25% - 4px) !important}
	.shop-table .order-btn .btn-pack {width:calc(25% - 4px) !important; margin:0 2px !important;}

	.order-info-title {margin:40px 0 8px;}
	.order-info-title h3 {font-size:16px;}
	.order-info-title .chk {font-size:12px;}

	.order-info-table colgroup col:nth-child(1) {width:100px !important;}
	.order-info-table tbody th {padding:6px 8px; height:40px; line-height:1.5em;}
	.order-info-table tbody td {padding:6px 8px; line-height:1.5em;}
	.order-info-table #orderName,
	.order-info-table #shipName,
	.order-info-table #bankType,
	.order-info-table #bankName,
	.order-info-table #bankDate {width:100% !important;}
	.order-info-table #orderPhone1,
	.order-info-table #orderPhone2,
	.order-info-table #orderPhone3,
	.order-info-table #orderMobile1,
	.order-info-table #orderMobile2,
	.order-info-table #orderMobile3,
	.order-info-table #shipPhone1,
	.order-info-table #shipPhone2,
	.order-info-table #shipPhone3,
	.order-info-table #shipMobile1,
	.order-info-table #shipMobile2,
	.order-info-table #shipMobile3 {width:calc(33.33333333% - 7px) !important;}

	.order-info {font-size:12px; line-height:1.5em; margin:15px 0;}

	.order-complete {padding:15px; font-size:14px;}
	.order-complete .item {display:block; margin:5px 0;}

	.order-date {padding:15px; font-size:14px; margin-top:35px;}
	.order-date .bar {display:block; width:100%; height:0; overflow:hidden; text-indent:-999em; margin:4px 0;}
	
	.total-price {margin:20px 0; padding:20px; font-size:14px;}
	.total-price h3 {display:none;}
	.total-price ul {width:100%;}
	.total-price ul li {padding:13px 0;}
	.total-price + .buttons {margin-top:40px;}

}