body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  perspective: 1000px;
  /*动画加载*/
}
.square-box {
  position: relative;
  margin: 5.20833333vw auto;
  width: 26.04166667vw;
  height: 36.45833333vw;
  transform-style: preserve-3d;
  transform: translateZ(0px) rotateY(0deg);
  /* 修改初始状态 */
  /* 前边 */
  /* 中间 */
  /* 底部 */
}
.square-box .transparent-plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 26.04166667vw;
  height: 36.45833333vw;
  transform: translateZ(0px) rotateY(90deg);
}
.square-box .front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0.1px);
  background-color: #00278b;
  box-shadow: 2.60416667vw 2.60416667vw 5.20833333vw #00278b, -2.60416667vw -2.60416667vw 5.20833333vw #0037c3;
  text-align: center;
}
.square-box .front span {
  font-family: "almmldt", var(--font-style);
  --wght: 700;
  --wdth: 125;
  --slnt: 12;
  --SRIF: 1;
  font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth), 'slnt' var(--slnt), 'SRIF' var(--SRIF);
  font-size: 11.19791667vw;
  line-height: 12.15277778vw;
  color: #fff;
}
.square-box .front span:nth-child(1):after {
  content: "GE";
  display: block;
  padding-top: 0.78125vw;
  padding-right: 0.625vw;
  border: 1px solid #000;
}
.square-box .front span:nth-child(2)::after {
  content: "ZHI";
  display: block;
  padding-right: 0.625vw;
  border: 1px solid #000;
}
.square-box .front span:nth-child(3)::after {
  content: "JIE";
  display: block;
  padding-right: 0.625vw;
  border: 1px solid #000;
}
.square-box .middle {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(-0.1px);
  width: 100%;
  height: 100%;
  background-color: #00278b;
}
.square-box .middle span {
  display: block;
  font-size: 26.04166667vw;
  line-height: 36.45833333vw;
  transform: rotateY(180deg);
  color: #fff;
}
.square-box .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 36.45833333vw;
  height: 26.04166667vw;
  transform: translateZ(0px) rotate(90deg) translate(5.20833333vw, 5.20833333vw);
  background-color: #00278b;
}
.square-box .back a::after {
  content: "咯吱节";
  font-size: 12.70833333vw;
  line-height: 23.4375vw;
  letter-spacing: -0.78125vw;
  font-weight: 700;
  color: #fff;
}
@keyframes square-box {
  0% {
    transform: translateZ(999.7109375px) rotateY(1552.96232559deg);
  }
  10% {
    transform: translateZ(691.109375px) rotateY(692.11390522deg);
  }
  20% {
    transform: translateZ(388.09375px) rotateY(308.45671536deg);
  }
  30% {
    transform: translateZ(217.9375px) rotateY(137.47093344deg);
  }
  40% {
    transform: translateZ(122.375px) rotateY(61.2671359deg);
  }
  50% {
    transform: translateZ(68.75px) rotateY(27.30508893deg);
  }
  60% {
    transform: translateZ(38.5px) rotateY(12.16942015deg);
  }
  70% {
    transform: translateZ(22px) rotateY(5.42176871deg);
  }
  80% {
    transform: translateZ(11px) rotateY(2.42857143deg);
  }
  90% {
    transform: translateZ(5px) rotateY(1deg);
  }
  100% {
    transform: translateZ(0px) rotateY(0deg);
  }
}
@keyframes square-box-hover {
  10% {
    transform: rotateY(-30px);
  }
  20% {
    transform: rotateY(-80deg);
  }
  30% {
    transform: rotateY(-130deg);
  }
  40% {
    transform: rotateY(-165deg);
  }
  46% {
    transform: rotateY(-180deg);
  }
  54% {
    transform: rotateY(-180deg) rotate(0deg);
  }
  75% {
    transform: rotateY(-225deg) rotate(-45deg);
  }
  88% {
    transform: rotateY(-270deg) rotate(-67deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
@keyframes square-box-hover-not {
  10% {
    transform: rotate(0deg);
  }
  12% {
    transform: rotateY(-270deg) rotate(-23deg);
    transform: rotate(0deg);
  }
  25% {
    transform: rotateY(-225deg) rotate(-45deg);
    transform: rotate(0deg);
  }
  46% {
    transform: rotateY(-180deg) rotate(-90deg);
  }
  54% {
    transform: rotateY(-180deg);
  }
  60% {
    transform: rotateY(-165deg);
  }
  80% {
    transform: rotateY(-130deg);
  }
  90% {
    transform: rotateY(-80deg);
  }
  100% {
    transform: rotateY(-30px);
  }
}
@keyframes square-box-hover-back {
  0% {
    transform: translateZ(0px) rotate(90deg) translate(5.20833333vw, 5.20833333vw);
  }
  25% {
    transform: translateZ(0px) rotate(90deg) translate(5.20833333vw, 5.20833333vw);
  }
  50% {
    transform: translateZ(1px) rotate(90deg) translate(5.20833333vw, 5.20833333vw);
  }
  100% {
    transform: translateZ(1px) rotate(90deg) translate(5.20833333vw, 5.20833333vw);
  }
}
.home {
  position: relative;
}
.home a {
  position: fixed;
  top: 1.30208333vw;
  left: 1.30208333vw;
  width: 3.90625vw;
  height: 3.90625vw;
  background-color: #00278b;
  color: #fff;
  text-align: center;
  line-height: 3.90625vw;
  font-size: 1.5625vw;
  border-radius: 50%;
}

.context_list {
  position: absolute;
  top: 7vw;
  left: 2vw;
}
.context a{
  display: block;
  padding: 0.75vw;

}
.context a{
  font-size: 7vw;
  font-weight: 700;
}

.context a:hover{
  background-color: #fff;
  /*width: 1vw;*/
}



.context {
  position: relative; /* 关键：让图片框绝对定位参考这个 li */
}
.context:hover .hover-img {
  display: block;
}
.hover-img {
  display: none;
  position: absolute;
  top: -95%;
  left: 0;
  margin-top: 5px;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hover-img img {
  max-width: 200px;
  max-height: 150px;
  display: block;
}