/* PC */

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nav-wrap {
  position: fixed;
  left: -2.05rem;
  top: 50%;
  margin-top: -2.5rem;
  width: 2.05rem;
  background: rgba(215, 205, 193, 0.8);
  z-index: 9998;
  transition: left 1s ease;
}
.nav-wrap.active {
  left: 0;
}
.nav-wrap .value {
  font-size: 0.28rem;
  font-weight: bold;
  color: #480000;
  text-align: center;
  padding: 0.16rem 0;
  border: #b08c7f;
  cursor: pointer;
}
.nav-wrap .value:hover {
  opacity: 0.6;
}
.nav-wrap .line {
  height: 1px;
  background: #b08c7f;
  margin: 0 0.2rem;
}

.nav-wrap .toggle-box {
  position: absolute;
  right: -40px;
  top: 50%;
  margin-top: -42px;
  cursor: pointer;
  width: 0.4rem;
  height: 0.82rem;
  background: rgba(215, 205, 193, 0.8);
  border-radius: 0 0.4rem 0.4rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section {
  position: relative;
}

.HomePage {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/home_bg.png) left center no-repeat;
  background-size: cover;
  z-index: 1;
  overflow: hidden;
}

.s-logo {
  position: absolute;
  width: 1rem;
  top: 0.2rem;
  left: 1.4rem;
  z-index: 9;
}

.HomePage .home-title-01 {
  position: absolute;
  width: 100%;
  top: 0.6rem;
}

.HomePage .home-title-01 img {
  margin: 0 auto;
  height: 0.18rem;
}
.HomePage .home-title-02 {
  position: absolute;
  width: 100%;
  top: 0.9rem;
  z-index: 9;
}
.HomePage .home-title-02 img {
  margin: 1rem auto;
  width: 9rem;
}

.HomePage .home-men {
  position: absolute;
  width: 7rem;
  bottom: -0.2rem;
  left: 15%;
  z-index: 1;
}

.HomePage .home-men img {
  width: 100%;
}

.HomePage #moving-image {
  position: absolute;
  width: 13.3rem;
  top: 1.5rem;
  right: -13.3rem;
}

.HomePage .home-red {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  animation: wave 3s ease-in-out infinite alternate;
  z-index: 8;
}

@keyframes wave {
  0% {
    transform: skewX(0deg) translateY(0);
    border-radius: 5px;
  }
  25% {
    transform: skewX(5deg) translateY(-2px);
    border-radius: 10px 5px 5px 10px;
  }
  50% {
    transform: skewX(-5deg) translateY(0);
    border-radius: 5px;
  }
  75% {
    transform: skewX(5deg) translateY(2px);
    border-radius: 5px 10px 10px 5px;
  }
  100% {
    transform: skewX(-5deg) translateY(0);
    border-radius: 5px;
  }
}

.HomePage .home-red img {
  width: 110%;
  margin-left: -5%;
  height: 1.4rem;
}

.HomePage .btn-qianyan {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  z-index: 999;
  cursor: pointer;
}

/* Page1 */
.Page1 {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
}

.Page1 .page1-block {
  width: 100%;
  height: 100%;
  display: flex;
}

