#nav-user {
  float: right;
}


a {
  color: #000;
  text-decoration: none;
}

img {
  width: 100%;
  height: 100%;
}

/* 加载页面 */
.index {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url(../images/bg-loading.jpg) no-repeat center/cover;
}

.index .loading {
  position: relative;
  width: 2.24rem;
}

.index .logo {
  width: 100%;
}

.index .logo-white {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: url(../images/logo-loading-end.png) no-repeat left/cover;
  animation: loadingAn 2s forwards;
}

/* 目录页 */
.catalogue {
  width: 100vw;
  height: 100vh;
  background: url(../images/bg-catalogue.jpg) no-repeat center/cover;
}

@media screen and (orientation: landscape) {
  .catalogue {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    background: url(../images/bg-catalogue.jpg) no-repeat center/cover;
  }
}

.catalogue .content-area .title.animate__fadeIn {
  animation-duration: 2s;
}

.catalogue .content-area .mascot.animate__fadeInLeft {
  /* animation-delay: .5s; */
  animation-duration: 1.5s;
}

.catalogue .link-list img.animate__fadeInDown_S {
  animation-delay: .3s;
}

.catalogue .link-list .name.animate__fadeInUp_S {
  animation-delay: .3s;
}

.catalogue .home {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

@media screen and (orientation: landscape) {
  .catalogue .home {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.4rem;
  }
}

.catalogue .content-area {
  box-sizing: border-box;
  position: relative;
  width: 85%;
  height: 100%;
  padding: 0 0.2rem 2rem 0.2rem;
  margin: 0 auto;
}

@media screen and (orientation: landscape) {
  .catalogue .content-area {
    box-sizing: border-box;
    position: relative;
    height: auto;
    padding: 0 0.2rem 2rem 0.2rem;
    margin: 0 auto;
  }
}

.catalogue .logo {
  position: absolute;
  left: 50%;
  /* bottom: .5rem; */
  bottom: 0;
  transform: translateX(-50%);
  width: 2.1rem;
}

.catalogue .top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-top: .6rem; */
}

.catalogue .top-container .little-title {
  width: 2.2rem;
  height: .57rem;
}

.catalogue .mascot {
  /* margin-top: 3.6rem; */
}

.catalogue .mascot img {
  width: .9rem;
  -webkit-filter: drop-shadow(0 .05rem .08rem rgba(0, 0, 0, .3));
  filter: drop-shadow(0 .05rem .08rem rgba(0, 0, 0, .3));
}

.catalogue .title {
  /* margin-top: 1.88rem; */
  background-size: cover;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 3%;
  display: flex;
  justify-content: center;
}

.catalogue .title>img {
  /* margin-top: 1.88rem; */
  max-width: 600px;
}

.catalogue .link-list {
  display: flex;
  justify-content: space-between;
  /* margin-top: .96rem; */
  align-items: center;
}

.catalogue .link-list .link-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.catalogue .link-list .interval {
  width: 1px;
  background-color: #c1c1c1;
  height: 1rem;
}

.catalogue .link-list img {
  width: .9rem;
  height: auto;
}

.catalogue .link-list .name {
  margin-top: .2rem;
  font-size: .36rem;
  color: #333;
  text-align: center;
}

/* 章节选择页面 */
.chapter {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding-top: .01rem;
  background: url(../images/bg-chapter.jpg) no-repeat center/cover;
  color: #000;
}


@media screen and (orientation: landscape) {
  .chapter {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    height: auto;
    padding-top: .01rem;
    background: url(../images/bg-chapter.jpg) no-repeat center/cover;
    color: #000;
  }
}

.back-btn {
  position: fixed;
  z-index: 100;
  width: .6rem;
  top: .25rem;
  left: 2.5%;
  /* margin-top: .4rem; */
  /* margin-left: 2.5%; */
}

.chapter .content-area {
  width: 91%;
  margin: 0 auto;
  text-align: center;
}


@media screen and (orientation: landscape) {
  .chapter .content-area {
    width: 91%;
    margin: 0 auto;
    text-align: center;
    height: 100%;
  }
}

.chapter .title-container {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  margin-top: 1rem;
  font-size: .48rem;
  font-weight: bold;
}

.chapter .title-container .mascot {
  position: absolute;
  right: -.7rem;
  top: -.5rem;
  width: .69rem;
  transform: translate(110%, -50%);
  filter: drop-shadow(0 0 .1rem rgba(0, 0, 0, .3));
  animation: swingAn 1s linear infinite alternate;
  transform-origin: bottom center;
}

