@charset "utf-8";

/************************************************************
	쇼핑 리스트 스타일
************************************************************/

/* 카테고리 */
.shop_category .cate_dep1								{ position:relative; margin-bottom:1.8rem;}
.shop_category .cate_dep1 .btn_ctf_dep1			{ position:relative; padding-right:2rem; font-size:2.4rem; color:#181818; font-weight:700; letter-spacing:-.05em; text-align:left; }
.shop_category .cate_dep1 .btn_dep1				{ position:relative; padding-right:2rem; font-size:2.4rem; color:#181818; font-weight:700; letter-spacing:-.05em; text-align:left; }
.shop_category .cate_dep1 .btn_dep1::before		{ position:absolute; top:.4em; right:.1em; width:12px; height:12px; border:solid #181818; border-width:1px 1px 0 0; transform:rotate(135deg); content:''; -webkit-transition: all .3s ease; transition: all .3s ease; }
.shop_category .cate_dep1.on .btn_dep1::before	{ top:.6em; transform:rotate(-45deg); }
.shop_category .cate_dep1 .dep1_list				{ display:none; position:absolute; top:100%; left:0; min-width:9rem; padding:.8em; background:#fff; -webkit-box-shadow:0 0 10px rgba(0,0,0,.1); -moz-box-shadow:0 0 10px rgba(0,0,0,.1); box-shadow:0 0 10px rgba(0,0,0,.1); border-radius:1rem; z-index:1000;}
.shop_category .cate_dep1.on .dep1_list			{ display:block;}
.shop_category .cate_dep1 .dep1_list li				{ font-size:1.2rem; letter-spacing:-.05em; font-weight:500;}
.shop_category .cate_dep1 .dep1_list li a			{ display:block; padding:.3em;}

.shop_category .cate_dep2								{ overflow-x:auto; margin-bottom:1.5rem; padding:.5rem 0; border-top:1px solid #181818}
.shop_category .cate_dep2 .flex						{ flex-wrap:nowrap; gap:1.5em; width:max-content}
.shop_category .cate_dep2 li a						{ display:block; padding:.4em 0; font-size:1.28rem; color:#222; font-weight:400; letter-spacing:-.03em; background:#fff; }
.shop_category .cate_dep2 li.on a					{ color:var(--m-color, #181818); font-weight:700;}

.shop_category .cate_dep3								{ gap:.5rem; justify-content:center; margin-bottom:3em; }
.shop_category .cate_dep3 li a						{ display:block; position:relative; height:50px; padding:0 1.5em; font-size:1.15rem; color:#555; letter-spacing:-.05em; line-height:50px; background:#f7f7f7; border-radius:2em}
.shop_category .cate_dep3 li a:hover,
.shop_category .cate_dep3 li a:focus				{ text-decoration:underline;}
.shop_category .cate_dep3 li.on a					{ font-weight:700; color:#fff; background:var(--m-color, #181818); z-index:1}

/* 리스트 바 */
.shop_list_bar										{ justify-content:space-between; align-items:center; position:relative; padding-bottom:.5em; border-bottom:1px solid #000;}
.shop_list_bar .count_pd						{ font-size:1.1em; color:#000; letter-spacing:-.05em; line-height:40px; }
.shop_list_bar .count_pd strong				{ letter-spacing:0;}
.shop_list_bar .order_type						{ position:relative; padding-left:1.5rem; background:url(/board/img/shop/icon_shop_orderType.png) no-repeat 0 50% / 15px}
.shop_list_bar .order_type select				{ width:130px; height:40px; padding-left:.5em; border:0; cursor:pointer}

/* 리스트 */
.shop_list										{ position:relative; letter-spacing:-.03em; word-break:break-all }
.shop_list .img									{ position:relative; overflow:hidden; margin-bottom:.8em; border:1px solid #ebebeb; border-radius:1em }	
.shop_list .img .img_flag						{ position:absolute; right:1.2rem; top:1.2rem; }
.shop_list .img .img_flag img				{ max-height:50px}
.shop_list .img .img_flag img + img		{ margin-left:.5em;}
.shop_list .img .btn							{ gap:.5rem; position:absolute; right:.7rem; bottom:.7rem; z-index:3 }
.shop_list .img .btn button					{ width:2.5rem; height:2.5rem; border-radius:50%; }
.shop_list .img .btn button svg			{ width:50%; height:100%}
.shop_list .btn_wish							{ background:rgba(255,255,255,.9); }
.shop_list .btn_wish svg						{ fill:#c0c0c0; }
.shop_list .btn_wish.on svg					{ fill:var(--red); }
.shop_list .btn_order							{ background:var(--orange);}
.shop_list .btn_order svg					{ fill:#fff; }
.shop_list .shop_name						{ display:block; margin-top:.7em; color:#888; font-size:.93rem }
.shop_list .title									{ display:-webkit-box; margin:.2em 0; max-height:2.6em; overflow:hidden; font-size:1.26em; color:#000; font-weight:400; letter-spacing:-.04em; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.shop_list .info									{ max-height:1.3em; overflow:hidden; font-size:1.067em; font-weight:300; color:rgba(0,0,0,0.6); line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.shop_list .price								{ align-items:center; gap:.3em; margin:.3em 0 .5em; font-size:1.16em; font-weight:400; color:#000; }
.shop_list .price del							{ color:#5d5d5d; font-weight:300;}
.shop_list .price .amount					{ font-size:1.03em; font-weight:500;}
.shop_list .price .amount span			{ font-size:.85em;  font-weight:300;}
.shop_list .item_bottom						{ justify-content:space-between; padding-top:.6em; margin:.6em 0; font-size:.9rem; border-top:1px solid #efefef }
.shop_list .point								{ letter-spacing:-.03em; font-weight:300;}
.shop_list .point em							{ font-weight:700;}

@media all and (min-width:1025px){
	.shop_list									{ gap:2rem 1.6%; margin:1.5rem 0; }
	.shop_item									{ width:23.8%; }
}
@media all and (max-width:1024px){	
	/* 카테고리 */
	.shop_category .cate_dep1							{ width:92%; margin:0 auto .3em}
	.shop_category .cate_dep1 .btn_dep1			{ font-size:2.15rem; }
	.shop_category .cate_dep2							{ padding-left:4%; border-top:0; border-bottom:1px solid #ddd;}
	.shop_category .cate_dep3 li a					{ height:40px; font-size:1.1rem; line-height:40px; }

	/* 리스트 바 */
	.shop_list_bar											{ padding:.3em 1em}
	.shop_list_bar .order_type select					{ width:auto; height:30px; padding:0; background:none}
	.shop_list_bar .shop_type							{ display:flex; flex-wrap:wrap;}
	.shop_list_bar .view_type > button				{ display:block; width:30px; height:100%; background:no-repeat 50% 50%}
	.shop_list_bar .view_type .list_type				{ background-image:url(/board/img/shop/icon_shop_list.png)}
	.shop_list_bar .view_type .img_type				{ background-image:url(/board/img/shop/icon_shop_img.png)}

	/* 리스트 */
	.shop_item												{ position:relative; padding:1rem;  }
	.shop_list .title											{ font-size:1.2em;}
	.shop_list .price										{ font-size:1.1em;}
	.shop_list .price .discount::before					{ top:.2em}

	/* 리스트-이미지형 */
	.shop_list.img_type										{ display:flex; flex-wrap:wrap; }
	.shop_list.img_type>li									{ width:50%; border:solid #ccc; border-width:0 1px 1px 0;  }
	.shop_list.img_type .price .amount					{ display:block; font-size:1em;}
	.shop_list.img_type>li:nth-child(2n)					{ border-right:0}
	.shop_list.img_type>li:last-child:nth-child(2n+1){ border-right:1px solid #ccc}

	/* 리스트-목록형 */
	.shop_list.list_type>li				{ display:flex; align-items:center; width:100%; border-bottom:1px solid #ccc;}
	.shop_list.list_type .img			{ width:140px; border-radius:.5rem}
	.shop_list.list_type .con_box	{ padding:0 0 0 1em; width:calc(100% - 140px);}
	.shop_list.list_type .title			{ margin-top:0; font-size:1.1rem; -webkit-line-clamp:1}
	.shop_list.list_type .info			{ display:none}
}
@media all and (max-width:768px){
	/* 카테고리 */
	.shop_category .cate_dep3 li a				{ height:36px; padding:0 1em; font-size:1rem; line-height:36px; }
}
@media all and (max-width:568px){
	/* 카테고리 */
	.shop_category .cate_dep1 .btn_dep1			{ font-size:1.9rem; }
	.shop_category .cate_dep1 .dep1_list li			{ font-size:1.1rem;}
	.shop_category .cate_dep2 .flex					{ gap:1em}
	.shop_category .cate_dep2 li a					{ padding:.2em 0; font-size:1.18rem;}
	.shop_category .cate_dep3							{ margin-bottom:1rem;}
	.shop_category .cate_dep3 li a					{ padding:0 .8em; font-size:.95rem; }

	/* 리스트 바 */
	.shop_list_bar .count_pd,
	.shop_list_bar .order_type select			{ font-size:1rem;}
	
	/* 리스트 */
	.shop_list .img .img_flag						{ right:.7rem; top:.7rem; }
	.shop_list .img .img_flag img				{ max-height:30px}
	
	/* 리스트-목록형 */
	.shop_list.list_type .img					{ margin-bottom:0}
	.shop_list.list_type .shop_name			{ margin-top:.2em;}
	.shop_list.list_type .img .btn				{ gap:.2em; right:.3em; bottom:.3em}
	.shop_list.list_type .img .btn button		 { width:2.1rem; height:2.1rem}
}
@media all and (max-width:468px){
	/* 리스트 */
	.shop_list .img .btn									{ gap:.3em; right:.5em; bottom:.5em}
	.shop_item												{ padding:.7rem}
	.shop_list .price										{ gap:.1em; }
	.shop_list .price .discount							{ padding-right:.7em; font-size:1.06em; }

	/* 리스트-이미지형 */
	.shop_list.img_type .price							{ gap:0 .2em}
	.shop_list.img_type .price .amount				{ width:100%; font-size:1.2rem;}
	.shop_list.img_type .item_bottom					{ flex-direction:column; gap:.2em }
}
@media all and (max-width:368px){
	/* 리스트 */
	.shop_list .img .img_flag img				{ max-height:25px}
}