/* lables */


.star_label:before,
.star-lable:before {
		content:'';
	  width:calc(var(--body_font_size)*1.2);
	  height:calc(var(--body_font_size)*1.2);
	  background-repeat: no-repeat;
	  background-position: left bottom;
	  transition: all .3s ease;
	  display: inline-block;
	  flex-direction:row;	
	  background-color: #fff;
	  mask-repeat: no-repeat;	
	  margin:0;
	  padding:0;
	  margin-right:1vw;
	  background-color: #000;
	  transition:all .9s ease;
	  mask-image: url('data:image/svg+xml,<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon class="b" points="60 83.87 30.61 105.23 41.84 70.68 12.45 49.32 48.77 49.32 60 14.77 71.23 49.32 107.55 49.32 78.16 70.68 89.39 105.23 60 83.87"/></svg>');
	  /* background-attachment: fixed | scroll; */
	  /* background-size: auto | cover | contain | 500px 250px; */
	  /* background-position: center | right 30px bottom 15px; */
	  /* background-repeat: no-repeat | repeat | repeat-x; */
	  /* background-origin: border-box | padding-box | content-box; */
	  /* background-clip: border-box | padding-box | content-box; */
	  /* background-blend-mode: multiply | screen | overlay; */
}


.select-lable:after {
	content:'';
	  width:calc(var(--body_font_size)*.8);
	  height:calc(var(--body_font_size)*.8);
	  background-repeat: no-repeat;
	  background-position: left bottom;
	  transition: all .3s ease;
	  display: flex;
	  flex-direction:row;	
	  background-color: #fff;
	  mask-repeat: no-repeat;	
	  margin:0;
	  padding:0;
	  background-color: fff;
	  transition:all .9s ease;
	  margin-right: 0px;
	  margin-left: auto;
	  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg id="plus-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon style="enable-background:accumulate; fill:white;" points="88.8,76.1 72.2,59.5 89.2,42.5 76.5,29.8 59.5,46.8 42.2,29.4 29.4,42.2 46.8,59.5 29.8,76.5 42.5,89.2 59.5,72.2 76.1,88.8"/></svg>'); 
	  /* background-attachment: fixed | scroll; */
	  /* background-size: auto | cover | contain | 500px 250px; */
	  /* background-position: center | right 30px bottom 15px; */
	  /* background-repeat: no-repeat | repeat | repeat-x; */
	  /* background-origin: border-box | padding-box | content-box; */
	  /* background-clip: border-box | padding-box | content-box; */
	  /* background-blend-mode: multiply | screen | overlay; */
}


.product_feature
 {
	animation: fade-in linear forwards;
	animation-timeline: view(block 50% 10%);
}
@keyframes fade-in  {
	from { background-position: top center;	}
	to { background-position: bottom center; }
}

.anim_image {
	animation: blend-in linear forwards;
	animation-timeline: view();
}
@keyframes blend-in  {
	0% { scale:.8;	opacity:0;}
	30% { scale:1; }
	60% { opacity:1;}
}
.product_feature .feature_box {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 8;
	align-content: flex-end;
	
}
.product_feature .feature_content {
	_position: absolute;
	_top: 80%;
	left:50%;
	animation: right-in linear forwards;
	animation-timeline: view();
	animation-range: cover;
}
@keyframes right-in  {
	0% { top:80%;opacity:0;}
	10% { top:0;opacity:1;}
	100% { top:20%;opacity:1; }
}