.chapter .title-container p {
  position: relative;
}

.chapter .title-container p::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -.2rem;
  transform: translateX(-50%);
  width: .8rem;
  height: .06rem;
  border-radius: .4rem;
  background-color: #e60012;
}

.chapter .chapter-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: .15rem;
  row-gap: .4rem;
  overflow: hidden;
  /* height: calc(100vh - 3rem); */
  max-height: calc(100vh - 3rem);
  padding: 0 .2rem;
  margin-top: .5rem;
  /* margin-top: 1.1rem; */
  overflow-y: auto;


  /* display: webkit-box;
  padding-bottom: 10px;
  margin-bottom: -10px; */
}


@media screen and (orientation: landscape) {
  .chapter .chapter-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: .15rem;
    row-gap: .4rem;
    overflow: hidden;
    max-height: 100%;
    padding: 0 .2rem;
    margin-top: .5rem;
    overflow-y: auto;
  }
}

.chapter .chapter-list .chapter-list-detail {
  box-sizing: border-box;
  width: 100%;
  /* height: 3rem; */
  height: 2.8rem;
  padding: .15rem;
  background-color: #f7f7f7;
  border-radius: .4rem;
}

.chapter .chapter-list .chapter-list-detail a {
  color: #000;
}

.chapter .chapter-list .chapter-content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: .01rem;
  background: url(../images/chapter-unfinished.png) no-repeat center/contain;
}

.chapter .chapter-list .chapter-list-detail.finished .chapter-content {
  background-image: url(../images/chapter-finished.png);
}

.chapter .chapter-list .chapter-content .serial {
  position: relative;
  display: inline-block;
  /* margin-top: .3rem; */
  margin-top: .25rem;
  font-size: .23rem;
  transform: scale(.8);
}

.chapter .chapter-list .chapter-content .serial::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .01rem;
  background-color: #e60012;
}

.chapter .chapter-list .chapter-content .name {
  width: 4.5em;
  height: 1rem;
  overflow: hidden;
  /* text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; */
  /* font-size: .32rem; */
  font-size: .3rem;
  font-weight: bold;
}

.chapter .chapter-list .chapter-content .text-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 1.3rem;
  margin-top: .6rem;
}

/* 章节学习页面 */
.chapter-study {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding-top: .01rem;
  color: #000;
}

.chapter-study .bg {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: url(../images/bg-chapter.jpg) no-repeat center/cover;
}

.chapter-study .content-main {
  position: relative;
  z-index: 3;
  width: 90%;
  padding-bottom: .8rem;
  margin: 0 auto;
  margin-top: .25rem;
}

.chapter-study .logo {
  font-size: .46rem;
  text-align: center;
}

.chapter-study .logo img {
  width: 2.5rem;
  margin: 0 auto;
}

.chapter-study .logo .title {
  margin-top: .6rem;
}

.chapter-study .content-container {
  margin-top: .4rem;
  text-align: justify;
}

.chapter-study .content-container img {
  max-width: 100%;
}

.chapter-study .content-container video {
  width: 100%;
  height: 3.8rem;
  border-radius: .4rem;
  object-fit: cover;
}

.chapter-study .content-container .top-video {
  margin-top: .5rem;
  /* margin-bottom: .4rem; */
  border: 1px solid #c1c1c1;
}


.chapter-study .content-container .bottom-video {
  margin-top: .5rem;
}


.chapter-study .content-container p {
  font-size: .3rem;
  line-height: .5rem;
}

/* .chapter-study .content-container p:not(:nth-of-type(1)) {
  margin-top: .9rem;
} */

.chapter-study .answer-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 3rem;
  padding: .25rem .25rem;
  padding-left: .2rem;
  margin: 0 auto;
  margin-top: .8rem;
  border-left: .05rem solid #ff6a72;
  border-radius: .5rem;
  background-color: #fff;
}

.chapter-study .answer-btn p {
  flex: 1;
  font-size: .32rem;
  text-align: center;
}

.chapter-study .answer-btn img {
  width: .4rem;
}

.chapter-study .dialog {
  position: fixed;
  top: 0;
  z-index: 4;
  /* display: none; */
  /* display: flex;
  align-items: center;
  justify-content: center; */
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, .5);
}

.chapter-study .dialog-container {
  /* display: none; */
  position: relative;
  box-sizing: border-box;
  width: 87%;
  padding: .8rem .6rem;
  padding-bottom: .6rem;
  margin: 0 auto;
  margin-top: 50%;
  margin-bottom: 1.5rem;
  transform: translateY(-5%);
  border-radius: .4rem;
  background-color: #fff;
}

