body {
  --color-text: #fff;
  --color-bg: #d8bcac;
  --color-link: #ad836d;
  --color-link-hover: #79573e;
  --color-bgtitle: #48271b;
  --color-bgsubtitle: #7239ff;
  color: #79573e;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: cover;
}
header {
  background-color: rgba(240, 241, 245, 0.85);
  /* box-shadow: 40px 40px 100px rgba(24, 48, 63, 0.1); */
  backdrop-filter: blur(0.291667rem);
  display: none;
  transition: all 0.4s ease-in-out;
}
.hiddened {
  display: flex;
}
.showed {
  display: none;
}
/* 头部区域 */
canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* border:1px solid orangered;
margin-top: 0.555556rem; */
}
.content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 10rem;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--color-bg);
}

.content__title {
  font-size: 13vw;
  color: var(--color-bgtitle);
  text-transform: uppercase;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 1;
}

.content__subtitle {
  color: var(--color-bgsubtitle);
  font-size: 2.5vw;
  font-family: "Sacramento", cursive;
  font-weight: 400;
  margin: 0;
  line-height: 1;
}
.content {
  height: 100vh;
  justify-content: center;
}

/* 卡片区域 */
.explore {
  padding: 0.694444rem;
}
.explore-hd {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.explore-hd h3 {
  font-size: 0.305556rem;
  line-height: 140%;
  color: #384853;
  /* margin-top: ;
  margin-bottom: ; */
  margin: 0.277778rem auto 0.083333rem;
}
.explore-hd p {
  font-weight: 500;
  font-size: 0.111111rem;
  line-height: 150%;
  color: #6b7b8a;
  margin-bottom: 0.277778rem;
}
.explore-bd {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2.104167rem 2.104167rem;
  grid-column-gap: 0.277778rem;
  grid-row-gap: 0.277778rem;
}
.card {
  border-radius: 0.138889rem;
  padding: 0.166667rem;
  transition: all 0.3s ease-in-out;
}
.card:hover {
  transform: translateY(-0.138889rem);
  box-shadow: -0.046149rem -0.046149rem 0.138448rem #ffffff,
    0.069224rem 0.069224rem 0.138448rem rgba(174, 174, 192, 0.4);
}
.card:hover a img {
  transform: scale(1.02);
}
.card a {
  display: flex;
  width: 2.354167rem;
  height: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 0.111111rem;
  overflow: hidden;
  box-shadow: -0.030138rem -0.030138rem 0.090415rem #ffffff,
    0.045208rem 0.045208rem 0.090415rem rgba(174, 174, 192, 0.4);
}
.card a img {
  width: 2.354167rem;
  height: 1.770833rem;
  transition: all 0.3s ease-in-out;
}
.card-t {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.069444rem;
  line-height: 0.138889rem;
  letter-spacing: 0.013889rem;
  color: #6b7b8a;
  padding: 0.166667rem 0.166667rem 0.069444rem;
}
.card-t :nth-child(2) {
  color: rgba(107, 123, 138, 0.8);
  font-weight: 500;
}
.card a h4 {
  font-size: 0.208333rem;
  line-height: 140%;
  font-weight: 400;
  color: #263764;
  padding: 0rem 0.166667rem;
}
.card a > p {
  font-weight: 500;
  font-size: 0.097222rem;
  line-height: 150%;
  text-align: justify;
  color: #a0adcb;
  padding: 0.069444rem 0.166667rem 0rem;
}
.card-f {
  display: flex;
  font-weight: 600;
  font-size: 0.069444rem;
  line-height: 0.138889rem;
  letter-spacing: 1.5px;
  color: #7239ff;
  padding: 0.347222rem 0.166667rem 0.166667rem;
}
.card-f p {
  margin-right: 0.138889rem;
}

/* 3d翻转 */
.wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 8.611111rem;
  padding-bottom: 0.694444rem;
}

.cols {
  max-width: 8.611111rem;
  display: grid;
  grid-template-columns: repeat(3, 2.680556rem);
  /* grid-template-rows: repeat(3, 33.33%); */
  grid-gap: 0.277778rem 0.277778rem;
}

.col {
  cursor: pointer;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1),
    -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  min-height: 4.222222rem;
  height: auto;
  border-radius: 0.138889rem;
  color: #fff;
  font-size: 0.208333rem;
  line-height: 150%;
}

