body{background:#f4f6f8}
.home{margin:10px}
.lst{margin-top:-10px;background:#fff;padding:10px}
.lst_div{display:flex}
.lst_div div{width:50%;padding:5px}
.lst_div div img{width:100%;border-radius:10px}
/*rgb(255, 93, 0);*/
.lst h2{font-size:20px;padding:10px}
.add_team{background:#ff5d00;#fff;f4f6f8;fff;#ed722e;color:#fff;padding:10px 30px;border-radius:5px;font-size:16px;font-weight:600;margin-top:10px}
.add_team span{vertical-align:middle}

.cat{margin:10px 0 20px;padding:0px 0px 5px;background:#ebebeb;#000;color1:#fff;border-radius:10px;border-bottom2:5px solid #f4f6f8}
.cat h2{font-size:20px;padding:15px}
.cat li{float:left;width:25%;}
.cat li img{display:block;width:75%;margin:auto;border-radius:10px;50%}
.cat li div{text-align:center;padding-bottom:10px;color1:#fff}
.ban03{margin:10px}
.ban03 img{width:100%}

.fotorama__nav-wrap{margin-top:-30px}
.fotorama__dot {border: 1px solid #fff;}
.fotorama__html div,.fotorama__html a {display: block;height: 100%;text-indent: -9999px;}
.fotorama{border-radius:10px;border:0;width:100%;z-index:-111111 !important}
.btn_more{background:#eee;width:100%;padding:10px;text-align:center;display:block;margin-top:10px}
</style>
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.min.js"></script>
<div class="home">
<style type="text/css">
	/* 카드 전체 컨테이너 (기준점 역할) */
.card-container {
  position: relative;
  width: 100%;400px; /* 이미지 너비에 맞게 조절 가능 */
  height: auto;500px; /* 이미지 높이에 맞게 조절 가능 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* 배경 이미지 스타일 */
.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1. 상단 배지 레이어 */
.bottom-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 6px 12px;
  border-radius: 20px;
  /*backdrop-filter: blur(4px);  배지 뒤쪽 살짝 흐리게 처리 */
}

.bottom-badge1 {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px;
  border-radius: 20px;
  color:#000;
  /* backdrop-filter: blur(4px); 배지 뒤쪽 살짝 흐리게 처리 */
}

/* NEW 아이콘 스타일 및 깜빡임 애니메이션 */
.blink-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: #ff3b30;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  animation: blink-effect 1.2s infinite ease-in-out;
}

.badge-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.badge-text1 {
  color: #222;
  font-size: 14px;
  font-weight: 500;
}
/* 하단 정보 영역 레이어 */
.bottom-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 20px;
  /* 글자가 잘 보이도록 하단에 어두운 그라데이션 깔기 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}

/* 2. 모집기간 스타일 */
.period {
  color: #ffe600; /* 시선을 끄는 노란색 계열 강조 */
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

/* 3. 시작일 스타일 */
.start-date {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  opacity: 0.9;
}

/* 💡 키프레임: 깜빡이는 애니메이션 (선명했다가 반투명해짐) */
@keyframes blink-effect {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}