#mix_goods_list_pop{ max-height: 90%; overflow: auto; }
.mixfloating{
    position: fixed; left: 50%; top: 85px;;
    width: 100%; max-width: 480px; transform: translateX(-50%);
    height: 0; padding: 0 20px; z-index: 3;
}

.mixfloating a{ float: right; }
.mixfloating img{max-width: 70px;
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.15)); 
}


.mix_list{padding-top:40px;}
.mix_list .box{ padding:13px 8px; 

background: #FFF;
position: relative;

border-radius: 20px; 
border: 1px solid #EFEFEF;
background: #FFF;

/* drop */
box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.15);

}
 
.mix_list .box + .box{margin-top: 30px;}

.mix_list .box.soldout{
    opacity: 0.5;
}





.mix_list .box .box_pop{max-width: 100%; width: 100%; position: relative;border-radius: 20px; border: 1px solid #DFDFDF;overflow: hidden; display: block; }
.mix_list .box .box_pop img{max-width: 100%; width: 100%;display: block;}
.mix_list .box .box_pop span{
    position: absolute;
    width: 60px; height: 60px;
    background:#11A66C;
    color: #fff; display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    border-radius: 60px;
    right: 10px; top: 10px;
    line-height: 1.1;
}

.mix_list .box .in_flex .txt{margin-top: 15px; padding: 0 10px;}
.mix_list .box .in_flex .txt h3{font-size: 16px;}
.mix_list .box .in_flex .txt .dot{
    margin: 10px 0;
    border-radius: 10px;
background: #F5F5F5;
padding: 20px;
}

.mix_list .box .in_flex .txt .dot li{ position: relative; 
    font-size: 14px; word-break: keep-all; font-weight: 500; display: flex; justify-content: space-between;}
.mix_list .box .in_flex .txt .dot li + li{margin-top: 10px;;}
.mix_list .box .in_flex .txt .dot li b{ color:var(--main-color)}
.mix_list .box .in_flex .txt .dot li + li b{color: #111;}

.mix_list .box .in_flex .txt p{font-size: 14px; color: #666; word-break: keep-all; padding-left: 10px;}

.mix_list .box .in_flex .txt p + p{font-size: 12px; margin-top: 5px;}
.mix_list .box .common_btn{margin-top: 15px;}

.pop_memo_mix{text-align: left; padding: 15px; border-radius: 5px; background: #F5F5F5; text-align: center;}
.pop_memo_mix li{padding-left: 10px; position: relative; 
    font-size: 14px; word-break: keep-all; font-weight: 500; display: flex; justify-content: space-between;} 
.pop_memo_mix li::after{content: '·'; position: absolute; left: 0; top: 0;}

.pop_memo_mix li + li{margin-top: 5px;;}
.pop_memo_mix li b{color: #666;}

#mix_pop.pop-layer{border-radius: 0px; height: 100%;;width: 100%; max-width: 480px;}


.mix_detail_top{
}


.mix_detail_top .mix_title{
    padding-bottom: 20px;
    border-bottom: 1px solid #EFEFEF;
    display: flex; 
    align-items: center;
    justify-content: space-between;
}

.mix_detail_top .mix_title h3{font-size: 16px; font-weight: bold;}
.mix_detail_top .mix_title .mix_item_count{
    display: flex; align-items: center;
    padding: 10px 15px; 
    border-radius: 5px;
    color: #fff; font-size: 14px;
    background: #222;
    gap:4px
}

.mix_detail_top .mix_title .mix_item_count span,
.mix_detail_top .mix_title .mix_item_count b{color: #fff;}



.mix_detail_top .mix_info {
 
} 

.mix_detail_top .mix_info h3{font-size: 14px; margin: 23px 0; word-break: keep-all; font-weight: 700;;}

.mix_detail_top .mix_info .box_pop{max-width: 100%; position: relative;
     border-radius: 20px; overflow: hidden; display: block;}
.mix_detail_top .mix_info .box_pop img{max-width: 100%; width: 100%; display: block; object-fit: cover;}
.mix_detail_top .mix_info .box_pop span{
    position: absolute;
    width: 60px; height: 60px;
    background: linear-gradient(90deg, #11A66C 0%, #11A66C 100%);
    color: #fff; display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    border-radius: 60px;
    right: 5px; top: 5px;
    line-height: 1.1;
    top: 10px;
    right: 10px;;
}

.mix_detail_top .mix_info .txt{border-radius: 10px; border:1px solid #efefef; padding:20px;;}

.mix_detail_top .mix_info .txt .dot{

}

.mix_detail_top .mix_info .txt .dot li{ position: relative; 
    font-size: 14px; word-break: keep-all; font-weight: 500; display: flex;
     justify-content: space-between; color: #999;}
.mix_detail_top .mix_info .txt .dot li + li{margin-top: 10px;;}
.mix_detail_top .mix_info .txt .dot li b{ color:var(--main-color)}
.mix_detail_top .mix_info .txt .dot li + li b{color: #111;}

.mix_detail_top .mix_info .txt p{font-size: 14px; color: #222; word-break: keep-all; }


.mix_detail_top .mix_info .txt p.over_p{font-size: 12px; margin-top: 2px; color: #FF1007; display: none; }
.mix_detail_top .common_btn{margin-top: 15px;}


.mix_detail_top .mix_info  .mix_bar{
    position: relative;
    height: 4px; margin:60px 0 40px;
}

.mix_bar_line{position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: #D9D9D9; 
    height: 4px; ;}

.mix_detail_top .mix_info  .mix_bar .gage{position: absolute; 
    left: 0; top: 0; height: 100%; border-radius: 5px; background: #11A66C;}

.mix_detail_top .mix_info .mix_bar p{color: #fff; font-size: 14px; 
    font-weight: bold; padding: 0;background: #11A66C; 
    padding:4px 10px; border-radius: 5px; position: absolute; top:-40px ; left:7%;
transform: translateX(-30px); min-width: 60px; text-align: center;}
 


.mix_pop_mid{
    border-radius: 10px;
border: 1px solid rgba(34, 34, 34, 0.10);
background: #F9F9F9;
padding: 25px;
margin-top: 20px;
}


.mix_pop_mid h3{font-size: 16px; color: #111; ;}
.mix_pop_mid p{font-size: 14px; color: #333; margin-top: 5px;}

.mix_pop_mid + .list_top{margin-top: 20px;}
.mix_pop_mid + .list_top .right{width: auto;}

.mix_pop_mid + .list_top + .product_list2 li{
    width: calc(50% - 5px);
}

.mix_pop_mid + .list_top + .product_list2 li .thum{position: relative;}

.mix_pop_mid + .list_top + .product_list2 li .thum .price{
    position: absolute; right: 10px; bottom: 10px;
    position: absolute;
    width: 45px;
    height: 45px;
    background: linear-gradient(90deg, #11A66C 0%, #11A66C 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    border-radius: 60px;
    line-height: 1.1;
    
}

.mix_pop_mid + .list_top + .product_list2 li .thum .price b{color: #fff;}

.mix_pop_mid + .list_top + .product_list2 li .thum .ck_thum{position: absolute; 
    left: 0px; top: 0px; width: 100%; height: 100%;}

.mix_pop_mid + .list_top + .product_list2 li .txt .price b{
    color:var(--point-color); font-size: 16px;
}

.mix_pop_mid + .list_top + .product_list2 li .thum .ck_thum input[type="checkbox"].custom_checkbox + label{
    width: 100%; height: 100%; border:6px solid transparent; border-radius: 10px;
} 
.mix_pop_mid + .list_top + .product_list2 li .thum .ck_thum input[type="checkbox"].custom_checkbox + label:before{
    display: none;
}
.mix_pop_mid + .list_top + .product_list2 li .thum .ck_thum input[type="checkbox"].custom_checkbox:checked + label{
    border-color: #11A66C;
}



@media only screen and (max-width:400px){

    .mix_list .box .box_pop span,
    .mix_detail_top .mix_info .box_pop span{width: 40px; height: 40px; font-size: 12px;;}
    .mix_list .box .in_flex .txt .dot{margin: 5px 0;}
    .mix_list .box .in_flex .txt p,
    .mix_detail_top .mix_info .txt p,
    .mix_pop_mid p{font-size: 12px;}
    .mix_list .box .in_flex .txt p + p{font-size: 12px; margin-top: 3px;}



}


@media only screen and (max-width:370px){

    .mix_list .box,
    .mix_detail_top,
    .mix_pop_mid{padding: 25px 15px;}
    .mix_list .box .in_flex .txt .dot li,
    .mix_detail_top .mix_info .txt .dot li{font-size: 12px;}
    .mix_list .box .in_flex .txt .dot li + li, 
    .mix_detail_top .mix_info .txt .dot li + li{margin-top: 2px;}

    .mix_detail_top .mix_title{padding-bottom: 10px;}
    .mix_detail_top .mix_title .mix_item_count{font-size: 12px; padding: 8px 10px;;}

    .mix_pop_mid h3{font-size: 14px ;} 

}




.mixfloating {
      animation: upDown 1.9s infinite ease-in-out;
    }

    @keyframes upDown {
      0%   { top: 95px; }
      50%  { top: 90px; }
      100% { top: 95px; }
    }




.over_p.highlight {
  color: #e53935;       /* 빨간색 */
  font-weight: 700;
  animation: blinkOver 0.8s infinite alternate;
  padding: 1px 5px;
  display: inline-block !important;
}
@keyframes blinkOver {
  from { background:#FAE100;   }
  to   { background:#fff27a;  }
}


.mix_detail_top .mix_info .txt .mix_bar .gage.over { background: #e53935; }











.product_list2 li .txt .price{ gap:1px;  }
 
.mix_pop_mid + .list_top + .product_list2 li .txt .price2 { font-weight: normal; font-size: 12px;  }
.total_score{ font-style: normal; }
/* 게이지 막대 애니메이션 */
.mix_bar .gage{
  transition: width .3s ease;   /* 기본 전환 */
  will-change: width;
}
/* 100% 초과 시 넘치는 것도 보이게 하려면 */
.mix_bar{ overflow: visible; }   /* 기본이 hidden이면 필요 */
.mix_detail_top .mix_info .txt .mix_bar p{ position: relative; z-index: 20;  }

.mix_goods_ok{ text-align: center; justify-content: center; }