.card{
	width: 300px;
	height: 410px;
	margin-left: 10px;
	overflow: hidden;
	background-color: #FFFFFF;

	border-radius: 15px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	text-align: center;
	-webkit-transition: .1s ease-in-out;
	transition: .1s ease-in-out;
}
	.card:first-of-type{
		margin-right: 10px;
	}

	.card:hover{
		margin-top: -15px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	}
.banner{
	height: 130px;
	width: 100%;
	padding-top: 35px;
	background-color: #FAFAFA;
	background-size: cover;
	background-position: center;
}
.card .banner{
		background-image: url("https://webdevtrick.com/wp-content/uploads/logo-fb-1.png");
	}
.avatar {
	position: relative;
	height: 160px;
	width: 160px;
	margin: auto;
	background-size: cover;
	background-position: center;
	background-color: #F1F1F1;
	border-radius: 100%;
}
.card .avatar{
		background-image: url("https://webdevtrick.com/wp-content/uploads/shaan.jpg");
	}

/*for profile_new */
.card-new {
    border-radius: 0;
}

.banner-new{
    border-radius: 0;
}

.avatar-new{
    height: 200px;
    width: 200px;
    margin: auto;
	object-fit: contain;
    background-size: contain;  /* cover 대신 contain 사용 */
    background-repeat: no-repeat;  /* 이미지가 반복되지 않도록 설정 */
    background-position: center;  /* 이미지를 중앙에 배치 */
    background-color: #F1F1F1;
    border-radius: 0;
    position: relative;
    top: -10px;  /* 10px만큼 위로 올 */
}

.card-new {
    width: 300px; /* 카드의 폭 */
    padding: 10px; /* 카드 내부의 패딩  */
}

.avatar-hover {
    position: relative;
}

.default-img, .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.hover-img {
    display: none;
}