.back {
  background: #cedce7;
  background: -webkit-linear-gradient(45deg, #cedce7 0%, #596a72 100%);
  background: -o-linear-gradient(45deg, #cedce7 0%, #596a72 100%);
  background: linear-gradient(45deg, #cedce7 0%, #596a72 100%);
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  opacity: 0.6;
  background-color: #000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0.138889rem;
}
.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1),
    -webkit-transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0.208333rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0.006944rem solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container:hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.container:hover .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.front .inner p {
  font-size: 0.305556rem;
  font-weight: 500;
  margin-bottom: 0.277778rem;
  position: relative;
}

.front .inner p:after {
  content: "";
  width: 0.555556rem;
  height: 0.013889rem;
  position: absolute;
  background: #c6d4df;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -1.180556rem;
}

.front .inner span {
  color: rgba(255, 255, 255, 0.7);
  font-family: "Montserrat";
  font-weight: 300;
}
.back .inner a p {
  color: #fff;
  line-height: 200%;
}
.back .inner a p span {
  font-size: 0.138889rem;
  letter-spacing: 0.2em;
  line-height: 150%;
  color: #7239ff;
}

@media screen and (max-width: 1200px) {
  .cols {
    grid-template-columns: repeat(2, 4.166667rem);
  }
  .front,
  .back {
    min-height: 5.833333rem;
  }
}

@media screen and (max-width: 768px) {
  .cols {
    grid-template-columns: repeat(1, 100%);
  }
  .front,
  .back {
    min-height: 11.652778rem;
  }
}
/* 汉堡菜单 */
.hanbao {
  width: 8.611111rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0.555556rem;
  grid-row-gap: 0.416667rem;
  justify-items: center;
  padding-bottom: 0.694444rem;
}
.hanbao a {
  width: 4.027778rem;
  height: 2.944444rem;
  overflow: hidden;
  border-radius: 0.055556rem;
  position: relative;
}
.hanbao a div {
  transition: all 0.5s ease-in-out;
}
.hanbao a img {
  height: 2.944444rem;
  border-radius: 0.055556rem;
  transform: translate(-50%, 0);
  position: absolute;
  left: 2.013889rem;
}
.hanbao a div:hover {
  transform: scale(1.05);
}
/* 下载 */
.xiazai {
  width: 8.611111rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 0.243056rem;
  grid-row-gap: 0.347222rem;
  justify-items: center;
  padding-bottom: 0.694444rem;
}
.xiazai a {
  width: 2.708333rem;
  height: 1.527778rem;
  overflow: hidden;
  border-radius: 0.055556rem;
  position: relative;
  box-shadow: 1px 4px 10px rgba(110, 92, 255, 0.07);
}
.xiazai a div {
  transition: all 0.5s ease-in-out;
}
.xiazai a img {
  height: 1.527778rem;
  border-radius: 0.055556rem;
  transform: translate(-50%, 0);
  position: absolute;
  left: 1.354167rem;
}
.xiazai a div:hover {
  transform: scale(1.05);
}
/* tabbar */

.tabbar {
  width: 8.611111rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 0.208333rem;
  grid-row-gap: 0.277778rem;
  justify-items: center;
  padding-bottom: 0.694444rem;
}
.tabbar a {
  width: 1.944444rem;
  height: 1.09375rem;
  overflow: hidden;
  border-radius: 0.055556rem;
  position: relative;
  box-shadow: 1px 4px 10px rgba(110, 92, 255, 0.07);
}
.tabbar a div {
  transition: all 0.5s ease-in-out;
}
.tabbar a img {
  height: 1.09375rem;
  border-radius: 0.055556rem;
  transform: translate(-50%, 0);
  position: absolute;
  left: 0.972222rem;
}
.tabbar a div:hover {
  transform: scale(1.05);
}
/* 侧边栏 */
.sidebar {
  width: 8.611111rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 0.243056rem;
  grid-row-gap: 0.277778rem;
  justify-items: center;
  padding-bottom: 0.694444rem;
}
.sidebar a {
  width: 2.708333rem;
  height: 4.930556rem;
  overflow: hidden;
  border-radius: 0.055556rem;
  position: relative;
}
.sidebar a div {
  filter: blur(0.020833rem);
  transition: all 0.5s ease-in-out;
}
.sidebar a img {
  width: 2.430556rem;
  height: 4.652778rem;
  border-radius: 0.055556rem;
  transform: translate(-50%, 0);
  position: absolute;
  left: 1.215278rem;
  margin-top: 0.138889rem;
  margin-left: 0.138889rem;
}
.sidebar a div:hover {
  filter: blur(0);
}