.gallery-title {
  height: 100vh;
  width: 100vw;
  background-color: #f2f2f2;
  height: 100vh;
  background-color: #f2f2f2;
  /* 保留背景色作为后备选项 */
  background-image: url('../img/gallery/background.jpg');
  /* 添加背景图片 */
  background-size: cover;
  /* 使背景图片覆盖整个div */
  background-position: center;
  /* 背景图片居中显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  background-attachment: scroll;
  /* 背景图片固定，可选 */

  position: relative;
}

.gallery-content1 {
  background-color: rgba(0, 0, 0, 0.64);
  border: 1px solid #A88E5D;
  width:4.78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: .26rem;
  height: 5.2rem;
}

.gallery-img1 {
  width: 100%;
  height: 100%;
}


.gallery-img3 {
  /* width: 38.93vw; */
  /* height: 19vw; */
  width: 100%;
  height: 100%;
}

.gallery-more {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: .42rem;
  height: 1.84rem;
  cursor: pointer;
}

.gallery-content2 {
  position: relative;
  margin-left: .2rem;
  border: 1px solid #A88E5D;
  background: rgba(0, 0, 0, 0.64);
  width: 8.23rem;
  padding: .26rem;
  display: flex;
  flex-direction: column;
  height: 5.2rem;
}


.gallery-parts {
  width: 10.9rem;
  height:4.76rem;
  display: flex;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}

.mapbox {
  display: flex;
  /* padding: 0.73vw 0 0 1.13vw; */
  width: 7.68rem;
  height: 1.38rem;
  /* width: 100%; */
}

.map-img {
  width: 1.72rem;
  height: 1.38rem;
  object-fit: cover;
  transition: width 0.5s ease;
}

.map-img-active {
  width: 2.49rem;
  /* 鼠标悬浮时的宽度 */
}

/* 弹窗 */
#galleryimg-pop {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1.33vw;
  z-index: 1000;

  justify-content: center;
}

.galleryimg-pop {
  background-image: url(../img/video-linebox.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 70.13vw;
  height: 40.73vw;

  position: relative;
}

.pop-buttonbox {
  position: relative;
}

.download-img {
  width: .4rem;
  position: absolute;
  left: -0.07vw;
  top: 13.33vw;
  cursor: pointer;
}

.galleryimg-pop-img img {
  padding-top: 1.13vw;
  padding-left: 1.2vw;
  width: 67.6vw;
  height: 38.27vw;
}



#galleryvideo-pop {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1.33vw;
  z-index: 1000;

  justify-content: center;
}

.video-popup {
  background-image: url(../img/video-linebox.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 63.33vw;
  height: 36.8vw;

  position: relative;
}

#video-popup {
  display: none;
  position: fixed;
  left: 34.67vw;
  top: 33.33vw;
  transform: translate(-50%, -50%);
  padding: 1.33vw;
  z-index: 1000;

  justify-content: center;
}

.video-popup {
  background-image: url(../img/video-linebox.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 63.33vw;
  height: 36.8vw;

  position: relative;
}

#index-pop {
  padding-top: 1.13vw;
  padding-left: 1.2vw;
  width: 60.8vw;
  height: 34.4vw;
}

#video-pop-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-box {
  position: relative;
  width: 100%;
  height: 3.64rem;
  margin-bottom: .19rem;
}

.img-box:hover .hover-box {
  display: block;
}

.img-box:active .click-box {
  display: block;
}

.img-box .hover-box {
  width: 2.76rem;
  height: 1.59rem;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: none;
  border-radius: 5px;
}



.click-box {
  width: 276px;
  height: 159px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  display: none;
  border-radius: 5px;
}

 .img-hover {
  /* width: 7vw; */
  width: 1.4rem;
  height: .4rem;
  background-image: url(../img/view/img-btn.png);
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #E9C58B;
  cursor: pointer;
}
 .img-hover span::after {
  content: "";
  margin-left: .05rem;
  width: .08rem;
  height: .13rem;
  display: inline-block;
  background-image: url(../img/view/icon-arrow.png);
  background-size: cover;
}
 .img-hover:hover{
  background-image: url(../img/view/img-btn-a.png);
  color: #000;
}
 .img-hover:hover span::after {
  background-image: url(../img/view/icon-arrow-a.png);
}


.img-box:hover .hover-box-index {
  display: block;
}

.img-box:active .click-box-index {
  display: block;
}

.hover-box-index {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none;
  border: 1px solid #E9C58B;
}

.click-box-index {
  width: 39vw;
  height: 19vw;
  position: absolute;
  top: 4.33vw;
  left: 1.33vw;
  z-index: 6;
  display: none;
}

#gallery-video {
  padding-top: 1.13vw;
  padding-left: 1.2vw;
  width: 60.8vw;
  height: 34.4vw;
}

.galleryvideo-click {
  width: 4.27rem;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease-in-out;
  height: 2.45rem;
}

.galleryvideo-click:hover {
  transform: scale(1.02);
}

.galleryvideo-click:hover .hover-box-video {
  display: flex;
}

.galleryvideo-click:hover .index-video-title {
  display: none;
}

.hover-box-video {
  font-size: .17rem;
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  top: 0;
  color: #ddc281;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid #E9C58B;
}

.hover-box-video .video-hover {
  width: 0.84rem;
    margin-bottom: 0.13rem;
}

.index-video-title {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  right: 0;
  padding: .08rem 0;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .16rem;
}

.small-video {
  width: 0.32rem;
  height: 0.32rem;
  margin-right: .13rem;
}

.galleryimg-click {
  transition: all 0.3s ease-in-out;
  position: relative;
}

.img-hover-map {
  width: 4.67vw;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
}

.galleryimg-click:hover {
  transform: scale(1.02);
  position: relative;
  z-index: 10;
  box-shadow: 0 0 3px 1px #E9C58B;
}

.galleryimg-click:hover .hover-map-index {
  display: block;
}

.galleryimg-click:active .click-map-index {
  display: block;
}

.hover-map-index {
  width: 100%;
  height: 1.38rem;
  background-color: rgba(0, 0, 0, 0.64);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: none;

  border: 1px solid transparent;
  box-shadow: 0 0 3px 1px #E9C58B;
}

.click-map-index {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: none;
}


.img-hover span{
  font-size: .16rem;
}