.sectionWrapper {
  width: 100%;
  height: 100%;
}
.sectionWrapper > * {
  position: absolute;
}
@font-face {
  font-family: "BauerBodoniStd-BoldItalic";
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot");
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot?#font-spider") format("embedded-opentype"), url("BauerBodoniStd-BoldItalic.2bab0b2c.woff") format("woff"), url("BauerBodoniStd-BoldItalic.f32cc148.ttf") format("truetype"), url("BauerBodoniStd-BoldItalic.880bc6ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bender-Bold";
  src: url("Bender-Bold.feaef48b.eot");
  src: url("Bender-Bold.feaef48b.eot?#font-spider") format("embedded-opentype"), url("Bender-Bold.6f29d761.woff") format("woff"), url("Bender-Bold.f15333d6.ttf") format("truetype"), url("Bender-Bold.6e30e29d.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BookAntiqua";
  src: url("BookAntiqua.78b274e2.eot");
  src: url("BookAntiqua.78b274e2.eot?#font-spider") format("embedded-opentype"), url("BookAntiqua.2c67b0ec.woff") format("woff"), url("BookAntiqua.64d2fdf3.ttf") format("truetype"), url("BookAntiqua.3d3ea3d9.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("Gilroy-Bold.dd90083b.eot");
  src: url("Gilroy-Bold.dd90083b.eot?#font-spider") format("embedded-opentype"), url("Gilroy-Bold.31448deb.woff") format("woff"), url("Gilroy-Bold.6f68dfcc.ttf") format("truetype"), url("Gilroy-Bold.c2d7ddc2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBold";
  src: url("Gilroy-ExtraBold.d5ef9e46.eot");
  src: url("Gilroy-ExtraBold.d5ef9e46.eot?#font-spider") format("embedded-opentype"), url("Gilroy-ExtraBold.b7098c56.woff") format("woff"), url("Gilroy-ExtraBold.428c641c.ttf") format("truetype"), url("Gilroy-ExtraBold.3b7b7927.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geometos";
  src: url("Geometos.541af104.eot");
  src: url("Geometos.541af104.eot?#font-spider") format("embedded-opentype"), url("Geometos.4cf18d15.woff") format("woff"), url("Geometos.2625552d.ttf") format("truetype"), url("Geometos.9d5e0913.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Impact";
  src: url("Impact.0695ad44.eot");
  src: url("Impact.0695ad44.eot?#font-spider") format("embedded-opentype"), url("Impact.891c1574.woff") format("woff"), url("Impact.611a577e.ttf") format("truetype"), url("Impact.13f4ae27.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot");
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Bold.938d54a9.woff") format("woff"), url("SourceHanSansCN-Bold.4646ff07.ttf") format("truetype"), url("SourceHanSansCN-Bold.d984f7ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("SourceHanSansCN-Heavy.2dc04107.eot");
  src: url("SourceHanSansCN-Heavy.2dc04107.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Heavy.69c3e101.woff") format("woff"), url("SourceHanSansCN-Heavy.5299c930.ttf") format("truetype"), url("SourceHanSansCN-Heavy.d632f58f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url("SourceHanSansCN-Medium.a4046152.eot");
  src: url("SourceHanSansCN-Medium.a4046152.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Medium.9cb66e44.woff") format("woff"), url("SourceHanSansCN-Medium.c0013463.ttf") format("truetype"), url("SourceHanSansCN-Medium.44ae7d33.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url("SourceHanSansCN-Regular.fb9349ce.eot");
  src: url("SourceHanSansCN-Regular.fb9349ce.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Regular.4e47f525.woff") format("woff"), url("SourceHanSansCN-Regular.c2375b0c.ttf") format("truetype"), url("SourceHanSansCN-Regular.c83c287f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold.6e533d13.eot");
  src: url("SourceHanSerifCN-Bold.6e533d13.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Bold.b6fb0845.woff") format("woff"), url("SourceHanSerifCN-Bold.42b9df64.ttf") format("truetype"), url("SourceHanSerifCN-Bold.84f2db50.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Heavy";
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot");
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Heavy.79f04e5b.woff") format("woff"), url("SourceHanSerifCN-Heavy.d7009eb1.ttf") format("truetype"), url("SourceHanSerifCN-Heavy.6486c971.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium";
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot");
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Medium.1e284ab5.woff") format("woff"), url("SourceHanSerifCN-Medium.5698c813.ttf") format("truetype"), url("SourceHanSerifCN-Medium.7838a329.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular";
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot");
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Regular.bd2be359.woff") format("woff"), url("SourceHanSerifCN-Regular.b55ae8d3.ttf") format("truetype"), url("SourceHanSerifCN-Regular.90a5a795.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
#home {
  background-image: url("background.df112d12.png");
  background-size: cover;
  background-position: center;
  user-select: none;
}
#home .ribbon {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#home .ribbon.back {
  background-image: url("ribbon-back.8fd526f9.png");
  opacity: 0;
}
.h5 #home .ribbon.back {
  background-position: 29% center;
}
#home .ribbon.front {
  background-image: url("ribbon-front.0b09fdf1.png");
  opacity: 0;
}
.h5 #home .ribbon.front {
  background-size: contain;
  background-position: bottom center;
}
#home .kv {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("kv.5d480c98.png");
  background-size: 81%;
  background-position: right bottom;
  background-repeat: no-repeat;
  opacity: 0;
}
.pc #home .kv img {
  display: none;
}
.h5 #home .kv {
  width: 100%;
  background-image: none;
}
.h5 #home .kv img {
  width: 190%;
  position: absolute;
  bottom: 0;
  left: -48%;
}
#home .thank-you {
  position: absolute;
  top: 23rem;
  left: 0;
  width: 32rem;
  height: 23rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
}
#home .thank-you .block {
  width: 0.5rem;
  height: 20.5625rem;
  background-image: linear-gradient(to bottom, #eec147 0%, #ee8947 60%, #eec147 100%);
}
#home .thank-you img {
  height: 100%;
}
.pc #home .thank-you {
  width: 512px;
  height: 368px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.pc #home .thank-you .block {
  width: 8px;
  height: 329px;
  background-image: linear-gradient(to bottom, #eec147 0%, #ee8947 60%, #eec147 100%);
}
.h5 #home .thank-you {
  top: 10.88%;
  width: 19rem;
  height: 14rem;
}
.h5 #home .thank-you .block {
  height: 11.75rem;
}
.h5 #home .thank-you img {
  left: 1.7rem;
  bottom: -0.8rem;
  height: 13.25rem;
}
#home .button-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  opacity: 0;
}
#home .button-group a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.625rem;
  width: 9.0625rem;
  border: 2px solid #000;
  border-radius: 1.3125rem;
  background-color: transparent;
  color: #000;
  font-size: 1.125rem;
  line-height: 1;
  text-decoration: none;
  font-family: "SourceHanSansCN-Bold";
  outline: none;
  cursor: pointer;
}
#home .button-group a + a {
  margin-top: 0.8125rem;
}
#home .button-group a .icon {
  height: 1rem;
  width: 1rem;
  margin-right: 0.5rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#home .button-group a .icon.download {
  background-image: url("download.cad3accc.png");
}
#home .button-group a .icon.official {
  background-image: url("official.261e1bc7.png");
}
.pc #home .button-group {
  bottom: 3.4375rem;
  left: 4.0625rem;
}
.h5 #home .button-group {
  bottom: 5rem;
  left: calc(50% - 8.0625rem / 2);
}
.h5 #home .button-group a {
  height: 2.625rem;
  width: 8.0625rem;
  border-color: transparent;
  color: #34221f;
  background-color: rgba(253, 253, 252, 0.8);
}
#home .scroll-tip {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  filter: drop-shadow(#fff 0 0 3px);
  opacity: 0;
}
.h5 #home .scroll-tip {
  left: 17%;
}
.pc #home .scroll-tip::before,
.pc #home .scroll-tip::after {
  content: "";
  position: absolute;
  top: 1.21rem;
  width: 4.14rem;
  height: 1px;
}
.pc #home .scroll-tip::before {
  left: -5.56rem;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
}
.pc #home .scroll-tip::after {
  right: -5.56rem;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.91) 0%, rgba(255, 255, 255, 0) 100%);
}
.pc #home .scroll-tip .mouse {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  height: 2.42rem;
  width: 1.42rem;
  border: 2px solid #fff;
  border-radius: 0.71rem;
}
.pc #home .scroll-tip .mouse .wheel {
  width: 2px;
  height: 0.57rem;
  margin-top: 0.285rem;
  background-color: #fff;
}
#home .scroll-tip .arrow-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.57rem;
}
@keyframes flash-arrow {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#home .scroll-tip .arrow-group .arrow {
  height: 0.6rem;
  width: 0.6rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform-origin: center;
  transform: rotate(45deg);
  animation: flash-arrow ease 2s infinite;
}
#home .scroll-tip .arrow-group .arrow:nth-child(2) {
  animation-delay: 0.5s;
}
#home .rhodes-island {
  position: absolute;
  right: 4.0625rem;
  bottom: 2.8125rem;
  height: 3.375rem;
  opacity: 0.2;
}
.h5 #home .rhodes-island {
  right: 1.64rem;
  bottom: 1.36rem;
  height: 2.375rem;
  opacity: 0.5;
}
@font-face {
  font-family: "BauerBodoniStd-BoldItalic";
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot");
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot?#font-spider") format("embedded-opentype"), url("BauerBodoniStd-BoldItalic.2bab0b2c.woff") format("woff"), url("BauerBodoniStd-BoldItalic.f32cc148.ttf") format("truetype"), url("BauerBodoniStd-BoldItalic.880bc6ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bender-Bold";
  src: url("Bender-Bold.feaef48b.eot");
  src: url("Bender-Bold.feaef48b.eot?#font-spider") format("embedded-opentype"), url("Bender-Bold.6f29d761.woff") format("woff"), url("Bender-Bold.f15333d6.ttf") format("truetype"), url("Bender-Bold.6e30e29d.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BookAntiqua";
  src: url("BookAntiqua.78b274e2.eot");
  src: url("BookAntiqua.78b274e2.eot?#font-spider") format("embedded-opentype"), url("BookAntiqua.2c67b0ec.woff") format("woff"), url("BookAntiqua.64d2fdf3.ttf") format("truetype"), url("BookAntiqua.3d3ea3d9.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("Gilroy-Bold.dd90083b.eot");
  src: url("Gilroy-Bold.dd90083b.eot?#font-spider") format("embedded-opentype"), url("Gilroy-Bold.31448deb.woff") format("woff"), url("Gilroy-Bold.6f68dfcc.ttf") format("truetype"), url("Gilroy-Bold.c2d7ddc2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBold";
  src: url("Gilroy-ExtraBold.d5ef9e46.eot");
  src: url("Gilroy-ExtraBold.d5ef9e46.eot?#font-spider") format("embedded-opentype"), url("Gilroy-ExtraBold.b7098c56.woff") format("woff"), url("Gilroy-ExtraBold.428c641c.ttf") format("truetype"), url("Gilroy-ExtraBold.3b7b7927.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geometos";
  src: url("Geometos.541af104.eot");
  src: url("Geometos.541af104.eot?#font-spider") format("embedded-opentype"), url("Geometos.4cf18d15.woff") format("woff"), url("Geometos.2625552d.ttf") format("truetype"), url("Geometos.9d5e0913.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Impact";
  src: url("Impact.0695ad44.eot");
  src: url("Impact.0695ad44.eot?#font-spider") format("embedded-opentype"), url("Impact.891c1574.woff") format("woff"), url("Impact.611a577e.ttf") format("truetype"), url("Impact.13f4ae27.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot");
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Bold.938d54a9.woff") format("woff"), url("SourceHanSansCN-Bold.4646ff07.ttf") format("truetype"), url("SourceHanSansCN-Bold.d984f7ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("SourceHanSansCN-Heavy.2dc04107.eot");
  src: url("SourceHanSansCN-Heavy.2dc04107.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Heavy.69c3e101.woff") format("woff"), url("SourceHanSansCN-Heavy.5299c930.ttf") format("truetype"), url("SourceHanSansCN-Heavy.d632f58f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url("SourceHanSansCN-Medium.a4046152.eot");
  src: url("SourceHanSansCN-Medium.a4046152.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Medium.9cb66e44.woff") format("woff"), url("SourceHanSansCN-Medium.c0013463.ttf") format("truetype"), url("SourceHanSansCN-Medium.44ae7d33.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url("SourceHanSansCN-Regular.fb9349ce.eot");
  src: url("SourceHanSansCN-Regular.fb9349ce.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Regular.4e47f525.woff") format("woff"), url("SourceHanSansCN-Regular.c2375b0c.ttf") format("truetype"), url("SourceHanSansCN-Regular.c83c287f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold.6e533d13.eot");
  src: url("SourceHanSerifCN-Bold.6e533d13.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Bold.b6fb0845.woff") format("woff"), url("SourceHanSerifCN-Bold.42b9df64.ttf") format("truetype"), url("SourceHanSerifCN-Bold.84f2db50.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Heavy";
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot");
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Heavy.79f04e5b.woff") format("woff"), url("SourceHanSerifCN-Heavy.d7009eb1.ttf") format("truetype"), url("SourceHanSerifCN-Heavy.6486c971.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium";
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot");
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Medium.1e284ab5.woff") format("woff"), url("SourceHanSerifCN-Medium.5698c813.ttf") format("truetype"), url("SourceHanSerifCN-Medium.7838a329.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular";
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot");
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Regular.bd2be359.woff") format("woff"), url("SourceHanSerifCN-Regular.b55ae8d3.ttf") format("truetype"), url("SourceHanSerifCN-Regular.90a5a795.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
#change {
  position: relative;
  background-image: url("background.ee0268ce.jpg");
  background-size: cover;
  background-position: center;
  user-select: none;
}
.pc #change .section-wrapper {
  position: relative;
  box-sizing: border-box;
  height: 100%;
}
.pc #change .section-wrapper .bg-amiya {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pc #change .section-wrapper .bg-amiya .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: left top;
  background-repeat: no-repeat;
  opacity: 0;
}
.pc #change .section-wrapper .bg-amiya .inner.caster {
  background-image: url("background-amiya-caster.cddbafcb.png");
}
.pc #change .section-wrapper .bg-amiya .inner.guard {
  background-image: url("background-amiya-guard.e09b4bd7.png");
}
.pc #change .section-wrapper .banner {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 83px;
}
.pc #change .section-wrapper .banner .bg {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0;
  overflow: hidden;
}
.pc #change .section-wrapper .banner .bg img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 83px;
  opacity: 0;
}
.pc #change .section-wrapper .banner .bg.show-red img.red {
  opacity: 1;
}
.pc #change .section-wrapper .banner .bg.show-blue img.blue {
  opacity: 1;
}
.pc #change .section-wrapper .banner .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 301px;
  opacity: 0;
}
.pc #change .section-wrapper .banner .content .title {
  position: absolute;
  top: -178px;
  left: 0;
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.pc #change .section-wrapper .banner .content .title svg text {
  font-family: "SourceHanSerifCN-Bold";
  font-size: 124px;
  line-height: 1;
}
.pc #change .section-wrapper .banner .content .title .bar {
  position: absolute;
  bottom: 16%;
  left: 0;
  width: 100%;
}
.pc #change .section-wrapper .banner .content .title .bar.red,
.pc #change .section-wrapper .banner .content .title .bar.blue {
  left: 27%;
  bottom: 22%;
  width: 46%;
}
.pc #change .section-wrapper .banner .content .title .bar.blue {
  opacity: 0;
}
.pc #change .section-wrapper .banner .content .title .text {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 248px;
  height: 136px;
  clip-path: url(#path-change);
  display: none;
  font-family: "SourceHanSerifCN-Bold";
  font-size: 124px;
  line-height: 1;
  color: transparent;
}
.pc #change .section-wrapper .banner .content .title .text .text-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  background-color: #000;
  transition: transform 0.5s;
}
.pc #change .section-wrapper .banner .content .title .text.red .text-bg {
  background-image: linear-gradient(to bottom, black 0%, black 50%, #a21a13 100%);
}
.pc #change .section-wrapper .banner .content .title .text.blue {
  opacity: 0;
}
.pc #change .section-wrapper .banner .content .title .text.blue .text-bg {
  background-image: linear-gradient(to bottom, black 0%, black 50%, #2553cf 100%);
}
.pc #change .section-wrapper .banner .content .mark {
  position: absolute;
  top: -13px;
  left: 0;
  width: 301px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}