.chapter-study .dialog-container .close-btn {
  position: absolute;
  top: .2rem;
  right: .2rem;
  width: .6rem;
}

.chapter-study .dialog-main {
  /* display: none; */
}

.chapter-study .dialog-main .title {
  display: flex;
  margin-top: .3rem;
  font-size: .33rem;
}

.chapter-study .dialog-main .title .question {
  flex: 1;
}

.chapter-study .dialog-main .choice-detail {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: .25rem .4rem;
  margin-top: .45rem;
  border: .05rem solid #f2f2f2;
  background-color: #f2f2f2;
  border-radius: .5rem;
  font-size: .3rem;
  color: #686767;
}

.chapter-study .dialog-main .choice-detail.active {
  border-color: #e60012;
}

.chapter-study .dialog-main .choice-detail:not(:nth-of-type(1)) {
  margin-top: .3rem;
}

.chapter-study .dialog-main input {
  display: none;
}

.chapter-study .dialog-main input:checked+.choice-detail {
  border-color: #e60012;
}

.chapter-study .dialog-main .choice-detail .answer-serial {
  margin-right: .15rem;
}

.chapter-study .indicator {
  display: flex;
  justify-content: center;
  margin-top: .6rem;
}

.chapter-study .indicator .dot {
  width: .14rem;
  height: .14rem;
  border-radius: 50%;
  background-color: #d8d8d8;
}

.chapter-study .indicator .dot.active {
  background-color: #686767;
}

.chapter-study .indicator .dot:not(:last-child) {
  margin-right: .15rem;
}

.chapter-study .dialog-container .sub-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 3rem;
  padding: .25rem .25rem;
  padding-left: .2rem;
  margin: 0 auto;
  margin-top: .5rem;
  border-left: .05rem solid #ff6a72;
  border-radius: .5rem;
  background-color: #e60012;
}

.chapter-study .dialog-container .sub-btn p {
  flex: 1;
  font-size: .32rem;
  color: #fff;
  text-align: center;
}

.chapter-study .dialog-container .sub-btn img {
  width: .4rem;
}

.chapter-study .dialog-container .tips-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  padding: 1rem 0;
  border: 1px solid #9c9b9b;
  border-radius: .5rem;
  background-color: #fff;
  font-size: .4rem;
  text-align: center;
  font-weight: bold;
  box-shadow: .01rem .03rem .03rem rgb(170, 170, 170);
}

.chapter-study .dialog-container .tips-empty.animate__fadeOut {
  animation-delay: .3s;
}

.chapter-study .dialog .feedback {
  /* display: none; */
  position: relative;
  box-sizing: border-box;
  width: 85%;
  padding: .4rem .4rem;
  border-radius: .4rem;
  margin: 0 auto;
  margin-top: 50%;
  margin-bottom: 2.5rem;
  background-color: #fff;
  text-align: center;
}

.chapter-study .dialog .feedback .sign {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 1.17rem;
  height: 1.17rem;
  padding: .13rem;
  background-color: #fff;
  border-radius: 50%;
}

.chapter-study .dialog .feedback .sign img {
  width: 100%;
  height: 100%;
}

.chapter-study .dialog .feedback .answer-close-btn {
  position: absolute;
  right: .2rem;
  top: .2rem;
  width: .6rem;
  height: .6rem;
}

.chapter-study .dialog .feedback .answer-close-btn img {
  width: 100%;
  height: 100%;
}

.chapter-study .dialog .feedback .right {
  display: none;
  margin-top: .6rem;
  margin-bottom: .8rem;
}

.chapter-study .dialog .feedback .error {
  display: none;
  margin-top: .6rem;
  margin-bottom: .8rem;
}

.chapter-study .dialog .feedback .finished {
  /* display: none; */
  margin-bottom: .4rem;
}

.chapter-study .dialog .feedback .title {
  font-size: .46rem;
  font-weight: bold;
}

.chapter-study .dialog .feedback .error .answer {
  margin-top: .3rem;
  font-size: .36rem;
  color: #666666;
}

.chapter-study .dialog .feedback .error .answer span {
  color: #e60012;
}

.chapter-study .dialog .feedback .error .analysis {
  margin-top: .1rem;
  font-size: .3rem;
}

.chapter-study .dialog .feedback .finished .title {
  position: relative;
  display: inline-block;
  margin-top: .3rem;
  font-size: .56rem;
}

.chapter-study .dialog .feedback .finished .title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .04rem;
  background-color: #e60012;
}

