* {
  margin: 0;
  padding: 0;
}
html,
body {
  transition: all 1s;
  scroll-behavior: smooth;
}
.ancient {
  width: 100%;
  overflow: hidden;
  padding-top: 157rem;
  margin-bottom: 56rem;
}
.ancient .home {
  overflow: auto;
}
.ancient .title {
  font-family: FZ;
  font-weight: 0;
  font-size: 48rem;
  color: #9A3312;
  text-align: center;
  margin-bottom: 24rem;
}
.ancient .paragraph {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16rem;
  color: #5E4A23;
  line-height: 1.6;
}
.ancient .paragraph p {
  margin-bottom: 24rem;
  text-align: left;
}
.ancient .picture-intro {
  height: 28rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14rem;
  color: #9B8A69;
  line-height: 28rem;
  position: relative;
}
.ancient .picture-intro > img {
  width: 20rem;
  vertical-align: middle;
  margin-bottom: 3rem;
}
.ancient .center {
  width: 1200rem;
  margin: 24rem auto 0;
  text-align: center;
}
.ancient .paragraph-1 {
  width: 1200rem;
  margin: 24rem auto 0;
  text-align: center;
  margin-top: 100rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 100rem;
}
.ancient .paragraph-1 .left .title {
  text-align: left;
  line-height: 1.6;
}
.ancient .paragraph-1 .img-wrap {
  margin-left: 64rem;
  transform: translateY(0);
  transition: all 0.1s;
}
.ancient .paragraph-1 .img-wrap .ancient-img1 {
  width: 536rem;
}
.ancient .paragraph-2 {
  width: 1200rem;
  margin: 24rem auto 0;
  text-align: center;
  margin-top: 100rem;
  position: relative;
  height: 770rem;
}
.ancient .paragraph-2 .text {
  width: 683rem;
  position: absolute;
  top: 0;
  right: 0;
}
.ancient .paragraph-2 .img-wrap1 {
  position: absolute;
  left: 0;
  z-index: 1;
  transform: translateY(0);
  width: 469rem;
}
.ancient .paragraph-2 .img-wrap1 > img {
  width: 469rem;
  height: 566rem;
}
.ancient .paragraph-2 .img-wrap1 .picture-intro {
  padding-right: 50rem;
}
.ancient .paragraph-2 .img-wrap2 {
  position: absolute;
  left: 430rem;
  top: 104rem;
  z-index: 2;
  transform: translateY(0);
}
.ancient .paragraph-2 .img-wrap2 > img {
  width: 605rem;
  height: 566rem;
}
.ancient .time-line-page {
  position: relative;
  height: calc(100vh - 70rem);
  width: 100%;
  overflow: hidden;
  transition: all 1s;
  scroll-behavior: smooth;
}
.ancient .time-line-page::-webkit-scrollbar {
  display: none;
}
.ancient .time-line-page .btns {
  width: 100vw;
  position: absolute;
  top: calc(50% - 25rem);
  left: 0;
  z-index: 9;
}
.ancient .time-line-page .btns img {
  width: 60rem;
  height: 60rem;
  cursor: pointer;
}
.ancient .time-line-page .btns img:nth-child(1) {
  position: absolute;
  left: 5%;
  display: none;
}
.ancient .time-line-page .btns img:nth-child(2) {
  position: absolute;
  right: 5%;
}
.ancient .time-line-page .ancient-time {
  height: 120rem;
  width: 100%;
  background: url(/expert/web/static/ancient-axis/ancient-theme-bg.png);
  background-size: 100% 100%;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  opacity: 1;
  z-index: 9;
}
.ancient .time-line-page .ancient-time .line-center {
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 25rem;
  border-top: solid 2rem #9B3009;
  z-index: 0;
}
.ancient .time-line-page .ancient-time .item {
  margin-bottom: 15rem;
  z-index: 1;
  text-align: center;
}
.ancient .time-line-page .ancient-time .item .text {
  height: 17rem;
  font-family: PingFangSC-Regular;
  font-size: 12rem;
  color: #B97451;
  text-align: center;
}
.ancient .time-line-page .ancient-time .item .triangle {
  width: 14rem;
  height: 10rem;
  display: none;
  margin-bottom: -3rem;
}
.ancient .time-line-page .ancient-time .item .line {
  font-size: 20rem;
  color: #B97451;
  text-align: center;
  margin-top: 17rem;
}
.ancient .time-line-page .ancient-time .item .line.button {
  width: 180rem;
  height: 28rem;
  background: #FFFAEB;
  border: 1rem solid #9A3312;
  border-radius: 5rem;
  color: #9A3312;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -3rem;
  margin-top: 10rem;
  cursor: pointer;
  font-family: FZ;
  font-size: 18rem;
}
.ancient .time-line-page .ancient-time .item .line.button.active {
  width: 260rem;
  height: 47rem;
  background: #9A3312;
  border-radius: 5rem;
  overflow: hidden;
  background-size: 100% 100%;
  border: none;
  color: #FFFAEB;
  font-family: FZ;
  font-size: 28rem;
  margin-bottom: -12rem;
  transition: all 0.2s;
}
.ancient .time-line-page .content-page {
  width: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 120rem;
  transition: all 1s;
  display: flex;
  width: 400vw;
}
.ancient .time-line-page .content-page .ancient-time-content {
  width: 100vw;
  padding-bottom: 81rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: url(/expert/web/static/ancient-axis/ancient-theme-bg.png);
  background-size: 100% 100%;
  transition: all 1s;
  overflow: hidden;
}
.ancient .time-line-page .content-page .ancient-time-content > div {
  margin-top: 64rem;
}
.ancient .time-line-page .content-page .ancient-time-content .intro {
  margin-top: 132rem;
}
.ancient .time-line-page .content-page .ancient-time-content .picture-intro {
  height: 28rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14rem;
  color: #9B8A69;
  line-height: 28rem;
  position: relative;
}
.ancient .time-line-page .content-page .ancient-time-content .picture-intro > img {
  width: 20rem;
  vertical-align: middle;
  margin-bottom: 3rem;
}
.ancient .time-line-page .content-page .ancient-time-content .title {
  text-align: left;
  height: 53rem;
  font-family: FZ;
  font-weight: 0;
  font-size: 48rem;
  color: #9A3312;
}
.ancient .time-line-page .content-page .ancient-time-content .img-wrap {
  width: 755rem;
  margin-right: 57rem;
  height: 100%;
}
.ancient .time-line-page .content-page .ancient-time-content .img-wrap > img {
  width: 755rem;
  height: 597rem;
}
.ancient .time-line-page .content-page .ancient-time-content .img-wrap .ancient-img1 {
  width: 536rem;
}
.ancient .time-line-page .content-page .ancient-time-content .img-wrap .carousel-item > img {
  width: 755rem;
  height: 597rem;
}
.ancient .time-line-page .content-page .ancient-time-content .img-wrap .picture-intro {
  display: flex;
  align-items: flex-start;
  z-index: 1;
  margin-bottom: 16rem;
}
.ancient .time-line-page .content-page .ancient-time-content .img-wrap .picture-intro > img {
  margin-top: 10rem;
  margin-right: 8rem;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .paragraph {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16rem;
  color: #5E4A23;
  line-height: 1.6;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .paragraph p {
  margin-bottom: 24rem;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .mini-title {
  height: 35rem;
  font-family: FZ;
  font-weight: 0;
  font-size: 32rem;
  color: #9A3312;
  margin: 24rem 0;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .content {
  width: 742rem;
  text-align: left;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .view-tips {
  width: 189rem;
  height: 33rem;
  font-family: FZ;
  font-size: 18rem;
  color: #996724;
  text-align: center;
  line-height: 33rem;
  background: url(/expert/web/static/history4-btn-bg.png);
  background-size: 100% 100%;
  margin-top: 47rem;
  cursor: pointer;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .page-scroll {
  height: 300rem;
  overflow-y: scroll;
  padding-right: 18rem;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .page-scroll::-webkit-scrollbar {
  width: 8rem;
  height: 100%;
  background: url(/expert/web/static/scroll-bar.png);
  background-size: 3rem 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.ancient .time-line-page .content-page .ancient-time-content .intro .page-scroll::-webkit-scrollbar-thumb {
  background: url(/expert/web/static/scroll-bg.png);
  background-size: 100% 100%;
}
.ancient .carousel-wrap {
  position: relative;
}
.ancient .carousel-wrap .carousel-item {
  position: absolute;
  opacity: 0;
}
.ancient .carousel-wrap > :nth-child(1) {
  opacity: 1;
}
.ancient .indicator {
  height: 28rem;
  padding-bottom: 30rem;
  margin-top: 45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  z-index: 9;
  width: 755rem;
}
.ancient .indicator div {
  width: 28rem;
  height: 28rem;
  border-radius: 100%;
  margin: 0 5rem;
  position: relative;
  cursor: pointer;
}
.ancient .indicator div::after {
  width: 10rem;
  height: 10rem;
  content: '';
  position: absolute;
  left: calc(50% - 5rem);
  top: calc(50% - 5rem);
  background: #9a3312;
  border-radius: 100%;
}
.ancient .indicator div.active {
  background: url('/expert/web/icon/carousel-active.png');
  background-size: cover;
  position: relative;
}
.ancient .indicator div.active::after {
  background: none;
}