@charset "utf-8";

#itemList{position:relative;padding:30px 0;font-size:16px;font-weight:500;line-height:1.8;color:#777;font-family:var(--e-font), var(--k-font)}

/* 상품 list.50.skin 커스텀 */ 
#itemList ul{display:grid;grid-template-columns:repeat(4,1fr);column-gap:45px}
#itemList ul li{line-height:1.45}
#itemList ul li .thum{overflow:hidden;position:relative}
#itemList ul li .thum a{display:block}
#itemList ul li .thum img{width:100%;height:auto}
#itemList ul li .thum .soldout{display:flex;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:18px;font-weight:600;color:#fff;background:rgba(0, 0, 0, .5)}
#itemList ul li .thum .soldout span{margin:auto}
#itemList ul li .thum .btns{opacity:0;display:flex;justify-content:center;position:absolute;bottom:35px;z-index:1;transform:translateY(20px);width:100%;column-gap:8px;transition:all .3s}
#itemList ul li .thum .btns button{display:flex;width:60px;height:60px;border-radius:50%;color:#fff;background:rgba(0, 0, 0, .8)}
#itemList ul li .thum .btns button span{margin:auto;font-size:30px}
@media(hover:hover){#itemList ul li .thum:hover .btns{opacity:1;transform:translateY(0)}}
#itemList ul li .thum .sct_cartop{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;padding:40px;background:rgba(255, 255, 255, .8)}
#itemList ul li .thum .sct_cartop > div{height:100%}
#itemList ul li .thum .sct_cartop form{display:flex;flex-flow:column;justify-content:center;height:100%}
#itemList ul li .thum .sct_cartop label{font-size:14px;font-weight:600;color:#000}
#itemList ul li .thum .sct_cartop select{height:45px;margin-top:6px;padding:0 15px;border-radius:4px;border:1px solid #000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:url(img/select_arrow.png) no-repeat 96% 50% #fff}
#itemList ul li .thum .sct_cartop button{height:45px;margin-top:6px;border:none;border-radius:4px}
#itemList ul li .thum .sct_cartop .cartopt_cart_btn{color:#fff;background:#000}
#itemList ul li .thum .sct_cartop .cartopt_close_btn{color:#fff;background:#999}
#itemList ul li .name{margin:25px 0 5px;font-size:16px;font-weight:700;color:#000}
#itemList ul li .desc{font-size:14px;color:#999;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#itemList ul li .cost_cust{margin:12px 0 2px;font-size:18px;font-weight:600;color:#aaa;text-decoration:line-through}
#itemList ul li .cost{font-size:20px;font-weight:700;color:#000}
#itemList ul li .cost span{color:#ff5400}
#itemList ul li .icon_area{margin-top:10px}
#itemList ul li .icon_area .sit_icon{display:flex;justify-content:flex-end}
#itemList ul li .icon_area .sit_icon span{padding:6px 10px;border-radius:3px;font-size:12px;font-weight:500;line-height:1;color:#fff}
#itemList ul li .icon_area .sit_icon span+span{margin-left:2px}
#itemList ul li .icon_area .sit_icon span.shop_icon_1{background:var(--primary)}
#itemList ul li .icon_area .sit_icon span.shop_icon_2{background:var(--primary)}
#itemList ul li .icon_area .sit_icon span.shop_icon_3{background:var(--primary)}
#itemList ul li .icon_area .sit_icon span.shop_icon_4{background:var(--primary)}
#itemList ul li .icon_area .sit_icon span.shop_icon_5{background:var(--primary)}

/* 상품 리스트 타이틀 */ 
#SubTit{padding-bottom:40px;font-size:24px;font-weight:700;color:#000;font-family:var(--e-font), var(--k-font)}

@media(max-width:1520px){
#SubTit{padding:0 20px 40px}
#itemList{padding:30px 20px}
#itemList ul{column-gap:25px}
}
@media(max-width:1024px){
#itemList ul{grid-template-columns:repeat(3,1fr);row-gap:70px}
#itemList ul li .thum .btns{justify-content:flex-end;column-gap:4px;bottom:20px;opacity:1;transform:none;padding-right:15px}
#itemList ul li .thum .btns button{width:35px;height:35px}
#itemList ul li .thum .btns button span{font-size:18px}
#itemList ul li .thum .sct_cartop{padding:20px}
#itemList ul li .name{font-size:15px}
#itemList ul li .desc{font-size:13px}
#itemList ul li .cost_cust{font-size:16px}
#itemList ul li .cost{font-size:18px}
#itemList ul li .icon_area .sit_icon span{font-size:11px}
}
@media(max-width:768px){    
#SubTit{padding:12px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;font-size:16px;text-align:center}
#itemList{padding:20px}
#itemList ul{grid-template-columns:repeat(2,1fr)}
#itemList ul li .thum .soldout{font-size:15px}
#itemList ul li .thum .sct_cartop select{height:36px;font-size:13px}
#itemList ul li .thum .sct_cartop button{height:36px;font-size:13px}
}
@media(max-width:480px){
#itemList ul{column-gap:0;row-gap:50px}
#itemList ul li .thum .btns{bottom:10px;padding-right:10px}
#itemList ul li .thum .btns button{width:28px;height:28px}
#itemList ul li .thum .btns button span{font-size:15px}
#itemList ul li .info{padding:0 12px}
#itemList ul li .name{margin:10px 0 5px;font-size:14px}
#itemList ul li .desc{display:none}
#itemList ul li .cost_cust{margin:8px 0 0;font-size:14px}
#itemList ul li .cost{font-size:15px}
#itemList ul li .icon_area .sit_icon{justify-content:flex-start}
#itemList ul li .icon_area .sit_icon span{padding:4px 6px;font-size:10px}
}