.chapter-study .dialog .feedback .finished .pic {
  width: 2.04rem;
  margin: 0 auto;
  margin-top: .8rem;
}

.chapter-study .dialog .feedback .finished .state {
  margin-top: .4rem;
  font-size: .58rem;
  color: #e60012;
}

.chapter-study .dialog .feedback .finished .name {
  font-size: .38rem;
  font-weight: bold;
}

.chapter-study .dialog .feedback .answer-back-btn {
  display: inline-block;
  width: 3rem;
  padding: .2rem .25rem;
  padding-left: .2rem;
  margin: 0 auto;
  /* margin-top: .8rem; */
  margin-bottom: .5rem;
  border-left: .05rem solid #ff6a72;
  border-radius: .5rem;
  background-color: #e60012;
  font-size: .32rem;
  color: #fff;
}

/* 搜索页面 */
.search-page {
  position: relative;
  width: 100vw;
  /* height: 100vh; */
  /* overflow: hidden; */
}


@media screen and (orientation: landscape) {
  .search-page {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.25rem 0 0 0;
  }
}

.search-page .bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: url(../images/bg-chapter.jpg) no-repeat center/cover;
}

.search-page .content-main {
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  width: 100%;
  height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 0 5%;
  padding-bottom: .8rem;
  margin: 0 auto;
  /* margin-top: 3rem; */
  margin-top: 2.7rem;
}

@media screen and (orientation: landscape) {
  .search-page .content-main {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0 5%;
    margin: 0 auto;
    /* margin-top: 3rem; */
    /* margin-top: 2.7rem; */
  }
}

.search-page .top-search {
  position: fixed;
  top: .25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  box-sizing: border-box;
  width: 90%;
  /* height: 100%; */
}

@media screen and (orientation: landscape) {
  .search-page .top-search {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 90%;
    /* height: 100%; */
  }
}

.search-page .content-main .separated {
  width: 100%;
  height: 1px;
  margin-top: 2.4rem;
}

.search-page .logo {
  text-align: center;
}

.search-page .logo img {
  width: 2.5rem;
  margin: 0 auto;
}

.search-page .search-container {
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  margin-top: .4rem;
}

.search-page .search-container .input-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: .4rem;
  /* margin-left: .6rem; */
}

.search-page .search-container .input-container input {
  box-sizing: border-box;
  width: 100%;
  height: .9rem;
  padding-left: .4rem;
  border: none;
  border-radius: .4rem;
  box-shadow: .05rem .03rem .3rem rgb(214, 212, 212);
  font-size: .3rem;
}

.search-page .search-container .input-container .search-btn {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  width: .36rem;
}

.search-page .search-result {
  width: 100%;
  /* height: calc(100vh - 3.5rem); */
  /* overflow-y: auto; */
  overflow: hidden;
  margin-top: .5rem;
}

.search-page .search-result .search-list:not(:nth-of-type(1)) {
  padding-top: .6rem;
}

.search-page .search-result .search-list {
  padding-bottom: .6rem;
  border-bottom: 1px solid #d6d6d6;
}


.search-page .search-result .search-list .serial {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  /* width: 1.8rem; */
  /* height: .7rem; */
  max-width: 100%;
  padding-left: .1rem;
  padding-right: .16rem;

  background: #e60012 url(../images/bg-serial.png) no-repeat center right/contain;
  font-size: .25rem;
  color: #fff;
}

.search-page .search-result .search-list .serial::after {
  content: '';
  position: absolute;
  bottom: -.22rem;
  width: 0;
  height: 0;
  border: .12rem solid transparent;
  border-top-color: #e60012;
}

.search-page .search-result .search-list .serial .inside {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: .7rem;
}

