/* 根 */
:root {
  --bannerWave1: url("/img/wave/img1.jpg") repeat-x;
  --bannerWave2: url("/img/wave/img2.jpg") repeat-x;
}

/* 字体 */
@font-face {
  font-family: "cs";
  /* src: url("/fonts/ZhuZiAWan2.woff2"); */
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  font-family: "cs", serif;
  word-break: break-word;
}

@media screen and (max-width: 480px) {
  .left .title {
    display: none;
  }

  #main #mo {
    font-size: 24px;
  }

  #main #typed {
    font-size: 16px;
  }

  /* 美化滚动条 */
  ::-webkit-scrollbar {
    width: 1px !important;
    height: 1px !important;
  }

}

a {
  /* 继承父级颜色 */
  color: inherit;
  text-decoration: none;
}

/* 美化滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, .2)
}

::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: linear-gradient(45deg, hsla(0, 0%, 100%, .4) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, .4) 75%, transparent 0, transparent);
  border-radius: 1em
}

/* 头部隐藏 */
.home-fixed {
  width: 100%;
  height: 60px;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
  background: #fff;
  /* //添加过渡，优化体验，具体可以根据需求扩展 */
  transition: all 0.3s;
}

/* //这个类名用来动态改变显示藏（关键） */
.home-fixed.isHide {
  top: -60px !important;
}


/* 波浪 */
#bannerWave1,
#bannerWave2 {
  position: absolute;
  bottom: 0;
  -webkit-animation: gradientBG 120s linear infinite;
  animation: gradientBG 120s linear infinite;
}

#bannerWave1 {
  height: 84px;
  background: var(--bannerWave1);
  width: 200%;
  z-index: 10;
}

#bannerWave2 {
  height: 100px;
  background: var(--bannerWave2);
  width: 400%;
  z-index: 5;
}

@-webkit-keyframes gradientBG {
  0% {
    background-position: 0 50%
  }

  50% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0 50%
  }

  50% {
    background-position: 100% 50%
  }

  to {
    background-position: 0 50%
  }
}

.straight-line {
  background-image: url('../img/wave/straight.png');
  /* 直线宽5px的图片 */
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 100% 3px;
  padding-bottom: 2px;
}

.wavy-line {
  background-image: url('..//img//wave/wave.png');
  /* 波浪线宽2px的图片 */
  background-size: 9px 4px;
  background-position: 0 100%;
  background-repeat: repeat-x;
  padding-bottom: 3px;
}

.footer {
  background-color: #fff;
  height: 64px;
  font-size: 24px;
  text-align: center;
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
  width: 100%;
}