@charset "UTF-8";
#vm {
  position: relative;
  position: relative;
  width: 100%;
  height: 100%;
  color: #343434;
  font-size: 14px;
  /* 通用page类 */
  /* 首页 */
  /* 简介 */
  /* 目录页 */
  /* 内容 */
}
#vm .page {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #1b2f67;
}
#vm #music-image {
  position: fixed;
  width: 10vw;
  right: 2vw;
  top: 4vw;
  pointer-events: auto;
  z-index: 2;
}
#vm .tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5vw;
  color: #ffffff;
  z-index: 4;
  text-align: center;
}
#vm #home .building-box {
  position: relative;
}
#vm #home .building-box .shanghai-image {
  position: absolute;
  width: 83vw;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: -13vw;
}
#vm #home .building-box .top-right-image {
  position: absolute;
  width: 21vw;
  right: 6vw;
  top: 18vw;
}
#vm #home .building-box .titlt-image {
  position: absolute;
  width: 36vw;
  right: 14vw;
  bottom: -55%;
}
#vm #home .building-box .building-image {
  position: relative;
  width: 42vw;
  left: 8vw;
  top: 4vw;
}
#vm #home .bottom-image {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
#vm #home .qiu-image {
  position: absolute;
  width: 24vw;
  left: 0;
  top: 12vw;
}
#vm #home .start-image {
  position: absolute;
  width: 35vw;
  left: 0;
  right: 0;
  bottom: 18vw;
  margin: 0 auto;
  pointer-events: auto;
}
#vm #brief {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: auto;
}
#vm #brief .p-content {
  position: relative;
  width: 80%;
  padding-top: 19vw;
  line-height: 7vw;
  font-size: 4vw;
  margin: 0 auto;
  text-indent: 2em;
  color: #ffffff;
}
#vm #brief .bottom-image {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}
#vm #brief .yq-box {
  position: relative;
}
#vm #brief .yq-image {
  position: relative;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: 6vw;
}
#vm #brief .arrow-box {
  position: absolute;
  width: 19vw;
  height: 7vw;
  overflow: hidden;
}
#vm #brief .arrow-box .copy-box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
#vm #brief .arrow-box .arrow-image {
  position: absolute;
  width: 100%;
  right: 0;
}
#vm #brief .arrow-1 {
  top: 5vw;
  transform: rotate(156deg);
  left: 15vw;
  width: 22vw;
}
#vm #brief .arrow-2 {
  left: 7vw;
  bottom: 14vw;
  transform: rotate(41deg);
}
#vm #brief .arrow-3 {
  bottom: 0;
  left: 41vw;
}
#vm #brief .arrow-4 {
  top: 6vw;
  right: 14vw;
  transform: rotate(201deg);
  width: 22vw;
}
#vm #brief .arrow-5 {
  right: 7vw;
  transform: rotate(317deg);
  bottom: 14vw;
}
#vm #directory {
  position: absolute;
  overflow: auto;
  pointer-events: auto;
}
#vm #directory svg {
  position: absolute;
  pointer-events: auto;
  left: 7vw;
  width: 8vw;
  top: 2vw;
}
#vm #directory .top-cell-image {
  position: absolute;
  right: 14vw;
  top: 3vw;
  width: 11vw;
}
#vm #directory .sub-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 5vw;
  margin: 0 auto;
  width: 50vw;
}
#vm #directory .gather {
  position: relative;
  margin-top: 15vw;
  height: 172vw;
}
#vm #directory .box1 {
  position: relative;
  width: 92vw;
  height: 165vw;
  margin: 0 auto;
}
#vm #directory .box2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 11vw;
  width: 92vw;
  height: 161vw;
  margin: 0 auto;
  background-image: url(../images/box2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 5vw;
  z-index: 2;
  display: grid;
  padding: 0 3vw;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4vw;
}
#vm #directory .box2 > div {
  position: relative;
  width: 41vw;
  height: 18vw;
  background-image: linear-gradient(180deg, #c6ecff 0%, #b0e5ff 50%, #99ddff 100%);
  box-shadow: inset 0vw 1vw 2vw 0vw #ffffff;
  border-radius: 3vw;
  margin-top: -8vw;
  color: #428cb0;
  font-size: 3vw;
  padding: 3vw;
  pointer-events: auto;
}
#vm #directory .box2 > div .dirName {
  font-size: 4vw;
  font-weight: bold;
  color: #135c8f;
}
#vm #directory .box2 > div .dirNumber {
  position: absolute;
  right: 2vw;
  font-size: 7vw;
  font-weight: bold;
  background-image: linear-gradient(bottom, #97dbfd, #8ed5f7);
  background-image: -webkit-linear-gradient(bottom, #97dbfd, #8ed5f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#vm #directory .box2 > div .desc-text {
  position: absolute;
  bottom: 4vw;
}
#vm #work-content {
  position: relative;
  width: 100%;
  height: 100%;
  color: red;
  overflow: auto;
  pointer-events: auto;
}
#vm #work-content svg {
  position: absolute;
  pointer-events: auto;
  left: 7vw;
  width: 8vw;
  top: 2vw;
}
#vm #work-content .c-title {
  position: relative;
  font-size: 5vw;
  font-weight: bold;
  text-align: center;
  padding-top: 7vw;
  padding-left: 4.5vw;
}
#vm #work-content .c-title span {
  position: relative;
}
#vm #work-content .c-title svg {
  position: absolute;
  left: -2rem;
  top: -1.5rem;
  transform: scale(0.7);
}
#vm #work-content .bg-image {
  position: fixed;
  width: 90%;
  left: 0;
  right: 0;
  top: 22vw;
  margin: 0 auto;
}
#vm #work-content .content-box {
  position: relative;
  width: 92vw;
  margin: 0 auto;
  margin-top: 6vw;
  padding: 5vw 4vw;
}
#vm #work-content .box3 {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  overflow: auto;
  z-index: 3;
}
#vm #work-content .box1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 92vw;
  height: 108vw;
  border-radius: 5vw;
}
#vm #work-content .box2 {
  position: absolute;
  width: 92vw;
  top: 28vw;
  left: 0;
  height: 136vw;
  border-radius: 5vw;
  z-index: 2;
}
#vm #work-content .content-item {
  position: relative;
  z-index: 2;
  margin-top: 4vw;
}
#vm #work-content .content-item:first-child {
  margin-top: 0;
}
#vm #work-content .c-sub-title {
  position: relative;
  padding: 1vw 2vw;
  border-radius: 4vw;
  font-size: 4vw;
  font-weight: bold;
  display: inline-block;
  color: #ffffff;
}
#vm #work-content .c-card {
  position: relative;
  margin-top: 3vw;
  padding: 4vw;
  font-size: 3vw;
  border-radius: 4vw;
  color: #3e3a39;
  background-color: #ffffff;
}
#vm #work-content .c-card div {
  display: block;
  color: #ffffff;
  margin-top: 3vw;
}
#vm #work-content .c-card div span {
  display: inline-block;
  border-radius: 4px;
  padding: 1vw 2vw;
  background-color: #0ba29a;
  pointer-events: auto;
}
#vm #work-content .c-card div span img {
  width: 6vw;
  display: inline-block;
  position: relative;
  top: 0.5vw;
  margin-left: 2vw;
}
#vm #work-content .theme1 {
  margin-bottom: 5vw;
}
#vm #work-content .theme1 .c-title {
  color: #feb623;
}
#vm #work-content .theme1 p span {
  color: #feb623;
  font-weight: bold;
}
#vm #work-content .theme1 .c-sub-title {
  background-image: linear-gradient(90deg, #f99c00 0%, #ffba28 100%), linear-gradient(#ffffff, #ffffff);
}
#vm #work-content .theme2 {
  margin-bottom: 5vw;
}
#vm #work-content .theme2 .c-title {
  color: #8ED1F5;
}
#vm #work-content .theme2 p span {
  color: #8ED1F5;
  font-weight: bold;
}
#vm #work-content .theme2 .c-sub-title {
  background-image: linear-gradient(90deg, #8ED2F5 0%, #8ED2F5 100%), linear-gradient(#ffffff, #ffffff);
}
#vm #work-content .theme3 {
  margin-bottom: 5vw;
}
#vm #work-content .theme3 .c-title {
  color: #F2B2C0;
}
#vm #work-content .theme3 p span {
  color: #F2B2C0;
  font-weight: bold;
}
#vm #work-content .theme3 .c-sub-title {
  background-image: linear-gradient(90deg, #F4B0C4 0%, #F4B0C5 100%), linear-gradient(#ffffff, #ffffff);
}
#vm #work-content .theme4 {
  margin-bottom: 5vw;
}
#vm #work-content .theme4 .c-title {
  color: #5DB693;
}
#vm #work-content .theme4 p span {
  color: #5DB693;
  font-weight: bold;
}
#vm #work-content .theme4 .c-sub-title {
  background-image: linear-gradient(90deg, #5DB693 0%, #5DB693 100%), linear-gradient(#ffffff, #ffffff);
}

@keyframes width {
  0% {
    opacity: 0.5;
    width: 100%;
  }
  100% {
    opacity: 1;
    width: 0;
  }
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

/* CSS Rotate Animation */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Apply the animation to an element */
.elementRotate {
  animation: rotate 2s linear infinite;
}

/* CSS code for a grow and shrink animation */
@keyframes growShrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.elementScale {
  animation: growShrink 1s infinite;
}

/* CSS code for an up and down animation */
@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.elementUpDown {
  animation: upDown 1.5s infinite;
}/*# sourceMappingURL=index.css.map */