/* index.html 页面专属css */

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

  position: relative;
}

.world-mapbox {
  font-family: 'KARIBUNARROW';
  position: absolute;
  /* bottom: 1.5rem;
  right: 2rem; */
  top: 67%;
  left: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.world-mapbox .map-id {
  width: 1.37rem;
  height: 1.37rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  user-select: none;
}

.world-mapbox .map-id .map-id-text {
  position: absolute;
  bottom: -0.3rem;
  font-size: .2rem;
  color: #BDBDBD;
  text-align: center;
  user-select: none;
}

.world-mapbox .map-id img {
  width: 1.14rem;
  height: 1.14rem;
  border-radius: 50%;
  filter: brightness(40%);
  /* 减低亮度到 50% */
}

.world-mapbox .map-id img:hover {
  filter: brightness(100%);
  /* 减低亮度到 50% */
}

.world-mapbox .map-id.map-active .map-id-text {
  color: #E7C284;
}

.world-mapbox .map-id.map-active::before {
  content: "";
  width: inherit;
  height: inherit;
  position: absolute;
  background-image: url("../img/world/map-circle.png");
  background-size: 100% 100%;
  animation: bg-rotate 6s linear infinite;
  user-select: none;
}

/* 背景光圈旋转 */
@keyframes bg-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.world-mapbox .map-id.map-active img {
  width: 1.06rem;
  height: 1.06rem;
  filter: brightness(100%);
  user-select: none;
  /* 减低亮度到 50% */
}

/* 设置初始化时隐藏 */
/* .map {
  display: none;
} */

/* 地理风情左右箭头 */
.map-prev,
.map-next {
  width: 24px !important;
  height: 40px !important;
  margin: 0 2vw;
  cursor: pointer;
  background-repeat: no-repeat;
}

.map-prev {
  background-image: url("../img/world/map-before.png");
}

.map-prev:hover {
  background-image: url("../img/world/map-before-a.png");
}

.map-next {
  background-image: url("../img/world/map-next.png");
}

.map-next:hover {
  background-image: url("../img/world/map-next-a.png");
}

.map-textBox {
  position: absolute;
  left: 72%;
  top: 24%;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.7);
}

.map-text {
  font-family: 'KARIBUNARROW';
  width: 2.8rem;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 使内容从顶部开始排列 */
  border: 2px solid rgba(128, 128, 128, 0.5);
  margin: .06rem;
  padding: .1rem;

}

.map-text-title {
  font-size: .28rem;
  color: #FCE99B;
}

.map-text-title::first-letter {
  font-size: .46rem;
}

.map-text-c {
  padding: 0 .14rem .2rem .14rem;
  font-size: .16rem;
  text-align: justify;
}



#video3-1 {
  /* position: absolute; */
}



.world-main{
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}
.world-main-active{
  display: block; 
}

.world-main .iv-background {
  /* display: none; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* object-fit: cover; */
}
.video-container .iv-background{
    object-fit: cover;
}
.world-textBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}



.leftmenu {
  font-family: 'KARIBUNARROW';
  position: absolute;
  top: 50%;
  left: 7%;
  transform: translate(-50%, -50%);
  z-index: 777;
}

.leftmenu .list-container {
  position: relative;
  height: 3.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.leftmenu li {
  cursor: pointer;
  color: white;
  width: 1.76rem;
  height: .48rem;
  list-style-type: none;
  /* 添加这行代码来隐藏小点 */
  margin-left: .3rem;

}

.world-span {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: .18rem;
  background-image: url("../img/world/menu-btn-box.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.world-span-active {
  background-image: url("../img/world/menu-btn-box-active.png");
}


.world-txt{
  position: absolute;
  top: -0.8rem;
  left: .8rem;
  height: .29rem;
  display: flex;
  align-items: center;
  font-size: .24rem;
  color: #fff;
  font-weight: bold;
}

/* 圆点，竖线*/
.world-line {
  position: absolute;
  left: .47rem;
  top: .23rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circle {
  width: .12rem;
  height: .12rem;
  background-color: #bca577;
  border-radius: 50%;
}

.world-line-item {
  height: .6rem;
  margin: .06rem 0;
  width: .02rem;
  background-color: #bca577;
}

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

  position: relative;
}