/* body {
  margin: 0 auto;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 18px;
} */
body {
  font-family: 'Microsoft YaHei', 'Arial', sans-serif;
}
/**/

.flex-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5px; /* 调整行之间的间距 */
    background-color: transparent;
}


.row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.column {
  margin: 0 2px;
}
.centered-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  white-space: nowrap;
}

/* .flip-box {
  width: 224px;
  height: 224px;
} */
/* .flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
} */
/* .flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip-box-back {
  transform: rotateY(180deg);
} */
/**/
.flip-box-inner {
  position: relative;
  width: 224px;
  height: 264px; /* 包括图片和文字的高度 */
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  background-color: transparent;
}
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
  background-color: transparent;
}
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  justify-content: space-between; /* 确保文本和图片有足够的空间 */
  align-items: center; /* 使图片和文字居中 */

}
.flip-box-front p, .flip-box-back p {
  margin: 0;
  padding: 1px;
  /* background-color: #f5f5f5; */
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  background-color: transparent;
  flex-shrink: 0;
  color: #333;
}
.flip-box-front img, .flip-box-back img {
  width: 100%;
  height: 224px;
  object-fit: cover;
  flex-grow: 1;
  background-color: transparent;
}
.flip-box-back {
  transform: rotateY(180deg);
  background-color: transparent;
}


.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  text-align: center;
  display: block;
}

.title {
  font-size: 36px;
  margin-top: 20px;
  width: 90%;
}

.venue {
  font-size: 22px;
  margin-top: 20px;
  width: 90%;
}

.author {
  width: 95%;
  max-width: 200px; 
  /* max-width: 300px; */
  font-size: 20px;
}

.affiliation {
  font-size: 20px;
  width: 95%;
  max-width: 450px;
}

.links {
  font-size: 22px;
  width: 95%;
  max-width: 150px;
}

.video-container {
  position: relative;
  overflow: hidden;
  width: 80%;
  padding-top: 45%; /* Formula for 16:9 Aspect Ratio: width * 9 / 16 */
}

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

.paper-thumbnail {
  margin: 0 auto;
  width: 40%;
  max-width: 250px;
  display: inline-block;
  vertical-align: top;
  padding: 2% 10% 4% 0;
}

.paper-info {
  width: 45%;
  display: inline-block;
  vertical-align: top;
}

@media (max-width: 999px) {
  .paper-thumbnail {
      width: 60%;
  }

  .paper-info {
      width: 80%;
  }
}


p {
  text-align: left;
  margin: 0 auto;
  margin-bottom: 10px;
}

h1 {
  font-weight: 300;
  text-align: center;
}

h2 {
  text-align: center;
}

h3 {
  text-align: left;
}

h4 {
  text-align: left;
}

h5 {
  text-align: left;
}

div {
  display: inline-block;
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  width: 90%;
}

pre {
  overflow-x: auto;
  text-align: left;
  border: 1px solid grey;
  border-radius: 3px;
  background: #eeeeee;
  padding: 5px 5px 5px 10px;
  line-height: 1.2;
  white-space: pre-wrap;
}

pre code {
  text-align: left;
  word-wrap: normal;
  white-space: pre-wrap;
  font-size: 14px;
}

a:link, a:visited {
  color: #1367a7;
  text-decoration: none;
}

a:hover {
  color: #208799;
}

.layered-paper-big {
  /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */
  box-shadow:
          0px 0px 1px 1px rgba(0,0,0,0.35), /* The top layer shadow */
          5px 5px 0 0px #fff, /* The second layer */
          5px 5px 1px 1px rgba(0,0,0,0.35), /* The second layer shadow */
          10px 10px 0 0px #fff, /* The third layer */
          10px 10px 1px 1px rgba(0,0,0,0.35), /* The third layer shadow */
          15px 15px 0 0px #fff, /* The fourth layer */
          15px 15px 1px 1px rgba(0,0,0,0.35), /* The fourth layer shadow */
          20px 20px 0 0px #fff, /* The fifth layer */
          20px 20px 1px 1px rgba(0,0,0,0.35), /* The fifth layer shadow */
          25px 25px 0 0px #fff, /* The fifth layer */
          25px 25px 1px 1px rgba(0,0,0,0.35); /* The fifth layer shadow */
  margin-left: 10px;
  margin-right: 45px;
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  display: block;
  background-color: transparent;
  width: 224px;
  height: 224px;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-box_home {
  display: block;
  background-color: transparent;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px;
}
/* This container is needed to position the front and back side */
.flip-box-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  display: block;
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  justify-content: space-between; /* 确保文本和图片有足够的空间 */
  align-items: center;
}

/* Style the front side (fallback if image is missing) */


/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Bottom right text */
.text-block {
  position: absolute;
  top: 80%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color: black;
  color: white;
  opacity: 0.5;
  line-height: 5px; 
}

.content {
  display: block;
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  line-height: 35px;
  text-align: center;
}

.empty-box {
  display: block;
  background-color: transparent;
  width: 224px;
  height: 224px;
  border: 0px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  font-size:x-large; 
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 224px) {
  .prev, .next,.text {font-size: 11px}
}