.sub-container{}
.slick-slider {
  visibility: hidden;
}
.slick-slider.slick-initialized {
  visibility: visible;
}
.sub-title-wrap{display: flex; justify-content: space-between; align-items: center; border: 1px solid #eee; padding: 1rem; border-radius: 0 0 2rem 2rem;}
.st-left{display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;}
.st-right{display: flex; justify-content: space-between; align-items: center; gap: 5px;}

.category{position: relative;}
#cateBtn{border: 1px solid #8ec251;}
#cateBtn img{width: 1rem; display: inline-block; margin-left: 2px;}
#cateList{ border: 1px solid #eee; border-radius: 0.5rem; text-align: left; overflow: hidden; position: absolute; top:30px; left: 0; background-color: #fff; z-index: 1; display: none;}
#cateList li a{padding: 0.4rem 0.6rem; width: 140px; display: flex; align-items: center; gap: 0.6rem;}
#cateList li a:hover{background-color: #8ec251; color: #fff;}
.rank_ico_img img{display: inline-block; width: 1.6rem;}
.cate-details li{display: inline-block; border: 1px solid #8ec251; border-radius: 0.3rem; padding: 0.3rem 0.6rem; color: #78b434;}
.cate-details li:hover{background-color: #f9f9f9;}

.st-right select{border: 1px solid #ccc; padding: 0.3rem 0.1rem; border-radius: 0.3rem;}
#gridType,#rowType{cursor: pointer; transition: 0.1s;}
#gridType.on,#rowType.on{filter: brightness(0.7);}
#gridType:hover,#rowType:hover{filter: brightness(0.7);}

.st-right img{width: 1.8rem;}
.sub-list-slide{margin: 20px -5px; visibility: hidden;}
.sub-list-slide.slick-initialized {visibility: visible;}
.sub-list-slide .slick-slide{margin: 0 5px;}
.sub-list-slide a{border-radius: 0.5rem; overflow: hidden;}

/* 상품리스트 */
.prd-list{display: grid; grid-template-columns: repeat(6,1fr); gap: 1rem;}

.prd-box{text-align: left; cursor: pointer; user-select: none;}
.prd-box:hover .prd-img{border: 1px solid #8ec251;}
.prd-img{border: 1px solid #f5f5f5; border-radius: 0.5rem; overflow: hidden; position: relative;}
.prd-img.sold-out::after{content: "SOLD OUT"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; font-size: 2rem; text-align: center;}

.Qua{border: 1px solid #f5f5f5; display: flex; justify-content: space-around; align-items: center; margin: 0.5rem auto; border-radius: 0.5rem; padding: 0.5rem 0; position:relative; overflow: hidden;}
.Qua.sold-out{opacity: 0.4;}
.Qua button{background-color: #fff; font-weight: 500;}
.pm-wrap{display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
.Qua #numberUpDown input{width: 2rem; text-align: center;}
.sit_qty_minus img{width: 1rem;}
.sit_qty_plus img{width: 1rem;}
.prd-info{display: flex; align-items: center;}
#buy_box{padding: 0.3rem 0.6rem; border-radius: 30px; font-size: 0.9rem;}
.prd-info .pin{margin-left: auto;}
.prd-info .pin span{border-radius: 30px; padding: 0.2rem 0.4rem; color: #fff; display: inline-block; font-size: 0.9rem;}
.room_temp{background-color: #ef8876;}
.low_temp{background-color: #5595df;}
.frozen_temp{background-color: #1F3A5F;}
.return_o{background-color: #999;}
.return_x{background-color: #da2727;}
.prd-name{font-size: 1.1rem; font-weight: 500; margin-top: 0.8rem; line-height: 1.4rem;margin-bottom: 1rem; min-height: 80px;}
.prd-name .ea{color: #999;font-size: 0.95rem;}

.prd-price{margin-bottom: 0.5rem;}
.prd-price .price{font-size: 1.3rem; font-weight: 600;}
.prd-price .price.dis{text-decoration: line-through; color: #999; font-size: 1.1rem; font-weight: 500;}
.prd-price .discount{font-size: 1.3rem; font-weight: 600;}
.prd-price .d-rate{font-weight: 600; color: #da2727;}

.prd-cost{display: flex; gap: 5px;}
.prd-cost p{background-color: #f9f9f9; color: #999; font-size: 0.9rem; border-radius: 0.2rem; padding: 0.2rem;}
.prd-cost span{margin-left: 2px;}

/* 리스트형식일때 */
.prd-list.type-row{grid-template-columns: 1fr;}
.prd-list.type-row .prd-box{display: grid; grid-template-columns: 1fr 4fr 2fr 2fr 2fr 3fr; align-items: center; gap: 1rem; border-bottom: 1px solid #eee; padding-bottom: 1rem;}
.prd-list.type-row .prd-img{order:1;}
.prd-list.type-row .prd-name{order:2;}
.prd-list.type-row .prd-price{order:3;}
.prd-list.type-row .prd-cost{order:4;}
.prd-list.type-row .prd-info{order:5;}
.prd-list.type-row .Qua{order:6; border: none;}
.prd-list.type-row .Qua .pm-wrap{border: 1px solid #eee; border-radius: 0.3rem; padding: 0.5rem; margin-right: 0.3rem;}
.prd-list.type-row .Qua .add-to-cart{background-color: #8ec251; color: #fff; padding: 0.5rem; border-radius: 0.3rem;}



/* 상품 상세 페이지 (view) */
.prd-view-wrap{ display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; margin: 1rem auto;}
.prd-view-info{text-align: left; font-size: 1rem;}
.prd-view-title h3{font-size: 1.5rem;}
.prd-view-title p{color: #777; font-size: 1.1rem; margin-top: 0.5rem;}

.prd-view-price{border-bottom: 1px solid #ddd; padding-bottom: 1rem; margin:2rem auto;}
.view-discount{font-size: 1.5rem; font-weight: 600;}
.view-discount b{font-weight: 600; color: #da2727; margin-right: 5px;}
.view-price{font-size: 1.5rem; font-weight: 600;}
.view-price.dis{text-decoration: line-through; color: #999; font-size: 1.3rem; font-weight: 500;}

.prd-view-price table{width: 100%; margin-top: 2rem;}
.prd-view-price table th{font-weight: 400; width: 30%; padding: 0.5rem 0;}

.prd-view-price table i{background-color: #eee; color: #777; border-radius: 0.3rem; padding: 0.2rem 0.4rem; font-style: normal;}

.sit_opt{display: flex; align-items: center; justify-content: space-between;}
.sit_opt_g {display: flex; align-items: center; justify-content: space-between; gap: 5px; border: 1px solid #eee; padding: 0.4rem; border-radius: 0.5rem;}
.sit_opt_g #ct_qty{width: 60px; text-align: center;}
.sit_opt_g .btn2{padding: 0.3rem;}
#sit_tot_price{font-size: 1.3rem;}
#sit_tot_price span{font-size: 1.5rem; font-weight: 600; margin: 0 3px 0 10px}
.sit_btn{display: flex; align-items: center; justify-content: end; gap: 1rem; margin: 1rem auto;}
.sit_btn button{width: 50%; padding: 0.6rem; font-size: 1.3rem;}
.price-view-detail table{width: 100%; margin: 1rem auto;}
.price-view-detail table th{font-weight: 400; width: 30%; padding: 0.6rem 0;}

.price-view-detail p{color: #999; line-height: 1.6rem;}
.price-view-detail span{padding: 0.2rem 0.6rem; border-radius: 30px; color: #fff; margin-right: 5px;}

/* 추천상품 슬라이드 */
.recom-wrap{margin: 2rem auto;}
.recom-wrap h3{font-size: 1.5rem; text-align: left; margin-bottom: 2rem;}
.recom-item-slide1,.recom-item-slide2{margin: 0 -0.5rem;}
.recom-item-list{margin: 0 0.5rem;}
.recom-item-list ul{border: 1px solid #f5f5f5; border-radius: 1rem; overflow: hidden; padding: 0.8rem;}
.recom-img{}
.recom-pin span{margin-right: 3px; color: #fff; border-radius: 30px; padding: 0.2rem 0.4rem; font-size: 0.8rem; display: inline-block;}
.recom-name{font-weight: 500; margin-top: 0.5rem;}
.recom-ea{color: #777; font-size: 0.9rem; margin-top: 0.2rem;}
.recom-price{font-weight: 500; margin: 0.5rem auto;}


/* 레시피 */
.recipe-top-banner{margin: 20px auto;}
.recipe-list{display: grid; grid-template-columns: repeat(6,1fr); gap: 1rem;}
.recipe-list ul{border: 1px solid #f5f5f5; border-radius: 0.5rem; overflow: hidden; cursor: pointer; padding: 1rem;}
.recipe-list ul:hover{border: 1px solid #8ec251;}
.recipe-name{font-size: 1.1rem; margin-bottom: 0.5rem;}
.recipe-pin span{border-radius: 0.3rem; padding: 0.2rem 0.3rem; border: 1px solid #ddd; color: #999; margin: 0 2px; font-size: 0.9rem;}
.recipe-btn{margin-top: 1rem;}
.recipe-btn input[type=checkbox]{margin-right: 5px;}

/* 충전금 구매 */
.charge-list{display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;}
.charge-coupon{border: 1px solid #f5f5f5; padding: 0.3rem; border-radius: 0.3rem; overflow: hidden;}