@charset "UTF-8";
/*
    Carousel Component CSS Version
    Made by hoah2333
    Inspired form Carousel Component by Croquembouche
*/
:root {
  --base-roll-time: 0.5s;
  --base-wait-time: 5s;
  --img-2-time: calc(2 * (var(--base-roll-time) + var(--base-wait-time)));
  --img-3-time: calc(3 * (var(--base-roll-time) + var(--base-wait-time)));
  --img-4-time: calc(4 * (var(--base-roll-time) + var(--base-wait-time)));
  --img-5-time: calc(5 * (var(--base-roll-time) + var(--base-wait-time)));
  --img-6-time: calc(6 * (var(--base-roll-time) + var(--base-wait-time)));
  --navigator-mask: url("data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzIzMTgxNTt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjAiIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeT0iOCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjE2IiB3aWR0aD0iMjAiIGhlaWdodD0iNCIvPjwvc3ZnPg==");
}

.carousel-container {
  position: relative;
  overflow: hidden;
}
.carousel-container .rolling {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.carousel-container .rolling br {
  display: none;
}
.carousel-container .rolling a:nth-of-type(1) {
  width: 100%;
  position: relative;
}
.carousel-container .rolling a:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4), :nth-of-type(5), :nth-of-type(6)) {
  position: absolute;
  left: 100%;
  width: 100%;
}

