.radio{
	position: relative;
	display: inline-block;
	padding: 4px;

	//border: 1px solid blue;	               //←←←←←←←←←←←←←←←←←←←←	

	& > .title{
		position: relative;
		display: block;
		width: 100%;
		left:0px;
		margin-bottom:4px;
		@include selectNo;
		@include font(body2, $c-b);
		//border: 1px solid green;               //←←←←←←←←←←←←←←←←←←←←	
	}




	& > div{
		position: relative;
		display: block;
		min-height: 28px;	
		margin: 0px;	
		padding: 2px;

		@include leftFlex;
		//border: 1px solid red;               //←←←←←←←←←←←←←←←←←←←←	

			& input{
				position: relative;
				display: inline-block;
				left: 0px;
				top: -4px;
				width: 18px;
				height: 18px;

				border: 2px solid $c-b;
				//border-radius: 50%;
				opacity: 0.54;
				
				outline: none;
				-webkit-appearance: none ;	
		        appearance: none ;	
		        cursor: pointer;

		        flex-shrink: 0;
		        transition: (0.150s, emph);

				&::before{
					position: absolute;
					content: '';
					top: -8px;
					left: -8px;

					width: 32px;
					height: 32px;
					border-radius: 50%;

				   background-color: $c-p;
				   opacity: 0;
				   transform: scale(0);
				   transition: (0.150s, emph);
				}

				&:hover{
					&::before{
					   opacity: 0.08;
					   transform: scale(1);
					}
				}
				
					&:checked{
						opacity: 1;
						background:  $c-p url(svg/check.svg) no-repeat;
					    background-size: 100% 100%;
					    background-position: center;
						border: 2px solid $c-p ;
						border-radius: 2px;

						&::before{
							display: none;
						}					
					}/**/

			}


		& label{
			position: relative;
			display: inline;
			margin-left: 12px;
			top: -2px;
			padding: 0px;
			@include selectNo;
			@include font(body2, $c-b);
			font-weight: 500;
		
			//border: 0.5px solid green;               //←←←←←←←←←←←←←←←←←←←←
		}


	}

}