.Page1 .btn-more {
  position: absolute;
  right: 0.4rem;
  bottom: 0.3rem;
  width: 0.5rem;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.Page1 .btn-more:hover {
  transform: scale(1.05);
}

.Page1 .p1-left {
  width: 3.3rem;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.Page1 .p1-left .wwls-txt1 {
  position: absolute;
  left: 0.8rem;
  top: 1.1rem;
}

.Page1 .p1-left .wwls-txt2 {
  position: absolute;
  left: 1.5rem;
  bottom: 0.9rem;
}

.Page1 .circle-box {
  position: absolute;
  left: -2rem;
  top: 50%;
  margin-top: -2.65rem;
  width: 5.3rem;
  height: 5.3rem;
  z-index: 999;
}
.Page1 .circle-box .turn-table {
  width: 100%;
  height: 100%;
}
.Page1 .circle-box .turn-title {
  position: absolute;
  width: 0.8rem;
  right: 20%;
  top: 1.3rem;
}

.Page1 .lb_list {
  position: absolute;
  left: 3.3rem;
  top: 50%;
  margin-top: -2.65rem;
  width: 2rem;
  height: 5.3rem;
}

.Page1 .lb_list .line {
  position: absolute;
  width: 3.5rem;
  height: 1px;
  border-bottom: 1px dashed #999999;
  top: 0.15rem;
  left: -3.55rem;
  transition: transform 1s ease;
}
.Page1 .lb_list .i .s1 img {
  height: 0.3rem;
}
.lb_list .i .s-txt {
  margin-top: 0.05rem;
}

.Page1 .lb_list .i {
  position: absolute;
  cursor: pointer;
  transition: left 1s ease;
}
.Page1 .lb_list .i1 {
  left: 0.3rem;
  top: 6%;
}

.Page1 .lb_list .i2 {
  left: 0.6rem;
  top: 32%;
}

.Page1 .lb_list .i3 {
  left: 0.8rem;
  top: 55%;
}
.Page1 .lb_list .i4 {
  left: 0.5rem;
  top: 81%;
}

.Page1 .lb_list .i1.now {
  left: 2rem;
}
.Page1 .lb_list .i2.now {
  left: 2.3rem;
}
.Page1 .lb_list .i3.now {
  left: 2.5rem;
}
.Page1 .lb_list .i4.now {
  left: 2.2rem;
}

.Page1 .slider-container {
  margin-left: 4.5rem;
  flex: 1;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.Page1 .Page4_Box {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 5.5rem;
  padding: 0 0 0 0.2rem;
}

.Page1 .Page4_List_Box {
  display: block;
  position: relative;
  padding: 0 0.7rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.Page1 .Page4_List_Box img {
  width: auto;
  height: 100%;
  transition: all 0.2s;
}

.Page1 .Page4_Scroll {
  display: block;
  position: absolute;
  width: 100%;
  height: 0.3rem;
  top: 2.2rem;
}

.Page1 .Page4_Scroll h1 {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: url("../images/time_bg.png") no-repeat;
  background-size: cover;
  cursor: pointer;
}

.Page1 .Page4_Scroll h2 {
  display: block;
  position: absolute;
  width: 0;
  height: 0.15rem;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(159, 102, 46, 1)
  );
  cursor: pointer;
  margin-top: 0.08rem;
}

.Page1 .Page4_Scroll .Page4_Scroll_DragBar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  margin-left: -0.1rem;
  top: 50%;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(217, 194, 171, 0.5);
  animation: pulse 2s infinite ease-in-out;
}

.Page1 .Page4_Scroll .circle-in {
  width: 0.3rem;
  height: 0.3rem;
  background: #9f662e;
  border-radius: 50%;
}

.Page1 .Page4_Scroll img {
  position: absolute;
  width: 0.4rem;
  right: -0.2rem;
}

.Page1 .Page4_Box .scroll-text {
  position: absolute;
  right: 0.3rem;
  font-size: 0.14rem;
  color: #666;
  cursor: pointer;
  padding: 0.02rem 0.05rem;
  border: 1px solid #999;
  border-radius: 0.05rem;
}

.Page1 .Page4_Box .scroll-text:hover {
  color: #fff;
  background: #480000;
  border: 1px solid #999;
}

.Page1 .Page4_Box .step1 {
  top: 2.8rem;
}

.Page1 .Page4_Box .step3 {
  top: 4rem;
}

.Page1 .Page4_Box .step5 {
  top: 3.5rem;
}

.Page1 .Page4_Box .step6 {
  top: 3.7rem;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1); /* 原始大小 */
  }
  50% {
    transform: scale(1.2); /* 放大 1.2 倍 */
  }
}

/* Page2--遗址寻踪 */

.Page2 {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  -webkit-perspective: 2000px;
  perspective: 2000px;
  -webkit-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
  background: #dddddd url("../images/yzxz_bg.png") no-repeat;
  background-size: 100% 90%;
  background-position: center bottom;
}

.Page2 .circle-box {
  position: absolute;
  left: 50%;
  margin-left: -2.2rem;
  top: -2.1rem;
  width: 4.4rem;
  height: 4.4rem;
  z-index: 999;
}
.Page2 .circle-box .turn-table {
  width: 100%;
  height: 100%;
}
.Page2 .circle-box .turn-title {
  position: absolute;
  width: 2.2rem;
  left: 50%;
  margin-left: -1.1rem;
  bottom: 1.2rem;
}

.Page2 .room {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 90vh;
  margin: 0 0 0 -50vw;
  pointer-events: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 500px) rotate3d(1, 0, 0, -1deg)
    rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg);
  opacity: 1;
}