/* ============== */
/* 图片切换动画部分 */
/* ============== */
.carousel-container .rolling.img-2 a:nth-of-type(1) {
  animation: rolling2-1 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-2 a:nth-of-type(2) {
  animation: rolling2-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rolling2-1 {
  0% {
    left: 0;
  }
  4.5454545455% {
    left: -100%;
  }
  49.99% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  54.5454545455% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes rolling2-2 {
  0% {
    left: 100%;
  }
  0% {
    left: 100%;
  }
  4.5454545455% {
    left: 0;
  }
  50% {
    left: 0;
  }
  54.5454545455% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.carousel-container .rolling.img-3 a:nth-of-type(1) {
  animation: rolling3-1 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-3 a:nth-of-type(2) {
  animation: rolling3-2 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-3 a:nth-of-type(3) {
  animation: rolling3-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rolling3-1 {
  0% {
    left: 0;
  }
  3.0303030303% {
    left: -100%;
  }
  66.6566666667% {
    left: -100%;
  }
  66.6666666667% {
    left: 100%;
  }
  69.696969697% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes rolling3-2 {
  0% {
    left: 100%;
  }
  0% {
    left: 100%;
  }
  3.0303030303% {
    left: 0;
  }
  33.3333333333% {
    left: 0;
  }
  36.3636363636% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling3-3 {
  0% {
    left: 100%;
  }
  33.3333333333% {
    left: 100%;
  }
  36.3636363636% {
    left: 0;
  }
  66.6666666667% {
    left: 0;
  }
  69.696969697% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.carousel-container .rolling.img-4 a:nth-of-type(1) {
  animation: rolling4-1 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-4 a:nth-of-type(2) {
  animation: rolling4-2 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-4 a:nth-of-type(3) {
  animation: rolling4-3 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-4 a:nth-of-type(4) {
  animation: rolling4-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rolling4-1 {
  0% {
    left: 0;
  }
  2.2727272727% {
    left: -100%;
  }
  74.99% {
    left: -100%;
  }
  75% {
    left: 100%;
  }
  77.2727272727% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes rolling4-2 {
  0% {
    left: 100%;
  }
  0% {
    left: 100%;
  }
  2.2727272727% {
    left: 0;
  }
  25% {
    left: 0;
  }
  27.2727272727% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling4-3 {
  0% {
    left: 100%;
  }
  25% {
    left: 100%;
  }
  27.2727272727% {
    left: 0;
  }
  50% {
    left: 0;
  }
  52.2727272727% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling4-4 {
  0% {
    left: 100%;
  }
  50% {
    left: 100%;
  }
  52.2727272727% {
    left: 0;
  }
  75% {
    left: 0;
  }
  77.2727272727% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.carousel-container .rolling.img-5 a:nth-of-type(1) {
  animation: rolling5-1 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-5 a:nth-of-type(2) {
  animation: rolling5-2 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-5 a:nth-of-type(3) {
  animation: rolling5-3 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-5 a:nth-of-type(4) {
  animation: rolling5-4 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-5 a:nth-of-type(5) {
  animation: rolling5-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rolling5-1 {
  0% {
    left: 0;
  }
  1.8181818182% {
    left: -100%;
  }
  79.99% {
    left: -100%;
  }
  80% {
    left: 100%;
  }
  81.8181818182% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes rolling5-2 {
  0% {
    left: 100%;
  }
  0% {
    left: 100%;
  }
  1.8181818182% {
    left: 0;
  }
  20% {
    left: 0;
  }
  21.8181818182% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling5-3 {
  0% {
    left: 100%;
  }
  20% {
    left: 100%;
  }
  21.8181818182% {
    left: 0;
  }
  40% {
    left: 0;
  }
  41.8181818182% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling5-4 {
  0% {
    left: 100%;
  }
  40% {
    left: 100%;
  }
  41.8181818182% {
    left: 0;
  }
  60% {
    left: 0;
  }
  61.8181818182% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling5-5 {
  0% {
    left: 100%;
  }
  60% {
    left: 100%;
  }
  61.8181818182% {
    left: 0;
  }
  80% {
    left: 0;
  }
  81.8181818182% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.carousel-container .rolling.img-6 a:nth-of-type(1) {
  animation: rolling6-1 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-6 a:nth-of-type(2) {
  animation: rolling6-2 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-6 a:nth-of-type(3) {
  animation: rolling6-3 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-6 a:nth-of-type(4) {
  animation: rolling6-4 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-6 a:nth-of-type(5) {
  animation: rolling6-5 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.carousel-container .rolling.img-6 a:nth-of-type(6) {
  animation: rolling6-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes rolling6-1 {
  0% {
    left: 0;
  }
  1.5151515152% {
    left: -100%;
  }
  83.3233333333% {
    left: -100%;
  }
  83.3333333333% {
    left: 100%;
  }
  84.8484848485% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
@keyframes rolling6-2 {
  0% {
    left: 100%;
  }
  0% {
    left: 100%;
  }
  1.5151515152% {
    left: 0;
  }
  16.6666666667% {
    left: 0;
  }
  18.1818181818% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling6-3 {
  0% {
    left: 100%;
  }
  16.6666666667% {
    left: 100%;
  }
  18.1818181818% {
    left: 0;
  }
  33.3333333333% {
    left: 0;
  }
  34.8484848485% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling6-4 {
  0% {
    left: 100%;
  }
  33.3333333333% {
    left: 100%;
  }
  34.8484848485% {
    left: 0;
  }
  50% {
    left: 0;
  }
  51.5151515152% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling6-5 {
  0% {
    left: 100%;
  }
  50% {
    left: 100%;
  }
  51.5151515152% {
    left: 0;
  }
  66.6666666667% {
    left: 0;
  }
  68.1818181818% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rolling6-6 {
  0% {
    left: 100%;
  }
  66.6666666667% {
    left: 100%;
  }
  68.1818181818% {
    left: 0;
  }
  83.3333333333% {
    left: 0;
  }
  84.8484848485% {
    left: -100%;
  }
  99.99% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
/* ============ */
/* 进度条动画部分 */
/* ============ */
.carousel-container .progress.width-2 {
  animation: progress-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-2 {
  animation: fake-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.width-2,
.carousel-container .progress.fake-2 {
  width: calc(100% / 2);
}

@keyframes progress-2 {
  0% {
    left: 0;
  }
  4.5454545455% {
    left: 50%;
  }
  50% {
    left: 50%;
  }
  54.5454545455% {
    left: 100%;
  }
  99.99% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes fake-2 {
  0% {
    left: 0;
  }
  0.01% {
    left: -50%;
  }
  50% {
    left: -50%;
  }
  54.5454545455% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
.carousel-container .progress.width-3 {
  animation: progress-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-3 {
  animation: fake-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.width-3,
.carousel-container .progress.fake-3 {
  width: calc(100% / 3);
}

@keyframes progress-3 {
  0% {
    left: 0;
  }
  3.0303030303% {
    left: 33.3333333333%;
  }
  33.3333333333% {
    left: 33.3333333333%;
  }
  36.3636363636% {
    left: 66.6666666667%;
  }
  66.6666666667% {
    left: 66.6666666667%;
  }
  69.696969697% {
    left: 100%;
  }
  99.99% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes fake-3 {
  0% {
    left: 0;
  }
  0.01% {
    left: -33.3333333333%;
  }
  66.6666666667% {
    left: -33.3333333333%;
  }
  69.696969697% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
.carousel-container .progress.width-4 {
  animation: progress-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-4 {
  animation: fake-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.width-4,
.carousel-container .progress.fake-4 {
  width: calc(100% / 4);
}

@keyframes progress-4 {
  0% {
    left: 0;
  }
  2.2727272727% {
    left: 25%;
  }
  25% {
    left: 25%;
  }
  27.2727272727% {
    left: 50%;
  }
  50% {
    left: 50%;
  }
  52.2727272727% {
    left: 75%;
  }
  75% {
    left: 75%;
  }
  77.2727272727% {
    left: 100%;
  }
  99.99% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes fake-4 {
  0% {
    left: 0;
  }
  0.01% {
    left: -25%;
  }
  75% {
    left: -25%;
  }
  77.2727272727% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
.carousel-container .progress.width-5 {
  animation: progress-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-5 {
  animation: fake-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.width-5,
.carousel-container .progress.fake-5 {
  width: calc(100% / 5);
}

@keyframes progress-5 {
  0% {
    left: 0;
  }
  1.8181818182% {
    left: 20%;
  }
  20% {
    left: 20%;
  }
  21.8181818182% {
    left: 40%;
  }
  40% {
    left: 40%;
  }
  41.8181818182% {
    left: 60%;
  }
  60% {
    left: 60%;
  }
  61.8181818182% {
    left: 80%;
  }
  80% {
    left: 80%;
  }
  81.8181818182% {
    left: 100%;
  }
  99.99% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes fake-5 {
  0% {
    left: 0;
  }
  0.01% {
    left: -20%;
  }
  80% {
    left: -20%;
  }
  81.8181818182% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
.carousel-container .progress.width-6 {
  animation: progress-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-6 {
  animation: fake-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.width-6,
.carousel-container .progress.fake-6 {
  width: calc(100% / 6);
}

@keyframes progress-6 {
  0% {
    left: 0;
  }
  1.5151515152% {
    left: 16.6666666667%;
  }
  16.6666666667% {
    left: 16.6666666667%;
  }
  18.1818181818% {
    left: 33.3333333333%;
  }
  33.3333333333% {
    left: 33.3333333333%;
  }
  34.8484848485% {
    left: 50%;
  }
  50% {
    left: 50%;
  }
  51.5151515152% {
    left: 66.6666666667%;
  }
  66.6666666667% {
    left: 66.6666666667%;
  }
  68.1818181818% {
    left: 83.3333333333%;
  }
  83.3333333333% {
    left: 83.3333333333%;
  }
  84.8484848485% {
    left: 100%;
  }
  99.99% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes fake-6 {
  0% {
    left: 0;
  }
  0.01% {
    left: -16.6666666667%;
  }
  83.3333333333% {
    left: -16.6666666667%;
  }
  84.8484848485% {
    left: 0;
  }
  100% {
    left: 0;
  }
}
/* ========== */
/* 导航菜单部分 */
/* ========== */
.carousel-container .navigator {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.25s 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-container .navigator.none {
  display: none;
}
.carousel-container .navigator::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.7);
  position: absolute;
  width: 100%;
  height: 100%;
  mask-size: 40%;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-image: var(--navigator-mask);
  left: 0;
  transition: left 0.75s 0s linear;
}
.carousel-container .navigator:hover {
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  transition-delay: 0s;
}
.carousel-container .navigator:hover::before {
  left: -999vw;
}
.carousel-container .navigator .navigator-links {
  display: grid;
  position: absolute;
  left: -999vw;
  width: 100%;
  height: 100%;
  transition: left 0s 0.25s linear;
}
.carousel-container .navigator .navigator-links.links-2 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
}
.carousel-container .navigator .navigator-links.links-3 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
}
.carousel-container .navigator .navigator-links.links-4 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
}
.carousel-container .navigator .navigator-links.links-5 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
}
.carousel-container .navigator .navigator-links.links-6 {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
}
@media (max-width: 526px) {
  .carousel-container .navigator .navigator-links.links-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
  .carousel-container .navigator .navigator-links.links-5, .carousel-container .navigator .navigator-links.links-6 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  .carousel-container .navigator .navigator-links.links-5 a:nth-of-type(5) {
    grid-column: 1/3;
  }
}
.carousel-container .navigator .navigator-links a {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: left;
  box-sizing: border-box;
  border-left: 5px solid rgba(0, 0, 0, 0.4);
  padding-left: 10px;
  color: #3a3a3a;
  font-size: 1.15rem;
  text-decoration: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.25s 0s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1024px) {
  .carousel-container .navigator .navigator-links a {
    font-size: 1rem;
  }
}
@media (max-width: 980px) {
  .carousel-container .navigator .navigator-links a {
    font-size: 0.75rem;
  }
}
.carousel-container .navigator .navigator-links a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-container .navigator .navigator-links a:hover::after {
  left: 0;
}
.carousel-container .navigator:hover .navigator-links {
  left: 0;
  transition-delay: 0s;
}
.carousel-container .navigator:hover .navigator-links a {
  clip-path: inset(0);
  transition-delay: 0.25s;
}
.carousel-container .navigator br {
  display: none;
}

/* 一个 a:not(a:last-of-type) 就能解决的事 */
.carousel-container .navigator .navigator-links a:nth-of-type(1), .carousel-container .navigator .navigator-links.links-3 :is(a:nth-of-type(2)), .carousel-container .navigator .navigator-links.links-4 :is(a:nth-of-type(2), a:nth-of-type(3)), .carousel-container .navigator .navigator-links.links-5 :is(a:nth-of-type(2), a:nth-of-type(3), a:nth-of-type(4)), .carousel-container .navigator .navigator-links.links-6 :is(a:nth-of-type(2), a:nth-of-type(3), a:nth-of-type(4), a:nth-of-type(5)) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.carousel-container :is(.progress, .fake-1 + .navigator) {
  display: none;
}

/* ======== */
/* 防呆不防傻 */
/* ======== */
.carousel-container :is([class*="$number"], .rolling a[href*="$link"], .navigator .navigator-links a[style*="$link"]) {
  display: none;
}

/*# sourceMappingURL=main.css.map */