.pc #change .section-wrapper .banner .content .mark svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.pc #change .section-wrapper .banner .content .mark svg.red,
.pc #change .section-wrapper .banner .content .mark svg.blue {
  opacity: 0;
  transition: opacity 0.5s;
}
.pc #change .section-wrapper .banner .content .mark svg.red {
  filter: drop-shadow(0px 0px 5px rgba(255, 0, 0, 0.5));
}
.pc #change .section-wrapper .banner .content .mark svg.blue {
  filter: drop-shadow(0px 0px 5px rgba(58, 95, 203, 0.8));
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
.pc #change .section-wrapper .banner .content .mark .text {
  position: relative;
  bottom: -3rem;
  display: flex;
  font-family: "SourceHanSerifCN-Bold";
  font-size: 18px;
}
.pc #change .section-wrapper .banner .content .mark .text span {
  margin: 0 11px;
  opacity: 0;
}
.pc #change .section-wrapper .banner .content .mark:hover svg {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.pc #change .section-wrapper .banner .content .mark:hover.show-red svg.red {
  opacity: 1;
}
.pc #change .section-wrapper .banner .content .mark:hover.show-blue svg.blue {
  opacity: 1;
}
.pc #change .section-wrapper .banner .content .mark:hover + .title .text .text-bg {
  transform: translateY(-50%);
}
.pc #change .section-wrapper .banner .content .profession {
  position: absolute;
  top: 12rem;
  left: 50%;
  transform: translateX(-50%);
  width: 223px;
  height: 223px;
  opacity: 0;
}
.pc #change .section-wrapper .banner .content .profession .icon {
  position: relative;
  width: 223px;
  height: 223px;
}
.pc #change .section-wrapper .banner .content .profession .icon .caster,
.pc #change .section-wrapper .banner .content .profession .icon .guard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pc #change .section-wrapper .banner .content .profession .icon .caster {
  opacity: 1;
}
.pc #change .section-wrapper .banner .content .profession .text {
  position: relative;
  width: 100%;
  height: 50px;
  margin-top: 20px;
  font-family: "Bender-Bold";
  font-size: 45px;
  color: #000;
}
.pc #change .section-wrapper .banner .content .profession .text .caster,
.pc #change .section-wrapper .banner .content .profession .text .guard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.pc #change .section-wrapper .banner .content .profession .text .caster span,
.pc #change .section-wrapper .banner .content .profession .text .guard span {
  opacity: 0;
}
.pc #change .amiya-name {
  position: absolute;
  top: 4.875rem;
  right: 4.0625rem;
  display: flex;
  font-family: "Geometos";
  font-size: 2.5rem;
}
.pc #change .amiya-name span {
  opacity: 0;
}
.pc #change .dot-group {
  position: absolute;
  bottom: 4.07vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 2.25rem;
}
.pc #change .dot-group .dot {
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid #232323;
  border-radius: 50%;
}
.pc #change .dot-group .fill {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #232323;
  transition: transform 0.3s;
}
.pc #change .rhodes-island {
  position: absolute;
  right: 4.0625rem;
  bottom: 2.8125rem;
  width: 23.8125rem;
  height: 3.375rem;
}
.pc #change .rhodes-island.is-red {
  filter: hue-rotate(134deg) saturate(155%) brightness(0.84);
}
.pc #change .amiya {
  position: absolute;
  top: 0;
  left: 17%;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.pc #change .amiya .caster {
  opacity: 1;
}
.pc #change .amiya .kv {
  height: 100%;
  width: 100%;
  display: none;
}
.pc #change .tips {
  position: absolute;
  bottom: 2.8125rem;
  left: 2.875rem;
  font-family: "SourceHanSansCN-Medium";
  font-size: 1rem;
  opacity: 0;
}
.ie #change .section-wrapper .banner .content .title svg {
  display: none;
}
.ie #change .section-wrapper .banner .content .title .text {
  color: #000;
}
.ie #change .section-wrapper .banner .content .title .text.red,
.ie #change .section-wrapper .banner .content .title .text.blue,
.ie #change .section-wrapper .banner .content .title .text .text-bg {
  display: none;
}
.h5 #change .section-wrapper {
  position: relative;
  box-sizing: border-box;
  height: 100%;
}
.h5 #change .section-wrapper .bg-amiya {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.h5 #change .section-wrapper .bg-amiya .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}
.h5 #change .section-wrapper .bg-amiya .inner.caster {
  background-image: url("background-amiya-caster-h5.96277249.png");
}
.h5 #change .section-wrapper .bg-amiya .inner.guard {
  background-image: url("background-amiya-guard-h5.98b318aa.png");
}
.h5 #change .section-wrapper .banner {
  position: absolute;
  top: 13%;
  left: 0;
  width: 100%;
  height: 3rem;
}
.h5 #change .section-wrapper .banner .bg {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 0;
  overflow: hidden;
}
.h5 #change .section-wrapper .banner .bg img {
  position: absolute;
  top: calc(50% - 1.5rem);
  left: -4rem;
  height: 3rem;
  opacity: 0;
}
.h5 #change .section-wrapper .banner .bg.show-red img.red {
  opacity: 1;
}
.h5 #change .section-wrapper .banner .bg.show-blue img.blue {
  opacity: 1;
}
.h5 #change .section-wrapper .banner .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 10.5rem;
  height: 100%;
  opacity: 0;
}
.h5 #change .section-wrapper .banner .content .title {
  position: absolute;
  top: 7.5vh;
  left: 0;
  width: 100%;
  height: 3rem;
  opacity: 0;
}
.h5 #change .section-wrapper .banner .content .title svg text {
  font-family: "SourceHanSerifCN-Bold";
  font-size: 3rem;
  line-height: 1;
}
.h5 #change .section-wrapper .banner .content .title .bar {
  position: absolute;
  bottom: 16%;
  left: 12.5%;
  width: 75%;
}
.h5 #change .section-wrapper .banner .content .title .bar.red,
.h5 #change .section-wrapper .banner .content .title .bar.blue {
  left: 27%;
  bottom: 20%;
  width: 46%;
}
.h5 #change .section-wrapper .banner .content .title .bar.blue {
  opacity: 0;
}
.h5 #change .section-wrapper .banner .content .title .text {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  height: 150%;
  overflow: hidden;
  font-family: "SourceHanSerifCN-Bold";
  font-size: 3rem;
  color: #000;
}
.h5 #change .section-wrapper .banner .content .title .text .text-bg {
  display: none;
}
.h5 #change .section-wrapper .banner .content .title .text.red,
.h5 #change .section-wrapper .banner .content .title .text.blue {
  display: none;
}
.h5 #change .section-wrapper .banner .content .mark {
  position: absolute;
  top: -0.4rem;
  left: 0;
  width: 10.5rem;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}
