body {
  font-family: 'Noto Sans', sans-serif;
  zoom: 90%;
}


.footer .icon-link {
    font-size: 25px;
    color: #000;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {
}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {
}

.publication-title {
    font-family: 'Google Sans', sans-serif;
}

.publication-authors {
    font-family: 'Google Sans', sans-serif;
}

.publication-venue {
    color: #555;
    width: fit-content;
    font-weight: bold;
}

.publication-awards {
    color: #ff3860;
    width: fit-content;
    font-weight: bolder;
}

.publication-authors {
}

.publication-authors a {
   color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
    text-decoration: underline;
}

.author-block {
  display: inline-block;
}

.publication-banner img {
}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-bottom: 5px;
    overflow: hidden;
    border-radius: 10px !important;
}

.publication-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.publication-body img {
}

.results-carousel {
  overflow: hidden;
}

.results-carousel .item {
  margin: 5px;
  overflow: hidden;
  border: 1px solid #bbb;
  border-radius: 10px;
  /* padding: 0; */
  font-size: 0;
}

.results-carousel video {
  margin: 0;
}


.interpolation-panel {
  background: #f5f5f5;
  border-radius: 10px;
}

.interpolation-panel .interpolation-image {
  width: 100%;
  border-radius: 5px;
}



.interpolation-panel .slider {
  margin: 0 !important;
}

.interpolation-panel .slider {
  margin: 0 !important;
}

#interpolation-image-wrapper {
  width: 100%;
}
#interpolation-image-wrapper img {
  border-radius: 5px;
}

/*custom*/
.main-content{
  margin-bottom: 50px;
}

.top-banner{
  margin-bottom: -80px;
}

/*Rep map*/
.first-section{
  margin-left: 20px;
  margin-right: 20px;
}

/*Abstract*/
.rep-text-content {
  text-align: justify;
}
.rep-image-container {
  float: right; /* 이미지를 왼쪽에 정렬 */
  width: 50%; /* 이미지 너비 */
  margin-left: 10px; /* 텍스트와의 간격 */
  margin-bottom: -00px; /* 텍스트와의 간격 */
  padding: 0px 0; /* 상하 패딩 */
}
.image-center {
  width: 50%;
  display: flex;
  justify-content: center; /* 이미지를 가로축으로 중앙 정렬 */
  margin: 0 auto;
  margin-bottom: 20px;
}

/*GIF list*/
.item-steve {
  position: relative;
  text-align: center;
}

.item-steve img:hover{
  border: 2px solid black;
  cursor: pointer;
}

.text-overlay {
  position: absolute;
  bottom: 5px; /* 이미지 아래쪽에 위치 */
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 배경 */
  color: white; /* 흰색 텍스트 */
  padding: 5px;
  font-size: 16px; /* 큰 글자 크기 */
  text-shadow: 1px 1px 2px black; /* 검은색 그림자 */
  z-index: 200;
}




#ply_viewer {
  width: 100%; /* Set desired width */
  height: 600px; /* Set desired height */
  overflow: hidden; /* Prevent overflow */
  border:1px solid #888888;
  position: relative; /* To position legend relative to ply_viewer */
}

#legend {
  width: 400px;
  height: auto;
  background-color: white;
  position: absolute;
  bottom: 8px; 
  right: 7px; 
  z-index: 10; 
  border:1px solid black;
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0px 0px 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10; 
}


.legend-item {
  display: flex;
  align-items: center;
  width: 25%; /* Ensures 4 items per row */
  margin-bottom: 5px;
  font-size: 15px;
}

.color-box {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: 1px solid black;
}

@media (max-width: 600px) {
  #legend {
    bottom: 50px; 
  }
}

#hello_robot{
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 50%; /* This makes the video elliptical */
  object-fit: cover;
  margin-bottom: 20px;
}

.abstract_section{
  background-color: #F5F5F5;
}

.title-centered{
  text-align: center;
}

/* Modal (background) */
.modal {
  display: none; 
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 100; 
}

/* Modal Content */
.modal-content {
  width: 80%; /* Adjust modal width */
  margin: 12% auto; /* Center modal on page */
  padding: 20px;
  text-align: center; /* Center text and images */
  background-color: #fff; /* Set background color */
  border-radius: 8px; /* Round corners */
}


.gif-container {
  display: flex; /* Use flexbox layout */
  justify-content: space-around; /* Space images evenly */
  align-items: center; /* Center items vertically */
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  margin-bottom: 20px; /* Space below GIFs */
}

.modal-gif-name {
  position: absolute; /* Position absolutely within the relative container */
  bottom: 0; /* Align at the bottom of the container */
  left: 0; /* Start from the left edge of the container */
  width: 100%; /* Stretch across the entire container width */
  background-color: rgba(255, 255, 255, 0); /* Semi-transparent black background */
  color: white; /* White text */
  padding: 5px; /* Padding around text */
  font-size: 12px; /* Font size */
  text-shadow: 1px 1px 2px black; /* Text shadow for better visibility */
  text-align: center; /* Center text horizontally */
}


.modal-content h2 {
  font-size: 24px; /* h2의 폰트 크기 조정 */
  font-weight: bold;
  color: #333; /* 색상 선택 가능 */
  margin-bottom: 15px; /* h2와 다른 요소 사이의 여백 */
}

.gif-item-container {
  position: relative; /* Needed to position the label absolutely within this container */
  width: 19%; /* Control the width of each GIF container */
  height: auto; /* Height will adjust to content */
  margin: 10px; /* Space between GIF containers */
  display: inline-block; /* Line up GIF containers horizontally */
  border-radius: 300px;
}


.modal-content p {
  font-size: 16px; /* 내용의 폰트 크기 조정 */
}

.modal-image {
  width: 30%; /* Set width of the main image */
  margin-bottom: 5px; /* Margin below the main image */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#icra_comment{
  color: #363636;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.equal_contribution{
  font-size: 12px;
}

.plus-bounce {
    display: inline-block; /* 애니메이션을 위해 필수 */
    color: #363636;        /* 강조색 (파란색 예시) */
    
    /* animation: 이름 | 한 사이클 시간 | 가속도 | 반복여부 
       여기서 '3s'가 전체 주기입니다. (점프 + 휴식 포함)
    */
    animation: jump-loop 1.3s infinite; 
  }

@keyframes jump-loop {
  /* 0% ~ 20%: 점프 동작 구간 (약 0.6초) */
  0% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-12px) scale(1.1); /* 위로 솟구치며 약간 커짐 */
    color: #47AEF0; /* 점프할 때 색상을 살짝 밝게 변경 (선택사항) */
  }
  60% {
    transform: translateY(0) scale(1); /* 착지 */
  }

  /* 21% ~ 100%: 휴식 구간 (가만히 있음) */
  100% {
    transform: translateY(0) scale(1);
  }
}

.abstract_section .container.is-max-desktop {
  max-width: 1200px !important; /* 1200px, 100% 등 원하는 값으로 변경 */
}

.caption{
  text-align: center;
}