.contents .main_cont .main_notice .common_box2 {
  overflow: hidden;
  position: relative;
  margin-left: 20px;
  height: 310px;
  background-color: #fff;
  padding: 0; /* Remove padding if it's causing the issue */
  box-sizing: border-box;
}

.contents .main_cont .main_notice .common_box2:nth-child(1) {
  margin-left: 0;
  width: 520px;
}
.contents .main_cont .main_notice .common_box2:nth-child(2) {
  width: 370px;
}
.contents .main_cont .main_notice .common_box2:nth-child(3) {
  width: 350px;
}

@media (max-width: 1280px) {
  .contents .main_cont .main_notice .common_box2 {
    margin-left: 10px;
  }
}
@media (max-width: 1023px) {
  .contents .main_cont .main_notice .common_box2 {
    width: 100% !important;
    margin-left: 0;
    margin-top: 20px;
    height: 200px;
  }
  .contents .main_cont .main_notice .common_box2:nth-child(1) {
    margin-top: 0;
  }
  .contents .main_cont .main_notice .common_box2.event_box {
    display: none;
  }
  .contents .main_cont .main_notice .common_box2 .cbox_header {
    height: 63px;
    align-items: center;
  }
}
@media (max-width: 767px) {
  .contents .main_cont .main_notice .common_box2 {
    margin-top: 10px;
  }
}
/* Styles for the rank card itself */
.corner-card {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../images/bg_rank.png"); /* Your background image path */
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  position: relative;
  text-align: center; /* Center the text */
}

/* Character image styling */
.character-image {
  max-width: 120px; /* Adjust width as necessary */
  height: auto;
  z-index: 1;
  margin-bottom: 10px;
}

/* Overlay styling */
.character-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  display: flex;
  flex-direction: column; /* Stack the badge/name and level vertically */
  align-items: center; /* Center items horizontally */
  padding: 5px 0;
  z-index: 2;
}

/* Character name and level styling */
.character-name,
.character-level {
  color: white;
  font-size: 1.2em; /* Adjust font size as necessary */
  margin: 0; /* Reset margin to ensure proper alignment */
}

/* Character name and level styling */
.character-name {
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  margin-top: 5px; /* Space from the top of the overlay */
  margin-bottom: 0; /* No bottom margin, level will be directly below */
  padding: 0 10px; /* Padding on the sides */
  z-index: 2; /* Below the badge but above the level */
  display: inline-block;
  margin: 0;
}

.character-level {
  font-size: 1.2em;
  font-style: italic;
  color: white;
  margin-top: 0; /* No top margin, directly below the name */
  padding: 0 10px; /* Padding on the sides */
  z-index: 2; /* Same level as name, to ensure it doesn't go below the badge */
}

.name-and-level {
  display: flex;
  flex-direction: column; /* Stack name and level vertically */
  align-items: center; /* Center both name and level horizontally */
  width: 100%; /* Take the full width of the parent */
}

/* General style for the rank badge */
.rank-badge {
  display: inline-block;
  width: 30px; /* Badge size */
  height: 30px; /* Badge size */
  line-height: 30px; /* Vertically center the text */
  border-radius: 50%; /* Circle shape */
  color: black; /* Text color */
  text-align: center; /* Center the text horizontally */
  margin-left: 10px; /* Space from the name */
  font-weight: bold; /* Bold text */
  position: absolute;
  left: -2.5em; /* Align to the far left */
}

/* Specific styles for each rank */
.rank-1 {
  background-color: gold; /* Gold color for rank 1 */
}

.rank-2 {
  background-color: silver; /* Silver color for rank 2 */
}

.rank-3 {
  background-color: burlywood; /* Bronze color for rank 3 */
}
.name-and-rank {
  display: flex;
  align-items: center; /* Align items vertically */
  justify-content: center; /* Center items horizontally */
  position: relative; /* Allows absolute positioning within the container */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .common_box2 {
    margin-left: 0;
    width: 100%;
  }

  .corner-card {
  }
}