* {
  padding: 0;
  margin: 0;
}
.landmark {
  height: 100%;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
.landmark .to-detail {
  opacity: 1;
  color: #9A3312;
  font-size: 20rem;
  font-weight: 400;
  font-family: "FZ";
  position: absolute;
  bottom: 66rem;
  right: 64rem;
  z-index: 9;
  line-height: 30rem;
  text-decoration: none;
  cursor: pointer;
}
.landmark .to-detail span {
  position: relative;
  display: inline-block;
}
.landmark .to-detail img {
  width: 26rem;
  height: 25rem;
  margin-left: 12rem;
  margin-right: 6rem;
}
.landmark .to-detail img:nth-child(1) {
  margin-bottom: -5rem;
}
.landmark .to-detail .right {
  width: 6rem;
  height: 12rem;
  opacity: 1;
  margin-left: 0;
}
.landmark .bg-img {
  height: 100%;
  width: 100vw;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.landmark .bg-img img.bg-cover {
  width: 100%;
  opacity: 0.2;
}
.landmark .bg-img img.axis {
  width: 50rem;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  bottom: 0;
  transform: translate(-50%, 0);
  z-index: 3;
}
.landmark .bg-img .start,
.landmark .bg-img .end {
  width: 150rem;
  position: absolute;
  left: calc(50% - 75rem);
  color: #919191;
  font-family: "PingFang SC";
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16rem;
}
.landmark .bg-img .start {
  top: 30rem;
}
.landmark .bg-img .end {
  bottom: 30rem;
}
.landmark .locations {
  position: absolute;
  width: 378rem;
  height: 100%;
  left: calc(50% - 189rem);
  z-index: 99;
  opacity: 1;
  transition: all 0.5s;
}
.landmark .locations .oprate {
  position: absolute;
  width: 615rem;
  height: 68rem;
  left: calc(50% - 307rem);
  bottom: 66rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.landmark .locations .oprate .left,
.landmark .locations .oprate .right {
  display: flex;
}
.landmark .locations .oprate .left > div,
.landmark .locations .oprate .right > div {
  width: 136rem;
  height: 68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/expert/web/static/landmark/landmark-group.png);
  background-size: 100% 100%;
  color: #996724;
  font-size: 24rem;
  font-weight: 400;
  font-family: "FZ";
  cursor: pointer;
}
.landmark .locations .oprate .left > div.active,
.landmark .locations .oprate .right > div.active {
  background: url(/expert/web/static/landmark/landmark-group-active.png);
  background-size: 100% 100%;
}
.landmark .locations .oprate .left div {
  margin-right: 7rem;
}
.landmark .locations .oprate .right div {
  margin-left: 7rem;
}
.landmark .locations .wrap {
  width: 100%;
  height: 80vh;
  margin: 5vh 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
}
.landmark .locations .wrap.local-out-up {
  animation: outUp 0.5s ease-in-out;
}
.landmark .locations .wrap.local-in-down {
  animation: inDown 0.5s ease-in-out forwards;
}
@keyframes outUp {
  0% {
    height: 80vh;
    opacity: 1;
  }
  100% {
    height: 75vh;
    opacity: 1;
  }
}
@keyframes inDown {
  0% {
    height: 75vh;
    opacity: 1;
  }
  100% {
    height: 80vh;
    opacity: 1;
  }
}
.landmark .locations .wrap .both-land {
  display: flex;
}
.landmark .locations .wrap .both-land > div:nth-child(1) {
  margin-right: 16rem;
}
.landmark .locations .wrap .both-land > div:nth-child(2) {
  margin-left: 16rem;
}
.landmark .locations .wrap .local {
  text-align: center;
  height: 50rem;
  line-height: 50rem;
  color: #5E4A23;
  background: url(/expert/web/static/landmark/local-nomal-l.png), url(/expert/web/static/landmark/local-nomal-r.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left center,right center;
  background-size: auto 100%;
  cursor: pointer;
}
.landmark .locations .wrap .local span {
  display: inline-block;
  margin: 0 45rem;
  height: 100%;
  font-size: 20rem;
  min-width: 100rem;
  background: url(/expert/web/static/landmark/local-nomal-c.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 center;
}
.landmark .locations .wrap .local.active {
  background: url(/expert/web/static/landmark/local-active-l.png), url(/expert/web/static/landmark/local-active-r.png);
  background-repeat: no-repeat, no-repeat;
  background-position: left center,  right center;
  background-size: auto 100%;
  overflow: hidden;
  color: #F6E7D6;
}
.landmark .locations .wrap .local.active span {
  display: inline-block;
  margin: 0 40rem;
  height: 100%;
  font-size: 24rem;
  background: url(/expert/web/static/landmark/local-active-c.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 center;
}
.landmark .discrition {
  width: 50vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  opacity: 0;
}
.landmark .discrition .title {
  display: flex;
  justify-content: center;
  width: 564rem;
  position: absolute;
  left: calc(50% - 320rem);
  top: calc(50% - 220rem);
  font-size: 32rem;
  line-height: 36rem;
  gap: 16rem;
  align-items: center;
  color: #B16E15;
}
.landmark .discrition .title .num {
  font-size: 24rem;
  width: 36rem;
  background-color: #996724;
  border-radius: 100%;
  color: #fff;
  text-align: center;
}
.landmark .discrition .content {
  width: 564rem;
  height: 625rem;
  position: absolute;
  left: calc(50% - 320rem);
  top: calc(50% - 312rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.landmark .discrition .content .bref {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.landmark .discrition .content .name-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rem;
}
.landmark .discrition .content .name-wrap .name {
  margin: 0 17rem;
  font-size: 36rem;
  color: #5C4B22;
}
.landmark .discrition .content .name-wrap .name.name-change {
  transition: all 1s;
  animation: nameChange 1.5s linear forwards;
}
@keyframes nameChange {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.landmark .discrition .content .name-wrap .line-wrap {
  position: relative;
  height: 24rem;
  flex: 1;
}
.landmark .discrition .content .name-wrap .line-wrap .line {
  position: absolute;
  left: 0;
  width: 100%;
  top: 12rem;
  border-top: solid 1rem #A34317;
}
.landmark .discrition .content .name-wrap .line-wrap .point-mini {
  width: 8rem;
  height: 8rem;
  opacity: 1;
  background: #a34317;
  border-radius: 100%;
  position: absolute;
}
.landmark .discrition .content .name-wrap .line-wrap .point-big {
  width: 12rem;
  height: 12rem;
  opacity: 1;
  background: #a34317;
  position: absolute;
  border-radius: 100%;
}
.landmark .discrition .content .name-wrap .line-wrap .point-big::after {
  position: absolute;
  content: "";
  left: -7rem;
  top: -7rem;
  border: dashed 1rem #A34317;
  border-radius: 100%;
  height: 24rem;
  width: 24rem;
}
.landmark .discrition .content .name-wrap .line-wrap.left .point-mini {
  right: 36rem;
  top: 9rem;
}
.landmark .discrition .content .name-wrap .line-wrap.left .point-big {
  right: 0;
  top: 6rem;
}
.landmark .discrition .content .name-wrap .line-wrap.right .point-mini {
  left: 36rem;
  top: 9rem;
}
.landmark .discrition .content .name-wrap .line-wrap.right .point-big {
  left: 0;
  top: 6rem;
}
.landmark .discrition .content p {
  color: #787070;
  line-height: 1.4;
  font-weight: normal;
  text-align: left;
  font-size: 20rem;
  margin-bottom: 52rem;
}
.landmark .discrition .content p.p-change {
  transition: all 1s;
  animation: pChange 1.5s linear forwards;
}
@keyframes pChange {
  0% {
    margin-top: 0;
    opacity: 1;
  }
  50% {
    margin-top: -20rem;
    opacity: 1;
  }
  51% {
    margin-top: 20rem;
    opacity: 1;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}
.landmark .discrition .content .more {
  width: 159rem;
}
.landmark .banners {
  height: 100vh;
  width: 50vw;
  right: 0;
  top: 0;
  position: absolute;
  z-index: 6;
}
.landmark .banners .img-wrap {
  position: absolute;
  width: 625rem;
  height: 625rem;
  top: calc(50% - 312rem);
  left: calc(50% - 248rem);
}
.landmark .banners .img-wrap .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  animation: rotateBg 35s linear infinite;
}
.landmark .banners .img-wrap .img {
  position: absolute;
  width: 493rem;
  height: 493rem;
  left: 67rem;
  top: 67rem;
  z-index: 3;
  border-radius: 100%;
  overflow: hidden;
}
.landmark .banners .img-wrap .img.change {
  animation: imgChange 1.5s ease forwards;
}
.landmark .banners .img-wrap .img .main {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
}
.landmark .banners .img-wrap .img .main img {
  position: absolute;
  width: 100%;
  height: 100%;
}
.landmark .banners .img-wrap .img .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  animation: rotateCircle 40s linear infinite;
}
@keyframes imgChange {
  0% {
    margin-top: 0;
    opacity: 1;
  }
  50% {
    margin-top: -30%;
    opacity: 0;
  }
  51% {
    margin-top: 30%;
    opacity: 0.3;
  }
  100% {
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes rotateBg {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotateCircle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.landmark .axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translate(-50%, 0);
  z-index: 10;
}
.landmark .axis img {
  height: 100%;
  display: block;
  width: 40rem;
}
.landmark .axis .inner,
.landmark .axis .outer {
  position: absolute;
  left: 0;
  top: 0;
  width: 40rem;
}
.landmark .axis #axisInner {
  height: 0%;
  overflow: hidden;
}