.ani {
  transition: all 0.8s;
}
.ani.down {
  transform: translateY(-80px);
}
.ani.up {
  transform: translateY(80px);
}
.ani.left {
  transform: translateX(80px);
}
.ani.right {
  transform: translateX(-80px);
}
.ani.opacity {
  opacity: 0;
}
.ani.on.down, .ani.on.up {
  transform: translateY(0);
}
.ani.on.left, .ani.on.right {
  transform: translateX(0);
}
.ani.on.opacity {
  opacity: 1;
}

.point-box {
  width: 150vw;
  padding: 43.05% 0;
  position: absolute;
  left: -17%;
  overflow: hidden;
  z-index: 0;
  transition: all 0.6s;
}
.point-box .gradient,
.point-box .circle {
  position: absolute;
}
.point-box .gradient-s {
  width: 30.395%;
  left: -17%;
  bottom: -55%;
  left: 0;
  bottom: 0;
}
.point-box .gradient-b {
  width: 53.8515%;
  top: -20%;
  right: -34%;
  top: 0;
  right: -5%;
  opacity: 0.3;
  opacity: 1;
}
.point-box .diagonal,
.point-box .border {
  border-radius: 50%;
}
.point-box .diagonal {
  width: 200px;
  height: 200px;
  left: 18.5%;
  bottom: 44.5%;
  overflow: hidden;
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 5px;
  column-gap: 0;
}
.point-box .diagonal span {
  display: block;
  width: 100%;
  height: 2px;
  flex-shrink: 0;
  background: var(--color-white);
  opacity: 0.4;
}
.point-box .border {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  left: 26%;
  bottom: 58.5%;
}

.hover-item {
  position: relative;
  overflow: hidden;
}
.hover-item .hover-bg {
  display: block;
  width: 0;
  height: 0;
  background: var(--color-main);
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: all 0.8s, opacity 0s;
}

.keyword {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  row-gap: 5px;
  column-gap: 5px;
}
.keyword span {
  display: inline-block;
  background: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: 100px;
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 700;
  padding: 5px 20px;
}
.keyword.big span {
  font-size: 1.6rem;
}

.list-item {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transition: all 0.4s;
}
.list-item.small {
  height: 255px;
}
.list-item.small h5 {
  height: 2.8em;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.4;
}
.list-item.big {
  height: 430px;
}
.list-item.big h5 {
  height: 2.6em;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3;
}
.list-item * {
  transition: all 0.4s;
}
.list-item a {
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.list-item h5,
.list-item p {
  width: 100%;
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.list-item h5 {
  color: #111;
  margin: 20px 0 0;
  -webkit-line-clamp: 2;
}
.list-item p {
  height: 4.8em;
  color: #555;
  font-weight: 300;
  line-height: 1.6;
  margin: 40px 0 0;
  -webkit-line-clamp: 3;
}
.list-item .date {
  display: inline-block;
  color: #aaa;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: auto;
}
.list-item:hover {
  border-color: transparent;
}
.list-item:hover .hover-bg {
  width: 70em;
  height: 70em;
}
.list-item:hover .keyword span {
  border-color: var(--color-white);
}
.list-item:hover h5, .list-item:hover p, .list-item:hover .date {
  color: var(--color-white);
}
.list-item:hover p {
  opacity: 0.8;
}
.list-item:hover .date {
  opacity: 0.6;
}

.logos-button {
  width: 300px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  background: var(--color-main);
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 0 30px;
}
.logos-button * {
  transition: all 0.4s;
}
.logos-button em {
  color: var(--color-white);
  font-size: 1.8rem;
  font-weight: 600;
}
.logos-button.download {
  width: auto;
  max-width: inherit;
  background: transparent;
}
.logos-button.download .svg {
  width: 24px;
  height: 24px;
}
.logos-button.download:hover .hover-bg {
  width: 40em;
  height: 40em;
}
.logos-button.download:hover em {
  color: var(--color-white);
}
.logos-button.download:hover .download-cls {
  fill: var(--color-white);
}
.logos-button.en {
  margin: 40px auto 0;
}
.logos-button.en em {
  font-family: var(--font-redhatdisplay);
}
.logos-button.gray {
  background: #333;
}
.logos-button.border {
  background: transparent;
  border-color: var(--color-border);
}
.logos-button.border em {
  color: #ccc;
}

.view-more {
  display: inline-flex;
  align-items: center;
  column-gap: 5px;
  color: #ccc;
}
.view-more span {
  font-size: 1.8rem;
  font-weight: 600;
}
.view-more i {
  font-size: 2.4rem;
}

.slide-wrap .option-box,
.slide-wrap .button-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  row-gap: 0;
  column-gap: 20px;
}
.slide-wrap .option-box {
  margin-top: 40px;
}
.slide-wrap .option-box:has(.swiper-pagination-lock) {
  display: none;
}
.slide-wrap .progress-bar {
  width: 100%;
  height: 1px;
  background: #eee;
  position: relative;
}
.slide-wrap .progress-bar span {
  background: #ccc;
}
.slide-wrap .button-box {
  flex-shrink: 0;
}
.slide-wrap .button-box button img {
  transition: all 0.4s;
  filter: grayscale(1) brightness(1.5);
}
.slide-wrap .button-box button:hover img {
  filter: inherit;
}