.Page2 .room__side {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: 2px solid #7d6423;
}

.Page2 .room__side--left,
.Page2 .room__side--right {
  width: 4000px;
  height: 85vh;
  background: #d4d4d4;
  transition: all 1.2s ease-in-out;
  pointer-events: auto;
}

.Page2 .room__side--back {
  width: 100vw;
  height: 85vh;
  background: #e9e9e9;
  -webkit-transform: translate3d(0, 0, -4000px) rotate3d(1, 0, 0, 0.1deg)
    rotate3d(1, 0, 0, 0deg);
  transform: translate3d(0, 0, -4000px) rotate3d(1, 0, 0, 0.1deg)
    rotate3d(1, 0, 0, 0deg);
  -webkit-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
  pointer-events: auto;
}

.Page2 .room__side--back .room__img {
  width: 70%;
  height: auto;
}

.Page2 .room__side--back .room__img img {
  width: 100%;
  height: auto;
}

.Page2 .room__side--right {
  right: 0;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-transform: rotate3d(0, 1, 0, -90.03deg);
  transform: rotate3d(0, 1, 0, -90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.Page2 .room__side--right .room__img {
  margin-right: 10%;
  box-shadow: 0px 6px 13px 0px rgba(125, 100, 35, 0.29);
  border: solid 3px rgba(224, 196, 124, 0.29);
  cursor: pointer;
}

.Page2 .room__side--right .room__img:hover {
  transform: scale(1.05); /* 放大系数 */
}

.Page2 .room__side--left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-transform: rotate3d(0, 1, 0, 90deg);
  transform: rotate3d(0, 1, 0, 90deg);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.Page2 .room__side--left .room__img {
  margin-left: 10%;
  /* box-shadow: 0px 6px 13px 0px rgba(125, 100, 35, 0.29); */
  border: solid 3px rgba(224, 196, 124, 0.3);
  position: relative;
  cursor: pointer;
}

.Page2 .room__side--left .room__img:hover {
  transform: scale(1.05); /* 放大系数 */
}

.Page2 .room__side--left .room__img,
.Page2 .room__side--right .room__img {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  max-width: 14%;
  max-height: 75%;
  -webkit-transform: translate3d(0, 0, 10px);
  transform: translate3d(0, 0, 10px);
  width: 100%;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.Page2 .room__img img {
  width: 100%;
}

.room__img.active {
  animation: magentaPulse 2s linear infinite;
}

@-webkit-keyframes magentaPulse {
  from {
    background-color: #8d0200;
    -webkit-box-shadow: 0 0 5px #333;
  }
  50% {
    background-color: #b10e0d;
    -webkit-box-shadow: 0 0 18px #b10e0d;
  }
  to {
    background-color: #8d0200;
    -webkit-box-shadow: 0 0 5px #333;
  }
}

.Page2 .map-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  margin-left: -23%;
  z-index: 999;
}
.Page2 .map-box {
  width: 100%;
  min-height: 3.7rem;
  overflow: visible !important;
}
.Page2 .ban-box {
  position: absolute;
  right: -10%;
  top: 0.6rem;
  background: rgba(90, 81, 59, 0.1);
  width: 2.7rem;
  border: 1px solid #afa3a3;
  border-radius: 0.04rem;
}
.Page2 .ban-box .city-name {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.2rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  border-bottom: 1px solid #afa3a3;
}
.Page2 .ban-box ul {
  padding: 0.15rem 0.2rem;
  max-height: 2.4rem;
  overflow-y: auto;
}
.Page2 .ban-box li {
  display: flex;
  font-size: 0.15rem;
  color: #734123;
  margin-bottom: 0.1rem;
}
.Page2 .ban-box li img {
  width: 0.12rem;
  height: 0.16rem;
  margin-right: 0.1rem;
  margin-top: 0.01rem;
}

.Page2 .ban-box li div {
  line-height: 0.22rem;
}

.Page2 .map-tips {
  font-size: 0.14rem;
  color: #480000;
  position: absolute;
  right: 5%;
  bottom: 0.2rem;
}

/* Page3--英雄事迹 */
.Page3 {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/yxsj_bg.png) center bottom no-repeat;
  background-size: cover;
  z-index: 2;
}

.Page3 .page3-box {
  display: flex;
  justify-content: space-between;
}

.Page3 .p3-left {
  flex: 1;
  padding: 0.6rem 2rem 0 1.1rem;
}

.Page3 .p3-left-top {
  display: flex;
  margin-bottom: 0.2rem;
}

.Page3 .p3-left-top li {
  width: 1.3rem;
  cursor: pointer;
  overflow: hidden;
  margin-right: 0.45rem;
}

.Page3 .p3-left-top li .avatar-box {
  position: relative;
  width: 100%;
  height: 1.6rem;
  overflow: hidden;
}

.Page3 .p3-left-top li .avatar-box .avatar {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.Page3 .avatar-box .video-play {
  width: 0.24rem;
  height: 0.24rem;
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
}

.Page3 .p3-left-top li .name {
  font-size: 0.16rem;
  line-height: 0.38rem;
  color: #060302;
  text-align: center;
}

.Page3 .p3-left-top li:hover .avatar {
  transform: scale(1.05); /* 放大系数 */
}

.Page3 .p3-left-top li:hover .name {
  color: #480000;
  font-weight: bold;
  font-size: 0.17rem;
}

.Page3 .p3-left-bottom {
  display: flex;
  margin-bottom: 0.3rem;
}

.Page3 .p3-left-bottom li {
  width: 4.7rem;
  margin-right: 0.8rem;
  cursor: pointer;
}

.Page3 .p3-left-bottom li:hover h2 {
  margin-top: -0.05rem;
}

.Page3 .p3-left-bottom h2 {
  font-size: 0.3rem;
  line-height: 0.54rem;
  color: #2a180c;
  font-weight: bold;
  transition: margin-top 0.2s ease 0.01s;
}
.Page3 .p3-left-bottom h6 {
  font-size: 0.18rem;
  color: #2a180c;
}

.Page3 .p3-right {
  position: relative;
  width: 4.24rem;
  flex-shrink: 0;
}

.Page3 .circle-box {
  position: absolute;
  right: -0.6rem;
  top: 8%;
  width: 5.3rem;
  height: 5.3rem;
  z-index: 999;
}
.Page3 .circle-box .turn-table {
  width: 100%;
  height: 100%;
}
.Page3 .circle-box .turn-title {
  position: absolute;
  width: 0.8rem;
  left: 20%;
  top: 1.3rem;
}

.Page3 .btn-sf {
  position: absolute;
  left: 24%;
  top: 6.3rem;
  width: 2.48rem;
  cursor: pointer;
  z-index: 999;
}
.Page3 .btn-sf:hover {
  opacity: 0.6;
}

.Page3 .btn-more {
  position: absolute;
  right: 0.8rem;
  bottom: 0.1rem;
  width: 0.5rem;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.Page3 .btn-more:hover {
  transform: scale(1.05);
}

/* Page4--老兵说 */
.Page4 {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/lbs_bg.png) center bottom no-repeat;
  background-size: cover;
  z-index: 2;
  overflow: hidden;
}

.Page4 .page4-block {
  width: 100%;
  height: 100%;
  display: flex;
}

.Page4 .p4-left {
  width: 6rem;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.Page4 .p4-left .wwls-txt1 {
  position: absolute;
  left: 1.5rem;
  bottom: 0.6rem;
}

.Page4 .p4-left .wwls-txt2 {
  position: absolute;
  left: 2.6rem;
  bottom: 0.4rem;
}

.Page4 .circle-box {
  position: absolute;
  left: 50%;
  margin-left: -2.65rem;
  top: -2rem;
  width: 5.3rem;
  height: 5.3rem;
  z-index: 999;
}
.Page4 .circle-box .turn-table {
  width: 100%;
  height: 100%;
}
.Page4 .circle-box .turn-title {
  position: absolute;
  width: 0.8rem;
  left: 50%;
  margin-left: -0.4rem;
  top: 2.2rem;
}

.Page4 .lb_list {
  position: absolute;
  left: 0;
  top: 3.1rem;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.Page4 .lb_list .i {
  position: absolute;
  font-size: 0.3rem;
  color: #bc956e;
  cursor: pointer;
  transition: top 1s ease;
}
.Page4 .lb_list .line {
  position: absolute;
  width: 1px;
  height: 3.5rem;
  border-left: 1px dashed #bc956e;
  top: -3.55rem;
  left: 0.24rem;
  transition: transform 1s ease;
}
.Page4 .lb_list .i .s1 {
  height: 1.2rem;
  font-weight: bold;
  writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr; /* IE旧语法 */
}
.Page4 .lb_list .i1 {
  left: 0.2rem;
  top: 0.1rem;
}
.Page4 .lb_list .i2 {
  left: 0.85rem;
  top: 0.4rem;
}
.Page4 .lb_list .i3 {
  left: 1.5rem;
  top: 1rem;
}
/* .Page4 .lb_list .i4 {
  left: 1.95rem;
  top: 0.8rem;
} */
.Page4 .lb_list .i5 {
  left: 2.15rem;
  top: 0.7rem;
}
.Page4 .lb_list .i6 {
  left: 2.8rem;
  top: 1rem;
}
.Page4 .lb_list .i7 {
  left: 3.45rem;
  top: 0.9rem;
}
.Page4 .lb_list .i8 {
  left: 4.1rem;
  top: 0.6rem;
}
.Page4 .lb_list .i9 {
  left: 4.7rem;
  top: 0.7rem;
}
.Page4 .lb_list .i10 {
  left: 5.35rem;
  top: 0.4rem;
}

.Page4 .lb_list .i.now {
  font-size: 0.36rem;
  color: #ffe0be;
}

.Page4 .lb_list .i1.now {
  top: 1.8rem;
}
.Page4 .lb_list .i2.now {
  top: 2.1rem;
}
.Page4 .lb_list .i3.now {
  top: 2.7rem;
}
/* .Page4 .lb_list .i4.now {
  top: 2.5rem;
} */
.Page4 .lb_list .i5.now {
  top: 2.2rem;
}
.Page4 .lb_list .i6.now {
  top: 2.3rem;
}
.Page4 .lb_list .i7.now {
  top: 2.7rem;
}
.Page4 .lb_list .i8.now {
  top: 2rem;
}
.Page4 .lb_list .i9.now {
  top: 2.4rem;
}
.Page4 .lb_list .i10.now {
  top: 1.7rem;
}

.Page4 .p4-slider {
  margin-left: 2rem;
  flex: 1;
  height: 100vh;
  position: relative;
}

.Page4 .slider-wrap {
  width: 100%;
  height: 100%;
}

.Page4 .slider-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
}

.Page4 .slider-wrap .men-box {
  position: relative;
  height: 70vh;
}

.Page4 .slider-wrap .men-box .thumb {
  height: 100%;
}

.Page4 .slider-wrap .blurb {
  position: absolute;
  width: 3.2rem;
  left: -3.4rem;
  top: 0.2rem;
}
.p4-slider .arrow-container {
  position: absolute;
  left: -1.8rem;
  top: 2.2rem;
  width: 0.7rem;
  height: 0.3rem;
  cursor: pointer;
  padding-top: 0.08rem;
}
.Page4 .slider-wrap:nth-child(1) .blurb {
  width: 3.2rem;
  left: -3.4rem;
  top: 0.2rem;
}
.Page4 .slider-wrap:nth-child(1) .arrow-container {
  left: -3.2rem;
  top: 2rem;
}
.Page4 .slider-wrap:nth-child(2) .slider-box {
  margin-left: 1rem;
}
.Page4 .slider-wrap:nth-child(2) .blurb {
  width: 3rem;
  left: -2.5rem;
  top: 0.2rem;
}
.Page4 .slider-wrap:nth-child(2) .arrow-container {
  left: -2.2rem;
  top: 2rem;
}
.Page4 .slider-wrap:nth-child(3) .blurb {
  width: 4rem;
  left: -3.5rem;
  top: 0.2rem;
}
.Page4 .slider-wrap:nth-child(3) .arrow-container {
  left: -3.2rem;
  top: 2rem;
}
/* .Page4 .slider-wrap:nth-child(4) .blurb {
  width: 3.8rem;
  left: -2.8rem;
  top: 0.4rem;
}
.Page4 .slider-wrap:nth-child(4) .arrow-container {
  left: -2.5rem;
  top: 2rem;
} */
.Page4 .slider-wrap:nth-child(4) .blurb {
  width: 3.8rem;
  left: -2rem;
  top: 0.2rem;
}
.Page4 .slider-wrap:nth-child(4) .arrow-container {
  left: -1.8rem;
  top: 1.7rem;
}
.Page4 .slider-wrap:nth-child(5) .blurb {
  width: 3.4rem;
  left: -2rem;
  top: 1rem;
}
.Page4 .slider-wrap:nth-child(5) .arrow-container {
  left: -1.8rem;
  top: 2.2rem;
}
.Page4 .slider-wrap:nth-child(6) .blurb {
  width: 3.4rem;
  left: -2.5rem;
  top: 0.4rem;
}
.Page4 .slider-wrap:nth-child(6) .arrow-container {
  left: -2.3rem;
  top: 1.7rem;
}
.Page4 .slider-wrap:nth-child(7) .blurb {
  width: 3.8rem;
  left: -2.8rem;
  top: 0.4rem;
}
.Page4 .slider-wrap:nth-child(7) .arrow-container {
  left: -2.5rem;
  top: 2rem;
}
.Page4 .slider-wrap:nth-child(8) .blurb {
  width: 3.8rem;
  left: -2rem;
  top: 0.2rem;
}
.Page4 .slider-wrap:nth-child(8) .arrow-container {
  left: -1.8rem;
  top: 1.7rem;
}
.Page4 .slider-wrap:nth-child(9) .blurb {
  width: 3.8rem;
  left: -2rem;
  top: 1rem;
}
.Page4 .slider-wrap:nth-child(9) .arrow-container {
  left: -1.8rem;
  top: 2.2rem;
}

.p4-slider .arrow {
  position: absolute;
  width: 0.3rem;
  height: 0.03rem;
  opacity: 0;
  animation: moveAndFade 1.5s infinite ease-in-out;
}

.p4-slider .arrow::before {
  content: "";
  position: absolute;
  width: 0.12rem;
  height: 0.12rem;
  border-top: 3px solid #ffe0be;
  border-right: 3px solid #ffe0be;
  transform: rotate(45deg);
}
.p4-slider .arrow-1 {
  left: 0;
}
.p4-slider .arrow-2 {
  left: 0.1rem;
}

@keyframes moveAndFade {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 1; /* 快速淡入 */
  }
  70% {
    opacity: 1; /* 保持可见 */
  }
  100% {
    transform: translateX(30px); /* 向右移动 */
    opacity: 0; /* 淡出 */
  }
}

/* Page5 */
.Page5 {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/ry_bg.png) center bottom no-repeat;
  background-size: cover;
  z-index: 2;
  overflow: hidden;
}
.Page5 .circle-box {
  position: absolute;
  right: -1.6rem;
  top: -1.6rem;
  width: 5.3rem;
  height: 5.3rem;
  z-index: 999;
}
.Page5 .circle-box .turn-table {
  width: 100%;
  height: 100%;
}
.Page5 .circle-box .turn-title {
  position: absolute;
  width: 0.9rem;
  left: 41%;
  top: 1.9rem;
}

.Page5 .ry-ul {
  position: relative;
  margin: 45vh auto 0;
}

.banner-swiper {
  width: 16.6rem;
}

.Page5 .ry-li {
  display: block;
  width: 3.7rem;
  height: 3.1rem;
  background: rgba(72, 66, 60, 0.7);
  cursor: pointer;
  overflow: hidden;
}
.Page5 .ry-li .avatar-box {
  position: relative;
  width: 100%;
  height: 2.08rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Page5 .ry-li .avatar-box .avatar {
  width: 100%;
  transition: all 0.5s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}

.Page5 .ry-li .avatar-box .video-play {
  width: 0.24rem;
  height: 0.24rem;
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
}

.Page5 .ry-li .name-wrap {
  padding: 0.15rem 0.06rem 0;
}

.Page5 .ry-li .name-wrap .h1 {
  font-size: 0.2rem;
  color: #ffe1c2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0.4rem;
}

.Page5 .ry-li .name-wrap .h2 {
  font-size: 0.16rem;
  color: #ffffff;
  margin-top: 0.06rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Page5 .ry-li:hover .avatar {
  transform: scale(1.2);
}

/* Page6 */
.Page6 {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/jd_bg.png) center bottom no-repeat;
  background-size: cover;
  z-index: 2;
  overflow: hidden;
}
.Page6 .title-box {
  padding-top: 0.4rem;
  height: 1.2rem;
  display: flex;
  justify-content: center;
}
.Page6 .title-box img {
  height: 100%;
}

.Page6 .wrapper {
  height: calc(100vh - 1.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.Page6 .wrapper .item-ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.8rem;
}
.Page6 .wrapper .item-ul .item {
  position: relative;
  width: 1rem;
  height: 4.6rem;
  color: #fff;
  background-color: #333;
  border-radius: 0.04rem;
  cursor: pointer;
  transition: height 0.5s ease-in 0.5s, width 0.5s ease-in;
  margin: 0 0.07rem;
}

.Page6 .wrapper .item-ul .item-li:nth-child(odd) .item {
  margin: 0.4rem 0.05rem 0;
}
.Page6 .wrapper .item-ul .item-li:nth-child(even) .item {
  margin: 0 0.05rem 0.4rem;
}

.Page6 .wrapper .item-ul .item .bjPic {
  width: 100%;
  height: 100%;
}

.Page6 .wrapper .item-ul .item-li:nth-of-type(1) .bjPic {
  background-image: url("../images/jd_04.png");
  background-size: cover;
  background-position: center;
}
.Page6 .wrapper .item-ul .item-li:nth-of-type(2) .bjPic {
  background-image: url("../images/bg_zmbn3.jpg");
  background-size: cover;
  background-position: center;
}
.Page6 .wrapper .item-ul .item-li:nth-of-type(3) .bjPic {
  background-image: url("../images/bg_zmbn4.jpg");
  background-size: cover;
  background-position: center;
}
.Page6 .wrapper .item-ul .item-li:nth-of-type(4) .bjPic {
  background-image: url("../images/bg_zmbn5.jpg");
  background-size: cover;
  background-position: center;
}

.Page6 .wrapper .item-ul .item-li:nth-of-type(5) .bjPic {
  background-image: url("../images/bg_zmbn6.jpg");
  background-size: cover;
  background-position: center;
}

.Page6 .wrapper .item-ul .item-li:nth-of-type(6) .bjPic {
  background-image: url("../images/jd_01.png");
  background-size: cover;
  background-position: center;
}
.Page6 .wrapper .item-ul .item-li:nth-of-type(7) .bjPic {
  background-image: url("../images/jd_02.png");
  background-size: cover;
  background-position: center;
}
.Page6 .wrapper .item-ul .item-li:nth-of-type(8) .bjPic {
  background-image: url("../images/jd_07.png");
  background-size: cover;
  background-position: center;
}

.Page6 .wrapper .item-ul .item .dir {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s linear 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Page6 .wrapper .item-ul .item-li:nth-child(1) .dir {
  background: #a26125;
}
.Page6 .wrapper .item-ul .item-li:nth-child(2) .dir {
  background: #a58957;
}
.Page6 .wrapper .item-ul .item-li:nth-child(3) .dir {
  background: hsl(20, 70%, 75%);
}
.Page6 .wrapper .item-ul .item-li:nth-child(4) .dir {
  background: #e2a268;
}
.Page6 .wrapper .item-ul .item-li:nth-child(5) .dir {
  background: #a58957;
}
.Page6 .wrapper .item-ul .item-li:nth-child(6) .dir {
  background: #7f8966;
}
.Page6 .wrapper .item-ul .item-li:nth-child(7) .dir {
  background: #a58957;
}
.Page6 .wrapper .item-ul .item-li:nth-child(8) .dir {
  background: #ecaf45;
}

.Page6 .wrapper .item-ul .item .dir .h2 {
  font-size: 0.32rem;
  color: #ffffff;
  opacity: 0.5;
  writing-mode: vertical-lr;
}
.Page6 .wrapper .item-ul .item .dir .h6 {
  font-size: 0.18rem;
  color: #ffffff;
  opacity: 0.5;
  writing-mode: vertical-lr;
  margin-left: 0.01rem;
}
.Page6 .wrapper .item-ul .item .dir .h6 span {
  writing-mode: horizontal-tb;
}

.Page6 .wrapper .item-ul .item:hover .bjPic {
  opacity: 1;
}

.Page6 .wrapper .item-ul .item .showBox {
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  background-color: rgb(183, 150, 115, 0.6);
  font-size: 0.18rem;
  line-height: 0.3rem;
  color: #ffffff;
  transition: width 0.5s ease-in 0.5s, height 0.5s ease-in,
    opacity 0.5s linear 0.8s;
  opacity: 0;
  overflow: hidden;
}

.Page6 .wrapper .item-ul .item .showBox span {
  display: block;
  margin: 0.15rem 0.15rem 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/*点击展示动画*/
.startShowItem .item-ul .item {
  transition: width 0.5s ease-in 0.5s, height 0.5s ease-in;
}
.startShowItem .item-ul .item.active {
  width: 3.2rem;
}
.startShowItem .item-ul .item.active .showBox {
  width: 100%;
  height: 1.2rem;
  opacity: 1;
}
.startShowItem .item-ul .item.active .dir {
  opacity: 0;
  transition: opacity 0.5s linear 0.2s;
}

/* Page7 */
.Page7 {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
}

.Page7 .circle-box {
  position: absolute;
  left: 20%;
  top: -2.2rem;
  width: 5.3rem;
  height: 5.3rem;
  z-index: 999;
}
.Page7 .circle-box .turn-table {
  width: 100%;
  height: 100%;
}
.Page7 .circle-box .turn-title {
  position: absolute;
  width: 3.4rem;
  left: 50%;
  margin-left: -1.7rem;
  bottom: 1.6rem;
}

.Page7 .news-ul {
  position: absolute;
  left: 15%;
  top: 3.7rem;
}

.Page7 .news-ul li {
  border-bottom: 1px dashed #bcbcbc;
  transition: margin-left 0.5s ease;
}

.Page7 .news-ul li:last-child {
  border-bottom: none;
}

.Page7 .news-ul li a {
  display: block;
  padding: 0.16rem 0;
}

.Page7 .news-title {
  max-width: 6rem;
  font-size: 0.2rem;
  line-height: 0.3rem;
  color: #333333;
}
.Page7 .time {
  font-size: 0.18rem;
  color: #bcbcbc;
  margin-top: 0.03rem;
}

.Page7 .news-ul li:hover {
  color: #2a180c;
  margin-left: 0.1rem;
}

.Page7 .swiper-box {
  position: absolute;
  right: 0.2rem;
  top: 30%;
}

.Page7 .exhibition_hall {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.Page7 .exhibition_hall h4 {
  font-size: 0.3rem;
  text-align: center;
  margin: 0px auto;
  padding-top: 0.5rem;
  color: #000;
}
.Page7 .tline {
  color: #dedede;
}
.Page7 .roundabout_box {
  width: 9rem;
  height: 4.2rem;
  margin: 0.4rem auto 0.2rem auto;
}
.roundabout_box img {
  width: 100%;
}

.roundabout-holder {
  list-style: none;
  width: 5rem;
  height: 4rem;
  margin: 0px auto;
}
.roundabout-moveable-item {
  width: 5.76rem;
  height: 3.24rem;
  cursor: pointer;
  background: #f9f9f9;
}
.roundabout-moveable-item img {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  margin: 0;
}
.roundabout-moveable-item .title {
  font-size: 0.18rem;
  margin-top: 0.1rem;
}
.roundabout-in-focus {
  cursor: auto;
  border-left: 1px #fff solid;
  border-right: 1px #fff solid;
}
.roundabout-in-focus .title {
  display: block;
}
.roundabout-in-focus000:hover {
  -webkit-box-shadow: 0px 0px 20px #787878;
  -moz-box-shadow: 0px 0px 20px #787878;
  background: #f9f9f9;
}
.roundabout-holder .text {
  color: #999;
}
.roundabout-in-focus000:hover span {
  display: inline;
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 8px 20px;
  background: #f9f9f9;
  color: #3366cc;
  z-index: 999;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-left: 1px solid #aaaaaa;
  border-top: 1px solid #aaaaaa;
}
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited {
  outline: none;
  text-decoration: none;
}
.roundabout li {
  margin: 0;
}

/* Page8 */
.Page8 {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
}
.Page8 .Page8-block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.Page8 .text-container {
  height: calc(100vh - 2.2rem);
  padding: 0.6rem 0 0 0;
  background: url(../images/wa_bg.png) center bottom no-repeat;
  background-size: 100% 100%;
}

.Page8 .text-container .p-li {
  font-size: 0.24rem;
  line-height: 0.72rem;
  color: #ffffff;
  text-align: center;
}

.Page8 .text-container .p-li span{
  font-size: 0.36rem;
  font-weight: bold;
}

.Page8 .footer-box {
  width: 100%;
  height: 2.2rem;
  background: url(../images/footer_bg.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
}

.Page8 .footer-title {
  width: 4rem;
}
.Page8 .footer-qrcode {
  width: 0.8rem;
  margin-right: 0.2rem;
}