h2{
	text-align:center;
	font-weight:800;
	font-size:1.5rem;
}

label{
	color:black;
	margin-bottom: 4px
}
.form-wrap{
	margin-bottom: 80px;
}
select option[value=""][disabled] {
	display: none;
}

/*스텝*/  
.step-wrap:after {
    content: '';
    position: absolute;
    top: 28px;
    left: 50%;
    transform:translate(-50%);
    display: block;
    width: 182px;
    height: 2px;
    background-color: #d9d9d9;
    z-index: -1;
}


  
  .step-wrap{
  position:relative;
  margin: 2.5rem 0;
  }
  
  .step-wrap span{
	display: block;
    margin-top: 6px;
        font-weight: 600;
	
}


  .check span{
    color: black;
    font-size:1rem;
  }
  
  
ul{
	list-style:none;
	padding:0;
	margin:0;
	justify-content: center;
}
 
 .step-list{
	 display:flex;

 }
 
  .step-list li{
  	display:flex;
  	flex-direction: column;
	align-items: center;
    justify-content: center;
  }
  
    .check .fa-wrap{
    background-color: #54b8d3;
    border:none
    }
    
   
  .fa-wrap{
    background: #fafafa;
   border: solid 2px #d9d9d9;
    width: 58px;
    height: 58px;
    border-radius: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  .check .fa-check{
  	margin-bottom:3px;
  	font-size: 2rem;
  	color:#fff
  }
  
  .fa-check{
  	margin-bottom:3px;
  	font-size: 2rem;
  }
  
  	
  .on{
  margin-left:6rem;
  }



/*폼*/


form{
	border: 1px solid rgb(0,0,0,.1);
    padding: 40px 50px;
    border-radius: 20px;
    margin-top: 35px;
}    
  .input-form {
      max-width: 680px;

      margin-top: 80px;

    }

	.input-wrap{
		display:flex;;
		align-items: center;
    	justify-content: space-between;
    	margin-bottom: 1rem!important
	}
	
	.input-wrap input{

	}
	
	.year, .gender-mask{
	width:46%
	}
	
	.gender-mask{
		display:block;
		position:relative;
	}

    .mask{
        position: absolute;
	    top: 9px;
	    left: 32px;
	    margin: auto 0;
	    color: #000;
	    font-size: 15px;
    }

    .num-flex-wrap{
    display:flex;
    justify-content: space-between;
    align-items: center;
    }
    
    .custom-select{
    width:22%
    }
    
    
    .phone-number{
    width:57%
    }
    
    .confirm{
        border-radius: 0.25rem;
    	padding: 0.375rem 0.75rem;
    	 color: #fff;
    	background: #666;
    	border:1px solid #666
    }
    
    .col-md-5{
    padding:0
    }
    
    
    
    hr{
    border-top: 2px solid #d9d9d9;
   	margin:1.5rem 0;
    }

    .custom-control{
    margin-bottom:8px;
    display:flex;
    }
    
    .round{
    background: #eeeeee;
    width: 20px;
    height: 20px;
    border-radius: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    cursor: pointer;
    
}

    .btn:disabled{
	    width:100%;
	    border:none;
	    color: #898989;
	    background-color: #eeeeee;
	    border-radius: 10px;    
    }
   .btn-lg{
    width:100%;
    border:none;
	background-color: #54b8d3;
	color:#fff;
    border-radius: 10px;
    }
    
    btn-primary{
    background-color:#54b8d3 !important
    }

    .btn a{
    display:block;
    }
    .sms{
    margin-top:1rem;
    }
    
    
    .password-wrap{
	position:relative;
}

 .fa-eye, .fa-eye-slash{
    right: 15px;
    position: absolute;
  top: 58%;
}

.signup{
		background:transparent;
		border:none;
	    border-radius: 2.25rem;
    	padding: 0.375rem 0.75rem;
    	color: #fff;
    	background: #48b3d1;
    	width:63%;
    	font-size:1.3rem;
    	margin: auto;
    	display: block;
    	
}

.signup:hover{
	background: #327a8f;
}
@media (max-width: 768px) {
	.phone-number {
	    width: 47%;
	}

}

@media (max-width: 500px) {
	form{
	margin-top:8px;
	}
	.input-form{
		margin-top:40px
	}
	
	h2{
	font-size:1rem
	}
	
	.step-wrap {
    margin: 1rem 0;
}
	.check span {
	    font-size: 0.9rem;
	}
	
	.step-wrap span {
	    font-size: 0.9rem;
}

	form {
	    padding: 20px;
	}
	
	label{
    font-size: 0.9rem;
    margin-bottom: 0
}

.phone-number {
    width: 41%;
}

.btn{
	font-size:1rem;
}

.confirm{
	font-size:0.9rem
}

.signup{
	font-size:1rem
}

}