.search-page .search-result .search-list .serial p.title {
  width: calc(100%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-page .search-result .search-list .serial p.num {
  margin-left: .3rem;
  font-weight: bold;
}

.search-page .search-result .search-list .text {
  margin-top: .3rem;
  font-size: .3rem;
  line-height: .5rem;
}

.search-page .history {
  display: flex;
  /* display: none; */
  flex-wrap: wrap;
  /* margin-top: .6rem; */
  /* min-height: 1.8rem; */
  border-bottom: 1px solid #d6d6d6;
}

.search-page .history p {
  width: 25%;
  margin-bottom: .5rem;
  text-align: center;
  font-style: italic;
  font-size: .25rem;
  /* border-right: 1px solid #c1c1c1; */
}

.search-page .history p:nth-child(5),
.search-page .history p:nth-child(10) {
  border-right: none;
}

.search-page .hot {
  margin-bottom: .4rem;
  font-size: .38rem;
  color: #e60012;
}

.search-page .error {
  /* padding: .6rem 0; */
  padding-top: .3rem;
  /* border-bottom: 1px solid #d6d6d6; */
  font-size: .25rem;
  color: #3d3d3d;
  /* text-align: center; */
}

.search-page .think-want {
  margin-bottom: .5rem;
  font-size: .25rem;
  color: #e60012;
}




.chapter .chaAn0 {
  animation-delay: .3s;
}

.chapter .chaAn1 {
  animation-delay: .6s;
}

.chapter .chaAn2 {
  animation-delay: .9s;
}

.chapter .chaAn3 {
  animation-delay: 1.1s;
}

.chapter .chaAn4 {
  animation-delay: 1.2s;
}

.chapter .chaAn5 {
  animation-delay: 1.5s;
}

.chapter .chaAn6 {
  animation-delay: 1.8s;
}

.chapter .chaAn7 {
  animation-delay: 2.1s;
}

.chapter .chaAn8 {
  animation-delay: 2.4s;
}

.chapter .chaAn9 {
  animation-delay: 2.7s;
}

.chapter .chaAn10 {
  animation-delay: 3s;
}

.chapter .chaAn11 {
  animation-delay: 3.3s;
}

.chapter .chaAn13 {
  animation-delay: 3.6s;
}

.show {
  display: block;
}

.to-hidden {
  display: none;
}

.search-page .history.to-hidden {
  display: none;
}

.loading.to-hidden {
  display: none;
}

.forbid {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin-top: 30vh;
}

.loading {
  position: fixed;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  /* background-color: rgba(0, 0, 0, .5); */
}

.loading .loading-error {
  width: 4.5rem;
  padding: 1rem .5rem;
  background-color: #fff;
  border-radius: .4rem;
  text-align: center;
}

.container {
  width: 2rem;
  height: 2rem;
  /* margin: 100px auto; */
  background-color: #7f7f7f;
  border-radius: 10px;
}

.loadiing {
  width: 50%;
  height: 50%;
  margin: 10px auto;
  position: relative;
}

.container1,
.container2 {
  width: 100%;
  height: 100%;
  position: absolute;
  margin-top: .2rem;
}

.container2 {
  transform: rotate(45deg);
  /* 如果不给container2旋转将与container1位置重叠，旋转使得小圆点分布在八个方向上 */
}

.container p {
  text-align: center;
  padding-top: .3rem;
  width: 100%;
  color: #fff;
}

.circle {
  width: .2rem;
  height: .2rem;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  /* 给每一个小圆点增加定位 */
  animation: load 1.8s both infinite;
  /* 每一个小圆圈缩放完成的时间为1.8且往复执行动画 */
}

.circle:nth-child(1) {
  left: 0;
  top: 0;
}

.circle:nth-child(2) {
  right: 0;
  top: 0;
}

.circle:nth-child(3) {
  right: 0;
  bottom: 0;
}

.circle:nth-child(4) {
  left: 0;
  bottom: 0;
}

@keyframes load {
  0% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }

  80% {
    transform: scale(0);
  }

  100% {
    transform: scale(0);
  }
}

/* 给每个小圆点增加不同的动画延时 */
.container1 .circle:nth-child(1) {
  animation-delay: 0s;
}

.container2 .circle:nth-child(1) {
  animation-delay: 0.2s;
}

.container1 .circle:nth-child(2) {
  animation-delay: 0.4s;
}

.container2 .circle:nth-child(2) {
  animation-delay: 0.6s;
}

.container1 .circle:nth-child(3) {
  animation-delay: 0.8s;
}

.container2 .circle:nth-child(3) {
  animation-delay: 1.0s;
}

.container1 .circle:nth-child(4) {
  animation-delay: 1.2s;
}

.container2 .circle:nth-child(4) {
  animation-delay: 1.4s;
}

.index-tips {
  width: 100%;
  font-size: .28rem;
  text-align: center;
  background-size: cover;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 3%;
}


@keyframes loadingAn {
  to {
    width: 100%;
  }
}

@keyframes swingAn {
  from {
    transform: rotate(-5deg);
  }

  to {
    transform: rotate(5deg);
  }
}


@media screen and (min-width: 900px) {
  .catalogue .logo {
    bottom: auto;
  }

  /* .index-tips {
    bottom: auto;
  } */
}

@media screen and (max-height: 755px) {
  .chapter .chapter-list {
    row-gap: .2rem;
  }
}