.h5 #change .section-wrapper .banner .content .mark svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: shakeH5 4s 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
@keyframes shakeH5 {
  4%,
  36% {
    transform: translate3d(-1px, 0, 0);
  }
  8%,
  32% {
    transform: translate3d(2px, 0, 0);
  }
  12%,
  20%,
  28% {
    transform: translate3d(-4px, 0, 0);
  }
  16%,
  24% {
    transform: translate3d(4px, 0, 0);
  }
}
.h5 #change .section-wrapper .banner .content .mark svg.red,
.h5 #change .section-wrapper .banner .content .mark svg.blue {
  opacity: 0;
  transition: opacity 0.5s;
}
.h5 #change .section-wrapper .banner .content .mark svg.red {
  filter: drop-shadow(0px 0px 5px rgba(255, 0, 0, 0.5));
}
.h5 #change .section-wrapper .banner .content .mark svg.blue {
  filter: drop-shadow(0px 0px 5px rgba(58, 95, 203, 0.8));
}
.h5 #change .section-wrapper .banner .content .mark .text {
  position: relative;
  bottom: -3rem;
  display: flex;
  font-family: "SourceHanSerifCN-Bold";
  font-size: 18px;
  display: none;
}
.h5 #change .section-wrapper .banner .content .mark .text span {
  margin: 0 11px;
  opacity: 0;
}
.h5 #change .section-wrapper .banner .content .mark.active.show-red svg.red {
  opacity: 1;
}
.h5 #change .section-wrapper .banner .content .mark.active.show-blue svg.blue {
  opacity: 1;
}
.h5 #change .section-wrapper .banner .content .profession {
  position: absolute;
  top: 7.5vh;
  left: calc(100vw - 9.24rem);
  width: 6rem;
  height: 6rem;
  opacity: 0;
}
.h5 #change .section-wrapper .banner .content .profession .icon {
  position: relative;
  width: 6rem;
  height: 6rem;
}
.h5 #change .section-wrapper .banner .content .profession .icon .caster,
.h5 #change .section-wrapper .banner .content .profession .icon .guard {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.h5 #change .section-wrapper .banner .content .profession .icon .caster {
  opacity: 1;
}
.h5 #change .section-wrapper .banner .content .profession .text {
  display: none;
}
.h5 #change .amiya-name {
  display: none;
}
.h5 #change .dot-group {
  position: absolute;
  bottom: 1.36rem;
  left: 1.64rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1.83rem;
}
.h5 #change .dot-group .dot {
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #232323;
  border-radius: 50%;
}
.h5 #change .dot-group .fill {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #232323;
  transition: transform 0.3s;
}
.h5 #change .rhodes-island {
  position: absolute;
  right: 1.64rem;
  bottom: 1.36rem;
  width: 16.7857rem;
  height: 2.375rem;
}
.h5 #change .rhodes-island.is-red {
  filter: hue-rotate(134deg) saturate(155%) brightness(0.84);
}
.h5 #change .amiya {
  position: absolute;
  top: 4em;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.h5 #change .amiya .kv {
  position: absolute;
  top: -15%;
  left: -30%;
  width: 145%;
  height: 145%;
  display: none;
}
.h5 #change .amiya .kv.guard {
  top: -10%;
  left: -15%;
  width: 135%;
  height: 135%;
}
.h5 #change .tips {
  position: absolute;
  right: 1.64rem;
  bottom: 4rem;
  font-family: "SourceHanSansCN-Medium";
  font-size: 0.8rem;
  opacity: 0;
}
@font-face {
  font-family: "BauerBodoniStd-BoldItalic";
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot");
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot?#font-spider") format("embedded-opentype"), url("BauerBodoniStd-BoldItalic.2bab0b2c.woff") format("woff"), url("BauerBodoniStd-BoldItalic.f32cc148.ttf") format("truetype"), url("BauerBodoniStd-BoldItalic.880bc6ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bender-Bold";
  src: url("Bender-Bold.feaef48b.eot");
  src: url("Bender-Bold.feaef48b.eot?#font-spider") format("embedded-opentype"), url("Bender-Bold.6f29d761.woff") format("woff"), url("Bender-Bold.f15333d6.ttf") format("truetype"), url("Bender-Bold.6e30e29d.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BookAntiqua";
  src: url("BookAntiqua.78b274e2.eot");
  src: url("BookAntiqua.78b274e2.eot?#font-spider") format("embedded-opentype"), url("BookAntiqua.2c67b0ec.woff") format("woff"), url("BookAntiqua.64d2fdf3.ttf") format("truetype"), url("BookAntiqua.3d3ea3d9.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("Gilroy-Bold.dd90083b.eot");
  src: url("Gilroy-Bold.dd90083b.eot?#font-spider") format("embedded-opentype"), url("Gilroy-Bold.31448deb.woff") format("woff"), url("Gilroy-Bold.6f68dfcc.ttf") format("truetype"), url("Gilroy-Bold.c2d7ddc2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBold";
  src: url("Gilroy-ExtraBold.d5ef9e46.eot");
  src: url("Gilroy-ExtraBold.d5ef9e46.eot?#font-spider") format("embedded-opentype"), url("Gilroy-ExtraBold.b7098c56.woff") format("woff"), url("Gilroy-ExtraBold.428c641c.ttf") format("truetype"), url("Gilroy-ExtraBold.3b7b7927.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geometos";
  src: url("Geometos.541af104.eot");
  src: url("Geometos.541af104.eot?#font-spider") format("embedded-opentype"), url("Geometos.4cf18d15.woff") format("woff"), url("Geometos.2625552d.ttf") format("truetype"), url("Geometos.9d5e0913.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Impact";
  src: url("Impact.0695ad44.eot");
  src: url("Impact.0695ad44.eot?#font-spider") format("embedded-opentype"), url("Impact.891c1574.woff") format("woff"), url("Impact.611a577e.ttf") format("truetype"), url("Impact.13f4ae27.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot");
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Bold.938d54a9.woff") format("woff"), url("SourceHanSansCN-Bold.4646ff07.ttf") format("truetype"), url("SourceHanSansCN-Bold.d984f7ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("SourceHanSansCN-Heavy.2dc04107.eot");
  src: url("SourceHanSansCN-Heavy.2dc04107.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Heavy.69c3e101.woff") format("woff"), url("SourceHanSansCN-Heavy.5299c930.ttf") format("truetype"), url("SourceHanSansCN-Heavy.d632f58f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url("SourceHanSansCN-Medium.a4046152.eot");
  src: url("SourceHanSansCN-Medium.a4046152.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Medium.9cb66e44.woff") format("woff"), url("SourceHanSansCN-Medium.c0013463.ttf") format("truetype"), url("SourceHanSansCN-Medium.44ae7d33.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url("SourceHanSansCN-Regular.fb9349ce.eot");
  src: url("SourceHanSansCN-Regular.fb9349ce.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Regular.4e47f525.woff") format("woff"), url("SourceHanSansCN-Regular.c2375b0c.ttf") format("truetype"), url("SourceHanSansCN-Regular.c83c287f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold.6e533d13.eot");
  src: url("SourceHanSerifCN-Bold.6e533d13.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Bold.b6fb0845.woff") format("woff"), url("SourceHanSerifCN-Bold.42b9df64.ttf") format("truetype"), url("SourceHanSerifCN-Bold.84f2db50.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Heavy";
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot");
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Heavy.79f04e5b.woff") format("woff"), url("SourceHanSerifCN-Heavy.d7009eb1.ttf") format("truetype"), url("SourceHanSerifCN-Heavy.6486c971.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium";
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot");
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Medium.1e284ab5.woff") format("woff"), url("SourceHanSerifCN-Medium.5698c813.ttf") format("truetype"), url("SourceHanSerifCN-Medium.7838a329.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular";
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot");
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Regular.bd2be359.woff") format("woff"), url("SourceHanSerifCN-Regular.b55ae8d3.ttf") format("truetype"), url("SourceHanSerifCN-Regular.90a5a795.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
#operator {
  position: relative;
  background-image: url("background.99127c05.jpg");
  background-size: cover;
  background-position: center;
  user-select: none;
}
.pc #operator .pagination {
  position: absolute;
  top: 4.875rem;
  right: 4.0625rem;
  font-family: "Gilroy-Bold";
  font-size: 1.6875rem;
}
.pc #operator .pagination span:nth-child(2) {
  margin: 1px;
}
.pc #operator .section-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 17.1875rem 0 8.5rem 4.0625rem;
}
.pc #operator .section-wrapper .switch {
  display: flex;
  margin: 2% 0 1% 0;
}
.pc #operator .section-wrapper .switch .switch-item {
  position: relative;
  width: 97px;
  height: 36px;
  opacity: 0;
  cursor: pointer;
}
.pc #operator .section-wrapper .switch .switch-item + .switch-item {
  margin-left: 40px;
}
.pc #operator .section-wrapper .switch .switch-item .number {
  position: absolute;
  right: -5px;
  bottom: 6px;
  font-family: "Bender-Bold";
  font-size: 45px;
  color: rgba(0, 0, 0, 0.149);
  transition: color 0.3s;
  pointer-events: none;
}
.pc #operator .section-wrapper .switch .switch-item .operator-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "SourceHanSansCN-Heavy";
  font-size: 18px;
  color: #78787c;
  transition: color 0.3s;
  pointer-events: none;
}
.pc #operator .section-wrapper .switch .switch-item .operator-name svg {
  position: absolute;
  width: 10px;
  height: 10px;
  fill: transparent;
  transition: fill 0.3s;
}
.pc #operator .section-wrapper .switch .switch-item .operator-name svg.tl {
  top: 0;
  left: 0;
}
.pc #operator .section-wrapper .switch .switch-item .operator-name svg.br {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.pc #operator .section-wrapper .switch .switch-item.active .number,
.pc #operator .section-wrapper .switch .switch-item:hover .number {
  color: rgba(0, 0, 0, 0.4);
}
.pc #operator .section-wrapper .switch .switch-item.active .operator-name,
.pc #operator .section-wrapper .switch .switch-item:hover .operator-name {
  color: #101010;
}
.pc #operator .section-wrapper .switch .switch-item.active .operator-name svg,
.pc #operator .section-wrapper .switch .switch-item:hover .operator-name svg {
  fill: #101010;
}
.pc #operator .section-wrapper .operator-list {
  position: relative;
  flex: 1;
}
.pc #operator .section-wrapper .operator-list .operator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
}
.pc #operator .section-wrapper .operator-list .operator .banner {
  width: 100%;
  pointer-events: none;
}
.pc #operator .section-wrapper .operator-list .operator .banner img {
  width: 100%;
}
.pc #operator .section-wrapper .operator-list .operator .info {
  flex: 1;
  box-sizing: border-box;
  margin-top: 2.625rem;
  overflow: hidden;
}
.pc #operator .section-wrapper .operator-list .operator .info .operator-name {
  height: 9.125rem;
  line-height: 1;
}
.pc #operator .section-wrapper .operator-list .operator .info .operator-name .left .en {
  display: flex;
  font-family: "Geometos";
  font-size: 2.25rem;
}
.pc #operator .section-wrapper .operator-list .operator .info .operator-name .left .cn {
  font-family: "SourceHanSansCN-Heavy";
  font-size: 4.875rem;
}
.pc #operator .section-wrapper .operator-list .operator .info .operator-name .right {
  margin-top: 0.5rem;
  font-family: "SourceHanSansCN-Heavy";
  font-size: 1.0625rem;
}
.pc #operator .section-wrapper .operator-list .operator .info .operator-name .right .cv {
  display: flex;
  align-items: center;
}
.pc #operator .section-wrapper .operator-list .operator .info .operator-name .right .block {
  width: 0.4375rem;
  height: 0.4375rem;
  margin: 0.125rem 0.5rem 0 0;
  background-color: #000;
}
.pc #operator .section-wrapper .operator-list .operator .info .operator-name .right .special {
  height: 3rem;
}
.pc #operator .section-wrapper .operator-list .operator .info .detail {
  box-sizing: border-box;
  height: calc(100% - 9.125rem - 2.125rem);
  width: 35%;
  margin-top: 2.125rem;
  overflow-y: hidden;
  font-family: "SourceHanSansCN-Regular";
  font-size: 13px;
}
.pc #operator .section-wrapper .operator-list .operator .info .detail .wrapper {
  transition: transform 0.2s linear;
}
.pc #operator .section-wrapper .operator-list .operator .info .detail p {
  margin: 0;
}
.pc #operator .section-wrapper .operator-list .operator .info .detail p + p {
  margin-top: 1.5rem;
}
.pc #operator .section-wrapper .operator-list .operator:nth-child(1) .info img {
  clip-path: url(#path-1);
}
.pc #operator .section-wrapper .operator-list .operator:nth-child(2) .info img {
  clip-path: url(#path-2);
}
.pc #operator .section-wrapper .operator-list .operator:nth-child(3) .info img {
  clip-path: url(#path-3);
}
.pc #operator .section-wrapper .operator-list .operator:nth-child(4) .info img {
  clip-path: url(#path-4);
}
.pc #operator .dot-group {
  position: absolute;
  bottom: 4.07vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 5.5625rem;
}
.pc #operator .dot-group .dot {
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid #232323;
  border-radius: 50%;
}
.pc #operator .dot-group .fill {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #232323;
  transition: transform 0.3s;
}
.pc #operator .kv-list {
  position: absolute;
  right: 0;
  top: 5rem;
  min-width: 67%;
  height: calc(100% - 9rem);
  box-sizing: border-box;
  text-align: right;
  pointer-events: none;
}
.pc #operator .kv-list .kv-item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pc #operator .kv-list .kv-item img {
  max-width: 100%;
  max-height: 100%;
}
.pc #operator .kv-list .kv-item:nth-child(3) img {
  transform: translateX(-8%);
}
.pc #operator .operator-new {
  position: absolute;
  left: 4.0625rem;
  bottom: 2.8125rem;
  height: 4.875rem;
}
.pc #operator .rhodes-island-list {
  position: absolute;
  right: 4.0625rem;
  bottom: 2.8125rem;
  width: 23.8125rem;
  height: 3.375rem;
}
.pc #operator .rhodes-island-list .rhodes-island-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.h5 #operator {
  background-position: left;
}
.h5 #operator .pagination {
  display: none;
}
.h5 #operator .section-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: calc(100% - 1.64rem);
  height: calc(100% - 8.1875rem - 4.735rem);
  margin: 8.1875rem 0 4.735rem 1.64rem;
}
.h5 #operator .section-wrapper .switch {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 1.64rem;
  top: 5rem;
}
.h5 #operator .section-wrapper .switch .switch-item {
  position: relative;
  width: 5.5rem;
  height: 2rem;
  opacity: 0;
  cursor: pointer;
}
.h5 #operator .section-wrapper .switch .switch-item + .switch-item {
  margin-top: 2.3rem;
}
.h5 #operator .section-wrapper .switch .switch-item .number {
  position: absolute;
  right: -0.2857rem;
  bottom: 0.357rem;
  font-family: "Bender-Bold";
  font-size: 2.57rem;
  color: rgba(0, 0, 0, 0.149);
  transition: color 0.3s;
  pointer-events: none;
}
.h5 #operator .section-wrapper .switch .switch-item .operator-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "SourceHanSansCN-Heavy";
  font-size: 1rem;
  color: #78787c;
  transition: color 0.3s;
  pointer-events: none;
}
.h5 #operator .section-wrapper .switch .switch-item .operator-name svg {
  position: absolute;
  width: 0.57rem;
  height: 0.57rem;
  fill: transparent;
  transition: fill 0.3s;
}
.h5 #operator .section-wrapper .switch .switch-item .operator-name svg.tl {
  top: 0;
  left: 0;
}
.h5 #operator .section-wrapper .switch .switch-item .operator-name svg.br {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.h5 #operator .section-wrapper .switch .switch-item.active .number {
  color: rgba(0, 0, 0, 0.4);
}
.h5 #operator .section-wrapper .switch .switch-item.active .operator-name {
  color: #101010;
}
.h5 #operator .section-wrapper .switch .switch-item.active .operator-name svg {
  fill: #101010;
}
.h5 #operator .section-wrapper .operator-list {
  position: relative;
  flex: 1;
  pointer-events: none;
}
.h5 #operator .section-wrapper .operator-list .operator {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.h5 #operator .section-wrapper .operator-list .operator .banner {
  width: 100%;
  pointer-events: none;
}
.h5 #operator .section-wrapper .operator-list .operator .banner img {
  width: 100%;
}
.h5 #operator .section-wrapper .operator-list .operator .info {
  height: calc(100% - 50vh);
  padding-right: 1.64rem;
  margin-top: 44vh;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 4.7rem;
  line-height: 1;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .mask {
  display: none;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name svg {
  display: none;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .left {
  display: flex;
  flex-direction: column;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .left .en {
  display: flex;
  font-family: "Geometos";
  font-size: 1.4rem;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .left .en span {
  opacity: 0;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .left .cn {
  font-family: "SourceHanSansCN-Heavy";
  font-size: 3.1rem;
  opacity: 0;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  margin-left: 1rem;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .right .cv {
  display: flex;
  align-items: center;
  font-family: "SourceHanSansCN-Heavy";
  font-size: 1.1rem;
  line-height: 1.2;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .right .cv .block {
  width: 0.4375rem;
  height: 0.4375rem;
  margin: 0.125rem 0.5rem 0 0;
  background-color: #000;
}
.h5 #operator .section-wrapper .operator-list .operator .info .operator-name .right .cv .special {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  height: 2rem;
}
.h5 #operator .section-wrapper .operator-list .operator .info .detail {
  height: calc(100% - 5.625rem);
  margin-top: 1.125rem;
  font-family: "SourceHanSansCN-Regular";
  font-size: 13px;
  overflow: hidden;
}
.h5 #operator .section-wrapper .operator-list .operator .info .detail .wrapper {
  transition: transform 0.2s linear;
}
.h5 #operator .section-wrapper .operator-list .operator .info .detail p {
  margin: 0;
}
.h5 #operator .section-wrapper .operator-list .operator .info .detail p + p {
  margin-top: 1rem;
}
.h5 #operator .section-wrapper .operator-list .operator:nth-child(1) .info .operator-name > img {
  clip-path: url(#path-1);
}
.h5 #operator .section-wrapper .operator-list .operator:nth-child(2) .info .operator-name > img {
  clip-path: url(#path-2);
}
.h5 #operator .section-wrapper .operator-list .operator:nth-child(3) .info .operator-name > img {
  clip-path: url(#path-3);
}
.h5 #operator .section-wrapper .operator-list .operator:nth-child(4) .info .operator-name > img {
  clip-path: url(#path-4);
}
.h5 #operator .dot-group {
  position: absolute;
  bottom: 1.36rem;
  left: 1.64rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 4.5rem;
}
.h5 #operator .dot-group .dot {
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #232323;
  border-radius: 50%;
}
.h5 #operator .dot-group .fill {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #232323;
  transition: transform 0.3s;
}
.h5 #operator .kv-list {
  position: absolute;
  left: -10vw;
  top: -3.1875rem;
  min-width: 67%;
  height: 53vh;
  box-sizing: border-box;
  pointer-events: none;
}
.h5 #operator .kv-list .kv-item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.h5 #operator .kv-list .kv-item img {
  max-height: 100%;
}
.h5 #operator .kv-list .kv-item:nth-child(2) {
  left: 15vw;
}
.h5 #operator .kv-list .kv-item:nth-child(3) {
  left: 15vw;
}
.h5 #operator .kv-list .kv-item:nth-child(3) img {
  transform: translateX(-8%);
}
.h5 #operator .kv-list .kv-item:nth-child(4) {
  left: 12vw;
}
.h5 #operator .operator-new {
  position: absolute;
  top: calc(5rem + 53vh);
  right: 1.64rem;
  height: 3rem;
  opacity: 0;
}
.h5 #operator .rhodes-island-list {
  position: absolute;
  right: 1.64rem;
  bottom: 1.36rem;
  width: 16.7857rem;
  height: 2.375rem;
}
.h5 #operator .rhodes-island-list .rhodes-island-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
@font-face {
  font-family: "BauerBodoniStd-BoldItalic";
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot");
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot?#font-spider") format("embedded-opentype"), url("BauerBodoniStd-BoldItalic.2bab0b2c.woff") format("woff"), url("BauerBodoniStd-BoldItalic.f32cc148.ttf") format("truetype"), url("BauerBodoniStd-BoldItalic.880bc6ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bender-Bold";
  src: url("Bender-Bold.feaef48b.eot");
  src: url("Bender-Bold.feaef48b.eot?#font-spider") format("embedded-opentype"), url("Bender-Bold.6f29d761.woff") format("woff"), url("Bender-Bold.f15333d6.ttf") format("truetype"), url("Bender-Bold.6e30e29d.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BookAntiqua";
  src: url("BookAntiqua.78b274e2.eot");
  src: url("BookAntiqua.78b274e2.eot?#font-spider") format("embedded-opentype"), url("BookAntiqua.2c67b0ec.woff") format("woff"), url("BookAntiqua.64d2fdf3.ttf") format("truetype"), url("BookAntiqua.3d3ea3d9.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("Gilroy-Bold.dd90083b.eot");
  src: url("Gilroy-Bold.dd90083b.eot?#font-spider") format("embedded-opentype"), url("Gilroy-Bold.31448deb.woff") format("woff"), url("Gilroy-Bold.6f68dfcc.ttf") format("truetype"), url("Gilroy-Bold.c2d7ddc2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBold";
  src: url("Gilroy-ExtraBold.d5ef9e46.eot");
  src: url("Gilroy-ExtraBold.d5ef9e46.eot?#font-spider") format("embedded-opentype"), url("Gilroy-ExtraBold.b7098c56.woff") format("woff"), url("Gilroy-ExtraBold.428c641c.ttf") format("truetype"), url("Gilroy-ExtraBold.3b7b7927.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geometos";
  src: url("Geometos.541af104.eot");
  src: url("Geometos.541af104.eot?#font-spider") format("embedded-opentype"), url("Geometos.4cf18d15.woff") format("woff"), url("Geometos.2625552d.ttf") format("truetype"), url("Geometos.9d5e0913.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Impact";
  src: url("Impact.0695ad44.eot");
  src: url("Impact.0695ad44.eot?#font-spider") format("embedded-opentype"), url("Impact.891c1574.woff") format("woff"), url("Impact.611a577e.ttf") format("truetype"), url("Impact.13f4ae27.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot");
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Bold.938d54a9.woff") format("woff"), url("SourceHanSansCN-Bold.4646ff07.ttf") format("truetype"), url("SourceHanSansCN-Bold.d984f7ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("SourceHanSansCN-Heavy.2dc04107.eot");
  src: url("SourceHanSansCN-Heavy.2dc04107.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Heavy.69c3e101.woff") format("woff"), url("SourceHanSansCN-Heavy.5299c930.ttf") format("truetype"), url("SourceHanSansCN-Heavy.d632f58f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url("SourceHanSansCN-Medium.a4046152.eot");
  src: url("SourceHanSansCN-Medium.a4046152.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Medium.9cb66e44.woff") format("woff"), url("SourceHanSansCN-Medium.c0013463.ttf") format("truetype"), url("SourceHanSansCN-Medium.44ae7d33.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url("SourceHanSansCN-Regular.fb9349ce.eot");
  src: url("SourceHanSansCN-Regular.fb9349ce.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Regular.4e47f525.woff") format("woff"), url("SourceHanSansCN-Regular.c2375b0c.ttf") format("truetype"), url("SourceHanSansCN-Regular.c83c287f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold.6e533d13.eot");
  src: url("SourceHanSerifCN-Bold.6e533d13.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Bold.b6fb0845.woff") format("woff"), url("SourceHanSerifCN-Bold.42b9df64.ttf") format("truetype"), url("SourceHanSerifCN-Bold.84f2db50.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Heavy";
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot");
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Heavy.79f04e5b.woff") format("woff"), url("SourceHanSerifCN-Heavy.d7009eb1.ttf") format("truetype"), url("SourceHanSerifCN-Heavy.6486c971.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium";
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot");
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Medium.1e284ab5.woff") format("woff"), url("SourceHanSerifCN-Medium.5698c813.ttf") format("truetype"), url("SourceHanSerifCN-Medium.7838a329.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular";
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot");
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Regular.bd2be359.woff") format("woff"), url("SourceHanSerifCN-Regular.b55ae8d3.ttf") format("truetype"), url("SourceHanSerifCN-Regular.90a5a795.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
#outfit {
  position: relative;
  background-image: url("background.bb0c5ea1.jpg");
  background-size: cover;
  background-position: center;
  user-select: none;
}
.pc #outfit .pagination {
  position: absolute;
  top: 4.875rem;
  right: 4.0625rem;
  font-family: "BauerBodoniStd-BoldItalic";
  font-size: 1.6875rem;
}
.pc #outfit .pagination span:nth-child(2) {
  margin: 3px;
}
.pc #outfit .section-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  height: 100%;
  padding: 10.9375rem 4.5rem 7.5rem 3.9375rem;
}
.pc #outfit .section-wrapper::after {
  content: "";
  position: absolute;
  bottom: 1.6vh;
  left: 2.6vw;
  width: 95.7vw;
  height: 3px;
  background-color: #556259;
}
.pc #outfit .section-wrapper .outfit-epoque {
  width: 670px;
  height: 191px;
  fill: #536057;
  opacity: 0;
  transition: fill 0.3s;
}
.pc #outfit .section-wrapper .switch {
  display: flex;
  margin: 2% 0 1% 0;
}
.pc #outfit .section-wrapper .switch .switch-item {
  position: relative;
  width: 97px;
  height: 36px;
  cursor: pointer;
  opacity: 0;
}
.pc #outfit .section-wrapper .switch .switch-item + .switch-item {
  margin-left: 40px;
}
.pc #outfit .section-wrapper .switch .switch-item .number {
  position: absolute;
  right: -10px;
  bottom: 0;
  font-family: "BauerBodoniStd-BoldItalic";
  font-size: 45px;
  color: rgba(175, 175, 175, 0.6);
  transition: color 0.3s;
  pointer-events: none;
}
.pc #outfit .section-wrapper .switch .switch-item .model-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "SourceHanSerifCN-Heavy";
  font-size: 18px;
  color: #78787c;
  transition: color 0.3s;
  pointer-events: none;
}
.pc #outfit .section-wrapper .switch .switch-item .model-name svg {
  position: absolute;
  width: 10px;
  height: 10px;
  fill: transparent;
  transition: fill 0.3s;
}
.pc #outfit .section-wrapper .switch .switch-item .model-name svg.tl {
  top: 0;
  left: 0;
}
.pc #outfit .section-wrapper .switch .switch-item .model-name svg.br {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(1).active .number,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .number {
  color: rgba(85, 98, 89, 0.6);
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(1).active .model-name,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .model-name {
  color: #556259;
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(1).active .model-name svg,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .model-name svg {
  fill: #556259;
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(2).active .number,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .number {
  color: rgba(85, 93, 98, 0.6);
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(2).active .model-name,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .model-name {
  color: #555d62;
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(2).active .model-name svg,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .model-name svg {
  fill: #555d62;
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(3).active .number,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .number {
  color: rgba(94, 94, 94, 0.6);
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(3).active .model-name,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .model-name {
  color: #5f5f5f;
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(3).active .model-name svg,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .model-name svg {
  fill: #5f5f5f;
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(4).active .number,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .number {
  color: rgba(101, 90, 103, 0.6);
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(4).active .model-name,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .model-name {
  color: #655a67;
}
.pc #outfit .section-wrapper .switch .switch-item:nth-child(4).active .model-name svg,
.pc #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .model-name svg {
  fill: #655a67;
}
@media screen and (max-width: 1365px) {
  .pc #outfit .section-wrapper .switch .switch-item {
    position: relative;
    width: 72.75px;
    height: 27px;
    cursor: pointer;
  }
  .pc #outfit .section-wrapper .switch .switch-item + .switch-item {
    margin-left: 30px;
  }
  .pc #outfit .section-wrapper .switch .switch-item .number {
    position: absolute;
    right: -7.5px;
    bottom: 0;
    font-family: "BauerBodoniStd-BoldItalic";
    font-size: 33.75px;
    color: rgba(175, 175, 175, 0.6);
    transition: color 0.3s;
    pointer-events: none;
  }
  .pc #outfit .section-wrapper .switch .switch-item .model-name {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: "SourceHanSerifCN-Heavy";
    font-size: 13.5px;
    color: #78787c;
    transition: color 0.3s;
    pointer-events: none;
  }
  .pc #outfit .section-wrapper .switch .switch-item .model-name svg {
    position: absolute;
    width: 7.5px;
    height: 7.5px;
    fill: transparent;
    transition: fill 0.3s;
  }
  .pc #outfit .section-wrapper .switch .switch-item .model-name svg.tl {
    top: 0;
    left: 0;
  }
  .pc #outfit .section-wrapper .switch .switch-item .model-name svg.br {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(1).active .number,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .number {
    color: rgba(85, 98, 89, 0.6);
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(1).active .model-name,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .model-name {
    color: #556259;
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(1).active .model-name svg,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .model-name svg {
    fill: #556259;
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(2).active .number,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .number {
    color: rgba(85, 93, 98, 0.6);
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(2).active .model-name,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .model-name {
    color: #555d62;
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(2).active .model-name svg,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .model-name svg {
    fill: #555d62;
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(3).active .number,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .number {
    color: rgba(94, 94, 94, 0.6);
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(3).active .model-name,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .model-name {
    color: #5f5f5f;
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(3).active .model-name svg,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .model-name svg {
    fill: #5f5f5f;
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(4).active .number,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .number {
    color: rgba(101, 90, 103, 0.6);
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(4).active .model-name,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .model-name {
    color: #655a67;
  }
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(4).active .model-name svg,
  .pc #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .model-name svg {
    fill: #655a67;
  }
}
.pc #outfit .section-wrapper .stamp {
  position: relative;
  height: calc(419 / 1782 * (100vw - 8.4375rem));
  min-height: 340px;
  overflow: hidden;
  opacity: 0;
}
.pc #outfit .section-wrapper .stamp .stamp-bg {
  height: 100%;
  fill: #4b5a50;
  transition: fill 0.3s;
}
.pc #outfit .section-wrapper .stamp .kira {
  position: absolute;
  top: 49.5%;
  fill: #556259;
  transform: translateY(-50%);
  transition: fill 0.3s;
}
.pc #outfit .section-wrapper .stamp .kira.left {
  left: 0;
  width: 1.6875rem;
  height: 1.6875rem;
}
.pc #outfit .section-wrapper .stamp .kira.right {
  right: 0;
  width: 1.375rem;
  height: 1.375rem;
}
.pc #outfit .section-wrapper .stamp .dash-line-group {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  font-family: "SourceHanSansCN-Regular";
  font-size: 1.25rem;
  line-height: 1;
  color: #767676;
}
.pc #outfit .section-wrapper .stamp .dash-line-group .horizontal {
  position: absolute;
  top: 50%;
  left: 4rem;
  width: 36.6875rem;
  height: 2px;
  background-image: linear-gradient(to right, #767676, #767676 5px, transparent 5px, transparent 9px);
  background-repeat: repeat-x;
  background-size: 9px 2px;
}
.pc #outfit .section-wrapper .stamp .dash-line-group .vertical-top {
  position: absolute;
  top: 1.125rem;
  left: 21.625rem;
  width: 2px;
  height: 13rem;
  background-image: linear-gradient(to top, #767676, #767676 5px, transparent 5px, transparent 9px);
  background-repeat: repeat-y;
  background-size: 2px 9px;
}
.pc #outfit .section-wrapper .stamp .dash-line-group .vertical-bottom {
  position: absolute;
  bottom: 0.9375rem;
  left: 21.625rem;
  width: 2px;
  height: 13rem;
  background-image: linear-gradient(to bottom, #767676, #767676 5px, transparent 5px, transparent 9px);
  background-repeat: repeat-y;
  background-size: 2px 9px;
}
.pc #outfit .section-wrapper .stamp .desc-en {
  position: absolute;
  top: 1.25rem;
  left: 3.375rem;
  height: 11.0625rem;
  font-family: "BookAntiqua";
  line-height: 1;
}
.pc #outfit .section-wrapper .stamp .desc-en .number {
  display: none;
}
.pc #outfit .section-wrapper .stamp .desc-en .model-name {
  display: flex;
  align-items: flex-end;
  height: 1.875rem;
  color: #738479;
  font-size: 1.875rem;
  opacity: 0;
}
.pc #outfit .section-wrapper .stamp .desc-en .content {
  font-size: 12px;
  color: #a4a3a3;
}
.pc #outfit .section-wrapper .stamp .desc-en .content .theme {
  width: 15.1875rem;
  height: 12px;
  padding-left: 0.125rem;
  margin-top: 2.125rem;
  background-color: #fff;
}
.pc #outfit .section-wrapper .stamp .desc-en .content .theme-content {
  margin-top: 0.375rem;
}
.pc #outfit .section-wrapper .stamp .desc-en .content .keywords {
  width: 15.25rem;
  height: 12px;
  padding-left: 0.125rem;
  margin-top: 1rem;
  margin-left: 0.0625rem;
  background-color: #fff;
}
.pc #outfit .section-wrapper .stamp .desc-en .content .keywords-content {
  margin-top: 0.375rem;
}
.pc #outfit .section-wrapper .stamp .desc-en .content .line {
  width: 15.1875rem;
  height: 0.125rem;
  margin-top: 1.25rem;
  background-color: #fff;
}
.pc #outfit .section-wrapper .stamp .desc-en .rect-group {
  position: absolute;
  left: -1rem;
  top: 0;
  width: 0.25rem;
  height: 100%;
}
.pc #outfit .section-wrapper .stamp .desc-en .rect-group .rect {
  width: 0.25rem;
  height: 0.25rem;
  background-color: #ff8a65;
  transition: background-color 0.3s;
}
.pc #outfit .section-wrapper .stamp .desc-en .rect-group .rect:nth-child(1) {
  margin-top: 1.3125rem;
}
.pc #outfit .section-wrapper .stamp .desc-en .rect-group .rect:nth-child(2) {
  margin-top: 2.5625rem;
}
.pc #outfit .section-wrapper .stamp .desc-en .rect-group .rect:nth-child(3) {
  margin-top: 0.8125rem;
}
.pc #outfit .section-wrapper .stamp .desc-en .rect-group .rect:nth-child(4) {
  margin-top: 1.5rem;
}
.pc #outfit .section-wrapper .stamp .desc-en .rect-group .rect:nth-child(5) {
  margin-top: 0.8125rem;
}
.pc #outfit .section-wrapper .stamp .desc-cn {
  position: absolute;
  bottom: 1.75rem;
  left: 3.375rem;
  height: 9rem;
  line-height: 1;
}
.pc #outfit .section-wrapper .stamp .desc-cn .outfit-name {
  font-family: "SourceHanSerifCN-Heavy";
  font-size: 2.3125rem;
  color: #fff;
  opacity: 0;
}
.pc #outfit .section-wrapper .stamp .desc-cn .model-name {
  position: relative;
  height: 1.375rem;
  width: 0;
  margin: 0.5rem 0 1.1875rem 0.3125rem;
  font-family: "SourceHanSansCN-Regular";
  font-size: 1.125rem;
  color: #767676;
  background-color: #ff8a65;
  transition: background-color 0.3s;
}
.pc #outfit .section-wrapper .stamp .desc-cn .model-name .rect {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #fff;
}
.pc #outfit .section-wrapper .stamp .desc-cn .model-name span {
  position: absolute;
  top: 0;
  left: 0.1875rem;
}
.pc #outfit .section-wrapper .stamp .desc-cn .epoque {
  height: 3.1875rem;
  margin-left: 0.625rem;
  fill: #fff;
}
.pc #outfit .section-wrapper .stamp .desc-cn .rect-group {
  position: absolute;
  left: -1rem;
  top: 0;
  width: 0.25rem;
  height: 100%;
}
.pc #outfit .section-wrapper .stamp .desc-cn .rect-group .rect {
  width: 0.25rem;
  height: 0.25rem;
  background-color: #ff8a65;
}
.pc #outfit .section-wrapper .stamp .desc-cn .rect-group .rect:nth-child(1) {
  margin-top: 1.3125rem;
}
.pc #outfit .section-wrapper .stamp .desc-cn .rect-group .rect:nth-child(2) {
  margin-top: 2.5625rem;
}
.pc #outfit .section-wrapper .stamp .desc-cn .rect-group .rect:nth-child(3) {
  margin-top: 0.8125rem;
}
.pc #outfit .section-wrapper .stamp .desc-cn .rect-group .rect:nth-child(4) {
  margin-top: 1.5rem;
}
.pc #outfit .section-wrapper .stamp .desc-cn .rect-group .rect:nth-child(5) {
  margin-top: 0.8125rem;
}
.pc #outfit .section-wrapper .stamp .rt {
  position: absolute;
  top: 1.0625rem;
  left: 22.875rem;
  height: 11.1875rem;
}
.pc #outfit .section-wrapper .stamp .rt .circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background-color: #738479;
  transition: background-color 0.3s;
}
.pc #outfit .section-wrapper .stamp .rt .circle .since {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
}
.pc #outfit .section-wrapper .stamp .rt .circle .kira {
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1.5rem;
  fill: #fff;
}
.pc #outfit .section-wrapper .stamp .rt .feat {
  position: absolute;
  bottom: 0;
  left: 1.0625rem;
  display: flex;
  flex-direction: column;
  font-family: "BookAntiqua";
  font-size: 0.625rem;
  color: #738479;
  transform: scale(0.8);
  transform-origin: left bottom;
  transition: color 0.3s;
}
.pc #outfit .section-wrapper .stamp .rt .line {
  position: absolute;
  bottom: 0.25rem;
  left: 6rem;
  width: 15rem;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.35);
  transform: rotate(-45deg);
  transform-origin: left bottom;
}
.pc #outfit .section-wrapper .stamp > .number {
  position: absolute;
  bottom: 3.0625rem;
  left: 22.25rem;
  height: 11.1875rem;
  font-family: "BauerBodoniStd-BoldItalic";
  font-size: 13.5rem;
  letter-spacing: -1.4rem;
  color: #738479;
  transition: color 0.3s;
}
.pc #outfit .section-wrapper .stamp.active-1 .stamp-bg,
.pc #outfit .section-wrapper .stamp.active-1 .kira {
  fill: #4b5a50;
}
.pc #outfit .section-wrapper .stamp.active-1 .desc-en .model-name {
  color: #738479;
}
.pc #outfit .section-wrapper .stamp.active-1 .desc-en .rect-group .rect {
  background-color: #ff8a65;
}
.pc #outfit .section-wrapper .stamp.active-1 .desc-cn .model-name,
.pc #outfit .section-wrapper .stamp.active-1 .desc-cn .rect-group .rect {
  background-color: #ff8a65;
}
.pc #outfit .section-wrapper .stamp.active-1 .rt .circle {
  background-color: #738479;
}
.pc #outfit .section-wrapper .stamp.active-1 .rt .feat {
  color: #738479;
}
.pc #outfit .section-wrapper .stamp.active-1 .number {
  color: #738479;
}
.pc #outfit .section-wrapper .stamp.active-2 .stamp-bg,
.pc #outfit .section-wrapper .stamp.active-2 .kira {
  fill: #565e63;
}
.pc #outfit .section-wrapper .stamp.active-2 .desc-en .model-name {
  color: #737d84;
}
.pc #outfit .section-wrapper .stamp.active-2 .desc-en .rect-group .rect {
  background-color: #ff8a65;
}
.pc #outfit .section-wrapper .stamp.active-2 .desc-cn .model-name,
.pc #outfit .section-wrapper .stamp.active-2 .desc-cn .rect-group .rect {
  background-color: #ff8a65;
}
.pc #outfit .section-wrapper .stamp.active-2 .rt .circle {
  background-color: #737d84;
}
.pc #outfit .section-wrapper .stamp.active-2 .rt .feat {
  color: #737d84;
}
.pc #outfit .section-wrapper .stamp.active-2 .number {
  color: #737d84;
}
.pc #outfit .section-wrapper .stamp.active-3 .stamp-bg,
.pc #outfit .section-wrapper .stamp.active-3 .kira {
  fill: #5a5a5a;
}
.pc #outfit .section-wrapper .stamp.active-3 .desc-en .model-name {
  color: #7b7b7b;
}
.pc #outfit .section-wrapper .stamp.active-3 .desc-en .rect-group .rect {
  background-color: #b2b2b2;
}
.pc #outfit .section-wrapper .stamp.active-3 .desc-cn .model-name,
.pc #outfit .section-wrapper .stamp.active-3 .desc-cn .rect-group .rect {
  background-color: #b2b2b2;
}
.pc #outfit .section-wrapper .stamp.active-3 .rt .circle {
  background-color: #7b7b7b;
}
.pc #outfit .section-wrapper .stamp.active-3 .rt .feat {
  color: #7b7b7b;
}
.pc #outfit .section-wrapper .stamp.active-3 .number {
  color: #7b7b7b;
}
.pc #outfit .section-wrapper .stamp.active-4 .stamp-bg,
.pc #outfit .section-wrapper .stamp.active-4 .kira {
  fill: #605562;
}
.pc #outfit .section-wrapper .stamp.active-4 .desc-en .model-name {
  color: #837384;
}
.pc #outfit .section-wrapper .stamp.active-4 .desc-en .rect-group .rect {
  background-color: #65ffe1;
}
.pc #outfit .section-wrapper .stamp.active-4 .desc-cn .model-name,
.pc #outfit .section-wrapper .stamp.active-4 .desc-cn .rect-group .rect {
  background-color: #65ffe1;
}
.pc #outfit .section-wrapper .stamp.active-4 .rt .circle {
  background-color: #837384;
}
.pc #outfit .section-wrapper .stamp.active-4 .rt .feat {
  color: #837384;
}
.pc #outfit .section-wrapper .stamp.active-4 .number {
  color: #837384;
}
.pc #outfit .section-wrapper .dot-group {
  position: absolute;
  bottom: 4.07vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 5.5625rem;
}
.pc #outfit .section-wrapper .dot-group .dot {
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid #232323;
  border-radius: 50%;
}
.pc #outfit .section-wrapper .dot-group .fill {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #232323;
  transition: transform 0.3s;
  pointer-events: none;
}
.pc #outfit .kv-container {
  opacity: 1;
  position: absolute;
  right: 0;
  top: 5rem;
  min-width: 67%;
  height: calc(100% - 9rem);
  box-sizing: border-box;
  text-align: right;
  pointer-events: none;
}
.pc #outfit .kv-container .kv {
  width: 100%;
  height: 100%;
}
.pc #outfit .kv-container .kv image {
  opacity: 0;
}
.h5 #outfit .pagination {
  display: none;
}
.h5 #outfit .section-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(100% - 1.64rem * 2);
  height: calc(100% - 11rem);
  margin: 6.5rem 1.64rem 4.5rem 1.64rem;
}
.h5 #outfit .section-wrapper .outfit-epoque {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 83%;
  fill: #536057;
  opacity: 0;
  transition: fill 0.3s;
}
.h5 #outfit .section-wrapper .switch {
  position: absolute;
  top: 0.5rem;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: calc(100vw - 3.78rem);
}
.h5 #outfit .section-wrapper .switch .switch-item {
  position: relative;
  width: 4.53rem;
  height: 1.64rem;
  cursor: pointer;
  opacity: 0;
}
.h5 #outfit .section-wrapper .switch .switch-item .number {
  position: absolute;
  right: -0.7rem;
  bottom: 0.5rem;
  font-family: "BauerBodoniStd-BoldItalic";
  font-size: 2.15rem;
  color: rgba(175, 175, 175, 0.6);
  transition: color 0.3s;
  pointer-events: none;
}
.h5 #outfit .section-wrapper .switch .switch-item .model-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "SourceHanSerifCN-Heavy";
  font-size: 0.86rem;
  color: #78787c;
  transition: color 0.3s;
  pointer-events: none;
}
.h5 #outfit .section-wrapper .switch .switch-item .model-name svg {
  position: absolute;
  width: 0.48rem;
  height: 0.48rem;
  fill: transparent;
  transition: fill 0.3s;
}
.h5 #outfit .section-wrapper .switch .switch-item .model-name svg.tl {
  top: 0;
  left: 0;
}
.h5 #outfit .section-wrapper .switch .switch-item .model-name svg.br {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(1).active .number,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .number {
  color: rgba(85, 98, 89, 0.6);
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(1).active .model-name,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .model-name {
  color: #556259;
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(1).active .model-name svg,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(1):hover .model-name svg {
  fill: #556259;
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(2).active .number,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .number {
  color: rgba(85, 93, 98, 0.6);
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(2).active .model-name,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .model-name {
  color: #555d62;
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(2).active .model-name svg,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(2):hover .model-name svg {
  fill: #555d62;
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(3).active .number,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .number {
  color: rgba(94, 94, 94, 0.6);
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(3).active .model-name,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .model-name {
  color: #5f5f5f;
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(3).active .model-name svg,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(3):hover .model-name svg {
  fill: #5f5f5f;
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(4).active .number,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .number {
  color: rgba(101, 90, 103, 0.6);
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(4).active .model-name,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .model-name {
  color: #655a67;
}
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(4).active .model-name svg,
.h5 #outfit .section-wrapper .switch .switch-item:nth-child(4):hover .model-name svg {
  fill: #655a67;
}
.h5 #outfit .section-wrapper .stamp {
  position: absolute;
  top: calc(1.64rem + 140vw);
  bottom: 0;
  left: 0;
  width: 100%;
}
.h5 #outfit .section-wrapper .stamp .stamp-bg {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .kira {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .dash-line-group {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.h5 #outfit .section-wrapper .stamp .dash-line-group .horizontal,
.h5 #outfit .section-wrapper .stamp .dash-line-group .vertical-bottom {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .dash-line-group .vertical-top {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translateY(-50%);
  height: 7rem;
  border-right: 1px dashed rgba(115, 132, 121, 0.5);
  transition: border-color 0.3s;
}
.h5 #outfit .section-wrapper .stamp .desc-en {
  position: absolute;
  top: 50%;
  right: 0;
  left: 56%;
  transform: translateY(-50%);
  height: 6.8rem;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.h5 #outfit .section-wrapper .stamp .desc-en .number {
  font-family: "BauerBodoniStd-BoldItalic";
  font-size: 5.3rem;
  letter-spacing: -0.5rem;
  color: #738479;
  transition: color 0.3s;
  opacity: 0;
}
.h5 #outfit .section-wrapper .stamp .desc-en .model-name {
  display: flex;
  align-items: flex-end;
  height: 1.875rem;
  font-family: "BookAntiqua";
  font-size: 1.3rem;
  color: #738479;
  opacity: 0;
}
.h5 #outfit .section-wrapper .stamp .desc-en .content {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .desc-en .rect-group {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .desc-cn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48%;
  height: 6.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.h5 #outfit .section-wrapper .stamp .desc-cn .outfit-name {
  font-family: "SourceHanSerifCN-Heavy";
  font-size: 4rem;
  line-height: 1;
  color: #738479;
  text-shadow: 0 0 10px rgba(115, 132, 121, 0.6);
  opacity: 0;
}
.h5 #outfit .section-wrapper .stamp .desc-cn .model-name {
  width: 0;
  height: 1.7rem;
  font-family: "SourceHanSansCN-Regular";
  font-size: 1.125rem;
  transition: background-color 0.3s;
  background-color: #bbc5bf;
}
.h5 #outfit .section-wrapper .stamp .desc-cn .model-name .rect {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .desc-cn .model-name span {
  margin-left: 0.5rem;
  color: #fff;
  opacity: 0;
}
.h5 #outfit .section-wrapper .stamp .desc-cn .epoque {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .desc-cn .rect-group {
  display: none;
}
.h5 #outfit .section-wrapper .stamp .rt {
  display: none;
}
.h5 #outfit .section-wrapper .stamp > .number {
  display: none;
}
.h5 #outfit .section-wrapper .stamp.active-1 .dash-line-group .vertical-top {
  border-color: rgba(115, 132, 121, 0.5);
}
.h5 #outfit .section-wrapper .stamp.active-1 .desc-cn .outfit-name {
  color: #738479;
  text-shadow: 0 0 10px rgba(115, 132, 121, 0.6);
}
.h5 #outfit .section-wrapper .stamp.active-1 .desc-cn .model-name {
  background-color: #bbc5bf;
}
.h5 #outfit .section-wrapper .stamp.active-1 .desc-en .number {
  color: #738479;
}
.h5 #outfit .section-wrapper .stamp.active-1 .desc-en .model-name {
  color: #738479;
}
.h5 #outfit .section-wrapper .stamp.active-2 .dash-line-group .vertical-top {
  border-color: rgba(115, 125, 132, 0.5);
}
.h5 #outfit .section-wrapper .stamp.active-2 .desc-cn .outfit-name {
  color: #737d84;
  text-shadow: 0 0 10px rgba(115, 125, 132, 0.6);
}
.h5 #outfit .section-wrapper .stamp.active-2 .desc-cn .model-name {
  background-color: #a7afb5;
}
.h5 #outfit .section-wrapper .stamp.active-2 .desc-en .number {
  color: #737d84;
}
.h5 #outfit .section-wrapper .stamp.active-2 .desc-en .model-name {
  color: #737d84;
}
.h5 #outfit .section-wrapper .stamp.active-3 .dash-line-group .vertical-top {
  border-color: rgba(123, 123, 123, 0.5);
}
.h5 #outfit .section-wrapper .stamp.active-3 .desc-cn .outfit-name {
  color: #7b7b7b;
  text-shadow: 0 0 10px rgba(123, 123, 123, 0.6);
}
.h5 #outfit .section-wrapper .stamp.active-3 .desc-cn .model-name {
  background-color: #ababab;
}
.h5 #outfit .section-wrapper .stamp.active-3 .desc-en .number {
  color: #7b7b7b;
}
.h5 #outfit .section-wrapper .stamp.active-3 .desc-en .model-name {
  color: #7b7b7b;
}
.h5 #outfit .section-wrapper .stamp.active-4 .dash-line-group .vertical-top {
  border-color: rgba(131, 115, 132, 0.5);
}
.h5 #outfit .section-wrapper .stamp.active-4 .desc-cn .outfit-name {
  color: #837384;
  text-shadow: 0 0 10px rgba(131, 115, 132, 0.6);
}
.h5 #outfit .section-wrapper .stamp.active-4 .desc-cn .model-name {
  background-color: #b2abb3;
}
.h5 #outfit .section-wrapper .stamp.active-4 .desc-en .number {
  color: #837384;
}
.h5 #outfit .section-wrapper .stamp.active-4 .desc-en .model-name {
  color: #837384;
}
.h5 #outfit .section-wrapper .dot-group {
  position: absolute;
  bottom: -3.14rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 4.5rem;
}
.h5 #outfit .section-wrapper .dot-group .dot {
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid #232323;
  border-radius: 50%;
}
.h5 #outfit .section-wrapper .dot-group .fill {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #232323;
  transition: transform 0.3s;
}
.h5 #outfit .kv-container {
  position: absolute;
  opacity: 1;
  top: 14rem;
  left: 0;
  width: 100%;
  bottom: 12.5rem;
  pointer-events: none;
}
.h5 #outfit .kv-container .kv {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 130%;
}
.h5 #outfit .kv-container .kv image {
  opacity: 0;
}
@font-face {
  font-family: "BauerBodoniStd-BoldItalic";
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot");
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot?#font-spider") format("embedded-opentype"), url("BauerBodoniStd-BoldItalic.2bab0b2c.woff") format("woff"), url("BauerBodoniStd-BoldItalic.f32cc148.ttf") format("truetype"), url("BauerBodoniStd-BoldItalic.880bc6ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bender-Bold";
  src: url("Bender-Bold.feaef48b.eot");
  src: url("Bender-Bold.feaef48b.eot?#font-spider") format("embedded-opentype"), url("Bender-Bold.6f29d761.woff") format("woff"), url("Bender-Bold.f15333d6.ttf") format("truetype"), url("Bender-Bold.6e30e29d.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BookAntiqua";
  src: url("BookAntiqua.78b274e2.eot");
  src: url("BookAntiqua.78b274e2.eot?#font-spider") format("embedded-opentype"), url("BookAntiqua.2c67b0ec.woff") format("woff"), url("BookAntiqua.64d2fdf3.ttf") format("truetype"), url("BookAntiqua.3d3ea3d9.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("Gilroy-Bold.dd90083b.eot");
  src: url("Gilroy-Bold.dd90083b.eot?#font-spider") format("embedded-opentype"), url("Gilroy-Bold.31448deb.woff") format("woff"), url("Gilroy-Bold.6f68dfcc.ttf") format("truetype"), url("Gilroy-Bold.c2d7ddc2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBold";
  src: url("Gilroy-ExtraBold.d5ef9e46.eot");
  src: url("Gilroy-ExtraBold.d5ef9e46.eot?#font-spider") format("embedded-opentype"), url("Gilroy-ExtraBold.b7098c56.woff") format("woff"), url("Gilroy-ExtraBold.428c641c.ttf") format("truetype"), url("Gilroy-ExtraBold.3b7b7927.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geometos";
  src: url("Geometos.541af104.eot");
  src: url("Geometos.541af104.eot?#font-spider") format("embedded-opentype"), url("Geometos.4cf18d15.woff") format("woff"), url("Geometos.2625552d.ttf") format("truetype"), url("Geometos.9d5e0913.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Impact";
  src: url("Impact.0695ad44.eot");
  src: url("Impact.0695ad44.eot?#font-spider") format("embedded-opentype"), url("Impact.891c1574.woff") format("woff"), url("Impact.611a577e.ttf") format("truetype"), url("Impact.13f4ae27.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot");
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Bold.938d54a9.woff") format("woff"), url("SourceHanSansCN-Bold.4646ff07.ttf") format("truetype"), url("SourceHanSansCN-Bold.d984f7ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("SourceHanSansCN-Heavy.2dc04107.eot");
  src: url("SourceHanSansCN-Heavy.2dc04107.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Heavy.69c3e101.woff") format("woff"), url("SourceHanSansCN-Heavy.5299c930.ttf") format("truetype"), url("SourceHanSansCN-Heavy.d632f58f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url("SourceHanSansCN-Medium.a4046152.eot");
  src: url("SourceHanSansCN-Medium.a4046152.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Medium.9cb66e44.woff") format("woff"), url("SourceHanSansCN-Medium.c0013463.ttf") format("truetype"), url("SourceHanSansCN-Medium.44ae7d33.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url("SourceHanSansCN-Regular.fb9349ce.eot");
  src: url("SourceHanSansCN-Regular.fb9349ce.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Regular.4e47f525.woff") format("woff"), url("SourceHanSansCN-Regular.c2375b0c.ttf") format("truetype"), url("SourceHanSansCN-Regular.c83c287f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold.6e533d13.eot");
  src: url("SourceHanSerifCN-Bold.6e533d13.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Bold.b6fb0845.woff") format("woff"), url("SourceHanSerifCN-Bold.42b9df64.ttf") format("truetype"), url("SourceHanSerifCN-Bold.84f2db50.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Heavy";
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot");
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Heavy.79f04e5b.woff") format("woff"), url("SourceHanSerifCN-Heavy.d7009eb1.ttf") format("truetype"), url("SourceHanSerifCN-Heavy.6486c971.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium";
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot");
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Medium.1e284ab5.woff") format("woff"), url("SourceHanSerifCN-Medium.5698c813.ttf") format("truetype"), url("SourceHanSerifCN-Medium.7838a329.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular";
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot");
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Regular.bd2be359.woff") format("woff"), url("SourceHanSerifCN-Regular.b55ae8d3.ttf") format("truetype"), url("SourceHanSerifCN-Regular.90a5a795.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
#furniture {
  background-image: url("background.553b0f90.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  user-select: none;
}
.pc #furniture .section-wrapper {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 12.1875rem 8.25rem 8.5625rem 8.25rem;
}
.pc #furniture .section-wrapper .header .title {
  box-sizing: border-box;
  width: 0;
  height: 3.8125rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.702);
  overflow: hidden;
  font-family: "SourceHanSerifCN-Heavy";
  font-size: 2.75rem;
  line-height: 1;
  color: #000;
  transition: width 0.5s;
}
.pc #furniture .section-wrapper .header .title .wrapper {
  display: flex;
  align-items: center;
  transform: translateY(130%);
  transition: transform 0.5s 0.5s;
}
.pc #furniture .section-wrapper .header .title .icon {
  width: 2.5625rem;
  height: 2.5625rem;
  margin: 0 0.9375rem 0 0.0625rem;
}
.pc #furniture .section-wrapper .header .title .border {
  position: relative;
  bottom: -0.4rem;
  height: 0.1875rem;
  width: 4.625rem;
  margin-left: 0.6875rem;
  background-color: #000;
}
.pc #furniture .section-wrapper .header .desc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.2rem;
  font-family: "SourceHanSerifCN-Regular";
  font-size: 1.3125rem;
  color: #000;
  overflow: hidden;
}
.pc #furniture .section-wrapper .header .desc .text-en {
  transform: translateY(-1.875rem);
  transition: transform 0.5s 0.5s;
}
.pc #furniture .section-wrapper .sample {
  position: relative;
  box-sizing: border-box;
  flex: 1;
  padding: 1rem 0;
}
.pc #furniture .section-wrapper .sample::before,
.pc #furniture .section-wrapper .sample::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  background-color: rgba(0, 0, 0, 0.702);
  transition: width 1s 1s;
}
.pc #furniture .section-wrapper .sample::before {
  top: 0;
  right: 0;
}
.pc #furniture .section-wrapper .sample::after {
  bottom: 0;
  left: 0;
}
.pc #furniture .section-wrapper .sample .content {
  display: flex;
  width: 100%;
  height: 100%;
}
.pc #furniture .section-wrapper .sample .content .block {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc #furniture .section-wrapper .sample .content .scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50%);
}
.pc #furniture .section-wrapper .sample .content .layer {
  position: relative;
}
.pc #furniture .section-wrapper .sample .content .layer .outer {
  position: absolute;
  height: 2rem;
  width: 2rem;
}
.pc #furniture .section-wrapper .sample .content .layer .outer:nth-child(1) {
  border-top: 0.375rem solid #1f1f1f;
  border-left: 0.375rem solid #1f1f1f;
}
.pc #furniture .section-wrapper .sample .content .layer .outer:nth-child(2) {
  border-right: 0.375rem solid #1f1f1f;
  border-bottom: 0.375rem solid #1f1f1f;
}
.pc #furniture .section-wrapper .sample .content .sample-1 {
  width: 36.4%;
  margin-right: 0.9375rem;
}
.pc #furniture .section-wrapper .sample .content .sample-1 .layer {
  width: 100%;
  height: 100%;
}
.pc #furniture .section-wrapper .sample .content .sample-1 .layer img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 110%;
}
.pc #furniture .section-wrapper .sample .content .column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pc #furniture .section-wrapper .sample .content .column .sample-3d {
  position: relative;
  height: 51%;
  margin-bottom: 0.9375rem;
}
.pc #furniture .section-wrapper .sample .content .column .sample-3d .layer {
  width: 100%;
  height: 100%;
}
.pc #furniture .section-wrapper .sample .content .column .sample-3d .layer img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 125%;
}
.pc #furniture .section-wrapper .sample .content .column .row {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.pc #furniture .section-wrapper .sample .content .column .row .sample-2,
.pc #furniture .section-wrapper .sample .content .column .row .sample-3 {
  position: relative;
  width: 49.2%;
}
.pc #furniture .section-wrapper .sample .content .column .row .sample-2 .layer,
.pc #furniture .section-wrapper .sample .content .column .row .sample-3 .layer {
  width: 100%;
  height: 100%;
}
.pc #furniture .section-wrapper .sample .content .column .row .sample-2 .layer img,
.pc #furniture .section-wrapper .sample .content .column .row .sample-3 .layer img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 125%;
}
.pc #furniture .section-wrapper .tips {
  height: 1rem;
  min-height: 12px;
  padding-top: 0.625rem;
  font-family: "SourceHanSansCN-Regular";
  font-size: 1rem;
  line-height: 1;
  overflow: hidden;
}
.pc #furniture .section-wrapper .tips span {
  display: block;
  transform: translateY(-2rem);
  transition: transform 0.5s 3.1s;
}
.pc #furniture .rhodes-island {
  position: absolute;
  right: 4.0625rem;
  bottom: 2.8125rem;
  height: 3.375rem;
}
.pc #furniture.entered .section-wrapper .header .title {
  width: 100%;
}
.pc #furniture.entered .section-wrapper .header .title .wrapper {
  transform: translateY(0%);
}
.pc #furniture.entered .section-wrapper .header .desc .text-en {
  transform: translateY(0%);
}
.pc #furniture.entered .section-wrapper .sample::before,
.pc #furniture.entered .section-wrapper .sample::after {
  width: 100%;
}
.pc #furniture.entered .section-wrapper .tips span {
  transform: translateY(0);
}
.h5 #furniture {
  background-position: 75% top;
}
.h5 #furniture .section-wrapper {
  box-sizing: border-box;
  width: calc(100% - 1.64rem * 2);
  height: calc(100% - 5.28rem * 2);
  margin: 5.28rem 1.64rem;
  display: flex;
  flex-direction: column;
}
.h5 #furniture .section-wrapper .header .title {
  box-sizing: border-box;
  width: 0;
  height: 2.57rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.702);
  overflow: hidden;
  font-family: "SourceHanSerifCN-Heavy";
  font-size: 1.3rem;
  word-break: keep-all;
  line-height: 1;
  color: #000;
  transition: width 0.5s;
}
.h5 #furniture .section-wrapper .header .title .wrapper {
  display: flex;
  align-items: center;
  transform: translateY(130%);
  transition: transform 0.5s 0.5s;
}
.h5 #furniture .section-wrapper .header .title .icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.9375rem 0 0.0625rem;
}
.h5 #furniture .section-wrapper .header .title .border {
  position: relative;
  bottom: -0.2rem;
  height: 0.15rem;
  width: 2.625rem;
  margin-left: 0.6875rem;
  background-color: #000;
}
.h5 #furniture .section-wrapper .header .desc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.2rem;
  font-family: "SourceHanSerifCN-Regular";
  font-size: 0.7rem;
  color: #000;
  overflow: hidden;
}
.h5 #furniture .section-wrapper .header .desc .text-en {
  transform: translateY(-1.875rem);
  transition: transform 0.5s 0.5s;
}
.h5 #furniture .section-wrapper .sample {
  position: relative;
  box-sizing: border-box;
  flex: 1;
  padding: 0.35rem 0;
}
.h5 #furniture .section-wrapper .sample::before,
.h5 #furniture .section-wrapper .sample::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  background-color: rgba(0, 0, 0, 0.702);
  transition: width 1s 1s;
}
.h5 #furniture .section-wrapper .sample::before {
  top: 0;
  right: 0;
}
.h5 #furniture .section-wrapper .sample::after {
  bottom: 0;
  left: 0;
}
.h5 #furniture .section-wrapper .sample .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.h5 #furniture .section-wrapper .sample .content .block {
  display: flex;
  align-items: center;
  justify-content: center;
}
.h5 #furniture .section-wrapper .sample .content .scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50%);
}
.h5 #furniture .section-wrapper .sample .content .layer {
  display: none;
}
.h5 #furniture .section-wrapper .sample .content .sample-1 {
  height: calc((100% - 0.35rem * 3) / 4);
  margin-bottom: 0.35rem;
}
.h5 #furniture .section-wrapper .sample .content .sample-1 .scene {
  background-image: url("furniture-1.5257ec1c.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.h5 #furniture .section-wrapper .sample .content .column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.h5 #furniture .section-wrapper .sample .content .column .sample-3d {
  height: calc((100% - 0.35rem * 2) / 3);
  margin-bottom: 0.35rem;
}
.h5 #furniture .section-wrapper .sample .content .column .sample-3d .scene {
  background-image: url("furniture-3d.317d309b.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.h5 #furniture .section-wrapper .sample .content .column .row {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.h5 #furniture .section-wrapper .sample .content .column .row .sample-2,
.h5 #furniture .section-wrapper .sample .content .column .row .sample-3 {
  height: calc((100% - 0.35rem) / 2);
}
.h5 #furniture .section-wrapper .sample .content .column .row .sample-2 {
  margin-bottom: 0.35rem;
}
.h5 #furniture .section-wrapper .sample .content .column .row .sample-2 .scene {
  background-image: url("furniture-2.527630bd.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.h5 #furniture .section-wrapper .sample .content .column .row .sample-3 .scene {
  background-image: url("furniture-3.0c21ff0f.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.h5 #furniture .section-wrapper .tips {
  height: 1rem;
  min-height: 0.7rem;
  padding-top: 0.4rem;
  font-family: "SourceHanSansCN-Regular";
  font-size: 0.7rem;
  line-height: 1;
  overflow: hidden;
}
.h5 #furniture .section-wrapper .tips span {
  display: block;
  transform: translateY(-2rem);
  transition: transform 0.5s 3.1s;
}
.h5 #furniture.entered .section-wrapper .header .title {
  width: 100%;
}
.h5 #furniture.entered .section-wrapper .header .title .wrapper {
  transform: translateY(0%);
}
.h5 #furniture.entered .section-wrapper .header .desc .text-en {
  transform: translateY(0%);
}
.h5 #furniture.entered .section-wrapper .sample::before,
.h5 #furniture.entered .section-wrapper .sample::after {
  width: 100%;
}
.h5 #furniture.entered .section-wrapper .tips span {
  transform: translateY(0);
}
.h5 #furniture .rhodes-island {
  position: absolute;
  right: 1.64rem;
  bottom: 1.36rem;
  height: 2.375rem;
  opacity: 0.5;
}
/*!
 * fullPage 3.0.4
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */
 html.fp-enabled,
 .fp-enabled body {
	 margin: 0;
	 padding: 0;
	 overflow:hidden;

	 /*Avoid flicker on slides transitions for mobile phones #336 */
	 -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 .fp-section {
	 position: relative;
	 -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
	 -moz-box-sizing: border-box; /* <=28 */
	 box-sizing: border-box;
 }
 .fp-slide {
	 float: left;
 }
 .fp-slide, .fp-slidesContainer {
	 height: 100%;
	 display: block;
 }
 .fp-slides {
	 z-index:1;
	 height: 100%;
	 overflow: hidden;
	 position: relative;
	 -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
	 transition: all 0.3s ease-out;
 }
 .fp-section.fp-table, .fp-slide.fp-table {
	 display: table;
	 table-layout:fixed;
	 width: 100%;
 }
 .fp-tableCell {
	 display: table-cell;
	 vertical-align: middle;
	 width: 100%;
	 height: 100%;
 }
 .fp-slidesContainer {
	 float: left;
	 position: relative;
 }
 .fp-controlArrow {
	 -webkit-user-select: none; /* webkit (safari, chrome) browsers */
	 -moz-user-select: none; /* mozilla browsers */
	 -khtml-user-select: none; /* webkit (konqueror) browsers */
	 -ms-user-select: none; /* IE10+ */
	 position: absolute;
	 z-index: 4;
	 top: 50%;
	 cursor: pointer;
	 width: 0;
	 height: 0;
	 border-style: solid;
	 margin-top: -38px;
	 -webkit-transform: translate3d(0,0,0);
	 -ms-transform: translate3d(0,0,0);
	 transform: translate3d(0,0,0);
 }
 .fp-controlArrow.fp-prev {
	 left: 15px;
	 width: 0;
	 border-width: 38.5px 34px 38.5px 0;
	 border-color: transparent #fff transparent transparent;
 }
 .fp-controlArrow.fp-next {
	 right: 15px;
	 border-width: 38.5px 0 38.5px 34px;
	 border-color: transparent transparent transparent #fff;
 }
 .fp-scrollable {
	 overflow: hidden;
	 position: relative;
 }
 .fp-scroller{
	 overflow: hidden;
 }
 .iScrollIndicator{
	 border: 0 !important;
 }
 .fp-notransition {
	 -webkit-transition: none !important;
	 transition: none !important;
 }
 #fp-nav {
	 position: fixed;
	 z-index: 100;
	 margin-top: -32px;
	 top: 50%;
	 opacity: 1;
	 -webkit-transform: translate3d(0,0,0);
 }
 #fp-nav.fp-right {
	 right: 17px;
 }
 #fp-nav.fp-left {
	 left: 17px;
 }
 .fp-slidesNav{
	 position: absolute;
	 z-index: 4;
	 opacity: 1;
	 -webkit-transform: translate3d(0,0,0);
	 -ms-transform: translate3d(0,0,0);
	 transform: translate3d(0,0,0);
	 left: 0 !important;
	 right: 0;
	 margin: 0 auto !important;
 }
 .fp-slidesNav.fp-bottom {
	 bottom: 17px;
 }
 .fp-slidesNav.fp-top {
	 top: 17px;
 }
 #fp-nav ul,
 .fp-slidesNav ul {
   margin: 0;
   padding: 0;
 }
 #fp-nav ul li,
 .fp-slidesNav ul li {
	 display: block;
	 width: 14px;
	 height: 13px;
	 margin: 7px;
	 position:relative;
 }
 .fp-slidesNav ul li {
	 display: inline-block;
 }
 #fp-nav ul li a,
 .fp-slidesNav ul li a {
	 display: block;
	 position: relative;
	 z-index: 1;
	 width: 100%;
	 height: 100%;
	 cursor: pointer;
	 text-decoration: none;
 }
 #fp-nav ul li a.active span,
 .fp-slidesNav ul li a.active span,
 #fp-nav ul li:hover a.active span,
 .fp-slidesNav ul li:hover a.active span{
	 height: 12px;
	 width: 12px;
	 margin: -6px 0 0 -6px;
	 border-radius: 100%;
  }
 #fp-nav ul li a span,
 .fp-slidesNav ul li a span {
	 border-radius: 50%;
	 position: absolute;
	 z-index: 1;
	 height: 4px;
	 width: 4px;
	 border: 0;
	 background: #333;
	 left: 50%;
	 top: 50%;
	 margin: -2px 0 0 -2px;
	 -webkit-transition: all 0.1s ease-in-out;
	 -moz-transition: all 0.1s ease-in-out;
	 -o-transition: all 0.1s ease-in-out;
	 transition: all 0.1s ease-in-out;
 }
 #fp-nav ul li:hover a span,
 .fp-slidesNav ul li:hover a span{
	 width: 10px;
	 height: 10px;
	 margin: -5px 0px 0px -5px;
 }
 #fp-nav ul li .fp-tooltip {
	 position: absolute;
	 top: -2px;
	 color: #fff;
	 font-size: 14px;
	 font-family: arial, helvetica, sans-serif;
	 white-space: nowrap;
	 max-width: 220px;
	 overflow: hidden;
	 display: block;
	 opacity: 0;
	 width: 0;
	 cursor: pointer;
 }
 #fp-nav ul li:hover .fp-tooltip,
 #fp-nav.fp-show-active a.active + .fp-tooltip {
	 -webkit-transition: opacity 0.2s ease-in;
	 transition: opacity 0.2s ease-in;
	 width: auto;
	 opacity: 1;
 }
 #fp-nav ul li .fp-tooltip.fp-right {
	 right: 20px;
 }
 #fp-nav ul li .fp-tooltip.fp-left {
	 left: 20px;
 }
 .fp-auto-height.fp-section,
 .fp-auto-height .fp-slide,
 .fp-auto-height .fp-tableCell{
	 height: auto !important;
 }

 .fp-responsive .fp-auto-height-responsive.fp-section,
 .fp-responsive .fp-auto-height-responsive .fp-slide,
 .fp-responsive .fp-auto-height-responsive .fp-tableCell {
	 height: auto !important;
 }

 /*Only display content to screen readers*/
 .fp-sr-only{
	 position: absolute;
	 width: 1px;
	 height: 1px;
	 padding: 0;
	 overflow: hidden;
	 clip: rect(0, 0, 0, 0);
	 white-space: nowrap;
	 border: 0;
 }@font-face {
  font-family: "BauerBodoniStd-BoldItalic";
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot");
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot?#font-spider") format("embedded-opentype"), url("BauerBodoniStd-BoldItalic.2bab0b2c.woff") format("woff"), url("BauerBodoniStd-BoldItalic.f32cc148.ttf") format("truetype"), url("BauerBodoniStd-BoldItalic.880bc6ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bender-Bold";
  src: url("Bender-Bold.feaef48b.eot");
  src: url("Bender-Bold.feaef48b.eot?#font-spider") format("embedded-opentype"), url("Bender-Bold.6f29d761.woff") format("woff"), url("Bender-Bold.f15333d6.ttf") format("truetype"), url("Bender-Bold.6e30e29d.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BookAntiqua";
  src: url("BookAntiqua.78b274e2.eot");
  src: url("BookAntiqua.78b274e2.eot?#font-spider") format("embedded-opentype"), url("BookAntiqua.2c67b0ec.woff") format("woff"), url("BookAntiqua.64d2fdf3.ttf") format("truetype"), url("BookAntiqua.3d3ea3d9.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("Gilroy-Bold.dd90083b.eot");
  src: url("Gilroy-Bold.dd90083b.eot?#font-spider") format("embedded-opentype"), url("Gilroy-Bold.31448deb.woff") format("woff"), url("Gilroy-Bold.6f68dfcc.ttf") format("truetype"), url("Gilroy-Bold.c2d7ddc2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBold";
  src: url("Gilroy-ExtraBold.d5ef9e46.eot");
  src: url("Gilroy-ExtraBold.d5ef9e46.eot?#font-spider") format("embedded-opentype"), url("Gilroy-ExtraBold.b7098c56.woff") format("woff"), url("Gilroy-ExtraBold.428c641c.ttf") format("truetype"), url("Gilroy-ExtraBold.3b7b7927.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geometos";
  src: url("Geometos.541af104.eot");
  src: url("Geometos.541af104.eot?#font-spider") format("embedded-opentype"), url("Geometos.4cf18d15.woff") format("woff"), url("Geometos.2625552d.ttf") format("truetype"), url("Geometos.9d5e0913.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Impact";
  src: url("Impact.0695ad44.eot");
  src: url("Impact.0695ad44.eot?#font-spider") format("embedded-opentype"), url("Impact.891c1574.woff") format("woff"), url("Impact.611a577e.ttf") format("truetype"), url("Impact.13f4ae27.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot");
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Bold.938d54a9.woff") format("woff"), url("SourceHanSansCN-Bold.4646ff07.ttf") format("truetype"), url("SourceHanSansCN-Bold.d984f7ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("SourceHanSansCN-Heavy.2dc04107.eot");
  src: url("SourceHanSansCN-Heavy.2dc04107.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Heavy.69c3e101.woff") format("woff"), url("SourceHanSansCN-Heavy.5299c930.ttf") format("truetype"), url("SourceHanSansCN-Heavy.d632f58f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url("SourceHanSansCN-Medium.a4046152.eot");
  src: url("SourceHanSansCN-Medium.a4046152.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Medium.9cb66e44.woff") format("woff"), url("SourceHanSansCN-Medium.c0013463.ttf") format("truetype"), url("SourceHanSansCN-Medium.44ae7d33.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url("SourceHanSansCN-Regular.fb9349ce.eot");
  src: url("SourceHanSansCN-Regular.fb9349ce.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Regular.4e47f525.woff") format("woff"), url("SourceHanSansCN-Regular.c2375b0c.ttf") format("truetype"), url("SourceHanSansCN-Regular.c83c287f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold.6e533d13.eot");
  src: url("SourceHanSerifCN-Bold.6e533d13.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Bold.b6fb0845.woff") format("woff"), url("SourceHanSerifCN-Bold.42b9df64.ttf") format("truetype"), url("SourceHanSerifCN-Bold.84f2db50.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Heavy";
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot");
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Heavy.79f04e5b.woff") format("woff"), url("SourceHanSerifCN-Heavy.d7009eb1.ttf") format("truetype"), url("SourceHanSerifCN-Heavy.6486c971.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium";
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot");
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Medium.1e284ab5.woff") format("woff"), url("SourceHanSerifCN-Medium.5698c813.ttf") format("truetype"), url("SourceHanSerifCN-Medium.7838a329.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular";
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot");
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Regular.bd2be359.woff") format("woff"), url("SourceHanSerifCN-Regular.b55ae8d3.ttf") format("truetype"), url("SourceHanSerifCN-Regular.90a5a795.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
#nav {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  user-select: none;
}
.pc #nav {
  width: calc(100% - 4.0625rem - 2.875rem);
  margin: 2.5rem 4.0625rem 0 2.875rem;
}
.pc #nav .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.875rem;
}
.pc #nav .nav-wrapper {
  display: flex;
  margin-left: 17.25rem;
}
.pc #nav .nav-wrapper .nav-item {
  display: flex;
  padding: 0.5rem;
  margin-right: 4.75rem;
  font-family: "SourceHanSansCN-Heavy";
  font-size: 1.125rem;
  line-height: 1;
  color: #2e2e2e;
  transition: color 0.5s;
  cursor: pointer;
}
.pc #nav .nav-wrapper .nav-item .nav-item-text {
  pointer-events: none;
}
.pc #nav .nav-wrapper .nav-item .nav-item-text:first-child {
  margin-right: 0.625rem;
}
.pc #nav .nav-wrapper .nav-item:hover,
.pc #nav .nav-wrapper .nav-item.active {
  color: rgba(15, 14, 20, 0.502);
}
.pc #nav .slogan {
  position: absolute;
  right: 0;
  top: 0.5rem;
  font-family: "Gilroy-ExtraBold";
  font-size: 1.1875rem;
  color: #000;
}
.pc #nav .slogan span + span {
  margin-left: 0.3125rem;
}
.h5 #nav {
  width: 100%;
}
.h5 #nav .logo {
  position: absolute;
  width: 7.14rem;
  left: 1.64rem;
  top: 1.36rem;
}
.h5 #nav .nav-wrapper {
  display: none;
}
.h5 #nav .slogan {
  position: absolute;
  right: 1.64rem;
  top: 1.36rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Gilroy-ExtraBold";
  font-size: 0.6785rem;
  color: #000;
}
@font-face {
  font-family: "BauerBodoniStd-BoldItalic";
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot");
  src: url("BauerBodoniStd-BoldItalic.a761239f.eot?#font-spider") format("embedded-opentype"), url("BauerBodoniStd-BoldItalic.2bab0b2c.woff") format("woff"), url("BauerBodoniStd-BoldItalic.f32cc148.ttf") format("truetype"), url("BauerBodoniStd-BoldItalic.880bc6ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Bender-Bold";
  src: url("Bender-Bold.feaef48b.eot");
  src: url("Bender-Bold.feaef48b.eot?#font-spider") format("embedded-opentype"), url("Bender-Bold.6f29d761.woff") format("woff"), url("Bender-Bold.f15333d6.ttf") format("truetype"), url("Bender-Bold.6e30e29d.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BookAntiqua";
  src: url("BookAntiqua.78b274e2.eot");
  src: url("BookAntiqua.78b274e2.eot?#font-spider") format("embedded-opentype"), url("BookAntiqua.2c67b0ec.woff") format("woff"), url("BookAntiqua.64d2fdf3.ttf") format("truetype"), url("BookAntiqua.3d3ea3d9.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-Bold";
  src: url("Gilroy-Bold.dd90083b.eot");
  src: url("Gilroy-Bold.dd90083b.eot?#font-spider") format("embedded-opentype"), url("Gilroy-Bold.31448deb.woff") format("woff"), url("Gilroy-Bold.6f68dfcc.ttf") format("truetype"), url("Gilroy-Bold.c2d7ddc2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy-ExtraBold";
  src: url("Gilroy-ExtraBold.d5ef9e46.eot");
  src: url("Gilroy-ExtraBold.d5ef9e46.eot?#font-spider") format("embedded-opentype"), url("Gilroy-ExtraBold.b7098c56.woff") format("woff"), url("Gilroy-ExtraBold.428c641c.ttf") format("truetype"), url("Gilroy-ExtraBold.3b7b7927.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Geometos";
  src: url("Geometos.541af104.eot");
  src: url("Geometos.541af104.eot?#font-spider") format("embedded-opentype"), url("Geometos.4cf18d15.woff") format("woff"), url("Geometos.2625552d.ttf") format("truetype"), url("Geometos.9d5e0913.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Impact";
  src: url("Impact.0695ad44.eot");
  src: url("Impact.0695ad44.eot?#font-spider") format("embedded-opentype"), url("Impact.891c1574.woff") format("woff"), url("Impact.611a577e.ttf") format("truetype"), url("Impact.13f4ae27.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Bold";
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot");
  src: url("SourceHanSansCN-Bold.8abfa1b6.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Bold.938d54a9.woff") format("woff"), url("SourceHanSansCN-Bold.4646ff07.ttf") format("truetype"), url("SourceHanSansCN-Bold.d984f7ef.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("SourceHanSansCN-Heavy.2dc04107.eot");
  src: url("SourceHanSansCN-Heavy.2dc04107.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Heavy.69c3e101.woff") format("woff"), url("SourceHanSansCN-Heavy.5299c930.ttf") format("truetype"), url("SourceHanSansCN-Heavy.d632f58f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url("SourceHanSansCN-Medium.a4046152.eot");
  src: url("SourceHanSansCN-Medium.a4046152.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Medium.9cb66e44.woff") format("woff"), url("SourceHanSansCN-Medium.c0013463.ttf") format("truetype"), url("SourceHanSansCN-Medium.44ae7d33.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url("SourceHanSansCN-Regular.fb9349ce.eot");
  src: url("SourceHanSansCN-Regular.fb9349ce.eot?#font-spider") format("embedded-opentype"), url("SourceHanSansCN-Regular.4e47f525.woff") format("woff"), url("SourceHanSansCN-Regular.c2375b0c.ttf") format("truetype"), url("SourceHanSansCN-Regular.c83c287f.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold.6e533d13.eot");
  src: url("SourceHanSerifCN-Bold.6e533d13.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Bold.b6fb0845.woff") format("woff"), url("SourceHanSerifCN-Bold.42b9df64.ttf") format("truetype"), url("SourceHanSerifCN-Bold.84f2db50.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Heavy";
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot");
  src: url("SourceHanSerifCN-Heavy.c3cbdc46.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Heavy.79f04e5b.woff") format("woff"), url("SourceHanSerifCN-Heavy.d7009eb1.ttf") format("truetype"), url("SourceHanSerifCN-Heavy.6486c971.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Medium";
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot");
  src: url("SourceHanSerifCN-Medium.095d2c1b.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Medium.1e284ab5.woff") format("woff"), url("SourceHanSerifCN-Medium.5698c813.ttf") format("truetype"), url("SourceHanSerifCN-Medium.7838a329.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SourceHanSerifCN-Regular";
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot");
  src: url("SourceHanSerifCN-Regular.85fe9f7c.eot?#font-spider") format("embedded-opentype"), url("SourceHanSerifCN-Regular.bd2be359.woff") format("woff"), url("SourceHanSerifCN-Regular.b55ae8d3.ttf") format("truetype"), url("SourceHanSerifCN-Regular.90a5a795.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.pc #scroll {
  position: absolute;
  top: 26.48%;
  bottom: 26.85%;
  right: 2.3125rem;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
}
.pc #scroll .track {
  height: 100%;
  width: 2px;
  background-color: #2c2a2c;
}
.pc #scroll .thumb {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 5.125rem;
  width: 100%;
  background-color: #2c2a2c;
  transition: transform 0.6s;
}
.pc #scroll .thumb .inner {
  margin: 3px 3px 0 3px;
  height: 1.1875rem;
  width: 6px;
  background-color: #fff;
}
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.ruler {
  position: absolute;
  display: block;
  visibility: hidden;
  top: 0;
  z-index: -9999;
  width: 1em;
  height: 1em;
}
body {
  visibility: hidden;
}
body.pc {
  min-width: 1024px;
}
.main {
  position: relative;
  width: 100%;
  height: 100%;
}
.sections {
  width: 100%;
  height: 100%;
}
.sections .section {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 1920px) {
  :root {
    font-size: 16px;
  }
}
@media screen and (min-height: 1080px) {
  :root {
    font-size: 16px;
  }
}
@media screen and (min-width: 1680px) and (max-width: 1919px) {
  :root {
    font-size: 15px;
  }
}
@media screen and (min-height: 1020px) and (max-height: 1079px) {
  :root {
    font-size: 15px;
  }
}
@media screen and (min-width: 1366px) and (max-width: 1679px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (min-height: 937px) and (max-height: 1019px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (min-height: 850px) and (max-height: 936px) {
  :root {
    font-size: 13px;
  }
}
@media screen and (min-width: 1366px) and (max-width: 1480px) {
  :root {
    font-size: 12px;
  }
}
@media screen and (max-height: 849px) {
  :root {
    font-size: 12px;
  }
}
@media screen and (max-width: 1365px) {
  :root {
    font-size: 9px;
  }
}
@media screen and (min-width: 375px) and (max-width: 414px) {
  :root {
    font-size: 16px;
  }
}
@media screen and (min-width: 320px) and (max-width: 375px) {
  :root {
    font-size: 14px;
  }
}
@media screen and (max-width: 320px) {
  :root {
    font-size: 12px;
  }
}
.fixTop {
  display: none;
}
.h5 .fixTop {
  position: fixed;
  display: block;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
  transform: translateY(-100%);
  animation: enter 0.5s forwards 0.5s;
}
@keyframes enter {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.h5 .fixTop::before {
  content: "";
  display: block;
  height: 0;
  width: 100%;
  padding-top: 5rem;
}
.h5 .fixTop .fixTopContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.h5 .fixTop .fixTopContent .fixTopIcon,
.h5 .fixTop .fixTopContent .fixTopLink {
  height: 100%;
  display: inline-block;
}
.h5 .fixTop .fixTopContent .fixTopImg {
  height: 100%;
  display: block;
}
.h5 .fixTop .fixTopContent .fixTopTitle {
  flex-basis: 45%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.h5 .fixTop .fixTopContent .fixTopTitle .fixTopTitleMain {
  font-size: 1.2rem;
  font-family: "SourceHanSansCN-Medium";
  color: #ffffff;
}
.h5 .fixTop .fixTopContent .fixTopTitle .fixTopTitleSub {
  color: #bebebe;
  font-family: "SourceHanSansCN-Normal";
  font-size: 1rem;
  line-height: 1em;
}
.h5 .fp-tableCell {
  position: relative;
}
.h5 #nav.nav {
  top: 5rem;
}